Implementing “Save For Offline” with Service Workers

Una Kravets implemented “Save For Offline” on her blog, using Service Workers. She described the reasoning, process, and code to implement. With “Save For Offline”, if someone is reading your blog on the subway, and loses their Internet connection, they won’t lose their place. If they accidentally click and the browser refreshes, they won’t lose …

Color in UI Design: A (Practical) Framework

Erik D. Kennedy goes into detail on how to pick color variations for your designs: Element states for example are variations on a single color, let’s take “blue”. The result isn’t best described as “a palette of 3 blues”. It’s one blue with variations. But this begs the question: how do you actually modify a …

Why You Should Be Excited About Native CSS Variables

With CSS Variables now being under development for Edge (the last of the modern browsers to not support it yet) it’s time to dig up this brilliant post on CSS Variables. If you’re under the impression that CSS Variables offer nothing new when compared to Preprocessor variables, then this post is a must-read for you: …

FedEx artworks by Walead Beshty

Artist Walead Beshty has been shipping boxes built out of laminated glass panels. The boxes are built to the exact size of standardised FedEx boxes, so that they perfectly fit inside ‘m. The glass works are shipped unprotected, so that cracks appear with each successive shipment. The FedEx waybills, customs documentation, and any shipping stickers …

Sketching for virtual reality in 360°

Virtual reality is a brand new frontier, but there are already tools that cover almost all the steps of creating a new experience (thank you, game industry). Sketching however, still remains a method that works … if you do it right: I used to do a lot sketches of only part of the view, or …

Animating vectors in Android with AnimatedVectorDrawable

Seeing Lottie in action, I was reminded of Android’s AnimatedVectorDrawable which also allows one to do vector based animations. This class animates properties of a VectorDrawable with animations defined using ObjectAnimator or AnimatorSet. If you’re familiar with SVG, the AnimatedVectorDrawable XML contents will look familiar. The “Endless Pin Jump” animation (pictured above) for example is …

Easily add high-quality animation to any native app with Lottie

By the folks at AirBnB: Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Lottie uses a JSON file – generated by the BodyMovin plugin for After Effects as its source, and then renders it …

Crafting Data-Driven Maps

At Uber, we use maps for everything — visualizing millions of geo data points, monitoring road conditions, and advocating for policy change in cities around the world. Over the last few years we have experienced immense growth. As a result, we have many teams across the organization producing map visualizations for a wide range of needs. We …

Boston Dynamics’ Handle

Again great stuff by the Boston Dynamics team. It looks like their Atlas robot with wheels underneath it. (fragment starts at 3:45) It’s satisfying to see how smooth this thing goes and jumps, all whilst remaining in perfect balance. It’s also pretty scary to know that this thing can outrun me any time … I, …

Stylus nth-of-m-child(n,m) Selector

. As explained/linked in (ab)using CSS3’s :nth-child() selector to invent new ones and Quantity Queries for CSS it’s possible to create new types of CSS selectors by cleverly combining a few the available CSS pseudo selectors. One of those new selectors is the :nth-of-m-child selector: /** * :nth-of-m-child selector * This selector will select the …