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:
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
Chrome dev tools has got to be my most used tool for development and testing. The main features I use are:
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!
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.