Building a living pattern library with Node.js and Grunt | Part 1

Shouldn’t our goal be to build a library of plug-and-play components that we can use for various pieces? This idea requires a new way of thinking when looking at web pages. For those who have built blogs, or have used other CMS’s; components of this will be extremely familiar and you may use some of these ideas already.

This idea really falls in line with methodology of of "Atomic Design" that Brad Frost talks about. Atomic design is a methodology for creating design systems, focused across five levels:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

The era that we are currently in, is one that is quickly moving in the direction of an atomic design pattern. Putting this type of approach into practice can be a challenge, especially if you have a larger team. However, by crafting a toolkit that is geared towards your teams process and approach, you can not only become a more efficient developer but also create a maintainable, well-documented design system.

In February, I had the chance to speak at the jQuery Conference in San Diego and then again at CodepaLousa in Louisville, KY about a toolkit and workflow that I've developed. This toolkit is focused on creating reusable atomic pieces and using them to create a living style guide.

Over the course of this series, we'll go over the different pieces that work together in the toolkit and also dive in-depth. By the end, you should understand the toolkit itself (which will be up on GitHub during the course of this series) and also be ready to extend it or build your own custom toolkit for your team.

Before the next post, take a minute to install Node.js if you haven't already. Once that's done, you can get Grunt up an ready by running npm install -g grunt-cli from the command line.

The instructions above are from a Mac perspective. Sorry for Windows users, I'm not sure everything involved with getting these pieces set up easily.

Alfred workflow to export Chrome Canary tabs to Evernote

Many times when I'm researching things I'll have a few Chrome windows open with a bunch of tabs in each one. All of these tabs are generally related (outside of a scratch tab here and there).

I enjoy using Chrome Canary as my regular, every-day browser and there are times where it can get unhappy with you for having so many tabs and start taking it out on your memory and/or processor. This is what made me think, "It would be awesome if I could use Alfred to just type a keystroke and then get a new Evernote note with a list of links based on the open tabs from that window."

The awesome thing about Alfred Workflows is that they open the door to do exactly what I wanted! I was able to find an AppleScript to save Safari browsing sessions to Evernote that was really easy to convert to an Alfred Workflow to do what I wanted.

Now you can have it too! I've created a new alfred-workflows repo where I'm going to start storing different workflows that I use and this workflow (Chrome Canary to Evernote) is there as well.

If you're a powerpack user, just download the workflow and open it with Alfred to import it.

Once you have it imported, bring up Alfred and type c2e and hit Enter. A new note will be generated using the tabs from the front-most Chrome Canary window.

Video: Modular Development with Require.js

In September of 2013, I had the pleasure of giving a talk at the first-ever BlendConf in Charlotte, NC. It was an awesome conference, and I'm hopeful to at least join in on the festivities again later this year.

Below is the video of the talk I gave at BlendConf called "Modular Development with RequireJS." It's not focused only on RequireJS, but starts off taking a look at some problems that front-end developers and development teams are facing today. It then goes on to briefly explore a couple modular patterns and principles before moving on to examine a couple modular development approaches we can take today. The focus of those approaches will be on using AMD and one of the implementations of this spec, RequireJS. Hope you enjoy!

Modular Development with RequireJS - BlendConf 2013