paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit b63acb735d99709e0b181f93c9c9de25e4964d55
parent aee01f580279170610ca77a865939a9e25a3a085
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Wed,  8 Jul 2020 00:12:19 -0400

Add missing blog page

Diffstat:
Apages/blog/improving-blog-searching.md | 87+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 87 insertions(+), 0 deletions(-)

diff --git a/pages/blog/improving-blog-searching.md b/pages/blog/improving-blog-searching.md @@ -0,0 +1,87 @@ +## Improving Blog Searching + +[//]: # "I received a few good suggestions in response to my recent blog post about setting up search for my blog. In this post, I check out the proposed improvements and detail which one I chose and why." + +[//]: # "main.min.css" + +[//]: # + +<div class="byline"> +<b>Written By:</b> Jake Bauer | + <b>Posted:</b> 2020-07-06 | + <b>Last Updated:</b> 2020-07-06 +</div> + +A few days ago I posted about [the really simple solution I came up with for +searching on my blog](https://www.paritybit.ca/blog/adding-search-to-my-blog). +Since then, I've had [a few good +replies](https://social.paritybit.ca/web/statuses/104451892409302622) about ways +I could make it better. One suggestion in particular fit with the themes and +goals of this website so I went ahead and implemented it to improve the search +experience on my site. + +### Evaluating Other Suggestions + +First, let's talk about some of the other suggestions made. There was the +suggestion from Amolith of [secluded.site](https://secluded.site) that I use a +tiny, JavaScript-less, static search engine called [Tiny +Search](https://endler.dev/2019/tinysearch/) and the suggestion from Kev Quirk +of [kevq.uk](https://kevq.uk) who mentioned that DuckDuckGo provides [an +embeddable search bar](https://duckduckgo.com/search_box) in the form of an +iframe. Both were great suggestions, but let's look at why I think they wouldn't +work for my site. + +Tiny Search is a really clever and interesting project, but it achieves its +functionality through WebAssembly. WebAssembly is a new web technology created +to allow web-native apps to run far faster and far more efficiently than if they +were written in JavaScript. Unfortunately, this means that basically only the +three big browser engines support it: Gecko (Firefox), Blink (Chrome and its +derivatives), and WebKit (Safari and its derivatives). That means anybody +browsing my site with an alternative browser such as Lynx or w3m won't be able +to make use of it. I could provide a fallback, but the other reason why I didn't +choose it is because it advertises itself as being between "50kB-100kB gzipped" +which is very large when put in context with the average size of one of my pages +being 10-20kB for an entire page, or ~6-7kB for just the HTML. + +I played around with Kev's suggestion of the DuckDuckGo iframe and it worked +quite well and was very easy to generate and add to my page. However, it had the +same issues as Tiny Search where it would balloon the size of the blog page by +up to 3x its original size, and it would make 3 third-party requests to load in +the necessary assets. Also, iframes are not supported by Lynx or w3m but it was +trivial to add a fallback for those browsers. The main issues that I had with +this method were the third party requests and large size of the loaded assets. + +To summarize, I didn't go with the above two suggestions because of the use of +unsupported technology in browsers which I target and because of the size of the +assets which would be required to make them functional. Both are trivial in the +context of many contemporary sites, but I like to keep my site as slim as +possible and I like to maintain compatibility with alternative browsers. + +### The Solution I Chose + +However, [Oscar Benedito](https://oscarbenedito.com/) suggested something which +caught my eye and which I didn't even know was possible: a form that makes a +request to DuckDuckGo. This solution uses technology that has been supported in +every web browser for decades and adds a mere 300 bytes to the size of the page +since it's just a plain HTML form. This is what I have which now powers my +site's search: + +```html +<form action="https://duckduckgo.com/" method="get"> + <input name="sites" type="hidden" value="www.paritybit.ca/blog"> + <input aria-label="Search this blog." name="q" type="text" + placeholder="Search This Blog"> + <button aria-label="Submit search query.">&#128270;</button> +</form> +``` + +That's it! Instead of a link to a DuckDuckGo search where users would have to +type their search query in after clicking it, users can now type their query +into this form and they will be sent to a DuckDuckGo page with the results. This +still improves the UX while keeping the page small and using features supported +in browsers like Lynx and w3m. + +_This is my sixty-second post for the +[#100DaysToOffload](https://social.paritybit.ca/tags/100DaysToOffload) +challenge. You can learn more about this challenge over at +[https://100daystooffload.com](https://100daystooffload.com)._