Explore My Notes

Generate an SEO-friendly sitemap for Gatsby | Josh W Comeau

Josh keeps publishing articles that are both interesting to read and specifically useful to problems that I'm currently working on, but this time his article became the inspiration to solve a problem I've been ignoring for ages. As a result, my site should now have a sitemap (hooray!) thanks to this excellent tutorial on gatsby-plugin-sitemap. It was incredibly easy to follow, so I figured I'd log it here in case I ever need to come back to it 👏👏

I also fully endorse this sentiment:

I really don't want to have to care about SEO. It's all very nebulous, and it attracts so many snake-oil salespeople. SEO websites are the worst. And yet, if you want people to see the stuff that you build, SEO remains super important.

I don't think I mind that much about the discovery side of SEO, but when getting a boost is this simple why not go for it? I may not be chasing views, but I also don't want to hinder them.

Fix paper feed issues Canon Pixma MG5750 | Canon

More for personal use than as a note. Our Canon Pixma printer (model number: MG5750) is pretty excellent, but over time the likelihood of it actually printing when asked has decreased. The number one culprit is an inability to pull in paper, no matter what we do. Today that reached a head when printing some pictures and left us functionally without a printer, so I did some Googling and found this troubleshooting guide by Canon. On the one hand, it's pretty hidden; on the other, it's great that it exists at all.

Turns out there's a maintenance mode which "cleans" the feed rollers. No idea what it actually does, but my guess is some form of percussive maintenance, hence the warnings not to do it too often. Whatever it did worked though, and our paper is now gliding through smooth as a hot knife through butter 👍

📆 18 May 2020  |  🔗

  • Technology, 
  • printer, 
  • Canon, 
  • Pixma, 
  • MG57500, 
  • troubleshoot, 
  • guide, 
  • fix, 
  • paper 

The Langhalm Moor community buyout | Rewilding Britain

A great community project happening in Langham, just into South Scotland and only a stone's throw from where I grew up. It's a beautiful area with plenty of wildlife already (including a solid population of endangered hen harriers), which makes this plan to turn an old grouse moor into a nature reserve doubly excellent. Of course, I can't help but feel a little smug that the grouse moor has become "no longer economically viable" too 😏

The only issue is that they need to raise a whopping amount of money: £6m. I've donated a small bit (what I can, considering everything right now) and you can too, but even if their crowdfunding is fully successful they're still only halfway there. I'm hopeful that government grants might cover some of that cost (so are they) but it still feels crazy that effectively fallow land can cost that much to become a nature reserve. Fingers crossed 🤞

📆 18 May 2020  |  🔗

  • Natural World, 
  • rewilding, 
  • Langham, 
  • moor, 
  • grouse moor, 
  • nature reserve, 
  • conservation 

Medieval road-trips and the invention of print | I Love Typography

The tale of Hans Gensfleisch, later Johannes Gutenberg, and the invention of the Gutenberg press. Packed with interesting historical tidbits:

  • The Austrian city of Strasbourg was known as Argentina during Medieval times – a reduction of Argentoratum as it was called by the Romans – and frequently appears under that title in manuscripts;
  • During his time in Strasbourg, Hans/Johannes likely witnessed the completion of the impressive cathedral, then that tallest building in northern Europe;
  • Our modern-day interpretation of "roman fonts" (think Times New Roman) aren't Roman at all. They're based on the mistaken identification of what was actually Carolingian minuscule, a script invented during the time of Charlemagne and later revived by Italian humanists;
  • I really like the image of Medieval pilgrimage as the equivalent of modern wanderlust and can't help but wonder if their pins aren't that far removed from modern backpacker pins 😂;
  • It's also amazing to know that pilgrim badges were effectively curios, to the extent that you could buy "parody" versions, often phallic or obscene variants of common pins – they truly were just gap-year students after all!
  • Gutenberg got his main start (certainly as far as we can tell) by making and selling badges for the Aachen pilgrimage, including ones with mirrors in them that could "capture the relics' reflection or 'sacred emanations'" and allow pilgrims that couldn't get close to the most sacred of relics to still leave with some amount of their divine blessing;
  • Gutenberg and his business partners were effectively building their press in secret. If true, that would make Strasbourg the source of Gutenberg's revelations around printing, something which is not unlikely. He was already casting metal objects in the form of pilgrim badges or pins and one of his business partners owned a paper mill, so all the pieces of the puzzle were present.

