The coding morsels of Luke Alex Davis

Morsel #29: ROM website name generator

Wed, 07 Jan 2026 00:00:00 GMT

If you've ever played video games using emulators, you may be familiar with ROM sites. Two of my favourite site names are Emuparadise and CDRomance. They give a very 2000s tropical/Aero Frutiger vibe and I thought “why not try to randomise some of those names myself?”

And this is what I came up with. It's barebones and may or may not break but it's safe (as far as I can tell) and you can try it out. For now, it's just bold text in randomised web safe fonts but I'm hoping to add different colours in at some point.

I've used a handful of words so if you have anymore suggestions, let me know!

<button id="generate" aria-label="Generate button">Generate</button>

let format = ["CD", "ROM", "Emu", "Software", "BIOS", "ISO", "Disc", "Disk", "Floppy", "HDD", "SSD", "SD"]; let vibe = ["Paradise", "Utopia", "Oasis", "Bliss", "Exotica", "Island", "Garden", "Sanctuary", "Romance", "Passion", "Devotion", "Heaven", "Divine", "Angel", "Sacred", "Spirit"]; let fonts = ["Arial", "Verdana", "Tahoma", "Trebuchet MS", "Times New Roman", "Georgia", "Courier New", "Brush Script MT"];

let romClass = document.querySelector('.rom-name');

const element = document.querySelector("#myButton");

let button = document.querySelector('#generate'); button.addEventListener("click", function() { generateName(); })

</script>

Morsel #28: How I use lazy loading on Astro image sites

Tue, 30 Sep 2025 00:00:00 GMT

import IcebergNotes from '../../components/IcebergNotes.astro';

I have an image site called Coleçcao where I post pictures that I think are cool or inspirational (like a cross between Tumblr, Are.na, and Pinterest). As you might have noticed on this site, I try to avoid images as I rarely need them to illustrate my points.<sup>[<a href="#in-1">1</a>]</sup>

But with a website that is 99% images, I need a solution that keeps page load as short as possible and that's where lazy loading comes in!

Lazy loading

If you're unaware, lazy loading is a way to delay fully loading an element until it becomes visible in the viewport (the visible part of your window). If it's not seen, it's not completely loaded.<sup>[<a href="#in-2">2</a>]</sup>.

This is mainly used on images but you can lazy load iframes too (good for YouTube embeds).

There are a few ways you can implement lazy loading but the main ones are:

Using the Intersection Observer API
Using scroll, resize, or orientationchange event handlers
Using a <code>loading</code> attribute

The first two need JavaScript. The last one is just a HTML attribute like so:

<img src="example.jpg" alt="" width="500" height="500" loading="lazy" />

The idea is to load everything a user immediately sees and defer everything else until they bring it into view. It's a good thing and more people who use images and iframes should add it to their code (properly)

Adding this without JavaScript... kinda

Here's a brief overview of how Coleçcao works in terms of image display.

<figure style="text-align:center;"> <img src="/images/coleccao-screenshot.jpg" width="600" height="292" alt="a screenshot of the Coleçcao website" loading="lazy" /> <figcaption>This is lazy loaded too!</figcaption> </figure>

You get a main paginated feed on the homepage which has about 10 images arranged in rows—2 to 3 per row depending on their dimensions. But because of that dependency, I can't be sure how many images will be in the viewport at any time which means I won't know which images need to be preloaded and have a higher fetchpriority and which need to be lazy loaded.

In the end, I figured 4 images would be fine to preload and the rest could be lazy loaded and I coded the homepage as follows:

<Layout title="Colecçao">
  <section>
    <div class="atom-list">
      {page.data.map((atom: any) => (
      <figure class="atom-listing">
        <a href={`/atom/${atom.id}/`}>
          {page.data.indexOf(atom) < 4 ?
          <img src={atom.data.image} alt={atom.data.description} width={atom.data.dimensions[0]} height={atom.data.dimensions[1]} fetchpriority="high" /> :
        		<img src={atom.data.image} alt={atom.data.description} width={atom.data.dimensions[0]} height={atom.data.dimensions[1]} loading="lazy" />
          }
        </a>
        <figcaption>{atom.data.title}</figcaption>
      </figure>
      ))}
<!--Rest of code goes here -->

I use Astro's pagination functionality to route all my images and then I map them using the page prop. But the key element is the JavaScript in the a tag. It uses a ternary operator to say if the index of the mapped item is less than 4, then an img tag should be displayed with fetchpriority="high". Any item index of 4 or more should use the loading="lazy" attribute.

