Collective #722
Inspirational Website of the Week: Camille Mormal
A super-sharp design with slick animations and lovely details. Our pick this week.
Read it
Our Sponsor
Fully Managed Cloud & Web Hosting
Codrops’ host of choice since 2016 is Liquid Web because they provide an unrivaled hosting experience, delivering 99.999% uptime and 24/7 heroic human support.
Check it out
DOM ready events considered harmful
Jake and Cassie talk about DOM ready events, which can slow down your app in unexpected ways. But what are the alternatives? Learn more about it in this episode of HTTP 203.
Watch it
The Study of Shaders with React Three Fiber
A complete guide on how to use shaders with React Three Fiber, work with uniforms and varyings, and build dynamic, interactive and composable materials with them through 8 unique 3D scenes. By Maxime Heckel.
Read it
WebGi Camera Landing Page
A template for buildind scrollable landing pages with GSAP, ScrollTrigger and WebGi engine in TypeScript using the Parcel bundler. By Anderson Mancini.
Check it out
Tech ethics: If cookie consent prompts were honest…
This case study shows how a cookie consent prompt went over the ethical line.
Check it out
I Regret My $46k Website Redesign
Some interesting insights on the msitakes made during a redesign project by
Check it out
PrimeReact
A large collection of design-agnostic, flexible and accessible React UI Components.
Check it out
Font Subsetting Strategies: Content-Based vs Alphabetical – Cloud Four
Paul Hebert explains the two main subsetting strategies that have different advantages depending on the type of site you’re building.
Read it
Solving “The Dangler” Conundrum with Container Queries and :has()
Dave Rupert explains how to solve the “Dangler” problem using :has() and Container Queries.
Read it
Help pick a syntax for CSS nesting
Two competing syntaxes need your help in determining which should be championed through to a specification candidate. By Adam Argyle and Miriam Suzanne.
Read it
Hello: Search Engine for Developers (Beta)
A new search engine made for developers.
Check it out
GMTK Game Jam 2022: Dice Out
Nikita Prokopov writes about how he made a game for the GMTK Game Jam 2022.
Check it out
Can SVG Symbols affect web performance?
When it comes to repeatable SVGs, most people would create a component and reuse it anywhere they want. There’s a high chance, that you would be missing some performance freebies. If you’re striving for that bang-for-the-buck kind of performance, this article might be interesting for you.
Check it out
UpToDate what?
UpToDate tracks versions of popular projects so that you can check easily what the latest stable release is.
Check it out
Coding an extension that blocks Social Media Websites with HTML, CSS and JS
In this article, Helitha Rupasinghe shows you how you can create a Google Chrome extension that will block social media sites for better productivity.
Read it
Cascading CSS Text Effects
Cool animations for texts on scroll made by Jhey.
Check it out
Pure CSS Cartoon or Not?
Amazing CSS art made by Julia Miocene.
Check it out
A good reset
A response to Jeremy’s post on “Control”, and why developers opt for divs, not buttons. By Trys Mudford.
Read it
A guide to search inputs
Sarah Edwards outlines some key principles to help you create a fit-for-purpose search input.
Read it
UI Buttons
Collection of hand-picked free HTML and CSS button code examples. Updated as of July 2022. 100 new items.
Check it out
Maintenance Matters
Annie Kiley shares a list of ten simple things the team at Viget does to make their projects as maintainable as possible, regardless of the stack.
Read it
Your Code Doesn’t Have to Be a Mess
Daniel Sieger outlines a few high-level strategies to keep software simple.
Read it
TypeScript Tutorial: A Guide to Using the Programming Language
Learn how to build a simple TypeScript Hello World app in this tutorial by Jack Wallen.
Check it out