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)

CSS Container Queries: A First Look + Demo

Back in November 2020 it was announced that Chromium would experiment with Container Queries — back then just a proposal but earlier this year (February 2021) adopted to become part of the CSS Containment Module Level 3 Specification.

Just before the weekend a first version of this experimental implementation landed in Chromium Canary for us to play with (behind a flag). Let’s take it for a test drive …

👨‍🔬 The CSS features described in this post are still experimental and not finalized at all! If you’re feeling adventurous you can play with these new features today, but you’ll need at least Chromium 91.0.4459.0 with the #enable-container-queries flag enabled through chrome://flags.

~

Wanting to test Container Queries out I quickly threw a demo together using a classic card component. By default our component shows and image on top and a description below that. If enough space becomes available, they will be shown next to each other. Should even more space become available, then the image will grow even more.

In the recording below you can see the different layouts we want to achieve:

~

The markup for all those cards is the same and is pretty straightforward. Only extra thing I’ve added is an extra wrapper div .animalcard-wrapper so that our container queries will play nice when being used inside CSS Grid

<div class="animalcard-wrapper">
	<div class="animalcard">
		<div class="animalcard__image">
			…
		</div>
		<div class="animalcard__description">
			…
		</div>
	</div>
</div>

The default layout of our card uses CSS Grid to position the image and the description:

/* SMALL LAYOUT: Image stacked on top of Description */
.animalcard {
	display: grid;
	grid-template: "image" "description" / 1fr;
	gap: 1em;
	padding: 1em;
}

To be able to use Container Queries, we first need to create a Containment Context (Container Root) on the .animalcard-wrapper. We instruct the browser to keep track of the inline-size, which translates to the width, as we will be changing the layout of its children based on that dimension.

/* Container Queries: Create Container Root */
.animalcard-wrapper {
	contain: layout inline-size;
}

With this Container Root in place, we can now add extra styles to apply when the Container Root reaches a certain width

/* MEDIUM LAYOUT: Image next to Description (1fr each) */
@container (min-width: 30rem) {
	.animalcard {
		gap: 2em;
		padding: 2em;
		grid-template: "image description" / 1fr 1fr;
	}

	.animalcard__description {
		text-align: left;
	}
}

/* LARGE LAYOUT: Large Image next to Description */
@container (min-width: 70rem) {
	.animalcard {
		grid-template-columns: 2fr 1fr;
	}
}

~

All together our demo finally becomes this:

See the Pen CSS Container Queries Demo by Bramus (@bramus) on CodePen.

😊

☝️ If you’re looking for more demos, Miriam Suzanne is collecting a bunch in this CodePen Collection. Be sure to check out Una‘s Episode Card for The CSS Podcast

~

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.

The new native web: Bye bye animation libraries?

Talk by Ben Deitmer, as recorded at the latest Front-end Forward Meetup:

Traditionally most web animations are driven purely by javascript. The now widely supported Web Animations Api has potential to drastically decrease the javascript footprint and improve performance out of the box. Ben learns you how to implement this new api but also have a critical look at its limitations.

Integrate Custom Elements into Forms with ElementInternals

Over at CSS-Tricks, Caleb Williams digs into ElementInternals

The ElementInternals standard is a very exciting set of features with a very unassuming name. Among the features internals adds are the ability to participate in forms and an API around accessibility controls.

As you can see in the demo below his <rad-input> does exactly that.

See the Pen
Rad input with validation
by Caleb Williams (@calebdwilliams)
on CodePen.

Creating Custom Form Controls with ElementInternals

🤨 New to Web Components? John Rhea recently wrote two nice articles for CSS-Tricks covering the basics: