Collective #771
Inspirational Website of the Week: plantica
We love the simplicity and elegance of this design. It's enhanced with smooth animations and an interesting menu hover effect. Our pick this week.
Get inspired
Our sponsor
Breakpoints and `console.log` is the past, time travel is the future
15x faster JavaScript debugging than with breakpoints and console.log. Wallaby.js runs your tests immediately as you type, with runtime values, errors, and code coverage displayed in real-time right next to your code. Designed specifically for testing, Wallaby features include a Time Travel Debugger, the ability to only run opened test files, and more.
Try it now
Introducing the MDN Playground: Bring your code to life!
This article introduces the MDN Playground, a new tool by Mozilla that allows web developers to preview and interact with HTML, CSS, and JavaScript code, enabling instant prototyping, live interaction, expanded code examples, and collaboration.
Check it out
Future CSS: State Container Queries
Ahmad Shadeed writes about the introduction of state queries in CSS, specifically focusing on the ability to query elements based on their sticky state, wrap state, empty state, and document direction.
Read it
How to consume a paginated API using JavaScript async generators
James Sinclair explores the use of asynchronous generators to simplify and clarify code that involves asynchronous calls and handling promises.
Read it
Position-Driven Styles
After solving the fit-to-width text, stuck state for sticky elements, and scroll shadows, Roman Komarov finds lot more challenges to solve with scroll-driven animations.
Read it
Aniso - ASCII Tool
An open-source ASCII tool built by Studio Freight to generate and customize character-based imagery.
Check it out
VAT and Houdini Experiment
An amazing demo by Giom who is experimenting with a Three.js technique using Vertex Animation Texture and Houdini.
Check it out
Coastal World
Merci-Michel created this fantastic Jet Ski game with Three.js for X1.
Check it out
Style your RSS feed
Learn how to make your RSS feed look nice using XSL and provide useful information at the same time in this article by Darek Kay.
Check it out
Good UI design isn't all magic, but a design system sure is
Lucca Rodrigues discusses the principles of simplifying UI design and the importance of building a design system, providing tips and insights on how to approach web design methodically and improve user interfaces.
Read it
Synchronize videos, 3D-models, etc. to Scroll-Driven Animations
Bramus Van Damme explains how to achieve scroll-driven animations, including syncing videos and rotating 3D models, with the help of JavaScript.
Check it out
DevPod: Open Source Dev-Environments-As-Code
DevPod is like Codespaces but open-source. It's client-only, unopinionated and works with any IDE and lets you use any cloud, kubernetes or just on localhost docker.
Check it out
The Password Game
A hilarious password game where you have to follow the rules for the perfect password. Made by Neal Agarwal.
Check it out
archives.design
A digital archive of graphic design related items that are available on the Internet Archives compiled and curated by Valery Marier.
Check it out
sub.rehab
Due to the ongoing protest against Reddit's new API terms, many subreddits are either private or restricted. sub.rehab lists instances of the Reddit communities on alternative platforms.
Check it out
LastMileAI
Text, image & audio models, all in one place. Build AI-powered apps with text, image, and audio models like OpenAI’s ChatGPT, Google’s PaLM, Stable Diffusion and many more.
Check it out
Answer Overflow
Answer Overflow is an open source project designed to bring discord channels to your favorite search engine, enabling users to easily find the info they need, fast.
Check it out
Try
Try lets you run a command and inspect its effects before modifying your live system.
Check it out
From our blog
Creating a Bulge Distortion Effect with WebGL
Learn how to create a fun bulge effect in WebGL using the OGL library and shaders.
Check it out