 |
 |
|
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! |
|
|
 | | Krew has an excellent design that performs exceptionally well on mobile devices. The web experience stands out with its dynamic video content, clear typography, and subtle animation details. The website was created by Jorge Cheevers. Check it out
|
|
|
|
|
|
|
|
|
|
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. |
Let’s reinvent the wheel 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. |
Learn Performance 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 "Svelte by Example" serves as a concise and beginner-friendly introduction to both Svelte and SvelteKit, designed to pique your interest. |
Was Rust Worth It? 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 Portrait of Tenochtitlan A wonderful project by Thomas Kole: a 3D reconstruction of the capital of the Aztec Empire. |
Michal Zalobny’s Portfolio The incredible WebGL portfolio by Michal Zalobny. He’s amazingly talented! |
State of React 2023 Survey The first ever State of React survey. You can read more about it in this announcement post By Sacha Greif. |
|
|
Video Vault |
 | | Watch Christian Heilmann talk to Dirk Ginader, Hidde De Vries, Karl Groves and Piccia Neri in this live stream about accessibility. |
|  | | Sebastian Lague delves into fluid simulation and demonstrates how to make lots of particles behave like water. |
|  | | Max Romana's fantastic video provides an explanation of what memes are, including their spread and evolution. |
|
|
|
|
|
|
|
|
|
|
|
|
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. |
|
|
|
