DEV Community: Luke Harris

PurgeCSS with Hugo

Luke Harris — Sat, 29 Oct 2022 17:59:15 +0000

Over the past several months I slowly rebuilt the theme for my site with Pico.css, with the goal of eliminating the div soup I had. This past week, my site stopped building altogether because of a dependency issue¹, and I polished up the theme last night for deployment.

One win from this rebuild is that I finally got PurgeCSS and cssnano working with Hugo as part of my build pipeline. Although the savings were small, in the range of 1-2kb after Brotli compression, it was bugging me that it wasn’t working.

The first insight was finding out I had Hugo’s .Resources.PostProcess and .Resources.PostCSS functions flipped in my head — the correct usage is to run .Resources.PostCSS on your input from Hugo Pipes, and then tag the output with .Resources.PostProcess.

Tagging the output with PostProcess tells Hugo not to run that file through PostCSS until after it’s built the pages, which is important because PurgeCSS runs through the HTML (or hugo_stats.json) to figure out which CSS selectors are used on the pages, and which ones it can get rid of.

The second insight was that Hugo’s built-in selector detector (new band name) wasn’t catching the conditional selectors used in Pico, like :where and :is, resulting in significant savings in file size while leaving my site looking like it drove the wrong lane down a dirt road.

To fix that, I stopped using hugo_stats.json for PurgeCSS and used the output folder of HTML files instead. Then I added a whitelist to my postcss.config.js based on Tom’s post. Here’s the file in full:

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
    plugins: [
        require("cssnano"),
        purgecss({
            content: ['./public/**/*.html'],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            safelist: [':hover', ':focus', 'button', 'button:focus', ':where', ':is']
        })
    ]
};

And the Hugo partial for processing the SCSS:

{{ $tocss := dict "enableSourceMap" true }}
{{ if hugo.IsProduction }}
    {{ $tocss := dict "enableSourceMap" false "output" "compressed" }}
{{ end }}
{{ $styles := resources.Get "scss/styles.scss" | resources.ToCSS $tocss }}
{{ if not hugo.IsProduction }}
    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
{{ end }}
{{ if hugo.IsProduction }}
    {{ $css := $styles | minify | fingerprint | postCSS | resources.PostProcess }}
    <link href="{{ $css.RelPermalink }}" rel="stylesheet" />
{{ end }}

Now the only issue left to solve is figuring out why PostCSS doesn’t work in GitHub Actions.

There’s a few nitpicks I have with Pico.css, I might swap it out for Simple.css now that my site uses semantic HTML. And I’m planning yet another redesign with vanilla CSS — I’ve built two sites that way recently and it’s been wonderful writing plain CSS again, with new features like calc() and variables.

Bootstrap 5 now uses SASS features that are incompatible with Hugo’s SASS processor, and I had no luck pinning the working version. ↩︎

Using variables in Jinja include statements

Luke Harris — Sat, 22 Oct 2022 21:47:26 +0000

I’m working on a project that uses Pelican as the static site generator. Pelican uses the Jinja templating language, which looks similar to Liquid and Nunjucks.

Inside a for loop, I have a set of SVGs that I need to match to a variable in the frontmatter for each page, with the SVG code itself in the HTML output. I can’t use <img> here, because I need to set the fill color for the SVGs with CSS.

I tried to use the include tag like this:

{%- include “icons/{{ variable }}.svg” -%}

…which didn’t work, and led to a lot of time spent trying other methods, like writing a macro for each icon with an if statement chain worthy of TheDailyWTF, dictionary comparison, and other complicated nonsense.

After reading the docs for the 10th time, I happened to scroll down to the section on Other Operators:

~ (tilde) Converts all operands into strings and concatenates them.

{{ "Hello " ~ name ~ "!" }} would return (assuming name is set to ‘John’) Hello John!.

And came up with this elegant solution:

{%- include "icons/"~ variable ~".svg" ignore missing -%}

Boom!

ignore missing tells the templating engine to continue when variable isn’t set.

Here’s the full loop:

{% for p in pages %}
  <li>
    <a href="{{ SITEURL }}/{{ p.url }}">
      {%- include "icons/"~ p.icon ~".svg" ignore missing -%}
      {{ p.title }}
    </a>
  </li>
{% endfor %}

Setting Up Dynatrace

Luke Harris — Fri, 30 Sep 2022 22:27:04 +0000

I’m learning more about DevOps stuff, so I’ve been looking into monitoring solutions used in large enterprise environments.

Dynatrace is an “all-in-one intelligence platform”, which is marketing-speak for monitoring, analytics, and reporting, though it does a bit more than that. Enterprises use it to monitor system load statistics from servers, containers, and cloud platforms, as well as individual application monitoring, tracing, network performance, and continuous delivery testing. It supports piping in metrics from other providers, too.

Once set up, metrics are available in one place to build dashboards, analyze with queries, generate reports, and other businessy things.

The documentation for getting started could be better, so I’m writing down my setup process for testing and some cool things you can do.

Setup

The first thing you’ll need to do is sign up for the free trial. It’s 14-day, no card required, so you won’t get stuck with a surprise enterprise-level bill for monitoring your 2-player Factorio server.

For testing, I recommend the virtual machine route, or Docker container.

Install in a VM

I installed the Dynatrace OneAgent on an Ubuntu VM that I spun up using Multipass. If you follow the same route I did and you have an M1 Mac, make sure you use the ARM (AARCH64) version of OneAgent, otherwise it won’t install.

Once you’ve got your VM or dumpster-sourced Linux box running, log in to your Dynatrace account. If the panel doesn’t automatically load the “Deploy Dynatrace” page, you’re about to discover the UX wonder called “The Dynatrace Menu”. Click the hamburger icon at the top left of the page, and then head to Favorites → Deploy Dynatrace :

Once you’re there, click the Start installation button in the bottom right corner.
On the Install OneAgent page, select the Linux platform, and you’ll be presented with this page:

You’ll need to generate a PaaS token, which you can do by clicking the Create token button on the right.
Once you have a PasS token, the installer page will give you three commands to copy and paste into your VM’s shell, in order. The first one downloads the installer, the second one verifies the signature, and the last one runs the installer. You’ll need to run the last one as root.

When it’s done installing, your shell should look similar to mine:

You can verify OneAgent is running with systemctl status oneagent.service:

Viewing host performance

Back to your browser, click the Show deployment status button on the lower right of the page, and after a small delay your VM will show up on the page:

Click your host to head over to the details page, where you’ll see some quick stats like CPU, memory usage, and availability.

Note: If you see the “improved version” banner at the top of the page, enable it for the new panel design. Now the page should look like this:

Now you’ve got some pretty graphs! My favorite part though is the process analysis area, which saves me a trip to htop:

You can also dive into a single process and see its usage history:

Working with dashboards

Now imagine you’ve got several hundred of these VMs running (I recommend not imagining the bill). Going to each page is inefficient at best, so let’s make a dashboard to view infrastructure status at a glance.

Create a new dashboard

