You can follow my Notes using any RSS reader — my personal favorite is Reeder.
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:
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:
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.
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:
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" />