The art of simplicity

If you are new to front-end web development and have no clue where to start, I can recommend the Front-end Handbook written by Cody Lindley. The book briefly discusses all the topics relevant for front-end development, what’s important and what not and links to a large set of resources to help you grasp and understand each of these topics in more detail. It is the perfect learning path to help you getting started with front-end web development. More information: GitBook page: https://www.gitbook.com/book/frontendmasters/front-end-handbook/details Start reading: http://www.frontendhandbook.com/

Angular.js is so 2014, now it’s React.js that is the new hot and shiny JavaScript framework. If you want to learn where all the fuzz is about, I can recommend the great React.js Introduction for people who know just enough jQuery to get by tutorial. This is the best beginner tutorial for React I found on the web. It walks you through the steps to build a Tweet Box using React.js. The nice thing is that every feature is first built using jQuery and then recreated using React. This really shows of the advantages that React has to offer.

On a web application we were building I had a strange issue. A jQuery widget was working as expected until I also tried to use it inside an Angular application. The widget that was responsible to expand or collapse a panel, refused to work. Clicking on the panel header had no effect anymore. This was one of those situations where the solution is obvious afterwards, but I had no clue at first what was going on . When looking inside the widget, I found code similar to this: Nothing wrong with that code you should say! Unless you realize that this code is only executed when the DOM is ready. The HTML views that are loaded by Angular are loaded afterwards when the document ready already fired. So the initialization logic for the widget is not executed for new elements loaded by Angular. To fix it, I updated the widget to use the (newer) jQuery event delegation syntax: So simple, once you know it…

In an application we are combining Angular.js on the client and ASP.NET MVC on the server. This all works great until we added a call to Request.IsAjaxRequest inside our MVC controller: Inside the controller action we check if we have an AJAX request. If this is the case we return a JSON result otherwise we return an HTML view.  We’ve used similar code(in combination with jQuery) in previous projects without any issues. But when calling the MVC action method through Angular’s $http service, we noticed that the Request.IsAjaxRequest() method returned false . When comparing the requests issued by Angular $http versus jQuery $.get() we noticed one small difference. The xhr call initiated by Angular doesn’t contain the X-Requested-With header. And this is exactly the header ASP.NET MVC is looking for to detect if it’s an AJAX request or not. We can easily fix this by changing the $httpProvider configuration to include this header with every request:

Last week I lost a whole day together with a colleague investigating why our jQuery UI Tooltip widget didn’t want to work. Here is the original code: After a long search and a lot of head scratching we finally discovered the cause; the jQuery UI tooltip only works when you specify a title on the tooltip you want to use(even when you want to specify your own content.

In a web application we are building we have a dashboard like functionality. To build this in a clean way, we  wanted to create multiple viewmodels in one page. I found the following jsFiddle demonstrating how to get this working using Knockout:

Durandal is a really great SPA framework. But we had some trouble first to get it up and running. The problem was that we forgot 2 very important lines inside our Durandal main.js: It’s important to define both Knockout and jQuery as RequireJs modules. Without that Durandal remained silent…

jQuery is a great library, it removed the pain from JavaScript development and renewed my love for building web applications. With the increased power of modern web browsers, you can start to question if you still need jQuery as a dependency. Have a look at http://youmightnotneedjquery.com/ . It shows you a specific jQuery function and it’s equivalent in native JavaScript.

As I mentioned in a previous blog post, one of the great features of TypeScript is the support for definition files. For most popular JavaScript libraries a definition file exists, but last week I wanted to use a jQuery widget that didn’t had a type definition file(yet). So I decided to create one myself. The important part is to understand how to link your widget to the existing jQuery type definitions. If you want to extend the $ sign directly, you have to create an interface JQueryStatic and put your functions in it. If you want to extend the $(‘’) selector method, you have to create an interface JQuery and put your functions there.

Rob Eiseinberg, the creator of the great MVVM framework Caliburn.Micro , has shown his JavaScript skills and build a Singe Page Application framework called Durandal .  A few weeks ago, a 2.0 version of this framework was released introducing a large list of new features and functionality. What’s new in Durandal 2.0? A streamlined core with a plugin model for official and community extensions. Now lives side-by-side with other 3rd party scripts A new router with no external dependencies. It supports parameterized routes, optional parameters, splats and query strings. The router handles hash change and push state, supports relative child routers, advanced deep linking hooks, convention-based routing, an event model…and more. More powerful composition of screens, components and widgets. We’ve ironed out the kinks in composition by making the callback lifecycle more consistent and more granular. As part of the process we fixed bugs and extended it with new capabili...

Browsers are really good at caching your data. Most time this is exactly what you need until you are building a Single Page Applications and continuously are changing the used HTML,CSS and JavaScript files. To simplify the debugging process you can (temporarily) disable the browser cache: In Internet Explorer: Open the Developer Tools(F12) Go to the Cache menu item and enable the Always refresh from server option. In Chrome: Open the Developer Tools(F12) Go to the Settings by clicking on the small icon in the right corner:   On the Settings page check the checkbox next to Disable cache(while DevTools is open) . In FireFox: Open FireBug(F12) Go the Net menu item and click on the small arrow next to it. Select the Disable Browser Cache option.

During the year I collect a lot of articles that I should have a look at, now during the holidays I can finally have a look at them. 2 great articles on Smashing Magazine I can recommend are: Journey Through The JavaScript MVC Jungle : A review of some JavaScript frameworks by the same guys that brought us TodoMVC ( a GitHub project that contains the same site written in all possible JavaScript frameworks). It lists the Pros and Cons of each of these frameworks helping you to choose one you’ll like. Designing Better JavaScript APIs : This article talks about designing the APIs that developers will love using . It covers the most important things that you will need to consider before and while writing your own utilities and libraries.

One of the recommendations to improve your web application performance is to use a CDN(Content Delivery Network). This allows you to load common files(like for example jQuery) from the CDN server instead of your own. Extra advantage is that if the user already loaded the same script for another site, it’s still available in the browser cache. But what if the CDN you’re using goes down? To fix this you can use a CDN fallback. For more details I recommend reading Scott Hanselmans post on the subject. The ASP.NET team added a CDN fallback feature to the latest (prerelease) version of the ASP.NET Web Optimizations library . To use it, specify a CdnFallBackExpression .  This expression will be checked and if the expression fails, the fallback URL will be used(a local reference to jQuery in this sample):

Introduction from the website : Developers are now finding themselves having to author applications for a diverse range of mobile platforms (iOS, Android, Windows Phone, …), each of which have their own ‘native’ development languages, tools and environment. There is an ever growing list of cross-platform frameworks that allow you to minimize the cost and effort of developing mobile apps, but which to choose? To help solve this problem PropertyCross presents a non-trivial application, for searching UK property listings, developed using a range of cross-platform technologies and frameworks. Our aim is to provide developers with a practical insight into the strengths and weaknesses of each framework. This project was heavily inspired by TodoMVC , which allows the comparison of JavaScript frameworks. PropertyCross implements the same application over and over again using the following frameworks: Adobe AIR jQTouch jQuery Mobile Native RhoMobile ...

After upgrading my ASP.NET MVC 4 project to jQuery 1.9, I started to get into trouble the moment I called jquery.validate.js. This is the error message I got: 0x800a138f - JavaScript runtime error: Unable to get property 'call' of undefined or null reference How can you fix this issue? It seems that the introduction of jQuery 1.9 breaks the compatibility with the default jQuery.validation library(that is part of the ASP.NET MVC template). The guys of the jQuery.validation library are aware of the issue and already fixed in a new release of their library available on NuGet: http://nuget.org/packages/jQuery.Validation/ . So if you upgrade your web application to jQuery 1.9, don’t forget to also upgrade jQuery.validation to at least version 1.11.0.

After upgrading our ASP.NET MVC 4 project to jQuery 1.9, our application started to fail with the following error message: This is caused by the fact that starting from jQuery 1.9 a map file is added to the NuGet package. In my BundleConfig.cs I had the following: bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-1.*")); The wildcard was being used to get the latest version of jQuery, however, this caused the map file to be included as well. To solve this update the BundleConfig.cs to: bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));

A few weeks ago I went to a presentation about LightSwitch at our local user group . The presentation was great but I wasn’t convinced that LightSwitch was the right tool for me… There were some features still missing that I think are critical before I want to use it for my projects. Somehow Microsoft was able to read my mind because with the announcement of Visual Studio 2012 Update 2 CTP 4 ,  they released an updated preview of the LightSwitch HTML Client containing almost every feature I was looking for. What’s new? New UI primitives such as command bars, popups, and reusable dialogs. Responsive User Interface to adapt gracefully to different form factors. Deploy your application as a provider-hosted app in addition to auto-hosting. Deploy your app to Sharepoint 2013 on premise(in addition to being able to run your app in Office 365) Localize your app into multiple languages. NuGet Package integration. And many more… The official annou...

Starting from Internet Explorer 8+, Firefox 3.1+, Safari 4+, Chrome 3+, and Opera 10.5+ browsers support native JSON parsing. But what if your users are still using IE7 (or even worse IE6)? Here are some of the options I prefer to use: To convert a JSON response to a JavaScript object: If you are using jQuery, use parseJSON . Internally it checks if browser supports JSON.parse, so the fallback is built in. Use the JSON.parse method from the json2.js library from Douglas Crockford. It adds a JSON object to the browser if it doesn’t exists yet. To convert a JavaScript object to serialized JSON string: For jQuery I couldn’t find an out-of-the-box solution, but the following jQuery plugin could do the trick: jQuery.toJSON Use the JSON.stringify method from the json2.js library. What I also like about the json2.js library from Douglas Crockford is that it allows you to manipulate the serialization process by adding a toJSON method to your ...

One of the hidden gems in the SignalR framework is a utility called signalr.exe (in the Microsoft.AspNet.SignalR.Hosting.Utils package) that you can use to do a few things. Install/Uninstall SignalR performance counters Generate a static js file for the magic ~/signalr/hubs url. After installing the Microsoft.AspNet.SignalR.Hosting.Utils NuGet package, you’ll find a SignalR executable in the package folder(under \packages\Microsoft.AspNet.SignalR.Hosting.Utils.1.0.0-alpha2\tools) Open a command prompt(run as Administrator). Browse to the tools folder containing the SignalR.exe file. Run signalr ipc to install the Performance Counters. These performance counters give you more detailed information about your SignalR applications. Remark: To use these on full IIS you need to add the app pool user for your application to the Performance Monitor Users group. Run signalr ghp /path:<path to binaries> to generate a static JavaScript file c...

Syncfusion publishes the Succinctly series concise technical books that target developers working on the Microsoft platform. Each book is around 100 pages and is guaranteed to enlighten you on the topic of interest. Download your free copy today(you’ll have to register but it’s worth it). New releases are coming out every few months but today they offer the following books in this series: Knockout.js Succinctly C++ Succinctly ASP.NET MVC 4 Mobile Websites Succinctly LightSwitch Succinctly JavaScript Succinctly HTTP Succinctly PDF Succinctly Git Succinctly jQuery Succinctly