Open the Dynatrace Menu (sidebar on the left)
Navigate to Favorites → Dashboards

Above the dashboards table, click the Create dashboard button
Enter a dashboard name
Click Create

Now you should have a page like this:

Let’s add some widgets! The official tutorial recommends host health and CPU usage, so let’s start with those.

In the sidebar on the right, find the Host health widget
Drag and drop anywhere on the dot matrix

By default, this shows a hexagon per host. You can get more advanced with it and have multiple widgets for different groups, but I won’t get into that right now.

I added some network widgets, so now my dashboard looks like this:

We can add CPU usage dashboard widgets for individual hosts, so let’s add one now.

Navigate to Infrastructure → Hosts
Open the host we set up earlier
Make sure you’re using the new dashboard, as recommended earlier
In the Host performance group, find CPU usage , and click the three dot (•••) button to open the menu
Click Pin to dashboard , and choose the dashboard we created earlier

Now click the Open dashboard button to view the new CPU widget:

Advanced widgets

Let’s add some widgets for service-level objective (SLO) monitoring and server response time.

For the SLO widget:

Find and add the Service-level objective widget to the dashboard

By default there are no SLOs created yet, so let’s go define one.

Using the Dynatrace Menu, navigate to Cloud Automation → Service-level objectives

Since our test VM has no services running yet, let’s manually configure an SLO.

Click Configure SLOs
Click Add new SLO
Give the SLO a name
For the metric expression field, use builtin:host.availability
Click Save changes in the floating modal on the bottom of the screen

Now we need to hook up our SLO widget on the dashboard to the SLO we just created.

On the dashboard, click the dropdown chevron on the SLO widget and click Edit tile
In the sidebar on the right, select the SLO we just created:

Turn off Custom timeframe , otherwise the default of one week will reflect poorly on our young VM
Click Done

Now we can keep an eye on how well we’re hitting our SLO:

Wow, we’re failing to hit our availability metrics. The default timeframe is 7 days though, and our VM is less than an hour old at this point, so let’s adjust the timeframe: At the top right of the page, after the green Deploy Dynatrace button, adjust the timeframe to Last 30 minutes.

There we go.

Monitoring a container

Dynatrace automatically detects new Docker containers and makes them available for monitoring. Let’s spin up a WordPress container.

Install Docker in your VM with sudo apt install docker
Add your user to the docker group:
1. sudo usermod -a -G docker luke
2. newgrp docker
Pull the WordPress image: docker pull wordpress
Run the container: docker run --name super-hexablog -d wordpress

To view stats about the container in Dynatrace, wait about 2 minutes, and then head over to Infrastructure → Containers :

Clicking our wordpress container takes us to a performance metrics page:

Setting up problem alerting

I want to get notified when my web server crashes, so let’s set up some basic problem alerting.

Head to Infrastructure → Technologies → Apache HTTP Server
Click the Settings button
Click Availability monitoring in the sidebar
Enable Process group availability monitoring
Under Open a new problem , select If any process becomes unavailable

And I’d like to get emailed when things catch on fire:

Navigate to Manage → Settings → Integration → Problem notifications
Click Add notification
Under Notification type , select Email
Give it a name
Click Save changes in the floating modal at the bottom of the page

Let’s test it out! In our VM, run docker stop super-hexablog. Within about a minute, you should see a red notification at the top of the page. Clicking it takes you to the Problems view:

You can also drill down into problems and see what Dynatrace thinks is the root cause:

Conclusion

I really like how the Dynatrace agent can detect new things on a host with no configuration needed. And it’s easy to go from a bird’s-eye view of your entire fleet to analyzing the details of an individual process.

I plan to look at Datadog next. Prometheus + Grafana looks like a great open source option, I’m interested in seeing how they all compare. I’ve seen PromGraf used a lot for homelab setups.

Reply via email

Interstitial Journaling

Luke Harris — Fri, 19 Aug 2022 22:58:34 +0000

For the last 30 days, I have been writing time-stamped lists of thoughts and ideas into a note for the day. I’ve noticed a big improvement in my mood and focus, and I spend less time trying to pick up where I left off.

Productivity enthusiasts recommend writing a journal entry, or daily note, every day. Some apps, like Logseq, are built around this idea, and Obsidian (the one I use) has a core plugin for this.

However, a daily note in the style of a journal entry at the end of the day didn’t work for me. I often missed days, or struggled to recall the events of the day. I switched to a method called interstitial journaling, and I’ve been able to stick with it for a month so far, which is huge!

The idea

My daily note starts out with a list of goals I want to get done today, not necessarily everything on my todo list for the day. Just big ticket items or things that would make a huge difference in my mood if I got them knocked out today.

Then the rest of the note is a bullet-point list, with each list item starting with the current time.¹ I write about whatever I’m feeling, what I’m working on right now or think I should be working on, random thoughts, references to other notes, etc. I don’t worry about wording or spelling; it’s just a place to offload.

These notes get rather long, so to help keep me on task, I put the daily goals underneath the notes. That way they’re always visible.

Notes

03:09 writing a blog post on interstitial journaling

03:15 wow it’s after 0300, why am I still awake

Goals

Finish up post on interstitial journaling

It’s important to note, is a phrase with four words. You don’t have to use a PKM app like Obsidian to take these notes, you can use anything at your disposal. Text file, a crumpled back-pocket notepad, napkin, body tattoo—these all work.

Where apps like Obsidian come in handy is the ability to link to other notes. So when I’m writing down thoughts about a project I’m working on, I add a reference to a note for that project. Same for software I’m thinking about, blog posts I’m writing, and people.

These daily notes then show up as backlinks in Obsidian, and part of the local graph, so you can go back and look at your thoughts or events about a specific subject. I keep the backlinks and local graph as a sidebar in Obsidian, here’s what this blog post looks like:

Results

It’s helped me stay on task and resume where I left off when I return to my desk. I found myself exploring fewer rabbit holes, because writing down a brief thought about it is enough most of the time. And at the end of the day when I feel like I haven’t gotten much done, I can squash that feeling by reading through the day’s events and helping me realize, actually, I did a lot.

Another way to think about it: it’s like live-tweeting into a note. Like when I used to tweet 100+ times a day in 2012.

A few of these daily notes are huge—the first day’s note had roughly 1,500 words and 8,000 characters. There’s been several more that have reached 1,200+ words, but my average daily note is around 400-600 words. Similar to my blog’s average word count.

Anyway, I recommend giving interstitial journaling a shot! And I would love to hear how it went for you.

Obsidian makes this easy with a keyboard shortcut to insert the current time ↩︎

Reply via email

Measuring terminal latency

Luke Harris — Wed, 06 Jul 2022 18:01:37 +0000

Summary

Out of the six terminal apps I tested on macOS, kitty has the lowest input latency at 29.2ms. Terminal.app and WezTerm follow closely behind, and kitty has a small lead over Alacritty and iTerm2. When tuned, kitty is twice as fast as the latter two, and tied with Sublime Text.

