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.

Making tmux Pretty and Usable - A Guide to Customizing your tmux.conf

www.hamvocke.com / Direktlink

Ein etwas älterer Beitrag von Ham Vocke über Customizing von Tmux. Aber immer noch aktuell, vielleicht schaffe ich es irgendwann auch mein Tmux Customizing zu beschreiben:

Judging from the copious blog posts and dotfiles repos on GitHub there are many people out there who feel the urge to make tmux behave a little different; to make it more comfortable to use. And actually it’s quite easy to customize the look and feel of tmux. Let me tell you something about the basics of customizing tmux and share some of the configurations I find most useful.

The invisible parts of CSS

madebymike.com.au / Direktlink

Mike Riethmuller hat einen interessanten Artikel über unsichtbare Eigenschaften von CSS geschrieben. Dies geschah aus der Idee heraus dass viele eigentlich CSS lernen ohne zu wissen, was sie dort eigentlich genau machen. Nämlich versteckte Eigenschaften manipulieren.

You may not have realised it, but the visual results of CSS are often an indirect consequence of manipulating hidden properties. Some CSS properties such as background-color have a direct and obvious relationship with what you see. While others such as display remain ambiguous to many of us because the results seem highly dependant on context.

Frontend Developer Handbook 2017

frontendmasters.com / Direktlink

Das FE Handbook von 2016 fand ich ganz gut, aber dass ich es komplett gelesen habe, kann ich nicht wirklich sagen. Es landete eher im "Ich speichere es mal in meinen Bookmarks und les es später" Haufen. Und dort liegt es bis heute. Ist aber nicht schlimm, denn Cody Lindley hat nun die 2017 Edition veröffentlicht. Und auf den ersten Blick sieht es sehr gut aus.

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2017.

It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and head hunters to gain insights into the practice of front-end development.

Ausserdem ist es umsonst kostenlos, schon deswegen einen Blick wert. Ich hab es mal abgespeichert und les es später.

CSS Grid Visualizer in Firefox 52

blog.mozilla.org / Direktlink

Letztens schrieb ich ja bereits dass Firefox in der Dev Version bereits CSS Grids unterstützt. Diese sind nun auch final in der Version 52 gelandet. Zusammen mit einem sehr praktischen Visualizer.

Vielleicht werde ich ja mal in Zukunft meinen Chrome geschlossen lassen und eine Weile Firefox nutzen. Da passiert gerade einiges.

Oh Shit, Git!

ohshitgit.com / Direktlink

Git is hard: screwing up is easy, and figuring out how to fix your mistakes is fucking impossible. Git documentation has this chicken and egg problem where you can't search for how to get yourself out of a mess, unless you already know the name of the thing you need to know about in order to fix your problem.

Dazu ist nicht mehr viel zu sagen. Diese Seite ist sicherlich ein Bookmark wert.

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 😍