New in Chrome 90

Get your 90s vibe on, as Pete LePage has took the version number 90 to the next level there … BRILLIANT! 🤩

Chrome 90 is rolling out now! There’s a new value for the CSS overflow property. The Feature Policy API has been renamed to Permission Policy. And there’s a new way to implement and use Shadow DOM directly in HTML. Plus there’s plenty more.

~

The Declarative Shadow DOM seems like a very nice addition, but will to have to wrap my head around not using <shadow-root /> for it though — it’s <template shadowroot="open" /> we need to use. You can read the reasoning behind this decision in the explainer.

~

I’ve tweeted about overflow: clip; before. It can be compared to overflow: hidden;, except for the fact that it will never ever create a scrollcontainer (not even one that can be moved programmatically, through JavaScript).

~

New in Chrome 90 →

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)

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.

SVG Explained in 100 Seconds

Nice little video explaining SVGs and how the d attribute of paths work.

Building a Settings Component

In this episode of GUI Challenges, Adam Argyle builds a Settings Component with sliders and checkboxes.

In this post I want to share thinking on building a Settings component for the web that is responsive, supports multiple device inputs, and works across browsers.

Tons of CSS-knowledge in there:

Building a Settings Component (Demo) →Building a Settings Component (Writeup) →

Just-In-Time: The Next Generation of Tailwind CSS

Adam Wathan from Tailwind:

One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even the browser itself will comfortably tolerate.

Today I’m super excited to share a new project we’ve been working on that makes this constraint a thing of the past: a just-in-time compiler for Tailwind CSS.

If you’re using Tailwind, then the JIT Compiler — Sherlocked from Windi CSS (ref) — will be a very welcome gift. Using it you can basically drop all variants from your config, improve build-times and filesize.

Today our intern Elian integrated @tailwindcss/jit into a Tailwind-based project we’re working on. Compile times dropped by 60% (from ±25s to ±10s) and filesize dropped by 90% (from 918kB to 84kB), as detailed on his blog.

😱 In case you think I’ve switched over to Tailwind: No, I’m still no fan of Tailwind and — unless you use it with @apply — would not recommend using it. On the other hand I do see that it allows one to iterate quickly while prototyping and that is a very welcome gift for developers who are somewhat familiar with CSS. If that floats your boat, then that’s fine. If it doesn’t, then that’s fine too 🙂

However, if one were to ask me to choose between the two, I will always recommend one to learn CSS. That knowledge is relevant today, tomorrow, and still will be 10 years from now, when Tailwind is long gone.

Scroll Linked Animations With NO JAVASCRIPT!?

Building further upon my posts digging into Scroll-Linked Animations, Gary Simon created this video recreating a basic Scroll-Linked Animation that animates an image as you scroll down the page.

Good video if you’re looking for a quick intro. Two minor remarks though:

  1. Instead of speeding up the time-range it’s better to tweak the scroll-offsets. Even more better is to use Element-Based Offsets.
  2. That flicker Gary talks about is not an issue with 3D transforms or anything like that, but a bug in the current (experimental) implementation.

💁‍♂️ Here are the links to the original posts again, in case you want to dig deeper into the subject:

Scrollycoding – A New Way to Write Code Walkthroughs

The past few months Rodrigo Pombo has been working on Code Hike, a new way to write code walkthroughs for blogs or docs. Recently he shared this preview of the step scroller (“scrollycoding”) component.

Looks great!

Scrollycoding Demo →

Create Escape, Behind the Scenes

Recently Banksy put up a new work on the walls of a defunct prison in England. The work depicts a prisoner escaping, dangling off the wall using a long strand of paper emerging from a typewriter, instead of the usual bedsheets.

Taking footage and audio from Bob Ross’ The Joy of Painting they also released a “behind the scenes” video to go along with it:

🙂

New in Chrome 89

Pete LePage walks us through the additions in Chrome 89.

🤩 I’m honored to have my WebHID Daft Punk Sound Board be featured in the “WebHID, WebNFC, and Web Serial section there.

Let’s hope other browser vendors follow soon with top level await, as Chromium is the only browser to support it at the time of writing.

New in Chrome 89 →