#WebDev

Organizing the Eleventy config file by @lene was incredibly useful in helping me clean up my site config (which was a complete mess) lenesaile.com/en/blog/organizi

https://social.lol/@robb/109903009636568089

Anyone know if there's a way to export/access all posts boosted by an account (in this case, me)? It's not included in the account export and ideally I don't want to have to page through the API to get them all ideally.

https://social.lol/@robb/109886672287150887

CSS Nesting is in Safari tech preview webkit.org/blog/13813/try-css-

One step closer to me never having to properly learn how Sass works.

https://social.lol/@robb/109873941050174865

I see I'm not the only one going a bit wild with my /now page, @cory's making me look a bit more sane: blog.coryd.dev/2023/02/automat

https://social.lol/@robb/109825243204704520

XKCD 2730 xkcd.com/2730/

Panel one: it took some extra to build but now we'll be able to use it for all future projects. How to ensure your code is never reused. Panel two: lets not overthinkg it if this code is still in use that far in the future we'll have bigger problems. How to ensure your code lives forever.
https://social.lol/@robb/109818090845283270

I was so deep into changes and I was committing to main branch so I just pushed it as is, yolo as the kids probably say.

- New navigation with a cute little @prami
- Tweaked the text sizes and links
- Microblog posts are all on my site now (pulled in from micro.blog archive and from here)
- Probably some other stuff I can't even remember

rknight.me/

A screenshot of my website. Says Robb Knight at the top with a retro font, a row of social icons, and two rows of page links.
https://social.lol/@robb/109802661643876028

Not sure how useful this is to other people but if you want your omg.lol profile and now pages to have different styles, you can use the `has` selector (in this example making my /now page wider than my profile page)

`body:has() main { max-width: 50em; }`

https://social.lol/@robb/109802478539334744

New Post: Notes on Migrating a Wordpress Site to Eleventy

Posted a follow-up to my webmentions post with some additional links and tools including an Eleventy plugin I didn't even think to look for πŸ€¦β€β™‚οΈ

πŸ’¬ Adding Webmentions to Your Site

In which I fumble through and somehow get this working. I've tried to explain what I've learnt as best I can but I'm still not 100% on how this works if I'm honest πŸ€·β€β™‚οΈ

A grid of avatars labelled as likes and boosts. Then a comment below from a person called Alans

Webmentions are live and working on blog posts right now if you wanna take a gander while I try and write this post.

Look at all these cool people (it works πŸ™Œ)

A grid of circular avatars labelled as Likes.

Wondering if anyone decides to show webmentions for pages on their site as well as blog posts? Blog posts is obvious but I'm not so sure about pages.

There is discussion happening there so seems like maybe yes? I dunno.

With the help of eleventy-plugin-og-image I now have automatically generated og images for my metatags on my site πŸ‘Œ

A screenshot of my meta image. It says Robb Knight and the blog post title of Letters January 2023

Get Mastodon Account ID from Username

Quick write up of getting your account ID for using the Mastodon API.

I've been using Clean Links in Safari the past few days to nuke tracking parameters from URLs before I even get a chance to copy them and it's been working really well. Fair warning it breaks some outgoing links from Facebook, so it's double-good.

10 years ago today Pebble starting shipping to backers. It was limited but I had so much fun making apps and watch faces for it.

3 pebble watches with a GoSquared app, a 512 pixels logo, and a Zelda-inspired watch face

DNS is done...DNSing, so here we go: chaosweb.space

Weird things! Wacky things! Fun things!

Just a bunch of fun and weird websites to peruse, add more on Github or send them to me!

A white square that says chaosweb.space in pink comic sans with yellow stars in the background

πŸ‘€

A notification that says Chaos Web has been deployed

I did forget about a project last night: Knockoffia, a fully (sort of) working Nokia 3310 with audio clips recorded by me. This was a hackathon team effort and not just me.

A nokia 3310 with a screen that says Devs Do Design

Upgraded my site to 11ty v2 with zero issues πŸ‘ Also added caching to my data files which I've been meaning to do for ages. Build with cache is down to 0.52 seconds ⚑

πŸ‘€ New post: Web Scraping with Node and Cheerio.

First in at least one more spin-off from my now page post. This is my first proper tutorial-type post so let me know if you spot any glaring errors or have feedback.

It’s the year of chaos on the web (I decided) send me links to your weird and wacky projects πŸ€ͺ

Last one: Stig Quote Generator.

