A List Apart

Menu
Issue № 374

Designing in the browser was only the beginning. Kick your interactive mockups up a notch with Node.js.

Even Better In-Browser Mockups with Node.js

by Garann Means · 13 Comments

Designing in the browser has all sorts of benefits, like producing more accurate, comprehensive results and removing the extra step of converting from image file to markup and CSS. But even sites designed in a browser still require pasting in content, faking interactions with the server, and creating placeholder JavaScript that isn’t usable on the live site. Wouldn’t it be nice if we could go from just designing layouts and interactions to designing the whole client side of the application during the same process? We can, says Garann Means in the first of two articles explaining how Node.js can streamline your design process.

Node at Work: A Walkthrough

by Garann Means · 20 Comments

In “Even Better In-Browser Mockups with Node.js,” Garann Means explained why Node.js makes designing applications easier and more efficient, and how to get started. Now it’s time to see your new design process in action. In this walkthrough, we’ll build a feature for a mock art store, complete with live demo and GitHub repository. Follow along at home (or in your cubicle) and you’ll have a mockup that mimics the interactions it will have with its production server precisely on the client—without the need for hard-coded data or temporary workarounds.

More from A List Apart

Columnists

Rian van der Merwe on A View from a Different Valley

How to Do What You Love, the Right Way

You can find work where you do what you love, even without making a huge career zig-zag. Start now by doing what you love some of the time, and it will help you get to a place where you can do what you love most of the time.

From the Blog

Learning to Be Flexible

As a freelancer, I work in a lot of different code repos. Almost every team I work with has different ideas of how code should be organized, maintained, and structured. Now, I’m not here to start a battle about tabs versus spaces or alphabetical order of CSS properties versus organizing in terms of concerns (positioning styles, then element layout styles, then whatever else), because I’m honestly not attached to any one system anymore.

Personalizing Git with Aliases

Part of getting comfortable with the command line is making it your own. Small customizations, shortcuts, and time saving techniques become second nature once you spend enough time fiddling around in your terminal. Since Git is my Version Control System of choice (due partially to its incredible popularity via GitHub), I like to spend lots of time optimizing my experience there.