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)

Stromverbrauch des Samsung Galaxy Nexus

Geschrieben von everflux am März 3rd, 2012

Man gewöhnt sich ja daran, dass man alle Nase lang das Handy tauschen muss. Sei es für ein neueres Betriebssystem oder … nein. Eigentlich nur dafür. Die Bildschirmauflösung des Galaxy Nexus ist sicherlich nett, aber der primäre Grund das aktuellste zu kaufen ist für mich aktuelle Software. Und der wichtigste Grund eben kein neues zu kaufen ist die Akku-Laufzeit.
Nach einem Tag mittlerer Nutzung kann das gute direkt an die Ladestation. Neben technischen Durchbrüchen kann es aber auch helfen die Hintergrundprogramme etwas zu zügeln.
Bei mir hat es geholfen die Google-Plus Anwendung von der Synchronisation auszunehmen. Dazu kann man bei dem Handy unter „Synchronisierung“ den jeweiligen Google Account anklicken und die Google Plus App von der Hintergrundsynchronisation ausnehmen. Subjektiv hat das rund 10% gebracht und seit dem bin ich mit dem Galaxy Nexus auch sehr zufrieden.
Dennoch darf es im nächsten Gerät wirklich etwas mehr Akkupower sein.

Google Plus Kontakte im Google Talk

Geschrieben von everflux am Februar 19th, 2012

Seit einiger Zeit haben sich bei mir merkwürdige Kontakte im Google Talk breit gemacht. Ich kannte die Personen zwar, doch konnte ich mich kein Stück erinnern, dass ich diese im Google Talk hinzugefügt hätte. Besonders auf dem Handy nervt das, möchte ich besonders da nur die wichtigsten Kontakte haben.

Nach einigem überlegen wurde mir dann klar: Das sind Google Plus Kontakte! Offenbar wurden alle hinzugefügten Kontakte magisch in mein Google Talk eingebunden. Doch wie schaltet man das aus? Ich habe keine Option gefunden. Weder im Google Plus auf dem Android Handy, noch im Google Talk.

Auch wenn ich per Browser – vom Handy aus – auf die Google Plus Seite gegangen bin, konnte ich keine passende Einstellung finden. (Ich dachte erst noch, dass es an der mobilen Version von Google Plus liegen könnte. Also fix im Handy auf „request desktop version“ geklickt. Interessiert sich Google nur  nicht für. Wieso auch, sind ja beides auch nur Google Produkte, da kann man ja nicht erwarten, dass die zusammenarbeiten… bei Google muss man am Ende der Seite den „show desktop version“ Link(!) benutzen.)

Jedenfalls habe ich dann im Browser nach einigem Suchen endlich die richtige Option gefunden. Es handelt sich um die „Datenschutzeinstellungen“ für den Chat. Sehr logisch. Da kann man dann auf „benutzerdefiniert“ klicken und sich aussuchen welche Kreise man gerne im Google Chat eingebaut haben möchte. Keine geht dann sogar auch. Naja dann lass ich das mal als halben fail durchgehen.

Hier noch die bebilderte Anleitung für Leidens-genossen:

In den Datenschutzeinstellungen kann man konfigurieren welche Google Plus Kontakte im Google Talk angezeigt werden sollen:

Ich streite nicht ab, dass es eine Geschmackssache ist, eine einfache Möglichkeit das einzustellen hätte ich mir jedoch gewünscht – vor allem vom mobilen Gerät aus.

Google 404: einself!

Geschrieben von everflux am Juli 4th, 2011

Ein Link bei Google führt zu einer 404 Seite – blöd, kann passieren. Einen typischen „einselfer“ hätte ich Google jedoch nicht zugetraut. Oder handelt es sich da um einen subtilen Witz?

Chrome Notebook: Testdrive

Geschrieben von everflux am Dezember 12th, 2010

Ich verwende unter Ubuntu ab und an ganz gerne den Chromium Browser (Google Chrome „OpenSource developer edition“) – und heute überraschte er mich:

