Blog

Pre-work morning ride

7:30 in the morning, riding Paderborn plateau with my mountain bike.

HTML elements reference

The MDN Web Docs HTML elements “…are grouped by function to help you find what you have in mind easily. An alphabetical list of all …

Using TextEdit as default git editor on a Mac

As a default editor for git you want something that opens up fast and is fairly simple to use. On my Mac I believe this …

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 sent peer-to-peer, …

Eleventy starter project for WCAG reports

Hidde de Vries describes his Eleventy starter project for Web Content Accessibility (WCAG) reports, which is published on GitHub as eleventy-wcag-reporter. The basic idea is to …

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 …

Get the version of any npm package in JavaScript

Getting the version of a different package Getting the version of your current package Getting the version of a different package # The version of any …

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 einen …

Design systems for everyone ★

Ethan Marcotte has four new courses on design systems, available for free at Aquent Gymnasium. These are my notes about the excellent first course, Design …

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 Smooth scrolling Styling cursors Truncating …

One of our circles through nature ★

Now that spring is coming our daily excursions are even more joyful.

Practicing Yoga ★

This is Emils understanding of what it´s about when I´m practicing Yoga.

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: HTML <a href="https://github.com/ulfschneider/11ty.ulf.codes/edit/master/{{page.inputPath}}">Edit on …

Fliewatuut chased by airplanes

Letter for iA Writer

An iA Writer template to create letters with correctly positioned address fields.

What Emil calls a graffiti

Form design ★

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

The daily ride to the Kindergarten

Emil sitting in his Bullit. We have the bike for nearly five years now and we had–and still have–many beautiful hours with it :-).

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 …

The fairy flies through the skylight of the house

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 exited.

How to pick a typeface for user interface and app design?

TL;DR: Make the Il1 coe test to check whether a typeface is suitable for functional text. Il1 should be easy to distinguish and the apertures …

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 …

Just write the parser ★

Just write the #!%/* parser is one of multiple interesting notes by Tiark Rompf.

Heart of gold

A withered flower, a flower, and krickelkrackel

Feeding the birds

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

Traces

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

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 the US …

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 between …

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 sample …

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. …

Went with the bike into the snow

Beautiful high beech forest around Neuenbeken Typical Paderborn plateau Me, enjoying nature

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 a …

Early morning on our way to the Kindergarten and it´s snowing. ★

Emil writing his name in the snow. It´s on the engine hood of my car and Emil asked "Are we allowed to do that?" Not …

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 …

Santa claus with four legs

A tree

Colouring picture

markdown-it-scrolltable

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

Letterspacing of <code> elements

Widening the letterspacing of <code> elements in the flow of text emphasizes the code-nature of the element without using a different font or a different …

Rainbow in the middle

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 …

Autumn with a colorful "Blocksberg"

A family of three in the winter

Picture with a witch, a house, and flowers with red fairydust

Fairydust and green sun

Witch´s mountain

Sun, sky, trees, ladybugs

Witch´s spell

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, …

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 construction …

Unconventional and free stock images ★

A list of unconventional and free stock images by Mel Choyce in her CSS-Tricks article: British Library (unsplash) New York Public Library The State Library of New South …

HTML Specification

Always beneficial to to visit the root: html.spec.whatwg.org.

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 about …

Transform

A Rebel´s Guide for Digital Transformation

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 …

An alphabet of accessibility issues

An Alphabet of Accessibility Issues, by Anne Gibson, is a carefully curated list of situations where proper accessibility of a web site would be in …

Nessy

Nessy, from Robbi, Tobbi, and the Fliewatuut

Impressions from Robbi, Tobbi, and the Fliewatuut

Robbi, Tobbi, and the Fliewatuut

Fairy Dust

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 field), and be fast. Tools # The …

Six ways to make your site more accessible ★

Hidde de Vries made this enumeration in this talk. Here is a quick summary. Names Markup Structure Language Text Keyboard References Names # Use link text that …

Our last day of open air bathing in 2020? ★

It´s always sad when you feel the summer is slowly coming to an end. Emil and I are trying to stretch the time.

