Git commands, bookmarks and new HTML elements

New HTML elements

Here's something that I didn't know: there are some new HTML elements working their way into browsers (Chrome). These come from a new Page-Embedded Permission Control initiative.

The <geolocation> element

The first of these is the <geolocation> element. From Chrome 144, you can use this element to move away from script-triggered permission prompts toward a declarative, user-action-oriented experience.

From the blog post:

The <geolocation> element is the latest evolution of the Page-Embedded Permission Control initiative, where it initially was proposed as a generic <permission> element with a type attribute (see the original explainer). The value of the type attribute (for example, "geolocation") would determine the type of the requested permission. For example, the initial proposal includes values such as camera, microphone, and geolocation.

The idea is to take away a lot of the boilerplate of invoking the permission prompt, listening for the user's choice, and then acting upon it.

Instead, you just need two things. The first is the element somewhere in your HTML, such as:

1<geolocation
2  onlocation="handleLocation(event)"
3  autolocate
4  accuracymode="precise">
5</geolocation>

And then some JavaScript to listen for the onlocation event fired from the user interacting with the element:

1function handleLocation(event) {
2  // Directly access the GeolocationPosition object on the element
3  if (event.target.position) {
4    const { latitude, longitude } = event.target.position.coords;
5    console.log("Location retrieved:", latitude, longitude);
6  } else if (event.target.error) {
7    console.error("Error:", event.target.error.message);
8  }
9}

Much simpler! Read the rest of the blog post to find out more.

The <usermedia> element

Available from Chrome 151, this element marks the next phase of the transition from generic permission requests to targeted and functional controls for accessing camera and microphone streams.

The idea, again, is that you can reduce boilerplate code. The following HTML:

1<usermedia id="media-ctrl">
2  <button>Enable camera and microphone</button>
3</usermedia>

Coupled with the following JavaScript:

1const el = document.getElementById('media-ctrl');
2
3// Specify hardware preferences before user interaction:
4el.setConstraints({
5    video: { width: 1280, height: 720 },
6    audio: { echoCancellation: true }
7});
8
9// Handle successful stream acquisition:
10el.addEventListener('stream', () => {
11  videoPreview.srcObject = el.stream;
12});
13
14// Handle stream acquisition failure:
15el.addEventListener('error', () => {
16  console.error(`Access failed: ${el.error?.name}`);
17});
18
19// Handle prompt cancellation or dismissal:
20el.addEventListener('cancel', () => {
21  console.log('Permission prompt was dismissed by the user.');
22});

Will give you access to the user's camera and microphone (as long as they have accepted access via the prompt).

Styling Constraints

One thing to be aware of is that there are some styling restraints with these new elements to prevent 'deceptive design patterns' and maintain user trust. They are:

• Legibility: The browser checks text and background colors for sufficient contrast (at least 3:1) to ensure the request is always readable. You must set the alpha channel (opacity) to 1 to prevent the element from being deceptively transparent.
• Sizing and spacing: The browser enforces minimum and maximum bounds for width, height, and font-size. It disables negative margins or outline offsets to prevent the element from being visually obscured.
• Visual integrity: The browser limits distorting effects. For example, transform supports only 2D translations and proportional scaling.
• CSS pseudo-classes: The element supports state-based styling, such as :granted (which activates once permission is active and the stream is acquired), as well as standard interaction states like :hover and :active.

Karakeep

If you're anything like me, you have A LOT of bookmarks/links/tabs all over the place. I've never been particularly good at organisation, so keeping handy links handy is not my thing.

I've recently been looking at a few options for how to solve this problem. At the moment, I'm using a Chrome extension called Raindrop.io, which allows you to organise and tag bookmarks within the browser in a much better way than just using Chrome's bookmark manager.

However, it's still not a great fit for me because I forget it's there and still struggle to find and organise things. So my next attempt is using Karakeep, which I've seen recommended everywhere people ask about bookmarks.

It has a pricing tier where you only get 10 bookmarks for free. Then there's a slight jump to $4 per month for 50,000. Not bad.

However, what I like about it is that you can 'self-host' it by cloning the Git repository and running it locally for free! It's slightly complex because it requires a Docker container. But once that was started, everything worked really well.

It took a good hour or so to import my bookmarks from Chrome. However, now I've got a 'web app' that holds all my bookmarks.

The only thing that I feel is missing is a companion tool within the browser to quickly add things to it. At the moment, I have to manually paste links. Not the end of the world.

jh3y's spot

For Jh3y's spot this week, I really like this example of using position: sticky coupled with animation-timeline to make an effective 'slogan generator', for want of a better term.

However, the bit I really like is the addition of the scrollbar changing colour to match the text that is currently highlighted! I don't think I've ever seen that before. The things we can do with CSS today.

That's all for today 😃