No. 806, January 15, 2024 View in browser
|
 |
Olá, frontend friends! 👋
I hope this Monday is treating you well and that you’re working on something exciting! We’ve got lots of fresh and interesting frontend links for you, so grab a coffee or tea and enjoy these reads as short breaks; they might help you with your work!
I’m really excited about this week because we’ve got some seriously great articles heading your way on our blog!
Here’s to a great start of the week!
|
|
|
|
🤖 (sponsored)
|
Meet Divi AI – your smart sidekick integrated into Divi, the most loved WordPress theme on the planet. It crafts content, writes code, and designs images right in the builder. With special knowledge about every Divi element, it creates top-notch, tailored content, blending the skills of a writer, web developer, and digital artist. Take your website to the next level effortlessly with Divi and Divi AI!
|
|
|
|
Jake Lazaroff delves into the difference between static and dynamic websites, both online and offline functionality. He introduces a two-axis framework, emphasizing the move towards declarative dynamism in HTML, the rise of islands architecture through technologies like web components, and the concept of local-first software.
|
|
|
|
|
|
|
|
|
|
|
|
Alexander Petros discusses the criticism that htmx, often perceived as a solution to complex frontend frameworks, is itself a framework, arguing that while htmx can be used as a framework, it emphasizes writing HTML for defining application behavior, making it more aligned with web semantics and offering advantages in terms of longevity and compatibility compared to traditional JavaScript frameworks.
|
|
|
|
|
|
|
|
|
|
|
|
Lene Saile shows how to use CSS subgrid to enhance grid layouts, allowing nested grids to share track definitions with their ancestors, and explores various techniques to visually mark grid columns using background colors, borders, and pseudo-elements.
|
|
|
|
|
|
|
|
|
|
|
|
Jenn Diaz writes about the importance of internationalization in software development, specifically focusing on considerations in HTML and CSS, such as using JavaScript libraries like i18next and Polygot, logical properties for styling in different text directions, HTML attributes like dir and lang, CSS writing mode for vertical text, and the broader concept of culturalization to ensure inclusivity for users of different cultures.
|
|
|
|
|
|
|
|
|
|
|
|
Jonathan Dallas writes about the concept of “proximity” in CSS theming, highlighting how it can be leveraged for nested theming by utilizing CSS inheritance based on the proximity of elements to their ancestors with set values, particularly through custom properties, making it easier to style nested themes at different depths.
|
|
|
|
|
|
|
|
|
|
|
|
Zach Saucier shows how to use `%c` in JavaScript’s `console.log` to apply CSS styling, allowing for the rendering of not only text and variables but also limited CSS, SVGs, and HTML in the console, which can be explored further in the DevTools console of browsers other than Safari.
|
|
|
|
|
|
|
|
|
|
|
|
Emil Widlund dives into the development of Harmony, a color picker component using React, focusing on creating harmonious color combinations based on different color harmony algorithms, such as analogous, complementary, triadic, tetradic, and square, utilizing the HSV color model and the Canvas API.
|
|
|
|
|
|
|
|
|
|
|
|
Nicholas C. Zachas discusses the evolution of JavaScript filesystem APIs, highlighting the lack of innovation in server-side runtimes like Node.js and Deno, and introduces fsx, a modern filesystem API designed for improved developer experience, ease of use, and observability.
|
|
|
|
|
|
|
|
|
|
|
|
How to use a Custom Easing Function with the Web Animations API (WAAPI)
Bramus writes about using custom easing functions in JavaScript with the Web Animations API (WAAPI) and explores two methods: precalculating keyframes and using the linear() easing function, with a mention of a proposed method for registering custom easing functions.
|
|
|
|
|
|
|
|
|
|
|
|
Adam Argyle highlights some powerful and stable CSS features, including the :has() selector for various use cases, subgrid for creating flexible layouts, built-in CSS nesting, balanced text wrapping for headlines, and container query units for responsive design, emphasizing their practical applications for frontend development.
|
|
|
|
|
|
|
|
|
|
|
|
Bruno Simon’s latest project in collaboration with the folks from Bonhomme is an interactive pleasure. It’s built using Three.js, React and R3F.
|
|
|
|
|
|
|
|
|
|
|
🔎 Behind the Pixel
|
 |
Finally we are back with our Monday edition where we have a look “behind the pixel” of a nice little effect! This time we spotted a fun x-ray effect seen on Concept Capers. It’s running automatically, but we can also hover with the mouse and it will be interactive.
When we open the Dev Tools, we can see that there are a few elements that play a key role. We have an underlying image (the one with the white letters), a top x-ray image, and another circular element that follows the mouse. The top x-ray image gets a circular clip path applied to and the moving element has a thick black border.
|
 |
How are the elements positioned? It’s all cleverly done by setting the –cursor-x and –cursor-y variables in the parent using JS! Cool technique!
|
|
Video Vault
|
|
|
|
|
|
|
|
|
|
Demo Corner
|
|
|
|
|
A fun demo by Adam Argyle that features cyclical arrow keys, springy grid column transitions using linear() easing, a centered background parallax effect, and controlled column size with the :has() selector.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
A creative range slider wave made by Ikeryou
|
|
|
|
|
|
|
|
|
|
|
❓Did you know that…
|
…GeoCities, an early web hosting service, allowed users to create their own websites organized into ‘cities’? Launched in 1994, GeoCities became a virtual community where users could build web pages and connect with others who shared similar interests. Sadly, GeoCities was shut down in 2009 (in Japan until 2019), but its legacy lives on as a nostalgic symbol of the early days of user-generated content on the internet.
|
|
|
|
|
|
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.
|
|
|
|
Source