The myth of perfect ARIA support | Eric Bailey

A look at why ARIA should be treated like any other web technology:

All web technology has compatibility issues... [and] ARIA is a web technology.

In other words: use semantic HTML wherever possible so that you keep ARIA use to a minimum; break complicated interactions down as much as possible to prevent ARIA overlapping and getting muddled; always check for support (like you would with any other web language); use automated accessibility tools like WAVE and Axe; test your code. Just like JavaScript, CSS, or anything else, it's best to keep things simple so, as Eric puts it:

ARIA should be the last tool you pull out of your toolbox, not your first.

📆 18 May 2020  |  🔗

  • Inclusion, 
  • ARIA, 
  • compatibility, 
  • semantic HTML, 
  • accessibility, 
  • a11y, 
  • WAVE, 
  • Axe 

How to tame line-height in CSS | CSS Tricks

An interesting read that covers some of the basic terminologies of typesetting, as well as the technicalities of how browsers actually interpret the line-height value. Hint: it's not what you'd probably expect. Line height is more accurately a "line box", another layer of the HTML box-model, which is why you can set padding and margin to zero on text and you'll still have a gap between lines.

That's interesting stuff, but Caleb also shares a Sass mixin based on a formula used in the Basekick package which can actually get the browser to remove the intrinsic line-box whitespace. As he explains, that means you can create web layouts which are actually aligned to the pixel, not an arbitrary box object that you can't really control. It's a hack and I'm not sure I'd ever want to use it personally (not least of all because it would make Sass a core dependency), but the idea that native support might be coming to CSS in the shape of line-height-trim or leading-trim is very exciting. I foresee a future where a CSS value like one of those becomes a part of universal resets, much like box-sizing is today.

📆 18 May 2020  |  🔗

  • HTML & CSS, 
  • Typography, 
  • CSS, 
  • line height, 
  • whitespace, 
  • proposal, 
  • line height trim, 
  • leading trim, 
  • Basekick, 
  • Sass, 
  • mixin, 
  • browser, 
  • box model, 
  • padding 

CSS fix for 100vh in Safari | Matt Smith

Important Caveat: YMMV on this trick. Matt himself notes that there are potential issues and there's a discussion with Šime in the comments which highlights actual problems in Chrome on Android. With that said, the whole "Safari ignores 100vh" issue is a pain and this is a simple workaround that may have some applications:

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

Obviously, body can be whatever element you want. The hope is that the -webkit prefix here is good enough for all other browsers to ignore it. Whether or not that's true is, as I mentioned, debatable.

📆 18 May 2020  |  🔗

  • HTML & CSS, 
  • Safari browser, 
  • iOS, 
  • viewport, 
  • bug, 
  • fix, 
  • mobile, 
  • hack 

Deno 1.0 | Deno

