Photo of Scott Fennell

Scott is a WordPress theme and plugin developer with a penchant for connecting the dots between services like MailChimp, Cloudflare, and GoDaddy. He has been published in A List Apart and CSS-Tricks.

For the past couple of months, we have been working on making our platform compatible with Google’s Accelerated Mobile Pages (AMP) format.  If you’re not familiar with AMP, I think it’s fair to summarize it thusly:  The practice of offering your website in a special format that Google invented, so that your Google SERP’s (search engine result page) have a small gray lightning bolt next to them, which leads the viewer to the AMP-formatted version of your page, which is hosted by google, and is definitely faster and more user-friendly than the default version of your page.

An AMP-enabled page in a SERP.

AMP carries a fair amount of controversy.  Many thought leaders worry about the rabbit hole of proprietary formats, and also the eyebrow-raising prospect of allowing google to serve your website. It’s worth getting acquainted with both sides of this argument if you are interested in AMP.  This podcast between web pioneer Jeffrey Zeldman and WordPress co-creator Matt Mullenweg is by far the best discussion I have found on the debate.

For me there is one simple fact that cuts through the entire argument like a laser beam: If a Google search result has a little gray lightning bolt next to it, I’m far more likely to click on it because I know it’s going to be much faster, and I know the next page I see will be content-focused, simple, and legible. In that suspenseful moment where thumbs are hovering over search results, I want LexBlog to fall among the have’s, rather than the have-nots.

How, Generally?

Several years ago I met with former LexBlog CTO, current LexBlog Fairy GodFather, and google employee Robert McFrazier.  I was delighted to pester him with questions as usual, and when I asked him an open-ended question about the best thing we could do for our platform, he told it would be to introduce AMP.  Furthermore, he noted that in the WordPress space, developers were handling AMP as a plugin concept, rather than a theme concept, which he felt was a shortcut not always worth taking.  Although taking a plugin approach allows for faster adoption, it’s very heavy-handed and leaves the AMP page with very little of the design and branding that appears on the non-AMP version.  Given the time and ability, he believed it would be much better to adopt AMP from within a theme, so as to more easily carry the theme concepts (color scheme, layout, logos, fonts, icons) into the AMP version.

Robert was right.  Even today, years after our talk, the WordPress community is approaching AMP almost entirely via the “official” WordPress AMP plugin, with virtually no theme frameworks doing anything interesting with AMP.  I’m very proud to say that at LexBlog we’ve broken that trend!  We have developed a one-click solution to enable an AMP version on any site using our modern platform, and that version carries all of the important design and branding concepts included in the non-AMP version.  As this project has matured, I’ve often had trouble telling the difference between our normal front-end and our AMP front-end.

How, Specifically?

There were three categories of things that we needed to import to our AMP version: Design, layout, and content.

Design

Because we approached this from within our theme, rather than taking the shortcut of approaching via a plugin, it was very convenient to grab design elements such as:

  • Typekit fonts.
  • FontAwesome icons.
  • Firm logos and blog logos.
  • Color schemes.

Layout

Layout was more difficult.  By layout, I mean things like white space, alignment, and a grid system.  Unfortunately, I was not able to simply load our normal CSS in its entirety, because it would have exceeded AMP’s size limit of 55kb.  I could potentially have just imported only the elements I needed, but I didn’t design that system to be served a la carte and I didn’t want to increase our bug surface area by forcing the issue.

What I did instead, was grab a subset of the Bootstrap front end framework — just their grid and white space stuff — and then modify it to be compatible with AMP’s formatting rules.  I like this solution, largely because I really like Bootstrap, and also because it was fast to implement and left me with many thousands of kb left over for adding custom styles on top of it.

Content

By content I mean the act of converting html into the format that AMP requires.  A simple example is instead of the normal <img> tag, AMP uses an <amp-img> tag.  It gets far more complex from there, as everything from animated gifs to twitter embeds require special massage therapy.  This is where I was happy enough to stand on the shoulders of giants and grab some formatting code from the official WordPress AMP plugin, noted above.  It was fun to reverse engineer all the code into a state that was maintainable for our project, and I’m happy enough to avoid re-inventing that wheel.

What Next?

At the moment we are deploying AMP on internal blogs and employee blogs, and the results have been fantastic.  We’re in the process of generating automated test results against all of the blogs on our entire network, which we’ll use to further refine the product, before eventually opening it up for widespread use in some form later this year.

I have no doubt that this product will be a massive success on a technical level.  More interesting will be the debate of, is AMP good for websites; is it good for the web?  My prediction is that the current stated fears about centralization will take on the look of John Henry’s hammer or William Jennings Bryan’s soapbox — it’s time to let the machines win something they’re going to win anyways.  If I’m being completely honest, I hope AMP eats the web.  I hope that in five years from now, we’re all making a single AMP-compatible website, rather than bolting on an AMP-compatible version.  Will that happen?  I don’t know.  But what I do know is that in order for it to happen, websites will need to preserve design and branding in their AMP offering, which is what our project is really about.