Reason

I am using the Ayu theme for fish and Vim. When installing it, I found out that Terminal.app doesn’t support 24-bit color, which led me on a wild rabbit hole of discovery for a new terminal emulator that supported 24-bit color and didn’t suck.

I ended up with 3 emulators that I liked: WezTerm, iTerm2, and kitty. Unable to pick between them, I decided to benchmark their input latency to aid my decision-making, though I’m still not sure what to use. I’ll come back to that later in the post.

Method

I used Is It Snappy? (IIS) for iOS to take slow-motion videos of the screen while pressing keys on my keyboard. I took 2-3 videos of each app and selected input/output markers in IIS. Some of the videos had some impossible delays, so I had filter out the bad ones and use the data that was closer to what I was expecting.

For example, Terminal.app showed a whopping 800ms delay during my first measurement, but later measurements were within a 10ms deviation of the result portrayed here. I think it’s because it was hard to see when the key was fully pressed.

When setting the output marker in IIS, I waited for the screen to completely finish drawing the typed character and the new position of the cursor, to account for input latency and pixel response time.

Because of these variables, and other things unique to my setup, this data is not accurate. It’s close enough for my use, but I encourage you to take your own measurements.

When setting things up for testing, I used the same setup I would use every day, which means custom fonts, themes, and editor plugins. I’m not trying to find the fastest vanilla terminal, I’m trying to find the best balance of performance and features.

I set the size of the terminals at 90x30 columns/rows, and I placed them as close to the vertical middle of the display as possible. Some of the terminals had custom fonts and icons loaded, such as Meslo in Terminal.app, and JetBrains Mono in the others. WezTerm has its own icon glyph set. I added Meslo as a backup font to iTerm2 to support all the icons my CLI apps use. Font ligatures are on by default in WezTerm, but disabled in iTerm2.

I tuned kitty’s performance and ran a separate test, labeled “ kitty - unlimited ”. These are the settings I used, from the docs:

1# 150~ FPS for MBP display (untested)
2repaint_delay 8
3
4# Remove artificial input delay
5input_delay 0
6
7# turn off vsync
8sync_to_monitor no

The bulk of my time spent in the terminal is text editing, so each terminal in the test ran Vim. I also tested the graphical text editors I have installed, as I was curious to see if Vim could beat Sublime Text in input latency.

Specs

I’m running macOS 12.4 Monterey on a 2021 MacBook Pro with an M1 Pro CPU and 16GB of RAM. It sits in clamshell mode while hooked up to two 4k 60Hz monitors over USB-C DisplayPort. My keyboard is a HHKB Pro 2.

Estimated default latencies:

Device	Input latency (ms)	Response time (ms)
LG 27UL500-W	16	5
HHKB Pro 2	20

I have no way to verify the above numbers, they’re based on a couple sources online, links below. It takes 16ms to draw a full frame on a 4k 60hz display from top to bottom, and things in the exact vertical middle of the display update in 8ms.

I bypassed my USB hub and connected my keyboard directly to the MBP with no discernible difference in results.

Apps tested

Terminal emulators

Terminal.app 2.12.7
WezTerm 20220624
Alacritty 0.10.1
iTerm2 3.4.16
kitty 0.25.2
cool-retro-term - I threw this one in for kicks

Text editors

Sublime Text 4126
VS Code 1.68.1
Typora 1.3.7
Vim 9.0

Results

Terminals

Terminal	Latency (ms)
kitty - unlimited	29.2
kitty	37.5
Terminal.app	45.4
WezTerm	45.8
alacritty	57.9
iTerm2 GPU	62.5
iTerm2	87.5
cool-retro-term	125.0

Editors

App	Latency (ms)
Sublime Text	29.2
VS Code	62.5
Typora	66.7

Combined

App	Latency (ms)
Sublime Text	29.2
kitty - unlimited	29.2
kitty	37.5
Terminal.app	45.4
WezTerm	45.8
alacritty	57.9
VS Code	62.5
iTerm2 GPU	62.5
Typora	66.7
iTerm2	87.5
cool-retro-term	125.0

Conclusion

I’m impressed with how fast kitty is, it’s tied with Sublime Text on input latency while running Vim.

iTerm2’s GPU latency was something I was curious about, as most of the benchmarks I found made no mention of it. While it’s behind the rest of the pack, its features are strongly growing on me. It’s a lot more user friendly and works better on macOS than the others. The keyboard shortcut to restore a saved window layout is so good, Copy Mode is convenient, and there’s a minimum contrast setting for colors that I wish more terminals had. And there’s a visual drag-and-drop interface for panes so I don’t have to remember the arcane key combo on other terminals.

WezTerm was the first alternative I settled on – for a few days. It supports font ligatures and extra glyphs out of the box, which enables you to use any font you like. It supports panes, and has its own version of iTerm2’s Copy Mode. And it’s fast, scoring just behind kitty and on par with Terminal.app in my tests. It has trouble making some URLs clickable though, and you can’t use the mouse to drag out tabs into new windows like Terminal.app and iTerm2. Definitely one to keep an eye on.

Alacritty is meant to be used with a multiplexer like tmux for tabs and panes, and opening new windows means more Alacritty icons in your dock. Fonts are thick on macOS, and it seems the config setting to fix that has no effect. Latency in my tests was roughly 5ms less than iTerm2, so if given the false dilemma, I’d use iTerm2.

Decision

I’m going to use iTerm2 for a week and see how it goes. Here’s a pic of the family running VisiData:

Clockwise from top left: Alacritty, WezTerm, iTerm2, Terminal, kitty, cool-retro-term

Coding fonts comparison

Luke Harris — Mon, 16 May 2022 04:07:23 +0000

Coding Fonts

Following CSS Tricks’s acquisition by Digital Ocean, it seems some projects on their domain have had their DNS entries removed, including their handy Coding Fonts comparison site.

Fortunately, the site’s source is on GitHub, and I forked it under the MIT license and put it up on CloudFlare Pages. You can view the new site here.

While the code is under the MIT license, the CSS Tricks logo and brand is not, so I removed them to avoid potential issues there, while still acknowledging Chris Coyier’s work. I’m maintaining this for my own personal use, but you are free to use it as well, and open PRs with new fonts or fixes.

Some fonts don’t work, and I think it’s due to missing external stylesheets provided by font sellers for licensing reasons. The non-working fonts include:

Hasklig
Monoid
Iosevka
JuliaMono
Menlo

At some point I will update the site’s packages or rebuild it in Hugo; it currently uses a year-old version of 11ty.

My new preferred coding font

I’ve been a religious Hack user since it came out in 2015, though I also like Cascadia Code, Menlo, and JetBrains Mono.

I went hunting for the Coding Fonts site because I wanted to see how SF Mono (shipped with macOS) compared with the rest of them, and then I discovered Recursive, which is now my current coding font. I use the Duotone version for fancy Markdown headers.

WordPress marketshare is "shrinking"

Luke Harris — Wed, 11 May 2022 23:00:33 +0000

