Posts tagged with "Design"

• 2025.09.04

  The font of all knowledge

  TIL that Google Search has a font-based Easter Egg. If you search for “Georgia font”, the results page will change the typeface to Georgia. I initially thought it was limited to System-fonts, but Wikipedia shows that it works for Roboto too!

  I discovered this when looking up various fonts for this blog. I initially specified the default browser sans-serif font in my CSS, but ended up switching to Georgia for the text-body as I find it more readable for longer posts. There are some beautiful fonts in Google Font I’d love to use, but for now I’m going to stick with the System Font Stack to avoid loading more external resources on page-load.

• 2025.08.11

  Writing collapsible inline footnotes in Hugo with Markdown

  I use Hugo as the static site builder for my blog. I love it because it’s fast (blisteringly fast) and for the most part it just gets out of the way.

  However, Hugo’s support for customising the rendering of Markdown into HTML is … lacking, to say the least. Hugo uses Goldmark under the hood, which supports Extensions, but Hugo doesn’t natively plug in to those. I’d previously been using a Hugo shortcode to wrap around some arbitrary Markdown and convert it into a footnote HTML:

• 2025.08.10

  A neat CSS trick to add favicons to website links

  I discovered a neat CSS trick that automatically lets you prepend an SVG ‘favicon’ before URLs linking to a particular domain. For example, for links to github.com, you can embed an octocat SVG using an attribute selector:

  a[href*="github.com"]::before {
      content: "";
      display: inline-block;
      width: 1em;
      height: 1em;
      margin-right: 0.35em;
      vertical-align: -0.15em;
      background: currentColor;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.62 7.62 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>') center/contain no-repeat;
  }
  

  We apply the favicon as a CSS mask to properly render the transparent components of the logo against the background.

• 2025.08.05

  MathJax v4.0 released

  MathJax v4.0 has been released!

  I just integrated MathJax v3 with Hugo last night for this blog to start writing some maths posts, and v4 is released today…

  I’m hoping it improves rendering though, I was seeing some issues with SVG output for inline formulae in Safari. KaTeX is neat and fast, but I find the quality of the typesetting to be quite sub-par compared to MathJax.

• 2025.07.11

  Haptics at 300kph

  Apple released a new “Haptic Trailer” for their new F1 movie - you can check it out in the Apple TV app. It’s a pretty neat experience, I’d never thought about adding haptics to a playback experience, but it really does add another dimension of immersion.

  I was curious on how it was implemented, and stumbled across a great blog post that really shook it out for me… I’m sure it’d get horrifically overused, but it’d be interesting to see whether this gets adopted into more media streams in the future.

• 2025.07.03

  Building animations in Manim with LLMs

  Manim is a Python animation engine designed to build animated mathematical explainer videos (examples here) created by Grant Sanderson of the superb YouTube channel 3Blue1Brown.

  A couple years ago I wanted to write my own mathematics explainer videos with Manim, but found the learning curve to be pretty steep at the outset.

  The user experience has since improved dramatically - in large part because of the Manim Community Edition, but also because there’s now enough samples in recent LLM training runs that they can produce workable Manim code!

• 2025.06.30

  An aside on retro gaming on Mac

  I’m not much of a gamer. In fact, I don’t think I’ve played any games in the past decade.

  But I do have very fond memories of playing a couple games on an old translucent iMac G3 in the school computer room in primary.

  On some late night Wikipedia rabbit hole I ended up on the page for Antz and was reminded of the old-school-cool games I’d played: Bugdom and Nanosaur.

  It turns out, they’re been immortalised and ported to run on macOS with Apple Silicon. You can download them (for free): Nanosaur and Bugdom2. They run like a charm and with beautiful graphics scaling to boot!

• 2025.06.10

  Mapbox documentation uses real tokens

  I’ve been working on a small side project that requires embedding an interactive map. I spent some time evaluating different mapping providers - initially OpenStreetMap with leaflet for annotations. OpenStreetMap is great for rapid prototyping since it’s free and doesn’t require any API key, but it doesn’t look great (by default, at least) and it doesn’t have the same rich POI data integration.

  I dabbled with Mapbox next and was really impressed. It has end-to-end API coverage for heaps of mapping use cases, and provides lots of examples of how to integrate Mapbox into your choice of language/platform/framework. However, the thing that really stood out to was their onboarding design. Once you create an account and login, Mapbox injects your API keys directly into the example code on the webpage. They literally inject your personal API key into the standard examples for logged in users so that you can copy/paste and immediately start working.

