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 …
Here is my blog. If you like it, you may want to subscribe to my RSS feed.
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 …
Weeknotes 01
ET Book, a webfont of the typeface used in Edward Tufte’s books. Free! It is used for example by Jeremy Keith in his Resilient Web …
Went with the bike into the snow
Beautiful high beech forest around Neuenbeken Typical Paderborn plateau Me, enjoying nature
Resilient Web Design ★
Cover of Jeremy Keith´s book "Resilient Web Design" Resilient Web Design by Jeremy Keith is a pleasure to read. Jeremy has put together context and concept …
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 …
markdown-it-scrolltable
A markdown-it plugin to wrap any <table> into a <div> for horizontal scrolling on narrow screens.
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 …
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 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
Cover of Gerry McGovern´s book "Transform" The essence of digital transformation is about moving from organization-centric (old model) to customer-centric. Customer-centric means: make it as simple …
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 …
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?
Emil alone in the open-air pool
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
Through a post from Ethan Marcotte I got drawn into the accessibility topic. Web accessibility, like defined by the W3C, was not on my …
The High Line Park
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 very 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 …
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 …
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
How economic inequality harms societies ★
How economic inequality harms societies, Richard Wilkinson, TEDGlobal 2011
German Corona App
The German Corona-Warn-App is unique because the code is open source, there is no obligation to install it, and central data processing is limited to what is necessary …
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 …
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.
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 Power Vinyasa Yoga für Kraft & Willensstärke | 25 Minuten Home …
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 …
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 …
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 …
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 …
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) ★
The book is following the same agenda as Jeremy does in his talk. Of course, the book provides more background and details. It also contains …
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, …
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 …
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 …
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 …
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. That gets a ★. “Advice from Ten Years of Leading Remote Teams” …
maldekstra 7
Issue #7 is not about climate change, it´s about climate crisis: “Alle reden vom Klima. Wir über Klimagerechtigkeit.” An entry into the topic can also …
How to flatten the curve
“How outbreaks like Coronavirus spread exponentially, and how to ´flatten the curve´.”
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 …
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 sports …
Thereabouts 3 – Discovering Colombia
Thereabouts 3: Discovering Colombia from CyclingTips on Vimeo.
The Shape of Design
From the book: … Painting’s near and far states are akin to How and Why: the artist, when close to the canvas, is asking How questions …
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 …
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
Draw SVG stacked area diagrams with a day-based x-axis.
cumulative-flow
Draw SVG cumulative flow diagrams and predict the anticipated completion of work.
horiz-gauge
Draw a SVG horizontal gauge.
somap
A sorted map and a sorted set, implemented as a binary tree.
Breakdown for Atom
Display and manipulate a breakdown structure of your JIRA Scrum project – even offline and only eventually connected to your JIRA system.
dheader
Make the header of your web pages dynamic.
Splitting User Stories
A User Story can cover vast amounts of functionality with a single sentence, which requires a team many weeks or even months of work to get it done (often called epic). Splitting such stories into pieces which are valuable for users and still deliverable within a Sprint is challenging for many teams. However, there are good reasons why you should do it.
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.
Pocket Git Guide
Get Git on your Mac Get Git on Windows The Git shell Tell Git who you are Get help from Git Create a new local …
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.
Supersize
We have to scale agile when more than one team is required to get a thing delivered. Each team, not more than ten members. There …
Self-organization
Past and present Complexity Self-organization Cooperation and communication Transparency Results, feedback, and continuous planning Performance orientation Doing Divergent-convergent thinking and responsibility Use what is already …
The agile worker
The agile worker exists because of differences between theory and reality, and because insights can be gained through these discrepancies.
The art in our work
The Agile Manifesto represents a force that is behind any particular agile procedure like XP, Scrum or Kanban. This force, the culture to challenge the status quo, attracts certain people and companies.
Five dysfunctions of a team
Deliver with each iteration a done piece of work and collaborate as a team. If you do only these two things and forget about all …
Definition of Done
The Definition of Done (DoD) is not only a checklist that has to be executed to get a piece of work delivered. The DoD and …
Scrum and Architecture
Cooperatively making architectural 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, serving the product, whose rights and obligations in the context of the Scrum process are being reflected in this essay.
The Box-Bullet-Line (BBL)
Dependency Flow Caller Sequences Synchronous and asynchronous Many important aspects of software development are invisible. When creating software we work through different abstraction layers by …
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.