Joost de Valk writes,

There’s no more denying it: if you look at W3Techs CMS market share numbers, WordPress’ market share is shrinking, losing 0.4% market share since February.

This is a sensationalist article based on faulty stats and anecdotes, though I wanted to comment on some of the points.

As the author notes that the main source for these stats is the now-defunct Alexa, and he plans to switch to a different source soon. Those same stats also note that WordPress grew in marketshare by several percentage points before this slight drop.

Additionally, W3Techs mentions that they don’t count subdomains, which leaves out any platform that hosts their user’s site on a subdomain, and large orgs that also adopt the subdomain setup. This leaves out every single site without a custom domain that uses WordPress.com, Blogger, Tumblr, Wix, Webflow, and others.

If you look at cwvtech.report you’ll see that in the last year, sites on Wix and Squarespace on average have improved their site speed more than WordPress sites. WordPress has a performance team now, and it has made some progress. But the reality is that it hasn’t really made big strides yet, and in my opinion, really should.

When comparing WordPress Core Web Vitals (CWV) against silos like Wix and SquareSpace, it’s important to differentiate between self-hosted (WordPress.org) and WordPress.com, which may be difficult to measure. WordPress.com does a lot to improve performance by default, most sites have JetPack features including image optimization, and their server speed is exceptional, with their own page-caching setup. WordPress.org sites do not come with any of these niceties out of the box, and it’s up to the developers or users to take care of optimization. Slow shared hosting and the added bloat of page builder plugins is common with WordPress.org sites, and negatively impacts CWV.

There have been efforts to improve the performance of self-hosted sites, but a major performance improvement that added WebP image conversion by default was recently rejected by the community, whose principle concern was the storage space required by generating another set of image sizes in a different format. Why is storage space a problem? Cheap, and usually slow, shared hosting.

WordPress’ full site editing project is not done yet. Anecdotally, more and more people are having a hard time deciding how to build their site on WordPress. Wix and Squarespace are simply way simpler tools to build a site. As they improve their SEO tooling, there’s less and less reason to switch over to WordPress.

I fully agree with this one. My client projects for the last 6 months were built using Webflow, as I needed rapid turnaround and low maintenance that WordPress just doesn’t provide. I don’t want to use Webflow, as I can’t easily switch later (although full code/assets export and CMS to .csv is available), but building sites with it is much faster, and the client’s experience managing their content is way better. I’ve spent a lot of time, and not a small amount of money, making it easier for me to build and maintain WordPress sites over the years, and yet I still opted for Webflow.

The primary challenge with WordPress for me is hosting, as I have high standards for performance, but I also have to balance performance with cost, both financially and time spent on maintenance. I still haven’t found a WordPress host or hosting setup that is the best balance of both. I recently migrated my sites from Kinsta to WordPress.com, and plan to write about it soon, but it still doesn’t fully meet my needs with pricing (one year up front) and features (no staging). I can’t start a new project and share a staging site with a client while keeping my initial investment minimal.

I may end up looking into VPSs again and using SpinupWP in the future.

I think WordPress, for the first time in a decade, is being out-“innovated”. Now I say “innovated” because Squarespace and Wix are not really doing anything that new. They’re just implementing best practices for both site speed and SEO. They are, however, rolling that out for all their users. So all of their users get better and better page speed performance and improved SEO. As a result more and more of their sites are doing well.

I read this and was surprised, as the CWV report doesn’t show a large difference in performance, except in Webflow’s case.

The chart shows the percentage of sites with good CWV, between January 2020 and April 2022:

Webflow at 52.4% across 23,127 sites
Wix at 36.6% across 106,217 sites
Squarespace at 32.8% across 59,148 sites
WordPress at 28.7% across 2,149,028 sites

Why are Wix and Squarespace so close to WordPress, with a fraction of the sites? No matter the sample size, I’d expect a much bigger difference in stats from a fully-managed service like Wix and Squarespace than WordPress’s combined stats across WordPress.com and .org sites. These managed services have a lot of control over their user’s sites and designs, yet they aren’t making any large strides in performance. I would have expected their numbers to be much closer to 80%-90%.

I honestly expected Webflow to be at the bottom of this chart, as building sites with their tool is less abstracted from the actual code, and Wix/SquareSpace use a highly abstracted editor system with blocks and components, so Wix and SquareSpace have even more control over making their user’s sites faster.

Going by these stats, WordPress has 616,771 speedy sites with good CWV, while Webflow, Wix, and Squarespace combined have 97,150 speedy sites, which doesn’t mean anything but I thought it was funny.

If WordPress wants to maintain its market share or better yet, grow it, it’ll have to get its act together. That means it should focus on the performance of these sites across the spectrums of site speed and SEO. The Full Site Editing project is simply taking far too long. That’s causing the rest of the platform to lag behind current web trends. Without a drastic change in this approach I think WordPress will continue to lose market share for the next few years.

I’m all for better performance and SEO out of the box with WordPress. I want WordPress to get to the point where I don’t need to install the author’s bloated Yoast plugin or SEO Framework just to fix WordPress SEO issues. Even WordPress.com isn’t immune to the same issues and yet they tout their SEO on their sales pages. Both WP.com and .org create useless attachment pages for every media file uploaded, which clutters the sitemap and may lower your ranking.

Full Site Editing would be great once polished, and if WP.com offered more features geared towards freelancers and agencies, like staging and monthly billing for hosting, this would be the ideal setup for me over Webflow.

Mastodon app permissions are poorly explained

Luke Harris — Thu, 28 Apr 2022 16:20:32 +0000

Imagine you’re a new user to Mastodon, the federated alternative to Twitter some of your friends are joining. You’re not the most technical person but you love checking out new stuff. You download the official app, or a third party app because your friends are big fans of the local timeline. Then you choose an instance, log in, and are presented with this page:

What does any of this mean?

None of these permissions are explained. There’s a green checkbox, and apparently the app has read and write access to these things, but what do these things do?

“Everything” sounds scary, can this app change my password or otherwise take over my account?

“Relationships” means the app can manage your following list or followers, or does it? Maybe it can also access my contacts on my device?

“Push notifications” is obvious I guess, but read and write? In this scenario I’m not a technical user, so is this app snooping on my notifications?

Oh, and “push notifications” is cut off at the bottom, implying that the list is scrollable or expandable, but it isn’t.

At the top of the page, buried in text, there’s a helpful note that says, “if you do not trust it, then you should not authorize it”. It’s not obvious and is going to get skipped over.

Why is this a problem?

Users should clearly understand what it means to authorize an app to their Mastodon account, with each permission clearly outlined and explained. They’re not going to check the docs or another page to try and figure it out. The terms used in the docs don’t even match what’s on the authorization screen.

I think this is even more important for a “decentralized” network and open API like Mastodon. With many different third-parties hosting instances and creating apps, it should be very clear what you’re allowing the app to do.

For contrast, here’s what Twitter does:

