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>

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 :

An Interesting List of Development Stuff (May 2014)

ILODS

In this month’s installment of the ILODS, we will take a look at all of the exciting announcements from Microsoft’s TechEd 2014 event as well as the usual collection of all sorts of other development-related news. Exciting things are ahead!

How Scott Hanselman Changed My Life

If you are a software developer working under the Microsoft umbrella, you are probably familiar with Scott Hanselman (and if you aren’t, you should be). This blog post from Noah Addy discusses how Scott inspired him to pursuit his dreams in the realm of technology. It’s a great read and it’s extremely inspiring story about how our heroes (even our development heroes) can help shape and improve our lives.

Meet vNext.

While I could probably spend an entire series introducing vNext (and I eventually will), I’ll give you the gist of it.

Probably one of the largest development announcements from Microsoft was the introduction of ASP.NET vNext. vNext is a complete revamp of the ASP.NET stack with a focus on being “leaner” and providing a better foundation for building both web-applications and those designed for Azure and the cloud. vNext flips the script and completely merges all of Web Pages, MVC and Web API into a single housing (MVC) and takes a very George R. R. Martin-equse approach to System.Web.

Actually – here are some of the release notes about it :

  • MVC, Web API, and Web Pages will be merged into one framework, called MVC 6. MVC 6 has no dependency on System.Web.
  • ASP.NET vNext includes new cloud-optimized versions of MVC 6, SignalR 3, and Entity Framework 7.
  • ASP.NET vNext will support true side-by-side deployment for all dependencies, including .NET for cloud. Nothing will be in the GAC.
  • ASP.NET vNext is host agnostic. You can host your app in IIS, or self-host in a custom process.
  • Dependency injection is built into the framework.
  • Web Forms, MVC 5, Web API 2, Web Pages 3, SignalR 2, EF 6 will be fully supported on ASP.NET vNext
  • .NET vNext (Cloud Optimized) will be a subset of the .NET vNext Framework, optimized for cloud and server workloads.
  • MVC 6, SignalR 3, EF 7 will have some breaking changes:
    • New project system
    • New configuration system
    • MVC / Web API / Web Pages merge, using a common set of abstractions for HTTP, routing, action selection, filters, model binding, and so on
    • No System.Web, new lightweight HttpContext

If you want to learn more about vNext, you can visit the vNext area of ASP.NET or you can check out Jon Galloway’s incredible collection of vNext resources here.

It’s Codin’ Season and I’m Huntin’ Code

Last year, I wrote up a post discussing Microsoft Research and the work that they have done with Pex. Pex, if you are unfamiliar with it, is a tool designed to help with white-box and unit-testing however it’s a bit more playful than that. The folks at MS Research elaborated on it a bit more and decided to make a game out of it called CodeHunt. CodeHunt is essentially a puzzle-based game that helps introduce people to coding through solving different challenges and progressing onto more difficult stages. It’s an interesting concept and I am sure that it could use a bit of work – but it is a step in a good direction to get people interested in coding (in a fun way).

A SQL Join Cheat Sheet

“You put your left-join in, you take your left-join out, you put your left-join in and you shake it all about.”

With the abundance of different kinds of SQL Joins out there, it can often get confusing when using them (if you don’t do so regularly). This cheat sheet filled with Venn diagrams might be worth printing out and laminating for the DBA in your life.

A Primer on Machine Learning : Differentiating between Magic and Machine!

If you have an interest in Machine Learning or frankly don’t know anything about it. Adam Geitgey provides a fairly concise and accessible introduction to the topic in this blog post. He details the different types of learning that a machine can do and even provides a few examples to demonstrate it as well. It’s not only an excellent primer on the topic, but if you find yourself interested he provides several links to continue your learning on the subject.

Change your Mind-set : Transitioning from jQuery to Angular

I stumbled across this excellent discussion on Stack Overflow which is worth reading for anyone working with Javascript frameworks. The question itself is from a developer that has a significant amount of experience with jQuery and is planning on making the transition to AngularJS. The discussion details some of the changes in mind-set and different hurdles that can be expected for anyone doing the same.

11 Across. I hate myself Down.

I’ve always been a fan of puzzles, but this is certainly not for everyone. Maria Pedersen and Ole Michelson created Regex Crossword, another puzzle site that torments its visitors by solving crossword puzzles through Regular Expressions (and they get crazy). It’s a nice switch from something like Suduku and you might find yourself learning a bit more about Regular Expressions in the process.

It sadly will not teach you when and when not to use them however.

If Shakespeare was in a rap battle…

If you remember that scene in Office Space where Michael Bolton (played by David Herman) is rapping, then this might be for you.

I know as a software developer and a fellow fan of rap music that I have often thought about analyzing all of the words within the rap genre to truly find which artist has the most diverse vocabulary. Thankfully I didn’t have to, as Matt Daniels decided to do just that. In one of his many analyses of hip-hop music, he culled through all of the data and compared today’s MCs against OG William Shakespeare to see how they compared. It’s an extremely entertaining read and it will only further reinforce the mantra : “Wu Tang Clan ain’t nothing to f*** with.”

Putting the ‘S’ in Solid : Swiss Army Knife Syndrome

In this short rant, Allan MacGregor discusses “Swiss Army Knife Syndrome” which results when the ‘S’ for single-responsibility in SOLID design principles turns to … well another four-letter ‘S’ word. It’s something that everyone needs to be reminded of now and then and what better way to do it then through a blog post filled with knives.