Pascal Duez pascalduez

Improved .visually-hidden

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

Job Control in ZSH and Bash

All processes in ZSH/Bash under job control are in 3 states: foregrounded, backgrounded and suspended.

# run command in the foreground
command
# run commend in the background

The State of Container Queries

tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.

There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.

2-min Catchup

Here are official'ish documents to outline the developer community's desires.

A lot of people mentioned other immutable JS libraries after reading my post. I thought it would be good to make a list of available ones.

There are two types of immutable libraries: simple helpers for copying JavaScript objects, and actual persistent data structure implementations. My post generally analyzed the tradeoffs between both kinds of libraries and everything applies to the below libraries in either category.

Libraries are sorted by github popularity.

Persistent Data Structures w/structural sharing

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

irssi (terminal client)

komanda (webview)

LimeChat (repo, native + webview, css skin)

	// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
	// does not support `nomodule` is probably not being used anywhere. The code below is left
	// for posterity.

	/**
	* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
	* load <script nomodule> anyway. This snippet solve this problem, but only for script
	* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
	*
	* Again: this will not prevent inline script, e.g.:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>French Line</title>
	<style id="jsbin-css">
	body {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;

	// ----
	// Sass (v3.4.9)
	// Compass (v1.0.1)
	// ----

	/// Constant maps
	/// Should not be dynamically updated.
	/// @access private
	/// @prop {List} TIME - List of `<time>` units
	/// @prop {List} FREQUENCY - List of `<frequency>` units