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 …
Here is my blog. If you like it, you may want to subscribe to my RSS feed.
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 …
A Log of my Fairlight Strael Build
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 …
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 on …
Emil created this sign in the Kindergarten. He has seen news about the war in the Ukraine together with us.
I´m building up a new road bike with a Fairlight Strael steel frame. Here is my thought process for choosing the parts.
Bret Devereaux is providing a lot of perspective with his article Understanding the War in Ukraine.
Übungen gegen Knieschmerzen beim Radfahren: Das hilft! YouTube
Use bikecalc.com to calculate the best chainring/sprocket combinations for your speed and cadence and what your speed will be at various cadences.
An extensive guide by Michael Villar. It contains a lot of examples showing what good context menus are about.
smard.de ist die von der Bundesnetzagentur betriebene Plattform zur Veranschaulichung der Stromerzeugung und des Strommarktes in Deutschland.
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 bicycle …
Emil found a black felt-tip pen. The desk that was under the painting is now also black and white.
Emil made it in the Kindergarten. It is not a voodoo puppet.
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. Everything is a …
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 desk. How …
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 <li> …
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 …
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 …
24 Dec 2021 Emil´s swim goggles, a diving ring, and soap. The training materials we need to get him the seahorse badge. That´s our …
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 SVG getting …
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 …
Drawing of a family with a Christmas tree and presents.
It is as simple as html, body { height: 100%;}body > footer { position: sticky; top: 100vh;} Silvio Rosa made a CodePen about it, which …
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 glossary too.
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 …
Inspired by Emil´s kite-steering unicorn, my colleague Rike, who is sitting next to me, drew even two kites. Rike, of course.
Christmas Tree Snowman Heart Castle
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 slide the …
Learn Responsive Design is A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone. It´s a …
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.
How great is that? Now we can use VS Code in the Browser by navigating to vscode.dev. It´s possible to create and edit documents in …
* + * Read Axiomatic CSS and Lobotomized Owls, an article by Heydon Pickering about creating vertical rhythm with very little CSS.
A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with …
Watch Lachlan Morton riding The Alt Tour to Paris.
18 days, 5509 km, 66831 m of climbing, 225 hrs of riding.
::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 to …
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 the presentation …
Kev Bonett gives an excellent example of how to style expandable CSS Grid sections with only some lines of CSS. Check out his CSS-Tricks article. …
Lael Wilcox trying to ride the Tour Divide, 2750 miles, in under 14 days. A Rapha Gone Racing film on youtube.
My notes from Rich Hickey´s talk Hammock Driven Development: There is no guarantee that if you put together a feature list, even if coming from the …
Hairs are made with a straw
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 …
Onboard the Transcontinental Race from Ahstudio Filmmakers on Vimeo.
Flying and walking dino´s
Data URL Generator Tool by David Wilkinson. Upload a file, provide a URL, or a text, and the tool will create a URI that contains the …
Having a quick walk to start into the day.
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 wie …
Objectified from Film First on Vimeo. Objectified Bonus Footage from Film First on Vimeo.
One of these has six legs. But all of them are smiling :-).
Emil visited the black forest and the cherry tarts impressed him to a great extent! It´s not clear where the stripling man is coming from.
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 …
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 …
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 the age of five, Emil for the first time is writing down the alphabet.
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 …
Emil is colorizing the columns of a newspaper. Maybe to provide a more pleasant reading experience? The resulting grid looks interesting.
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 geschrieben. …
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 der …
Emil wanted to write "Papa" but somehow the characters swapped.
Please also check favorite yoga flows. Bauch HIIT Workout | 15 Minuten Core & Abs Toned Arms, Abs & Back Workout Fat Burning HIIT Workout I have to evaluate …
Three Peaks & In Between from Stephan Wieser on Vimeo.
7:30 in the morning, riding Paderborn plateau with my mountain bike.
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 …
Make any HTML table sortable
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 …
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 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, …
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 …
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 …
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 – Eine Charta zur Erhaltung unserer Natur von Stefano Mancuso. Ohne Pflanzen überlebt nichts auf unserem Planeten, der über nur einen …
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 …
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 is an exploration of accidental color schemes, curated by Eighth Day.
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 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 …
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 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 …
Now that spring is coming our daily excursions are even more joyful.
This is Emils understanding of what it´s about when his father is practicing Yoga.
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/journal/2021-04-27-edit-on-github-11ty.md">Edit on …
An iA Writer template to create letters with correctly positioned address fields.
Form design by Geri Reid is a comprehensive compilation of best practices for accessible HTML forms. Geri´s site is beautiful, too.
Emil sitting in his Bullit. We have the bike for nearly five years now and we had – and still have – many beautiful hours …
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 …
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 …
The GitHub Learning Lab provides online training courses for free about DevOps, GitHub Actions, Languages and Tools, and GitHub :-).
Early morning on our way to the Kindergarten. Wonderful snow. Emil is exited.
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 …
While Emil and I were doing the food shopping, he found a book stand with Pixi books.
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 is one of multiple interesting notes by Tiark Rompf.
A thrush with an apple. During this winter, Emil and I started feeding the birds on our terrace.
Thrush-traces in the snow. This might be a result of Emil and me feeding the birds.
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 …
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 …
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, 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 …
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. …
Beautiful high beech forest around Neuenbeken Typical Paderborn plateau Me, enjoying nature
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 …
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 …
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 …
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 …
A markdown-it plugin to wrap any <table> into a <div> for horizontal scrolling on narrow screens. Examples Install Usage Examples # Column | Column------ | ------Cell …
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 …
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 …
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, …
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 …
Always beneficial to to visit the root: html.spec.whatwg.org.
A collection of bad practices in HTML, copied from real websites. Initiated by Manuel Matuzović and open for contributions.
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).
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 …
A Rebel´s Guide for Digital Transformation
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, by Anne Gibson, is a carefully curated list of situations where proper accessibility of a web site would be in …
Nessy, from Robbi, Tobbi, and the Fliewatuut
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 …
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 …
It´s always sad when you feel the summer is slowly coming to an end. Emil and I are trying to stretch the time.
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 …
A Back to Top link helps users navigate to the top (start) of long pages.
Through a post from Ethan Marcotte I got drawn into the accessibility topic. Web accessibility, like defined by the W3C, was not on my …
A beautiful garden above New York City that follows the principle "simple and slow."
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 is a training made by Andy Bell. It´s a practical, well organized, and well written course that allows you to get …
“The mystery font that took over Ney York” is an article about Choc, a typeface designed by Roger Excoffon. Choc specimen cover, …
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 is possible again (with some corona-constraints)
How economic inequality harms societies, Richard Wilkinson, TEDGlobal 2011
I think it´s worth installing
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 …
"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 …
"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 …
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 Rüdel
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 # Responsive …
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 …
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 …
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 …
Please also check favorite HIIT workouts. Yoga Ganzkörper Flow | Bauch, Beine & Balance | 30 Minuten für Kraft & Stabilität Yoga Bauch Workout Intensiv | 15 …
The first ever website, Tim Berners-Lee´s original home page for the Word Wide Web. Responsive and fast.
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 …
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. …
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 …
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 …
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 …
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 …
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 …
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 by Jeremy Keith Going Offline is following the same agenda as Jeremy does in his talk. Of course, the book provides more background and …
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 …
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 …
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, …
Today is my birthday, and Emil made this drawing for me
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 …
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 …
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 …
Progressive Web Apps – Where Do I Begin? is not mainly about the Service Worker. Aaron is pointing out that a Progressive Web App aims …
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 …
Into the Personal-Website-Verse is a plea for personal websites from Matthias Ott. Excellent stuff! Read it!
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 outbreaks like Coronavirus spread exponentially, and how to ´flatten the curve´.”
The gnarly thing has an evil core, thorns, and a tiny head with teeth all through the head.
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 …
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. …
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 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. …
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 from CyclingTips on Vimeo.
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 by Frank Chimero From the The Shape of Design: … Painting’s near and far states are akin to How and Why: the artist, …
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 …
Highlight your TOC entries while scrolling
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 …
An npm package to draw a SVG stacked area chart with a day-based x-axis.
An npm package to draw a SVG cumulative flow diagram and predict the anticipated completion of work.
An npm package to draw a SVG horizontal gauge. Play with the settings of the horiz-gauge by visiting the horiz-gauge playground.
An npm package with a sorted map and sorted set, implemented as a binary tree.
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 …
An npm package to make the header of your web pages dynamic.
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 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.
File your workout routines and get a nice graphical overview of your achievements and improvements.
A short entry-level approach to Git
A virtual whiteboard to be shared by multiple people at the same time. Users will be anonymous – so no one needs to sign in.
Do not let scaled agile be your scaled snake oil
A force of life
The agile worker exists because of differences between theory and reality, and because insights can be gained through these discrepancies.
Challenging the status quo is art
A non-performing team is not a team
A contract to begin your agile journey with
The architect and his tools in the Scrum process
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 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.