Building a living pattern library with Node.js and Grunt | Part 2 - The Setup

In the previous post, we looked at the growth of design systems and the use of things like Atomic Design to build reusable components. This approach opens the door to craft a toolkit geared towards maintainability and reusability.

Hopefully you had a chance since the last post, but if not, take a minute to install Node.js if you haven't already. Once that's done, you can get Grunt's CLI tool installed by running npm install -g grunt-cli from the command line.

Now that we have the foundation ready to go.

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.

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.