Over the last week, I have made several improvements to the way images are loaded on my website. I now have WebP and AVIF versions of the images used in my blog posts. I use the picture element to tell the browser that there are multiple formats available; browsers can then choose to load a format that is compatible. I have also been updating how videos load, too. Now, videos load with a poster attribute which defers downloading a full video in a video tag until the user clicks “play.”
As I have been working on these changes, I have been using the boolean HTML search feature of my blog search engine. This feature allows me to find posts that contain – or do not contain – specific elements. For example, if I want to find all posts that have a video, I can use:
I can then add a keyword if I want to be more specific, like:
This query would show me all posts matching the query “artemis”, ranked by relevance. Only documents that contain a video element would be returned.
Valid attributes for has are a mixture of HTML elements as well as keywords. For example, has:image loads all images; images is more natural for me to type in a search box than img.
With this feature, I have been able to find example blog posts that have features that I am working on so I can test them.
This feature also lets me validate whether a visual issue I have noticed is across multiple posts. For example, I noticed that footnotes were too close together on one blog post. I couldn’t remember which post. I then searched for has:footnote to find posts with footnotes and clicked around until I saw a post that replicated the issue I had noticed. Then, I worked on a CSS fix across my site.
I can also combine attributes, too. I haven’t had a use for this, but it is supported. For example, I could search for all posts that contain an image and a video with has:video has:image – this example could be used for finding posts to use in benchmarking page loading times.
I can search for HTML elements in my code editor, but that also requires navigating to the pages that match my query in a web browser. Thus, I need to switch contexts between my code editor and my browser to validate how different pages appear. But with my site search, I am one click away from seeing a web page. I can do this without being at a code editor.
