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:

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" />