I grabbed every "some say..." Stig intro from the Top Gear wiki, split them, and then randomised them.

"Some say that he can’t eat mashed potato for religious reasons, and that when he dies he thinks you’ll go to Devon"

Weird old project number three: Who's That Emoji? a game Γ  la "Who's that PokΓ©mon" from the anime.

It uses the fact that you can (sometimes) color emojis in css but it doesn't work all the time. I did this in about 10 minutes, question five actually shows you the emoji πŸ™ƒ

A colorless heart emoji and the website is asking which color it is

Old project two: Back to the Future drinking game.

Shortly after I made this, we played it, and I don't remember much. Needless to say the Robb Knight corporation takes no responsibility for injuries, this website is for education purposes only, do not actually play this.

Text that says Back to the Future drinking game

I think I'll do a post or two to go deeper into some of the scraping and API stuff I'm doing for my now page.

⭐ Automating My Now Page: "a veritable grab-bag of python and node scripts, web scraping, and APIs"

A grid of album art, titled Albums

πŸ“‹ Echo now supports JSON feeds and I fixed a bug where setting up webhooks in the config editor wouldn't work in some cases.

πŸ’» New blog post: Navigate Project Folders with Pick

Using Pick and a bash alias to navigate the ~100 projects in my sites folder.

A screenshot of code showing an alias to list files in a directory and cd to that directory

πŸ‘GitHub issue forms are available for private repos now

πŸ‘Ž required isn't supported on private repos

When Sara asks for a thing, you make the thing (sometimes).

omgnow.js - embed your omg.lol now page on your website. https://omgnow.rknight.me/

I just noticed that omglolcli was my 100th repository on GitHub πŸ’―

Speaking of silly things, I just pushed V1 of the omg.lol cli

A terminal with a pink heart ASCII image

"...build useless stuff! Silly stuff! Stuff that's half broken. Just build!"

I am deep into this omg.lol CLI.

There's way more features than I considered when I started this.

Music support is now in Lantern. Search for albums, artists, or tracks but only albums have artwork because Last.fm don't expose artwork for artists or tracks.

A screenshot showing a grid of icons: games, tv, music, album, song, and artist.

πŸ‘‰ Direct link to Lantern for those of you who won't want to read anything.

Bye Almanac, Hello Lantern:

I've missed being able to quickly search for a movie or TV show to grab the year or link when posting to Micro.blog. Which is why I built Lantern.

Saying goodbye to an okay blogging platform with an excellent name and replacing it with Lantern.

A screenshot of Lantern showing a search for The Last of Us, a search result with year and an image, and a box with the markdown in it to post to micro.blog

Foiled by CORS errors. Bedtime me thinks.

Project Lantern coming along a lot faster now I've switched to Netlify functions for the backend πŸ”₯

πŸ”Š I've updated Echo with the ability to cross-post to Mastodon or post a webhook when a new item is found (the new structure allow for adding services much more easily).

The shiny new website has a config builder so you don't need to mess about in the JSON if you don't want to.

A terminal output showing Echo checking for items on status.lol and Letterboxd. New items created have a star emoji next to them.

"Nothing in this space works" - Salma Alam-Naylor on Node frameworks

Javascript, Community:

The question I keep asking though: is the divide borne from a healthy specialization of skills or a symptom of unnecessary tooling complexity?

Excellent article.

I was being a grumpy git last night about Tailwind. If anyone has articles they like about the benefits/downsides to Tailwind I'd be interested in seeing them.

I would, in hindsight, amend my original statement to "I don't completely hate Tailwind".

It does what it claims to do but I'm still not convinced it's a good solution for a lot of projects.

I think maybe I like Tailwind now. Not sure what to do with this information.

Update

I spoke too soon. It doesn't work exactly as I want so onwards with development.

Love to start building an idea only to find someone has already solved it exactly like I want. On the one hand, it's annoying to waste the work I've done. On the other, it means I don't have to build it now πŸ™Œ

πŸ”Š Import RSS to Micro.blog with Echo

Echo is a node script to post new items from an RSS feed to Micro.blog

I wanted more control over RSS feed import so I made this.

Portion of a terminal window. It shows messages for fetching for status.lol and Letterboxd, then messages showing posts being created.

Sneak peek at Echo πŸ‘€

Portion of a terminal window. It shows messages for fetching for status.lol and Letterboxd, then messages showing posts being created.

