Front end dev tools for 2014/2015

My top front end dev tools for 2014/2015

Posted on January 3, 2015

There’s been a huge growth in the number and variety of front end tools over the last few years. Here are a few of the tools that I use on a regular basis that help with the build, testing and automation of processes.

Yeoman

Yeoman is a scaffolding tool which I use for scaffolding both WordPress websites and AngularJs apps.

It basically automates all the common tasks associated with setting up your project and reduces the setup to a single command. I can now setup my base projects in less than a minute giving me more time to concentrate on the important more interesting dev.

Here are some usefull links to the generators that I use and the Yeoman website:

PHP Storm

Php Storm is my IDE of choice. For years I used a simple text editor, and while I still used them occasionally, after switching to PHP Storm I don’t think I could go back.

As well as your standard IDE features and support it also has support for GIT, SVN and Grunt which come in extremely handy.

You can download PHP Storm here.

LiveReload

LiveReload has been a real timesaver over the last few years. How many times do you hit the refresh button when developing a website or webapp?

LiveReload simply monitors your file system and then refreshes the browser when changes have been detected. Even better, when you update your CSS the browser is updated instantlty without having refreshing the browser

Give it a try here.

Chrome Dev Tools

Chrome dev tools has got to be my most used tool for development and testing. The main features I use are:

  • The Element inspector for bug fixing markup and CSS. This also allows you to live edit both the HTML and CSS.
  • The Network tab gives you an overview of what’s happening in the browser and allows you to optimise loading. It’s also great for checking for network issues , whether they be issues in loading files files from a CDN or data from an API.
  • The Timeline tab for checking load times.
  • The Resources tab for checking cookies, local storage and session storage.
  • The Console for javascript debugging.

Google PageSpeed extension for Chrome

The Google PageSpeed Insights extension is great for evaluation the performance of your site or app.

After running the extension you’re given an overview of your sites performance with a list of area that need improving and areas that are already preforming well.

You can install the chrome PageSpeed extension here.

Grunt

Grunt is a task runner which I use for common frontend build tasks. It’s a real timesaver!

I’ve included a grunt file in my WordPress Yeoman generator which concatenates multiple CSS and Javascript files and then minifies them, as well as compressing my images.

Grunt can automate a lot more than this but and going through every aspect would be a series of blog posts in itself – You can find more details on the Grunt website.