So, yes, I still use JavaScript to make this happen but it's all in the pre-built code. When it comes time to build, all you get are static HTML tags with the correct attributes (🤞).

This isn't the best implementation but it's a heuristic that works for me and at worst, maybe one image isn't lazy loaded when it should be. I best not tell the web performance church elders!

Why not use client-side JS?

Truth be told, the Intersection Observer API is perfectly cromulent for this and many people use it to great effect (I actually used it on a WordPress site when they messed up lazy loading a while back). But I don't want to rely on API code that could potentially break or that I have to maintain on the frontend. A simple ternary operator and some variables is quick and not that dirty. If anything breaks, it should be easier to fix and totally in my control.

Where to find the code

If you're interested to see the full implementation, the code is on GitHub. As always, if you spot anything that I could improve, feel free to raise an issue and I will look at it but understand that I'm not a web developer so be kind with your critiques.

<IcebergNotes> <p><sup id="in-1">1</sup>I am considering some SVGs on some pages to give them a bit of decoration but they'll be super lightweight to keep things well-optimised.</p> <p><sup id="in-2">2</sup>There is a threshold for this and it actually goes a little outside of the window so some of it is loaded but not the full thing. <a href="https://web.dev/articles/browser-level-image-lazy-loading#distance-from-viewport">You can find out more in Google's documentation</a>.</p> </IcebergNotes>

Morsel #27: local apps for good

Thu, 25 Sep 2025 00:00:00 GMT

Since using marimo, I've had an abundance of ideas for apps and it has even inspired me to reorganise my scripts into project folders (long overdue). But earlier today, I realised a lot of these apps were excuses to test features and get accustomed to marimo. This is fine and it helps me learn but the data and use cases aren't as meaningful.

I looked through my old Jupyter notebooks and Streamlit apps this week and spotted one that I made for my mum who suffers from colitis. She was struggling with finding meals or enjoying food based on her newly acquired dietary requirements. So I decided to build an app with some food recipe data where you click a button and a random dish pops up. Nothing too strenuous or complex, just a way to help someone I love.

And then it hit me: sometimes the best inspiration comes from the people you love. If I know someone close to me has a problem and an app could help solve it, it's a lot easier to build something, have them test it, and iterate until it's right and functional.

And there may well be an app or service already out there that can do this sort of thing—my mum could Google the best meals for someone with colitis—but it's fun to build apps and to certain specifications, just like creating your own recipes with a loved one or a patch quilt.

marimo has been great so far and I think with this new realisation, it'll be perfect for more local apps for good.

Morsel #26: vibe recursion

Sun, 14 Sep 2025 00:00:00 GMT

What if you wrote a prompt (Prompt n) that asked the LLM to write a better prompt (Prompt n+1) than this prompt (Prompt n) and to ask for a better prompt to ask for later (which would be Prompt n+3). And then you repeat the process over and over to see the results.

Would it become asymptotic and reach a point where it couldn't produce a "better" prompt or would it go wild and lose quality and meaning?

Morsel #25: templates are meant to be flexible

Fri, 12 Sep 2025 00:00:00 GMT

When I started in tech SEO, my audits were in the classic Google Docs checklist format. I remember getting feedback on one of my first ones and I felt awful because I had no idea how I was supposed to do it any differently; reports were written as documents and that was that.

But over time, I learnt that data representation can take on so many different forms and perhaps a Google Doc isn't the right way all the time. I now present my audit findings in a spreadsheet with a prioritisation framework adapted from CXL's PXL framework. I list the following things:

