Monday, May 11, 2015

Build 2015 - Highlights for .NET Web Developers

For those overwhelmed by the 22 pages of videos to come out of Build this year, here are the main highlights relevant to us as ASP.NET developers.

.NET Announcements at Build 2015
Including release candidates of the .net framework, ASP.NET and Visual Studio

Build Videos for ASP.NET web developers

Introducing ASP.NET 5
Deep Dive into ASP.NET 5
What's New in C# 6 and Visual Basic 14
Modern Web Tooling in Visual Studio 2015
Modern Web Tooling
A Lap Around .NET 2015
"Project Spartan": Introducing the New Browser and Web App Platform for Windows 10
Microsoft Edge
What’s New in F12 for "Project Spartan"
Using Git in Visual Studio

Friday, March 20, 2015

How to Reduce Deployment Risk

Functionality Switches

Feature flags controllable by configuration or an "admin tool", are an excellent way to deploy new features. When going live, you can turn on a feature only for your Production test user, and run some smoke tests, before turning the feature on for the wider world.

Any issues found later can then easily be mitigated by "switching off" the broken features for live users, while at the same time, leaving them on for the test users so that some fault investigation can be done on Production.

Providing there are no breaking regression changes, this will help to avoid rollbacks.

Good logging

Every significant action should be monitored and logged. Obviously this includes calls to external services, but you should also strive to implement logging based on items in the Acceptance criteria. Log results of actions so that you can see if they match expectations. This allows for granular diagnosis so you can see exactly what isn't working and where.

Reduced Functionality Instead of Errors

A good, defensive technique is to fall back to previous functionality when something fails, rather than giving the user an error. Obviously this depends on the scenario and this won't always be possible.

However, combined with functionality switches, this can allow users to continue to use your application while you identify a fault using your production test users. This is also greatly dependent on your logging, of course, as your fault will not be manifesting in the interface.

Thursday, March 12, 2015

Hololens Speculation: What Kind of Applications Can We Build?

I'm so excited about Hololens. Its creative potential is huge. There are a wide variety of applications we can develop for it.

I believe the demos shown so far are barely scratching the surface of what we can do with the Hololens. Once the imagination of the development community warms up, and its abilities are clear, we're going to see world changing ideas. Industries will be turned upside down, lives will be changed, and millionaires will be made.

Of course, I'm speculating on what it can and can't do based on the minimal demos we've seen so far, but, providing they turn out to be accurate, there is plenty to go with already. I'm going to make some assumptions on its abilities, but with this, highlight some of the many directions we can take in creating for the interface of the future.

Presence Sharing

One of the most interesting uses for the Hololens is allowing others to share your experience, and interact with it. This opens up many prospects for communication and collaboration in virtually every industry.

Think about how cool GoPro cameras are and what we're able to do with them. Now imagine seeing the video live and being able to interact with it.

This particular feature also has plenty of promise for gaming, with users interacting with the same reality, or the same game area.

Reality Overlays

Probably the main purpose of Hololens is its ability to overlay the imagined onto the real. We have seen some examples of this, and there is so much more to come. Interfaces will probably make up the bulk of these overlays, and there is plenty of scope for variety in how these work. But the possibilities go much further than just interfaces.

We've seen game characters and levels merge with the real world. What about augmenting our environment with photo-realistic people, new fixtures and furniture, or movie scenes? Or changing our atmosphere with movement, light, and sound? Virtual Reality might do this better. But having the real world still in view gives a certain edge to the atmosphere.

Gesture Controlled Augmentations

The use of gesture controlled interfaces might have been around for a while, but it takes on a new potency in the realm of artificial reality. Rather than interacting with things on a screen, you'll now be able to "physically" interact with "objects" in your world.

And while the recognisable gestures are still quite simple, this will only get more complex with time. As the Kinect technology gets better at recognising more fingers and more intricate movements, it will allow for more advanced control in much the same way as musical instruments or crafts.

Reality Recognition

Let's not forget that the Hololens cameras can be used to process the real world and the things in it. Measuring distances, identifying objects, detecting movement and more can all lend to the interaction.

How far can we take this real world processing? Imagine, tailoring your experience based on what the Hololens sees, such as popping up an information snippet of a visible landmark, finding your friends in a crowd, or identifying danger.

Voice

Like gesture controls, voice finds new opportunities in this context. It's part of the experience, narrating what you see, talking over the internet, recognising commands, sometimes recording. What else?

*

There are probably several more Hololens abilities that I've missed, so please leave a comment if you can think of any. Each of the items above has the potential for some groundbreaking new applications. Combine two or more concepts and the possibilities increase exponentially.

