A Quick Fix for Responsive Bootstrap Menus on Windows Phone

bootstrap-in-windows-phone

During a bit of site testing, I encountered a rather strange bug when viewing a site that was developed using the incredible Twitter Bootstrap. The Responsive collapsing navigation menu didn’t appear to work at all and all of the menu items that were present were all jumbled around. It not only looked bad, but it severely hindered the usability of the site at all.

After some research, I came across the following snippet that appeared to resolve the issue. Simply paste this into the <head> section of your application and it should hopefully resolve your Bootstrap issues on Windows Phone devices :

<!-- Bootstrap Fix for Windows Phone -->
<script type='text/javascript'>
        (function() {
            if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)){
                var msViewportStyle = document.createElement("style");
                msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
                document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
            }
        })();
</script>

An Interesting List of Development Stuff (July 2014)

july2014

It’s been a rather busy month, so without further ado, here is this months ILODS.

Bootstrap on a 386

If you ever encounter a client that simply hasn’t migrated to anything newer than a 386, but needs you to write a new web application for them, then you are in luck! Mark Otto and Jacob designed BOOTSTRA.386, a 386-themed Bootstrap theme that will be sure to bring back memories.

How to Destroy Developer Productivity

An excellent article from George Stocker regarding all of the everyday activities that can absolutely crush developer productivity. From developer arguments to open floor plans, George rattles off his experiences with what has and hasn’t worked for him in being more productive.

30 Days with Bootstrapping ASP.NET MVC

Fellow ASP.NET MVC James Chambers provides a very well written series on integrating the Twitter Bootstrap (not the previously mentioned BOOTSTRA.386) into ASP.NET MVC Applications. This 30-part series covers just about everything that you could think of and hits a number of common use-cases that developers may encounter when using Bootstrap. Highly recommended for any ASP.NET MVC Developers.

The Unspoken Truth about Managing Geeks

If you are reading this blog post, the likelyhood is rather high that you could be classified as a “geek” or one of the many synonyms there are out there and there is absolutely nothing wrong with that. In this 2009 article from Computer World, Jeff Ello addresses many of the concerns that are faced when actually managing “geeks”. It’s not only a great article to read if you are in management and it likely wouldn’t hurt to read it if you are one of the “geeks” being managed either.

vNext, vNext, Read all about it!

ASP.NET vNext has slowly been creeping into the Microsoft Development realm recently and although it is still in it’s earlier phases, it’s never too late to Get Started learning it. This ASP.NET tutorial series introduces vNext and walks through how to not only Get Started with vNext, but it provides a step-by-step tutorial for several different projects (and platforms).

A Compilation of Architecture and Patterns in ASP.NET

The patterns are strong with this one. In this post, .NET Developer Andras Nemes compiles an absolutely monstrous list of .NET implementations of just about every major design pattern that you could think of (and many that I am sure you couldn’t). It doesn’t only feature code snippets of their implementations, but also sample projects.

 

Using Visual Studio AutoRecover to Avoid Losing Your Work (and your Mind)

Mondays

If you have ever worked in an environment that may not have been the most reliable or you are simply a worry-wart when it comes to possible data loss, then this might be for you.

When discussing a recurring issue with another developer, he complained that his older computer frequently crashed which resulted in him losing data quite often. He didn’t seem to be aware of a feature within Visual Studio called AutoRecover that would help him ensure that his data wasn’t always “gone forever”. While it typically works on it’s own, this post will discuss AutoRecover, configuring it and locating all of the temporary files it creates if you need to find them.

What is AutoRecover?

AutoRecover is an option within Visual Studio that will allow you to define a particular interval in which to save information about all of the files that may be changing or have changed within your application. It’s perfect for scenarios where you might have a machine that is on the verge of death, intermittent power issues, data-loss anxiety and just about anything else that might have you spouting off expletives when your screen goes black (or blue).

How do I use it?

You can access the AutoRecover option in Visual Studio through the following steps :

  1. Select Tools from the Toolbar in Visual Studio.
  2. Choose Options
  3. Select AutoRecover beneath the Environment tab on the right.

You’ll then be presented with the AutoRecover dialog box :

Autorecover

You’ll just need to adjust these values depending on your needs and how erratic your machine can be.

Accessing AutoRecover Files

Accessing the files themselves is quite easy as well. By default, Visual Studio will store all of these files within a “Backup Files” directory which is typically located at the following location :