Audit issues
Issues categorised by type,
How/why it may affect performance (note: it might not so establishing that it's a sensible default would go here!)
How many URLs it affects (or could be a sitewide issue)
A solution (written as a direct action)
A list of 10 criteria that should influence the importance of the fix, with scores ranging from 0–2
A final priority score (adding up the criteria scores)
A low/medium/high ratiing (for stakeholders how think scores are arbitrary)
If developers are needed, how long may the work take (a very rough estimate with wide time ranges)
Who is responsible for the work
Next steps or notes

I made this to remove a lot of the guesswork out of auditing as our priorities may not be the same as other peoples' priorities. This idea came after years of doing things in different ways and I may end up changing this or adapting it further (the current format has only recently been changed to include more things).

For web performance audits, I ditched documents for slide decks. I present a basic agenda, what all the metrics mean and what data I've looked at, and outline each Core Web Vitals metric and the issues with recommendations. This is a way to meet stakeholders wherever they are in terms of web performance knowledge and ensure developers know what they need to do to investigate and fix issues. It also helps if you can show how these issues affect revenue and conversions!

My point is with anything we present, templates need to be flexible to get everyone on board and to understand what the problem is and how to fix it. A document may do this but maybe a slide deck can, or an organised spreadsheet, or even some cool interactive data visualisations. That fluidity is what will get people engaged and interested in making the Web a better place.

Semi-related:

Some caveats to SEO and web performance

Morsel #24: Python Morsels

Sat, 23 Aug 2025 00:00:00 GMT

Today, I found out about a learning programme called Python Morsels. Created by Trey Hunner, Python Morsels allows people to improve their Python skills for 30 minutes each week with a series of exercises to work through and screencasts to watch.

When I started my own "morsels" as a way to share random Web/coding things I'd made or learnt, I had no idea about this project but it was nice to find it.

Morsel #23: Letter swapper

Tue, 19 Aug 2025 00:00:00 GMT

import IcebergNotes from '../../components/IcebergNotes.astro'; import Swapped from '../../components/Swapped.astro';

<section style="margin-bottom:2rem;font-size:1.5rem;font-weight: 700;"> <form id="swap-first-letter-form"> <label for="text-to-swap">Enter your strings, one per line: </label> <input type="text" id="text-to-swap" name="text-to-swap" required=""> </input> <button type="submit">Swap those letters!</button> </form> </section>

What is this?

This is a HTML form that takes an input (a string) and returns a list of that string with the first letter replaced with every letter of the alphabet and a selection of English digraphs and trigraphs. For example, if I put my name in (Luke Davis), it would return an HTML list saying "Auke Davis", "Cuke Davis", "Duke Davis" etc. But I'd also get names like "Fluke Davis" and "Spuke Davis".

Why did you make this?

I saw a friend's Bluesky name was a variation of "bell hooks" which led me to think of something for Tony Hawk. I ended up with "Phony Hawk" and realised it'd make a funny nickname for a Pokémon called Gholdengo which uses a golden surfboard to travel around. Then I wondered, what if you could generate a list of names with the first part replaced for meme purposes.

Ideological rabbit holes are fun!

How the code works

I used the base of the Thumbnail Grabber so when you submit a string, the script checks if anything is there and replaces the first letter the string with each letter of the alphabet. It also matches the casing, whether that's upper or lower case. Finally, it outputs it in a neat HTML list.

In terms of JavaScript, there are querySelector's to grab the value of the input and add it to the output element and two functions for swapping the first letters (including a nested flatMap with a regular map inside).

I did use AI for the nested flatMap as I couldn't figure out how to replace the first letter which suggested I need to learn that pattern better but everything else was a mix of reworking what I made before and using StackOverflow lol<sup>[<a href="#in-1">1</a>]</sup>

How this could be improved

I'm sure something will come up but feel free to raise an issue on GitHub if you have any suggestions!

<IcebergNotes> <sup id="in-1">1</sup>This is <strong>NOT</strong> <a href="/posts/some-genuine-thoughts-vibe-coding/">vibe coding</a>, mainly because AI use was for one function because I couldn't figure it out but also because I was very conscious about what I was coding.) </IcebergNotes>

Morsel #22: you can animate SVGs

Mon, 07 Jul 2025 00:00:00 GMT

TIL: you can animate SVGs and it's been in the SVG specification all along.

There are three elements:

<animate> <!--Provides a way to animate an attribute of an element over time.-->
<animateMotion> <!--Provides a way to animate an element along a motion path.-->
<animateTransform> <!--Provides a way to animate an element as a transformation (e.g. skewing, rotation, scaling).-->

The good thing about this is that, depending on your use case, it makes for a great substitute for GIFs which can balloon in size depending on the frame rate and the color depth. With a SVG, you could get a small file size and the best resolution possible. Even better if it's small enough to use inline!

Thanks to Vincent Warmerdam for the tip (who gives an example using a couple of tools to make it).

Morsel #21: meta values

Tue, 17 Jun 2025 00:00:00 GMT

I saw a post talking about a jokey meta tag and remembered that you can add any kind of meta tag to your site if you want. It won't be recognised by any search engine but it won't break your site either.

So I've added my own to this site:

<meta name="values" content="Free Palestine, Black Lives Matter, and Trans Lives Matter" />

The idea is to show what I stand for in the code itself (besides the Palestine flag at the bottom of my page). And it makes sense to have it in the head.

I wondered if other people joined in whether I could create a directory of sites for it. Feel free to email or message me if you're interested. All you'd need to do is add the code above but replace the content value with your own values. I'd do it via GitHub and you'd have to submit a PR for me to approve (so nothing shitty gets in).

Morsel #20: meta http-equiv status

Wed, 11 Jun 2025 00:00:00 GMT

import IcebergNotes from '../../components/IcebergNotes.astro';

An interesting question came up at work today where I was asked about a line of code and whether it'd work. The code in question was this:

<meta http-equiv="Status" content="401">

The idea was to use this as a replacement for server-side code to serve a 401 status code. I initially said "yeah, sure" until I took a second look and realised I'd not seen the Status value before.

meta http-equiv

A quick thing on http-equiv. It's an attribute that simulates an HTTP response header (equiv is short for 'equivalent') and is mostly used for things called meta refreshes where the page refreshes or redirects on the client's side instead of the usual server-side refresh/redirect (like a 3xx status code). In that case, it'd look like this:

<meta http-equiv="refresh">

It's generally recommended not to do this for redirects but if you don't have server access, it's a close-enough substitute for the user, even if the UX isn't ideal.

In the case of http-equiv="Status" it looked familiar but not quite, hence why I had to take a second look. A quick Google returned one exact result but it wasn't from MDN or even W3Schools. It came from Indie Web:

meta http-equiv status is an HTML extension specification that adds the "Status" value to the existing meta element's http-equiv attribute as a method for representing the HTTP Status code to be returned by a web server serving that HTML document, and for consuming applications like webmention receivers to parse and interpret as such for use-cases such as representing a 410 Gone deleted resource on static hosting that often disallow setting HTTP headers directly.

This sounded fair in theory but when I checked the only example in the doc, it returned a 200 status code instead of a 401. What's more, the requirements were quite specific, both for the server and the "consuming application". Because of all these factors, I figured it wasn't a feasible solution.

Another thing to note: server activity happens before page load so offering a status during page load won't work. It's too late by then and this will miss the mark. As you saw above, meta refreshes only simulate server responses and would cause issues for users coming from a search engine expecting one page only for it to refresh on load. If the 401 was to work, the page would load as normal—serving a 200—and then suddenly give a 401 error page (with or without the code).

A word on 410 vs. 404

A 404 status code tells a server the resource in question could not be found. There are a number of reasons why that might be the case but the main ones are that the page was removed or the URL was incorrect in someway. A 410 status code tells a server the resource in question is permanently gone (literally). Now you might be thinking why we use 404s if we delete pages when 410 is probably more appropriate. If you deleted, it's gone, right? Well, 404 is a softer default. You could delete something and decide to reinstate it and it's easier to bring it back to the same URL and have a search engine pick it up and reinstate it to the index. But a 410 is meant to be a permanent goodbye.

If you really to nuke a page, 410s are objectively better and quicker to get picked up by Google and dropped from the index (but by a negligible amount, according to John Mueller). However, in most cases, 404 does the job. What's more, 404 is better supported with CMS's and other frameworks as they usually offer templates and functionality to serve them should a page gets deleted. 410s tend not to have the same level of support so you may have to create this routes and pages manually (if you even have access to do so). And you might not even see the difference once you have.

So yeah, if you're getting traffic from a regularly visited external link and that page was deleted and it's causing server issues, go for a 410. Otherwise, 404 works just fine.

<IcebergNotes> <p>I'm likely to be missing some nuances, exceptions, and quirks of 410s, as well as the http-equiv I've quoted. If you have a "well, actually" to throw my way, feel free to email me but be kind :)</p> </IcebergNotes>