The page layout really needs some work, but the permissions are explained in detail - you know exactly what the app can do when you authorize it.

Here’s GitHub’s app authorization page:

Neat, I know that this app can find out what my email address is, it was created 3 days ago, and isn’t used by a lot of people.

And here’s Google’s app authorization page:

I like this one a lot because you can control what the app can access. “Personal info” needs to be explained better, but I do know the app can see my email address and can access my Analytics and Search Console data.

What I suggest instead

The “If you do not trust it” notice should be displayed by itself and prominent
Permissions labels should be more descriptive of what they do
Change the permission block names to better highlight what they do (Post toots on your behalf, change who you follow)
List the most destructive action first followed by the next most destructive option (read and post toots and direct messages, add/remove favorites)
Expandable accordions to list all permissions in the group
Authorize/deny buttons should always be at the bottom of the list so users have to read the permissions before authorizing
Optional: list of what the app cannot do

This was a quick mockup I made in Figma. The ordering and specific labeling needs discussion, I’m just illustrating an example that I think better explains what authorizing an app does.

How to block domains from search results

Luke Harris — Wed, 13 Apr 2022 21:24:39 +0000

Search results are not helpful

Searching for things on the web has steadily gotten worse¹². Sites with so-called “content strategies” fill the results. And each article is a poorly researched pile of garbage, haphazardly copied from more legitimate sites.

Some of these “articles” even seem to be researched off of each other, rewritten in odd ways to avoid Google’s plagiarism penalty, like a game of telephone. This is also a side effect from using AI writers, which are trained on existing search results.

And there’s bad, ad-filled mirrors of Stack Overflow, GitHub issues, NPM packages, and Reddit threads, that somehow rank higher than the actual source.

I’m not going to name any of these sites because I don’t want to boost their rank any further, but I’m sure you’ve seen them.

Fed up with the SEO spam, I’ve found some ways to make my searching more productive.

Filter your results

I’ve been blocking entire domains from my results. It’s tedious, and my list grows every time I search, but my searches have been a lot more productive. You can do this with a browser extension, a different search engine, or by editing your search query.

Browser extensions

Let’s Block It!

Let’s Block It! is a handy site to generate content filters for uBlock Origin, and you can create an account and share your list, which can be added just like any other uBlock Origin list.

You’ll want to use their tool to make your own search results filter, which provides the option to easily add in some exhaustive filters from the uBlock-Origin-dev-filter project.

The filters support result filtering on Bing, DuckDuckGo, Google, Kagi, Searx, and Startpage.

They also provide a handy CLI utility so you can generate and self-host your lists without using their website.

Unfortunately, it doesn’t have a quick way to block sites straight from the results, and I’m a filthy Safari user, so uBlock Origin isn’t an option for me.

uBlacklist

uBlacklist is what I’m currently using. It supports Chrome, Firefox, and Safari, and you can subscribe to other user’s blacklists.

When installed, you get a “Block this site” link under each of your results, like this:

You can easily export your blacklist to a text file - here’s mine currently. And if you use Google Drive or Dropbox (I don’t), you can sync your blacklist straight from the extension.

The extension supports Bing, DuckDuckGo, Google, and Startpage, with partial support for Ecosia and Qwant.

Edit your search query

If you can’t install extensions, and alternative search engines are blocked, bookmarking a query with a bunch of unwanted domains might be your next best option.

You can add -site:example.com to most search engines, and just keep adding more -site: parameters as needed. Then before you put in your search term, bookmark the page, and you’ll be able to reuse it in the future.

You can also edit your browser’s default search query³. Here’s an example with DuckDuckGo in Brave (note the space between %s and -site):

Alternative search engines

MetaGer

MetaGer is the only publicly available search engine I’ve found that lets you set a domain blacklist. You can filter results straight from the page, but those filters are temporary.

However, MetaGer has a configurable domain blacklist in settings, and they’ll give you a URL with all your settings in it that you can use to easily copy your settings to other browsers or devices, without an account.

Other search engines

It looks like Kagi supports domain blocking, but it’s invite-only and I haven’t been able to test it for myself. I’m also not too keen on paying for a search engine eventually, but if it makes my life easier, sure.

Self-hosted options

The only self-hosted search engine I could find that supports blacklists is YaCy, but it requires Java (ugh). The wiki page on the blacklists feature is in German.

Searx or its fork, SearxNG, might be another option, but either it doesn’t have a blacklist feature or it’s not documented. I wasn’t able to install it and find out for myself.

Use additional search terms

It’s impossible to find a legitimate review on something outside of a major media site, and I can’t always depend on those reviews either. I’ve been adding “reddit” to a lot of my search terms to try and get crowdsourced opinions. This isn’t ideal because of their slow website and dark patterns, but I do get better results.

Lim Swee Kiat recently made a site that will do this for you, called Redditle.

How can search engines fix the problem?

A better question is, what’s their incentive to fix this? If all the big search engines show the same garbage results (and they do, in my experience), why spend resources making your engine different? Especially when it makes you money because you also own the ads on the low quality sites?

The answer is, there is no incentive, at least none that I’m aware of for the current problem. It’s up to us, the users, to fix it ourselves.

That said, here are some ideas I had:

User blocklists that influence the algorithm

Google used to have a Chrome extension that allowed you to block domains directly from the search results list. While they insisted it didn’t have a direct effect on the algorithm, it did report your list of blocked domains to Google, so I like to think it at least had some effect. But like most Google products, they killed it a few years later in 2013.

Bring it back, and then weigh the results to prevent abuse. I’m sure there’s a cool techie term for it, but basically, only remove domains if the amount of users blocking the domain reaches a certain percentage of its clicks from results.

Alternatively, take it a step further and implement up/down votes , similar to link aggregators.

Expand the results review team

I’m sure both Google and Bing have a team of people whose sole job is to search for things and test the results. I think this team should be dramatically expanded, and could even be outsourced as an invite-only program to the users if you want to cut costs.

Both of these ideas will need some abuse protections put in place, so people can’t game it to downrank their competitors.

Improve the algorithm to better detect low quality content

While knowing absolutely nothing about developing algorithms, I can definitely say this would be extremely difficult to pull off and would only be suspect to more exploitation once the spammers figure it out.

Most of these SEO spammers use content farms and AI writers, both of which create content Google deems “high quality”, with images, frequent use of headings, and related keywords integrated into the text. And it’s all perfectly readable, often with better grammar skills than I will ever have.

The AI writers can integrate with your existing SEO tools, and outline a basic structure based on your targeted keywords with headings and even the intro all pre-written for you. Then as you write, the AI will suggest sentences or entire paragraphs based on the preceding heading. I was amazed while testing this out on a short-lived SEO spam experiment of my own last year.

I have no idea how you would combat this with algorithm updates, because you’d need specific knowledge on the subject of the content to tell the difference between a casual researcher/AI writer and legitimate content.

Maybe it should be based on your site’s actual subject. For example, if you’re a certain purple-themed WordPress host, maybe you shouldn’t be ranking well with articles about how to switch your default search engine.