No kidding, there I was, checking my email, when I saw it:

[RESPONSE REQUIRED] You’ve been selected as a speaker for WordCamp Maine!

It’s more or less my professional goal to infiltrate the inner circles of the WordPress community, so this came as good news.  Even better, I already had my topic prepared because I’d written it as an ALA article some years ago.  The one problem?  Slides.  I had none, and if I tried to make one I’d need a pro license for MS-Paint.  That’s when I decided to hit the easy button.

Brian Made My Slides

I literally made a jira ticket for Brian to make my slides and he did just that.  They were phenomenal and you can download them here.

The cover slide.

That’ll do, no?  I had the first presentation after the morning break, but put my cover slide on the projector as soon as the break began.  I think the awesome design helped fill a few extra seats.

The Talk Went Pretty Well

A 40-minute stage appearance is a really long thing to commit to rehearsing on a given evening.  Do I shower today, or rehearse my talk?  I showered less than average over the month prior to my talk, but still should have rehearsed a bit more.  I stumbled a couple of times.  But, it seemed like people were engaged.  I was having to pause for laughter at the occasional dev joke and I can’t really ask for more than that.

Yeah Speaking at WordCamp is Fun but Have You Ate Pizza with Matt?

In an amazing coincidence, Matt Mullenweg happened to be visiting Portland that same weekend.  He held a meet and great at a small workspace where several Automatticians work and I finally got to meet one of my heroes.  I was a little star struck!  He honestly was so cool.  So friendly, so engaging, so intelligent, so inspiring.  He spoke for about 45 minutes, and then took questions for about that long.  One person asked him several very specific questions about how to use the media library, and he was incredibly graceful about it.  Not even a chuckle or an eyeroll, just passion and interest about some of the features that came straight from “Photo Matt”.

He spoke about Gutenberg a bit.  He seems happy and he seems unflappable despite the mounting uncertainty in the community.  I think it’s called perspective.  He compared it the uncertainty that came about when WordPress first adoped TinyMCE.  Wow.  Yeah, that’s perspective.  He also said that it can be challenging to discern between valid criticism and criticism of change for its own sake.

Anyways that’s a wrap for this donut.  I’ll be sure to share the video of my talk if it makes it onto WordCamp.tv!

I’ve been writing WordPress themes and plugins for about a decade and recently I’ve been putting more effort into curating a personal “boilerplate” folder for new themes and plugins. In reading through it, I can see what concepts and components have become habitual for me, regardless of the subject matter of the project.

  • Some `Constant` Companions

    I declare the following constants:

    The purpose of this block is to introduce some basic data about our project, into the global scope, in a concise convenient way, that cannot be altered.

  • Include Font Awesome

    It’s pretty much a given that any project will involve icons, and I prefer FontAwesome:

    https://gist.github.com/scofennell/463d6fef2eb10a296cd758d96ce82ad6

  • The State of States

    A huge part of my boilerplate is just providing a wide platform for presenting and handling form inputs. It seems a little odd, but I’ve not come up with a better strategy than to just include this in every project:

    God help me if a state ever secedes!

  • Very Classy

    I set up (php) classes to add (css) classes to both the body tag, and each post:

    This fits in well with my high regard for SMACSS.

  • Staying Up To Date with Updates

    I dislike the normal hook system for performing action on theme and plugin activation, so I instead have some code that executes everytime the version number increases (which it does upon first install):

    Because this adds an extra query, I only have this running for projects that register things in the database such as roles, or other various high-value routines like rewrites.

  • Agoification

    Human time diffs can be annoying, especially if you care about time zones. I don’t regret having this available in every project:

There are quite a few other things common to all of my new projects, but this is a good cross-section. I wish I was better about really capturing every lesson from every new project, but in reality I’m happy if I remember to curate just one. Over time it’s become a valuable library and it also inspires me to push the quality of my code on each project, in the hope that something does emerge as boilerplate worthy.

Some years ago when I first interviewed with LexBlog, the CTO reiterated several times that he really wanted me to be fluent in plugins, in addition to themes. I knew my way around plugins generally, but I liked the vibe I got from the interview and I wanted the job to work out well, so I stopped at Barnes and Noble on the way home:

A career.

This book changed my working life profoundly. It’s no exaggeration to say that the reason I have a career, a home, a family, is this book. What’s funny too, is that it still holds up incredibly well. Very few concepts in these pages have fallen by the wayside or require significant updating in order to use today. I don’t think you can say that about many technology books.

