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

Monday, November 03, 2014

Creating Value: The Key to Innovation


Creating is to bring about something new. The act of creating involves integrating two or more concepts together to create a new idea.

Value is typically that which adds value to one’s life, whether that be an individual, a group, or the whole of society. Values are benefits, improvements, they alleviate suffering, reduce cost, increase availability.

So how do we go about Creating Values?

You don’t need to be creative to create values. But you do need to utilize certain skills.

Given that Values are that which add benefits to one’s life, in order to create them, we must understand human needs.

Understanding Human Needs

To do this, simply Observe. Watch the world, and pay special attention to where people are happy or unhappy. Figuring out what makes them happy or unhappy is a key to creating new values. Try and find out what are the influences that affect happiness.

Also look at cost, efficiency, functionality and availability. Given that these criteria affect happiness, think about how can they be improved.  Many new values are simply existing values that have been improved. In fact, nearly all of them are. Again, creating involves integrating two or more concepts into a new idea. You will see this to be true when you start creating values by making improvements to what already exists. All you need to do is to take an existing concept and improve it by applying another.

Take the iPhone as an example. Apple didn’t invent the phone from nothing, they just improved on it by applying another, already existing concept to it – the touch screen. They then improved it even further by making it dual touch, and even further still by developing killer software. This multi-layering of improvements is perhaps the secret to their success – most new ideas are only single improvements of existing concepts.

Understand Human Responses

As well as looking at the status quo, pay attention to how individuals and society respond to changes. This information should be in abundance, given that the world is currently changing so fast and that this change is accelerating.

How people respond to change is very revealing. It shows how people really think, how they let their emotions, their desires, their hopes and their fears dictate their actions. It is their emotions which reveal what they value. Knowing what they value will enable you to create new value for them and improve their lives.

Engage

Of course you are a human too. So engage with others. Live your life alongside others and learn what makes you tick as well. You are the person to whom you are closest, so you have the unique privilege of seeing the innermost desires and emotions of yourself. Yes you are different from others, but humans share many common ideals, hopes and fears. Compare yours with others to help you figure out how can I improve this? How can I get more from the world and benefit myself? The answers will point you in the direction of how to create more for others and this is the nature of Creating Values.

Document Human Needs and Behavior

Humans are complicated and their behavior is not always predictable. However, when you understand human needs, you will be see patterns emerge. It is important to keep a record of these patterns not only to help yourself remember but so that this data can be analysed. This documentation will help you formulate a plan to create values based on human responses and needs.

Create Values Based on Your Observations

Design

When you figure out what makes people tick, how they respond to the environment, what drives them and what they see as benefits, you can begin the task of creating new values to take advantage of this knowledge. The first step, like it should be in all acts of creation, is deliberate design.

Design is about customizing an idea to meet certain needs. Often these needs might be aesthetic, and this can be very important, especially if your chosen field of value creation is artistic. But aesthetics are more of a “want” than a “need”. They are still important, especially with regards to improving culture, marketability, and sometimes usability, but they are not the focus of this article.

From a business/technological point of view, design needs to give most consideration to functionality. This is the attribute that will lend itself most to fulfilling human need. Functionality is the essence of a creation, its purpose, its reason for existing. Functionality should solve some human need, and that should be the focus of your design.

Work to incorporate some level of functionality into your created values – functionality that fulfills a human need. It should improve on a current concept in one or more areas. The more the better, but you may find that each improvement is the basis for a new tree of ideas – and every route can be followed to create numerous values.

Just remember the most important aspect of design and constantly ask yourself – how does this fulfill human needs?

Create

The often missed step of value creation is the act of creation itself. Turning the idea into a physical reality is perhaps more important than the idea itself. Many people have ideas, but until this idea is turned into reality – it is nothing more than an electrical signal that will disappear when you die. It does not have any effect on humanity, it will not improve anyone’s life, and it will not provide you with any income. Thoughts are nothing without actions.

Even designs drawn on a page are nothing until they are made into something real, because the design itself has no purpose, no impact.

Only when something is built in real life do you find out if it really works – and what its consequences will be. For every value creating action comes a seemingly infinite tree of implications, it’s impossible to know how your creations will impact everybody, and what effects they will have on the world.

This is our purpose, it's what gives life meaning. Your creations open the doors to other creators to build on your creations. Every creation is a combination of two or more existing concepts – therefore – your new concept will become one of the concepts in a whole new creation.

