Here is my blog. If you like it, you may want to subscribe to my RSS feed.

zl-fetch, a simplified fetch

Zell Liew has written a simplified wrapper around fetch, named zl-fetch, that looks promising. From the current v4.0.0 onwards, zl-fetch is a ESM library. It …

List of ECMAScript 6 features

A list of lists: Luke Hoban (+27 contributors) compiled a comprehensive list of the features new with ES6 on GitHub. Another list, which puts ES6 …

Londrina

The heading font used on THE Eleventy Meetup website sprang to my eye. The font is named Londrina and it is a beautiful and interesting …

Coder Ipsum

Lorem Ipsum for coders: Coder Ipsum. It´s made by Sia Karamelegos and she says about the tool: Thought-leadership synergistic programming filler text for your next …

monitorEvents and monitor

monitorEvents # monitorEvents() allows to observe events from the web browser console for Safari, Chrome and Edge. Firefox doesn´t support it. Events will be logged …

testmysite.io

testmysite.io is a website speed test tool by Netlify that measures site performance for different locations: San Francisco New York Frankfurt Sao Paulo Sidney Tokio …

What did I learn?

In a daily standup meeting, consider telling your team mates What did I learn since our last standup? There is also other advice for structuring …

Git Cheat Sheet

@hasanstack came up with a Git Cheat Sheet. I like the command flow overview. Git Cheat Sheet by @hasanstack: Download.

Stack Overflow Developer Survey

This week a colleague shared the Stack Overflow Developer Survey 2022. Admittedly, I wasn´t aware they have such a thing. It´s interesting to read through …

tabindex

