Collective #709

Inspirational Website of the Week: Exo Ape
Exo Ape's website design is a class of its own: a super smooth scroll experience with lots of meaningful details and impeccable visuals. Our pick this week.
Get inspired
CSS Day conference, June 9–10, Amsterdam, The Netherlands
Also prefer fundamental CSS knowledge over hypes? Then join CSS Day, a deep-diving CSS conference in Amsterdam, NL. Our speakers treat CSS topics that the attendees can geek out on. On 9th & 10th of June, after a two-year silence, we'll host our 8th edition.
See our line-up
CSS Toggles Explainer & Proposal
Explainer and proposal of CSS toggles by Miriam Suzanne and Tab Atkins Jr.
Read it
HyperUI
Free Tailwind CSS components that can be used in your next project. Perfect for Laravel, Rails, React, Vue and more.
Check it out
SVG generative mountain ridge dividers
Learn about creating generative mountain ridge dividers using videogame terrain generation techniques, JavaScript and SVG. By Alistair Shepherd.
Read it
Childish Font Sizes
Tyler Sticka provides some reasons to go even larger than the 16 pixel font size for body copy.
Check it out
Flexibly Centering an Element with Side-Aligned Content
Eric Meyer shows how to solve a specific layout problem using a modern CSS technique.
Read it
Progressive Enhancement and HTML Forms: use FormData
Learn how to use FormData to apply Progressive Enhancement on HTML forms. By Bramus Van Damme.
Read it
Insanely Useful Websites
Discover super useful websites you didn't know existed.
Check it out
Web color is still broken
A visual guide and some interesting insight into why web color is broken.
Check it out
WebGL project
Michal Zalobny created a fantastic Three.js project based on a course by Luis Henrique Bizarro.
Check it out
Earth Reviews
Help improve the earth simulation with these humorous reviews.
Check it out
A Practical Guide to Centering in CSS
How do you center a div in CSS? This reference explains various methods to center elements using CSS, including techniques for Grid and Flexbox.
Read it
Slow Social
A social network built for friends, not influencers.
Check it out
FortuneSheet
A drop-in JavaScript spreadsheet library that provides rich features like Excel and Google Sheets.
Check it out
Progressively Enhanced Builds
Some thoughts on progressively enhanced builds Jim Nielsen.
Read it
One-line drawings
Zack Scholl shows how he created software to reconstruct one-line drawings.
Read it
Fleet (beta)
Fleet is the blazing fast build tool for Rust. Compiling with Fleet is up-to 5x faster than with cargo.
Check it out
Look Scanned
Look Scanned is a pure frontend site that makes your PDFs look scanned.
Check it out
UI Interactions & Animations Roundup #23 - Codrops
A fresh set of selected motion design shots for your inspiration.
Check it out