Damit hat Google einen guten Kanal gefunden, Entwickler und Beta Tester für den Test des Chrome Notebook anzusprechen. Das Angebot gilt allerdings nur für die USA – schade. Europa hat auch den einen oder anderen hellen Kopf 😉

HTC Hero Android 2.1 update (Europa)

Geschrieben von everflux am Juni 28th, 2010

Endlich ist es soweit! Bei meiner manuellen Pruefung meldet mir das HTC Hero nun ein Firmware Update auf Android 2.1 – ich hab schon fast nicht mehr daran geglaubt.

Damit macht HTC endlich das Versprechen wahr ein Softwareupdate für das HTC Hero auszuliefern. Wenn man den Aussagen glauben kann, ist es wohl auch direkt das letzte, denn Android 2.2 (Froyo) wird wohl nicht für das HTC Hero als Update kommen.

Das Firmware Update für das HTC Hero dass nun endlich auch in Europa verfügbar ist, meldet sich als 79.88 MB Download und trägt die Nummer 3.32.405.1 – von solchen Versionsnummer könnte sich selbst Oracle noch was abschauen. Weiterlesen »

Google: Langsam, langsamer, toooo slow

Geschrieben von everflux am Mai 17th, 2010

Google legt neuerdings Wert darauf, dass Webseiten schnell sind. Zumindest hat Google die Ladezeit von Webseiten neuerdings als (einen) Rankingfaktor offiziell bekannt gegeben. In den Google Webmaster Tools ist eine Ladezeit von ca. 2 Sekunden noch im „grünen“ Bereich.
Nachdem mir eben aufgefallen ist, dass Firefox Google besonders langsam war, konnte ich mir ein kleines Grinsen nicht verkneifen, als ich dann von Google selbst gesagt bekam, dass nicht mein Browser, sondern wirklich Google langsam war. Und ich meine langsam: Sagenhafte 12 Sekunden fuer eine relativ simple Suchabfrage.

Selbst nachdem ich die selbe Abfrage nochmals verwendete – hier darf man ja aller spätestens einen warmen Cache annehmen – kam das Resultat erst nach 3-4 Sekunden. Wer es nicht glaubt, ich habe echte Screenshots! Weiterlesen »

Google: Enttäuscht von AdWords?

Geschrieben von everflux am April 15th, 2010

Hat Google erkannt, dass Adsense User von Adwords enttäuscht sein könnten? Oder bin ich nur ein besonders attraktives Marketingziel?

Neuerdings(?) erscheinen offenbar in der Adsense Setup Oberfläche „echte“ Ads in der Beispiel-Übersicht, die auch komplett klickbar sind. Ob die optisch so gut integriert sind, und der Inhalt „passend“ ist, das überlasse ich mal jedem selber:

Wer sich fragt, wo man landet: adwords-professional.ch
In jedem Fall ein netter Schachzug, auf diese Weise mit Google Produkten unzufriedene Kunden anzusprechen. Mir wäre es aber auch recht, wenn Google einfach ein Bild anzeigt – dann fällt das mit dem abgeschnittenen Text vielleicht auch nicht so auf. (Auf  der anderen Seite ist das sehr ehrlich von Google – oft sehen die Anzeigen nämlich in der Tat so abgeschnitten aus.)

Skipfish und Ubuntu

Geschrieben von everflux am März 21st, 2010

Google hat mit dem Skipfish Projekt ein Sicherheitstool veröffentlicht, mit dem Webanwendungen auf ihre Sicherheit – oder auch Sicherheitslücken untersucht werden können.

Das in C++ Programm unterstützt Windows, Apple Mac OS X und Ubuntu als Betriebssysteme und – wie für Google üblich – wird die besonderes hohe Performanz als Feature genannt. Im folgenden gehe ich kurz die Schritte durch, Skipfish unter Ubuntu Linux zu betreiben. Weiterlesen »

Youtube Spam

Geschrieben von everflux am Februar 15th, 2010

Entweder ich werde empfindlicher, oder der Spam im Internet wird zunehmend dreister. Auf allen verfügbaren Kanälen…

Und manchmal habe ich das Gefühl es ist noch kein Ende abzusehen.


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