Improved front-end workflow for Windows

For some time I wanted to improve my front-end workflow. The search for an optimized workflow almost made me switch to mac, and I am still considering the switch. It seems to me that the windows front-end developing environment lacks serious momentum compared to the progress being made on linux and osx.

However now onto the good stuff. I had a few goals for my new workflow; LESS / SASS, auto refresh function, file minification and optional device checking. All this in combination with a proper IDE. At first I gave a shot at Yeoman, the installation with Chocolatey went perfect, however Yeoman itself gave some windows related errors. I am sure Yeoman should work fine, but I like to have my stack divided in several software sections.

The first goal was getting autoreload for the browser. For windows there are several options, all with there own pros and cons.

  • First there is “web essentials” an extension for visual studio, these make it possible to reload the css only. This could be a use full start if your company restricts you to use visual studio for front-end development.
  • Netbeans 7.3 with live html, this is an easy way to get a lot of functionality. However the beta version had difficulties to detect changes made by external compilers. For example css files compiled by the winless less compiler were not detected by the live html functionality. Netbeans live html has the advantage that it works on all file locations, a local server isn’t required.
  • Livereload browserplugin, i use this plugin in combination with sublime text 2. This solution works perfect, combined with some LESS plugins for sublime the less files compile automatically and the updated css file updates the livereload plugin.
  • At last there are a lot of scheduled refresh options, these refresh the browser every on predefined time. I think these options work but are not a very “clean” solution for the problem.

I’m more than happy that I have renewed my workflow, especially “Sublime text” is an instant saver, although it is lacking some deeper IDE functions, like recognizing functions from other files ( If there are some plugin to solve this please share them ). But overall Sublime is an amazing fast and “clean to the eye and mind” editor.

My current stack is as follows; sublime coupled with some less formatting plugins. Less compiling is done with WinLess. Livereload in chrome is coupled with sublime and chrome is optionally connected to devices with Adobe Edge Inspect.
Coding now feels like typing a letter, focused on the code, instantaneous feedback, brilliant 😉

At least until I need to merge the code back into visual studio and TFS, and of course next year there will definitely be new shiny toys.

Javascript MVC: a simple todo list

Download the source

You can download, and check the source from my github account

A lot of beginning javascript developers might find it hard to start with design patterns. And for most projects larger frameworks, for example backbone.js would be overkill. I created a very simple todo example application based on mvc. I tried to keep the app as clean and concise as possible. Therefore the application is “ugly”, no styling no images etc. I did use jQuery for event dispatching, to my opinion this easier to understand and to maintain than pure javascript events.

Application structure

The application has three main classes and i did not follow the mvc pattern really strictly, for example i could have implemented the model more strictly, with getters an setters, and for example use a singleton for for the model. I did however decoupled the model from the view by the controller.

The Model

The model module is essentially one private array which stores the todo items and is exposed by some public methods.

var Model = function () {
        var _todos = new Array();    

	var notifyController = function () {	
        // public methods
	return  {
		addTodo: function ( todo ) {
                editTodo: function( index, newTodo ){
                    _todos[index] = newTodo;
                deleteTodo: function ( index ) {
                getData: function(){
                    return _todos;

The View

the view module below handles the user events and updates the view (html file). The view is coupled with the html file. The main events are the “add-event”, triggered by the “add” link and the enter key, and the delete event which the “delete” link triggers.

var View = function () {
	var updateView = function ( todos ) {	
            $('#todoList li').remove();
            for( var i = 0, len = todos.length; i < len; i++ ){
               .append( '<li>' + todos[i] 
               + '<a data-index="' + i + '" href="#">remove</a></li>');
        //set the handlers for the view
        var initView = function(){
            $("#addTodoButton").on("click", function(){
                var event = jQuery.Event("addItem");
                event.todo = $('#addTodo')[0].value;
                $('#addTodo')[0].value = '';
            // track enter key
            $('#addTodo').on("keypress", function(e){
              if(e.which == 13){
                var event = jQuery.Event("addItem");
                event.todo = $('#addTodo')[0].value;
                $('#addTodo')[0].value = '';

            $('#todoList a').live("click", function(e){
                var $todo = e.currentTarget;
                var event = jQuery.Event("deleteItem");
                event.index = $($todo).attr('data-index');
	return  {
		updateView: function (todos) {

The Controller

The controller module listens for the events disposed by the view module, the controller is aware of the model and the view.

var Controller = function (view, model) {
        var _view = view;
        var _model = model;

        // event binding
        $('body').bind('addItem', function(e) {
           _model.addTodo( e.todo );
         $('body').bind('deleteItem', function(e) {
           _model.deleteTodo( e.index );
        $('body').bind('updateView', function(e) {
            _view.updateView( _model.getData() );

The Application

The last script is the simple initialize script which binds the MVC modules together. The model and the view are instantiated and passed to the controller.

var model = Model();
var view = View();
var controller = Controller(view, model);

The current application is very simple. If the app would be extended I would start by creating a “todo” view item, this would separate the single todo item from the listing ( and perhaps sorting ) of the todo items. Extending applications like this maintain a clear separation of functions, which definitely helps if an applications grows larger.

Download the source

You can download, and check the source from my github account

The Tangled Web, book review

Book cover of The tangled web

  • Author: Michal Zalewski
  • publisher: O’Reilly Media ( No Starch Press )
  • pages: 273


I liked the book, the book is thorough, on a tough subject. What I missed is a more practical approach of the secure web, almost all web developers are also intrigued by hackers. to my opinion hacking itself could make developers understanding the holes of the web more easily. I really would liked some more practical examples of websites and how to brake them.

The book is handy for reference ( although the internet is might be more useful ). I expected to learn some fundamentals to cope with security issues in the daily live of webdeveloping, that after reading the book and messing around with some code examples my awareness for possible security flaws would be raised.

Security Awareness

The untangled web partially raised my awareness. Since i read the book i am more aware of the possibility of security issues in many layers of the web, plugins, java applets and other stuff that lives on the internet. Again what I missed was a more practical approach. For example the book could start with a simple php site implementation. This should be of no concern for the average reader of this book. With the example site created the book could have show ways how to hack the site. I know this might not be the most ethical methodology, but for me it would be the best way to remember all the information about security issues and how to prevent them.

The Future

Later chapters describe some modern features of the web. Luckily most of the these are reasonably robust, for example web sockets and web workers. In this section the book becomes also more practical and more fun to read. I enjoyed the epilogue of the book where the analogy is made between the society en the online society which hasn’t had any time yet to form human-based ethics. Regarding piracy and security.


There is a lot to be said about web security, much more than i would have known. I hope i have raised my own awareness regarding security to implement it in my daily job. However i will have a hard time selling the extra time in advance to clients.

I must compliment the author for writing this reference book about security issues on the internet. It is easy to see that a lot of research has gone into this book. Bottom line this isn’t a fun developing book but it will certainly improve your quality as a developer.

The books product page