Jeremy Wagner's

Web Development Blog

With occasional rambling diatribes about other stuff.

Bulk Image Optimization in Bash

March 9, 2017

This article is also on Medium!

Have you ever needed to optimize a bunch of images in a folder on your computer, but you don't want to go through the hassle of writing an build system to take care of it? Then bash and your image optimization binary of choice are your best friends. I've had situations where I just needed to pull down files from a website already in production, optimize images, and re-upload everything. The exact syntax depends on the optimizer you use, but your workhorse will be the find command.

find is a command that, well, finds stuff. For example, if I wanted to find all files in the current directory and its subdirectories with a .jpg extension, I could run this command:

find ./ -type f -name '*.jpg'
Read More »

Tips for Writing a Technical Book

January 21, 2017

This article is also on Medium!

I spent the last year writing a technical book for Manning Publications, and it's finally out! The book is called Web Performance in Action. The process was something I wanted to fully document, but it became clear to me that nobody would find such an overly-specific, long-winded screed worth reading.

So instead, I said "to hell with it" and slapped a clickbait title on this thing. If you've ever entertained the notion of writing a technical book, these are some tips that served me well during the process. Well, for me at least. Your mileage will vary, of course.

Read More »

HTTP/2 in Developing Nations

October 6, 2016

I've been doing some research on HTTP/2 use across the world in preparation for an article on another outlet. In doing so, I've observed some compelling relationships between HTTP/2 support by browser, the developing world, and internet infrastructure quality.

In developed nations, we see often see that internet infrastructure quality is pretty good in comparison to developing nations. That's not to say that some developed nations couldn't stand to do better, but they're often better by comparison. Let's take a quick look at this graph of average and peak connection speeds in the world's top 8 developing nations by population, courtesy of Akamai's second quarter State of the Internet Report for 2016:

Read More »

Bust Caches Like a Pro

September 12, 2016

Browser caches are great. With a good cache-control policy, you can take advantage of the browser cache to seriously increase the speed of return visits to your site. On a multi-page site where many resources are shared across pages, a primed browser cache can reduce load times when users navigate to subsequent pages.

What sucks, though, is when you have to bust a cache for an asset that changes. Cache busting (or cache invalidation, as it is commonly known) is what we must do when we change an asset, but want to make sure the browser downloads the new version of it.

Read More »

Stop Using the Protocol-relative URL

July 22, 2016 (updated March 5, 2017)

Paul Irish wrote about the protocol-relative URL way back in 2010. It was a convenient little post that advised developers to abandon absolute protocol URL schemes using http:// or https:// in favor of a protocol-relative variant that looks something like this:

<script src="//"></script>

This convenient syntax eliminates the need for developers to construct URLs based on the user's current security context. If this syntax was used on an HTTP page to include something from a CDN, it retrieved the HTTP version. If the user used it on an HTTPS page, it retrieved the HTTPS version. Seems like a hell of an idea, right?

Read More »

Cutting Cruft with an SVG Media Query

May 25, 2016

This isn’t a huge success story, but I thought it was sufficiently spiffy to warrant a short post about an SVG media query that helped me to cut an unnecessary image from a client's website while still accommodating their design. Who knows? This short post may help you some day.

Not too long ago, I developed a static site for Weekly Timber & Pulp, a logging business in Central Wisconsin. The designer on the project whipped up some comps with two breakpoints: One for phones and tablets in portrait view, and another for tablets in landscape view and larger. The designer is a good friend of mine, and loves to throw me a curve ball every now and again. So he gave the site’s logo a different treatment for each breakpoint.

Read More »

Using WebP Images

April 25, 2016 (updated September 26, 2016)

We've all been there before: You're browsing a website that has a ton of huge and beautiful images of delicious food, or maybe that new gadget you've been eyeballing. These images tug at your senses, and for content authors, they're essential in moving people to do things.

Except that these images are downright huge. Like really huge. On a doddering mobile connection, you can even see these images unfurl before you like a descending window shade. You're suddenly reminded of the bad old days of dial-up connections.

Read More »