Explore My Notes

Colour safe

Another excellent tool for checking colour accessibility, but with the added bonus of creating viable palettes for you. These can then be filtered based on various criteria such as minimum WCAG level, background colour, and base hue (green, blue, red, etc.). Very clever ๐Ÿ‘

Git push to new repository | Sameer Gurung

Super useful walkthrough on taking a branch from one repository and publishing it to another repository entirely (great for creating test repos or stripped-down example repos for bug isolation).

The tl;dr is as follows:

git checkout --orphan clean-branch
# this is when you delete all unwanted files, rename package.json, simplify code etc.
git add *
git commit -m "Example repository"
git remote add origin2 https://github.com/org-name/project-title
git push origin2 clean-branch:main

โฌ† That will create a new branch without any Git history; commit all files to that branch (so make sure you simplify the repository between these steps ๐Ÿ˜‰); add a new origin to the existing repository (here named origin2 and linked to a dummy GitHub repository, but any name can be used and create the remote repo first); and finally, pushes your stripped-down branch to the main branch of the new repo (again, if you use trunk or anything else, change that here). Simple ๐Ÿ‘

Around the Tesla coils | Franzoli Electronics

The Daftย Punkย track Around the World performed on Tesla coils. Somehow this manages to be even more awesome than the summary, too (I still slightly think it's fake... somehow ๐Ÿ˜‚):

Also, yes,ย Harder, Better, Faster, Stronger does sound just as great:

Floaters | Dust

"RC5-01 this is RC5-01" ๐Ÿ˜‚ There's nothing specifically science fiction about this short, and that's what makes it great. Simple animation, a timeless plot, and excellent voice acting. As io9 put it:

In space, no one can hear you be a complete buffoon

The danger of "just" | Brad Frost

An excellent summary of why providing help with language like "just"ย or "simply" can be demeaning, rather than helpful:

โ€œJustโ€ makes me feel like an idiot. โ€œJustโ€ presumes I come from a specific background, studied certain courses in university, am fluent in certain technologies, and have read all the right books, articles, and resources. โ€œJustโ€ is a dangerous word.

It also contains this absolute gem of a far-too-relatable quote ๐Ÿ˜‚

Now thereโ€™s a damn good chance Iโ€™m actually an idiot, but the self-respecting part of me wants to challenge that notion.

Astartes: Warhammer 40K short | Warhammer

It's a few years old, but I was blown away byย Astartes. Sure, the lore is a bit dense so Iย didn't fully know what was going on, but the story was well crafted enough that it kept me hooked (and all without any real dialogue). More importantly, the animation, VFX, SFX, and direction are all astonishing. As in, easily Hollywood level (and noticeably better than a lot of Hollywood sequences). And it's all been made byย one person (mostly). I can see why Games Workshop have actually brought it into canon.

(Coincidentally, this is how you do brand control. Fan makes amazing thing, community embraces it, you embrace it. One day fan film takedowns will be a laughable joke of an ancient mindset ๐Ÿ™„)

Colour contrast checker | Coolors

Coolors are generally my first stop for palette design anyway, but now that I've discovered this quick WCAG contrast checker they've become invaluable. There are a few similar tools out there, but this one has two key features:

  1. The ability to alter either colour using an intuitive colour picker, so you can slide through options within a colour space to find where the A/AA/AAA boundaries are;
  2. A quick "optimise"ย button that finds the closest AAA-rated colour combination.

#2 is a bit overzealous, but it does provide a quick way to find some interesting pairings.

Collapse SVG to a single path | Enigmeta

Very useful tool:ย just upload an SVG and it will attempt to output the file as a single path ๐Ÿ‘ Fantastic for converting icon libraries for design systems.

UPDATE 23/07/21

Some additional tips if an uploaded SVG can't be recognised:

  • Remove all colour overrides and/or set all fill values to use black (#000000)
  • Run through SVGOMG! and strip out as many superfluous sections as possible, including doctype and styles
  • Open in an SVG editor (e.g. Illustrator), select all paths and collapse/group/make a compound path (or all three if possible ๐Ÿ˜‚)
  • If all else fails, still in an SVG editor, go through and delete any clip-path layers, group layers, etc. until only one layer is leftย (should be a path layer, possibly nested within a blank layer called something like "Layer 1", if using Illustrator)

If that doesn't work, despair... ๐Ÿ˜‰

Captain Edward font | Simple Bits

Captain Edward font example with subtitle: a display serif inspired by the pirates of the Atlantic. Shows stylised glyphs for an anchor, skull and cross bones, and ampersand.
I have fallen hard for that ampersand ๐Ÿฅบ

A beautiful new serif font from Simple Bits based on old nautical typography. There's something about the alternate ligatures and subtle roundness to the serifs that I utterly adore. Plus, the pricing scheme is both clear and very fair, and they give 1% of sales to environmental causes, so triple win ๐Ÿ‘๐Ÿ‘๐Ÿ‘

Practical elegance | Seth Godin

I really like the concept of practical elegance that Seth argues for. It's effectively an argument for true UX: optimising the user's experience to make it as useful and memorable as possible. As he puts it:

Creating delight before itโ€™s expected.

That's a lovely way to think about designing anything.

Practical elegance is something that is available to all of us. If we choose, it can become the cornerstone of our work.

On failing elegantly (graceful degradation, anyone ๐Ÿ˜‰):

Practical elegance doesnโ€™t mean that the canoe will never capsize. It means that the thing we built was worth building, and it left the user feeling better, not worse, about their choice.

Content buddy | adactio

Jeremy is a great writer. I therefore shouldn't be surprised that his advice on content editing is incredibly astute.

Still, for just over two years, my main job was to write. Before that, I worked at a variety of jobs where I was the primary writer and/or editor. And throughout that time, I've been writing for myself on a variety of platforms, including this website. I thought I was doing okay at this whole writing schtick. Now I can see I have a lot to improve ๐Ÿ˜‚

On long sentences:

Not all long sentences are bad, but the longer a sentence gets, the more it runs the risk of overwhelming the reader.

On contractions:

Avoiding contractions seems to be more professional, but actually it makes the writing a bit too formal. Thereโ€™s a danger of sounding like a legal contract. Or a Vulcan.

On cognitive load (this was the big ๐Ÿคฏ moment for me):

Sometimes a long sentence canโ€™t be broken down into shorter sentences. In that case, I watch out for how much cognitive load the sentence is doling out to the reader.

On authorial voice (and why I'm giving myself a "get out of jail free card" for my lengthy sentences; that's just how I talk ๐Ÿ˜):

But thereโ€™s one piece Iโ€™ve given to others that I try to stick to: write like you speak.

SVG Instagram filters | Rik Schennink

๐Ÿคฏ An absolutely brilliant tool for linking CSS filters with SVG colour matrices to create Instagram-like image overlays and adjustments.

I'm currently in the process of trying to get away from Instagram (eurgh, that new UI isย atrocious) and the big missing piece is quick image filters. FEColorMatrix looks like a perfect fit, I just need to work out how to actually add it to a workflow ๐Ÿค”