Comparing the New Generation of Build Tools

Over at CSS-Tricks Hugh Haworth has done a nice write-up on the next generation of build tools that have been popping up.

A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app.

Covered are esbuild, Snowpack, Vite, and wmr.

Comparing the New Generation of Build Tools →

Scroll-Linked Animations with CSS Scroll-Timeline (CSS Conf Colombia)

I just finished giving a lightning talk at the wonderful CSS Conf Colombia covering Scroll-Linked Animations with CSS @scroll-timeline. Really enjoyed giving a talk again after all this time, especially with this great vibe they have going on and the afterparty in gather.town (skribbl FTW!).

You can find the slides embedded below:

Source materials for the slides are my two posts on Scroll-Linked Animations:

  1. Part 1: Intro + Basic Scroll-Linked Animations
  2. Part 2: Scroll-Linked Animations with Element-Based Offsets

I’ll try to see if I can get a hold of the recording to embed here.

Thanks to the organisers for having me, and thanks to the attendees for watching me speak. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward) 🙂

💁‍♂️ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Dark mode in 5 minutes, with inverted lightness variables

Lea Verou shows a method to implement dark mode, not by swapping entire colors, but by simply changing their lightness

The basic idea is to use custom properties for the lightness of colors instead of the entire color. Then, in dark mode, you override these variables with 100% - lightness. This generally produces light colors for dark colors, medium colors for medium colors, and dark colors for light colors, and still allows you to define colors inline, instead of forcing you to use a variable for every single color.

For best results she also taps into LCH colors.

LCH is a much better color space for this technique, because its lightness actually means something, not just across different lightnesses of the same color, but across different hues and chromas.

Dark mode in 5 minutes, with inverted lightness variables →

Accessible front-end components: claims vs reality

Great post by Hidde, warning about blindly trusting accessibility claims.

Not all ‘accessible components’ are created equal, some will work a lot better for our end users than other. In this post I have listed a number of things you can look at if you are considering third-party components.

I especially like this part:

Sometimes, HTML-only patterns are easier to understand for end users. More ARIA does not mean more accessibility.

It overlaps perfectly with Jeremy‘s thoughts in Robustness and Least Power

Accessible front-end components: claims vs reality →

Synchronizing Fireflies Visualizer

If you watch Fireflies closely, some species will sync up their flashing to eventually blink as a group. Pretty mesmerizing stuff. But how to they do it?

So, how do thousands of fireflies pick a leader to follow, a maestro to keep their flashing in time? The answer, the scientists found, is simple: They don’t.

Nicky Case created a tool which explains and visualizes how it works. By default they all blink individually, but once you hit the “Nudge thy neighbour” option on, you’ll see them sync up.

Fireflies →

Via Kottke — Be sure to watch the video if you want to know more about spontaneous synchronization

Style Pseudo-elements with Javascript Using Custom Properties

Over at CSS { In Real Life }, author Michelle Barker has detailed a clever way to style pseudo-elements (such as ::before and ::after) through JavaScript.

In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. […] Luckily, CSS custom properties can help.

👉 If you set a custom property on the element that “owns” the pseudo-element the pseudo-element itself can pick it up, thus enabling a way to style it.

Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties →

Debug/Inspect z-index stacking with the “CSS Stacking Context Inspector” DevTools extension

The Stacking Contexts Inspector is a DevTools extension for Google Chrome that allows you to analyse the stacking contexts available on a webpage. This extension will add a new panel to the DevTools and a new sidebar on the elements panel.

Handy for when you’re having stacking issues.

CSS Stacking Context Inspector →
Stacking Contexts Inspector →

☝️ If you’re running “Edgium”, you can use it’s built-in 3D View to visualize the stacking contexts.

Hat tip, Josh!

W3C WAI Curricula on Web Accessibility

Over at the W3C Web Accessibility Initiative (WAI) website you can find an extensive curricula on Web Accessibility

This resource provides teaching modules to help you create courses on digital accessibility, or to include accessibility in other courses. The modules cover accessibility foundations that apply broadly, and specific skills for developers, designers, content authors, and others.

Wow, these surely would’ve come in handy back when I was a lecturer Web & Mobile 😅

Curricula on Web Accessibility: A Framework to Build Your Own Courses →

This Web Site is a Tech Talk

Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020:

The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development.

/me nods along for the entirety of this talk.

Powering his faux-live-coding slidedeck is Queue Code, a package to let you live code like he did in this talk.

This Web Site is a Tech Talk (incl. resources)