WebAIM Tabindex contains an excellent description of how to use the HTML tabindex attribute. The attribute can have three distinct uses: tabindex="1" (or any integer …

Questions for setting up a new team

Jason Yip is asking: https://twitter.com/jchyip/status/1562797626369515522 Diana Larsen, author of Liftoff: Launching Agile Teams and Projects, comments to start teams by understanding purpose, alignment, and context. …

eleventy-embed-tweet

Kyle Mitofsky wrote the eleventy-embed-tweet plugin to fetch tweets during build time, optionally cache the tweets on the file system, and render them by accessing …

:has()

Jen Simmons wrote an excellent article about the new :has() CSS selector on webkit.org, titled Using :has() as a CSS Parent Selector and much more. …

Reduce PDF size on a Mac

You can use the Mac Preview app to reduce the size of any PDF file. The default steps are Open the PDF with the Preview …

JetBrains Mono

JetBrains Mono is my coding font and it has been for years. It´s easy enough to configure VSCode to use the font. What I noticed …

MathJax on the server with Markdown

Eric Meyer[1] made me aware of MathJax. On their site you find the claim: A JavaScript display engine for mathematics that works in all browsers. …

The Effects of Nuclear Weapons

From the preface: For more than four decades, the 1977 edition of The Effects of Nuclear Weapons has been a mainstay for anyone doing unclassified …

Mozilla SSL Configuration Generator

That´s quite useful. A generator from Mozilla to create proper SSL configuration files for various http servers (Apache, nginx, Tomcat, …). Visit ssl-config.mozilla.org.

How to picture a bicycle

I´m planning to take pictures of my Fairlight Strael. Here are my thoughts to prepare the shooting: Find a location. I want to make pictures …

Funny Figures

Emil spent some time creating these tiny figures by following the book Finger-Stempeln für kleine Künstler

How we think about browsers

The GitHub engineering article How we think about browsers shows their progressive enhancement attitude. My takes: Make fast sites: At GitHub, we believe it’s not …

Wasps nest

We have a wasps nest under the terrace roof. At first the wasps have been inside the roof and I closed the whole they were …

Around Bad Driburg

Road bike tour: 82.16 km and 1391 m up. A very beautiful ride. Calm streets mostly but a lot of climbing. Bike Router Track GPX …

Being boring

iA has an interesting article about business presentations, titled Being Boring. The text is introducing their new coming product named Presenter. I´m quoting their claims …

Fairlight Strael Learnings

A short summary of what I´ve learned from my Fairlight Strael Build. Ride quality: The ride quality of the Strael frame is beautiful. The tall …

Meet Web Push for Safari

From the Apple intro: Bring better notifications to your websites and web apps in Safari on macOS with Web Push. We’ll show you how you …

Yoga for cyclists

Taylor Phinney shares the yoga poses that help him both on and off the bike: Yoga for cyclists

cached-commit-date

A npm package to get the latest commit date for a given file path. As getting the commit date is a time consuming step (like …

Tire pressure calculator

Calculate your optimal tire pressure based on surface, tire width, wheel diameter, tire type, avg. speed, and weight distribution on your bike, with the Silca …

markdown-it-cooklang

A markdown-it plugin that provides an incomplete implementation of cooklang.org. I used the logic for a different thing than a cooking recipe. Instead, I described …

Bike gearing calculator

Use bikecalc.com to calculate the best chainring/sprocket combinations for your speed and cadence and what your speed will be at various cadences.

smard.de

smard.de ist die von der Bundesnetzagentur betriebene Plattform zur Veranschaulichung der Stromerzeugung und des Strommarktes in Deutschland.

How to change an inner tube

Follow the two principles: create slack into the tire and work towards the valve! An incredibly well made YouTube video about how to change a …

Cooklang

This is brilliant. Cooklang, a language for personal cooking recipe management. Here’s how the Cooklang ecosystem makes that happen: All recipes are human-readable text files. …

Monday morning

It´s Monday morning 7 am and I want to kick work off. This is what my desk looks like. Emils weekend drawing at my working …

markdown-it-trimmer

A markdown-it plugin to trim some whitespace from the resulting markup. The trimming occurs during the rendering process of the markup. Opening list items with …

Manrope

Manrope, by Mikhail Sharanda, is a free and variable sans serif font. It might be interesting for screen interface and fast load times, because it …

Soylent Green is 2022

Do you remember that movie? This is a film poster of Soylent Green with Charlton Heston. It´s from 1973 and the story play is in …

SVGOMG

To optimize SVG´s easily, Jake Archibald made SVGOMG to be The missing GUI of SVGO In the demo of SVGOMG you can see an 8.54k …

Google Font Icons

Only recently I learned that Google Fonts hosts a set of free Material Icons. You can have them as SVG, PNG and of course as …

Fonts Knowledge

The Google Fonts Knowledge library of original guides to the world of typography contains articles about Introducing type Choosing type Using type There is a …

Privacy trumps metrics

A web user’s need for privacy trumps our need for analytics. This is especially the case for people with disabilities, who rightly don’t want their …

Two kites

Inspired by Emil´s kite-steering unicorn, my colleague Rike, who is sitting next to me, drew even two kites. Rike, of course.

How to Avoid Death by PowerPoint

David Phillips, How to Avoid Death by PowerPoint My takes from the presentation: One message per slide (not more). With more than one message per …

Zusätzlich abgehängt

Die Schere zwischen arm und reich geht immer weiter auf. Aber kaum einer sagt, was das für Kinder bedeutet. Carolin und Christoph Butterwegge wissen es.

The Alt Tour

Watch Lachlan Morton riding The Alt Tour to Paris.
18 days, 5509 km, 66831 m of climbing, 225 hrs of riding.

::before and ::after

::before and ::after add a first child before the other children and a last child after the other children of the element. Rachel Andrew, How …

HTML with Superpowers

It has to have a hyphen in it. Dave Rupert Excellent slide deck by Dave Rupert about Web Components. Find the deck on Notist. Within …

Tour Divide

Lael Wilcox trying to ride the Tour Divide, 2750 miles, in under 14 days. A Rapha Gone Racing film on youtube.

Checkbox webcam filter

Bryan Braun created a webcam filter out of HTML checkboxes. Try by yourself at webcam-test. It´s part of his checkboxland."Checkboxland is a JavaScript library for …

Bundestagswahl 2021

Die SPD ist nach dieser Wahl die stärkste Kraft. Nach einem Wahlkampf, der in bezug auf die Klimakrise meiner Meinung nach oberflächlich und durch Positionen …

Objectified

Objectified from Film First on Vimeo. Objectified Bonus Footage from Film First on Vimeo.

A walk before dinner

How beautiful the place is where we are living now. I step out of the door and it takes only a short walk to be …

Bike Geo´s

Geometries of bikes I find interesting. For comparison my reference is the Rose XEON TEAM GF 57 road marathon bike, which I´m riding for multiple …

Alphabet

At the age of five, Emil for the first time is writing down the alphabet.

Waldbegeisterung

Gerald Klamer is hiking 6000 km through the forests of Germany, mostly also spending his nights in the woods. He writes about his journey at …

Flexbox sizing mental model

The following explanation from Anna Monus is taken out of A Comprehensive Guide to Flexbox Sizing and I find Anna´s text most helpful. Anna has …

Working on grid layout

Emil is colorizing the columns of a newspaper. Maybe to provide a more pleasant reading experience? The resulting grid looks interesting.

Archiv Deutsches Atomerbe

Archiv Deutsches Atomerbe. "Mehr als 60 Jahre Atomforschung und Atomenergienutzung in Deutschland und fast ebenso lange dauert die gesellschaftliche Auseinandersetzung darum. Die Anti-Atom-Bewegung hat Geschichte …

Bilder, die bleiben

Comics als Medium von Journalismus und Reportage: Bilder, die bleiben. der Freitag Nr. 28, 15. Juli 2021. Am Ende des Artikels ist eine kleine Bibliothek …

My favorite HIIT workouts

Please also check favorite yoga flows. Bauch HIIT Workout | 15 Minuten Core & Abs Toned Arms, Abs & Back Workout Fat Burning HIIT Workout …

The green rooftop

Yesterday our two flat roofs received their sedum sprouts. The quality work has been carried out by Gartenbau Beil. Now I´m curious to see it …

Syncthing

Syncthing is a tool to synchronize multiple folders between different computers with same or different operating systems. It is open source, the synchronized data is …

Anatomy of a typeface

Do you know about Aperture, Arm, Bowl, Counter, Hairline, and the like? Anatomy of a typeface is a visual explanation of the terms which allow …

Die Pflanzen und ihre Rechte

Die Pflanzen und ihre Rechte – Eine Charta zur Erhaltung unserer Natur von Stefano Mancuso. Ohne Pflanzen überlebt nichts auf unserem Planeten, der über nur …

Remove unwanted scrollbars

Detect CSS Overflow Elements is a tiny hack by David Walsh to detect the root cause of unwanted scrollbars on a web page. Use the …

Found Color

Found Color is an exploration of accidental color schemes, curated by Eighth Day.

Remove git history

Make the current working directory into the only commit and remove the complete git history. Found on stackoverflow. git checkout --orphan newBranchgit add -A # …

Uniwidth typefaces for interface design

Uniwidth is not the same as monospace! Monospace is non-proportional, meaning each letter occupies the same amount of space. Uniwidth is proportionally spaced, meaning each …

Web Interface Handbook

The Web Interface Handbook „is a book about the fundamentals of creating a good web interface. You will find out how to make effective forms, …

CSS Tips

CSS Tips by Marko Denic is a compilation of things that can be done with CSS. It contains A typing effect drop-shadow for transparent images …

Edit on GitHub for an 11ty powered website

Adding a link to edit the contents of any page for an 11ty powered website on GitHub is simpler than I thought.[1] Example: <a href="https://github.com/ulfschneider/11ty.ulf.codes/edit/master/./content/posts/2021-04-27-edit-on-github-11ty.md">Edit …

Form design

Form design by Geri Reid is a comprehensive compilation of best practices for accessible HTML forms. Geri´s site is beautiful, too.

Kai

Today I received the sad message about the passing of a colleague, my former manager, Kai Knebel. He has left behind his wife Barbara and …

System fonts

Iain Bean writes in his article System fonts don’t have to be ugly about system fonts vs. web fonts. He is giving an overview of …

GitHub Learning Lab

The GitHub Learning Lab provides online training courses for free about DevOps, GitHub Actions, Languages and Tools, and GitHub 😃.

Snow-world

Early morning on our way to the Kindergarten. Wonderful snow. Emil is excited.

The Pixi books

While Emil and I were doing the food shopping, he found a book stand with Pixi books.

Japanese Carpentry

Our tiny family is building a house. We are shortly before moving into the new place and I´m exhausted by the entire process. Building a …

Traces

Thrush-traces in the snow. This might be a result of Emil and me feeding the birds.

Feeding the birds

A thrush with an apple. During this winter, Emil and I started feeding the birds on our terrace.

Garamond

Georg Duffner provided an open source of EB Garamond, which is a beautiful humanist typeface, originating back to the mid 16th century. Massimo Vignelli has …

Public Sans, Arvana, and Brucker

An interesting compilation of types from Typographica. Resonating: Public Sans Arvana Brucker Public Sans # A neutral sans serif for interfaces, text, and headings by …

Weeknotes 02

Katy DeCorah´s Github read-action „…tracks the books that you’ve read by updating the _data/read.yml file in your repository.“ David Seidman on how to add commas …

Weeknotes 01

The Vignelli Canon. As Massimo Vignelli states in the introduction of the book: „…a useful instrument for a better understanding of typography in Graphic Design. …

ET Book

ET Book, the typeface used in Edward Tufte’s books. Free webfont! It is used for example by Jeremy Keith in his Resilient Web Design. A …

Resilient Web Design

Resilient Web Design by Jeremy Keith Resilient Web Design by Jeremy Keith is a pleasure to read. Jeremy has put together context and concept for …

Weeknotes 53

Learned from the Accessible Footnotes article, there is a :target pseudo-class in CSS that allows to select and to style a targeted element on a …

markdown-it-scrolltable

A markdown-it plugin to wrap any <table> into a <div> for horizontal scrolling on narrow screens. Examples Install Usage Examples # Column | Column------ | …

Weeknotes 52

Sarah Fossheim publishes her new project website ethicaldesign.guide. „… Ethical Design Guide is made to share resources on how to create ethical products that don’t …

Weeknotes 51

A CSS utility class for covering elements from CSS in real life. Ellograph monospaced typeface. „Ellograph is a friendly monospaced typeface with a soft, rounded …

Viral typeface

Viral typeface. „A collaboration between four designers/illustrators, this typeface is a recipe for quarantining in 2020: a dash of paranoia, a scoop of cabin fever, …

HTML Hell

A collection of bad practices in HTML, copied from real websites. Initiated by Manuel Matuzović and open for contributions.

Split a figure

A responsive technique of splitting a figure equally into an image (one half of the available space), and the corresponding caption (other half of the available space).

Using Trello as a Super Simple CMS

In his CSS-Tricks article, Phil describes a very nice and generic approach to use 11ty data files for fetching contents from Trello. Phil doesn´t talk …

Anekdote

Anekdote is a directory celebrating great, independent businesses. These companies are not run by stockholders, layers of bureaucracy or an algorithm. They are full of …

Website evaluation tools

Any accessible website must … Tools References Any accessible website must … # use semantic-, standards-based HTML, apply accessibility best pratices (which is a wide …

Better Web Typography

Matej´s course on Better Web Typography is structured into seven parts which will be mailed to you, once you subscribed to the course. Matej is …

Beautiful Webtype

A beautiful, and useful site by Chad Mazzola with selected web fonts and font combinations. All open-source! Chad´s site even has an Atom feed 👏. …

Flowing energy

The lines represent energy flows. At the mid-left side one of the flows enlights Emil´s name. At the right side is a control box for …

Damascus, USA. Der Gau.

Terrifying. Watch „Damascus, USA.“ Some quotes from the film: Nuclear weapons will always carry the risk of an unwanted detonation. It will happen: Maybe tomorrow, …

How we read

The term readability doesn´t ask simply "Can you read it?" or "How fast can you read it?" It also asks "Do you want to read …

Weeknotes 29

Utopia is an algorithm to calculate fluid type size for responsive websites. It´s made by James Gilyead and Trys Mudford. There’s no program or dependency …

We are building a house

Our weed-covered land is starting to transform. This house project might take a time of seven years in the end. We bought the property in …

Learn eleventy from scratch

Learn Eleventy From Scratch is a training made by Andy Bell. It´s a practical, well organized, and well written course that allows you to get …

Weeknotes 26

„The mystery font that took over Ney York“ is an article about Choc, a typeface designed by Roger Excoffon. Choc specimen cover, 1955. Paul Robert …

Weeknotes 25

I published markdown-it-fitmedia, a markdown-it plugin to set aspect-ratio of responsive images, make images lazy loading, and to make videos responsive. Use it in the …

Man conquers the cosmos

Today I saw this picture in „der Freitag“, Nr. 24, June 4th 2020. "Man conquers the cosmos." Mosaic made by Fritz Eisel in 1972. Located …

I am not your Negro

"Why was it necessary to have a nigger in the first place? I am not a nigger. I am a man. When I´m not a …

Bauhaus Doku in drei Teilen

Vorbereitung und Gründung, ein Film von Gisela Reich Zwischen Weimar und Berlin, ein Film von Walter Rüdel Spuren nach 50 Jahren, ein Film von Walter …

markdown-it-fitmedia

A markdown-it plugin to set aspect-ratio of responsive images, make them lazy loading, and to make videos responsive. Images Wrapping media Install Usage Configuration Images …

Weeknotes 22

Reading „The Details“ by Matthias Ott. convertacolor.com is a minimalistic yet quick way of converting hex, rgb, hsl, and cmyk colors in any direction. I …

The Details

The details are not the details; they make the product. Charles and Ray Eames Never to forget about it! I found the quote in The …

Frauen, seid dankbar

Frauen, seid dankbar. Die Wirtschaftsführer haben über die Jahre einen ganz eigenen Tonfall entwickelt, mit dem sie sich an die Öffentlichkeit wenden: etwas zwischen Drohen …

My favorite Yoga flows

Please also check favorite HIIT workouts. Yoga Ganzkörper Flow | Bauch, Beine & Balance | 30 Minuten für Kraft & Stabilität Yoga Bauch Workout Intensiv …

Weeknotes 18

This week I pushed my little website a step further by enhancing the service worker to pre-cache selected pages and by runtime-caching images as well …

Helvetica

See what is in the Helvetica typeface. Listen to interesting typographer personalities, like for example Matthew Carter, who designed Georgia for Microsoft: „When I start …

Google Webfonts Helper

Mario Ranftl has written the Google Webfonts Helper, which makes self-hosting Google fonts as simple as it can be. The service worker of my website …

Weeknotes 17

I´ve created my first service worker and turned my website into a Progressive Web App 💪. After doing precaching for static resources (JavaScript, CSS, Google …

Helvetica Bonus Footage

As Gary Hustwit is currently giving his films for free, I watched his Helvetica Bonus Footage this week. You´re getting to see some very interesting …

Social distancing while protesting

A photo taken by Tomer Appelbaum, showing thousands of Israelis maintain social distancing while protesting Natanyahu in Tel Aviv´s Rabin sq. I took the photo …

Going Offline (book)

Going Offline by Jeremy Keith Going Offline is following the same agenda as Jeremy does in his talk. Of course, the book provides more background …

Weeknotes 16

Emil draws „Ladybirds, fairy dust, and witches on witches broomsticks.“ As of this week, Germany has 138,221 infected people and 4,098 people died on COVID-19. …

Going Offline (video)

With Going offline, Jeremy Keith is giving an excellent talk about how to turn a website into a Progressive Web App (PWA). A PWA is …

Less, but better – Rams

Rams is a documentary by filmmaker Gary Hustwit about the legendary designer Dieter Rams. For decades, Dieter Rams was leading the design department of Braun, …

Weeknotes 15

Emil discovers the luxury of whitespace. Kristian Lumme describes the collaborative approach of Fournova, who are the makers of Tower for Git. Article „How We …

Weeknotes 14

Emil draws „Snakes with Poison Dots.“ Max Böck published a boilerplate Emergency Website Kit, which, especially these days, aims to provide a quick way to …

Weeknotes 13

Write personal: „Into the Personal-Website-Verse“ is a plea for personal websites from Matthias Ott. „Advice from Ten Years of Leading Remote Teams“ from Greg Storey. …

Weeknotes 12

Emil pictured the virus. I get the case counts from The Johns Hopkins Coronavirus Resource Center. At the end of this week we are counting …

This is a web page

At its heart, web design should be about words. Words don’t come after the design is done. Words are the beginning, the core, the focus. …

The Birth of Inter

In „The Birth of Inter“ Rasmus Andersson is explaining his (work)flow and tool usage while developing Inter, a beautiful sans-serif typeface designed for reading text …

Weeknotes 11

This guy Jack McDade knows how to design a web page. Jack made Justin Jackson´s page, which I think is an exceptional piece of work. …

Weeknotes 10

Watched „Thereabouts 3: Discovering Colombia“ again. It´s the best of the series. I can recommend this film for anyone who is into cycling. Restarted my …

The Shape of Design

The Shape of Design by Frank Chimero From the The Shape of Design: … Painting’s near and far states are akin to How and Why: …

Weeknotes 9

Signed assange-helfen. A state has been caught in a war crime and for that reason the state takes revenge on the person who helped to …

active-toc

Highlight the entries of your table of contents while scrolling

Compose CSS

Compose CSS is a personal investigation and tools-building effort. I´m trying to find out for myself what is useful to have in a CSS library …

stacked-area

A npm package to draw a SVG stacked area chart with a day-based x-axis.

cumulative-flow

A npm package to draw a SVG cumulative flow diagram and predict the anticipated completion of work.

horiz-gauge

A npm package to draw a SVG horizontal gauge. Play with the settings of the horiz-gauge by visiting the horiz-gauge playground.

somap

A npm package with a sorted map and sorted set, implemented as a binary tree.

Breakdown for Atom

Breakdown is a package to be added to your Atom editor. It allows you to display and manipulate a breakdown structure of your Jira Scrum …

dheader

A npm package to make the header of your web pages dynamic.

Splitting User Stories

User Stories are short and simple descriptions of a feature told from the perspective of the person who desires the new capability, usually a user or customer of the system. It´s called User Story because you put the user into focus. Therefore a User Story should lead to a product increment that can be seen valuable from the user- or business perspective.

The balanced organization

The agile manifesto defines a collaboration culture. But what if your current environment is not collaborative? This article describes alternatives for moving into the agile direction.

Tracker

File your workout routines and get a nice graphical overview of your achievements and improvements.

Spitfire

A virtual whiteboard to be shared by multiple people at the same time. Users will be anonymous – so no one needs to sign in.

The agile worker

The agile worker exists because of differences between theory and reality, and because insights can be gained through these discrepancies.

Scrum and Architecture

Cooperatively making architecture decisions, at a point in time when they are needed, and not earlier, is a quality-improving paradigm in agile software development. Conceptual integrity in the flow of architecture decisions will only be achieved if one person has the final word regarding those decisions. This is the architect, whose rights and obligations in the context of the Scrum process are being reflected in this essay.

The Box-Bullet-Line (BBL)

Many important aspects of software development are invisible. When creating software we work through different abstraction layers by analyzing symbols and writing code.

A Sprint is not a milestone

A Sprint is a sensor that allows us to see what has been done, what impediments are in our way and how we did better in comparison to previous Sprints.