Enjoy The Summer!

Last updated on Jul 18, 2024

Modern Web Weekly #32

👋

Hello there! I'm Danny and this is Modern Web Weekly, your weekly update on what the modern web is capable of, Web Components, and Progressive Web Apps (PWA). I test modern web features and explain them in plain English to make sure you stay up to date.

Ready to enjoy your well-deserved summer break?

So am I! This will be the last edition for now and then Modern Web Weekly will return in September.

👍

I'd like to take this opportunity to thank you for subscribing and supporting me. The list of subscribers has been steadily growing and I'm really happy with all the positive feedback I had the pleasure of receiving. This motivates me to continue testing and writing about exciting new web features!

And speaking of exciting features...

Capturing specific DOM elements

Chromium-based browsers will soon support the Element Capture API that enables web apps to capture (record) specific DOM elements. Just like with screen recording, you run navigator.mediaDevices.getDisplayMedia() to capture the screen and then you use CaptureController to restrict the resulting video stream to a specific DOM element.

This feature is currently behind an origin trial, which means that your web app needs to register for it to enable it. When you register, you receive a token that you add to your web app as a <meta> tag that will enable the feature for the domain your web app is hosted on.

I learned this origin trial was on a break period for a couple of weeks. It has now been enabled again but unfortunately, it doesn't work yet. I trust the Chromium team will fix this soon, but until that time you'll need to enable it manually at chrome://flags/#element-capture.

Since the token for an origin trial is always tied to a specific domain, this is also how you would enable it to test it on your local machine, no need to register a token for localhost for example.

If you don't want to do that, here's a screen recording of the demo at https://whatpwacando.today/element-capture:

Element Capture API demo on What PWA Can Do Today

When you start your camera, you'll see the original video, a monochrome, sepia, and inverted version.
You can then click any of the camera previews to capture them and then you can also click the captured element preview to take a screenshot.

So this API also enables you to take screenshots of specific DOM elements!

Let's take a look at how this works.

We start just like we would if we wanted to record the whole screen with a call to navigator.mediaDevices.getDisplayMedia():

const captureStream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});

What's important here is that we need to pass an options object to getDisplayMedia with preferCurrentTab: true so the user can only select the current tab to capture because the Element Capture API only works for the current browser tab.

We then extract the video track from the returned stream and restrict the track to the element we want:

// select the element we want to capture
const capturedElement = document.querySelector('#captured-element');

// get the video track from the stream returned 
// from `getDisplayMedia`
const [videoTrack] = captureStream.getVideoTracks();

// create the target element we want to restrict
// the video track to
const restrictionTarget = await RestrictionTarget.fromElement(
  capturedElement
);

// restrict the video track to the target
await videoTrack.restrictTo(restrictionTarget);

// set the stream with the restricted video track
// to a <video> element
videoElement.srcObject = captureStream;

// if you want, capture a screenshot of the 
// restricted video track. This way, you can take
// a screenshot of a specific DOM element
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.drawImage(videoElement, 0, 0, videoElement.offsetWidth, videoElement.offsetHeight);

If you want to capture another element you can simply derive another restriction target from it with RestrictionTarget.fromElement and then restrict the video track to that element with another call to restrictTo.

You can also return the video track to its original state with video.restrictTo(null).

That's how easy it is to capture a specific DOM element!

Mastering Web Components is now available as a free version

My web components course Mastering Web Components is now available as a free version as well.

This free version contains the first 5 chapters of the book so you get an idea of what the course is like and if what I write makes any sense at all.

Oh, and until the end of this month July, you get 50% off with the discount code MODERN-WEB-WEEKLY.

Get it here 👇

Mastering Web Components

Mastering Web Components is a course that will take you from beginner to expert in Web Components by teaching you how can create your own reusable Web Components and integrate them into any web app.

In the full, paid version of the course, you will build an image gallery component to apply and test your knowledge of the concepts you have learned.

The course contains many interactive code examples you can study and modify to test and sharpen your skills.

In the free version, you will learn:

how to create and register a Web Component
how to effectively use the lifecycle methods of Web Components
how to encapsulate the HTML and CSS of your Web Component using Shadow DOM
how to extend native HTML elements
how to compose Web Components with user-defined content
how to test Web Components

You get:

107 page PDF
22 interactive code examples

The full version includes everything from the free version and you will also learn:

how to theme and share styling between Web Components
how to integrate Web Components into forms and validate them
how to server-side render Web Components
how to implement data-binding for Web Components
how to compose Web Components using the mixin pattern
how to build Web Components with a library

You get:

257 page PDF
45+ interactive code examples

Become a Web Components expert!

The State of PWAs

Last Thursday, July 11 I had the pleasure of speaking about the current state of PWAs at the Fronteers meetup in Amsterdam.

Due to some technical issues, we were not able to provide a decent recording of the talk so I re-recorded it so you can now watch it on YouTube.

In this talk, I discuss the current state of PWAs in relation to browser and platform support, new and upcoming features, and the political situation with Apple.

You can watch it here:

Link capturing for web apps added to the Dock in macOS Sequoia

The upcoming macOS Sequoia will support link capturing for web apps added to the Dock 🎉

Whenever you click a link that points to the web app, it will open the web app in the Dock instead of in the default browser.

You will need to open the web app at least once for this to work and (of course) this only works outside a browser. If you click a link to the web app from inside a browser it will just open there.

Here's what it looks like: