Editor's Pick
BabyBird CSS - a collection of ready-to-use animations
A free CSS animation generator with a collection of ready-to-use animations.
Accessibility
Addressing Accessibility Concerns With Using Fluid Type
The CSS clamp() function is often paired with viewport units for “fluid” font sizing that scales the text up and down at different viewport sizes. As common as this technique is, several voices warn that it opens up situations where text can fail WCAG Success Criterion 1.4.4, which specifies that text should scale up to at least 200% when the user’s browser reaches its 500% maximum zoom level. Max Barvian takes a deep look at the issue and offers ideas to help address it.
CSS
The evolution of scalable CSS
The evolution of scalable CSS is a multi-part chronicle, intended to document the progress of tools and practices that enable us to write maintainable CSS at scale. It covers CSS scalability issues, CSS processors, essential good practices, methodologies, semantic and atomic CSS, styles encapsulation, CSS-in-JS, and type-safe CSS with Typescript.
Animotion — a visual CSS animation app
Animotion lets you create CSS animations visually, by dragging, resizing, rotating, clipping and more, including a keyframes editor, a collection of ready-to-use animations and 29 built-in easings
The New CSS Math: rem() and mod()
CSS added many new Math functions to supplement the old favorites (think calc() and the more recent clamp()). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. This series aims to look at each function with common use cases... and the less common as well.
Incomplete List of Mistakes in the Design of CSS
While many of these are obvious and don't need further explanation, the article would benefit a lot from showing a few simple examples for some of these items, or a justification for why the author's proposed naming is better.
An Interactive Guide to CSS Grid
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest lightbulb moments I've had in my own learning journey.
Modern CSS
CSS today has advanced features that make browsers powerful, our work easier and JavaScript dependency minimal.
The css masking demo is incredibly useful for theming logos and icons but god, the scroll snapping is awful UX.
BabyBird CSS - a collection of ready-to-use animations
A free CSS animation generator with a collection of ready-to-use animations.
A Complete Guide to CSS Grid
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
JavaScript
Introducing React components for the Maps JavaScript API
When the Maps JavaScript API launched back in 2005, the web performed a lot differently than it does now. Since then, frontend web frameworks have emerged, vastly simplifying how frontend developers create user-friendly interfaces. Today, React.js is the most popular frontend web framework, in use by over half of frontend web developers. We started off supporting React developers with a wrapper library for loading the Maps JavaScript API and a set of videos teaching how to integrate the Maps JavaScript API into a React app.
Building off of that initial support, today we’re announcing the alpha release of @vis.gl/react-google-maps, the first Google-sponsored library for integrating Maps JavaScript API components in a React web app. The package contains React components that correspond to elements in the Maps JavaScript API and hooks to access the map instance and additional libraries, speeding up load times and making the overall codebase easier to manage. This package will allow developers to quickly and easily create web applications that have geospatial experiences while having the peace of mind that the library will be kept up to date.
On-Scroll Shape Morph Animations
I really love KPR’s website. It offers a super cool scrolling experience with lots of impressive visuals. In particular, I was struck by the shape animations powered by Three.js. This inspired me with an idea for an animation that I would like to share with you today. It’s nothing particularly special, just some shape morphing with the ability to switch an image. All of this occurs on scroll, so there’s a lot of action going on.
The way the morph is achieved, is by animating a clip-path on the image and, in case we switch the image, toggle a visibility class to show the next picture.
Demo here and Github here.
Understanding React Server Components
React Server Components are changing the fundamental paradigms of React. Learn how Next.js handles the complexities and improves the performance of your applications.
React memo is good actually
React.memo, React.useMemo & React.useCallback, respectively a HOC & performance hooks, are official APIs provided by the React library ~since React@16 (2018), commonly yet hesitantly used in React applications.
They are notably used for improving application runtime & rendering performance, and regarding React.useMemo & React.useCallback hooks, also to ensure stability of non-primitive JavaScript values, when such values are used as effect hooks, ie React.useEffect dependencies.
In which case, they also contribute to application logic correctness.
Over the years (since what, 2017, 2018?) I have seen open source maintainers, tech leads, engineers, Senior, Staff+ alike, take very strong positions pushing back against the use of React performance APIs at work or in public, all in the name of “readability, anti-fragility, performance, simplicity, convenience, consistency, dogma”, and more.
All this with an outstanding immediate effect of leading to heated debates in code reviews, stalling pull requests, gatekeeping, drama, frustration, and too often as a result: a halt to efforts aiming to improve rendering performance for the users.
Spectral.js - powerful and versatile javascript library for achieving realistic color mixing
Spectral.js is based on the Kubelka-Munk theory, a proven scientific model that simulates the way light interacts with paint to produce lifelike color mixing.
Spectral.js is incredibly user-friendly and easy to implement.
Whether you're a graphic designer, web developer, generative artist or just someone with an eye for aesthetics, spectral.js can take your color mixing to the next level.
Promises Training
Currently, promises are the de-facto way of handling asynchronous tasks in Javascript, and because of that, they're a fundamental part of any Javascript developer's knowledge.
However, when we're learning promises for the first time, we only learn enough to get by, that is, we learn a little bit of how to use promises, (nowadays, most likely with async/await only), the Promise.all method and that's it.
While this approach makes sense for beginners because it is enough to solve most problems in their daily lives, a recurring issue is that they stop there, that is, they never go past this initial knowledge.
And it's precisely this "learn just enough to get by" posture that holds many developers at their current level, as solving more complex problems requires a deeper understanding.
So, if you want to take your developer skills to the next level, swimming in shallow waters won't cut it, you must go deeper, you need to fully understand promises, and how they work, you need to be proficient in both async/await and then/catch styles of promise handling, and be able to orchestrate asynchronous tasks in the most efficient way possible.
Spreadsheet 2 - Composable, declarative Spreadsheet component. Beautifully designed Spreadsheet component for React.
Spreadsheet is rendered in HTML Canvas, giving you ~60fps rendering performance and ability to display millions of rows and columns without peformance impact. With escape hatches, you can access the internals and customize it to your liking.
Miscellaneous
Our top 12 Static Site Generator (SSG) Picks for 2023
Hygraph's picks for the top SSGs in 2023, including Gatsby, NextJS, Gridsome, and many more.
The Valley of Code
The vision for The Valley of Code is to be a website you can always reference and use as “the place where you go learn quickly how to do X” in your day-to-day life as a developer.