John D. Jameson, Front-End Engineer

Alternating lines of the words “John D. Jameson Front-End Engineer”

Posts

Storage with Cloudflare Domains & R2

Learn how to host files on the web using Cloudflare’s R2 bucket storage and inexpensive domain registration.

CSS-Tricks

Styling Underlines on the Web

There are many different ways to underline text on the web. From tried-and-true CSS to SVG filters, these are some of the methods you can use.

Styling Fallback Fonts with Sass

One of the pain points of loading fonts asynchronously is writing convoluted CSS for fallback styles. Fortunately, Sass can make it easier to achieve great-looking web typography before a site’s fonts finish loading.

Code School

Styling Text with SVG Filters

With SVG filters, you can build reusable effects for applying custom styles to text. Here’s how to recreate the iconic typography on a US dollar bill using SVG filters.

Sidebearings & Alignment

When using different font sizes throughout a design, you’ll need to account for sidebearings to keep the type looking properly aligned.

Making Sense of Ch Units

If you try to use ch units with most fonts, things will probably end up broken. Here are some of the issues you’ll come across as well as ways you can fix them.

Kerning & Ligatures in Letterspaced Type

Letterspacing affects type’s horizontal rhythm, and so do kerning and ligatures. Combining all three of them can make for beautifully spaced typography.

Guidelines for Letterspacing Type

Outside of line height and vertical rhythm, spacing doesn’t get a lot of attention in web typography. Let’s zoom in on letterspacing and best practices for spacing type horizontally.

Typographic Units in CSS

CSS offers many more units than pixels, ems, and percentages. Out of all the units available to us, I find two the most intriguing: ex and ch.

Data Attributes for Keyboard Shortcuts

With a little help from JavaScript, you can add a data attribute to any HTML element to instantly assign a shortcut key.

Filtering Google Results with Alfred

Google offers powerful filters for search results that can help you find exactly what you’re looking for — it just isn’t quick or easy to do. By using Alfred, you can configure these searches once and reuse them whenever you want.

Updating Your Shell with Homebrew

If you haven’t manually updated your version of Bash or Zsh on OS X, chances are it’s out-of-date. Here’s how to install the latest version and keep your shell updated using Homebrew.

Using Emmet with Sublime Text

Emmet is an invaluable time-saving tool for anyone who writes HTML and CSS. Thanks to Sublime Text, it only takes a little bit of effort to install and start using right now.

Ampersands & Google Fonts

Titles, headings, and display text can all benefit from the use of a well-placed ampersand. Today Google Fonts makes using beautiful ampersands on the web easier and more widely supported than ever before.

Responsive Footnotes

Footnotes and sidenotes are both useful ways to annotate online blog posts and articles. With the help of responsive design, it’s now possible to use both approaches at the same time.