With most traffic coming from mobile devices and therefore small screens, are there any websites that have put “desktop” styles in a separate file and only load it, if the media query matches?

Something like this?

<link
  href="big-screens.css"
  media="(min-width: 800px)"
>

This would remove render blocking by desktop styles when mobile devices visit the website. They are still being downloaded, but don’t block the time to first paint.

I don’t know any websites that do this yet, but maybe I just haven’t found them?

Just displaying a link for youtube videos in my RSS feeds wasn’t good enough for me. Therefore I also added a fallback image, which tries to get the poster image of the video and displays it inside the link as well.

Let’s see how that looks like:

📺 Youtube video

I’ve noticed that youtube videos in my notes are not displayed in my RSS reader, not even as a link. This is because I didn’t provide a fallback inside the <lite-youtube> web component I’m using to render youtube videos with performance and privacy in mind.

I’ve now added a link inside the web component, that should be rendered in RSS readers as a fallback. Here is a test, that should render a link in RSS readers:

📺 Youtube video

I really enjoyed this talk by Carson Gross, the creator of htmx, about how he marketed his open source project. His insights on handling online criticism are broadly applicable.

📺 Youtube video

I’ve been using the browser console and querySelector to inspect and find certain elements on a page. Today I learned that one can also use XPath in the search field inside the elements tab. It has a different syntax than querySelector, but it can do things that CSS selectors cannot.

For example you can search for all elements with aria attributes with this XPath query:

//[@[starts-with(name(),"aria-")]]

You can find more examples and use cases for XPath in this blog post by Adrian Roselli:

adrianroselli.com/2021/04/xpath-for-in-browser-testing.html

Both Chrome and Firefox support XPath searches when in the DOM view of their dev tools.

This is how you can use any emoji as a favicon. I stumbled upon this code in one of my side projects, which is probably copied from somewhere else. I just wanted to post this here again, so that I don’t forget about it.

<link
  rel="icon"
  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🙂</text></svg>"
/>

TIL: You can only add this single twitter meta tag for enabling large meta images in link previews. At least when I tested it on Discord this single tag was enough to show a bigger image. I didn’t add any other twitter meta tags.

It’s sad that websites need to add proprietary meta tags to improve link previews in other apps.

<meta name="twitter:card" content="summary_large_image" />