What's in our Front End Web Development toolbox?

Tamasin Ford -- 8 February 2015

When we updated out website last month, it gave us a chance to review and update our toolsets. Yes… I admit it… it was permission to play! So I thought it would be interesting to share what we ended up using for this project.


You may or may not know that in web programming, everything has to eventually boil down to HTML, CSS and Javascript. Those are the only languages that browsers understand. But to get there, you have many choices, from typing it all out “by hand”, to a large range of tools that aim to make it easier, faster and better through various means.

Here’s what we settled on after some trial and research:

SASS:

Sass bills itself as CSS with superpowers, and it lives up to the billing! On it’s own, CSS is basically a collection of attributes (e.g. “font-color: black;”), but Sass turns CSS into a real programming language with variables, functions, mathematical operations, and more.

BOOTSTRAP:

Bootstrap is a framework (collection of pre-built styles and components) that provides a lot of help with controlling layout as well as some nice menus and other useful bits and pieces. Using a framework saves a ton of time, because you only have to focus on the custom parts of your site.

JEKYLL:

Jekyll is a “static site generator” which means it tries to allow you to build a website without a database. The more helpful part for us is that it allows better code organization and modularization. We put headers and footers into reusable files, and set up templates for back pages that could be used for any given text.

CODEKIT:

CodeKit just makes things simpler. It runs Sass so that we don’t have to. Without it, we would have to run Sass from the command line. This saves a step of maybe 15 seconds, but one that gets repeated very often. It also includes the Bootstrap framework in the project for us.

So that gives you some idea of our primary tools. We did also use others, such as for image editing, source control and testing. Having good tools made rebuilding the website a fantastic experience. It can sometimes feel like a lot of work to constantly learn all the new tech tools that are coming out, but with the right ones that time is paid back many times over.

Join our mailing list

Want to be notified when we open up new classes and camps?
Sign up here. We promise to not spam!