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.

Tmux Nutzer wissen - ein Leben ohne diese Software ist nicht mehr vorstellbar. Hier erkläre ich was es ist und gebe einen kleinen Crashkurs.

Ändert eure Passwörter!

github.com / Direktlink

Heute wurde bekannt das Cloudflare über einen längeren Zeitraum einen Sicherheitslücke hatte. Cloudflare kennst du nicht / nutzt du nicht? Egal - Cloudflare wird von vielen Webseiten als CDN genutzt die du wahrscheinlich täglich besuchst, wie z.B. Producthunt, Medium, Codepen, Stackoverflow, Patreon oder Hackernews.

Between 2016-09-22 - 2017-02-18 passwords, private messages, API keys, and other sensitive data were leaked by Cloudflare to random requesters. Data was cached by search engines, and may have been collected by random adversaries over the past few months.

"The greatest period of impact was from February 13 and February 18 with around 1 in every 3,300,000 HTTP requests through Cloudflare potentially resulting in memory leakage (that’s about 0.00003% of requests), potential of 100k-200k paged with private data leaked every day" -- source

You can see some of the leaked data yourself in search engine caches: duckduckgo.com/?q=+%7B%22scheme%22%3A%22http%22%7D+CF-Host-Origin-IP&t=h_&ia=web

Auf Github wurde das Problem beschrieben und eine komplette Liste mit allen gefährdeten Seiten ist dort in einer Liste zum Download (22mb!) vorhanden. Ausserdem ist ein Abgleich mit den 1000 meistbesuchten Seiten von Alexa.com vorhanden. Geht die Liste durch und ändert Passwörter dementsprechend!

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!