Collective #436
Inspirational Website of the Week: Sobieski
Some WebGL magic and a great design made us choose "Sobieski Vodka" this week.
Get inspired
Draw inspiration anywhere with Affinity Designer for iPad
Take the full power of professional vector graphic design at your fingertips, wherever you go. Buy now for $13.99/£13.99/14,99€ with no subscription.
Get 30% launch discount
Page Lifecycle API
In this article Philip Walton explains what the Page Lifecycle API, shipping in Chrome 68, is all about. Also, check out the PageLifecycle.js JavaScript library.
Read it
Fostering focus for small screens
Ed Chao's insightful article on Dropbox mobile's redesign.
Read it
Keyframes
Keyframes is a new hangout spot for animators where you can talk about your projects, ask questions, and learn from each other.
Check it out
Build a state management system with vanilla JavaScript
Andy Bell shows how to build a "done list" that updates dynamically with no framework dependencies.
Read it
Terminalizer
Record your terminal and generate animated GIFs with this tool.
Check it out
Weird things variable fonts can do
Chris Coyier's curious collection of ming-boggling things variable fonts can do.
Check it out
Booking.com - UX Case Study
Filippo Rovelli's brilliant case study of Booking.com.
Read it
DOM-wait
DOM-wait helps to manage multiple loading states on the page. It's a vanilla JavaScript implementation of vue-wait.
Check it out
Getting to Know a Legacy Codebase
Some useful tips by Harry Roberts on how to deal with a legacy codebase.
Read it
Guess.js
The library for Machine Learning driven user-experiences on the web has gotten an update. Read more about it in this tweet by Minko Gechev.
Check it out
Pure CSS Stack
A fantastic CSS only game inspired by Ketchapp's Stack.
Check it out
ML Classifier UI
A React front end for a machine learning engine to quickly train image classification models in the browser.
Check it out
Callbacks
A great set of callback exercises with solutions, explanations, tips and tricks. Powered by the experimental learning platform Paqmind. By Ivan Kleshnin.
Check it out
Create your design system, part 2: Grid & Layout
Learn how you can implement a grid system and how you can use some CSS techniques to create specific layouts. By Claudia Romano.
Read it
Tips for Balancing Web Fonts & Page Load
An article by David East where he explains how to optimize page loading when using web fonts.
Read it
Free Font: Torii
A font inspired by the Japanese torii gate designed by Andrei Assis.
Get it
The Holey Array Problem
Some interesting insights into problematic arrays by Abdullah Ali.
Read it
Rockstar
A fun programming language that will finally give sense to the "rockstar developer" term recruiters love to use. By Dylan Beattie.
Check it out
Malvid
Malvid is a UI to help you build and document web components.
Check it out
Creating Animated Radial Progress Bars with SVG, CSS and VueJS
A tutorial by Nathan Cockerill where you'll learn how to design, code and animate radial progress elements.
Read it
Free Font: Big John Pro
A great typeface by Ionyc Type.
Get it