Here’s a quick code snippet to make a button on a WooCommerce product page activate a specified tab:
I’ve been puzzling over a performance issue on one of my sites lately and finally got it figured out today.
A custom shortcode uses
the_post_thumbnail() to include a small image (~250px square); I have a bunch of custom image sizes set up, so the
srcset attribute included 16 different image sizes. (Overkill? Maybe….) However, instead of using the image closest to 250px wide, Chrome was pulling in the largest available image—sometimes as much as 1500px! Obviously, this is terrible for performance.
In addition, certain pages had dozens of these images, multiplying the effect. My test-case page was 10+MB total (way too heavy…).
Here’s a sample
<img> tag for one of my images:
I finally realized that the root cause was that the
sizes attribute was set to “100vw,” basically suggesting to the browser that the image might at some point be rendered at 100% width of the viewport, so my browser was happily pulling down the largest possible image so it could display it in all of its high-resolution, hundred-KB glory instead of the scaled dozen-KB file.
Since I know this particular shortcode will only show images at a max width of 250px, I needed to set the
sizes attribute to “250px,” hinting to the browser that anything slightly larger than that would be perfectly adequate.
Here’s how I handled it:
- Added a filter to
wp_get_attachment_image_attributesand checked for a named image size or array
- If it was an array, I set the
sizesattribute to that pixel size
- If it was a named image size, I set the
sizesattribute to that pixel size
This approach admittedly is a bit heavy-handed and I’m still testing out the behavior on other pages on the site, but this fixed the problem with that specific shortcode, and my test page went from 10+MB to ~5MB—it cut my page weight in half!
The moral of the story is don’t “set it and forget it,” especially when adding responsive images using custom code.
Thanks to VIA Studio for their blog post that finally made the solution click for me.
For Christmas this past year, my wife gave me a copy of Thinking with Type: A Critical Guide for Designers, Writers, and Students (2nd revised and expanded edition) by Ellen Lupton. I just finished it and very much enjoyed reading it. I’ll definitely be using it as a reference.
These days, I generally prefer to read Kindle books on my Kindle Paperwhite, but this book is definitely better as a physical book.
This is a great introduction to and reference on typography. It’s divided into three main sections—Letter, Text, Grid—plus an appendix.
Explains some of the history of letterforms and the printing process, explaining why certain aspects of typography are tied to mechanical processes. Goes into details about type families, punctuation, numeral styles, typefaces on screen, and more.
Discusses legibility in the context of large blocks of text including kerning, tracking, alignment, and more.
Talks about page formatting, the golden ratio, and more specific details about laying out text on a page.
Includes more details on proofreading, editing, and some free advice.
Much of this information I was already familiar with, partly due to my dad working in the printing industry and teaching us some of the terminology and concepts. A number of the concepts have also been covered by various blog posts and other publications that I’ve read through my career.
This guide includes examples on nearly every page (some created for the book and some from historical sources), either illustrating the point or depicting a “type crime” where type was mis-used.
Author of the Declaration of Independence, Virginia state legislator and governor, member of Congress, minister to France, Secretary of State under Washington, Vice President under Adams, and ultimately President himself, Thomas Jefferson was no stranger to power.
This 800-page volume was a good book, but I was a bit disappointed that it wasn’t as biographical as I had initially hoped.
I hadn’t realized how much influence he had on other presidents:
“For thirty-six of the forty years between 1800 and 1840, either Jefferson or a self-described adherent of his served as president of the United States: James Madison, James Monroe, Andrew Jackson, and Martin Van Buren.32 (John Quincy Adams, a one-term president, was the single exception.) This unofficial and little-noted Jeffersonian dynasty is unmatched in American history.”
—Kindle location 192
Jefferson and Hamilton were openly opposed to each other’s politics and their disagreements ultimately became the basis of the two major parties at the time. Hamilton wanted a stronger, more centralized government which emphasized trade and commerce, while Jefferson despised those who worked with their heads instead of their hands—he wanted a rural, agrarian society. Thankfully, Hamilton had President Washington’s ear and the country headed that direction rather than remaining a simple farming culture.
Jefferson was a republican through and through:
“The Jefferson of the cabinet, of the vice presidency, and of the presidency can be best understood by recalling that his passion for the people and his regard for republicanism belonged to a man who believed that there were forces afoot—forces visible and invisible, domestic and foreign—that sought to undermine the rights of man by reestablishing the rule of priests and nobles and kings. His opposition to John Adams and to Alexander Hamilton, to the British and to financial speculators, grew out of this fundamental concern.”
—Kindle location 5171
This biography did cover major events in his personal life, but it seemed to shift a bit around the time he became President and began to read more like a philosophical discussion on how his seemingly-contradictory decisions fit into his framework of wielding executive power to fit his purposes.
It’s definitely worth reading and will give you a perspective on how he made decisions, but personally, I would look elsewhere if you are reading just one book about him for a good biography. That said, it does have a 4.5 star rating (with 1464 reviews) on Amazon, so many other people definitely enjoyed it.
While working on a recent project, I needed to use angled background stripes on a number of pages.
Here are a couple of requirements that limited my options:
- Angled stripes with text content and a background color and/or image
- Angled stripes stacked on top of each other
If you’re using WooCommerce to provide downloadable products and add a new download, previous customers do not automatically get access to it as of v3.x.
Here are a couple of options: Continue reading “WooCommerce Downloadable Products: Granting Permissions to Previous Customers”
Finally…back to the actual presidents. John Adams by David MucCullough was my pick for our second president, partly because we owned a copy of the book already, and partly because it’s one of the most-acclaimed biographies of this lesser-known founding father.
I took almost a year to finish this 752-page book. At times it seemed a bit slow, but I did keep getting sidetracked with other unrelated books, so it’s not this volume’s fault.
Overall, it was a good biography; I didn’t feel like McCullough tried to gloss over Adams’ foibles and character deficiencies. It seemed an accurate portrayal of an intelligent, sometimes-cranky politician who was self-aware enough to know that he was too ambitious.
If you’re hosting a church website on shared webhosting, chances are they limit how much space and bandwidth you can use each month. Uploading sermons each week can eat into those limits very quickly.
Enter Backblaze B2, a cloud storage option costs less than a quarter of what Amazon S3 would cost for the same amount of storage. Backblaze has been around for years as a computer backup solution and has made their name by providing reliable storage at low cost.
In fact, the first 10GB of storage is free, so you might even be able to host your sermons at no cost at all. Continue reading “How to Use Backblaze B2 with Sermon Manager for WordPress”
This little plugin has one job: make WPForms’ Google Recaptcha script load asynchronously.
Get the plugin on GitHub.
- Copy the
wpforms-recaptcha-async.phpfile to your
wp-content/plugins/directory (or compress to a zip file and upload in the WordPress backend “Plugins > Add New”
- That’s it. All the merged scripts will be loaded with the