 |
|
|
Hope you are having a fantastic week! We noticed that many were still enjoying some well-deserved holiday time, resulting in a missed Collective issue on Monday.
But we're back in action today with a jam-packed edition filled with website inspiration, the latest frontend news, and some cool demos.
We trust you're all doing well and diving into exciting projects. Remember, “What you get by achieving your goals is not as important as what you become by achieving your goals.” — Henry David Thoreau
Happy reading! |
|
|
 |
|
Granissat nailed it with a fun and vibrant design that totally fits the venue. They've blended their cool style seamlessly, and there are so many awesome details to discover. Our pick this week! |
|
|
|
|
|
 |
|
|
With generative AI and composable content, the possibilities are as limitless as your team’s creativity. As the leading intelligent composable content platform, Contentful enables developers and marketers alike to easily deliver on-brand experiences at speed and scale-all within one content system. 
Get Started 👉 |
|
| Pikimov is a free web-based motion design and video editor, serving as a no-login-required alternative to software like Adobe After Effects, with features for layer-based compositions, keyframe animation, and file storage on the user's computer. |
|
|
|
|
|
|
|
|
|
| Ahmad Shadeed's interactive guide highlights the importance of optimizing target sizes in user interfaces. He emphasizes how larger targets enhance user interaction, taking into account factors such as spacing, touch variations, and Fitt's Law. The guide also includes examples and recommendations specifically tailored for front-end developers. |
|
|
|
|
|
|
|
|
|
| Lee Robinson discusses the advancements in CSS in 2024, highlighting features like cross-browser support, powerful tools, and frameworks for optimizing performance, and explores design and developer experience considerations, recommending CSS Modules, Tailwind CSS, and StyleX as potential tools for different use cases. |
|
|
|
|
|
|
|
|
|
| Maxi Ferreira’s interactive guide to component composition with React Server Components. |
|
|
|
|
|
|
|
|
|
| The 8th edition of the JavaScript Rising Stars covering popular projects and trends in the JavaScript ecosystem in 2023, highlighting shadcn/ui as the hottest project, Bun as a fast JavaScript runtime, and React's continued dominance despite some controversies. |
|
|
|
|
|
|
|
|
|
| Vadim Makeev questions the practical impact of adhering to HTML semantics, highlighting a perceived gap between the good intentions of HTML specifications and their actual implementation in browsers and screen readers, suggesting that the focus on semantic correctness might not always translate to better user experiences. |
|
|
|
|
|
|
|
|
|
| The 100 most hearted Codepens of the past year with amazing demos from frontend developers and coders. |
|
|
|
|
|
|
|
|
|
| Tokenami is a CSS library that uses CSS variables in the style attribute, offering type-safe static styles with theming, responsive variant support, and no bundler integration, as an alternative to CSS-in-JS solutions that inject styles. |
|
|
|
|
|
|
|
|
|
| Terence Eden discusses how to identify and visually represent the age of a website using CSS, exploring methods such as extracting publication dates from the HTML and metadata, and applying different styles based on the publication year to create a varied look and feel for older content. |
|
|
|
|
|
|
|
|
|
| Paul Henschel has made a great collection of helpful mini demos based on requests he got on Reddit. |
|
|
|
|
|
|
|
|
|
| Dan Abramov discusses the dilemma of whether React components should run on the client-side or server-side, presenting arguments for both perspectives and highlighting the challenges of achieving a balance between instant interactivity (client-side) and data processing (server-side). |
|
|
|
|
|
|
|
|
|
| Rachel Andrew writes about the implementation of the align-content property in Chrome 122, allowing vertical centering of elements within block containers without the need for display: flex. |
|
|
|
|
|
|
|
|
|
| An open-source backend solution for SaaS and mobile apps, featuring a one-file setup with real-time database, authentication, file storage, admin dashboard, and ready-to-use features. |
|
|
|
|
|
|
|
|
|
| Brad Frost advocates for creating a Global Design System, a centralized library of common UI components, to improve the quality and accessibility of web experiences, save time for designers and developers, and harness collective human potential by reducing duplicative work across organizations. |
|
|
|
|
|
|
|
|
|
| An article that explores the inconsistency in blur implementations across design tools and web platforms, providing observations, scale factors for different blurs, and insights into matching blur sizes between tools. |
|
|
|
|
|
|
|
|
|
| In Emmanuel Odioko’s article, discover how CSS Houdini is changing the way developers work on web styling and layout. With its APIs, CSS Houdini allows for more customization and creativity, providing developers with new possibilities beyond traditional CSS. |
|
|
|
|
|
|
|
|
|
|
Video Vault |
|
|
|
|
Animation Spotlight |  | |
|
|
|
|
|
|
|
|
|
|
Demo Corner |
|
| | Supercool Three.js and shader magic by Roman Jean-Elie playing with refraction for a landing page. |
|
|
|
|
|
|
|
|
|
|
| | Same Zabala created this playable amazing 3D piano with Tone.js, Three.js, React, R3F, Drei, and Zustand. |
|
|
|
|
|
|
|
|
|
|
From our blog |
| | Choosing the right WordPress theme is crucial for crafting an attractive and efficient website in 2024, and with these top picks, you can easily find the perfect fit for your needs. (sponsored) |
|
|
|
|
|
|
|
|
|
| | Some experiments with on-scroll typography effects using SVG clip-paths. |
|
|
|
|
|
|
|
|
|
|
❓Did you know that… |
…in 1973, Xerox PARC unveiled the Alto personal computer, featuring a bitmapped screen? It was a trailblazer as the first computer to showcase the desktop metaphor and graphical user interface (GUI), setting the stage for the future of interactive digital design! |
|
|
|
|
|
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. |
|
|
|
