The tools that I use to build websites in 2014

Everything about the way I work has changed in the past few years so I wanted to document it. I’m sure I’ll be using a different toolset in 12 months and, hopefully, I’ll be blogging about that too.

As a preface to this article, I wanted to mention my philosophy when it comes to adopting new tools or technology. Malcolm Gladwell describes four groups of people in his book [The Tipping Point](http://www.amazon.co.uk/gp/product/0349113467/ref=as_li_tl?ie=UTF8&camp=1634&creative=19450&creativeASIN=0349113467&linkCode=as2&tag=plausthogu-21&linkId=P4DROYZ76BKZSSVK">The Tipping Point: How Little Things Can Make a Big Difference<img src="http://ir-uk.amazon-adsystem.com/e/ir?t=plausthogu-21&l=as2&o=2&a=0349113467): Innovators, Early Adopters, Early Majority and the Later Majority. The Innovators are the adventurous ones. Next are Early Adopters who “were the opinion leaders in the community, the respected, thoughtful people who watched and analysed what those wild Innovators were doing and then followed suit”. Following that you get the Early Majority and finally the Later Majority.

I think that’s a good way to describe the way we adopt new tools in our industry and since it’s moving so quick, we all have to adopt to new ways of thinking or new tools at some point. It’s possible to be an Innovator or Early Adopter in a small area of what we do but impossible to do it with everything – there’s simply too much.

I fall somewhere between an Early Adopter and the Early Majority. I love checking out new tools or techniques or methodologies and I spend a large amount of my time reading, researching, and exploring. That said, when I pick a tool to work on a project, I want it to be production-ready, reliable, and well documented. Part of being an Innovator is giving up some of that production-readiness (and accepting the risks that come with it).

So, with that in mind, here are the tools and tech I’m using to build websites as of October 2014.

Development environment and hosting

I use the built in Mac OS X Apache server for local development. Luke Jones wrote a great guide on setting up a local server on OS X. Configuring PHP, MySQL and Git is easy.

For servers, I generally use Digital Ocean. They’re cheap, fast and they have great documentation on server administration. I’ve also had good experiences with Krystal Hosting, VidaHost and if you’re looking for something on the high-end, UKFast.

SASS

I made the switch from LESS to SASS around 18 months ago. I switched due to the community and traction that SASS has. I’m glad I made the switch as SASS seems to be the more popular tool.

If you’re not using a CSS pre-processor, I recommend checking out Dan Cederholm’s SASS for Web Designers.

I use the BEM naming methodology and SASS makes that neat and easy to write.

PHP

I’m still, almost exclusively, using PHP as my programming language of choice. ‘Learn Ruby’ has been on my todo list for around 5 years and I promise one day I’ll get to it. That said, there’s a ton of good CMS’ built using PHP and I’m also very excited about the Laravel framework.

JQuery

I almost exclusively use JQuery for the websites that I build. I learnt JQuery (not JavaScript) which was probably a bad decision in hindsight.

I’ve recently picked up a great book called JavaScript & JQuery. In fact, it’s the best programming book I’ve ever read. I can’t recommend it enough.

Gulp

Gulp is a build system which allows you to automate common tasks such as compiling SASS files, linting JavaScript or CSS, concatenating JavaScript files, and compressing images. Gulp runs in the command line and has a watch command that the browser live-reloads as you could write and edit your CSS code.

Previously, I had used CodeKit to do a lot of these things. I also tried Grunt but ended up settling on Gulp due to its simplicity.

Smashing Mag has a great starter guide on Gulp if you want to learn more.

Origin

Origin is my own frontend boilerplate. It’s nothing fancy – just a collection of .scss files, my .gulpfile.js file and an index.html file ready to get going on a project. I wouldn’t recommend you use it as it’s built purely for the way I work and think. There are hundreds of great frontend frameworks but I wanted to build my own so that I know everything about it. I do play with other frameworks and essentially beg, steal and borrow what I can.

Sublime Text 3

Sublime Text has been my editor of choice for over 3 years. I wrote about my Sublime Text setup (although it’s a little out of date now). I tried out Atom recently but it felt sluggish in comparison to ST. I can’t emphasise enough how important it is to feel completely comfortable in your code editor. Spend time testing alternatives, customise the theme, the fonts, install plugins or packages and learn the shortcuts. It’ll pay off in dividends.

iTerm 2

I use iTerm 2 with the drop-down visor view. I use Terminal for Git, Gulp, creating files and directories, changing permissions, etc.

Transmit

On the odd occasion that I need FTP, Transmit is my client of choice. It’s also handy for connecting to Amazon S3 which I use to store backups.

Github + Github Pages

I use Github to store my open-source projects and this blog is powered by Github Pages.

Bitbucket + FTPloy

I’ve recently been trying out Bitbucket and FTPloy as an alternative to Beanstalk. Beanstalk is a great app that I’ve used for several years, however, the combination of Bitbucket + FTPloy is a much cheaper alternative. FTPloy is missing a few key features, such as manual deployments, which might be a deal breaker.

Chrome Developer Tools

Chrome DevTools is one of those things that I think many of us take for granted. It’s really worth spending some time digging in and exploring as it provides a lot of powerful features and can save a ton of time, especially with debugging.

Browserstack

While I have a few different laptops, phones and tablets to test on, Browserstack is a really great way to test websites. It has a huge selection of operating systems and browsers, including mobile devices.

WordPress

The majority of the websites that I build are powered by WordPress. Clients will often ask for WordPress as they had some previous experience with it. It does have some flaws by and large it’s stable and flexible. Every WordPress site I build uses my favourite plugin: Advanced Custom Fields.

MODX

For larger websites, I typically use MODX which is a flexible and powerful system. I wrote an introduction to MODX which you might find useful if you’ve not used it before.

Perch

Perch is great for smaller sites. Or if you want to add content management to a static site, there’s no easier way than Perch.

They’ve just released Perch Runway for larger sites which I’ve not tried yet.

Jekyll

Jekyll is a static site generator built in Ruby. It works great with Github Pages and powers this blog. I used Anna Debenham’s excellent 24 Ways article ‘Get Started With GitHub Pages (Plus Bonus Jekyll)’.

Other CMS’

Other CMS’ I’ve used that are worth a mention:

• Kirby – a file-based CMS
• Craft – a flexible CMS with great templating
• Shopify – my go to platform for e-commerce

Other Tools

A few other tools worth mentioning:

• Sip – handy colour picker
• Icon Slate – great for making icons in a bunch of different formats

In summary

3 years ago I didn’t know anything about the terminal or CSS pre-processors. We’ve come a long way in the industry in that time.

But, you know, there’s still things I should be using that I don’t. If there’s something I’ve missed, link it up in the comments or tweet at me!