MoreRSS

site iconRobb KnightModify

I am the lead developer at Radweb working on InventoryBase and related products. I also work part-time as a developer for MacStories.
Please copy the RSS to your reader, or quickly subscribe to:

Inoreader Feedly Follow Feedbin Local Reader

Rss preview of Blog of Robb Knight

Lens: Meta Tag Checker (Robb's Version)

2024-12-23 23:53:34

There are a few ways people like to check the meta tags on their sites. I previously used Metatags.io but there's also Hey Meta and probably a lot more of them around I don't know about. But, as the old developer saying goes, none of them did exactly what I wanted so I built my own.

TL;DR

See Lens here.

I had previously started this project a long time ago using Netlify functions but I didn't want to be tied to Netlify so I went back to the thing I always do: PHP.

The backend is pretty stright-forward: given a URL, fetch the page then extract the meta tags using DOMDocument. This example is simplified and doesn't have all the error handling, but you get the idea.

$site = [
'charset' => null,
'found' => []
];

$contents = @file_get_contents($url);
$document = new \DOMDocument();
@$document->loadHTML($contents);

$metaElements = $document->getElementsByTagName('meta');

foreach (iterator_to_array($metaElements) as $mel) {
if ($mel->getAttribute('charset')) {
$site['charset'] = $mel->getAttribute('charset');
$site['found'][] = 'charset';
}
}

header('Content-Type: application/json; charset=utf-8');
echo json_encode($site);

For the front end I wanted to give Alpine a try after reading Blake's post about it - for a project like this where I mostly want to toggle some things based on data existing it was perfect. I initalise the data I need, mostly as null, then when data is fetched I can set things as ticked or filled in. For example, this is the preview card code:

<div class="preview">
<div
class="preview-image"
:style="`background-image: url(${site.image})`"
>
</div>
<div class="preview-details">
<div
class="preview-details-title"
x-html="site.title"
>

A Title
</div>
<div
class="preview-details-desc"
x-html="site.description"
>

a description
</div>
<div
class="preview-details-site"
x-html="site.host"
>

example.com
</div>
</div>
<div
class="preview-details-fediverse disabled"
:class="site.fediverse ? 'enabled' : 'disabled'"
>

<svg class="icon"><use xlink:href="#mastodon"></use></svg>
<div>More from this person</div>
</div>
</div>

x-html sets the content of an element, x-show only shows an element if it's set, :style runs the rules as JS so they data can be filled from the data (in this case, the site image).

It checks exactly the things I care about and nothing more. I don't check Twitter's meta stuff because I've never used it and I suspect it's less relevant than ever now. It does check for the fediverse:creator tag but it doesn't verify if you've set it correctly in the Mastodon backend. It uses Grandsans for the headings because it's a lovely font.

See Lens here and you can view the source on GitHub.

EmojiStorm

2024-12-20 05:22:24

You know how sometimes you do one thing then you think "oh I'll do this other thing" then another thing related to that and the next thing you know you're making a weird website from a web component someone made because you can? No? Anyway.

EmojiStorm is such a project. It starts with one instance of Zach's snow-fall component then you can just keep adding more but it's a random emoji.

It gets a bit slow after ten or so depending on your computer so you've been warned.

Check out EmojiStorm here.

Chicken Tinga Recipe

2024-12-10 20:59:44

I haven't stopped thinking about this recipe since I made it for the first time last week. It's from Brian Lagerstrom who is my favourite YouTube chef person. I've modified the recipe in a few different ways but it's mostly the same as his if you want to watch a video of it instead, he's got you covered.

I'm using store-bought flatbreads for this which are lovely, but I'd love to find to find a nice, easy, flatbread recipe. If someone has one, let me know.

  • 1.2kg Chicken Thighs
  • Oil
  • 1 Chopped Onion
  • 3cloves Sliced Garlic
  • Salt
  • 25g Tomato Puree
  • 400g Sun-Dried Tomatoes/Fire Roasted Peppers
  • 2 Large Chopped Tomatoes
  • 200g Chicken Stock
  • 50g Chipotle Paste
  • 5g Salt
  • 20g Apple Cider Vinegar
  • Flatbreads
  • Little Gem Lettuce
  • Sour Cream
  • Immersion Blender

Pre-heat the oven to 200°c/400°f.

Lay out chicken thighs on a sheet tray. Generously salt both sides and roast in the oven for 25 minutes.

Add a oil, chopped onion, sliced garlic, and salt to a pan and fry on medium heat for 5 minutes.

Add tomato puree to the pan, mix, and fry for 2-3 minutes.

Add sun-dried tomatoes/fire roasted peppers, large chopped tomatoes, chicken stock, and chipotle paste to the pan. Simmer for 10-15 minutes until it's thickened a bit and the fresh tomatoes are cooked through.

Stir in salt and apple cider vinegar then blend with an immersion blender until smooth.

Shred the chicken by hand then mix it with the sauce.

Lightly grill the flatbreads, add a tablespoon of the chicken tinga to each flatbread, add some chopped little gem lettuce, and drizzle with sour cream.

Link Dump #5

2024-11-27 20:06:04

Time for a heaving link dump becuase I'm well into triple figures in my Raindrop inbox.

First up are a pair of intorductions: one to Alpine.js by Blake of HTML for People fame and one for htmx. I'm always on the lookout for something a bit less complicated than a full-on framework.

Things you forgot (or never knew) because of React is a scathing look at the state[1] of React in comparison to other, similar frameworks and it's not great.

Ergonomic Static Site Blogging. Someone else on a quest to have a nice CMS for a static site with no success.

Leon and Melanie both wrote up their experience with Coolify with the latter setting up a Bluesky PDS for shits and giggles[2]:

The hardest part of all of this was Bluesky’s instability. Bluesky likes to pretend that it is “decentralized” or “federated.” It sure as shit isn’t either of those things.

How I teach Eleventy from scratch is an excellent intro to Eleventy by Juha-Matti; this will be my go-to next time someone asks about how to get started.

One more tutorial, this time for CSS sprite sheet animations.

Coding Font sets up a bracket like the sports do to choose the best coding font for you. It lacks a few popular ones but it's a fun distraction for a couple of minutes.

Kagi, the search engine, open-sourced their feed parser. "It's 10x-100x faster than a traditional feedparser".

Can I PHP? It's like Can I Use but for PHP features. Fun.

I was wronged by Safari and was sent this great post on browsers by Tyler. Also, it's not just me.

Gamery released ScanDex, a "curated barcode database for video games" and Foursquare released a huge places dataset.

I don't have much call for doing web videos but player.style look likes a great resource for different styles.

Johnny mentioned he used Migadu Email for his email. Pricing looks great, unlimited domains and mailboxes. If I ever need to move off of iCloud, this might be the way to go.

“Back to the Future” and “The Goonies” take place on the same day. Can't argue with this logic, it's canon now.

I am obsessed with Wes Tank Rapping Fox in Socks on the Dr Suess channel.

An Alkaline Trio font.

And finally, I want this clothes shop for dads idea to be a reality.

you're sure as hell not gonna advertise some bugger else's T-shirt business on your body, so you give him twelve quid and he hands you Bin Bag 2


  1. Not an intentional pun

  2. or more likely, through genuine curiousity

App Defaults 2024

2024-11-26 04:18:38

It's been just over a year since Dual of the Defaults burst into our lives and my time was consumed by tracking nearly 400 blog posts. Rather than write out last years list again, here's what has changed since then:

To-Do: I'm all in on Godspeed. Reminders is just a bit...annoying?

RSS: Self-hosted Miniflux with Reeder Classic on iOS and NetNewsWire on the Mac. Reeder is new because it has a dark icon, NetNewsWire doesn't right now.

Bookmarks: Self-hosted LinkAce.

Read-it-Later: Raindrop. Ominvore as it happens is now gone but I switched a while ago.

News: I'm still using Mastodon but on the advice of Johnny, BBC news is gone from my home screen.

Installing GoToSocial on Coolify

2024-11-21 05:00:33

For various reasons I had occasion this evening to give GoToSocial a try so I installed it on my server that's running Coolify but hit a couple of issues which I was able to work around with the help of Lewis and Brandon.

First up because it's running a reverse proxy, I needed the third option in the Docker compose file.

ports:
# - "443:8080"
## For letsencrypt:
#- "80:80"
## For reverse proxy setups:
- "127.0.0.1:8082:8080"

The second issue was GoToSocial couldn't access the database, giving this error in the logs:

sqlite ping: sqlite3: unable to open database file

This GitHub issue showed it was a permissions issue where the user specified in the docker compose isn't the one that has permissions for the gotosocial/data file. I could have tried to work out what the user and group was or I could chmod my way out this problem. Guess which one I picked. In Coolify go to Terminal in the sidebar, choose the project GoToSocial is installed on then connect and cd to the directory. Then set permissions on the data directory.

$ cd /data/coolify/services/isjdbvfihsavfids/
$ chmod 777 gotosocial/data

I got the directory it's installed at (/isjdbvfihsavfids) by checking the storage tab on the GoToSocial service in Coolify.

Other notes:

  • /settings gets you to the settings page of your account.
  • Default visibility of posts is "unlisted", a difference from Mastodon where it's public by default. You can change this in settings.
  • Other instance-level settings (like custom CSS on profiles) can be changed in the config.yaml file, see the docs on configuration here.
  • Making a user an admin requires restarting the server.

I'm still playing around with GoToSocial but it's looking like a good solution for what I want - something easier to maintain than Mastodon and less resource-intensive.