Ich bin ein Frontend & UI Entwickler aus Bremen. Hier schreibe ich Artikel über Webentwicklung, Design, Software, Workflows und was mich sonst beschäftigt.

Du hast Anmerkungen und Feedback zu meinen Artikeln? Dann schreib mir! Ansonsten folgt mir auf Twitter und abonniert mich auf YouTube.

Do responsive sites have to be so tall on mobile?

www.viget.com / Direktlink

Dies ist etwas was mich selber oft stört. Eigentlich ist es sogar der erste Anhaltspunkt dass eine Webseite nicht mit einem Mobile-First Ansatz gestaltet worden sind. Elemente die mobil standardmäßig in die volle Breite gehen und so komplett aus Ihrem Kontext gerissen werden. Ein Riesenblock füllt einen ganzen Smartphone Bildschirm aus, aber es gibt keinen Anhaltspunkt mehr dass es etwas mit dem Block darüber oder darunter zu tun hat. Dieser Artikel von Vigetzeigt das Problem und bietet Alternativen.

Frontend Performance Checklist 2017

www.smashingmagazine.com / Direktlink

Das Smashing Magazine hat seine "Frontend Performance Checklist 2017" veröffentlicht. Insgesamt 33 Tips, inklusive PDF.

Kurz zusammengefasst ergeben sich folgende 10 Tipps:

  1. Your goal is a start rendering time under 1 second on cable and under 3 seconds on 3G, and a SpeedIndex value under 1000. Optimize for start rendering time and time-to-interactive.
  2. Prepare critical CSS for your main templates, and include it in the of the page. (Your budget is 14 KB).
  3. Defer and lazy-load as many scripts as possible, both your own and third-party scripts — especially social media buttons, video players and expensive JavaScript.
  4. Add resource hints to speed up delivery with faster dns-lookup, preconnect, prefetch, preload and prerender.
  5. Subset web fonts and load them asynchronously (or just switch to system fonts instead).
  6. Optimize images, and consider using WebP for critical pages (such as landing pages).
  7. Check that HTTP cache headers and security headers are set properly.
  8. Enable Brotli or Zopfli compression on the server. (If that’s not possible, don’t forget to enable Gzip compression.)
  9. If HTTP/2 is available, enable HPACK compression and start monitoring mixed-content warnings. If you’re running over LTS, also enable OCSP stapling.
  10. If possible, cache assets such as fonts, styles, JavaScript and images — actually, as much as possible! — in a service worker cache.

ES6 Feature List

codetower.github.io / Direktlink

Als Frontend Entwickler um EcmaScript6 herumzukommen ist inzwischen unmöglich. Dank Babel/Webpack ist ES6 heute super nutzbar und inzwischen versuche ich jedes Projekt mit ES6 umzusetzen.
Wer hier selber noch nichts mit Begriffen wie const, let, Arrow Functions oder Spreads anfangen kann, hier hat jemand eine lange Liste mit allen Features und Beispielen erstellt. Sollte in jede Bookmarkleiste.

Abschliessende Worte: ES6 😍

Emoji Commit Messages

github.com / Direktlink

Danny Fritz hat ein interessantes und effizientes System zum Taggen von Commit Nachrichten veröffentlicht. Er nutzt einfache Emoji's für verschiedene Committypen. Ich hab es kurz ausprobiert und muss sagen - es funktioniert super!

Achja - ich nutz hab mir offensichtlich ein kleines Linkpost System eingebaut. Das dürfte meine Postfrequenz etwas erhöhen. ✨

💄 Nachtrag: Der Dennis hat mich noch darauf aufmerksam gemacht, dass es noch diese Seite gibt. Ist auch gleich viel hübscher!

Workflowy ist kein neues Tool. Es ist auch kein revolutionäres Tool. Was Workflowy ist: Es ist simpel und effektiv.

Frames, Tabellen, Floats, Flexbox... und jetzt: Grid Layouts!

Warum nutzt jemand freiwillig eine 20 Jahre alten Editor - und findet es auch noch gut?