Debugging layout repaint issues triggered by CSS Transition

Dzhavat ran into an interesting performance issue where practically his whole site would repaint when a transition in the header was triggered.

The element being animated is a span wrapping some text placed inside an h1. The h1 itself is in the upper left corner on the page and contains my name. Initially, only the letter “D” is shows. The remaining part fades-in on hover.

I was quite surprised to see the whole page flashing green given the transition was scoped to a very isolated element. I didn’t really see any connection between animating a span and causing repaint on the whole page.

The culprit: Stacking Contexts

Debugging layout repaint issues triggered by CSS Transition →

HTML Table with Sticky Header Row and Sticky First Column

Nice work by Chris Coyier:


See the Pen Table with Sticky Header and Sticky First Column by Chris Coyier (@chriscoyier) on CodePen.

I tried this on a table before and would swear it didn’t work back then. Perhaps I did something wrong, because it’s quite tricky as Chris details:

The “trick” at play here is partially the position: sticky; usage, but moreso to me, how you have to handle overlapping elements. A table cell that is sticky needs to have a background, because otherwise we’ll see overlapping content. It also needs proper z-index handling so that when it sticks in place, it’ll be on top of what it is supposed to be on top of.

A table with both a sticky header and a sticky first column →

The Ingenious Design of the Aluminum Beverage Can

Bill details the engineering choices underlying the design of a beverage can he explains why it is cylindrical, outlines the manufacturing steps needed to created the can, notes why the can narrows near it lid, show close ups of the double-seam that hold the lid on, and details the complex operation of the tab that opens the can.

My inner geek rejoices to see how much engineering went into something we take for granted.

Remotion – Create videos programmatically in React

Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

  • Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
  • Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
  • Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

Also comes with a handy player that allows you to scrub through the timeline. And yes, that demo video above is made with Remotion … #eatyourowndogfood

Here’s another example created with Remotion:

Neat! The code behind those videos is pretty dazzling though! 😵

Remotion – Create videos programmatically in React →
Remotion Source (GitHub) →

Style the target text from text-fragment links using the ::target-text pseudo-element

One of my favorite features that shipped with Chrome 80 — apart from Optional Chaining — is the ability to link to text-fragments. By default Chrome will highlight those in yellow:

💡 To easily create text-fragment links there’s this Chromium Plugin you can use.

~

As tweeted before, coming to Chromium 89 is the ability to style those text-fragments using the ::target-text pseudo-element, which is part of the CSS Pseudo-Elements Level 4 Specification.

This snippet below:

/* Style scroll-to-text fragments */
::target-text {
    background: #00cdff;
}

Will visually manifest itself like this:

~

Note that the ::target-text pseudo-element can only be styled by a limited set of properties that do not affect layout. Only following properties apply:

  • color
  • background-color
  • text-decoration and its associated properties
  • text-shadow
  • stroke-color, fill-color, and stroke-width

~

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.

code-server — Run VS Code on any machine anywhere and access it in the browser

code-server allows you to run on any machine, preferably on a Cloud Server, and access it from anywhere.

Yes, that means you can use VS Code on your iPad for example 😉

Once installed you’ll also need to set up authentication and the like. Alternatively you can run code-server --link and get a .cdr.co subdomain, protected by logging in using your GitHub account.

If you want to test it out locally, you can also install it locally using brew install, after which it’ll run on port 8080. Docker image also available.

code-server →
code-server Setup Guide →

Via Tim Broddin

GitHub1s — One second to read GitHub code with VS Code

This tool — not endorsed nor affiliated with GitHub — lets you quickly load any GitHub repo in an online hosted Visual Studio Code environment.

Just add 1s after github and press Enter in the browser address bar for any repository you want to read.

Note that this is a *viewer* only, no editing. For that you’ll need to wait on GitHub Codespaces or run VSCode in the cloud yourself.

GitHub1s →