I’ve probably recommended this book to dozens of people. My own copy is dog-eared and duct-taped. Recently when I moved my family from Alaska to Maine and was cutting down on my material possessions, this book made the cut. It traversed the western hemisphere!

Accessibility, also known as “a11y”, refers to how well a website functions for people with disabilities. Common examples of disabilities in this space include visual conditions like color-blindness, vestibular conditions like animation nausea, and motor disabilities such as cerebral palsy, which happens to be the focus of this article.

The Feature

I am tasked with creating a “jump menu” for navigating tag archives.  Something like this:

Animated GIF - Find & Share on GIPHY

There is no submit button.  By merely selecting a menu item, the page navigates to that particular tag archive.  The premise of this UI is that, by not having to click a “submit” button, we save the user time and decision-making, hopefully improving the experience.

The Problem

This all works well enough, assuming you’re using a mouse.  But what happens if you’re using a keyboard?  Continue Reading How We do Accessibility: A Case Study

JavaScript wrangling has been among the most controversial topics in front-end development for a long time now. It’s right up there with tabs vs spaces and french press vs pour over. Here’s how we do at LexBlog in all current and foreseeable projects.

The Global Object

We kick off a plugin/theme JS file with a global that is namespaced for that project, containing handy functions used throughout.  Example:

Continue Reading How We Boilerplate our JavaScript

I was looking forward to writing about an intriguing bug in the new FireFox Quantum browser. I was looking forward to depicting the obscure CSS syntax that it bungles, and I was looking forward to explaining just what I plan to do about that. Given the rash of workplace abuses in the news lately, I’m not going to write about technology this week. Instead I’m going to write about the best advice I’ve ever heard:

Be absolutely professional in everything you do.Larry Ullman

Larry Ullman is the biggest influence on my career as a programmer. I’ve devoured all of his books many times. It is no exaggeration to say that the reason I have a family is because of the words this man has written in many, many books. And from all of his sage wisdom, that right there is the pearl. This advice was originally in reference to something quaint, like code or clients or invoices. It still works for that stuff.

Honestly, I struggle with this advice every single day. I often re-read myself in tickets or emails and wish that I had found a way to be more patient, more thorough, more researched. But what I can’t fathom is a workplace where this struggle includes the desire to harm a coworker physically or mentally.

It’s been a while Larry, but there are many of us out here who still read your books and still take your advice. And many more who should.

I often work with exactly one plugin active, other than the plugin I’m working on and its dependencies. That plugin is Query Monitor. QM adds a button to the admin bar that turns red when I make mistake, and reveals a treasure land of begun info when I click on it.

We go live to me making a mistake.

QM is completely free and has inspired a vibrant community of side-plugins, that hook in and provide even deeper debug info about specific topics. It’s updated frequently and is active on over 30,000 websites. The author, John Blackbourne, actively engages feedback on Twitter. We use it a lot here at LexBlog. It’s not a hard policy per se, but I strongly recommend to my teammates that they never work without it.

John Steinbeck once said to write for an audience of one:

In writing, your audience is one single reader. I have found that sometimes it helps to pick out one person—a real person you know, or an imagined person and write to that one.

Similarly, I think many of the best plugins come about when, as developers, we code for our own needs — our own audience of one. I’ve also heard this called “dogfooding” and I like it.

Query Monitor has taught me about my own mistakes and failings thousands of times. On this day of giving thanks, I give thanks to you, Query Monitor!

I try not to get overly technical in this space, but when I get a chance to implement one of my very favorite programming techniques, I have a hard time keeping it to myself.  I want to tell you about recursion.  Per wikipedia:

A common method of simplification is to divide a problem into subproblems of the same type […] where problems are solved by solving smaller and smaller instances.

Here’s the example.  Earlier this week I was dealing with a problem where I needed to turn the english words “true” and “false” into the boolean values true and false.  This would be easy enough to do if it were simply one instance of the words:

Continue Reading Recursion

There’s nothing wrong with making mistakes, in fact I highly recommend it. However, if I make a mistake and I have no plan for preventing it from happening again, that feels pretty lame. One mistake I have made before, is forgetting if I am on a live installation or a staging installation. When I say live and staging, I’m referring to WP-Engine’s excellent system.

I made this mistake recently while working on a site for a friend, and it was embarrassing. I decided that a good way to prevent it, would be to add an obvious visual cue to alert the user when they are on a staging site. I found some time this week to write a small plugin that does exactly that:

See the yellow “hazard” tape at the bottom? If you click it, it fades out so it’s not in the way. It’s my way of saying, “Hey! You are on staging.”

Instead of hosting this plugin in our normal repository, I decided to host it on WordPress.org. That way I can use it on my friend’s site, in addition to our LexBlog sites. And so can you:

LXB Staging Reminder