Collective #485

UX in the Age of Personalization
Colin Eagan's article on personalization strategies that can be employed for creating better user experiences.
Read it
Swift and straightforward bug fixes for your JavaScript apps
Automatically detect JS errors impacting your users. Get comprehensive diagnostic reports, know instantly which errors are worth fixing, & debug in minutes.
Try it free
Animating CSS Grid
Michelle Barker shares her CSS Grid animation experiment (Firefox Nightly only).
Check it out
Building a Progressively-Enhanced Site
Jim Nielsen shares how he implemented an accessible search.
Read it
Lucid
A Chrome Developer Tool designed to help engineers debug React-GraphQL applications.
Check it out
Web Performance Mini Series: Responses
The first video in a mini series on web performance by Paul Lewis.
Watch it
How to Stop Using Browser Dev Tools and Start Using Your Editor's Debugger
A great article on utilizing the debugger of your code editor.
Read it
Animating URLs with Javascript and Emojis
Matthew Rayfield explores the fun possibilities of animating Emojis in an URL.
Read it
How Improving Website Performance Can Help Save The Planet
Jack Lenox writes about how our work as web developers has an impact on our carbon footprint.
Read it
Microsoft by the Numbers
An interactive infographic-like site by Microsoft with nice animations.
Check it out
Beyond the interface
Thomas Byttebier shares his thoughts on the intriguing question of why all apps and websites look the same nowadays.
Read it
TypeScript ESLint
Monorepo for all the tooling which enables ESLint to support TypeScript.
Check it out
Double exposure depth experiment
A web experiment combining modern CSS properties and JavaScript with photography. By Cody Lindsay Gordon.
Check it out
font-variant-numeric: tabular-nums
A super-useful discovery by Tyler van der Hoeven.
Check it out
Handling Time Zone in JavaScript
An article that discusses the JavaScript time zone APIs and their issues.
Read it
Typewrite Something
An interesting minimalistic typewriter simulator.
Check it out
Browser Rendering Optimizations for Frontend Development
Some useful tips for enhancing performance by Jordan Irabor.
Read it
2019 Slack logo with 2019 code
Ana Tudor's take on the new Slack logo. With magical CSS.
Check it out
Free Font: Chappa
A unique looking display font designed by Lucas Mercado. Licensed under a Creative Commons license.
Get it
The YouTube Redesign That Got Me Hired
Pramiti R Khan shares an interesting case study on a YouTube redesign that landed him a job.
Read it
Snippet generator
In case you didn't stumble upon it yet: Snippet generator is a tiny React app to help you create Visual Studio Code, Sublime Text and Atom snippets.
Check it out
Interactive Particles with Three.js
A tutorial on how to draw a large number of particles with Three.js and make them interactive.
Check it out