Javascript package management using is a package manager for the web designed by Twitter and available on GitHub. Normally when you need the latest version of a Javascript librariy such as jQuery, Angular.js, etc you download the relevant library from the website and add it to your project. This though can be a bit of a laborious task each time for each project or each time a new version of the library is released. simplifies this allowing you to run a single simple command line tool to search, download, manage and update all of the libraries in your project. is based upon Node.js and uses GIT so you will need to have both of these installed for it to work.

Installing is a simple npm (Node Package Manager) command:

npm -g install bower

You can then download a library such as jQuery and Angular.js using the following commands from your project folder:

bower install jquery
bower install angular will download the latest stable build of jQuery and Angular.js storing them in the local folder ‘components’ or if that folder does not exist it will create and store them in ‘bower_components’. It even does dependency checking for you. You then just need to add a ‘script’ reference in your HTML file. In the future if you want to check for an update to the libraries your project brings in just type in the single command:

bower update also allows you to search for features, such as if you want to look for available jQuery plug-ins you can type in the following command which will find and list them for you:

bower search jquery

Since I’ve been using I’ve found that it has certainly helped my workflow searching, downloading and updating libraries which I use for my projects. The registry contains quite a lot of projects though from the thousands available on the internet it doesn’t contain all of them.

Personally I found the fact that it downloads components to ‘bower_components’ or ‘components’ a little awkward. For the project I was working on I preferred them in the folder ‘javascript’. is configurable and allows you to configure directory structures, projects and repositories. Configuring is a simple case of creating a local file ‘.bowerrc’ which is a configuration file in JSON format. You can then configure folders using a ‘.bowerrc’ file with the following contents:

   "directory": "javascript"
} contains quite a lot of documentation to help get you started and I found that I got the hang of it in now time. You can check out more information on including check out the sources from

Update on HTML, Javascript & CSS exam – I’ve Passed!!!!

I took the “Microsoft exam 70-480: Programming in HTML 5 with Javascript and CSS 3” today and I’m happy to say that I’ve passed with 95.7% ūüôā

I’m now planning working towards my ‘Microsoft Certified Solutions Developer’ (MCSD) certification. This will mean taking my next exam ‘Developing ASP.NET MVC 4 Web Applications’ in May time.

Lots of study to do, but I’m looking forward to it ūüôā

Exam 70-480 preparation continued …

With just under two weeks to go and it’s all full steam ahead for revision. I’m feeling generally confident at the moment, at least more confident than I was a few weeks ago. There are still a few areas which I need to look at such as remembering the exact syntax of some of the CSS3 tags such as with transforms, animations etc. I’ve been learning using HTML, Javascript and CSS in a few of my test projects and it’s¬†truly¬†amazing how much more you learn by doing than reading a bunch of theory. I always think that not only knowing and but being able to apply knowledge in a creative way is important.

I’ve also been discovering the nuances of the different web-browsers. Chrome and other webkit based browsers are generally my browser of choice. Mainly due to their rapid adoption of rapidly developing standards and also the user interface design which is minimalistic and easy to use.

I bought and downloaded the book ‘Training Guide: Programming in HTML5 with JavaScript and CSS3’ which is currently on early release for the 70-480. My initial impression is that this is a well written book which certainly gets you started on the subjects. I would however advise¬†caution¬†about using this book exclusively for the¬†70-480 exam as there are a lot of subjects which aren’t yet included from the 70-480 exam requirements including¬†grid box, flex box, transformations, columns, animations, gradients, shadow and others. It also doesn’t talk about the new structure where you can use sections and articles to change the level of header tags. Such as an h1 tag inside a section will appear as an h2 tag. You’ll probably see quite a few comments in the errata which I’ve added.

For practising CSS3 I’ve been using lots as I can try out new things and watch how they effect the presentation of the page instantly in Webkit. For Javascript experiments I’ve been using Visual Studio 2012 as it has fantastic code completion support. There is also the feature of adding references to other Javascript files which makes code completion really fly, just put the following at the top of your code to reference another Javascript file ‘/// <reference path=”other.js”/>’ or create the file ‘_references.js’ containing all the Javascript files in your project and just reference ‘_references.js’ at the top of each of your Javascript files.

Although I haven’t even taken the 70-480 exam I already have my eyes set on the next goal of taking the next two exams which would get me the ‘Microsoft¬†Certified¬†Solutions Developer (MCSD): Web Applications’ qualification.

Study continues …

Getting ready for the exam Microsoft 70-480: Programming in HTML5 with JavaScript and CSS3

