The art of simplicity

While following a session about PWA(Progressive Web Apps) by a colleague, he mentioned the following website: https://whatwebcando.today . This site gives an overview of which Web Platform features are available inside your browser today and if certain HTML5 device oriented features are implemented in your browser. Thanks Mathias for the tip!

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/

A while ago, we had  to write some functionality to highlight the current row and column for the current active cell inside an HTML table. I didn’t pick up the work item but a colleague implemented the functionality. I don’t know the exact implementation details anymore, but I do know that it involved a large amount of custom JavaScript and CSS code(at least a lot more than I expected). Recently I found another clean solution(with far less code) to implement this functionality on css-tricks . No idea, if I ever get a similar question, but just in case, I post the link here…

After leaving the Angular Team, Rob Eisenberg continued his effort in building the greatest next generation JavaScript client framework. Yesterday he finally shared his work with the rest of the world and announced Aurelia . Here are some of the features as mentioned on the Aurelia website : Forward thinking: Written with ES6 and ES7 but transpiles to today’s browsers Modern architecture: Multiple small replaceable components Two-Way databinding: Performant two-way binding to any object using adaptive techniques Extensible HTML: Read as ‘Angular Directives’ Routing & UI Composition: The already great Durandal router on steroids Broad Language Support: Written with TypeScript, AtScript, CoffeeScript,… in mind … And here an introduction video: Introducing Aurelia from EisenbergEffect on Vimeo . As a big fan of Durandal(and Caliburn), I’m really interested in the results. I know what to look into the upcoming weeks…

