I have experimented with AMP HTML1 on my home page, and am pleased with the performance. The next thing I want to try is migrating this blog over to AMP as well.
Because I still wanted the ability to automatically link section headings, I leveraged the plugin
grunt-text-replace to pre-process my blog post HTML.
The above configuration uses a regular expression to find all headings on the page with an id. Then the headings are modified using the values captured in the backreferences.
The following diagram breaks down what the matching rules are. One interesting optimization I’ve done is to use a backreference inside the regex itself. This makes matching more robust by ensuring the start tag will only match a paired ending tag.
If railroad diagrams are not your thing, Regex Buddy2 also provides a nice plain-English explanation of how the regular expression is constructed.
<img> tag, AMP HTML provides a custom element
<amp-img>. This is necessary so it can optimize the image size as well as when images are downloaded and rendered.
For images I could just change the Markdown source to use an
<amp-img> HTML tag. But I wanted to avoid AMP spesific markup as much as possible and continue to use Markdown to write my blog.
We can’t use regular expressions again because the HTML for various images is too complex. You’d have to do something crazy like this, and even then it would be very brittle.
In stark contrast to the disaster above, creating a custom Jekyll filter to replace images is very clean and simple!
By extending the Jekyll build process I can leverage powerful gem modules to do the heavy lifting while keeping the process unobtrusive. This means when AMP inevitably falls out of favor as the web evolves, my source files don’t need to change in the next migration.
The only downside to this is that I need to define the image sizes in the HTML. I could try to leverage something like FastImage3 to automate this process. But that seems like more trouble than it’s worth since the Kramdown parser supports manually doing it with the following syntax:
Things look pretty good on the blog for the most part, and it wasn’t too difficult to switch over.
I think that’s enough for now, next I’d like to add in Schema.org BlogPosting annotations. There are also some SVG diagrams that use
<ellipse> which is currently disallowed by AMP HTML.
Give Feedback via my AMA (ask me anything) project on GitHub. Published on by Daniel Lamb.