Collective #743
Publikováno: 15.12.2022
NodeToy * DOM Clobbering * Optimize Interaction to Next Paint * Puter * Drowning in AI Generated Garbage
Inspirational Website of the Week: Water by Falmec
Subtle details and a wonderful scroll experience makes this website stand out. Our pick this week.
NodeToy (Beta)
Create, fork and publish shader graphs with the world using an intuitive and easy to use tool built for all.
Optimize Interaction to Next Paint
Jeremy Wagner and Philip Walton learn how to optimize for the Interaction to Next Paint metric.
Our Sponsor
Get access to marketing and sales resources here
Whether you’re looking to land the next promotion or solve a sales or marketing challenge at work, The Juice can help. The ultimate industry insider hack, The Juice aggregates career-enhancing resources from top brands and thought leaders and organizes them in one place, so you don’t have to keep filling out marketing forms for access (or dodging sales calls yourself). Start thinking like top B2B marketers and sales professionals with The Juice.
Inside the mind of a frontend developer: Article layout
An exploration of how a frontend developer thinks while building an article layout. By Ahmad Shadeed.
DOM Clobbering
In this HTMHell Advent Calendar article, Frederik Braun explains what DOM Clobbering is and how it can make a website vulnerable.
From Web Page to Web Player: How Spotify Designed a New Homepage Experience
Alexandria Goree walks us through the design process of making over Spotify’s homepage.
Wikipedia Analysis Tool
A tool to navigate edits to the English Wikipedia made by IPs belonging to known organizations.
Mobile Performance of Next.js Sites
Clark Gunn shares his experience on performance remediation for a large e-commerce site built with Next.
Drowning in AI Generated Garbage: the silent war we are fighting
A very interesting read on how we’ll soon end up with inbred AI garbage and algorithmic trash.
Humanizer
Humanizer is a minimal static site generator made with PHP.
Upscalo
Read how Morten Just made an app that makes a small image large and removes its background.
Contrast is boring—can’t someone else do it?
Learn how color-contrast() is soon here to save us from the boring task of ensuring sufficient contrast on a website.
Introducing Mona Sans and Hubot Sans
Learn how to use and express yourself with GitHub’s open source variable fonts, Mona Sans and Hubot Sans.
Puter
Puter is a cloud operating system. Store, open, and edit your files from anywhere at any time in the cloud.
A :nth-child(An+B [of S]?) polyfill thanks to CSS :has()
Bramus Van Damme writes about an interesting polyfill made possible with :has().
VRTs – Visual Regression Tests
Visual Regression Tests is a WordPress Plugin to test your website for visual changes and notifies you upon alerts automatically.
Rapier – Raycast Vehicle
Isaac Mason is porting the cannon.js RaycastVehicle to Rapier. Check out his progress in this demo.
Blockbench
An easy to use 3D model editor for low-poly and pixel-art.
Snowball Preloader
A beautiful CSS-only snowball preloader made by Jon Kantner.
Building A Virtual Machine inside ChatGPT
Read how it’s possible to run a whole virtual machine inside of ChatGPT.
Coding techniques
A thread by Yuri Artiukh on some great coding techniques that can be learned from “Kerrygold, the Magical Pantry” made by makemepulse.
From Our Blog
How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAP
A tutorial on how to create a 3D cardboard box that folds and unfolds on scroll using Three.js and the GSAP ScrollTrigger.
From Our Blog
Inspirational Websites Roundup #44
A new roundup of the most inspiring and creative website from the past couple of weeks.
Our Sponsor
Explore the world like a local with Babbel
If you’ve always wanted to learn a new language, Babbel will be the most productive 10 minutes of your day. Trusted by over 10 million subscribers worldwide, the subscription-based language learning platform can get you confidently conversing in a new tongue in just three weeks. Sign up today and get up to 60 percent off your subscription.