Jeremy Wagner's

Web Development Blog

With occasional rambling diatribes about other stuff.

Faster Bulk Image Optimization in Bash

April 20, 2017

This article is also on Medium!

In an earlier post, I talked about how you could use the find command in bash to find all files of a specific extension and pass them along to the image optimizer of your choosing. In instances where I don't have time to automate this task with a tool such as gulp, this has proved incredibly valuable.

Lately I've had to convert large batches of images for various projects. The find command, while serviceable in its own right with the -exec flag, only allows for serial processing of the files it finds. This is where xargs came in handy. With xargs I had a way of doing this work in parallel. I recently optimized a batch of about 500 JPEGs using jpeg-recompress. Below was the non-xargs way of accomplishing this task:

Read More »

CSS is Broken: My Dime a Dozen Opinion

April 3, 2017

This article is also on Medium!

The latest web development shitstorm on Twitter has been "CSS is broken". To no one's surprise, this has provoked heated discussions on the perceived flaws of CSS, and what can be done to "fix" what's "broken" in the language. Here's my opinion, such as it is.

Web development is a broad spectrum of varying skills. Any one developer exists in a spot in the spectrum, with skills varying in breadth and depth. On one extreme exists developers that feel JavaScript is their primary tool for solving problems, while CSS is a necessary evil for establishing a look and feel for a page. On the other extreme, there are developers (some identifying as designers) who see CSS as an essential part of the web developer's trinity, but shy away from using JavaScript extensively. Most of us exist somewhere between the extremes, but we tend to lean one way or the other (if you don't count those rare devs who seem magically capable of doing everything).

Read More »

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 »