Codrops collective
useful articles from codrops collective - things that have caught my eye, and / or want to get back around to reading later
Collection by Evan (he/him)
gitlet.maryrosecook.com
gitlet.js
· Shared by 33, including Evan (he/him), Joe Groff ⎷⃣, Arin Basu, wil shipley, Waqas Ahmed, Ser Jeff Garzik, Jason Norwood-Young
kittygiraudel.com
An accessible toggle
7 min · · I’m Kitty Giraudel, a non-binary web developer based in Berlin, focused on accessibility and inclusivity. · Shared by 57, including Chris Heilmann codepo8@toot.cafe, Evan (he/him), Stef Walter, David Hellmann, Web Axe, Davy De Pauw
Smashing Magazine 🇺🇦 🏳️🌈
Vanilla JavaScript Code Snippets — Smashing Magazine
8 min · · A guide to vanilla JavaScript code snippets — with resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies. · Shared by 88, including David Garner, Marius Bleuer, Benoist Lawniczak, David Hellmann, Chris Heilmann codepo8@toot.cafe, Evan (he/him), Davy De Pauw
css-irl.info
Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties
1 min · · In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. Something like this, for instance, won’t work, and will return null: document.querySelector('.my… · Shared by 6, including Evan (he/him)
piccalil.li
Container Queries are actually coming
4 min · · After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did. · Shared by 40, including Stef Walter, David Hellmann, Brad Frost, Bruce Lawson, Claus Heller 🇺🇦, Evan (he/him), Benoist Lawniczak
Smashing Magazine 🇺🇦 🏳️🌈
SVG Generators — Smashing Magazine
15+ min · · A complete guide to SVG generators — for everything from SVG shapes and cropping tools to SVG filters, color matrix mixers and SVG to JSX generators. · Shared by 145, including Abel Caballero Díaz, Evan (he/him), Axel Rauschmayer (INACTIVE), Essaadi, Ⓓarío Macchi, Marius Bleuer, Ceferino Díaz
A List Apart
Now THAT’S What I Call Service Worker!
15+ min · · If you’re looking to achieve the single-page app level performance without the overhead (and boot time) of a huge JavaScript library or having to completely rewrite your website in a new technology… · Shared by 72, including Evan (he/him), Dion Almaer, Richard MacManus, Matthias Lampe, zeldman, Marius Bleuer, Yoav Ganbar (🥑 Builder.io/Qwik)
gourav.io
Clone Wars - Open source clones of popular sites
· 70+ open-source clones of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, Spotify, Trello, Whatsapp, Youtube etc. List contains source code, demo links, tech stack, and, Github stars… · Shared by 19, including Evan (he/him), Thomas Spreng, Jacob du Toit
voorhoede.nl
Why skip-links are important for accessibility
3 min · · Skip-links play an important role in making a website accessible for everybody. Here I point out why and how you can implement them consistently. · Shared by 23, including Evan (he/him), CSS Weekly
Chrome Developers
Building a Settings component
19+ min · · A foundational overview of how to build a settings component of sliders and checkboxes. · Shared by 9, including Benoist Lawniczak, Evan (he/him)
component.gallery
Home
· The Component Gallery is a collection of components from the best Design Systems. · Shared by 102, including Adham Dannaway, Stef Walter, Nick Babich, zeldman, Neil Lee, Paul, Marius Bleuer, Sara Soueidan, Vikram Dutt, Yoav Ganbar (🥑 Builder.io/Qwik), Tomas Vestenicky, David Hellmann, Matthias Sala, Evan (he/him), Chris Heilmann codepo8@toot.cafe, Rodrigo Noales, Jessel Sookha, Bryan Onel
bram.us
The Future of CSS: Scroll-Linked Animations (Part 1)
10 min · · The “Scroll-linked Animations Specification” is an upcoming addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container. Let's take a look at… · Shared by 25, including David Hellmann, Chris Coyier, Evan (he/him), Jake Archibald
flowchart.fun
flowchart.fun
· An open-source tool for generating flowcharts from text · Shared by 23, including Dayyan Smith, Thomas Spreng, Evan (he/him), David Garner
freebiesbug.com
Stratum: UI kit for Figma
· Stratum is a free UI sample kit for Figma designed by Denis Danilov, providing 9 ready-made web screens. · Shared by 4, including Evan (he/him)
ishadeed.com
Digging Into CSS Logical Properties
6 min · · How to use CSS logical properties to build multi-directional web layouts · Shared by 11, including Claus Heller 🇺🇦, Davy De Pauw, Evan (he/him)
SitePoint
Beyond Console.log()
20+ min · · console.log() is a great tool, but your browser's developer tools can do so much more. Learn how to take your coding and debugging to the next level. · Shared by 27, including Evan (he/him), Davy De Pauw, Yoav Ganbar (🥑 Builder.io/Qwik), Chris Heilmann codepo8@toot.cafe, CSS Weekly