No. 807, January 18, 2024 View in browser |
 |
|
Olá, frontend friends! 👋
So Adam joined the fun and dropped an awesome, easy-to-follow tutorial on Codrops! It's filled with hands-on examples, and it makes unraveling scroll-driven animations with CSS a breeze. Don’t miss it, you’ll learn a ton!
Don't close the weekbook just yet; we've got more coming your way tomorrow. Meanwhile, kick back and enjoy some design inspiration and frontend resources we've handpicked just for you today!
Happy exploring! |
|
|
 |
|
VANA's design provides an exceptionally smooth experience, where the scroll feeling seamlessly complements the product – an app designed to enhance well-being through breathwork. Dash Digital Studio has done a great job by establishing the perfect mood; the color theme is impeccable, and the modern, minimal typography places the message of serenity at the forefront. |
Standout Web Design Picks |
|
|
 |
|
|
Tired of unclear bug reports? Try Marker.io and collect website issues with screenshots, console logs, and session replay.
Try it now 👉 |
|
| A collection of libraries that make it easy to build high-performance, cross-platform, web-based graphics applications. By John Beresford. |
|
|
|
|
|
|
|
|
|
| A text-only excerpt from Sara Soueidan's Practical Accessibility video course where she discusses ARIA live regions, an accessible notification system that enhances the usability of web content for screen reader users, allowing dynamic updates to be communicated effectively. There's also a second part. |
|
|
|
|
|
|
|
|
|
| LoaderShip is a free, user-friendly CSS-only loader configuration tool for developers, offering a diverse collection of customizable loader styles without the need for login or dependencies. |
|
|
|
|
|
|
|
|
|
| This article discusses challenges in automating browser testing for Web AI applications running machine learning models on client-side web browsers, focusing on overcoming issues with hardware acceleration, GPU detection, and driver compatibility, using Puppeteer and Headless Chrome. |
|
|
|
|
|
|
|
|
|
| Ryan Mulligan shares a fun experiment involving a web component called "click-spark" that creates sparks of joy when clicking on the page, with customizable spark colors and the ability to activate sparks on specific elements using an "active-on" attribute. |
|
|
|
|
|
|
|
|
|
| Antoine Vidal writes about the challenges of integrating traditional, time-consuming 3D rendering processes into fast-paced concept ideation in digital product design, proposing the use of AI-powered rendering tools to expedite the creation and iteration of images, emphasizing the need for control over AI-generated visuals, and foreseeing the role of AI in the future of rendering workflows. |
|
|
|
|
|
|
|
|
|
| Cassidy expresses frustration with the current state of React, citing issues like confusion, lack of communication with the community, slow releases, and concerns about leadership diversity, despite being a long-time and knowledgeable user of React. |
|
|
|
|
|
|
|
|
|
| A UI design challenge platform with unique features such as 365 daily challenges, progress tracking, daily notifications, design feedback, social sharing, and a leaderboard for designers to showcase and improve their skills. |
|
|
|
|
|
|
|
|
|
| With just CSS you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements and much more. An in-depth tutorial by Adam Argyle. |
|
|
|
|
|
|
|
|
|
| From Amelia to Web Stories, these top WordPress plugins serve an impressive range of popular design features and functions. (sponsored) |
|
|
|
|
|
|
|
|
|
|
Video Vault |
|
|
|
|
Animation Spotlight |  | |
|
|
|
|
|
|
|
|
|
|
Demo Corner |
| | Jhey is the master at making mere concepts reality with CSS. Here he shows how to create an incredible “around the corner” scrollbar. Read the tweet for more info. |
|
|
|
|
|
|
|
|
|
| | Anderson Mancini created this cool demo with volumetric ray marched clouds using Three.js and R3F. |
|
|
|
|
|
|
|
|
|
| | A GLB super-optimized laptop model by Ksenia Kondrashova, set for animation, with a screen plane for mapping textures. |
|
|
|
|
|
|
|
|
|
| | Liam Egan coded this beautifully animated knot made of rocks. |
|
|
|
|
|
|
|
|
|
|
❓Did you know that… |
…the iconic emoticon, often called the "Smiley," originated on September 19, 1982, when computer scientist Scott Fahlman playfully introduced the first sideways smiley face on Carnegie Mellon's online bulletin boards? His intention was to inject humor into digital conversations, and little did he know, this simple act would kickstart a global trend in expressive online communication. :-) |
|
|
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. |
|
|
|
