Tags » web development

• 

  Recreating the bird animation from Swift.org

  The Swift.org website got a redesign, including an animation of a swooping bird, and I read the source code to understand how it works.

• 

  What I learnt about making websites by reading two thousand web pages

  How to write thoughtful HTML, new-to-me features of CSS, and some quirks and relics I found while building my personal web archive.

• 

  How I create static websites for tiny archives

  Start with a simple HTML file, then add features like templates, sorting, and filtering as they become useful.

• 

  Creating a “simple” three-up image layout in CSS

  A step-by-step breakdown of how I made a one-left, two-right layout for my images.

• TIL: Listen for the popstate event to see when the user clicks the “back” button

  More generally, it fires whenever the user is navigating the session history.

• My favourite websites from my bookmark collection

  Websites that change randomly, that mirror the real world, or even follow the moon and the sun, plus my all-time favourite website design.

• My custom <picture> plugin for Jekyll

  How I make images that load quickly and look good for readers, and which are easy for me to manage.

• Testing JavaScript without a (third-party) framework

  The browser can be a pretty good place to run your JavaScript tests.

• CSS formatting in the console

  Did you know you can use %c to format your console.log messages?

• A bookmarklet to show which responsive image was chosen

  Debugging my <picture> and <source> tags.

• Finding redundant data in our Next.js props

  A script that helps us optimise our __NEXT_DATA__, which in turn helps reduce page size.

• Remembering if a <details> element was opened

  A JavaScript function that remembers if a details element was reopened, and keeps it open when you reload the page.

• Showing human-friendly dates in JavaScript

  What’s a nicer way to show a date than an ISO 8601 timestamp?

• Custom 404 responses in Finatra

  A snippet for returning a custom 404 response in a Finatra app when somebody requests a missing page.