Morsel #19: a marimo notebook as a blog post editor?

Fri, 18 Apr 2025 00:00:00 GMT

Links

For when an IDE or Markdown editor doesn't quite cut it.

This is a marimo notebook that functions as a blog post editor.

It works best in app mode with a grid layout to mimic the UI of a minimalist post editor but you can follow the usual flow in edit mode too. I use Astro for my website so I built this to make blog editing more visual. It comes with a section to add my metadata and the body text, view a preview (which renders the Markdown), and when I click the "Post" button, it generates an MD file with all the correct Markdown (so far)

<figure style="margin-bottom: 1rem;"> <img src="/images/marimo-blogpost-editor.webp" alt="the UI for my blog post editor app" loading="lazy" class="shdw"> <figcaption>Ain't it pretty?</figcaption> </figure>

Why did I make this

After reading about Vincent Warmerdam's cool blog post editor made with Flask, I tried it myself. But I soon realised that my version didn't work as well and I know nothing about Flask so rather than debug someone else's concept, I'd make my own. I use Sublime Text normally but I've also tried Obsidian and other Markdown editors in the past. This was a nice idea because it gives more immediate feedback after I've written something rather than saving and switching to my browser (which doesn't always update immediately).

Things I could do

At the moment the blog editor just saves the Markdown file in the directory that your notebook sits in so I will add a file browser to select the folder my blog post should go in.
This only works for regular posts but I have different post types such as shorter blogs called <span lang="pt">recortes</span>, posts that are just lists, morsels which are code-based blogs and others. I could add a dropdown of different frontmatter options as they all require unique metadata and then I won't have to manually edit anything.

Morsel #18: drumples

Thu, 03 Apr 2025 00:00:00 GMT

I made a marimo notebook that pulls 3 random drum samples and lets you play them along with a random song from a Spotify playlist(s).

<details> <summary> <strong>Disclaimer</strong> </summary> <p>I used a local LLM (large language model) to generate the code for the Spotify playlist song randomiser, in the name of vibe coding. This was intended to be a personal project and everything worked with minimal changes. You're welcome to change things up if they're suboptimal.</p> </details>

Requirements

I sadly can't demo it as I don't want to make Spotify API access public so you'll have to sign up yourself. But once you have those credentials and you've got your audio files ready, click Generate New Set to get a randomised set of kick, snare, and hi-hat sounds along with a track from your randomised Spotify playlists.

Why did I make this

I make beats a lot and I buy/download a lot of drum packs over the years. That means hundreds of drum packs get unused thanks to recency bias. A project like this can help me use drums I would never have used before, as well as shake things up with the samples I use.

Ideas and improvements

The code isn't great so feel free to critique it (but please be kind if you do; I'm a self-taught Python coder!)
I'm also not great with Git so feel free to critique how I set up this repo (again, please be kind!)
I have been working on having the sounds play a mini loop but I've not included that in this repo.
I guess you could replace Spotify playlists with YouTube videos or any other streaming platform with an API

