 |
 |
|
Welcome to Collective #802 |
This week served as a gentle nudge to embrace a slower pace. The holiday vibes are floating around, and many hardworking devs and designers are rightly taking some well-deserved time off. It does mean, though, that the usual whirlwind of writing, coding, and publishing has taken a bit of a snooze ;)
Hence, there was no Collective this Monday, and there will be only one more to wrap up the year next Thursday.
Wishing you the coziest of holidays! Remember to take it slow—sometimes, just kick back, hit play, and enjoy the show!
Happy reading! |
|
|
 |
|
Mita’s website has an overall sexy look with modern details. The scrollable “timeline” is very interesting and transmits an immersive feel. Our pick this week. |
|
Standout Web Design Picks |
|
|
The Kintone Developer Program provides a seamless tutorial for integrating ESP8266 with Kintone's web database, making IoT integration a breeze!
Try it now 👉 |
|
| Bramus breaks down the quirks of CSS animation-composition, highlighting the unexpected behavior of accumulating scale transforms and unraveling the mystery by delving into the CSS Transform specification. |
|
|
|
|
|
|
|
|
|
| In Alistair Shepherd's lively exploration of web performance, readers are playfully introduced to the importance of a fast-loading website through the dramatic tale of Ryūji's encounter with murderous tortoises, followed by a user-friendly breakdown of web performance metrics. |
|
|
|
|
|
|
|
|
|
| In a cat-centric coding adventure, Raymond Camden set out to create a web app using generative AI to identify cat breeds from images, showcasing a playful front end with Alpine.js and a Cloudflare Workers back end hooked up to Google's Gemini AI. |
|
|
|
|
|
|
|
|
|
| In this 6th post of series about AI for web developers, Austin Gil is adding a slick dialog component to showcase AI-generated images, complete with button-controlled and programmatically-triggered features. |
|
|
|
|
|
|
|
|
|
| Itay Dreyfus explores the design of noteworthy products and this time he looks at Telegram, the cloud-based messaging service founded by the Durov brothers in 2013. |
|
|
|
|
|
|
|
|
|
| In this exploration of fluid simulation on GPUs, Andrew Chan delves into the evolution of fluid dynamics algorithms, touching on the transition from traditional faked methods to the recent ease enabled by GPUs. |
|
|
|
|
|
|
|
|
|
| A fantastic AI Art interview with Jen Panepinto. Driven by an innate need for expression, the artist explores various AI workflows, blending prompts in Midjourney and embracing new tools; foreseeing AI's impact on society as a liberator of minds from mundane tasks, |
|
|
|
|
|
|
|
|
|
| Adrian Roselli writes about how the Web Platform Baseline falls short in tracking accessibility support, raising concerns about its effectiveness in guiding developers and potentially exposing them to risks. |
|
|
|
|
|
|
|
|
|
| Hawkticehurst is halfway through the 12 Days of Web Components series, taking a break to share a reading list featuring favorite web component blog posts and resources, inviting readers to explore. |
|
|
|
|
|
|
|
|
|
| In this article, Nolan Lawson shares a journey of creating a custom JavaScript framework for his emoji-picker-element web component, driven by a desire to minimize bundle size and maintain support for Safari 12. |
|
|
|
|
|
|
|
|
|
| Get ready for a festive website makeover with a diverse collection of Christmas tree animations that add a touch of magic and nostalgia. |
|
|
|
|
|
|
|
|
|
| Tony Solomonik discusses his exploration of database fundamentals, prompted by a lack of understanding when choosing a database for a project, and shares insights gained from reading books on database internals. |
|
|
|
|
|
|
|
|
|
| Mike Carbone is discussing the challenges of incorporating dynamic color variations, including brand colors and skin tones, into pictograms for a design system and proposes a solution using a tool he created called "Picto Painter" that allows for customizable and easily implementable SVGs. |
|
|
|
|
|
|
|
|
|
| Various practical tools and templates for user experience (UX) research, including emotion tables, persona templates, screening considerations, prioritization matrices, interview scripts, and project plans. |
|
|
|
|
|
|
|
|
|
| A free and open-source inpainting & image-upscaling tool powered by Webgpu and Wasm on the browser. |
|
|
|
|
|
|
|
|
|
|
Video Vault |
|
|
|
|
Demo Corner |
|
 | | Marco Ludovico Perego created this experiment in Three.js to replicate a great artwork by Murat Pak. |
|
|
|
|
|
|
|
|
|
|
From our blog |
| | Catch up on the highlights of the previous days in this archive page and discover more frontend goodness of 2023. |
|
|
|
|
|
|
|
|
|
| | Learn how to build a particles music visualizer in Three.js, with techniques covering audio synchronization and 3D visual effects, inspired by ARKx’s work for Coala Music’s website. |
|
|
|
|
|
|
|
|
|
|
❓Did you know that… |
…the world's first computer mouse was made of wood? In 1964, Doug Engelbart created the prototype, featuring a bulky design with two potentiometers perpendicular to each other and connected to wheels. The rotation of each wheel translated into motion along one axis, earning it the nickname "mouse" due to its tail-like cable. A far cry from the sleek mice we use today! |
|
|
|
|
|
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. |
|
|
|