We just need to start thinking differently about what we can do. Rather than extrapolating our current computers and software to this new paradigm (which we should still do), we should try to think about what new possibilities all these new capabilities afford us, separately as well as combined.

I didn't want to get too deep into these possibilities, I really just wanted to highlight them, to get people thinking about how they might use each of them.

It'll probably take a few years for the world to realise what Augmented Reality can do for it. But all ideas are built on other ideas.

We're just getting started.

Tuesday, February 24, 2015

A Quick Summary of DevOps

What exactly is DevOps?

DevOps is the practice of operations and development engineers participating together in the entire service lifecycle, from design through the development process to production support. (http://theagileadmin.com/what-is-devops/)

Like Agile, it's a rather large topic, but the main point of it is that developers work much more closely with Operations to ensure a more resilient release cycle. It's also characterised by Operations using many of the same techniques as developers - for example: source control, automation, and of course the Agile methodology.

 Adopted by all the big tech companies, DevOps allows for hyper-efficient deployments with much faster releases and far less production issues. In fact, the highest performers use DevOps to do 30x more deployments, 8000 times faster, 2x more successful, with 12x faster Mean Time To Repair than the worst performers (those who aren't using DevOps).

As a result, Amazon deploy to Production every 11.6 seconds. And they have very few Production issues. How? DevOps.

There's a lot to it, but some of the basic concepts that allow for this level of efficiency include the following.

Smaller Changes, Deployed More Frequently

Some of the biggest disasters in IT history have come from projects that had the longest lead times. Usually this is due to one reason: When they went live, it was the first time the code had ever been in a Production environment. To be good at DevOps and achieve a high level of fast, reliable releases, you need to get good at releases by doing more of them, more often. This involves shifting to a model of smaller changes, and more efficient releases.

Do Painful things More Frequently

There needs to be easier access to the painful process of releasing to Production. This is in contrast to traditional thinking that tends to treat releases as big scary things that everyone has to make a big deal over. Being efficient at DevOps involves streamlining and improving the release process in the same way we have streamlined our Development and Testing practices over the past few years.

Common Build Mechanisms

Rather than having distinctly different environments and setups for Development, Test, and Production, there needs to be a concerted effort to make all these environments as similar as possible.

Configuration as Code

To make it easier to implement Common Build Mechanisms, our deployment artifacts such as configuration, build scripts, automation scripts etc should be treated in the same way as code and managed under Source Control.

Automation

Like regression testing, deployments and environment setups should be as fully automated as possible, to allow for frequent and error-free repetition.

Definition of Done to include "Works in a Production Environment"

To take DevOps seriously, the ability to deploy to Production needs to be built into work processes.

Targeted Deployments

Techniques such as feature flags and deploying changes to small subsets of users can allow an organisation to get started with faster deployments.

High Trust, Peer Review over Approval

To adopt DevOps, we need to free ourselves of the learned behaviour that low trust, approval barriers and long lead times make our products more stable. The evidence is that they don't. Also, in studies, higher trust and lower lead times are seen as an indicator of both quality and happiness. While there might be some barriers to overcome up front, these changes overall make everyone more confident, more productive, and more efficient.

More interaction between Development and Operations

The underlying concept of DevOps is more interaction between Development and Operations. While before, we had a wall of procedures and artifacts between the two departments where work was thrown over, the goal now is to "knock that wall over and build a bridge". This means Operations getting more involved in the process earlier on to create common build mechanisms, configurations and automation. And it also means Developers being more involved in the release process.

Conclusion

Our job as developers is to release to Production without breaking anything. To get better at that, we need to do it more. A lot more.

Much the same as the adoption of automated testing, work needs to be done upfront to set up the infrastructure to allow DevOps to be safe and efficient. But like automation testing, these efforts pay huge, ongoing dividends.

DevOps is being used by most of the large tech companies and is allowing them to become extremely competitive by extensively reducing their lead times and quality issues. Those who refuse to adopt DevOps risk being left far, far behind.
*
There is a lot more to DevOps that I haven't mentioned here. Learn more with this course.
http://www.microsoftvirtualacademy.com/training-courses/assessing-and-improving-your-devops-capabilities If you don't have much time, make sure you at least watch video 2.

Thursday, February 19, 2015

Multitasking with My Work in Visual Studio

In Visual Studio 2012+ there is a button in the Team Explorer you may not use as often as you should. "My Work" contains 4 sections.

In Progress Work

This contains your current "context", what you're currently working on, your pending code changes.

Suspended Work

This is the most interesting feature, I think. It allows you to change the context which you are working in so you can switch tasks on request.

Imagine you're deep into coding a feature and an urgent bug is raised that demands immediate attention. Your code might not even compile yet but you have to drop it and get a working setup.

Simple. Just hit "Suspend" and your current changes will be suspended. But not just your changes. This doesn't just save the current state of the source code, it saves EVERYTHING, breakpoints, watches, open windows.

When the bug fix is complete and checked in, simply drag your suspended work back into the "In Progress" section.

This very short video explains the feature in more detail.

Available Work Items

A handy query that shows all the work items currently assigned to you. This includes bugs automatically raised when your changes have broken the build. It can be filtered by Iteration and has a handy link for creating new tasks.

Perhaps most usefully, dragging a task into the "In Progress" section changes its status, which is reflected on the team scrum board.

Code Reviews

Code reviews you have requested or received display here, and various filters can be applied. You are doing code reviews using Visual Studio, aren't you?

Conclusion

In short, the My Work window provides a handy at-a-glance look at your current work in progress, as well as offering the extremely useful Suspended work feature which allows you to quickly and easily take on urgent tasks without losing your context.

Friday, February 13, 2015

The breakpoint will not currently be hit. No symbols have been loaded for this document

Here are some ways to fix the notorious "The breakpoint will not currently be hit. No symbols have been loaded for this document" issue in Visual Studio. Many of the steps may not apply to your situation, but I've tried to make this a comprehensive list that you can check whenever you get this issue.
  1. Get latest code from Source Control
  2. Compile.
  3. Run iisreset to reset IIS if you are using IIS.
  4. Attach to the appropriate IIS instance (or all of them).
  5. Add a breakpoint and run your application.
If you miss step 3, your breakpoint will not be hit, even though your assemblies has compiled and breakpoint is shown as active. You may need to run iisreset in an administrator command prompt to ensure you have the right permissions.

Some more ideas if the above doesn't work:

Check where your dll is being referenced from and ensure that is the code you're trying to debug.

Check you are in the correct mode when building: Debug/Release as they may put the dlls in different places.

Are you attached to the correct process?

For a website on IIS, is the code you're working on the same as the code running in IIS? 

Go to Debug > Windows > Modules and if the relevant dll is there, right click it and load symbols.
If it's not in the list, try running the code anyway. Sometimes even though it says the breakpoint will not be hit, it's only because the dll is not loaded until you enter a scenario that needs it. Try the scenario that depends on the dll, and it may just hit the breakpoint anyway.

Restart your browser. You might have something cached from an older dll.


Do you have any other tricks to get around this issue? Leave a comment!

Tuesday, November 25, 2014

Creating Responsive Tables


When building a responsive website where the main responsibility is to display data in tables, one needs to put some thought into how to present this data on smaller screens. Tables are, of course, as wide as the number of data columns, so this presents some challenges with how to display it when the view width is limited.

Using Bootstrap's table-responsive

Bootstrap's table-responsive class offers one solution, where the table is given a horizontal scrollbar. This is not ideal as it requires the user to scroll the table to see all the data in a row. This can be done by touching the table but this is not obvious and some users may think they need to use the scrollbar. This then reduces usability when there are more than a few rows in the table - the user would scroll to the bottom of the table before scrolling horizontally, leading to some frustrating vertical scrolling if the data they are looking at is back up at the top of the table.

Rotating the Data

The following is an alternative approach. The idea is to "rotate" the data so that columns become rows and rows become collections of rows. So this table:



Looks like this on a smaller screen:


Achieving this with CSS poses a couple of challenges. How do you lay out table header cells vertically, and flow the data cells in this way? Well obviously you can't, so you need to employ a couple of tricks.

The first thing to do is set up a simple table. It can use the bootstrap table class as well as our custom responsive-table class (note  this is different to the bootstrap table-responsive class).

<table class="table responsive-table">
   
<thead>
   
<tr>
       
<th>Number</th>
       
<th>First Name</th>
       
<th>Last Name</th>
       
<th>Address</th>
       
<th>Points</th>
   
</tr>
   
</thead>
   
<tbody>
   
<tr>
       
<td data-content="Number">1</td>
       
<td data-content="First Name">Sam</td>
       
<td data-content="Last Name">Smith</td>
       
<td data-content="Address">12 Smith Road</td>
       
<td data-content="Points">87</td>
   
</tr>
   
<tr>
       
<td data-content="Number">2</td>
       
<td data-content="First Name">Bob</td>
       
<td data-content="Last Name">Jones</td>
       
<td data-content="Address">99 Angle Street</td>
       
<td data-content="Points">43</td>
   
</tr>
   
<tr>
       
<td data-content="Number">3</td>
       
<td data-content="First Name">Terrence</td>
       
<td data-content="Last Name">Rogers</td>
       
<td data-content="Address">999 Letsby Avenue</td>
       
<td data-content="Points">85</td>
   
</tr>
   
<tr>
       
<td data-content="Number">4</td>
       
<td data-content="First Name">Lawrence</td>
       
<td data-content="Last Name">Burnfish</td>
       
<td data-content="Address">69 The Matrix</td>
       
<td data-content="Points">0</td>
   
</tr>
   
</tbody>
</table>

Of course in a real scenario, this data would be dynamic.

Note the use of the data attribute. We'll get to that shortly. Otherwise this is a basic table. No css is required for the full screen version, unless you want to add some formatting, as this is handled by bootstrap's table class.

The CSS

It's in the media query where the magic happens. You will need to decide on your breakpoint size depending on the expected minimum width of the table, which might depend on the number of columns, and width of the data. For this example, we'll set the breakpoint to 600 pixels.

@media only screen and (max-width: 600px) {
   
.responsive-table {
       
border-top: 1px solid #ccc;
   
}
   
   
.responsive-table th,
   
.responsive-table thead{
       
display: none;
   
}

    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
       
display: block;
   
}
 
   
.responsive-table tr {
       
border-bottom: 1px solid #ccc; 
   
}
 
   
.responsive-table td {
        /* important to override bootstrap */
        padding-left: 50% !important;
       
border-top: 0 !important;       
        text-align: left;
       
position: relative;
       
border-bottom: 0;      
   
}
 
   
/* Now like a table header */
   
.responsive-table td:before {      
       
font-weight: bold;
       
font-size: 0.85em;       
       
position: absolute;
       
margin-left: -50%;
       
width: 50%;
       
white-space: nowrap;
       
content: attr(data-content);
   
}
}

Setting the display property of the tr and td elements to block forces the cells to flow vertically.

.responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
       
display: block;
   
}

