Welcome to Collective #789!
We’ve made some exciting changes to our newsletter’s look and feel, and we can’t wait to share them with you! We’ve listened to your feedback, so we’ve reduced the number of images to improve readability. But, we’re also a bit nervous because it’s something new for us. We’d greatly appreciate your feedback on the new design. Your thoughts are essential as we want to ensure our newsletter is the best it can be for you.
So, let’s jump into the latest edition!
|
|||||||||||||||||||||||||||||||||||||||||||
Standout Web Design Picks
👀 See `console.log` output and runtime errors alongside your code. No config, no setup, no hassle. Supports Vite, Bun, Webpack, Next.js, Remix, and more. Try it now
CSS prefers-reduced-transparency
Adam Argyle shows how to use the new new media query feature prefers-reduced-transparency to optimize and adjust for users who prefer an opaque UI.
Vasilis van Gemert discusses the limitations of current design tools in the web industry, highlighting their shortcomings in addressing details like interaction, accessibility, and CSS, and calls for improvements to empower designers to create a more inclusive and innovative web.
The latest entry in the Learn series on web.dev covering topics like page loading speed, resource optimization, and user experience enhancement through various modules, providing fundamental knowledge for beginners in web development.
“Svelte by Example” serves as a concise and beginner-friendly introduction to both Svelte and SvelteKit, designed to pique your interest.
Jarrod Overson shares his three-year journey working with Rust and WebAssembly, highlighting the benefits and challenges of using Rust for various projects.
The art of prompting: An introduction to Midjourney
Markus Wallén’s article introduces readers to Midjourney, explaining how to use it effectively and customize the generated images with various parameters and techniques.
Real-time dreamy Cloudscapes with Volumetric Raymarching
Maxime Heckel writes about how Raymarching, a rendering technique that relies on Signed Distance Fields and ray casting, can be adapted to render volumes instead of surfaces.
A Couple of New CSS Functions I’d Never Heard Of
Chris Coyier summarizes some pretty interesting new CSS functions and features, including “light-dark()” for handling light and dark themes, “xywh()” for defining basic shapes, and more.
Reality Check #1: Building out a furniture site from Dribbble
In this new series called “Reality Check”, Andy Bell takes design work from platforms like Dribbble or Layers and transforms it into web-compatible designs.
Making Music with Google Sheets and Web MIDI API
Asep Bagja explains how to use the Web MIDI API in modern web browsers to create a web application using Google Sheets as a music sequencer for composing and playing ambient music with a hardware synthesizer.
Select element: now with horizontal rules
Una Kravets highlights a new feature in Chrome 119 and Safari 17 that allows you to add horizontal rule (<hr>) elements as separators within select elements to enhance user experience when presenting options in HTML forms.
The New CSS Math: rem() and mod()
Dan Wilson discusses the CSS rem() and mod() functions, which are used to calculate remainders and modulus values, respectively.
Why does my CSS View Transition ignore z-index?
Nic Chan discusses an issue with the View Transitions API in web development, where animations cover a sticky footer and provides a workaround involving adding a view-transition-name property to the affected elements.
How We Designed & Built a View Transition Demo
An introduction to the View Transitions API by Eric Fuhrmann, highlighting a demo created using Astro, a web framework that natively supports this API, showcasing its benefits and design considerations.
Interactive Audio Visualizer for Coala Music
Tiago Canzian coded this cool audio visualizer with Three.js, GSAP and Vue.js.
Geist Sans and Geist Mono Fonts
Geist is an extraordinary typeface developed by Vercel specifically for developers and designers.
A wonderful project by Thomas Kole: a 3D reconstruction of the capital of the Aztec Empire.
The incredible WebGL portfolio by Michal Zalobny. He’s amazingly talented!
The first ever State of React survey. You can read more about it in this announcement post By Sacha Greif.
Video Vault
Demo Corner
And that’s it! 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.
