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)

StartCOM mit API für StartSSL

Geschrieben von everflux am April 29th, 2016

Let’s encrypt hat es vorgemacht, jetzt zieht der Let’s encrypt Partner StartCOM nach: Neuerdings gibt es eine API! Damit ist es deutlich einfacher, neue Zertifikate in einem automatisierten Prozess zu erhalten.

Laut Webseite ist die API auch für die kostenlosen Domain-Validated Zertifikate nutzbar, jedoch auf 5 Domains beschränkt. Für die meisten privaten Nutzer sollte das mehr als ausreichend sein. Im Gegensatz zu Let’s encrypt Zertifikaten sind die StartCOM StartSSL Zertifikate ein Jahr gültig, so dass es seltener nötig ist, neue Zertifikate zu holen.

Infos im Blogpost von StartSSL: https://startssl.com/NewsDetails?date=20160428 direkt zur API geht es hier: https://startssl.com/startapi

Google AMP (Accelerated mobile pages)

Geschrieben von everflux am Februar 27th, 2016

Google hat das AMP (Accelerated Mobile Pages) Projekt initiiert, um speziell für mobile Endgräte bei mittelmäßiger Datenverbindung Inhalte schneller ausliefern zu können. Das hat sicherlich nicht zuletzt den Hintergrund, dass dann auch mehr Werbung konsumiert wird…

Das AMP Format ist im wesentlichen ein speziell formatiertes HTML Dokument mit JavaScript, dass genutzt wird um Dinge wie lazy-loading und Analytics zu unterstützen.

Nutzt man WordPress als Blogging Software, so steht dafür jetzt ein offizielles Plugin zur Verfügung, mit dem die Inhalte auch im AMP Format ausgegeben werden. Aktiviert man das Plugin, so sieht man bereits nach kurzer Zeit in der Search Console (ehemals Webmaster Tools), dass Google die Inhalte findet und auch indiziert.

Ich habe das für dieses Blog testweise mal gemacht, ich bin gespannt, wie sich AMP dann auswirkt.

Quiz: Welches Land wird es wohl sein?

Geschrieben von everflux am August 1st, 2015

Um welches Land mag es sich da handeln über dass das Handelsblatt hier berichtet?

hinterzimmer

Tipp: Es ist nicht China. Nein auch nicht Nordkorea.

Deutschland? Wirklich? Nein, aber wäre es eine andere Überschrift geworden?

Joey’s Pizza: Formular Validierung

Geschrieben von everflux am Juli 5th, 2015

Das ist schon gar nicht so einfach mit online Bestellungen. Selbst wenn man in der IT arbeitet. Joey’s Pizza – zu denen ich eh ein gespaltenes Verhältnis habe – hat jetzt ein neues Online Bestellsystem für Joey’s Pizza Lieferdienst. Um da zu bestellen müssen Daten angegeben werden, für die es gar keine Felder gibt. Klappte dann aber auch ohne „Name am Klingelschild“, aber hat das Bestellerlebnis deutlich beeinträchtigt. Ich wüsste gerne wie hoch die Abbruchrate bei dem Prozessschritt ist.

joeys-validation

Insgesamt dauert die Bestellung fast doppelt so lange wie bei dem alten System, dafür sind ja auch die Preise angehoben worden. Wenn das nicht fair ist.

The null job

Geschrieben von everflux am Juni 6th, 2015

Ist immer so eine Sache mit den null Jobs… dass jemand wirklich null Job sucht ist aber auch für mich was neues.

Immerhin gibt es null jobs in vielen Städten, man bleibt also flexibel.

null-job

Netbeans maven customization hint

Geschrieben von everflux am März 11th, 2015

I you are using Netbeans to develop a maven based (multi-module) (web) application you may have encountered this problem: The resources are not copied when re-running the application. The easy option: Build the project always before running it.

This is slow and just feels wrong. Netbeans lets you customize the life-cycle of your project, so you can hook all maven executions you like, especially the ‚resources‘ build step.

Open project properties, select ‚Actions‘ and add ‚resources:resources‘ to the front of the ‚execute Goals‘ field:

resources-run

You can add your own custom action as well, in case you want to trigger a specific step independently of the overall project lifecycle, for example the ‚resources:resources‘ goal:

resources

Netbeans – Choose your color!

Geschrieben von everflux am März 7th, 2015

As I regularly test different versions of Netbeans as part of the community acceptance program (NetCAT) and for my own fun and benefit I sometimes struggle to start of the right version: Usually the release version is the right one to go. During NetCAT the beta version needs to be tested and when new features are so promising that you want to run the nightly, you go with that.

I came up with a simple solution to never  launch the wrong edition: Differently colored Netbeans icons. This is how my Gnome launcher looks:

netbeans-choose

Easy to tell that red is the nightly, without looking at the icon text! If you want that for yourself, you can get the icons here:

netbeans-dev netbeans-beta

The icons are created using Gimp and just rotating the colors, so it’s a little hacky but does the trick.

In Gnome you can use the application ‚alacarte‘ (or ‚main menu‘ if you run the english locale) to customize your launchers. Just change the icon:

alacarte

Netbeans, Vagrant und remote PHP Debugging mit xdebug

Geschrieben von everflux am Februar 14th, 2015