Morsel #17: Small and specific wins the AI race

Thu, 27 Mar 2025 00:00:00 GMT

In my opinion, small, localised NLP projects are the best uses of AI (as an overarching discipline). Embeddings and classification are underrated building blocks that don't get talked about as much as general purpose LLMs because they're not sexy or "useful" to the wider public or B2B.

Morsel #16: marimo

Tue, 11 Mar 2025 00:00:00 GMT

import {YouTube} from 'astro-lazy-youtube-embed'

marimo is a new type of reactive notebook for Python which builds on the work you might have seen in Jupyter Notebook and Streamlit and combines them into an interesting package.

As the site says, it's reproducible, integrates with popular progamming tools like GitHub and SQL (which is built-in), and can either be used as a regular Python script or transformed into an interactive app whilst maintaining the code in the background.

Just as an FYI: I'm not sponsored or affiliated with marimo, I just love what I've seen so far and wanted to share it here. I've already started building some apps with it and they've come in very handy. I'm looking to refactor some other existing Jupyter Notebooks and Streamlit apps into marimo for ease of use, improve reactivity, and better real-time feedback so watch this space.

Morsel #15: en-150

Fri, 15 Nov 2024 00:00:00 GMT

While snooping through a website's <code>hreflang</code>, I noticed a unique ISO code: <code>en-150</code>.

According to a number of source, en-150 is the language subtag for English spoken in Europe, which comes in handy as a catch-all. While it is valid, I'm not 100% that Google uses it as a hreflang value although on their old Think With Google page they use it as a data-* value (via Stack Overflow). Here's one example:

<link rel="alternate" href="https://www.thinkwithgoogle.com/intl/en-emea/" hreflang="en-dz" data-code="en-emea">

In this case, en-emea is used to cover English speakers in the EMEA area, which covers Europe, the Middle East and Africa.