Other than status.lol and Letterboxd, what are some other feeds people tend to import into their Micro.blog? No reason at all, nothing to see here πŸ‘€

If anyones wondering if you could build a bridge between Micro.blog and Mastodon to make M.b work in Mastodon apps: you can. But you shouldn't.

Fun excerise for sure but...no.

βš™οΈ Using PageFind with Eleventy for Search

PageFind is incredibly good for search on static sites. I'll be replacing all of my custom-built ones with this at some point.

Had a play around with web components building a simple one to load statuses from status.lol. Being able to style them only from the component limits what I think I'd use them for but it was a fun experiment. If anyone has any good articles about web components, send them my way.

ntfy.sh is an interesting service. No auth, just send a message via the API to a "topic", and get notifications.

I've set it up for deployment notifications for my sites, really easy to use.

Spent an hour or so sorting out my site meta tags. This site is really useful for debugging. Do I know how to party on NYE or what?

πŸŽ™οΈ Building a Podcast Site with Eleventy.

I moved Ruminate's site from Simplecast to my own solution with Eleventy.

A screenshot of Ruminate's website showing 5 buttons for subscribing to the podcast on various services. It also shows the title of an episode called For Listeners Only and an audio player

There's always something.

Henry Cavill in a suit looking pleased. Caption says DNS change worked stright away. In the background Jason Mamoa is about to run into him with the caption SSL failing.

Uh oh, time to do DNS things. This never ends well.

Totally not related: Ruminate's website might be down for a bit.

TIL about padStart/padEnd in Javascript.

"1".padStart(3, '0') // 001

Has anyone moved away from a hosted podcast solution to something they're running themselves like a static site or something? Ruminate is using Simplecast right now but I'm sure we don't really need to be paying for it given the size of our audience.

βš™οΈ Fathom Analytics Plug-in for Micro.blog

Add Fathom Analytics to your hosted Micro.blog site

If you're still using Google Analytics you should consider a privary friendly alternative like Fathom. Dashboard example for one of my sites.

πŸ’— New Alfred workflow: StatusPost for status.lol

Quickly post a status to status.lol from Alfred

Prami's Challenge

Prami posted a challenge on social.lol to decode this string and win a lifetime subscription to omg.lol.

The string below is an encoded lifetime omg.lol gift code:

eoad1o1fpoawctnjeiri11dmj7rir6d8ehadkt4seo6u4

[...]

in this format: XXXX-XXXX-XXXX-XXXX

I figured I'd have a go which ended up being a good few hours. Then I kind of lost my mind a bit. Then went to bed having given up (and needing to be up for a flight this morning).

Overnight, Joanna solved it and I felt like I'd been presented with a sock, I was free. The solution was 3 schemes: z-base-32 then rot13 then base64. I googled a lot last night and not once did I see z-base-32 so I had no chance (although I was on a website that supports it but clearly didn't see it).

Other things I tried:

This challenge from @prami@social.lol is driving me bananas. I have to be up early but I can't stop thinking about it. I have read a lot about cyphers and hashes but I'm still no closer to solving it.

Maybe AI can do it (this has been running like this for the past 20 minutes) 🀞

In preparation for submitting my Alfred workflows to the new Alfred Workflow gallery I spent some time standarising my workflow icons because they...not good.

I put together a script to add any Feather icon onto one of a few backgrounds and I'm pretty happy with the results.

Inspired by a bunch of people here adding "now" pages, I've updated my main website to include recent posts from M.b, photos, movies I've watched, and my reading list.

Of course I had to include the Claw Webring that @whitep4nth3r@indieweb.social updated today as well.

Make some tweaks to my sites this evening:

βœ… Task 3 done: Set up a script to get my top albums for the month from Last.fm and post them here. Will run for the first time on the 1st of January, in theory 🀞

Related: someone posted about a Last.fm roundup webapp (a la Spotify Wrapped) the other day if anyone has the link.

βœ… Task 2: Release my Gif Search Alfred Workflow

  1. Point it at a folder of gifs
  2. Search with gif keyword
  3. Enter to copy gif to clipboard
  4. Be the fastest draw in the west your office slack

βœ… First task done: show my latest Micro.blog posts on my main website.

JS data files in @eleventy@fosstodon.org make this easy peasy. Code for those interested.

The work week of coding is over, time to relax with some coding (after I jokingly gave @vincent hassle for doing the same thing 😏)

Turns out I was completely wrong about not being able to copy a gif to the clipboard. Not only did @edwellbrook@mastodon.social come up with a solution, I also realised something I'd tried last night did work.

