Low Priority Bootstrap Bug Report for the ASP.NET website team

Hi there, sorry but I wasn’t able to find a proper way to report this. I tried with a tweet, but probably was lost in a sea of other people contacting you. I hope I can get someone on the team to read this post, and if I fail maybe at least I can help someone out there with a similar problem.

At this page https://get.asp.net/ there’s an error on how bootstrap is used to build the 4 columns on the “Work with your favorite development tools” section. There are elements that are direct child of a .row but aren’t marked as .col-*. It looks like this:

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-6">
    <div class="col-sm-12 col-md-6">
      <div class="row icon icon-visualstudio"></div>
      <div class="row">
        <!-- Missing .col element -->
        <h3><a href="https://www.visualstudio.com/en-us/visual-studio-homepage-vs.aspx">Visual Studio</a></h3>
        <p class="text-left">The easiest way to get started building applications with ASP.NET is to install the latest version of Visual Studio 2015 (including the freely available Community edition). Visual Studio has the tools you need to build ASP.NET web applications.</p>
        <p class="text-muted">Works with ASP.NET 4.6 &amp; 5.0</p>
      </div>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="row icon icon-vscode"></div>
      <div class="row">
        <!-- Missing .col element -->
        <h3><a href="https://code.visualstudio.com/">Visual Studio Code</a></h3>
        <p class="text-left">Visual Studio Code is a cross-platform code editor refined and optimized for building modern web and cloud applications.</p>
        <p class="text-muted">Works with ASP.NET 5.0<br><br><br></p>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-12 col-lg-6">
    <div class="col-sm-12 col-md-6">
      <div class="row icon icon-yeoman"></div>
      <div class="row">
        <!-- Missing .col element -->
        <h3><a href="https://github.com/omnisharp/generator-aspnet#generator-aspnet">generator-aspnet</a></h3>
        <p class="text-left">Yeoman is a scaffolding platform built on top of Node.js that allows you to build template-based generators for projects or code files. <em>generator-aspnet</em> is a yeoman generator that allows you to scaffold ASP.NET 5 applications.</p>
        <p class="text-muted">Works with ASP.NET 5.0</p>
      </div>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="row icon icon-omnisharp-vertical"></div>
      <div class="row">
        <!-- Missing .col element -->
        <h3><a href="http://www.omnisharp.net/">OmniSharp</a></h3>
        <p class="text-left">OmniSharp is a set of tooling, editor integrations and libraries for developing in .NET. OmniSharp works with a number of editors including Atom, Brackets, Emacs, Sublime Text and Vim.</p>
        <p class="text-muted">Works with ASP.NET 5.0</p>
      </div>
    </div>
  </div>
</div>

But should actually look like this:

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-6">
    <div class="col-sm-12 col-md-6">
      <div class="row icon icon-visualstudio"></div>
      <div class="row">
        <div class="col-sm-12"> <!-- Added -->
          <h3><a href="https://www.visualstudio.com/en-us/visual-studio-homepage-vs.aspx">Visual Studio</a></h3>
          <p class="text-left">The easiest way to get started building applications with ASP.NET is to install the latest version of Visual Studio 2015 (including the freely available Community edition). Visual Studio has the tools you need to build ASP.NET web applications.</p>
          <p class="text-muted">Works with ASP.NET 4.6 &amp; 5.0</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="row icon icon-vscode"></div>
      <div class="row">
        <div class="col-sm-12"> <!-- Added -->
          <h3><a href="https://code.visualstudio.com/">Visual Studio Code</a></h3>
          <p class="text-left">Visual Studio Code is a cross-platform code editor refined and optimized for building modern web and cloud applications.</p>
          <p class="text-muted">Works with ASP.NET 5.0<br><br><br></p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-12 col-lg-6">
    <div class="col-sm-12 col-md-6">
      <div class="row icon icon-yeoman"></div>
      <div class="row">
        <div class="col-sm-12"> <!-- Added -->
          <h3><a href="https://github.com/omnisharp/generator-aspnet#generator-aspnet">generator-aspnet</a></h3>
          <p class="text-left">Yeoman is a scaffolding platform built on top of Node.js that allows you to build template-based generators for projects or code files. <em>generator-aspnet</em> is a yeoman generator that allows you to scaffold ASP.NET 5 applications.</p>
          <p class="text-muted">Works with ASP.NET 5.0</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="row icon icon-omnisharp-vertical"></div>
      <div class="row">
        <div class="col-sm-12"> <!-- Added -->
          <h3><a href="http://www.omnisharp.net/">OmniSharp</a></h3>
          <p class="text-left">OmniSharp is a set of tooling, editor integrations and libraries for developing in .NET. OmniSharp works with a number of editors including Atom, Brackets, Emacs, Sublime Text and Vim.</p>
          <p class="text-muted">Works with ASP.NET 5.0</p>
        </div>
      </div>
    </div>
  </div>
</div>

Pay attention to the extra div.col-sm-12 element inside the inner div.row.

I’ve created this crude javascript that fixes the elements in question if you’ve want to try it.

$('#editors .row .row h3').parent().each(function(){
   var $this = $(this);
   var current = $this.html();
   $this.html("<div class='col-sm-12'>"+current+"</div>");
});

 

So what’s the big deal?
Well without that col-* element bootstrap won’t add the proper padding to the elements inside each column and they tend to bump into each other. In the following gifs you can see the difference made by this change.

desktop difference

Desktop

 

tablet

Tablet

 

phone

Phone

Advertisements

How to Test your Production Code: Everything You Need To Know About Test Doubles

One common objection that I get while explaining TDD to my colleagues is that they deal with objects that are too complex to be tested in an automated suite. They either have methods that are too complex (too many interactions with other libraries or classes) or objects too difficult to instantiate (constructors that call to databases or that need to set up a huge graph of dependent objects).

Sometimes the objection is that the program uses some method that reaches to a database or an external service to read (or worse to persist) some information. This normally happens when the developer is working with some legacy code that doesn’t have any real separation between what is the business logic of the software product and what are the external resources that it uses (databases, web services, etc).

Of course, writing automated tests to verify code that calls to a database to save some information can be painful for several reasons:

  • Databases are slow: the test would run slow and you will not be willing to run them often;
  • After every test you have to clean the database: this is important because tests should be atomic a reproducible, if the database contains old data, the tests could produce false results. Of course this result in even slower tests;
  • Your software may be using a database (or service) shared between different applications or different developers: if you are working with a shared database your tests may not  be reproducible, you cannot clean the records because you could be deleting other people data. Sharing a database between developers makes your code untestable without some sort of separation from it;

To be able to test your code you have to be isolated from the parts that are difficult to test. By using other objects with the same interface as the one that we want to avoid using.

We have all seen videos of the crash test done on cars to certify their safety. Obviously it wouldn’t be acceptable to do the crash tests with real humans (luckily the time when living humans were used to test katanas is long gone) so they use a dummy that is loaded with sensors to measure the effects that the crash would have on real people.

The software counterpart of these dummies are called Test Doubles and are used in the same fashion: during the tests they are put in those places where it wouldn’t be acceptable or easy to use real production objects. We use Test Doubles to put the software in the condition that we want to test.

Let’s try to understand this better with an example:

public bool Contains(string searchString)
{
    try
    {
        // networkHandler is an instance of an object
        // that makes request to a uri
        List<string> fromNetwork = networkHandler.GetAsList(uri);
        // some interesting code
        return true;
    }
    catch(WebException e)
    {
        return false;
    }
}

The method Contains uses an instance of the class NetworkHandler to load a list of strings from somewhere; this class is defined like this:

public class NetworkHandler
{
     public virtual List<string> GetAsList(string uri)
     {
          // some code that connects to the uri passed as parameter
          // and then parses the result and returns a List of strings
     }
}

