Middleman and Google AMP (accelerated mobile pages)

Geschrieben von everflux am Juni 10th, 2016

Mobile growth is a driver for many technologies: Responsive design, HTTP/2, HTML5 replacing Flash. Facebook started with an own format for optimized mobile delivery. This is not only beneficial to users: If a page is displayed fast, ads are visible before the user clicks away, as well.

Google followed the approach of a custom format, called Accelerated Mobile Pages (Google AMP). Instead of choosing a completely different container, like XML, proven technologies were used: HTML, JavaScript and schema.org JSON notation. By using a JavaScript based runtime to implement functions like delayed loading of non-essential assets and inlining CSS, the initial transmission size of the page can be reduced.

While WordPress got support for generating AMP content by a plugin, other CMS applications seem to be lacking. Especially when using static site generators it can be challenging to generate multiple variants from the same content. I like static site generators for several reasons:

  • Can be served from a low-grade webserver without special requirements
  • Really, really fast page serving
  • Easy to cache / integrate CDN
  • Low attack surface, easy to secure

I used middleman in several projects, so far I am quite happy with it. Thanks to integrated asciidoctor support it was even possible to use a common source for web pages as well as print documents, distributed by other channels.

When facing the desire to provide Google Accelerated Mobile Pages (AMP) using the existing middleman setup along with the existing content I noticed the shortcomings of HTML or asciidoc based page templates. Nevertheless I went ahead and use some customizations (some would call it hacks) to achieve my goal. I prototyped it for trion.de and you can see the AMP result on https://www.trion.de/amp/

The implementation uses the latest middleman 4 and the targets plugin to have multiple variants as build targets. To ensure that the AMP links to not point to the non-AMP version by accident a link_prefix and deployment of AMP to a subdirectory is used. Another option would have been to use a subdomain. Of course the AMP version uses a different layout which includes the AMP engine JavaScript and required markup and meta data for the AMP pages.

 

# Build Targets
# https://github.com/middlemac/middleman-targets
config[:targets] = {
  default: {
    build_dir: "build",
    layout: "layout",
    link_prefix: nil,
    features:
    {
    }
  },
  amp: {
    build_dir: "build/amp",
    layout: "amp",
    link_prefix: "/amp",
    features:
    {
    }
  }
}

In order to be able to reuse the existing content, some global search-and-replace is applied as part of the template.

 

<% content = yield %>
<%
content.gsub!("<img", "<amp-img")
content.gsub!("<iframe", "<amp-iframe")
content.gsub!("</img", "</amp-img")
content.gsub!("</iframe", "</amp-iframe")
%>
<%= content %>

 

It is now obvious why this can be called a hack instead of an engineered solution. A better approach would be possible if the source data for the pages is provided in a more strcutured format like JSON or YAML. Both are supported by middleman and are a good choice for content that follows a well defined structure. (A good example is the trainings catalogue on trion.de/schulung/schulungen-coaching-training.html)

If you think this message is wrong….

Geschrieben von everflux am Mai 30th, 2014

access-denied

FedEx: Fail

Geschrieben von everflux am März 7th, 2010

Ich hatte bereits vor einiger Zeit über meine Probleme auf den Webseiten von SpringSource berichtet. Offenbar handelt es sich bei dem Problem um ein Muster: Auch bei FedEx war es mir nicht möglich, die Seiten korrekt zu nutzen, weil ich das eingesetzte Tracking-Script (Omniture) geblockt habe. Weiterlesen »

Cokefridge: Es geht schlechter

Geschrieben von everflux am Oktober 20th, 2008

Cokefridge kann schlechter – wer hätte das gedacht? Dachte ich früher noch, dass es irgendwann jemand vom Coke Marketing merken müsste, dass hier den Coca-Cola Fans tüchtig auf den Schlips getreten wird, so wurde ich eines besseren belehrt. Weiterlesen »

AMD 64 Java 6 crashes – Workaround und Lösungen

Geschrieben von everflux am April 23rd, 2008

Bereits seit Wochen Monaten gibt es nun das Problem, dass Java 6 ab Update 4 nicht mehr stabil auf AMD64 Plattformen läuft.

Die JVM crasht – und zieht natürlich die laufende Anwendung, wie z.B. Eclipse unter Java, mit in den Tod. Ein funktionierender Workaround ist tatsächlich den Hotspot Java Optimizer/Compiler zu deaktivieren, dazu ist das Programm/Java mit „-Xint“ zu starten. (Bei Eclipse geht das dann so: eclipse -vmargs -Xint)

Wirklich behoben zu sein scheint das Problem mit Java 6 Update 10 – derzeit ist diese Version im beta Stadium. Java 6 U10 wird auch die erste Version mit dem neuen modularen Java Kernel Konzept sein.

Wer das ganze testen möchte, findet auf der Homepage des Java Early Access program den entsprechenden Download von Java 6 Update 10 beta.

