• Grunt Configuration for React + Browserify + Babelify

    React is awesome. I recently began using it on a side project and it has quickly proven itself to be a great way to create fast, dynamic user interfaces with code that’s easy to reason about (I love that expression). It relies on the idea of components, which matches nicely with the practice of splitting your JavaScript into separate smaller files, each representing an individual component. This keeps your code super organized and manageable.

    [Read more]
  • Why CSS Custom Properties (a.k.a. CSS Variables) are Awesome

    CSS custom properties (or CSS variables, as they’ll likely be referred to by most people) have gained a lot of attention lately with the releases of Chrome 49 and Firefox 43, both of which support them without the need for a prefix. Rob Dodson from Google recently wrote an excellent article on them. Like many people, my instant reaction was something like, why would I need in-browser CSS variables if I use Sass? But after fiddling with them for a few days I now understand that their usefulness extends beyond what Sass (or any other preprocessor) is capable of.

    [Read more]
  • A Complete Guide to CSS Grid Layout

    CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.

    [Read more]
  • Building a Simple Archive Page with Jekyll

    I recently decided to build an archive page for my Jekyll site. Nothing fancy, just a list of posts grouped by year. I turned to the official Jekyll documentation and was surprised to come up empty handed. My next stop was Google, which brought me to this question on Stackoverflow. User Christian Specht presented an answer so good I felt the need to share it.

    [Read more]
  • One Week with Jekyll

    I love WordPress. It’s robust, mature, community-backed, and easy to use. I’ve used it on numerous projects and it always does me good when I need all the bells and whistles of a complete content management system. But where do I go when all I need is a basic, simple, no frills blog? In that case WordPress, or any other popular full-featured CMS, is overkill. The solution: Jekyll. Or more generally, static site generators. But Jekyll is billed as a “blog-aware static site generator”. It’s also the most popular one, which is why I decided to sit down, learn it, and create a website with it. In fact this very site you’re reading is my maiden voyage Jekyll project. I’ve been tinkering with it for a week now. Here are my thoughts.

    [Read more]