Author
Garann Means
Garann has been making websites since the 90s and, after spending time as a full-stack developer, has the privilege of spending her days mostly writing JavaScript. She has written one book on Node.js, organizes local meetups, speaks at conferences, and generally tries to stay involved with her dev community. You can also find her on Twitter.
Also from this author
One decade ago this week, A List Apart released Issue 170. The two articles published that week both discussed combining CSS, JavaScript, and markup to build user interface features we wouldn’t think twice about placing on a site today.
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.
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.