Each cell has left padding of 50% which matches the width and negative margin-left of our td:before pseudo element:

margin-left: -50%;       
width: 50%;

To display the table headers we're hiding the actual th elements and using the value of the data-content attribute of each table cell. This is done using the td:before pseudo element and by setting the content css property using attr(data-content).

.responsive-table td:before {      
       
font-weight: bold;
       
font-size: 0.85em;       
       
position: absolute;
       
margin-left: -50%;
       
width: 50%;
       
white-space: nowrap;
       
content: attr(data-content);
   
}

The beauty of using the data-* attribute is that you can set these in the html to something dynamic such a javascript or @razor variable. As they will be the same for each row, this  means they can be set within the loop which displays the rows.

Presentation

We're hiding the borders on the table cells and setting a border-bottom on the table rows, so that our data is neatly separated into a collection of rows.  Notice the table itself has a top border, just to frame it.

Browser compatibility

As this trick uses media queries, and media queries only work in IE9+, we only need to ensure the other features work in IE9+. (Below this the table will not refactor when the screen shrinks anyway).  Content, data-*, and pseudo elements all work in ie9, but unfortunately negative margins don't, and combined with position:absolute, which is essential, this causes a pretty significant issue.  




Of course this only becomes a problem when an IE9 user (currently about 2% globally) reduces their browser window, and won't be a problem on actual mobile devices which this technique is targetted for, so it's up to you whether you decide to mitigate this by putting the media query into a conditional statement.

Wrapping text in titles

Watch out for cell titles with more than one word. These could wrap when the screen size is reduced and will wrap onto the next line if you have white-space set to normal in the td:before css. One way around this is to make your table cell heights 2em or more, although this obviously means all sub-rows will be double height even when there isn't a large title.

Conclusion

Refactoring tables to display vertially can be a very useful alternative technique for presenting wide tables on smaller devices. The technique may require tailoring to your specific data shape and presentation requirements, but overall the tables are easy to read and interact with.


Resources

Tuesday, October 21, 2014

5 Reasons you should start doing code reviews

  1. It will help catch quality issues earlier, another perspective on your code might reveal possible bugs
  2. It will help you be more aware of other work going on
  3. It will increase the quality of your coding practices
  4. You will learn from other people's perspectives on your code
  5. You will learn by looking at other people's code
    Books are made better by editors. Coders are made better by pair programming and code reviews. - Scott Hanselman
    Why not add Code Reviews to your Definition of Done today?