Collective #654
Inspirational Website of the Week: Pam
Clarity and beauty combined with wonderful colors. Our pick this week.
Get inspired
The Component Gallery
Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.
Check it out
10% Discount: One License. Complete Access. Unlimited Websites. Unlimited Users.
Join 767,154 customers and get access to Divi, Extra, Bloom, Monarch and more. Power your entire team and build unlimited websites. The ultimate WordPress toolkit awaits.
Check it out
Accessible Text Labels For All
Sara Soueidan writes on improving eCommerce experiences for screen reader users without breaking them for speech-input users. Also, watch her great talk Applied Accessibility.
Check it out
How to Improve CSS Performance
Learn the most common speed issues caused by CSS and how to avoid them. By Milica Mihajlija.
Read it
Building a Settings component
A foundational overview of how to build a settings component of sliders and checkboxes. By Adam Argyle.
Read it
A Complete Guide To Accessible Front-End Components
In this part of the Smashing Magazine series on useful tools and techniques for designers and devs, Vitaly Friedman looks into reliable accessible components: from tabs and tables to toggles and tooltips.
Read it
Garet Font
A beautiful presentation for the Garet font family. A modern geometric sans serif font with two free weights.
Check it out
SVG Explained in 100 Seconds
A super-cool video explaining SVG and how it differs from other image formats.
Watch it
Cryptocurrency 3D Illustrations
A free cryptocurrency royalty-free 3D illustration pack from Iconscout.
Check it out
The End of AMP
Dwayne Lafleur shares some interesting news and insights about the failure of Accelerated Mobile Pages (AMP).
Read it
Animating Underlines
Michelle Barker shares some fantastic tips about underline styles and animations.
Read it
Handling Text Over Images in CSS
Learn how to handle text over images in CSS by taking accessibility in mind. By Ahmad Shadeed.
Read it
Image Fragmentation Effect With CSS Masks and Custom Properties
Temani Afif explains how to code a creative image fragmentation effect with CSS magic.
Check it out
Why skip-links are important for accessibility
Learn why skip-links play an important role in making a website accessible for everybody and how you can implement them consistently.
Read it
Good, Better, Best: Untangling The Complex World Of Accessible Patterns
Carie Fisher helps with the question on how we know which patterns are good, better, best when it comes to accessibility.
Read it
Baserow
A Self hosted open source online database built with Django and Nuxt for creating your own database without technical experience.
Check it out
Clone Wars
100+ open-source clones of popular sites. The list contains source code, demo links, tech stack, and Github stars count.
Check it out
Building Dark Mode
Robin Rendle gives great insight into how Dark Mode was pulled off at Sentry.
Read it
Taming Blend Modes: `difference` and `exclusion`
Ana Tudor takes a close look at the 'difference' and 'exclusion' blend modes and shows some use cases.
Read it
Sorted CSS Colors
A fantastic tool that sorts CSS colors by their hue, saturation and lightness. By Mustafa Enes.
Check it out
Now THAT’S What I Call Service Worker!
A great article about the power of the Service Worker API and how to get the best out of it practically. By Jeremy Wagner.
Read it
Making the slowest 'fast' page
Can you make a webpage which gets 100 score in Lighthouse and passes all the Core Web Vitals and still feels slow? Barry Pollard gives it a try.
Read it
Transition.css
In case you didn't know about it yet: Drop-in CSS transitions with clip-path.
Check it out
Scrollycoding (Preview)
Watch this new way to write code walkthroughs for blogs or docs. By Rodrigo Pombo.
Watch it
security.txt
A proposed standard which allows websites to define security policies.
Check it out
Photo Tear
A really awesome photo gallery by Steve Gardner.
Check it out
Progress Nav with IntersectionObserver
Bramus shares Anders Grimsrud's solution of a progress nav with IntersectionObserver based on Hakim El Hattab's previous creation.
Check it out
Focalboard
An open source alternative to Trello, Asana, and Notion. It helps define, organize, track and manage work across individuals and teams. Currently in early-access beta.
Check it out
Distributed Letters Animation Layout
A distributed letters animation in the context of a triple panel layout with hover effect.
Check it out