• Home
  • Blog
  • Handy web based tools for the front end developer

Handy web based tools for the front end developer

It is a hard life being a front end developer. Technologies in our field are constantly changing on a daily basis, demand for snazzy new features are ever increasing and our skill sets must adapt to fulfill our client's needs. However, I have found that there are a few web tools out there that can lend a helpful hand. These are a few of those tools which I believe can help a front end developer stay up to date and produce great quality work.

The first and foremost being HTML5 Please (http://html5please.com). HTML5 Please is an extensive list consisting of all those shiny new HTML5 and CSS3 features which you have been hearing about and are eager to use. Before you use them it is important to fully understand the consequences; how behavior differs between browsers, whether it will break in older browsers or if the technology is even stable to use in production yet.

It is especially helpful when you are presented with a decision between your trusty tried and tested old method and a new technology. You can go to HTML5 Please for a second opinion. What is the current collective opinion of the web's front end experts? It is your go-to buddy for new features and paired with Can I use (http://caniuse.com/) it gives you the facts providing you with exactly what you will need to support all browsers in this world of ever changing web standards.

Another source of useful information which aids browser support is Prefixr (http://prefixr.com). When using CSS3 properties it is very easy to add vendor prefixes for each browser to ensure maximum support. However doing this will result in overly bloated CSS and the possibility of using properties which never even existed in the first place such as -o-border-radius. At the other end of the spectrum you could leave out the vendor prefixed properties and risk the possibility of having broken layouts in certain browser. Prefixr is a handy little tool which you can paste your CSS into. It will then tidy up your prefixes, removing those which are no longer needed and adding in those which are still used.

Equally as important as browser support in front end development is performance. Today we have no lack innovative designers trying out daring new styles and techniques which can often provide us developers with a challenge to keep page load time down and transitions snappy. One way of dramatically reducing page load on a busy web site is by using image sprites, and I personally find manually creating sprites time consuming and frustrating. Luckily there are plenty of services out there to help, though the one which I believe stands out right now is SpritePad (http://spritepad.wearekiss.com/). With SpritePad you can upload each of your individual images, the tool will then combine them into a single sprite and provide you with CSS for each one including size and background position. No more tedious pixel tweaking to find the ideal background position!

Lastly, I'd like to mention PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights) which is a free analysis service provided by Google. PageSpeed insights will analyse your web site and provide useful suggestions on ways which you can improve the performance in a handy colour coded list representing priority and potential for improvement. Using this list you will learn techniques to improve performance not only for your current project but all future work, and coming from such a prestigious company you can be assured that all information from this tool is right up to date.