Plagiarism is a lot easier to detect though. I’m not sure why all these bad mirrors of big sites haven’t been penalized.

Send me more ideas

If you have any ideas on additional browser extensions, search engines, or self-hosted options, please send them my way using the “Reply via email” button below and I’ll update this post.

https://news.ycombinator.com/item?id=30031672 ↩︎
https://www.surgehq.ai//blog/google-search-is-falling-behind ↩︎
I thought there was a utility to do this, but I couldn’t find one. Another idea for the backlog! ↩︎

How to make static site publishing easier

Luke Harris — Tue, 05 Apr 2022 16:16:34 +0000

So you just got your static site up and running, and if you’re like me, you spent way too much time making your own custom design and other niceties.

After you’ve published your obligatory “I switched from X to Y!” post that tons of blogs use as their only content for years, you’re ready to start writing for real!

You decided to go static for one or a combination of the following reasons:

You love writing in Markdown or HTML
You love using your preferred text editor
You’d like to keep your content in a portable format for longevity
You live in the American Gardens building on West 81st street
You’re a big fan of using version control
Paying for a blogging service or hosting is either not ideal or the server you have would struggle with memory-hogging database servers and caches
You love optimizing and tinkering with things
It’s a shiny new toy
You’re not a photographer

I’m only half kidding on that last bit, handling images is definitely a major Pain Point with static sites.

Before I go into problems I’ve encountered and how I solved them, let’s wind up, rotate hip, extend shoulder, and knock the obvious catch-all solution right back into the undersea internet volcano it crawled out of:

Using a CMS is not a good option

All of the pain points I’m going to outline below can be solved by using a content management system (CMS).

If you’ve switched your site to static because you didn’t want to pay for hosting, or reduce server overhead, using a CMS defeats the purpose.

You’re either paying a startup that might not be around in a few years, or you’re using a self-hosted solution that adds overhead, complexity, and security considerations.

And while a CMS is supposed to make it easier for you to publish, the initial integration can be difficult and complex, and not migration-friendly.

Images and content might live outside your repo (API solutions), which is bad for longevity. And there’s few CMSs that work with static files and commit to git. And even if they do commit to git, sometimes they add clutter.

Using a CMS with a static site only makes sense if you’re leveraging the huge traffic handling ability of a static site and need multiple people to manage content.

I’m talking to myself here: hundreds of thousands of people aren’t going to visit your little personal blog on a daily basis, and you’re not hiring an editor.

There’s no need to over-engineer this, as much fun as that is. Cross that bridge when you get there.

If you prefer to use a CMS, use a popular, well-supported one-stop-shop CMS, like WordPress, Ghost, or any number of alternatives.

A note: I’m going to mention “longevity” a lot. To me, longevity in terms of a site’s content means that for at least 5 years, it’s able to be easily adapted to a new site design or migrated to another system, and not depend on a third-party service.

Static site pain points and how I solved them

Starting a new post needs preparation

Not including the initial site clone, possible dependency install, and build error wrangling, each post in a static site needs some sort of preparation.

You’ve got to create the file, and if you’ve got a folder structure like mine, that involves creating a new folder too.

If you’re using an SSG, you’ve got to put in frontmatter to tell the SSG what the title of the post is, date, and optional tags, description, cover image, draft status, layout options, etc.

If you’re using straight HTML, you’ve got to add your HTML structure if you want styling (you do, full-width text is awful to read) and maybe navigation links.

And then you can start writing.

It doesn’t sound like a lot, but when you have to do it every time, it quickly becomes a chore.

My solution: Use a template, and then automate it

This is probably a “duh” moment, but have a blank file with your frontmatter or HTML already in place, that you can just duplicate and start writing in. This is also referred to as “scaffolding”.

And keep new post creation to one (1) command or action. Don’t take multiple steps to create the folder, copy the template over, and open it in your editor.

Write a script, or even just use the bash && operator and string multiple commands together and save it in a note and your terminal history.

You can even automate the post title and date creation.

The SSG I use on this site, Hugo, has a built-in scaffolding system called Archetypes, and to create this post, I just typed one command in my project root:

hugo new blog/2022/04/easier-static-site-publishing/index.md

This creates new folders if they’re not there, creates the Markdown file with the frontmatter, including title and date from the command, and even opens it in my text editor, ready to write.

You can tell Hugo what your text editor is in your config file, here’s mine for example (YAML):

1newContentEditor: open -a typora

You may also have to add the command to your security configuration:

1security:
2 exec:
3 allow:
4 - ^subl$
5 - ^open$

Adding images is a pain

I love writing in Markdown, but adding images is annoying. Most solutions I’ve seen involve uploading to a third party service and then pasting the URL in your Markdown, which means cost and broken image URLs later that you might have to manually fix across hundreds of posts. Third-party image hosts aren’t a good solution.

My solution #1: Use a Markdown editor

With a good Markdown editor, you can just drop the images straight into your post, like you would with a CMS, and it will copy the image files where they need to go.

I personally use Typora for this. My images live in the same folder as the post, which makes it easy to delete all the images and other related files when I delete a post. Typora’s image options panel has a preset option for this:

You can also set a custom folder and construct the path how you want it:

If the folder isn’t created, Typora will prompt you before it creates it.

More documentation on this feature is available here.

Other things I like about Typora: You can use formatting shortcuts, including my favorite, Command+K, to link selected text with a URL from your clipboard. There’s also a neat package for Sublime Text to open the current Markdown file in Typora.

Jim’s solution: Build your own CDN

Jim Nielsen recently wrote about his setup for easily uploading and adding images to his posts, where he puts them in a folder automatically synced to Netlify, and then uses macOS Shortcuts to be able to right-click and copy the uploaded image URL straight from Finder.

I like this solution because you have full control of the folder and the images have a known path — if you stop using this method in the future, you can easily update all your posts with a quick find-replace across files, straight from your text editor or terminal.

Managing images is a pain

Most CMSs have a media library where you can easily see all your images and pick them for a post. You can’t really do that with a static site, or can you?

My solution: Your OS file manager

Your operating system’s file manager is a great way to view thumbnails of all your images, and you can easily edit them with whatever your preferred photo editor is. Mine is Affinity Photo.

Keeping all your images in one folder is a good way to see them all in your file manager, however I didn’t like doing this because when I delete a post, the images don’t get deleted with it. This is a problem I have with CMSs, too.

So I set up my file structure to have individual folders for each post, and then the images + index.md file go in there, along with any other static files I want to link in the post (like text or PDFs). This also makes it easy to diagnose build errors (I had some old corrupted images causing the build to fail).

But then you’ve got to go folder by folder to see all your images, right? Nope! Depending on your file manager, you can set up a saved search for all images in your posts directory and then you can view them all in one place¹.

Optimizing images is a pain

You’ve got your images in your post and saved in your repo. Good!

They’re taking 5 minutes to load and aren’t responsive. Bad!

