Collective #436
![C436_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_WOTW.jpg?x86293)
Inspirational Website of the Week: Sobieski
Some WebGL magic and a great design made us choose "Sobieski Vodka" this week.
Get inspired![C433_AffinityDesignerIpad](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C433_AffinityDesignerIpad.jpg?x86293)
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![C436_life](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_life.jpg?x86293)
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![C436_dropboxmobile](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_dropboxmobile.jpg?x86293)
Fostering focus for small screens
Ed Chao's insightful article on Dropbox mobile's redesign.
Read it![C436_keyframe](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_keyframe.jpg?x86293)
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![C436_donelist](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_donelist.jpg?x86293)
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![C436_terminalizer](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_terminalizer.jpg?x86293)
Terminalizer
Record your terminal and generate animated GIFs with this tool.
Check it out![C436_variablefonts](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_variablefonts.jpg?x86293)
Weird things variable fonts can do
Chris Coyier's curious collection of ming-boggling things variable fonts can do.
Check it out![C436_booking](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_booking.jpg?x86293)
Booking.com - UX Case Study
Filippo Rovelli's brilliant case study of Booking.com.
Read it![C436_dom](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_dom.jpg?x86293)
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![C436_legacy](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_legacy.jpg?x86293)
Getting to Know a Legacy Codebase
Some useful tips by Harry Roberts on how to deal with a legacy codebase.
Read it![C436_guess](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_guess.jpg?x86293)
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![C436_stack](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_stack.jpg?x86293)
Pure CSS Stack
A fantastic CSS only game inspired by Ketchapp's Stack.
Check it out![C436_classifierui](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_classifierui.jpg?x86293)
ML Classifier UI
A React front end for a machine learning engine to quickly train image classification models in the browser.
Check it out![C436_callbacks](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_callbacks.jpg?x86293)
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![C436_gridlayout](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_gridlayout.jpg?x86293)
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![C436_fontloading](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_fontloading.jpg?x86293)
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![C436_fonttorii](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_fonttorii.jpg?x86293)
Free Font: Torii
A font inspired by the Japanese torii gate designed by Andrei Assis.
Get it![C436_array](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_array.jpg?x86293)
The Holey Array Problem
Some interesting insights into problematic arrays by Abdullah Ali.
Read it![C436_rockstar](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_rockstar.jpg?x86293)
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![C436_malvid](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_malvid.jpg?x86293)
Malvid
Malvid is a UI to help you build and document web components.
Check it out![C436_radial](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_radial.jpg?x86293)
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![C436_fontbigjohn](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C436_fontbigjohn.jpg?x86293)
Free Font: Big John Pro
A great typeface by Ionyc Type.
Get it