Collective #654


Collective 654 item image

Inspirational Website of the Week: Pam

Clarity and beauty combined with wonderful colors. Our pick this week.

Get inspired


Collective 654 item image

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


Our Sponsor

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


Collective 654 item image

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


Collective 654 item image

How to Improve CSS Performance

Learn the most common speed issues caused by CSS and how to avoid them. By Milica Mihajlija.

Read it


Collective 654 item image

Building a Settings component

A foundational overview of how to build a settings component of sliders and checkboxes. By
Adam Argyle.

Read it


Collective 654 item image

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


Collective 654 item image

Garet Font

A beautiful presentation for the Garet font family. A modern geometric sans serif font with two free weights.

Check it out


Collective 654 item image

SVG Explained in 100 Seconds

A super-cool video explaining SVG and how it differs from other image formats.

Watch it


Collective 654 item image

Cryptocurrency 3D Illustrations

A free cryptocurrency royalty-free 3D illustration pack from Iconscout.

Check it out


Collective 654 item image

The End of AMP

Dwayne Lafleur shares some interesting news and insights about the failure of Accelerated Mobile Pages (AMP).

Read it


Collective 654 item image

Animating Underlines

Michelle Barker shares some fantastic tips about underline styles and animations.

Read it


Collective 654 item image

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


Collective 654 item image

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


Collective 654 item image

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


Collective 654 item image

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


Collective 654 item image

Baserow

A Self hosted open source online database built with Django and Nuxt for creating your own database without technical experience.

Check it out


Collective 654 item image

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


Collective 654 item image

Building Dark Mode

Robin Rendle gives great insight into how Dark Mode was pulled off at Sentry.

Read it


Collective 654 item image

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


Collective 654 item image

Sorted CSS Colors

A fantastic tool that sorts CSS colors by their hue, saturation and lightness. By Mustafa Enes.

Check it out


Collective 654 item image

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


Collective 654 item image

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


Collective 654 item image

Transition.css

In case you didn’t know about it yet: Drop-in CSS transitions with clip-path.

Check it out


Collective 654 item image

Scrollycoding (Preview)

Watch this new way to write code walkthroughs for blogs or docs. By Rodrigo Pombo.

Watch it


Collective 654 item image

security.txt

A proposed standard which allows websites to define security policies.

Check it out


Collective 654 item image

Photo Tear

A really awesome photo gallery by Steve Gardner.

Check it out


Collective 654 item image

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


Collective 654 item image

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


Collective 654 item image

From Our Blog

Distributed Letters Animation Layout

A distributed letters animation in the context of a triple panel layout with hover effect.

Check it out