Explore My Notes

Tornis | Robb Owen

When you love a website design, you look into how it was made, right? That's what I did with Robb Owen's recent redesign. Amazingly, his incredibly smooth scroll and cursor tracking is achieved via his own JS library... way to make the rest of us feel entirely inadequate 😂

Tornis looks like a really interesting package for site animations. I definitely want to give it a go with some projects I'm working on. Even simple elements like the rotating lighthouse stamp are just very cleanly/smoothly animated. Impressive.

Robb Owen Digital

It's not often that I see a website and just want to explore it, but that's what Robb Owen has achieved. I've literally gone back multiple times just to refresh my memory of it. There's something incredibly elegant in both the motion design and the colour palette. Plus, I'm a sucker for fast rendering cursor tracking animations 😅

I wish there wasn't an initial loading screen, but otherwise a truly enviable personal website.

Clean JavaScript Cheat Guide | Ryan McDermott

An adaptation of Robert C. Martin's book Clean Code for JavaScript (ES6+) full of best practice examples and (probably more importantly) common anti-patterns that they can remove/prevent/avoid. Just a useful resource to check back on from time to time.

📆 27 Feb 2020  | 🔗

  • JavaScript
  • JavaScript
  • best practice
  • GitHub
  • advice
  • tips 

Pa11y & Koa11y | GitHub

A neat little npm package that runs accessibility (a11y) tests on web pages to whatever WCAG or other standard you need. The fact it can be automated at build time should be very useful. There's also a GUI-based version, Koa11y, which looks useful for quick spot checks. I'm a little surprised there isn't a web hosted version or even a browser plugin, but perhaps someone will fork the project in the future.

Jamstack, IFTTT and Netlify: A Power Trio | Andy Bell

A good look behind Andy's "microblog", a small website that powers his Twitter feed and link list via a mixture of IFTTT, RSS, Feedbin, Eleventy, and Netlify. Includes step-by-step guide and source code. Would be interesting to see if The Old Reader has anything similar in terms of API integrations or scrapable feeds 🤔

The Jamstack enables me, a designer who codes, to make incredibly cool shit and I am all for it!

Interactive Sherlock Holmes | Paravel

What a wonderful project. The folk at Paravel have taken the Sherlock novel A Scandal in Bohemia and recreated it as a bespoke website. Of course, the whole site is beautifully designed, but the real showstopper here is their (light!) usage of animation and sound. There's something engrossing about reading a chapter set on a wet winter's night and hearing the sound of rain on window panels in the background.

That's the kind of interactivity that the web was built for and I love it. (It's also a cracking argument for copyright expiration and public domain art works.)

Discoverd via Trent Walton.

Utopia CSS | adactio

If you’re already using CSS locks, modular scales, and custom properties, Utopia is almost certainly going to be a good fit for you.

If you’re not yet using those techniques, but you’d like to, I highly recommend using Utopia on your next project.

An intriguing new project from some of the brains at ClearLeft for "elegantly scaling type" on the web. Personally, I'm all for anything that reduces or removes the need for breakpoints in my CSS!

📆 20 Feb 2020  | 🔗

  • HTML & CSS
  • Typography
  • CSS
  • Clearleft
  • library
  • Utopia
  • type
  • web font
  • breakpoint
  • fluid layout
  • intrinsic design
  • responsive design 

Passive Zombies | Into the Wonder

An excellent breakdown of the linguistic and grammatical differences between the passive and active voice and the similar but distinct simple and continuous aspect. Not something I've ever truly grasped myself; also some nice tips on writing i.e. don't just avoid the passive voice, understand why and use it appropriately.

An easy test for whether or not you’re dealing with a passive voice construction is whether you can add “by zombies” and the sentence makes sense. “I was robbed by zombies!” “Have you ever been kissed by zombies?” “Our country is built on laws…erm, by zombies.”

LifeMap | Ritwick Dey

