Collective #436
Publikováno: 26.7.2018
Page Lifecycle API * Keyframes * Rockstar * Terminalizer * Malvid * Callback Exercises * DOM-wait * Pure CSS Stack * Weird things variable fonts can do
Collective #436 was written by Pedro Botelho and published on Codrops.
Inspirational Website of the Week: Sobieski
Some WebGL magic and a great design made us choose “Sobieski Vodka” this week.
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.
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.
Fostering focus for small screens
Ed Chao’s insightful article on Dropbox mobile’s redesign.
Keyframes
Keyframes is a new hangout spot for animators where you can talk about your projects, ask questions, and learn from each other.
Build a state management system with vanilla JavaScript
Andy Bell shows how to build a “done list” that updates dynamically with no framework dependencies.
Terminalizer
Record your terminal and generate animated GIFs with this tool.
Weird things variable fonts can do
Chris Coyier’s curious collection of ming-boggling things variable fonts can do.
Booking.com – UX Case Study
Filippo Rovelli’s brilliant case study of Booking.com.
DOM-wait
DOM-wait helps to manage multiple loading states on the page. It’s a vanilla JavaScript implementation of vue-wait.
Getting to Know a Legacy Codebase
Some useful tips by Harry Roberts on how to deal with a legacy codebase.
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.
Pure CSS Stack
A fantastic CSS only game inspired by Ketchapp’s Stack.
ML Classifier UI
A React front end for a machine learning engine to quickly train image classification models in the browser.
Callbacks
A great set of callback exercises with solutions, explanations, tips and tricks. Powered by the experimental learning platform Paqmind. By Ivan Kleshnin.
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.
Tips for Balancing Web Fonts & Page Load
An article by David East where he explains how to optimize page loading when using web fonts.
Free Font: Torii
A font inspired by the Japanese torii gate designed by Andrei Assis.
The Holey Array Problem
Some interesting insights into problematic arrays by Abdullah Ali.
Rockstar
A fun programming language that will finally give sense to the “rockstar developer” term recruiters love to use. By Dylan Beattie.
Malvid
Malvid is a UI to help you build and document web components.
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.
Free Font: Big John Pro
A great typeface by Ionyc Type.
Collective #436 was written by Pedro Botelho and published on Codrops.