Knowing how data-* attributes work, I suspect this is more of a JS data thing and doesn't affect hreflang at all. But still interesting to see it used.

If you know more about this or have spotted other examples, please let me know as I thought this was cool.

Morsel #14: Textlist to array

Mon, 07 Oct 2024 00:00:00 GMT

I have to change text lists into Python lists a lot and I always do it in Sublime Text with some regex. But I'd rather have a quicker way to do it by pasting and clicking a button.

So I made this! It takes a text list of strings and converts it into an array and then displays the array in a <code>pre</code> tag.

Update - 7th Feb 2026: so I realised today that this was susceptible to an XSS attack so I added a HTML sanitiser called JS Html Sanitizer.

<form id="string-form"> <label for="strings">Enter your text strings, one per line:</label> <div> <textarea type="text" id="strings" name="strings" cols="80" rows="10" required></textarea> </div> <button type="submit">Generate array/list!</button> </form>

    // taken from https://stackoverflow.com/questions/23187013/is-there-a-better-way-to-sanitize-input-with-javascript
    function sanitiseString(str){
        str = str.replace(/[^a-z0-9áéíóúñü \.,_-]/gim,"");
        return str.trim();
    }

    function generateArrayText(stringVals) {
        const stringsToArray = stringVals.split('\n')
        const sanitisedArray = stringsToArray.map(string => HtmlSanitizer.SanitizeHtml(string))
        const arrayText = JSON.stringify(sanitisedArray);
        const displayText = document.createElement('displayed-text');
        arrayContainer.style.background = "#111";
        arrayContainer.innerHTML = arrayText;
        arrayContainer.appendChild(displayText);
    }
</script>

Morsel #12: styling a WordPress post to look like a Bluesky post

Thu, 23 May 2024 00:00:00 GMT

Even though I've deleted Twitter, I miss just throwing a thought out into the ether. WordPress has post formats that can facilitate that. They are:

aside: like a note
gallery: a gallery of images
link: a link to another site (great for linkblogs)
image: a single image
quote: a quote
status: a status update, similar to a tweet
video: a video or video playlist
audio: an audio file or playlist
chat: a chat transcript

Most of these I probably wouldn't much if at all but status intrigued me. I already use asides on all of my blogs front page but I wanted something different for those quick quips or musings. Because a lot of modern WordPress themes don't come with post formats out of the box, you have to enable them so I added this to my theme's functions.php file:

add_theme_support( 'post-formats', array( 'POST_FORMAT_NAME' ) );

Then you have to create a template for your format(s) (unless your theme has them already) and that's where I had to get really creative. Here's what a Bluesky post looks like:

To get that working, I wrote a function in the template-tags.php file in my inc folder that retrieved my author name, my website (since it was also my Bluesky handle), and my avatar. All this info was accessible via the get_the_author_meta() function:

function status_author() {
    $author_avatar = get_avatar( get_the_author_meta( 'ID' ), 64 );
    $author_name = get_the_author_meta('user_firstname') . ' ' . get_the_author_meta('user_lastname');
    $url_cleanup = array("https://" => "", "/" => "");
    $author_url = strtr(get_the_author_meta('url'), $url_cleanup);
    echo '<div class="status-author-meta">' . '<div class="status-author-meta-avatar">' . $author_avatar . '</div>' . '<div class="status-author-meta-text">' . '<span>' . $author_name. '</span>' . '<span>' . '@' . $author_url . '</span>' . '</div>' . '</div>';
}

I also added a bit to get rid of the URL scheme and all the slashes. Nice and neat! Then, I added the status_author() function to my template file (content-status.php):

<?php if ( is_single() ) : ?>
        <h1 class="entry-title">
            <?php print_post_title(); ?>
        </h1>
<?php else : ?>
    <?php status_author(); ?>
    <div class="byline-text" style="margin-bottom:1rem;">
        <?php the_content(); ?>                 
    </div>
    <?php status_posted_on(); ?>
<?php endif; ?>

<?php if ( is_single() ) : ?>
    <br>
<?php endif; ?>

<?php 

if ( 'post' === get_post_type() ) : ?>

<?php
endif; ?>
</section><!-- .entry-header -->

What this says is to check if the page is a "single"—like a blog post—and if it is, add the title, otherwise add the status author info, the status text, and the date it was posted. I added some CSS to make mimic the Bluesky post design:

/* please don't roast my CSS, I'm not a web dev!!! */