~/Documents/{Your Version of Visual Studio}/Backup Files/{Your Project Name}

Within this folder, you will see a collection of files that are both original and those that have been previously recovered as seen below :

files

Visual Studio will typically prompt you to open these files if your system experienced an unexpected shut down when opening an affected solution or project, but this should provide an easy way to access these files if things do go horribly wrong.

 

Using the NuGet Package Explorer to Create, Explore and Publish Packages

Nuget

Although there is often some debate regarding its pronunciation, I believe that most of us can agree that NuGet is pretty great.

In the past few years, NuGet has become one of the easily and most commonly used tools within a .NET Developers bag of tricks and rightfully so. Long gone are the days of searching for a DLL file in some shady site and hoping that it doesn’t brick your application. Now you can find just about every possible reference you would want to include within your application in just a few clicks (and letting it sort out all of the dependencies).

Most developers have likely interacted through NuGet within Visual Studio, however this post is going to introduce another way to interact, explore and even publish your own NuGet packages called the NuGet Package Explorer.

What is the NuGet Package Explorer?

The NuGet Package Explorer is a open-source product of NuGet developer Luan Nguyen and was developed as an extremely user-friendly GUI application for easily creating and exploring NuGet packages. After installing the ClickOnce application, you can simply double-click on a NuGet Package file (.nupkg) to access all of its content or you can load packages directly from the official NuGet feed.

How to use it?

First, you’ll need to visit the NuGet Package Explorer page on CodePlex, where the tool is currently available and download it. After a short download, you can launch the ClickOnce application and be presented with the following screen :

JustLaunched

These are your primary options when it comes to creating or exploring the contents of any available NuGet packages (in addition to simply clicking on any NuGet Package files as mentioned earlier). The easiest approach to get started would probably be to open up a package from the feed, which will present you with a searchable dialog with all of the most popular NuGet packages :

PopularPackages

After clicking on a package, you can choose the particular version you wanted to explore :

allversions

You also have the option of manually opening up any packages that you might have locally installed, but simply grabbing them from the feed is usually going to be the way to go.

Exploring a Package

Once you select a package that you want to explore a bit more, you can just double-click on it to present the details about that package :

An example of exploring the EntityFramework NuGet Package.

An example of exploring the EntityFramework NuGet Package.

While exploring a package, you’ll see many of the summaries, details and descriptions that you might be accustomed to seeing when managing your NuGet packages through Visual Studio along with a bit more.

You’ll see an area called Package Contents, which display all of the files that are contained within the package and it can help give you an idea of the different versions of the framework that it targets, any transformations that will be applied to configuration files and any additional utilities or executables that might be run when the package is installed :

PackageContents

This is where you can really actually explore the packages by digging into the contents a bit more. By simply double-clicking on a file within the contents, you will be shown a preview (if available) of the contents :

ContentsDetails

This can be done for just about any kind of file that would normally support previews and it can be extremely useful if you wanted to see exactly what is going down inside some of these packages.

Creating a NuGet Package

The Package Explorer isn’t limited to just exploring existing packages. It provides a very easy-to-use interface to allow you to create your own packages and upload them to NuGet to share with others.

With a simple click of the File > New option menu or by using the CTRL+N shortcut :

started

You’ll be transported to a new package screen to begin building your own NuGet Package. You can click the Edit Metadata icon ( EditMetadata) to began actually editing information about your package :

MetaData

You can find a complete reference of all of the available fields listed above and exactly what they are used for by visiting the Nuspec Reference page here.

After defining all of your metadata, supported assemblies and dependencies, you will then be ready to add your files and content to your packages. You can do this by just clicking a file within the File Explorer and dragging it into the Package Contents area on the left :

SampleFile

All of the DLL files that are entered will be placed into the lib directory and all other basic content will be placed into an aptly named content directory as seen below :

PackageContent

Additionally, if you need to add other folders (or any other “special” types of folders), you can do so by using the Content menu :

OtherContent

 

You can continue to add all of the additional files and folders for your package in this same manner until your package is complete.

Publishing to NuGet

Publishing to NuGet is fairly simple after you have build your package.

The first thing that you’ll need to do is Register and Sign In to the NuGet Gallery, which takes a matter of seconds. This will provide you with an API key that you will need to use in order to publish packages to NuGet :

Api

