CSS feature you may not know about: display: contents 🔗

While going through Svelte tutorial, I stumble across a lowkey helpful feature. We can specify CSS variable directly on Svelte components as if it’s just another component property, like this <Box --color="red"/>. Under the hood, this is rendered using a wrapper HTML element <svelte-css-wrapper style="--color: red"> around the content of the Svelte component. But how do they ensure it doesn’t mess with the component layout? Svelte use display: contents for this.

What this attribute does is to suppress the layout box of the wrapper element itself, instead putting in-place directly the layout boxes of the children. This attribute is perfect for the use case of a transparent wrapper element. Quite surprised that this is not a more common knowledge

Subprocess.run 🔗

Accidentally typed subprocess.run in my browser and I found out it actually navigated to https://subprocess.run, which will 301 redirect to the Python documentation. This means the Python team has bought this domain for you so you don’t waste your precious time searching for the doc. Thank you Python team.