Text fragments allow linking to any text on a page, not limited to <a name="anchorname"> anchors or elements with an id="anchorname" attribute.
To achieve this it introduces the special #:~:text=... prefix which browsers recognize and navigate to the text on a page.

https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

The simplest case is to just use textStart:

https://blog.x-way.org/Misc/2024/12/27/Scheduled-Screenshots.html#:~:text=GitHub%20Action

example link

By using the textEnd we can link to a whole section of a text:

https://blog.x-way.org/Misc/2024/12/27/Scheduled-Screenshots.html#:~:text=steps,per%20month

example link

And with prefix- and -suffix we can further control the exact location when there are multiple matches:

https://blog.x-way.org/Misc/2024/12/27/Scheduled-Screenshots.html#:~:text=blog-,screenshots

example link

https://blog.x-way.org/Misc/2024/12/27/Scheduled-Screenshots.html#:~:text=screenshots,-repo

example link

There is also a corresponding CSS pseudo-element which can be used to style the linked to text fragment on a page:

::target-text { background-color: red; }

(via)

Alex explains in this article how to automatically take regular screenshots of their website.
The automation happens with a GitHub Action that uses Playwright to take the screenshots and then stores them in the Git repository.
Alex has made the repo public, thus we can have a look at how this is implemented.

I followed the steps listed in their repo and did setup my own scheduled screenshots repo.
It will now take some screenshots of my blog once per month.

A project for the future will be to leverage the Internet Archive to backfill my repo with blog screenshots of the last 22 years 😅
Thankfully Alex did some pioneering work on this already and wrote two articles which will become handy:

• How to get a list of captures from the Wayback Machine
• How to take a screenshot of a page in the Wayback Machine

In this article Max explains how to build a highlighter marker effect using only CSS.
The result is a nice looking effect to spice up the default highlighting style of the <mark> element.
This is the resulting CSS code from the article (now integrated in the blog here):

mark {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Two nice CSS tricks from Alex:

• Drawing a diagonal banner over the corner of an image
• Making an “under construction” element in pure CSS

ComCom orders: Swisscom must operate zero-settlement peering with Init7

This will cause implications in the industry at home and abroad. The proceedings revealed that Swisscom together with Deutsche Telekom had formed a cartel in order to force payments from content providers. Internet providers have a technical monopoly on access to their end customers and Swisscom acted as a kind of gatekeeper; only those who paid “enough” could send traffic (e.g. video streaming) to their end customers [...].

Commercial tea bags release millions of microplastics when in use.

A UAB research has characterised in detail how polymer-based commercial tea bags release millions of nanoplastics and microplastics when infused. The study shows for the first time the capacity of these particles to be absorbed by human intestinal cells, and are thus able to reach the bloodstream and spread throughout the body.

(via)

In the Pseudoscripting with <noscript> article, James McKee explains a nice trick for writing CSS that detects when Javascript is disabled.
It combines the <noscript> element with a Container Style Query, to provide clearly defined CSS classes that are active/inactive whenever Javascript is enabled/disabled.

I took this as inspiration to make some recently added Javascript-only pages on the blog degrade a bit more gracefully for non-Javascript users.
In the case of the On this day page and the Search page, there is now a message shown explaining that this functionality requires Javascript.
This is done simply with the <noscript> element and works well.

Additionally I used a trick similar to the one from the article to hide the Javascript-only content with CSS on these pages (eg. the search form).
This is achieved with the following CSS class definition which hides elements when Javascript is not enabled.

<noscript>
  <style>
    .js-only { display: none !important; }
  </style>
</noscript>

With this in place, I can now mark all Javascript-only elements with the js-only class.
They are then hidden when someone uses the page with Javascript disabled, and visible for everyone else.

120 Subgenres of EDM (w/ examples)

(via)

The Most Popular Recipes of 2024 from New York Times Cooking.

We’ve published over 1,000 delicious recipes this year. Here are your favorites: microwave chocolate pudding cake, one-pot chicken and rice, peanut butter noodles, taverna salad and more.

(via)

While integrating Opengist to serve code snippets in the blog, I discovered that everytime a snippet is loaded a _csrf cookie is set by Opengist.
This is not very cool, and I've found a way to prevent this using nginx.

Why is this _csrf cookie not cool on embedded code snippets?

1. It is not necessary (as the embedded code snippet does not provide any links/actions to perform on the Opengist instance where CSRF protection would be needed).
2. It sets a third-party cookie for everyone visiting the blog.
3. It breaks caching of the embedded code snippets on browser side (as the cookie is updated on every request).

How did I prevent the _csrf cookie with nginx?

I'm using the following (simplified) nginx reverse proxy config in front of the Opengist docker container.
It has a conditional if section where the headers-more-nginx-module is used to remove the Set-Cookie HTTP header, on the responses for the embedded code snippets.
The if condition is specific to my username and will need to be adjusted to your setup of course.

server {
	server_name gist.x-way.org;

	location / {
		if ( $uri ~* ^/x-way/[0-9a-fA-F]+\.js$ ) {
			more_clear_headers "Set-Cookie";
		}

		proxy_pass http://127.0.0.1:6157;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
	}
}

This is a quite ugly hack. I submitted a pull-request for Opengist to exclude the embedded code snippets from the CSRF middleware.
Let's see where this leads 🤞