Using the real NetworkHandler there’s no easy way to test that our method returns false when a WebException gets thrown by the method GetAsList. The best way to test this behaviour is to replace in our tests the instance of NetworkHandler with a test double which only purpose is to throw a WebException when the method GetAsList gets called.

public class NetworkHandlerStubThrowNetWorkException : NetworkHandler
{
     public override List<string> GetAsList(string uri)
     {
          throw new NetworkException();
     }
}

Types of Test Doubles

The Test Doubles are divided into different categories depending on their usage in the testing suite. Returning to our dummy analogy, a mannequin is a different Double than a fully featured Crash Dummy, both have the resemblance of a human but they are used in totally different scenarios. In the software world we have:

Each of which has it own purpose in helping us isolating the code that we want to test from the one that not; In later posts we will explain each type more in-depth, giving  also some usage examples.

Setting up a test environment in Visual Studio

17332931280_c9513959f5_z

One of the main reasons developers don’t write test is that they don’t know where to start. If you ask the TDD guys the anwser is simple

Write the most simple failing tests that you can, then make it pass

The TDD guys

Well, almost. The first thing you need to do is to set up your enviroment so that you can actually run a failing test, and see it fail.

I’ll post a series of how to guides to help you set up your environment and link them bellow. If your enviroment isn’t listed here, just drop me an email or a comment to this post and I’ll add it ASAP.

  • Visual Studio 2015
  • Visual Studio 2013
  • Visual Studio 2012
  • Visual Studio 2010
  • Visual Studio with Resharper

How we started this blog

You may think it’s too early to write a post about how we started this blog but the point is that we have gained a lot of inertia during the last couple of weeks and nothing can stop us now. It’s like being a huge train full of lead that got rocketed at 200 km/h: if you put something in front of it, the train will barely feel it as it get’s crushed.

It has been a while since we wanted to start a blog, but because of the lack of ideas and the perception that we weren’t good enough we never started.

And so it goes that almost 3 weeks ago I was hearing a Software Engineering Radio podcast and they were talking about Marketing Yourself, a topic that always gets my attention. The guy speaking to the host was John Sonmez from Simple Programmer and he said something that goes along this line:

Marketing is just helping people find a solution to a problem they have

And then

If you go to an interview and the interviewer is one of your readers, he already knows you and your skills, you won’t need to prove anything

Then I was all OH MY GOD, I need to know more about this guy!!!

I went to his site looked him up on google and found out that I already knew this guy. He did two very interesting interviews with the .NET Rocks guys when he talked about Managing Your Career. Not only, he also have tons of really good Pluralsight courses and a book about Soft Skills.

Looking at all the content he has published and all the podcast he has been to, made me think: “OK, This guy can give me the information I need to start building a brand online”. So I decided to subscribe to his free online course on How to Create a Blog.

How To Build A Blog That Will Boost Your Career

This is a 3 week course divided into 6 e-mails that you get on Mondays and Thursdays and that gives you a step by step guide on starting a blog on a subject that matters to you.

In the first lesson John gives you some advice on how to identify the subject and how to make it narrow enough to attract users that are willing to return.

Later he proceeds with some technical advice on how to publish the blog, if it’s the first time ever you publish a blog this information saves you a lot of headaches!

After the first two lessons came a few that blew my mind!

The most difficult part in starting a blog for me was to come up with topics to write about. And I believe it’s what stops most of us from starting, or from being consistent: you put up two or three post in a month and then stop because you don’t have new ideas.

Well, while reading the third lesson my mind became a waterfall of ideas, at one point I stopped reading and started to write down all the ideas that came to me. And in about an hour I had a backlog of topics that could generate 1 blog post every week for about a year. That’s a huge amount of ideas for someone who could only come up with a few of them a day before.

Then, I e-mailed my brother and we started this blog after completing the last 3 lessons of the How to Create a Blog course. What are the topics of those lessons it’s up to you to find out!

And since then we have been writing an article every two days each.

So, if you have ever thought about writing a blog give this course a shot it cost you nothing and the value that you get is HUGE.