Blog

How to generate full-sized website screenshots at multiple widths using webkit2png. Set up an array to batch-create named screenshots from the command line.

A beginner’s guide to the essentials of web typography. Covers choosing a harmonious type scale, setting a comfortable line height, and ideal line lengths.

Linked smart objects in Photoshop make designs far more manageable. Update a shared element once and it reflects everywhere — a workflow game-changer.

‘A clear reference for Adobe Generator layer naming syntax, with examples for common use cases — the cheatsheet the Adobe docs never quite provided.’

Why not to add a base level of styles that are defaults for the majority of elements.

object-fit is like background-size but for inline images. Combined with viewport units, it lets you size images without distortion — no more awkward workarounds.

An updated look at Sass, covering newer features like maps, @each, and using the Breakpoint extension for managing media queries more effectively.

How to use BrowserSync with Safari and iOS devices to test responsive designs without the usual device hassle. Mac only, using Xcode and Safari.

A simple CSS technique for managing text colour on different background colours, without writing a separate selector for every combination.

‘SVG filter effects are useful for illustration details on the web. This post covers two problems encountered using Gaussian blur — lower saturation in Safari and filter clipping.’

‘How to animate and reuse inline SVG with CSS. Using currentColor and groups you can change fills and animate paths, saving on page weight by avoiding multiple images.’

Images for me is something I consider the most tricky part of building a website, particularly for a portfolio focused website. It’s important to display these images in the best quality and smallest file size you can.