After you have your API Key, you’ll just need to use the Publish option (File > Publish) within the NuGet Package Explorer :

Publish

Just enter in your API Key in the Publish dialog and hit Publish and you are done!

 

 

An Interesting List of Development Stuff (June 2014)

This month’s installment of the ILODS is really all over the place.

There are articles and posts detailing some of the larger happenings from two major conferences that went down in the month of June, a bevy of interview-related resources, pretty algorithms, technology education, developer exploitation and package exploration. Oh my!

In case you missed dotnetConf 2014

The great thing about dotnetConf is that it has all of the great Sessions that are present at a major conference, but you don’t even have to leave your desk or office space to attend it. Thanks to the folks at Channel 9, you can access all of the Sessions from the conference with ease and even skip through any jokes that you aren’t particularly fond of. It’s a great resource to get up to date on the latest happenings within the .NET arena like vNext, updates to C#, Azure, SignalR and more!

A Smorgasbord of Interview Questions, Tips and Resources

Software Development interviews can be frightening, hectic and much like a box of chocolates, you never know what you are gonna’ get. If you are currently looking for a change of scenery or you just want to generally brush up on some of the common questions that you might encounter, then this may just be the resource for you. A large team of developers along with several recruiters got together to build this collection of questions, tips and notes related to Software Development interviews.

Visualizing Algorithms

If you are brushing up on your interviewing skills as mentioned in the previous item, you’ll likely want to re-familiarize yourself with various commonly encountered algorithms. While this site won’t necessarily assist you in learning the algorithms, it will show you that they can sometimes look really awesome. Mike Bostock, a Stanford PhD candidate, created this collection of various visualizations of different algorithms, which can be pretty entertaining and helpful to those that are more visual learners. If you liked this particular post, I would encourage you to explore more of Mike’s site as it is filled to the brim with different types of data visualization examples.

Chat Wars

This essay by David Auerbach, a former Microsoft employee discusses the “Chat Wars” between Microsoft and AOL that occurred for several years in the late 1990s. It’s a great read and will give outsiders a bit of perspective about many of the popular chat options of the times (ICQ, AIM, MSN and Yahoo) and the power struggles that went on behind the scenes to keep the battle going on for years to come.

Chuck Norris, HTML and Crap

This highly entertaining Stack Overflow question discusses a rather bizarre behavior when values like ‘chucknorris’ , ‘crap’, ‘MrT’ and others are assigned as background color values within HTML.

Swift

At WWDC earlier this month, Apple unveiled a new programming language called Swift. Swift is being touted as a new general purpose language that is “quick, much faster than Objective-C” and it supports closures, generics, type inference, name spaces, multiple return types and more. The language itself is capable of being run along size other Objective-C or C code within the same application, which enables you to start using it right away!

The Second City puts Computer Science First

Chicago is planning on breaking the mold regarding how Computer Science and technology is introduced to students. The city plans to start integrating Computer Science into the core curriculum within its public schools over the next three years in hopes of improving computer literacy, encouraging pursuits in the S.T.E.M fields and building a stronger and more technology focused workforce.

How to Exploit a Developer

This brief article discusses one of the many popular “hackathons” or “app development competitions” that you might have seen around, but when you delve a bit deeper into it, it looks like the grand prize is simply being exploited.

NuGet Package Explorer

If you are a fan of NuGet, you might want to give the Nuget Package Explorer a try. It’s a simple ClickOnce application that allows you to easily create and explore available NuGet packages with a single click and much more. It’s an extremely useful tool that is entirely free and available on CodePlex. I’ll try to post a walk-through for using it in the coming months, as I believe that it is a really great tool worth using.

 

Calculating Business Hours in Javascript

js_business

Time is money, especially when that time is spent handling things like calculating hours worked and filling out time-sheets.

Recently, a user on the forums posed a question about how to go about calculating the number of hours worked between two specified dates. The request required that it must be handled through Javascript and that it must be as “exact as possible” down to the minute. So I wrote up the following very sub-optimal solution and thought I would post it here on the off-chance that anyone encounters the same issue.

Let’s take a look at what information we need :

  • Define the work hours during the day (ie 9AM-5PM)
  • Define a starting and ending date to calculate between.
  • Determine if weekends are counted.

Using this information I threw together the following (and I have annotated to help specify what is going on) :

