Web

The Critical Rendering Path: You’ve probably heard about it if you’re living in the front-end world. Against the do not mix HTML and CSS philosophy, it’s highly effective to put the render-critical parts of your stylesheet directly into the delivered HTML response. 1

But this article is not a pro and cons list of this technique — which will be deprecated if HTTP/2 is ready, rather a solution for one fundamental problem of the available tools: They are supposed to be used with static, highly predictable sites where deliverable HTML (generated by Jekyll or Middleman for example) files lying around, waiting to be analyzed.

Usually we build applications which are not static, but dynamic at a larger scale with varying layouts and templates, though. To extract the render critical CSS in those cases, we need to send actual HTTP Requests to evaluate what is critical on the pages in question.

Render Critical CSS Workflow / Overview

The Solution

We need three things in order to deliver the critical CSS based on the requested page:

  1. A build task which generates the critical CSS.
  2. Logic to find the page-matching critical CSS file.
  3. Output the critical CSS inline in the <head> section.

I skip the details on how your development environment might look like and go straight to the important parts, because the workflow is adaptable to almost any technology-stack. In my example, I’m using a WordPress instance served by Vagrant which resembles the later production environment.

{•••}

Oh hey, ein neues Format auf dieser Seite.

Statt täglich oder eher unregelmäßig einzelne Sachen zu dokumentieren – und so noch mehr Noise in die Kanäle zu bringen – gibt es ab sofort eine wöchentliche Ausgabe mit Kram den ich die Woche über als interessant einstufe, oder der sonst irgendwie passiert ist.

Da ich selbst Fan derartiger Beiträge bin und gerne mal wieder ein paar Worte in dieses Fenster hier eingeben möchte, die nicht nur aus Code bestehen, gibt es nun eine Retrospektive in dieser Form. Genug begründet, nachfolgend Ausgabe 1.

{•••}

Mit Instapaper konnte ich mich irgendwie nie anfreunden, das App erschien mir irgendwie zu kahl und simpel, Read It Later war schon besser, aber unübersichtlich und hässlich. Letztendlich nutze ich so gut wie gar keinen der „Später lesen“-Dienste.

Doch was sah ich da heute plötzlich: Read It Later heißt nun „Pocket“ und es scheint so, als wenn Read It Later endlich aus dem ‚Kokon‘ geschlüpft ist, endlich schön, endlich zeitgemäß und mit einigen Ansätzen, die zukünftig wohl noch erweitert werden. (Hub für alle Inhalte)

Pocket ist übersichtlich, schlicht aber doch angenehm zu nutzen, denn man sieht beispielsweise seine „gemerkten“ Dinge schön aufbereitet mit einem Vorschau-Bild. Nicht wie bei anderen Diensten, bei denen man nur eine Textliste mit Headlines vor sich hat. Diese aufbereitete Form gefällt mir bei Flipboard schon wirklich sehr gut.

Doch auch der Dienst an sich ist nicht nur für Texte und Artikel gedacht, welche übrigens im hauseigenen ‚Mobilizer‘ schön aufbereitet werden, sondern auch für Videos und Bilder.

Eine weitere schöne Sache, die Kompatibilität in den zahlreichen Apps bleibt bestehen, man wählt in Tweetbot oder Reeder einfach „Read It Later“ als Service aus und es funktioniert. Super.

Pocket gibt es kostenlos für iOS und andere Plattformen und ist definitiv einen Blick wert.

spotify-deutschland

Spotify hat es endlich geschafft, es ist da, hier bei uns in Deutschland! Was vor einem halben Jahr noch unmöglich erschien, ist nun endlich Realität. Danke verdammte liebe GEMA!

Ich will jetzt – mitten in der Nacht – auch keine langen Geschichten niederschreiben, sicher wisst ihr was Spotify ist, und warum es so großartig ist, deswegen mach ich es kurz: Spotify ist da und ich bin von der ersten Minute an wirklich begeistert und gewillt, mein Geld richtung Premium oder Unlimited zu werfen.

Probiert es aus – es funktioniert auch kostenlos wunderbar – und habt Spaß!

uberspace

Kennt ihr das Gefühl, wenn ihr von etwas so begeistert seid, das andere denken, man sei bestochen, dafür bezahlt, … worden? So ähnlich geht es mir gerade. Doch warum?

Grund für all die Aufregung ist ein Web-Hoster, der auf den Namen „Uberspace“ hört, und durch ein äusserst ungewöhnliches (zumindest auf den ersten Blick) Konzept auffällt: Denn bei Uberspace bestimmst du, wie viel dir das Angebot & Service wert ist.

1€? 5€? 10€ im Monat? Egal, es gibt bis auf den Mindestbetrag von 1€/Monat keine Konditionen oder Knebelverträge, du kannst wirklich so viel Zahlen wie du willst, keine versteckten Haken wie man sie sonst fast immer hat.

Doch bevor man über Preise spricht, erst einmal die Fakten, was Uberspace so alles feines bietet. Die Ubernauten fassen das wie folgt zusammen. Wer mehr lesen will, findet hier die Details.

 SSH. Perl. PHP. Python. Ruby. node.js. Erlang. Lua. Compiler. FastCGI. MySQL. CouchDB. MongoDB. Cronjobs. HTTPS. IMAP. SMTP. Webmail. qmail. vmailmgr. maildrop. Spam­Assassin. ezmlm-idx. DSPAM. ~/service. runwhen. Eigene Logs. Backups.

{•••}