Well it's been a long week of other distractions rather than writing, but I have built up several things to link out to, so I guess a round of links from the web is in order.

A graphic representation of education, divided into time periods (e.g. "primary school") with interests growing or being removed. Looks like rock strata.
Now that's a pretty (useless) CV; I see why it became known as the "greatest ignored CV ever"

Originally created by Ritwick Dey (and weirdly hosted on Flickr), the mock-up data visualisation of Dey's life has earned some serious kudos on Reddit and deservedly so. The visuals have an immediate impact and are just very aesthetically pleasing, even if (as many Redditors have pointed out) actually using it as your CV would be a quick shortcut to the reject pile. To be honest, I've been dabbling in something similar (though far simpler) recently, so found seeing the execution of, and reaction to, something much superior to my own attempts kind of fascinating.

Note: this was originally part of a full article titled "Spiders, Dinosaurs and CVs" and the 49th post in my New 52 challenge. That article also linked to Lucas the adorable arachnid, the trailer for Into the Spiderverse, the Wildlife Photo-Ark project, and an article looking into the history of palaeoart. For posterity, the opening paragraph has been kept above.

Wildlife photo ark | Tim Flach

Around twenty heaped tortoises each with a unique code engraved on the back of the shell.
Madagascan ploughshare tortoises with anti-poaching branding

I'm a big fan of projects looking to archive information of endangered species, particularly quality images, biomechanics and video, so that if conservation efforts fail future generations still at least have good data. So when I discover a project like Endangered, created by photographer Tim Flach, it has to be shared. Flach's photographs (see more at Gizmodo) are beautiful and frequently incredibly poignant, but they're also paired with detailed information on the animals, and the threats they face, from biologist Jonathan Baillie. It's conservation meets art, both noble goals in their own right that are only amplified by their intermixing. Definitely going straight on my future wishlist.

Note: this was originally part of a full article titled "Spiders, Dinosaurs and CVs" and the 49th post in my New 52 challenge. That article also linked to a data visualisation CV, Lucas the adorable arachnid, the trailer for Into the Spiderverse, and an article looking into the history of palaeoart.

Lucas the Spider | YouTube

A very cute spider runs excitedly towards the camera on a wood table.
Spider squeeee! Lucas the utterly adorable arachnid.

Lucas the spider has been doing the rounds of the internet this week and I fully understand why. I'm not the world's biggest fan of spiders but I'm also far from arachnophobic, even finding certain real-world spiders adorable. That said, nothing in nature (that I'm aware of) has been designed to tug at the heartstrings quite so cleverly as this short animation test. Others have already called for it, but can I add my name to the petition for Lucas to be in the next Disney/Pixar movie?

Note: this was originally part of a full article titled "Spiders, Dinosaurs and CVs" and the 49th post in my New 52 challenge. That article also linked to a data visualisation CV, the trailer for Into the Spiderverse, the Wildlife Photo-Ark project, and an article looking into the history of palaeoart.

Into the Spiderverse | Sony

Miles Morales, Spider-Man, swings into frame and lands on a skyscraper.
Into the Spider-Verse? Yes please!

Weirdly, yet another piece of spider-based animation dropped this week which captured the hearts of the internet, though this time less Tumblr and more Reddit. The first trailer for Sony's new animated Spider-Man film hit and just looks stunning. It's Miles Morales meets Spiderverse so I was already intrigued, but those visuals mixed with that soundtrack has left me with extreme hype!

Note: this was originally part of a full article titled "Spiders, Dinosaurs and CVs" and the 49th post in my New 52 challenge. That article also linked to a data visualisation CV, Lucas the adorable arachnid, the Wildlife Photo-Ark project, and an article looking into the history of palaeoart.

📆 10 Dec 2017  | 🔗

  • Moving Pictures
  • hype
  • Into the Spiderverse
  • Spider-Man
  • CGI
  • animated
  • design
  • Miles Morales 

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.