Issue 70 October 11th 2024

Accessibility

Practical Accessibility Tips You Can Apply Today

Kevin Andrews shares some useful snippets of markup with handy explainers to help you deliver more accessible components.

CSS

TailwindCSS-motion - a simple syntax to animate in Tailwind CSS

Tailwind Motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.

We provide a simple syntax to animate any element in your Tailwind project. Instead of defining custom keyframes, we provide utility classes to animate every dimension, inline.

For example, for a slide and fade effect — you simply need motion-translate-x-in-25 motion-opacity-in-0 or, you can use one of our presets with motion-preset-fade.

You can further customize presets using base animations and modifiers classes.

CSS Music Video

No Images - Pure Code

CSS nesting improves with CSSNestedDeclarations

To fix some weird quirks with CSS nesting, the CSS Working Group resolved to add the CSSNestedDeclarations interface to the CSS Nesting Specification. With this addition, declarations that come after style rules no longer shift up, among some other improvements.

Create a semantic breakout button to make an entire element clickable

A common design pattern is to have something like a “card” element that has to be fully clickable. In this article, we’re going to use the magic of CSS to give us the desired fully clickable element effect, while also using proper semantic elements.

Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up

As you scroll up or down, the header hides itself. When idling, it comes back into view. Check it out using a Chromium-based browser, as those – at the time of writing – are the only browsers to support Scroll-Driven Animations.

The Popover API: Your New Best Friend for Tooltips

Discover how the Popover API and new CSS features simplify tooltip creation, making them accessible and well-positioned across all major browsers.

JavaScript

Animautomata - a library for creating high quality geometric animations using the Canvas API

An open-source, zero-dependency, fully-typed solution for creating high-quality, lightweight loading animations that fit your brand identity, using the Canvas API.

Animate4vue - a library for ready-to-use animations designed for Vue.js applications

Featuring over 100 high-performance UI animations crafted with GSAP, offering GPU-accelerated rendering with better performance and efficiency across all devices, as well as callbacks and async handling. Unlike traditional CSS animation libraries that can be tasking and less efficient on low-end devices, Animate4vue make your animations look and feel flawless.

Offers TypeScript support, and tree-shaking, so only the animations you use are bundled, keeping your application lean and fast.

Demo of all available animations here.

KaibanJS - The JavaScript Framework for Building Multi-Agent Systems

Multi-agent AI systems promise to revolutionize how we build interactive and intelligent applications.

However, most AI frameworks cater to Python, leaving JavaScript developers at a disadvantage.

KaibanJS fills this void by providing a first-of-its-kind, JavaScript-native framework designed specifically for building and integrating AI Agents.

Fixing your website's JavaScript performance

Learn about lesser-known web performance bottlenecks connected to excessive JavaScript usage, like long tasks, large bundle sizes, and hydration issues.

INVISIBLE.js - Execute Invisible Code

It uses invisible Hangul Filler characters (U+3164) in combination with JavaScript's with statement and a Proxy object to encode and evaluate a payload.

Patterns for efficient DOM manipulation with vanilla JavaScript

This guide covers JavaScript DOM manipulation patterns like choosing the right querySelector, caching elements, and improving event handling.

Miscellaneous

player.style - Video & audio player themes for every web player & framework

Video and audio player themes that work for any web player (Video.js, Youtube embeds, and more), and with every web app framework (HTML, React, and more). Open source and built with Media Chrome so they’re fully customizable using just HTML and CSS.

Mastering Chrome DevTools Series: An In-Depth Guide to the Elements Tab (1/11)

Have you ever used a tool every day but realized you barely know its full potential? I have. Chrome DevTools is a key part of my workflow, yet for a long time, I had only scratched the surface of what it could do. Once I took a closer look, I discovered just how powerful it is. Whether you’re experimenting with a personal project or managing a large-scale web app, Chrome DevTools can streamline your workflow, help you fix tricky bugs, and give you insights into what’s happening behind the scenes.

Let’s unlock the full potential of this tool, starting with the Elements tab.

Boilerplate for HTML multipage website with webpack

A Template for HTML projects with scss and webpack.

This boilerplate provides you with a starting point for building a multipage website with modern web development technologies. It comes pre-configured with Webpack to bundle your JavaScript and SCSS files, making development and production builds easy.

Might be something to look into if you're looking for something like this.

Manifesto for Lazy Product Development

We are uncovering lazier ways of developing valuable products.

Statichunt - 3900+ Composable Themes, Templates & Tools Directory

Statichunt is the largest directory of 3900+ themes, starters, UI kits, and tools for Static Site Generators. Find the perfect starting point for your next project and save hours.

qrframe - "artistic" QR codes

This project is a tool to create artistic QR code designs, but please note:

"These example QR codes may not be reliably scannable! Results may vary drastically based on device and scanner!"

The repo's author also has a nice post about crafting QR codes that goes into deeper detail about how they work and ways to make them pretty.

Liskov's Gun: The parallel evolution of React and Web Components

Unless you’re like me – an “extremely online” kind of web developer – you probably don’t notice the dramas and brouhahas that erupt in the web developer community with regularity. Most of the time these flame-wars offer little of value or less in terms of technical insight and the patter of angry voices fades away before it reaches the ears of the less online.

But a recent one, which began when the maintainer of the SolidJS web development framework wrote a long and very angry-sounding blog post outlining why he didn’t think web components represented the future of web development, is a little bit less usual. Not because it has staying power. It’s fading away at the same steady pace as these things usually do.

It’s interesting because it touches on what I think is a genuinely interesting technical issue, but in a way that pretty much forces every reader to ignore it.