Web Development Curiosities

The Async Image Loop

When I built the Friends with Beer podcast website, I built it using Eleventy, a JavaScript based static site generator. It’s Node.js based, which is great because it gives great flexibility in adding functionality and in development and build script options. Eleventy has a lot of great features that combine to allow flexible customization quickly and easily, so much so that the documentation understates just how powerful it is. I’ve had more than a few discovery moments along the way where I realized how much more there is to this framework than I suspected.

One of the neat things about playing with modern static site generators is that so much of the web development community who use SSGs for performance reasons also think about things like image optimization and overall site performance and overhead. It’s through my experiments with Eleventy that I learned about modern image optimization techniques and the img srcset and picture tags. …

(Read More)

Emmet extension for Panic Nova

Someday I need to write about Nova, the code editor from Panic that I use for web development. In the meantime, let me instead tell you about an extension for Nova that I just installed tonight which I knew about from Visual Studio Code.

It’s called Emmet.

Emmet lets you use shorthand to quickly enter html tags and css rules.

If you use Nova for web development, install Emmet. As Tim Cook would say, we think you’ll love it.

Hugo Theme Modification Practices

You’re probably familiar with the fact that Hugo has a wonderfully intricate and seemingly endless set of lookup order rules for figuring how to construct your website. This applies to layout files, themes, and all sorts of things in Hugo. Each type of resource has its own lookup order, and you could probably spend several years reading about it all if you wanted to.

However, it is fairly simple to understand some basic intended practices with regards to themes and theme modification in Hugo. The basic rule is, let the theme do its job unobstructed unless something actually needs to be overridden to be modified. Or, put another way, don’t just install a theme, copy the layout and style file folders into your Hugo files directory, and start chopping them up. This basically negates the entire purpose of having changeable themes in the themes directory. …

(Read More)

Hugo “in slice” versus union queries

As you may remember, I use Hugo sections to structure my site content, and that affects my queries for things like site comprehensive RSS feed and my “Things I’ve written” section, which shows all posts from every section.

The way I have my site set up is that I have several blog sections, starting with Blog, which currently has 3 posts in it that don’t fall under other sections, and then under Blog I have subsections for iOS, Mac, Hugo, and Apple history. Finally, I have a Podcasts section at the same level as Blog.

Podcasts is mostly unused at the moment as it’s where I’m going to make repositories of past (inactive) podcasts, as well as descriptions and links to current and (and future current) podcasts. However, I’ll also post in that section about different episodes of things I’m in.

Anyway, it …

(Read More)

Summary .Render

Having decided that I needed a custom summary rendering solution, I started whipping up a shortcode before realizing that wouldn’t work since I was calling it from a partial. So I started creating a partial, but an interesting conversation with Vic Hudson convinced me to create an alternate layout to call with .Render instead.

More on that conversation later. First, my summary.html layout file:

<article>
    <header>
        <div class="post-title">
            <a href="{{ .Params.linkurl | default .RelPermalink }}">
                <h1 class="title">{{- if .Params.linkurl -}}<i
                        class="fas fa-link fa-sm"></i>&ensp;{{- end -}}{{ .Title }}{{- if .Params.linkurl -}}&emsp;<i
                        class="fas fa-external-link-alt fa-xs"></i>{{- end -}}</h1>
            </a>
        </div>
        <div class="post-meta">
            <div class="date">
                <span class="posted-on">
                    <i class="fas fa-calendar"></i>
                    <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
                        <a
                            href="{{ .RelPermalink }}">{{ . …

(Read More)