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 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:
- WordPress Generator – Devpress – A WordPress generator written by myself
- AngularJs generator.
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 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.
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 is a task runner which I use for common frontend build tasks. It’s a real timesaver!
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.