Explore My Notes

Terra Ultima | Raoul Deleo

A wonderfully whimsical fantasy art project, Terra Ultima is a collection of natural world mashups by Raoul. There's a book and a Tumblr for more, but I wanted to save a handful of the more inventive creatures. Most are evolutionarily ridiculous chimaeras of real animals, but some (such as the sabertoothed toucan below) are just inventive reimaginings. Both camps are beautifully illustrated!

An eerily cute blue dragonfly crossed with an emerald green rabbit, with elegant transparent wings for ears, perched on a reed stem.
Those ears are just remarkable, but so is the fine fur work on the limbs.
A fluffy red panda like animal with six limbs and a short tail climving a log; its back is coloured to resemble the marking on a ladybird beetle, red with black dots.
The cleverly named "lady bear" is an adorable mashup.
A black and white watercolour painting of a toucan, except the bill is chunkier than normal and has two protruding "fangs" that cut up and around the outside.
Whilst most of the creatures of this world are mashups, I found this take on a sabertooth toucan (even with sabres that point upwards, which are normally referred to as tusks) was just a really cool design. Totally impractical, but a neat idea nonetheless.

A compound grid | Stuff & Nonsense

A visual example showing how overlapping the two grids creates a symmetrical but non-uniform column pattern; areas of negative space are still preserved.
Taken straight from Andy's page, which has many more excellent examples. I find the pattern of the gutters particularly interesting.

I love Andy's new design over on Stuff & Nonsense. A large part of that are the cleverly diverse page layouts. Turns out, underneath that perceived diversity is a consistent grid, made by overlaying a 4-column grid and a 5-column grid. Clever!

Overlapping a 4-column grid and 5-column grid results in eight columns with four different widths. This grid has a rhythmic pattern of 6|1|4|3|3|4|1|6...

👆 which (as Andy points out) can be represented easily using fr units in CSS grid:

display: grid;
grid-template-columns: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr;

Get the FLoC out | adactio

The latest breach of Google's old "do no evil" motto is here: FLoC. As ever, Jeremy has written a well-reasoned and nuanced take on why it's likely a bad idea, both for the web in general and Google in particular.

There's a lot of interesting points in his article, but I think one of the elements that really stood out is the combination of no-EU rollout and that Google have claimed that FLoC will ultimately be opt-in. The first highlights how the technology is likely a privacy concern in the first place; the second is a way around GDPR but one which I can't imagine many sites would go for. What's the incentive? Unless, of course, Google throws its weight around again *cough* AMP *cough*...

... one part of the business is building a user agent while a different part of the company is working on ways of tracking end users. It’s almost as if one company shouldn’t simultaneously be the market leader in three separate industries: search, advertising, and web browsing.
Now Google’s monopoly in advertising is compromising the integrity of its browser. In both cases, it makes it hard for Chrome devs claiming to have the web’s best interests at heart.

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 👍

📆 12 Apr 2021  | 🔗

  • Nuts & Bolts
  • Git
  • GitHub
  • repository
  • testing
  • clone
  • copy
  • history 

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:

📆 06 Apr 2021  | 🔗

  • Musical Notes
  • video
  • Daft Punk
  • tesla coil
  • electro
  • YouTube
  • music
  • instruments 

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

📆 01 Apr 2021  | 🔗

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 🙄)

📆 11 Mar 2021  | 🔗

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... 😉

📆 11 Mar 2021  | 🔗

  • Frontend
  • design system
  • SVG
  • tool
  • path
  • conversion 

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 👏👏👏

📆 11 Mar 2021  | 🔗

  • Typography
  • fonts
  • pirates
  • nautical
  • headline
  • all caps
  • serif 

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.