I hope your week is off to a fantastic start! We have some exciting links for you today, along with a handy DevTools tip and an insightful interview with Rich Harris! So grab your coffee and let’s dive right in!
No wonder this gem won the FWA of the day! A superfluid interactive web experience made by OFF+BRAND.
Chris Coyier discusses Brad’s idea for a Global Design System, contemplating its potential, challenges, and the need for strong leadership to realize its potential.
CSS may seem peculiar at times, but it is not illogical. Geoff Graham emphasizes the structured and rule-based nature of CSS, underlining its logical foundation in web development.
Anderson Mancini added a detailed explainer in this repo that shows how to use the new glow material for React Three Fiber that creates glow effects on 3D meshes without post-processing, utilizing GLSL Shaders directly.
Andy Bell writes about his recent creation of a boilerplate called CUBE CSS and its directory structure, which includes various CSS utilities and design tokens, alongside Tailwind integration, aiming to streamline CSS development in projects.
Learn all about the features and changes in the upcoming release of jQuery 4.0.0 beta, including dropping support for older browsers, removing deprecated APIs, and migrating the source to ES modules.
Raymond Camden discusses his debut presentation on generative AI at TheJam.dev, inspired by author John Birmingham and his own use of GenAI for writing, exploring how GenAI suggests blog post titles and provides one-sentence summaries for blog descriptions, demonstrating examples with code snippets.
???? Help keep our publication alive with a tiny contribution! Your support assists us in covering monthly costs and ensures that we can continue providing valuable content. ????
???? Behind the Pixel
Today, I’d like to share a helpful tip for investigating effects you find on a website. I came across a cool tooltip hover animation on Neutral Studio’s website, and I wanted to figure out how it’s done.
It’s not as simple as just opening the element inspector. You see, this tooltip appears and disappears dynamically, making it tricky to inspect.
In case you are not a seasoned debugger, here’s a neat trick to analyze and debug JavaScript. First, let’s find the element we’re interested in. It’s a small div with the ID “portal” located at the end of the document. When you hover over the project, the tooltip pops up, and the code for it is added into this “portal” div.
To get a closer look at what’s happening, right-click the div and choose “Break on > Subtree Modifications.” Now, hover over the project again. The debugger will pause, allowing you to step through the JavaScript code. This way, you can see how the element is added inside the portal and explore its styles.
Give it a try and step through this! It’s a fantastic way to understand how things function behind the scenes on websites.
Video Vault
Demo Corner
A very creative slider sketch by Ikeryou. Check the code here.
A dreamy mountain like landscape demo by Nemutas. Find the code here.
❓Did you know that…
…”under construction” GIFs were common on websites in the 1990s and early 2000s? They signaled that the site was still being developed or updated, serving as placeholders for incomplete sections. While they may seem old-fashioned now, they were a key part of the early web’s dynamic nature. ????
And that’s all! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.
