Tags » web development

• 

  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: Create solid-colour image placeholders to show before an image loads

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