• 2025.06.09

  Internationali(z|a)tion is hard

  I came across a UI glitch today in my Uber app. At first glance it appears to be a preposterous oversight, the s in Favourites has been orphaned!

  I live in Australia, where we closely follow British English spelling - meaning it’s “Favourites” and not “Favorites”. In the world of UI/UX, it’s common to use localisation dictionaries to map strings to locale-appropriate versions. I suspect some UI designer carefully crafted this screen for US English and mapped over to AU English, accidentally committing a tiny typographic crime.

• 2025.06.04

  Gitting things done

  GitHub has a fascinating interview with Linus Torvalds, the inventor of both git and Linux for the 20th anniversary of git.

• 2025.05.24

  View Transition Web API

  The (relatively) new View Transition API is really slick! Simply adding the following CSS to my blog enabled same-document view transitions - no JavaScript required!

  Go ahead and give it a try now! Simply click a link to another page on this site and you should observe a seamless transition occur.

  @view-transition {
    navigation: auto;
  }
  

  If you want to add even more pizzazz, you can declare CSS keyframe animations:

  /* Create a custom animation */
  @keyframes move-out {
    from {
      transform: translateX(0%);
    }
  
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes move-in {
    from {
      transform: translateX(100%);
    }
  
    to {
      transform: translateX(0%);
    }
  }
  
  /* Apply the custom animation to the old and new page states */
  ::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;
  }
  
  ::view-transition-new(root) {
    animation: 0.4s ease-in both move-in;
  }
  

  For a blog like this there’s no real use, but for more complex web applications, the View Transition API is a really seamless way to integrate smooth transitions.

• 2025.05.23

  Things rewrites their server architecture in Swift

  I’ve been a long time user of Cultured Code’s Things to-do app. It’s slick, has well designed ergonomics, and is perfectly minimalistic. Things’ Markdown support is tasteful and its approach to task management structured but pared back.

  They’ve just announced a rewrite of their existing server-side infrastructure stack in Swift, the linked post and blog post are worth a read.

  From a technical perspective, I’ve always appreciated its rock-solid proprietary Things Cloud syncing service. In particular, I find it interesting the app asks for Local Network access to enable faster syncing:

• 2025.04.26

  btop of your resources

  btop is now my default terminal resource monitor, supplanting top, htop, and all the others of that ilk. I wanted to spare a few words for its beautiful (and functional!) text-based user interface (TUI):

  

  • pane management: btop divides your terminal window into multiple information-dense panes displaying CPU, memory, network, and process information simultaneously. What’s fantastic about btop is that user ergonomics and customisation are clearly front and centre: each pane is numbered, and toggling off/on a pane is as simple as pressing the corresponding pane number. Instead of fiddling with a config file and refreshing (as many other command-line tools require), you can effortlessly switch between panes on-the-fly.
  • command input: In a similar vein, attached to each pane is a set of commands that configure that view. A single letter of the command is highlighted in red, and pressing that letter will toggle that filter/sort/configuration in that panel. Putting the commands front-and-centre shifts the mental burden of recalling “What command displays my processes hierarchically” (e) from searching the manual to just looking at the screen.
  • global configuration: if you want your customisations to be sticky across sessions, there’s a cleanly navigable and expressive configuration window that lets you apply globally persistent configurations. This is much nicer than setting command line flags or editing a config file.
  • cursor support: Despite running in a terminal, you can simply click on processes to select them, or use scroll wheels to navigate long lists. This blending of terminal efficiency with GUI-like interactions creates a really slick experience that respects both keyboard purists and those who don’t mind the forbidden practice of mouse navigation.
  • process management: As an added bonus, selecting any process will allow you to send any signal straight from the TUI.

  

  What makes btop stand out is its intuitive keyboard navigation system. Unlike many other CLIs, btop maps essential functions to single keystrokes. This design philosophy means the interaction mode gets out of the way - toggling through complex system information and controls is always just a keystroke away. To borrow from The Design of Everyday Things, this feels like a set of masterfully crafted affordances.

• 2025.01.27

  Typography in Parasite

  

  This is awesome! Typographic Hangul from the title scene of Parasite

• 2025.01.22

  Developer Ergonomics

  “I wonder how much it is insightful to watch someone doing a workflow and to note when discomfort kicks in. That’s a really insightful thing to realize what matters from bitter experience, right? … Experience tells you when to worry about something and when not to worry about it” - Ben Sparks

  That is - the rising discomfort of a programmer when employing a new tool, framework, or library is a good window into the ergonomics of how one uses your tool, framework, or library. Source: How I animate 3Blue1Brown | A Manim demo with Ben Sparks. The whole video is worth checking out! It’s a masterclass on how to construct a programatic-animation library and demonstrate how to work within it.

• 2024.06.18

  Audiolising SwiftUI Graphs

  This demonstration of an auditory representation of a (visual) graph in Swift Charts is wild: Vectorized and function plots in Swift Charts at WWDC24.