There has been a lot of web chatter around the launch of Deno, the new JavaScript runtime engine. Their introductory blog post does a great job of explaining when you should use it (and conversely when you shouldn't, at least yet). It's an impressive post, not least of all because of its transparency. The team behind Deno are open about the shortcomings of NodeJS and the fact that a large-scale overhaul would now be virtually impossible. Rather than create Node2, they've created Deno, which seeks to solve a lot of the same problems but not necessarily in the same way or with the same ultimate scope. That's a pretty savvy move in my opinion.

It's also really interesting to see them take a swing at npm as a not-particularly-great ecosystem structure:

Furthermore the mechanism for linking to external libraries is fundamentally centralized through the NPM repository, which is not inline with the ideals of the web.

I'll be intrigued to see if Deno and Entropic end up with a tight relationship as a result.

Most of what the blog post goes into flies straight over my head, but the notes on improved HTTP server performance and their commitment to stability both caught my eye. This is clearly a product which has been thought through, not just on paper but with the benefit of (heaps of) actual experience thanks to NodeJS' popularity. Sounds very intriguing.

Also, I'd just like to take a moment to note both the excellent URL choice (deno.land) and the adorable mascot art:

A cute sauropod dinosaur stares up at a cloud-filled sky on a rainy day, with puddles at its feet.
Everything about this is excellent!

📆 18 May 2020  |  🔗

  • Nuts & Bolts, 
  • Deno, 
  • server, 
  • backend, 
  • JavaScript, 
  • Entropic, 
  • npm, 
  • launch, 
  • dinosaurs, 
  • sauropod, 
  • illustration 

The conversation | Seth Godin

Seth has put together what he calls a:

short manifesto about the future of online interaction

It's a call to look at the processes and concepts which have made the shift from in-person to online as a result of the pandemic, taking square aim at meetings and lectures in particular. He raises some valid points:

  • Most meetings boil down to an opportunity for someone to show off or demonstrate their status;
  • Good meetings may include an element of discussion or a venue for raising questions, but it's an imperfect system still;
  • Lectures/education are just sequences of long meetings where discussion is almost dissuaded and attendance/engagement is maintained via withholding grades, diplomas etc.

His hope is that we can use a change in circumstance to evaluate and address these issues by redefining meetings, both for education and for work. If a meeting is about transferring information, replace it with a memo or a recorded tutorial. Meetings are only truly useful when they're for transforming information (his words, which I like). And the best method of transforming information is through conversation.

Seth has had success with using Zoom's breakout session features to manage that process, effectively using the main call to present an idea or problem, then sending students into breakout rooms to discuss.

A federated Instagram | PixelFed

The fediverse is an interesting concept that's long had competitors for a number of mainstream social sites, the most infamous of which is probably Mastodon. I hadn't realised that there was an Instagram-clone running on the ecosystem, but it looks pretty neat. Better still, the latest release refactors the core concept away from "image sharing" to "collections", meaning that you can create photo albums as well as make posts, in an attempt to provide a free alternative to the likes of Google Photos.

Considering you can create closed-networks (the whole point of having federated users), PixelFed presents an excellent option for friend- or family-specific image collections, without having to hand that information over to big corporations. Cool.

📆 16 May 2020  |  🔗

  • Technology, 
  • Instagram, 
  • PixelFed, 
  • open web, 
  • indie web, 
  • photo sharing, 
  • album, 
  • portfolio 

Writing my accessibility statement. | Ethan Marcotte

I have to admit: I didn't know what an accessibility statement was until I read Ethan's post 🙋‍♂️ That's not great. Now I do, so hopefully, in the near future, I'll get around to adding one here. That will need a little bit more thoughtfulness than I can currently give, though, so for now I just want to record the key points:

First and foremost, an accessibility statement’s meant to help the reader. Put another way, it’s a document that helps them better understand the accessibility features of the website they’re using.

Ethan specifically mentions elements like the focus styles he's designed and how he's tested his colour palette.

For someone visiting my site—whether it’s the first time or the fiftieth—my accessibility statement hopefully provides them with the information they need to better navigate my site.

He also makes a point of having a "not great" section of known accessibility issues or areas which are planned for improvement. That makes the statement a living document, which feels right. Inclusion requirements will shift with technological change; accessibility is never "finished". I'm a fan of using GitHub issues, a la Eric Bailey, as a way to allow users to flag these as well.

The Known Issues section is an attempt tried to acknowledge that my site has plenty of flaws—not unlike myself—and that I’m working to fix them.

Ethan's post also contains numerous links to other worthy examples (like Eric's) that are all well worth visiting and considering. I'll definitely be coming back to this in the – hopefully near – future.

📆 16 May 2020  |  🔗

  • Inclusion, 
  • accessibility, 
  • a11y, 
  • accessibility statement, 
  • tutorial, 
  • example, 
  • GitHub