So many pain points with images. This was the biggest one for me. I used to run my images through PhotoBulk to resize them, and then run them through ImageOptim to optimize them. Very complicated process and not as good as responsive images + WebP.

My solution: Use an SSG with image optimization

Taking care of this depends on your SSG or build tools. I try to not use build tools outside of the SSG as much as possible, to avoid dependencies and my experience with tools like Gulp has not been successful².

If you’re using an SSG, try to avoid using shortcodes in your Markdown like the plague, especially for images. If you do use shortcodes, you’re going to have a hard time later fixing your markup across hundreds of posts when you switch generators or move to different setup. Unless you’re good at regex (I’m not).

Hugo has built-in image optimization and a convenient Markdown image hook template you can use to optimize and generate responsive image sets. I wrote more about this here, but the gist is to use Daniel F. Dickerson’s handy module. It’s pretty much drop-in-and-go, with a couple config file additions.

I no longer feel the need resize and run my original images through ImageOptim, as Hugo does it all for me, and only outputs WebP, so the user never sees the original gigantic image. I do need to set it up for an optimized JPEG fallback though.

I switched to Hugo from 11ty because it lacked support for optimizing images linked in Markdown, but it appears Alexs7zzh figured out how do it with eleventy-img.

Whatever your SSG is, it’s most likely not going to be a batteries-included setup, and it could be as simple as adding a dependency or heavily involved, where you’re writing your own solution.

Another solution: Use a script to optimize your images

You can build your own optimization script, and run it on deployment. CSS-Tricks has a good article on building an image optimization script. This would be a great combination with Jim Nielsen’s build-your-own-CDN method, linked above.

You won’t have responsive images and width/height attributes on Markdown images, which isn’t great, but it’s also better than serving gigantic images.

I’d use WebP until AVIF support has full browser adoption (probably in about 60 years), and serve a maximum size of 2000x2000 px.

Forms and comments

You want dynamic stuff? On your static site? What?!

Some SSGs can act as hybrids, where they can be mostly static with dynamic elements, like Next.js and Eleventy Serverless. This is also referred to as server-side rendering (SSR). I haven’t worked with this before, so I’m not sure how to handle forms using SSR.

Other SSGs need some extra wiring.

My solution #1: Email

It’s the simplest solution, and it works so well, even if you use a one-stop-shop CMS.

Make a new alias just for handling emails related to the blog, and use it on your site. I recommend routing those emails to a folder in your inbox, in case you get an angry mob or something. Mine goes to “Comments”.

This can act as both your contact form and comments solution, and I really prefer it over commenting systems and forms. You can even add a pre-filled subject line and email body.

There’s 0 spam (thanks CloudFlare) and 0 moderating. If you do need to moderate, just block the sender, right from your inbox. And I love the one-on-one penpal feeling, in a time when casual emails are a rarity.

For your contact page, spell out the full email address instead of hiding it behind a button — sometimes the user can’t use their default mail client.

For your posts, I wrote more about adding a “reply via email” button here for 11ty. On this Hugo site, I use Bryce Wray’s code, and Kev Quirk has a guide for WordPress (had to mention it even though I’m talking about SSGs).

My solution #2: HTML forms and third-party handler

Sometimes there’s no way around it, and you absolutely need a form for your static site. The best way to handle that is to write an HTML form, and then use a third-party service that you can just drop in the action attribute.

I’m still looking for a solution to self-host, maybe using functions on Netlify/Vercel or CloudFlare Workers, but in the meantime, I broke my own rule and use Formcake for a few sites. Netlify Forms is fine too.

I’m okay with using a third-party form handler for HTML forms. If it goes down, I can just update the action attribute to point to a different URL.

Forms are so prone to spam though, even with reCAPTCHA and CloudFlare’s challenge turned on just for the page with the form. Also, did you know reCAPTCHA breaks HTML form validation? Now you know.

I do miss Akismet on WordPress. Caught 99% of spam submissions for me.

Mobile and away-from-home publishing

Not having a CMS is a big disadvantage here. WordPress has a fantastic mobile app, and there are tons of other apps that also post to WordPress or Ghost, including desktop apps like Ulysses and iA Writer. It’s a really solid experience, and there’s nothing like that for static sites.

I usually don’t publish on mobile unless I absolutely have to, but I do edit posts I’m working on from time to time.

My solution for mobile: Working Copy

I use an iPhone, and Working Copy is the best git client I’ve found. The Markdown editor isn’t bad either. You’ll have to manually copy over your new post template though, and if your repo size is large, it could take a while to clone for the first time over a data connection. And you’re back to painfully inserting images by adding them to the folder and then typing out the image names in Markdown.

My solution for desktop: GitHub Codespaces

If your repo is on GitHub, you can use GitHub Codespaces, which is VS Code in your browser. Just navigate to your repo and hit . (period) on your keyboard, and it will fire right up.

If you prefer Vim and have your own git server, you can ssh into your server and use Vim there, though if you have your own git server you probably do that already.

Complicated publishing

This is supposed to be the simplest part, right? Deploy your site to a host that automatically runs your build command and hosts your static files, and you’re done. However, I found myself adding unnecessary steps to my workflow.

I used to use two separate branches in Git: one for writing and testing, dev, and one for production deployment, main.

This is what my publishing workflow looked like:

Checkout branch dev
Start up live reload dev environment (hugo server -DF)
Write the post and probably tweak the design along the way
Commit, usually multiple times
Push to origin
Wait for my site to build on CloudFlare Pages (2-5 minutes)
Check the preview URL to make sure things looked right
Merge dev with main
Commit
Push to origin
Wait for build
Check production site to make sure things looked right

This is a workflow for a large enterprise or software project, not a personal blog.

My solution: Write and deploy on main

To simplify my publishing process, I write on main and design on dev.

My repo is set up on both CloudFlare Pages (primary) and Vercel (backup), and Vercel sends me helpful emails on whether my build succeeded or failed (should set this up for CFP too), so I rarely check the published article now.

And if a build fails, it doesn’t take my site down, it just stays at the previous successful commit. But most of my previous build errors were from messing with the design, and I haven’t seen a build error with my current method.

It does help to use a Markdown editor with live preview and spellcheck.

This is what my new publishing workflow looks like:

Checkout branch main
Write the post
Commit
Push to origin

Much less complicated.

And if you’re worried about spelling or formatting mistakes, don’t — it’s a personal blog post, not a press release. Mistakes make it seem more authentic, or so I tell myself.

Reduce your barriers to writing

This is a long article to say just this, but it can’t be overstated. This concept can be applied to any form of creation, not just writing.

The more complexity you face while creating new content, the less you’ll want to create.

If using a one-stop-shop CMS helps you write and publish more often, don’t waste time using a static site generator. Likewise, if your CMS is complicated, slow, or if you have unstable Internet, an SSG might be better suited.

Currently I’m unable to do so on macOS and I’m not sure why, it’s possible my Spotlight index is broken. It works in my documents but not in my repo. ↩︎
Learning Gulp is something I should probably do at some point, I’m sure I’ll run across it on another project. ↩︎

