The Web Technologies and Tools I used to Build this Site

August 28, 2014

Sass, Wordpress, Sublime Text, and Grunt are just some of the tools / technologies (or whatever we're calling them) that I employed for my own blog. Some fell in to my lap, while some were chosen because another tool fell short. Here's a list of my favorite tools all of which I used to build this site.

Text Editor

Sublime Text is an essential part of my workflow. I absolutely love it and keep learning from it every day. Adam Simpson gave a great talk at the  2014 Front End Summit by Environments for Humans on text editors. He referred to Sublime Text as an ‘Onion’ application, because it has so many layers to pull back. Each layer allows you to learn new features that automate your workflow. I like that about Sublime. Without fail there’s a new shortcut command to do something sans-mouse that I never knew before. For instance, you can use SHIFT+CMD+F to do a ‘find and replace all in files’. Even better is CMD+P to bring up the find any file search screen which allows you to super quickly open a file without using the mouse or navigating throughout your file system. And it’s super fast.

sublime find anything

Even though there is so much to learn about Sublime, the barrier to entry is incredibly low. Unlike the popular editor, Vim, Sublime doesn’t require a lot of time learning the basics. I’ve never used Vim, and I hear great things about it, except that it does take some time getting used to.

Snippets

Snippets are also an incredibly useful feature in Sublime Text. Each snippet of code I create is accompanied by a keyboard shortcut to paste in the code snippet without touching the mouse. I like to use big “superman” comments in my html to visually identify sections of my code. For instance:

<!--
==============
nav
==============
-->

I have an article on creating sublime text snippets that shows you how to save and use them easily. Being able to regurgitate these blocks of code quickly, and especially without touching my mouse, is critical to having a fast workflow.

Packages/Plugins

Plugins in Sublime are called ‘packages’. Sublime has tons of packages that can be installed for just about anything you need. For instance, if you have to write Coldfusion (and poor you if you do) there is a Coldfusion syntax highlighting package that will do some serious ‘code color-coding’, if you will, to make your life easier. One of the best packages that every Sublime user must install is Emmet. Emmet allows you to write code like div.wrapper and have that unfold in to this:

<div class="wrapper"></div>

I might add that Emmet is available for other text editors besides Sublime however. Two other good packages include Sidebar and Advanced New File.

Downsides

Installing packages is kind of a process and tricky the first few time you do it, which is why I have a post on installing sublime package manager and packages. You actually have to install the package manager package before you can easily install other packages. There is a way to install packages without the package manager, but that is kind of a pain too. Compared to Adobe’s open source code editor, Brackets which has a built in package manager, Sublime package installation is an area where it lags compared to others. However, the sheer number of packages available in Sublime is amazing. And once you know how to install them, then it’s very easy.

Content Management System

This site was built a few years back as a one page flat portfolio site without a CMS. In recent times I wanted to start a blog to help me write about the things I’m learning and using on new projects. So I chose WordPress as the CMS. The choice wasn’t clear at first. I started using Expression Engine originally. We use Expression Engine whenever possible at Marketing Edge Group. Expression Engine and I have a love/hate relationship. Its fantastic in so many ways and gives you so much control. That’s also the downside in my opinion. Some things that WordPress makes simple and easy, Expression Engine make a little more difficult. Overall I though WordPress had everything I needed for my site and it’s just so easy to use, install, and find plugins. It was an easy choice to go with WordPress.

CSS Preprocessor

I’ve used Less and Sass now on large projects and feel I can compare with some tiny bit of authority. There are the obvious differences.

Variables

Sass uses the ‘$’ to denote variables while Less uses the ‘@’. Who cares right?

Mixins

Sass declares mixins with the ‘@mixin border-radius(5px);’ and ‘@include border-radius;’ declarations, while Less isn’t that verbose. Simply declare your mixin like any other CSS class ‘.border-radius;’ and you’re good to go. Edge goes to Less by being more succinct. However if your write traditional Sass syntax instead so the scss syntax the ‘verbose-ness’ is tempered quite a bit.

Inclusion in noteable front end frameworks

Less is included in Bootstrap 3. Sass is included in Google’s new Web Starter Toolkit. I think the inclusion of Less in Bootstrap has made it a more widely used preprocessor from what I’ve heard (I don’t have any numbers on usage statistics however).

Noteable CSS People

So why did I choose Sass? A great podcast hosted by Dave Rupert and Chris Coyier really brought CSS preprocessors to my attention a few years back and they were on the Sass train. So I went with what my CSS mentors were using. Also, Dan Cederholm wrote Sass for Web Designers published by A Book Apart, which after reading it, cemented my decision to go with Sass. All in all though, I think I could have gone either way with Sass or Less and been in a very good place.

Grunt

Grunt describes itself as a javascript task runner that after configuration will do the mundane work for you and your team during your ‘build process’. I’m using Grunt to optimize images, as well as minify and concatenate javascript. Nothing too fancy. And I haven’t tried Gulp yet. I initially heard alot of excitement about Grunt and decided to try to see what all the hype was about. I gave it a shot and it takes care of the dirty work for me. Is it a critical part of my workflow? Not so much at the moment. But it is a very nice thing to have on my toolbelt. On another project I used Grunt to auto-generate a cache manifest for an offline html5 app, which was a tremendous help.

Illustrator

I’m still old school. If I’m doing the visual design for a website, I’m drawing it out in Adobe Illustrator first. If I don’t have to get client approval, I won’t spend too much time putting a design together. I’ll try to get to my code faster and design some of the features in the browser where CSS can help that process go faster.

I don’t design every website I work on, but when I do, I prefer to use Adobe Illustrator.

I do prefer Illustrator over Photoshop. With Illustrator I feel it’s faster to draw out boxes and manipulate the dimensions of those boxes, changing colors, etc. Almost everything I do in Illustrator can be done in Photoshop, but I can personally move faster in Illustrator for whatever reason.

Sketch

Right now I have a subscription to Adobe Creative Cloud so I’m not really exploring other options as far as design tools go. However, also at Front End Summit was a talk by Clark Wimberly on Sketch. Described as a very young tool that is designed for the modern web. Change a headline on artboard 1 and it CSS-like changes the headline on all artboards. I haven’t used it, only saw the demo, but it looked very interesting. Sketch may be in my future, but not right now.

Road Map

These are the tools I used to build this site and most likely I’ll use most of these tools going forward for a while. There’s a few things I want to do with this site going forward.

  1. Use SVG instead of images when it makes sense. This excludes screenshots and other rasterized artwork, but does include the logo and much of the artwork on the ‘About’ page.
  2. Refactor the style sheet. This is not a tool or a technology, but I need to do this. I first built this site a few years back as a flat portfolio site. Then I went thru a few iterations and now am launching the ‘big 2.0’ redesign with blog. In between I started using Sass, so clearly the stylesheet is a bloated mess. I want to organize the Sass includes better and really get rid of unused styles and make sure I’m using efficient selectors. I don’t think I’ll get a performance gain, just simply for cleanliness-sake.

That said, I think this site is a decent start and am looking forward to writing super nerdy, informative articles on front end web design.

Mastering CSS: Book by Rich Finelli
Mastering CSS, the Book! Flexbox, Layout, Animations, Responsive, Retina, and more!
Mastering CSS, 2nd Edition, video course by Rich Finelli
Mastering CSS, Second Edition: 47 videos on how to make websites like a boss! Flexbox, Animations, Responsive, Retina, and more!
Back to top