AMP Trial and Error

As a follow up to the Octopress and Jekyll post I thought I was a genius for following that process to easily get a website up and running for cheap. I was thinking that I could have my entire site on AWS CDN servers and Google CDN servers and thought how cool would that be! Note that the title says Trial and Error. These were my errors.

At the StarEast 2016 Conference I had a stroke of genius and remembered something about AMP. So after looking it back up I thought that besides being super performance geeky it would be awesome! After one week of development I canned that project and in a few hours the current site that you see now was born.

My initial reaction after reading the documentation for the AMP language was that this is odd. It is based off of HTML but it is using a lot of specific new elements that are not supported officially by some of the older browsers. Granted I think the amp js file, which is needed, might fix some of those older browsers compatibility issues.

Yes you did read that last sentence correctly there is one minimized is file that is required in the head section and any other js file that are needed to be at the botton of the doc.

All CSS needs to be inline.

Luckily I found a Github repo that had already did the heavy lifting that integrated Jekyll and AMP. All that is needed is some styling and site configuration. It is called Amplify

Easy as pie for that.

Now that made making the site easy to build since Jekyll can turn SCSS into plain old CSS. Cool so no real issues still.

Bonus was that it was still semi responsive site. Not a fully responsive site with different layouts for different resolutions but with settings so that it will fit into the screen. An example being that the content body width was 70% of the screen width.

All JS files need to be served from the bottom of the page and there can be no inline javascript. That is all fantastic as it allows for faster rendering times since downloading the Javascript resources does not block the previewing of the site.

Again this is great except for the fact that embedding comments is causing issues with Disqus. So no dice there.

There is also a validation tool built-in that is accessed by navigating to your site and appending #development=1 to the URL. Once you do that then by looking at the console output it will run a script to determine if the page is a valid AMP page

TLDR; fine for content not for audience interaction.

Update: June 9, 2016

Decided to take another look at this and found a few examples using Disqus comments. I might take a look at doing this over the Fourth of July weekend.

Andrew Krug's Picture

About Andrew Krug

Automation consultant helping you deliver greatness effectively.

New York, USA http://andrewmkrug.com

Comments