I’m currently studying to take the ‘Microsoft Exam¬†70-480: Programming in HTML5 with JavaScript and CSS3’ in March. I’ve been interested in web programming for several years and I really wanted to develop and hone my skills in this subject further, and update them to the new HTML5 and CSS3 standards.

Some of the resources that I am using to help with my studies are:

  • – This is the recommended Jump Start course for the 40-780 exam. It is very heavily Windows 8 centric although it’s a very good base of information. I would be careful here though as some things which they discuss are not yet avaliable in most browsers or at least not how Microsoft implements them. An example of this is the flex-box and the grid box. At time of writing the flex-box does have support in other browsers but behave very different to the Microsoft implementation. The grid box is only implemented in IE10. Also the Error object is implemented very differently in IE10 than other browsers (I checked Webkit and Firefox).
    • IE10:¬†Error([number[, description]])
    • Firefox/Webkit: Error([message[, fileName[, lineNumber]]])

ImageTo give myself interactivity and to let me rapidly prototype things I am using the open source editor which is really starting to come along, easy to use, configurable and intuitive. It also works exceptionally well with Google Chrome so I can very easily change HTML & CSS files and see the results in real time.

Some things which also dawned on me was with getElementById and querySelector calls. So to get the element with id=”myElement” would be¬†getElementById(“myElement”) or¬†querySelector(“#myElement”). The querySelector looks great and is used by quite a few people, but I was wondering about performance. Taking a look at a few projects on JSPerf demonstrates that in many cases¬†querySelector is 58% slower than¬†getElementById which is staggering.

Also in the Microsoft Jump Start they talk about the NodeList returned by querySelectorAll is live, so if you add a new element to the page then the NodeList should automatically update with the new element. I tested this on Chrome and found that it doesn’t, and that I needed to call¬†querySelectorAll again. I would therefore be very wary about some of the content of the Microsoft Jump Start as not everything they spoke about will work on another browsers.

All in all it’s going very well. Javascript is an amazing and crazy language. I first learn’t Javascript a while ago by studying the different Javascript design patterns. HTML and CSS are also both amazing which also give you a huge ability to do almost anything in a huge variety of different ways. This is probably one of the more dangerous areas of HTML and CSS, something may seem a good idea at the time but without proper prior thought you can rapidly get yourself into a hole.

The studies continue.

A round up of things I’ve been looking at recently

In the name of creativity and plan¬†curiosity¬†I’ve been looking at lots of different things recently. Quite simply anything which caught my eye or seemed interesting.

WebGL exampleWebGL – This has been around for a couple of years now and is simply 3D graphics for the web. Up until recently the only real way to get 3D graphics in browser has been to install a third party plug-in or¬†bloatware¬†software which in most cases doesn’t work and if it does will only work for a very small fraction of devices. WebGL is an open standard being developed by the¬†Khronos Group and supported by Google (Chrome), Opera, Apple (Safari), Firefox a few others. With no great¬†surprise¬†Microsoft Internet Explorer doesn’t support it (though what does it support really?).

WebGL is something to get excited about, and their are lots of people currently developing for it and creating technical demonstrations (see Chrome Experiments and Three.js). I’ve recently started learning how to use WebGL from the book ‘WebGL: Up and Running’ which does a little bit on WebGL and quite a lot on the WebGL wrapper Three.js library. WebGL is development is certainly not an easy one to learn (much like any 3D or OpenGL programming) but there are fantastic libraries such as Three.js which takes quite a bit of the heavy lifting and help to explain some of the more difficult concepts.

Windows 8 Modern UIWindows 8 Modern UI – I decided to take a look at developing for the new Windows 8 UI, mainly to find out what was involved, how easy / hard it is and to create a comparison between it and Android programming. As this is quite a large change to traditional Windows ¬†programming there is a reason amount to take in. Though it works heavily with existing Microsoft programming concepts such as XAML and objects and is generally fairly easy to navigate. I’m still not sure about the new Windows 8 probably as it’s such as major change to a operating system which hasn’t really seem such as dramatic change since the introduction of Windows 95.

Personally I’m sticking with Windows 7 as my main dev environment, why? Well my general¬†philosophy¬†is don’t hide anything from the user, but to show things when they need to be shown. Windows 8 hides a lot, with hidden menus around the screen I can see how it works for tables but it doesn’t work for desktop. I’m one who works in Virtual Machines quite a lot so you have to be quite precise if Windows 8 is on my right screen, the host Windows 7 on my left and I want to click on that precise point in the bottom left to bring up the start menu or top right to bring up this menu, or top left to bring up that menu …. Yes I could just use the Windows key but that not the point. Simply it’s bad design.

ImageHack Design РI may be a software engineer but I love design, even more I love good design. I also like to play with pens, pencils, paper, scissors, post it notes, glue and all those things you used in primary school. I also love to draw as a hobby at home, I may not be up to some peoples standards but I love it. Hack Design is a web site devoted to engineers, programmers, hackers or anyone who wants to move towards design or at least what design is, what it involves and how to start doing it. Hack Design is a weekly digest which uses text, pictures and videos to talk about and explain design, and design ideas.

These are just a selection of some of the top ones I’ve been looking at. In addition to these I’ve also been looking more into Node.js, Underscore.js, Backbone.js, Phantom.js and many others.

BootStrap from Twitter

Today I heard about Bootstrap from Twitter and decided to take a look. Bootstrap is a collection of HTML & CSS conventions and was developed by Twitter as a single conventions library. Bootstrap is pure CSS and HTML which has been tested and works on all modern web-browsers. It is very well documented with some great examples. I’m amazed at how little code can be written which achieves very powerful results. The examplehero.html page alone gives a good basic example of using the library to rapidly create well designed, well structured feature rich designs. The docsindex.html page though is amazing and really demonstrates the simplicity and power of the Bootstrap library.

Another tool is Less also from Twitter which is a powerful style sheet language which extends CSS. Less is basically CSS with the addition of global variables and nested styles, two things which are most definitely missing from CSS in my mind. You can then run the .less file through the Less tool and it will generate the CSS for you (my preferred option), or include the .less file and it’ll generate the CSS from the on the fly. Less is certainly something to be looked at by anyone doing web development as it massively simplifies the task of editing and getting right your CSS files.

Using Bootstrap for only a couple of minutes and taking a look though the code has already taught me a lot. I’m certainly going to go back over my implementation and reimplement several things. Less is a pretty great tool too.

Web technologies market trends

The current market trend is in web-technology and creating web-based applications. A large number of companies are moving their traditionally based desktop applications to the internet written in HTML, Javascript and CSS. The great advantage to this is that webapps run anywhere a user has a browser and an internet connection. This includes access from your home PC, tablet, laptop, mobile phone and internet enabled TV. This is great as users can simply sign up to a service, log-in and and start using the software. Almost gone are the days of having to download, install, set-up, maintain and upgrade the software. Instead the software in on a server maintained by its creators & you simply have to sign up and log-in.

Another great advantage to web-technologies is that HTML, Javascript and CSS run anywhere on any platform supporting the latest web-standards. It doesn’t matter if you are running on Linux, Windows, Mac, Chrome OS if you have a browser it’ll work anywhere. This is one of the founding principles of Google Chrome OS, where the user doesn’t need a platform where they can install software, instead needing an internet connection and a little storage to save files and webapps in offline mode.

Another great advantage to webapps is that it’s easy to “try before you buy”, you can login and try the demo or a low function version of the software, if you want more functionality you can subscribe to the the service, if you don’t want it any more then just stop the subscription.

This does have a few draw backs, traditionally when you buy, download and install you have a copy of the software, forever. So it the company goes bust, the licensing model changes or support is stopped you still have the software on your computer and you are free to use and reuse it. Webapps though don’t have this luxury, if the company goes bust, the licensing model prices you out of the market, changes to Terms and Conditions or the server goes down then you simply don’t have access any more.

Webapps also have other trade-offs. The biggest problem for webapps is speed. Web-applications are written using interpreted code, this means that the web-browser reads the code using a language close to what a human can understand. Typically desktop PC software is written in a programming language and compiled to something understandable by the computer, in the computers native language (hence native code). For interpreted code the web-browser has to read the code, work out what each instruction means and convert it to a form that it understands each time the software is run. This does provide a bit of a performance and memory cost. Many modern browsers are though very good at doing this task, desktop computers are becoming increasingly powerful, so most users day to day don’t notice the performance bottlenecks. It’s mainly when you have complex data-processing tasks, or where you have embedded devices which don’t have the performance processing capabilities that these problems are observed.

Webapps though can be stored and used on devices. For example HTML 5 now introduces offline mode so if you loose internet connection the webapp is cached in your browser, and your files and settings re-synchronised with the web when you reconnect.

Many phone App developers have seen the advantage of using web-technologies. Products such as PhoneGap enable developers to create their application in HTML, CSS and Javascript and have these packaged up as native or near-native packages which can be sold in AppStores and Market places, without ever needing to access the internet again. This is a great advantage as by writing the software using these technologies the application can be written once and deployed to a wide variety of devices types.

The future is certainly bright for the web and all those who can see opportunities to harness its advantages and capabilities.