You are interested in learning Reactive Extensions( http://rx.codeplex.com/ )? But you don’t know where to start or you don’t see a practical use case? Have a look at the ReactiveTrader application created by the guys from Adaptive. From the site: Reactive Trader is a client-server application demonstrating some of the problems needing to be dealt with when building reactive, or event driven, user interfaces. It was initially built as a demonstration application for a presentation we gave at ReactConf 2014 . What makes this example really nice is the fact that it exists for multiple platforms like HTML5, iOS, WPF,…

A colleague is building his own file upload control using Angular.js. He already got quite far thanks to the power of HTML 5 and Angular.js. As he wanted to show some feedback to the user during the upload process, he integrated the HTML5 progress control. This control works perfect together with Angular.js… unless you are using IE 11. Here is the original code(does'nt work in IE 11): And here is how we got it working using ‘ ng-attr-value ’:

After pushing an ASP.NET MVC Web app into acceptance, some users complained that the fonts looked ugly. When investigating the issue we noticed that on Chrome and Firefox a 404 error was thrown when loading a .woff font file in the browser. This prevented the @fontcase specification in our CSS to load the correct font and style our text. We discovered that the MIME type is missing for .woff files in IIS. Luckily, this is an easy one to fix. Open up your web.config and add the following section:

If you like the “Modern”(a.k.a Metro) UI in Windows 8(.1), and want to use a similar user experience in your websites, have a look at Metro UI CSS 2.0 . It offers a set of styles and components to create a site with an interface similar to Windows 8.

On a project I’m using the Telerik Kendo UI widgets and I’m enjoying the experience so far. They are a lot better than the default jQuery UI controls(and better documented). However with the Window widget I had a small issue I wanted to share(together with a solution). The first time I used the Window widget I used the following JavaScript: This code will open a Window when the user clicks on a specific link on my webpage. This code works as expected BUT only the first time that I load my page. If I close the window and click on the link again nothing happens… After some trial and error I found a solution, it seems like you have to create the Window widget only once and then re-use it each time you want to open a new Window. Here is my updated code: You can see that we only create a Window object once and then re-access it through the data property of the div.

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...

Windows 8 introduces the concept of ‘live’ tiles. Microsoft’s explanation of live tiles: “Live tiles sit on the Windows 8 start screen, and are useful for having instantaneous information on constantly changing data like stock indexes, international weather, as well as local and international news. Live tiles replace the need to visit certain websites that contain this information, something that many PC users do on a daily basis. Live tiles also replace the need to launch any of the apps that provide this information; live tiles provide you with short, immediate updates without having to leave your start screen.” But did you know that you can also add live tiles for your website? Doing this is easy! Follow these steps to add live tile support for your website: Go to http://www.buildmypinnedsite.com/ Click on Build your own site tile Specify a Title, Background color and Upload an image . Click on Add Notifications Specify the URL of y...

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.

With the increased interest in Single Page Applications(SPA), the usage of template engines become more and more important. A template engine will take a preformatted client side or server side template(based on html or any other syntax) and transform it to usable html that can be added to your web page. (A good article to get started about template engines is the following: http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more ) The only problem is that every day, a new template engine appears. To help you pick the right tool for the right job, you can use the Template-Engine-Chooser : Remark: I noticed that the tool didn't work on Internet Explorer.

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...

By default, JavaScript error handling will not give you much (extra) information. One way to get some extra info is by using the Error.stack property. Error.stack, while not a published ECMAScript 5 standard, is broadly supported on the web, and enables the developer to readily drill down into errors. This can quickly show you where the problem originated, and will help you to walk the call tree back to where the error condition began. This can be especially useful if you send the client side errors back to the server to store them somewhere and want to debug the problem later. Imagine you try to execute the following code(which will fail because d does not exist): function a() { return d; } function b() { return a() * 5; } function c() { return b() * a() * b(); } c(); If you wrap this in a try-catch block and write-out the stack trace, you’ll get the following info: a@http://localhost/ErrorStackSample/:10 b@http://localhost/ErrorStackSample/:14 c@http://localhost/Erro...

With the release of Visual Studio 2012, Microsoft also updated some of their Visual Studio extensions. One of the extensions I like a lot are the Web Essentials tools and although the live of a web developer becomes a lot easier in Visual Studio 2012, there are still some missing features. Web Essentials 2012 tries to fill this gap. So what’s new in this version? Option dialog: Now it becomes possible to set the most important options through this dialog. JSHint for JavaScript: JSHint is a really good way of making sure your JavaScript follows certain coding guidelines and best practices. Better LESS and CoffeeScript: The LESS editor has been updated to truly take advantage of LESS. This includes: Support for @import directives Intellisense across imported .less files for Mixins and variables All the validation from the CSS editor now shows up in LESS Both CoffeeScript and LESS now uses the official compilers Compiles and creates a .cs...

Last week, I wanted to call an oData service from my HTML5 metro app. First I was planning to use datajs until I discovered JayData which offers similar functionality to datajs and much more! What’s JayData? JayData is a standards-based, cross-platform Javascript library and a set of practices to access and manipulate data from various online and offline sources. JayData provides JavaScript Language Query (JSLQ) as a tool to query local (in-browser and mobile) and remote data sources with a simple, unified query syntax: JavaScript itself. Much like Microsoft .NET developers can utilize LINQ to perform operations on data from different databases. The aim of JayData library is to give a similar level of abstraction with the help of the $data.Expressions API and the JavaScript language itself. JayData is cross-platform (runs on HTML5 desktop and mobile browsers, can be hosted in PhoneGap environment on iPhone , iPad and A ndroid ) and cross-layer as it works on client-side a...

The default behavior of most browsers is to cancel all ongoing requests when a user hits escape.  Last week this bit us in the foot, as we ‘forgot’ to expect this behavior and requests were never fired again in a single page web app. The clean solution is of course to implement cancellation logic for all requests, but as the users were waiting for a solution, we introduced a quick fix. By handling the keydown and keypress event on the document level, we prevented the Escape from bubbling up to the browser and cancelling all requests. $(document).keypress(function(e) { if(e.keyCode == 27) { e.preventDefault(); } } $(document).keydown(function(e) { if(e.keyCode == 27) { e.preventDefault(); } }

Project Liike is an effort by the Microsoft patterns & practices team  to produce guidance that helps organizations build mobile web experiences based off of existing web applications. There are countless devices available today and all indications suggest this number is only going to grow, without convergence. The factors to help choose between native apps and web apps are fairly well-known. Those who choose the web face numerous decisions and challenges based on their requirements. This project aims to help. The team is building a sample application, called Mileage Stats Mobile. It will be released as open source along with all of its unit tests. This reference application, began with the source from a previous effort Project Silk . Project Silk was about building cross-browser web applications with a focus on client-side interactivity. However, it was optimized for desktop browser. Project Silk's reference application was simply called Mileage Stats. Project Liike is a...

You have to target a specific browser and you want to know if this browser supports a feature or not? The Can I Use website is the only thing you need. Just enter the name of a feature (e.g. Geolocation) in the Search box and you’ll get a nice overview with all the browsers(including mobile versions) and their support. Remark: I still recommend to use feature detection inside your web application(with Modernizr for example).