Collective #654

Original Source: http://feedproxy.google.com/~r/tympanus/~3/ujRA7ZrOBI4/

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

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

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

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

The post Collective #654 appeared first on Codrops.