Vielleicht hilft dieser Tipp dem einen oder anderen weiter, der gerne die Netbeans IDE zur PHP Entwicklung verwendet und auch Vagrant nutzt: Wenn man mit Vagrant arbeitet, so werden die lokalen Dateien in der virtuellen Maschine gemounted. Für Netbeans konfiguriert man daher „lokalen Webserver“ als Umgebung.
Die Konfiguration von xdebug sieht dann am einfachsten so aus:

[xdebug]
xdebug.remote_enable = 1
xdebug.remote_connect_back = 1
;xdebug.remote_autostart = 1
xdebug.remote_handler=dbgp

Hier wird xdebug angewiesen, sich zum Aufrufer zurück zu verbinden – die IP wird aus dem Request genommen. Das passt in der Regel, wenn man innerhalb von Vagrant nicht noch wilde Sachen (Proxy) macht.
Was leider nicht passt: Die Pfade. Netbeans weißt xdebug für Breakpoints an, welche Datei – inkl. Pfad – an welcher Stelle einen Breakpoint erhalten soll. Die Ordnerstruktur ist innerhalb der virtuellen Maschine höchstwahrscheinlich anders, als auf dem Host-System.
Hierzu gibt man innerhalb von Netbeans noch ein Pfad-Mapping an: Projekt Konfiguration, „Run Configuration“, „Advanced“.
Nun waehlt man aus, wo man innerhalb der Vagrant bzw. VirtualBox Umbebung den Projekt Ordner eingebunden hat. In meinem Beispiel ist das /var/www/localhost

Anschließend kann man den Netbeans Debugger verwenden.
Möchte man spezielle Requests, wie z.B. PUT, mittels curl aufrufen kann man dies auch ganz einfach machen, in dem man den Xdebug Trigger als Parameter anhängt:

curl -X PUT -d '{}' http://localhost:8080/rest/endpoint.php/duplicates\?XDEBUG_SESSION_START\=netbeans-xdebug

Ein Screenshot der Netbeans Konfiguration als Referenz:
path-mapping

Middleman live reload mit Vagrant

Geschrieben von everflux am Januar 31st, 2015

Middleman ist ein static site generator der sich einiges von Ruby-On-Rails leiht, aber eben nur statische Seiten generiert. In vielen Anwendungsfällen ist das auch genau das richtige.

Um die Web-Entwicklung zu erleichtern – vor allem auch mit mobilen Geräten – gibt es das vorzügliche Werkzeug „livereload“. Damit wird im Browser ein reload ausgelöst, wenn sich die Quellen geändert haben. Das spart Zeit und man muss nicht dauernd aus dem Texteditor oder der IDE raus um im Browser einen Reload manuell auszulösen. Zur Integration gibt es zum einen native Browser Extensions, zum anderen kann dies auch über ein JavaScript integriert werden.
Hinter den Kulissen nutzt livereload einen Websocket (ggf. mit Polyfill über Flash) um  den Client dann zu informieren.

Was liegt nun näher, als middleman als static site generator mit livereload zu verbinden. Am besten das ganze noch mit vagrant, so dass man eine isolierte Entwicklungsumgebung hat. Da vagrant mit VirtualBox arbeitet, kommt etwas mehr Komplexität auf einen zu. Der middleman läuft nun nicht mehr auf dem physischen Rechner sondern virtualisiert – damit hat er auch eine andere IP. Einzelne Ports koennen in die virtuelle vagrant Maschine reingereicht werden, das ist für das livereload wegen des Websockets schon mal wichtig. Dazu muss in der vagrant Konfiguration (Vagrantfile) folgender Eintrag vorhanden sein:

#middleman live reload port
config.vm.network :forwarded_port, host: 35729, guest: 35729

Jetzt muss middleman noch konfiguriert werden, dass es auch livereload verwendet:
Im Gemfile für middleman:

gem 'middleman-livereload'

In der middleman Konfigurationsdatei muss nun das livereload konfiguriert werden. Hier ist nun die Besonderheit: Das Livereload Plugin differenziert nicht zwischen der Host-Angabe um das Interface zu bestimmen an den der Websocket Server gebunden wird, und der URL die für den Zugriff auf den livereload Server verwendet wird. Gibt man hier „127.0.0.1“ an, bindet er nur an das lokale Interface in der virtuellen Maschine. Gleiches für „localhost“. Gibt man die externe IP des Hosts an, dann findet das rack-livereload das Interface nicht.

Da hilft als letztes nur noch das „Universalbinding“ – zum Glück ist das auch vom Browser nachher aufrufbar:

activate :livereload, :host => '0.0.0.0', :no_swf => true

Was in meinem Fall noch wichtig war: Das Assset hashing darf nicht ausserhalb der build Konfiguration aktiviert sein, andernfalls wird kein JavaScript beim Middleman-server injected.

Was nun noch wichtig ist: Das von VirtualBox verwendete Filesystem-Mounting unterstuetzt kein notify. Damit muss der middleman server zwingend den Polling-Modus verwenden:

middleman server --force-polling

Der einzige Wermutstropfen: Das funktioniert natürlich dann nur auf dem Entwicklungsrechner. Mit ipad oder Android Telefon im WLAN kommt man mit dem „0.0.0.0“ nicht weit. Aber immerhin funktioniert so das live reload mit vagrant.


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