.status-author-meta, .status-author-meta-text, .status-author-meta-avatar {
    display: flex;
}

.status-author-meta {
    margin-bottom: 1rem;
}

.status-author-meta-text {
    flex-direction: column;
    justify-content: center;
    margin-left: 1rem;
    letter-spacing: 0.25px;
}

.status-author-meta-text span:first-child {
    font-size: 1.25rem;
    font-weight: 700;
}

.status-author-meta-text span:nth-child(2) {
    font-size: 1rem;
}

.status-author-meta-avatar img {
    border-radius: 50%;
}

.status-author-meta + .byline-text a {
    font-weight: 700;
    text-decoration: underline;
}

.status-author-meta + .byline-text a:hover {
    text-decoration: none;
}

And <span lang="fr">voilà</span>!

Of course, how I put this together was specific to my setup and theme but the fundamental techniques are universal:

add theme support for formats
write the functions to get the author data
output it in a template
style it with CSS

Reclaim your status updates!

Morsel #11: how to check if a DOM element is in the viewport

Wed, 22 May 2024 00:00:00 GMT

In my line of work, I struggle with finding DOM elements that cause issues but are otherwise hidden—by display:none—or obscured by above-the-fold menus. I came across the latter the other day and the issue was lazy-loading. I wasn't sure whether the element classed as "in the viewport" despite not being immediately seen by the user unless they unfolded the menu.

So I looked for a way to check and came across a JavaScript method called getBoundingClientRect(). It returns a DOMRect object that shows the size (width and height) and position (x and y coordinates) of an element in relation to the viewport.

There are other ways to do it but this seemed the easiest for me (and coolest because I'd never heard of it before). Here's an example taken from Geeks for Geeks:

function myfunction(value) {
    const item = value.getBoundingClientRect();
    return (
        item.top >= 0 &&
        item.left >= 0 &&
        item.bottom <= (
            window.innerHeight ||
            document.documentElement.clientHeight) &&
        item.right <= (
            window.innerWidth ||
            document.documentElement.clientWidth)
    );
}

const elementToCheck = document.getElementById('div1');

window.addEventListener('scroll', () => {
    if (myfunction(elementToCheck)) {
        console.log('Element is visible in viewport');
    } else {
        console.log('Element is not visible in viewport');
    }
});

After I put my element in as the value of elementToCheck, it came up as "in the viewport" and therefore shouldn't be lazy-loaded. Easy fix!

Morsel #10: Ticking all the boxes

Tue, 23 Jan 2024 00:00:00 GMT

I was trying to create a data report and needed to tick checkboxes to include certain information. Unfortunately, there were over 500 boxes and no option for selecting all of them so I Googled how to do it using JavaScript + the browser console.

Stack Overflow came through for me and I thought I'd share the answer here (thanks to ashleedawg):

How to tick all checkboxes in your browser:

Open your browser's console (the shortcut is usually Cmd/Ctrl+Shift+I (Chrome) or Cmd/Ctrl+Shift+I (Brave))
Enter the following: <code>$("input:checkbox").attr('checked', true)</code> (make sure to change <code>true</code> to <code>True</code> for Firefox)
Press Cmd/Ctrl+Enter to fire it and all the checkboxes should be checked!

I've only tested this on one website on Brave and Firefox so feel free to email me if it doesn't work for you!

Morsel #9: Oapy

Thu, 23 Mar 2023 00:00:00 GMT

My ninth morsel is a work one.

Oapy is a web app that uses OpenAI's GPT models to generate SEO content at scale. That means anything from metadata (titles and descriptions) to category copy. But with the Playground mode (similar to OpenAI's Playground tool), you can generate any kind of written content.

Requirements

Internet access (no code necessary!)

How to use

Follow the Impression guide above to find out how to use Oapy.

Python functions used

Morsel #8: Bandcamp Album Length Calculator

Sat, 04 Feb 2023 00:00:00 GMT

My eighth morsel is a Python script that returns the running time of an album from Bandcamp in your CLI of choice. I previously used a JS plugin/applet in my browser but it stopped working and couldn't find a replacement (there probably is one but I also don't like installing add-ons unless I have to because Chromium browsers already hog enough memory!)

Then I thought "why not create a quick script to do the job?". I have also made this into a Streamlit app but that'll be coming in a future morsel. In the meantime, I discovered argparse and thought it'd be handy for me to have everything run in my CLI and print out the album length. No frills!

Requirements

