Collective #568

Global Design Survey 2019
Explore the data behind designer salaries, career trends, and what's next for your design discipline in these design survey results by Dribbble.
Check it out
Are you going to miss these Black Friday deals for designers and devs?
At last - these awesome tools and resources for designers are at a discounted price. Don't let them slip through your fingers. They're available for a limited time.
Grab them now!
Cockatiel
A resilience and transient-fault-handling library that allows developers to express policies such as Backoff, Retry, Circuit Breaker, Timeout, Bulkhead Isolation, and Fallback. Inspired by .NET Polly.
Check it out
Creepyface
A JavaScript library that makes your face look at the pointer.
Check it out
Scaling SVG Elements
Amelia Wattenberger explains the basic principle behind scaling SVG elements.
Check it out
Request with Intent: Caching Strategies in the Age of PWAs
Aaron Gustafson dives into modern media caching strategies and shows how to use some Cache API tricks of Service Workers.
Read it
Design APIs: The Evolution of Design Systems
Matthew Ström's exploration of how an API for design decisions works.
Read it
How To Run a Proxy Server Inside Your Browser
Danny Moerkerke explains how you can run a proxy server in your browser using just a service worker.
Read it
Quanta Magazine
A wonderful case study of one of the latest projects by Dogstudio.
Check it out
HexaBeat
HexaBeat is a sequencer using commits from GitHub to make beats.
Check it out
Complex Search-Results Pages Change Search Behavior: The Pinball Pattern
Read why users distribute their attention more variably across a search result page than in the past.
Read it
Avoiding jagged edges on gradients
In case you missed it: Mandy Michael's tip on how to achieve smooth gradients in CSS.
Check it out
CSS Containment Module Level 1 is a W3C Recommendation
The CSS WG has published the CSS Containment Module Level 1 as a W3C Recommendation. It describes the contain property, which indicates that the element's subtree is independent of the rest of the page.
Check it out
Print To CSS
Dan Davies recreates some print work using CSS Grid.
Check it out
Fit on a Floppy
A tool for determining if your webpage can fit on a 3.5 inch floppy disk.
Check it out
Pure CSS CYBRTRK
Jhey Tompkins recreated the new Tesla Cybertruck in this awesome demo.
Check it out
Creating complex layouts using CSS Grid
A practical tutorial on how to create a complex layout using CSS Grid. By Sush Kelly.
Read it
Masked areas in SVG using GIFs
Cassie Evans shows a magical method for creating masked areas in SVGs.
Check it out
Blader Runner
Ricardo Cabello's awesome Three.js Blade Runner demo. View the source code here.
Check it out
Simplifying code with Maps in JavaScript
Oleksandr Khomenko explains how to refactor a component using maps in JavaScript.
Read it
BodyPix: Real-time Person Segmentation in the Browser with TensorFlow.js
Read all about BodyPix 2.0 that now comes with a new API, multi-person support and improved accuracy.
Read it