Collective #654
Publikováno: 25.3.2021
The Component Gallery * Building a Settings component * The End of AMP * Baserow * Sorted CSS Colors
The post Collective #654 appeared first on Codrops.
Inspirational Website of the Week: Pam
Clarity and beauty combined with wonderful colors. Our pick this week.
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.
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.
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.
How to Improve CSS Performance
Learn the most common speed issues caused by CSS and how to avoid them. By Milica Mihajlija.
Building a Settings component
A foundational overview of how to build a settings component of sliders and checkboxes. By
Adam Argyle.
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.
Garet Font
A beautiful presentation for the Garet font family. A modern geometric sans serif font with two free weights.
SVG Explained in 100 Seconds
A super-cool video explaining SVG and how it differs from other image formats.
Cryptocurrency 3D Illustrations
A free cryptocurrency royalty-free 3D illustration pack from Iconscout.
The End of AMP
Dwayne Lafleur shares some interesting news and insights about the failure of Accelerated Mobile Pages (AMP).
Animating Underlines
Michelle Barker shares some fantastic tips about underline styles and animations.
Handling Text Over Images in CSS
Learn how to handle text over images in CSS by taking accessibility in mind. By Ahmad Shadeed.
Image Fragmentation Effect With CSS Masks and Custom Properties
Temani Afif explains how to code a creative image fragmentation effect with CSS magic.
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.
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.
Baserow
A Self hosted open source online database built with Django and Nuxt for creating your own database without technical experience.
Clone Wars
100+ open-source clones of popular sites. The list contains source code, demo links, tech stack, and Github stars count.
Building Dark Mode
Robin Rendle gives great insight into how Dark Mode was pulled off at Sentry.
Taming Blend Modes: `difference` and `exclusion`
Ana Tudor takes a close look at the ‘difference’ and ‘exclusion’ blend modes and shows some use cases.
Sorted CSS Colors
A fantastic tool that sorts CSS colors by their hue, saturation and lightness. By Mustafa Enes.
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.
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.
Transition.css
In case you didn’t know about it yet: Drop-in CSS transitions with clip-path.
Scrollycoding (Preview)
Watch this new way to write code walkthroughs for blogs or docs. By Rodrigo Pombo.
security.txt
A proposed standard which allows websites to define security policies.
Photo Tear
A really awesome photo gallery by Steve Gardner.
Progress Nav with IntersectionObserver
Bramus shares Anders Grimsrud’s solution of a progress nav with IntersectionObserver based on Hakim El Hattab’s previous creation.
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.
Distributed Letters Animation Layout
A distributed letters animation in the context of a triple panel layout with hover effect.
The post Collective #654 appeared first on Codrops.