Für Ubuntu ist der Austausch folgendermaßen zu bewerkstelligen:

  1. Download der Datei.
  2. Kommandozeile öffnen
  3. bash jdk-6u10-beta-linux-x64.bin
  4. Lizenz (lesen und) bestätigen
  5. in /usr/lib/jvm das ausgepackte Archiv unterbringen
  6. den Link von java-6-sun auf das neue Archiv umbiegen (rm java-6-sun; ln -s jdk1.6.0_10 java-6-sun)

Fertig. Viel Erfolg beim beta testen.

Update:
Sun ist wohl hinter die Ursache gekommen, auch wenn sich der entsprechende Bugreport so ließt als müsse man erstmal Compilerbau gehört haben. Wie so oft gibt es auch nicht nur den einen Bugreport, sondern z.B. auch diesen – aber immerhin es sieht so aus, als sei eine Lösung in Sicht. Und der Bug schon lange – schlummernd – in der Java Codebasis.
Update 2:
Eine weitere Lösung stellt die Verwendung der IBM Java VM dar. Die gibt es inzwischen – endlich – auch als Java 6 Version und für 64 Bit Windows/Linux Rechner. Bei IBM ist für den Java Download eine Registrierung erforderlich. Die Nutzungsbedingungen sind u.U. andere als bei Sun. IBM Java Download.

Google Umfrage zur Kunden(un)zufriedenheit

Geschrieben von everflux am Dezember 14th, 2007

Google hat eine Umfrage zur Kundenzufriedenheit von Adsense Publisher veranstaltet. Das ganze ist jetzt rund sechs Monate her, und da ich nichts mehr gehört habe, blogg ich mal darüber.
Das ganze fing mit einer harmlosen Mail an, in der vor allem das „iPod zu gewinnen“ hervorgehoben wurde – klar mach ich da mit 🙂
„Adsense verbessern und ipod gewinnen“. Ok also direkt mal auf den Link geklickt, und das Ergebnis hat mich eher „überrascht“, ich hab nur chinesisch verstanden.

Weiterlesen »

erotikfilmz.com Betrug? Erpressung? Nötigung?

Geschrieben von everflux am November 18th, 2007

Ich helfe gerne, wenn ich kann. Das wissen viele in meinem Bekanntenkreis und fragen mich, wenn es um Dinge rund um den PC und das Internet geht.
In den letzten Tagen erhalte ich jedoch ungewöhnliche Anfragen: Erotikfilmz.com versendet Rechnungen per E-Mail. Und zwar keine geringen Rechnungen, erotikfilmz.com möchte 144 Euro haben, für die Nutzung von erotikfilmz.com. (Dort werden angeblich Pornodarsteller vermittelt. Auch nicht gerade die neueste Geschäftsidee.) Weiterlesen »

Hadoop Blog

Geschrieben von everflux am November 15th, 2007

Jeremy Zawodny von Yahoo hat in diesem Posting das Hadoop Blog angekündigt. Eines der ersten Themen ist ein Video Interview bei mit Eric Baldeschwieler in dem es um Hadoop und die Beteilligung von Yahoo an der in Java entwickelten Plattform für verteiles Rechnen geht.
Ich freue mich, dass Hadoop weiter an Dynamik gewinnt!

Presentation Zen – Linktipp

Geschrieben von everflux am November 13th, 2007

Ich habe mich bisher mit Linktipps eher zurück gehalten.
Doch nachdem – Gott habe sie selig – Cathy Sierra ihr (damals verdammt gutes) Blog eingestellt hat, und selbst Udo Vetter einen nicht unbeträchtlichen Anteil an „Link“ Postings macht, darf ich auch mal.
Presentation Zen ist eine Webseite auf der vor allem TED Präsentationen genossen werden können.
Eine Wohltat nicht nur für jede, die von Powerpoint Karaoke gequält sind.
Einziger Tradeoff: Alles ist Englisch.
Seit der Rechtschreibreform merkt es der eine oder andere vielleicht garnicht.

Hadoop auf Ubuntu

Geschrieben von everflux am Oktober 29th, 2007

Das Java Framework Hadoop findet immer mehr Anhänger. Und dank Amazon kann sich heute jederman auch einen Cluster zum spielen leisten, dazu gibt es das Amazon EC 2 Tutorial im Lucene-Hadoop Wiki.
Doch es geht auch gratis mit Ubuntu und dem Tutorial von Michael Noll: Hadoop on Ubuntu Linux als Einzelknoten. (Er hat auch ein Tutorial für mehrere Rechner, keine Angst)
Gerade wo sich rapide entwickelnde Bereiche (Ubuntu, Java, Hadoop) ergängen ist sicherlich noch mit spannenden Entwicklungen zu rechnen.
Jetzt ist nur noch ein gutes Ende für den ZFS Streit zu erhoffen – auch wenn Hadoop ein eigenes Dateisystem mitbringt und grundsätzlich anders ausgelegt ist, als ZFS; ZFS bietet für den Storage Bereiche so fantastische Möglichkeiten, dass hier ein großes Dankeschön an Sun fällig ist.
(Wie auch eines an Yahoo für die Hadoop Beteilligung)


http://everflux.de/
Copyright © 2007, 2008 everflux. Alle Rechte vorbehalten. All rights reserved.