Commit 9b94ee4a authored by Thomas Jensen's avatar Thomas Jensen

minor stuff

parent 2cdef28a
title: "Archives"
description: "Post archives and search." true
displayInList: false
displayInMenu: true
weight: 40
......@@ -12,7 +12,9 @@ tags:
## Why
The last couple of weeks, I've been working on a new design for the website. And by design I mean finding, and modifying, a new Hugo theme. The reason I set out on this redesign journey was to peel away everything that didn't emphasize the content, and reading experience. I wanted a clean, minimalistic design, where the content was in focus.
{{< figure "screenshot_full_page" "Fill" "800x600 top" />}}
{{< figure "screenshot_full_page" "Fill" "800x600 top" >}}
This is how the site used to look, with the old design.
{{< /figure >}}
## Preparations
I first started to simplify my old site, to make the transition easier. The biggest change I did was to simplify a rather complicated build process. I used a combination of Gulp and Bash scripts to build assets, resize images, upload videos to a separate CDN service before finally pushing the deployment.
......@@ -72,12 +74,16 @@ As my goal was to simplify and improve the reading experience, there was some el
### Inline photo galleries
The old design allowed me to inline photo galleries in my posts. There were some advantages to this; I would put more images into the text without them taking up too much space. But it felt disruptive to the reading experience, as the images were too small to really provide much detail, the user had to click them — interrupting and navigating away from the post itself. Instead I plan on using bigger images and just drop any that doesn't provide any valuable context. I feel this will allow for a more continous reading experience :)
{{< figure "screenshot_inline_gallery" "Resize" 600x />}}
{{< figure "screenshot_inline_gallery" "Resize" 600x >}}
Two inline galleries in post, each with three images.
{{< /figure >}}
### Algolia site search
The site search in the old design was a "search as you type" service from Algolia, which worked quite well. But I felt it introduced a bit of complexity, I had to generate and push a json index to Algolia each time I deployed. It was just one more thing that I had to test and keep updated, which I forgot on a couple of occations — causing it to return bad, or incomplete search results. Plus it was an external service, which I really like to keep to a minumum, where I can. Instead I just added a DuckDuckGo search field on the archives page, it does navigate away from the site, and onto to show the results, but I can live with that.
{{< figure "screenshot_search" "Resize" 600x />}}
{{< figure "screenshot_search" "Resize" 600x >}}
The old search page.
{{< /figure >}}
### Libraries
......@@ -111,13 +117,21 @@ So instead I rewrote the shortcode to take the figure caption as an inner parame
## Lazy loading images
I also changed the way I lazy load images in the posts. On the old design I created a very small and low quality images, that I blured up using the brilliant lazysizes library. Reading about lazy loading online I found that some (a lot?) of people find that annoying, since you might have to wait a bit for the images to load on a slow or high latency connection.
{{< figure "lq_before" "Keep" />}}
{{< figure "lq_before" "Keep" >}}
Previous low quality placeholder; 887 B, dimentions reduced by factor of 10.
{{< /figure >}}
I changed that to use a much better low quality image — the correct size and quality set to 15, and no blur up. This increses the initial page weight, but I feel it provides a much better experience. The image is still plenty good enough to provide value, and will be replaced with a high quality image when loaded. Meaning that the user doesn't have to wait for the images to load when scrolling.
{{< figure "lq_now" "Keep" />}}
{{< figure "lq_now" "Keep" >}}
Current low quality placeholder; 20.2 K, dimentions kept same as high quality resized image.
{{< /figure >}}
{{< figure "IMG_20181105_193602" "Fill" "800x400 center" />}}
{{< figure "IMG_20181105_193602" "Fill" "800x400 center" >}}
High quality resized image; 73.6 K.
{{< /figure >}}
When you click the image, the original image file is shown in a light box. In this case 574 K and dimenstion 1600x1200.
I'll write more about how I've implemented lazyloading, image processing and multiple image sizes in a future post.
title: "Projects"
draft: true
discussionId: 1559338920
#- WIP
I like to build electronics things, and software.
## Electronics
I've been making electronics modules and projects since I was in primary school. The complexity have increased over the years, and so have the availability of affordable, microcontrollers and single board computers like the Arduino and Raspberry Pi.
### Projects by tag
* [Arduino]({{< ref "/tags/arduino" >}})
* [Lighting]({{< ref "/tags/lighting" >}})
* [Wemos]({{< ref "/tags/wemos" >}})
## Software
Like most people I push my projects to [Github](
### Active projects
* [xpb](
* Something something pastebin, and URL-shortener.
* [uimg](
* Micro self-hosted image dump service with CLI upload only.
* [powerwalker-python-lib](
* Python3 library for the PowerWalker PDU RC16 and ATS devices.
title: "Homelab"
See the [homelab page]({{< ref "/homelab" >}}) for an overview of my setup.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment