Collective #664
Inspirational Website of the Week: K72 Agency
A super sharp design with great typography and vibrant details. Our pick this week.
Get inspired
CSS for Web Vitals
Learn about CSS-related techniques for optimizing Web Vitals in this article by Katie Hempenius and Una Kravets.
Read it
CSS Layout Generator
A great CSS Grid & Flexbox generator for creating layout components.
Check it out
Beginner JavaScript Notes
A massive resource and guide to JavaScript.
Check it out
The perfect link
There’s more to a link than just a clickable word or image. So, how do you create the perfect link? Rian Rietveld takes you on an informative journey.
Read it
Create a Liquid Hover Effect with GSAP & SVG
Learn how to add a vector-based, fluid hover effect to any simple SVG path. By George Francis.
Check it out
Spark Freebie
A great freebie by BONT that contains 3 hero designs with different art directions. Made for Figma.
Check it out
How To Fix Cumulative Layout Shift (CLS) Issues
Barry Pollard looks at ways to tackle issues regarding the Cumulative Layout Shift metric.
Read it
The Art of Design Spec'ing
Learn about design specs, how to create them, and how they smooth out the hand-off process between design and engineering. By Mahdi Farra.
Read it
Boring Avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.
Check it out
vanilla-extract
Zero-runtime stylesheets-in-TypeScript: Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.
Check it out
Readsom
Readsom hosts newsletters that are handpicked and filtered through topics to help you find your niche of interest. Explore and discover your next favorite newsletter.
Check it out
Front-End Testing is For Everyone
Evgeny Klimenchenko covers the most popular and widely used types of front-end tests and explains why testing is for everyone.
Read it
yare.io
A real-time strategy game where you control your units by writing JavaScript code.
Check it out
Responsive design and container queries? Oh my!
Ethan Marcotte shares his excitement about container queries.
Read it
Khroma
Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.
Check it out
CSS morphing
Supercool CSS only text morphing by Amit Sheen. If you like this effect, you might also find this demo interesting.
Check it out
50 Tips to Improve User Interface
A great collection of useful UI design tips by Victor Ponamariov.
Check it out
DOOM Captcha
Finally a Captcha that respects your privacy and that is everything but boring!
Check it out
How to create fancy jumping text input labels
Mikael Ainalem explains how to create a slick input with an animating placeholder.
Read it
Follow the Grain
Jay Freestone argues that we should spend less time trying to fix things, and more time trying to understand them.
Read it
macOCR
macOCR is a command line app that enables you to turn any text on your screen into text on your clipboard.
Check it out
FBO Particles with Three.js
Learn how to code the particle cloud seen on the website of Visualdata using Three.js.
Check it out
Trigonometry in CSS and JavaScript: Introduction to Trigonometry
In this series of articles we’ll get an overview of trigonometry, understand how it can be useful, and delve into some creative applications in CSS and JavaScript.
Check it out
Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions
In the second part of this series on trigonometry, we’ll explore JavaScript trigonometric functions and learn how we can apply them to our CSS code.
Check it out