Python 3
Beautiful Soup
Requests

How to use

In your command line, enter python3 bandcamp_calc.py -u [URL] and it will print out the running time in seconds.

Python functions used

Morsel #7: Random Pokémon Team Generator

Sat, 23 Jul 2022 00:00:00 GMT

My seventh morsel is a script that generate a random team based on all fully evolved Pokémon from Red/Blue/Yellow (excluding Legendaries and Mythicals).

Requirements

Python functions

Morsel #6: Federer in The Guardian

Sun, 10 Jul 2022 00:00:00 GMT

My sixth morsel is a quick script that scrapes The Guardian API for articles featuring "Federer" in the headline. This can, of course, be amended to search for any query in the API but I wanted some article to fill out my Federer wiki page.

Requirements

Morsel #5: Black fabric

Fri, 08 Jul 2022 00:00:00 GMT

My fifth morsel is called Black Fabric and it's a Python script that generates five randomised names that incorporate:

A fabric type as the first name
A common surname of African diasporan descent (ie. Black folks from the UK, the US, Canada, the Caribbean, and other Central American countries whose ancestors were enslaved people)

Requirements

Links

Credit to @yedoye for the idea and everyone in the replies.

Morsel #4: bulk upload to Internet Archive with waybackpy

Thu, 26 May 2022 00:00:00 GMT

My fourth morsel is a way to backup your site to the Internet Archive.

Requirements

Links

GitHub link

I adapted some code from Koray Tuğberk GÜBÜR by using advertools to pull pages from a sitemap and to_list() over apply() and a lambda function when extracting URLs to iterate over. Purely a preference thing.

Also shout out to Elias Dabbas for the advertools library which has made sitemap handling in Python so much easier.

Morsel #3: a custom font preload fix in WordPress

Wed, 25 May 2022 00:00:00 GMT

My third morsel is actually a WordPress fix.

I decided to write this as I couldn't find the answer I was looking for myself and thought it might help anyone who had the same problem in the future.

Problem: I realised the custom self-hosted fonts I was using on my WordPress sites weren't actually loading. I realised this after seeing the following message:

The resource X was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate ‘as’ value and it is preloaded intentionally.

That basically means the font loaded but it wasn't used at all. I tried all the different things that Stack Overflow said but it still wouldn't work. Long story short: the @font-face declarations I was making in the main theme CSS file weren't acknowledged so I put them in the WordPress Customizer panel. To do that:

Go to your Admin panel and then go to Appearance > Customize > Additional CSS
Enter the appropriate @font-face code

I used the following @font-face format:

@font-face {
  font-family: 'FontName';
  src: url(PATH) format('woff2');
  src: url(PATH) format('woff');
  font-weight: whatever that is;
  font-style: normal;
  font-display: swap;
}

In terms of the preload code, I recommend the following:

<link rel="preload" href="PATH" type="font/woff2" as="font" crossorigin="">

I've gone with woff2 only as it's widely supported and smaller in file size, which compounds the benefits of preloading for page speed. Just be careful of FOUT and set your Cache-Control headers!

And make sure to put that ahead of the wp_head() in your header.php file so it can preload before the CSS (I believe that's how it works lol).

Morsel #2: The YouTube Thumbnail Extractor

Sun, 01 May 2022 00:00:00 GMT

My second morsel is a Python script that extracts thumbnails from YouTube videos.

Requirements

Add the URL to extract the thumbnail from and it will display it at the bottom. Currently only works if you put in the full YouTube video URL without any parameters (so not youtu.be or ?t=8 for example). Again, open to suggestions on how to make it work with any valid YouTube URL (as I'm not so great with re yet)

Morsel #1: The Tag Suggester

Fri, 15 Apr 2022 00:00:00 GMT

My first morsel is a Python script that extracts all the tags from my blogs and creates randomised Google search URLs for content ideation.

Requirements

Links

GitHub link Streamlit app

Example from Cultrface:

https://google.com/search?q=martin+luther+king+soup

As they are randomised, some of the results are more nonsense than anything but you never know. That's the beauty of it—you could end up down a rabbit hole you never knew existed.

Feel free to fork the repository and make your own version (subject to the AGPL-3.0 License)

UPDATE: So this script doesn't update the JSON files containing all the blog tags as I had hoped. Still looking into how to do that but if anyone reading this knows how to update a JSON file via a Streamlit app hosted on GitHub, I'd love to know.