Indicating the focused element

Focus is important for keyboard navigation Do not disable the focus outline How to style the focus indication References Focus is important for keyboard navigation …

Back to Top

A Back to Top link helps users navigate to the top (start) of long pages. Behavior of a Back to Top link HTML to create the …

My approach to accessibility

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the …

The High Line Park

A beautiful garden above New York City that follows the principle "simple and slow."

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 …

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 …

13 ways designers screw up client presentations ★

A lively, enjoyable, and valid talk. Also, I like Mike´s slides very much. Mike Monteiro´s Keynote for Interaction Design Association. Assumptions prior to the client presentation: The work …

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, or …

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, …

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 …

Open air bathing ★

Open air bathing is possible again (with some corona-constraints)

How economic inequality harms societies ★

How economic inequality harms societies, Richard Wilkinson, TEDGlobal 2011

German Corona App

I think it´s worth installing

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 at …

How the JAMstack enables Canada´s largest food retailer

"What got us here, won´t get us there", by Justin Watts from Loblaw Loblaw is Canada´s largest retailer: 85% of Canadians shop in one of their stores …

A paderstone with beach, house and sun

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 - Spuren nach 50 Jahren

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 Usage Configuration Images # Responsive images …

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 Details by …

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 migrated my …

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 und …

The first ever website

The first ever website, Tim Berners-Lee´s original home page for the Word Wide Web. Responsive and fast.

My favorite Yoga flows

Yoga Ganzkörper Flow | Bauch, Beine & Balance | 30 Minuten für Kraft & Stabilität Yoga Bauch Workout Intensiv | 15 Minuten Core & Abs für …

Fluid videos with my adaption of FitVids

Embedded videos are not automatically responsive or fluid. They come with a fixed setting for width and height. To make them responsive while keeping aspect …

The 10 Principles of Good Design ★

Dieter Rams The 10 Principles of Good Design as stated by Dieter Rams: Good design is innovative. The possibilities for innovation are not, by any means, exhausted. …

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 …

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 …

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 …

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 and …

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. Four …

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, …

Making use of old paper

Ladybirds, fairy dust, and witches on witches broomsticks

Today is my birthday, and Emil made this drawing for me

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 Work.” Stretchy …

Newspaper designs during the pandemic

Some remarkable newspaper designs I got aware of via Twitter. Michael Bierut pointed me towards the handwritten front page designs of the New York Times. A …

Website accessibility got worse

Dave Rupert made me aware with his tweet: The average website accessibility got worse during the last twelve months! This is according to the WebAIM annual accessibility …

Emil discovers the luxury of whitespace

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 publish …

Progressive Web Apps – Where Do I Begin? ★

Progressive Web Apps – Where Do I Begin? is not mainly about the Service Worker. Aaron is pointing out that a Progressive Web App aims …

Snakes with Poison Dots

An RSS feed for GitHub Pages

RSS is a good thing. It simplifies to overview information that is produced by potentially many different sources. If someone has an RSS feed on …

Into the Personal-Website-Verse ★

Into the Personal-Website-Verse is a plea for personal websites from Matthias Ott. Excellent stuff! Read it!

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. “How to …

How to flatten the curve

“How outbreaks like Coronavirus spread exponentially, and how to ´flatten the curve´.”

The Coronavirus ★

The gnarly thing has an evil core, thorns, and a tiny head with teeth all through the head.

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 22.000 …

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 …

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. …

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 sports …

Thereabouts 3 – Discovering Colombia ★

Thereabouts 3: Discovering Colombia from CyclingTips on Vimeo.

It Doesn't Have to Be Crazy at Work

From the book: Chaos should not be the natural state at work. Anxiety isn’t a prerequisite for progress. Sitting in meetings all day isn’t required …

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: the artist, …

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 your TOC entries while scrolling

Compose CSS

A composable CSS Toolkit to build fast, maintainable, and responsive websites.

stacked-area

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

cumulative-flow

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

horiz-gauge

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

somap

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

Drawing

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

An 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.