Frontend’s Favorite 5 — January Edition
Frontend engineering, like other fields in technology, evolves at a rapid pace. This makes it fascinating to work in the field, but it can also present a challenge, as it can be hard to keep up-to-date with the latest trends, toolsets, and frameworks.
To help us with that, we always keep an eye out for interesting and reliable sources of information. In this post series we will present a few of our favorites. They include anything from our favorite news sources, books we’ve been reading, podcasts, to people we admire, and ideas that inspire us.
So without further ado, here are our team’s favorite five for January…
Nathan Curtis
Design System Specialist
Type: Person to follow
Nathan is co-founder of UX firm EightShapes and a design system specialist. His writings explain terminology, provide great examples, and have been particularly useful as we work towards creating a shared vocabulary between developers and designers. Nathan has been writing about design systems for a long time, and his extensive volume of work doesn’t seem to become dated. An example of this is his 2009 article Components Versus Patterns which details what the difference is between these often interchangeably used terms. We found it as relevant today as we believe it was when it was originally written. Inspired by another of his articles, Space in Design Systems, we have adopted his suggested spacing methodology for a couple of our most recent projects. The method improves communication between teams and eases the decision making process when choosing margins and paddings as we develop components.
Inspect by InVision
Type: App for designer–developer workflow & communication aid
InVision recently launched Inspect, a feature within the InVision app that allows developers to pick apart designs and get properties and measurements needed when coding a layout. Inspector works nicely with Sketch (digital design software) and can be linked to the InVision Labs Craft plugin, allowing for speedy artboard upload and an overall smoother workflow. Sketch symbols are amazing for design, but if developers open the document and have to click, click, click, click to get to the properties of the element they need, it slows down the work pace. We’ve used Zeplin in the past and haven’t been quite satisfied with its inability to make quick measurements between elements within nested objects (i.e. spacing in symbol elements can be measured nicely amongst elements within the symbol but not outside of it). Inspect breaks up layers, nested elements, and symbols, so the tool behaves as if all elements are on the same level. In this way, each and every element can be selected and its relationship to other components in the layout can be easily measured. Since Inspect is cloud-based, it also has the added bonus of providing a “single source of truth”. When the copy is updated, everyone in our team can see that it’s been updated and our developers can always be sure that they’re working on the most current version of the design.
Material Design
Type: Design system
Although Material Design is not new, we haven’t used it heavily in web development projects in the past at Project A, partially because it can create a cookie-cutter homogenous look that can work against allowing a product to really stand out. However, we have found Material Design particularly useful with back office systems. Once a sticker sheet from Google had been adapted to our needs, new feature pages can be assembled quickly and efficiently by any team member using existing components. When there is a question about how to use a component, it’s easy to refer to the documentation created by Google to get a concise answer. One of our designers gives a final yay or nay before sending the feature request to development and is involved when new or complex design solutions are needed; but the sticker sheet is typically enough to at the very least get a first draft of many features. In combination with the tips we have learned from Nathan Curtis regarding spacing and vocabulary, our team has been able to develop a much faster workflow using Material Design.
Intersection Observer API
Type: Experimental Technology
What the Intersection Observer does is best described by the following lines in the MDN documentation:
“The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.”
Replacing verbose window measurement with only a couple lines of code, we’ve been using the Intersection Observer to invoke a callback on objects near or within the viewport, making it a useful technique to lazy load images and assist us with animating content as users navigate through a page. It’s not fully supported in all browsers yet but there is a pollyfill to help it work in all modern browsers.
Chris Gannon
Motion & Interaction Designer
Type: Person to follow
Chris is a master of anthropomorphizing simple shapes to give them mesmerizing personalities of their own. His animations are cheeky, light-hearted, and always flawlessly executed. Lucky for us, he likes to share the “behind the scenes” of his work on his YouTube channel, where he gives tutorials and demos. The main technologies in his arsenal are SVG, the GreenSock Animation Library, and, of course, JavaScript.
Do you know of something in frontend we should read, see, get, or do? If so, we want to learn about it! Comment below or tweet at us @ProjectAcom with the hashtag #frontendfavorites.