The post has been updated to reflect my idiocy.

πŸ”— How (Not) to Copy Gifs to Clipboard Programatically.

I spent many hours the last couple of nights tearing my hair out trying to make this work. I've written up all the things that don't work.

Update: I was wrong

Less than an hour before @zachleat@fediverse.zachleat.com posted about tweetback I had started work on exactly the same thing (I even asked Zach about this back in April).

So I now have an archive of my tweets and I will be making my Twitter account private.

Importing Tweets into Micro.blog

I wanted to import a bunch of tweets from my archive (mostly cat photos and a few other bits) but I didn't want to have to manually go through each tweet, copy the text and download the photos. So I wrote a script to do it for me once I had the IDs (which I got with my Safari shortcut).

One thing that had annoyed me for a while is I didn't keep a diary/note of things that happened and my thoughts during the first year of so of the pandemic but thanks to going through my archive I now have that. On a cheerier note I have a lovely collection of animals in the pets category. These additional categories were done manually (with the help of QLMarkdown) as I couldn't think of a way to automate this.

Once I had the IDs it was a case of getting the format correctly (for example, Micro.blog will fail an import with empty categories in the YAML). I was able to take ~450 tweets, convert them to markdown and import them into Micro.blog. For example, this tweet:

becomes:

---
date: 2022-10-20T13:56:19+00:00
categories: Imported Tweets
---

"You could not live with your own failure. Where did that bring you? Back to me"

![](https://pbs.twimg.com/media/Ffg6jkDXkAARD4p.jpg)

The script isn't perfect. It doesn't do anything with hashtags or usernames, nor does it check if a tweet is a reply or a retweet. The project readme.md has steps for using it on your own archive.

Building a website like it's 1999... in 2022:

I'm on a bit of a mission this year to bring back the spirit of the old web

This is an excellent post from @type_error@indieweb.social and very apt right now. Wish I could have seen the talk but this is the next best thing.

I put together a page which links all the various Micro.blog things I've made (and there's another one incoming soon I think)

πŸ”— Micro.blog Tools

Things I had to google today:

Years ago I knew so much about jQuery. Since then it's all fallen out of my head in favour of vanilla JS.

New Shortcut for Mac and iOS: Follow Mastodon User on Micro.blog

Go from a Mastodon profile like https://mastodon.instance/@cooluser to https://micro.blog/cooluser@mastodon.instance to easily follow someone.

Previous post was created with this shortcut by @ezellwrites. Being able to easily do quotes from physical books I'm reading is excellent.

Pushed the first version of my own theme for Micro.blog to Github and it's live on my site. I'm particularly happy with the post photo grid.

I used Paper as a base so credit to @amit for all the work he's done there.

Put together a plugin to add a feeds page to my Micro.blog site: It links the main posts feed as well as feeds for all categories.

It's in the plugin directory and the code is on GitHub.

I made some tweaks to my photo page to make all the containers square and consistent. I've put the CSS up here if anyone else wants to do the same.

TIL about the aspect-ratio CSS rule

Couple of small updates to Micromarks this morning:

It works for my very specific needs so I'm not sure how useful it will be to other people but the code is on GitHub if anyone is into that kind of thing.

Having decided to move my read later needs to micro.blog, I realised the current UI doesn't work quite how I want. Specifically hiding when deleting/unbookmarking and multi-delete, so I made a little web app to do exactly that.

πŸ”– Micromarks

Thanks to @pratik's help I have combined both shortcuts into one so it runs on both MacOS and iOS. Download the new combined shortcut here

Thanks to @canion I now know I can use bookmarks here as my read later service (and finally ditch Pocket). I've put together a shortcut for MacOS and one for iOS to save links to Micro.blog bookmarks

I know the hub CLI can do this, but I only used it for this one thing. Open a new pull request on GitHub for the current branch and repository

Code: https://github.com/rknightuk/dotfiles/blob/master/git/aliases.zsh

Ready for another day of decoding HTML though a multi step process.

Internet: There are many existing solutions for this

Me, a developer and also an idiot: but what if built my own solution instead

πŸ”₯️ Monzo Pot Image Generator potimages.rknight.me

Pick an icon from the Font Awesome set, pick a background color, download.

Code review

oh hi past me πŸ‘‹

Stand back everyone, I’m writing Objective-C.

web development after a two week christmas break

BOOM #PubHack4