// Simple function that accepts two parameters and calculates the number of hours worked within that range
function workingHoursBetweenDates(startDate, endDate) {
    // Store minutes worked
    var minutesWorked = 0;
  
    // Validate input
    if (endDate < startDate) { return 0; }
    
    // Loop from your Start to End dates (by hour)
    var current = startDate;

    // Define work range
    var workHoursStart = 9;
    var workHoursEnd = 18;
    var includeWeekends = false;

    // Loop while currentDate is less than end Date (by minutes)
    while(current <= endDate){          
        // Is the current time within a work day (and if it occurs on a weekend or not)          
        if(current.getHours() >= workHoursStart && current.getHours() <= workHoursEnd && (includeWeekends ? current.getDay() !== 0 && current.getDay() !== 6 : true)){
              minutesWorked++;
        }
         
        // Increment current time
        current.setTime(current.getTime() + 1000 * 60);
    }

    // Return the number of hours
    return minutesWorked / 60;
}

or if you would prefer to pass in all of your variables as parameters, you could use :

// Simple function that accepts two parameters and calculates the number of hours worked within that range
function workingHoursBetweenDates(startDate, endDate, dayStart, dayEnd, includeWeekends) {
    // Store minutes worked
    var minutesWorked = 0;
  
    // Validate input
    if (endDate < startDate) { return 0; }
    
    // Loop from your Start to End dates (by hour)
    var current = startDate;

    // Define work range
    var workHoursStart = dayStart;
    var workHoursEnd = dayEnd;

    // Loop while currentDate is less than end Date (by minutes)
    while(current <= endDate){      
        // Store the current time (with minutes adjusted)
        var currentTime = current.getHours() + (current.getMinutes() / 60);
             
        // Is the current time within a work day (and if it occurs on a weekend or not)                   
        if(currentTime >= workHoursStart && currentTime < workHoursEnd && (includeWeekends ? current.getDay() !== 0 && current.getDay() !== 6 : true)){
              minutesWorked++;
        }
         
        // Increment current time
        current.setTime(current.getTime() + 1000 * 60);
    }

    // Return the number of hours
    return (minutesWorked / 60).toFixed(2);
}

or if you want a minified version thanks to Google’s Online Closure Compiler :

function workingHoursBetweenDates(a,b,e,f,g){var c=0;if(b<a)return 0;for(;a<=b;){var d=a.getHours()+a.getMinutes()/60;d>=e&&d<f&&(g?0!==a.getDay()&&6!==a.getDay():1)&&c++;a.setTime(a.getTime()+6E4)}return(c/60).toFixed(2)};

Basically, it simply starts at the beginning time and iterates until the end (while monitoring the number of minutes worked during this period). By no means is this optimal, but it should serve as a very basic example of how to calculate such a value within Javascript. Please feel free to post any improvements or optimizations within the comments section as this was just a hastily thrown together solution to solve the issue at hand.

You can find a working example here :

You can play around with an interactive example within JS Fiddle

You can play around with an interactive example within JSBin

The Circle of Life…cycle of MVC Applications

MVC-Lifecycle

One of the common challenges for developers migrating from the Web Forms environment to MVC is learning how to adjust to a different application life-cycle. Web Forms had a very well defined chain of events that would be triggered prior to a page being rendered, however the lines aren’t as clear within MVC.

Earlier this month I stumbled upon the following document from Cephas Lin provided both a high-level overview and a detailed view of the general life-cycle within an MVC application and I thought I would share it :

MVC Lifecycle

Basically the life-cycle, it could be summarized (very simply) as follows :

  1. The Application is started (through Application_Start) and the appropriate Routes are wired up and configured.
  2. An HTTP Request comes in and MVC takes over.
  3. Your Controller that cooresponds to that Route will be created, instantiated and any authorization filtering will be handled (if failed it will send back a failed request).
  4. Any model binding will occur from the Request to any parameters to populate your values.
  5. The logic of your Action will be executed as expected and it will find a View that corresponds to the one specified in the Action and pass it the appropriate Model.
  6. The Model will populate the View and it will be served to the user.
  7. The Result will be executed and the Controller will be disposed of.

This is a very generalized summary (it doesn’t go into detail about ActionFilters etc.). Hopefully it might help developers that are just migrating to MVC better understand what is going on behind the scenes.

If you wanted a more detailed exploration of it, I would recommend reviewing over the detailed view of the document above and checking out the following other related resources :