It is an exciting and noble route to prosperity.

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?


    Tuesday, July 06, 2010

    Tuesday, August 04, 2009

    The 7 Layers of Creativity

    It is said that art imitates life. To be able to express oneself creatively is both powerful and fulfilling. True creativity resides within all of us, but because of the power of creativity those that aren’t ‘naturally gifted’ feel intimidated to even try. By breaking down the fundamental layers of creativity, we see that the process of creating art is not only simple, but can be applied to all activities of your life – whether you are organizing a file cabinet or painting a self portrait, these 7 steps will help you find art in all that you do in life.

    Imagine you’re painting a picture. You find a nice spot, on the beach. You find an appropriate angle, where you will have an interesting view of the sea, with the beach and a palm tree coming in on one side. In the distance, there is a city skyline. It’s a perfect scene.

    Now, many would assume that the creative process involves simply transferring this beautiful image onto a canvas, that this is what it takes to be creative. I’m here to tell you that creativity is in fact a much deeper process than this. It involves many layers of thought and meaning. The good news, is that this in fact makes it easier for anyone to get in touch with their creative side.

    The Subject Matter Layer

    In this example, nature has already given you a piece of art that anyone with a camera can share. Nobody should have a problem finding this layer. It is simply an observation, something interesting in the world around you. For a story teller, it could be an event that happened, or is imagined. It’s what your piece represents.

    The Creation Technique Layer

    In a painting, the next layer is the artist’s personal brush technique. A professional photographer will add this layer in a similar way with their choice of lens, filters, exposure etc. A writer will use their practiced techniques of arranging sentences and paragraphs. Any artist’s use of their tool of choice makes their work different from anyone else’s interpretation. This is a special layer of the piece that requires a lot of attention and is developed over an artist’s entire life.

    Style is a very important part of this layer. The same image can be drawn in watercolor, charcoal, or pencil. Shading can be rendered in various ways, even the choice of paper is part of the creation technique. In all forms of creativity, including writing and music, there are infinite possibilities for style.

    The Perspective Layer

    Painting or photographing a picture is only the beginning of a creative exercise. What turns a generic photo into a piece of art, is perspective. The human holding the camera will always be an integral part of the piece.

    In the case of our painting, it is the artist with the brush that provides this layer. They can chose how to present the picture. The audience should be forced to ask themselves, even if it is subconsciously, why has the artist chosen this perspective?

    The Interpretation Layer


    This is the layer where a piece will really begin to stand out. While the artist’s perspective gives a lot of depth and personality, their interpretation is where they have the opportunity to show something that might not be visible at first. Remember our painting. Well, the artist could see the city in the background as tarnishing the beautiful natural scene, and paint it in a way that makes it look grey, dull, maybe even sinister.

    In this layer there is much scope to represent the scene in a way that is based on what it means to the artist, and the confines of reality need not be a limitation.

    The Depth Layer

    Your view of a cityscape from a beach has a lot more to it than meets the eye. Why is that city there? Who lives there? What are their lives like? What is their history? What does the future hold for them? Any of these factors can be brought into the painting if the artist wants to. As a very simple example, if the artists feels that the people of the city have been mistreated, he can draw something into the picture (or emphasize something that is already there) that represents this, such as a person looking sad.

    Another way to represent depth is to think about the ways certain parts of the painting interact with each other. For example, the palm tree that frames the city brings shade to the beach, but it is still brighter than the city. Perhaps this illustrates how nature is more forgiving than the hand of man.

    The Emotion Layer

    All of the other layers will mean nothing, if your piece doesn’t provoke emotion from your audience. Quite often, your other layers will provide this simply with the story they tell, but perhaps they won’t. You should make sure that whatever else is going on with your creation, you think about how your audience is going to feel when enjoying it. It doesn’t matter if they’re happy, sad, angry, or shocked, just as long as they’re not disappointed. The emotion layer is so important it can almost stand on its own without the other layers.

    Connecting with your audience emotionally is an art form in itself that takes a lot to master. There are many ways to press people’s buttons so I recommend you research this topic further. Ultimately, you must relate to their hopes and fears. Learn what makes people have certain emotions and incorporate this into your creations in whatever measure you see fit.

    You could probably stop here, and you will still have a phenomenal, multi-layered piece of art that stands out to its audience. However, there is one more layer that you can add to your creations. This powerful layer can turn you from a hobbyist into a respected professional.

    The Focus Layer

    When you feel like you have enough layers to your piece, add one more. This layer does not add to the creation, but actually takes away. It hides many of the details, but those details are still present, underneath. They still affect the characters in our story. We have just focused in on what is important.

    Poets understand this layer better than anyone. It is the metaphorical layer – the images they use to hide raw emotions.

    Add this layer either by hiding the creation’s true meaning behind a metaphor, or by telling it from a perspective that does not give everything away. Your audience will still see the meaning, but it will give your piece even more depth. This is the magical layer, the layer that transforms an idea into a story.

    Anyone can be creative

    Although I used a painting as an example, these techniques can be applied to any and every kind of creative outlet. If you’re a writer, take an interesting event and write about it in your own unique style, using the perspectives of your characters. Give your characters history, emotions, and needs, and guide them using your interpretation of the story. Connect to your readers emotionally by relating to their hopes, fears, and dreams. Finally take this story and express it through a metaphorical veil, refining and clarifying the main points of your story.

    Never again will you be able to use the excuses “I can’t draw”, or “I can’t play a musical instrument”. Even if you find yourself held back by your lack of creation technique skills, you can now create powerful pieces of art with your utilization of all the other layers. Learn how to bring perspective, meaning and depth to what you see, and you will become a true artist.

    Wednesday, September 01, 2004

    My First Post

    Hi I'm Stuart and this is my blog.

    Wow - that was exciting wasn't it. I bet you're wondering how someone with that much wit took so long to get online and start sharing it.

    Hmmm. This is going to be a bit of a pointless exercise. I mean, who wants to read about someone else's life that they've never even met? Oh hang on, I've just remembered how popular reality TV is. 

    Of course.