One Image Two Days: Optimizing images in Hugo

Luke Harris — Sun, 27 Mar 2022 17:29:32 +0000

I added a hero image to my homepage, and here’s the breakdown on how long it took me:

Add the image with an <img> element and style it: 1 minute
Add image optimization to my Hugo templates: 2 days

Backstory

Previously, I used Hugo’s render-image hook to optimize the images I put in my Markdown files, with code by Dave Bennett. This worked well and gave me WebP images with a set of different sizes.

You can also make a custom img shortcode for this, however Hugo shortcodes only work in Markdown files and not templates, which is what I needed for my homepage template. This was confusing to me, coming from 11ty and Nunjucks, where you can use shortcodes anywhere.

Hugo uses partial templates instead of shortcodes in templates, which can accept arguments or just act as a reusable component. This is similar to Nunjuck’s include.

However, I wanted to use the same image processing code for both Markdown files and templates. Trying to stay DRY over here (don’t look at my theme repo though, it’s very wet).

Implementation

I discovered DFD’s excellent image handling module for Hugo. I encountered some issues, so I forked it to customize it for my site’s setup.

Some things I changed:

Removed DFD’s link handler module
- It was adding empty <a> tags around images, and <span> tags around other links. Will try to narrow this down and open a PR.
- It changes your external links to open in the same tab by default with no config option though, and I prefer new tabs for external links (target="_blank"). There is a solid case though for the “Don’t Break the Back Button”¹ rule and I’m slowly coming around on this.
- There’s still some code in my fork that depends on the module if you use the link functionality, and I may end up forking the link handler in the future to make it work the way I want it to. The link checking is handy.
Use <picture> element by default instead of <img>
- This is personal preference, until I add a JPEG fallback
- Removed the src attribute from the <source> element as this only used for audio/video (spec).
Add link to Markdown images so the user can view them full-size in their browser (I don’t plan on adding a lightbox viewer due to the JavaScript weight)
- This doesn’t work for images from /assets though
My cover image URLs are in the cover: key, so I added it to find-featured-images.html

This resulted in two days of going through confusing Hugo template code across 7 layout files, but I’ve definitely learned a lot about how Hugo templating works.

I still need to add JPEG fallback to the fork, currently it only outputs one format (WebP) in the source set. WebP is supported by all major browsers, but Safari added support not even two years ago, so it’s best to continue to add a JPEG fallback.

Hugo module issues

I also learned a bit about Hugo modules. I encountered a lot of difficulty trying to fork the module and then point my Hugo install at my fork, and I still don’t know what worked exactly. It was a combination of deleting go.mod/sum and liberal use of hugo mod clean.

And I learned that Hugo modules don’t like getting daisy-chained: I tried to add my theme as a module, and then add a config to the theme that has additional modules needed by the theme, and I encountered some weird error with the last module in the list of 3 not being found. I tried to reorder them or remove one to no effect.

So now my Hugo project folder is set up with all the modules in the main config, and then my theme + forked modules are cloned into the themes directory. Then I added a replacements option to my development/config.yaml to tell Hugo to use the local modules when I’m running hugo server:

1module:
2 replacements: "github.com/lkhrs/hugo-cactus-theme -> hugo-cactus-theme,github.com/lkhrs/image-handling-mod-hugo-dfd -> image-handling-mod-hugo-dfd"

All this to avoid using Git Submodules, which probably would have been easier at this point.

Results

I have a partial I can use whenever I need to put an image on a page, though it is pretty complicated. This is the one I’m using for the hero image on the home page:²

1{{ partial "helpers/wrapped-image" (dict "alt" "Luke in the shower" "image" (partial "helpers/lib/image-handling/find-image-src" (dict "src" "layouterror.jpg" )) "page" .Page "class" "img-fluid h-25" "noImageWrapper" "true" "loading" "eager") }}
2{{/* We're using loading="eager" instead of "lazy" because the image is above the fold. */}}

And this is what it looks like in the generated HTML:

Nice optimized WebP images, hurray! And it’s the same logic for rendering Markdown images natively, so I can continue to add images the Markdown way (![alt](imgURL)).

Why

Needless to say, optimizing images is important and one of the first things to look at when you’re trying to speed up a site.

However, one of the struggles with the whole JAMstack/static site generator (SSG) trend is optimizing images, because very few of the SSGs out there do it for you. And they all need some sort of wrangling to get it working.

Most image optimization methods I’ve seen for SSGs involve just using a third-party optimization service, and I’m not down with this for two reasons:

Cost - yet another thing I have to pay for and/or keep track of quotas
Broken image URLs if the service goes down or I have to switch

If you want your Markdown images optimized, a lot of them want you to use a custom shortcode in your Markdown instead of the Markdown way, which isn’t good for content portability if you change your SSG later.

This is one of the reasons I switched to Hugo last year, because of the render-image hook enables me to optimize images in my posts and not just in templates.

Top Ten New Mistakes of Web Design (1999) and Don’t break the back button (2011) ↩︎
Can’t wait for the alt text “Luke in the shower” to get copy-pasted into someone’s template. ↩︎

DEV Community: Luke Harris

PurgeCSS with Hugo

Using variables in Jinja include statements

Setting Up Dynatrace

Setup

Install in a VM

Viewing host performance

Working with dashboards

Create a new dashboard

Advanced widgets

Monitoring a container

Setting up problem alerting

Conclusion

Interstitial Journaling

The idea

Results

Measuring terminal latency

Summary

Reason

Method

Specs

Apps tested

Terminal emulators

Text editors

Results

Terminals

Editors

Combined

Conclusion

Decision

Further reading

Coding fonts comparison

Coding Fonts

My new preferred coding font

WordPress marketshare is "shrinking"

Mastodon app permissions are poorly explained

What does any of this mean?

Why is this a problem?

What I suggest instead

How to block domains from search results

Search results are not helpful

Filter your results

Browser extensions

Let’s Block It!

uBlacklist

Edit your search query

Alternative search engines

MetaGer

Other search engines

Self-hosted options

Use additional search terms

How can search engines fix the problem?

User blocklists that influence the algorithm

Expand the results review team

Improve the algorithm to better detect low quality content

Send me more ideas

How to make static site publishing easier

Using a CMS is not a good option

Static site pain points and how I solved them

Starting a new post needs preparation

My solution: Use a template, and then automate it

Adding images is a pain

My solution #1: Use a Markdown editor

Jim’s solution: Build your own CDN

Managing images is a pain

My solution: Your OS file manager

Optimizing images is a pain

My solution: Use an SSG with image optimization

Another solution: Use a script to optimize your images

Forms and comments

My solution #1: Email

My solution #2: HTML forms and third-party handler

Mobile and away-from-home publishing

My solution for mobile: Working Copy

My solution for desktop: GitHub Codespaces

Complicated publishing

My solution: Write and deploy on main

Reduce your barriers to writing

One Image Two Days: Optimizing images in Hugo

Backstory