chore: add more tags

This commit is contained in:
Stefan Imhoff
2023-06-10 18:32:35 +02:00
parent f31ff508f2
commit f4e8f98012
10 changed files with 68 additions and 68 deletions

View File

@@ -4,7 +4,7 @@ slug: gtd
author: Stefan Imhoff
date: 2007-11-24T01:15:00+02:00
description: "Ive been working with GTD (Getting Things Done) for 1.5 years: An Introduction to Organization and Self-Management with GTD."
tags: ["productivity", "self-improvement"]
tags: ["productivity", "self-improvement", "book"]
---
## One and a Half Years With GTD
@@ -14,7 +14,7 @@ For one and a half years I use now the principles of _GTD_ (<em>Getting Things D
In his book _<AffiliateLink asin="0143126563" text="Getting Things Done: The Art of Stress-Free Productivity" />_, David Allen introduces an interesting system that allows you to do your tasks efficiently.
<Bookshelf>
<AmazonBook asin="0143126563" />
<AmazonBook asin="0143126563" />
</Bookshelf>
In any case, I think that one _gets_ the everyday madness governed by Allens system.
@@ -22,7 +22,7 @@ In any case, I think that one _gets_ the everyday madness governed by Allens
## The GTD Basics
<Figure caption="This is what the inbox looked like before I sorted all loose ends">
<Image src="/assets/images/posts/gtd-before.jpg" alt="My desk before" />
<Image src="/assets/images/posts/gtd-before.jpg" alt="My desk before" />
</Figure>
GTD uses the concept of _contexts_, which are certain situations/places to which a task is assigned (telephone, home, care, or similar). Besides, there can be an allocation to a _project_.
@@ -42,7 +42,7 @@ Tasks can be delegated to other people or planned for certain times. If you have
## GTD in Everyday Life
<Figure caption="This is what the inbox looked like after sorting all loose ends">
<Image src="/assets/images/posts/gtd-after.jpg" alt="My desk afterward" />
<Image src="/assets/images/posts/gtd-after.jpg" alt="My desk afterward" />
</Figure>
GTD may look complicated or awkward, but it helps immensely to prevent keeping pondering.

View File

@@ -5,7 +5,7 @@ author: Stefan Imhoff
date: 2007-06-02T02:00:00+02:00
description: Irezumi (Japanese tattooing) is an inspiration for my website and the origin of my design.
cover: /assets/images/cover/design-koi.jpg
tags: ["design"]
tags: ["design", "book"]
---
## Inspiration and Idea For My Header

View File

@@ -4,7 +4,7 @@ slug: gitweb-theme
author: Stefan Imhoff
date: 2009-02-19T20:00:00+02:00
description: My popular theme for GitWeb to download for free. Now GitWeb looks more similar to GitHub and is not ugly anymore.
tags: ["download"]
tags: ["download", "design"]
---
## GitHub Style for GitWeb
@@ -18,29 +18,29 @@ The exact installation instructions are included in the package on GitHub.
## Screenshots
<Figure caption="Project View">
<Image src="/assets/images/posts/gitweb-theme-projects.png" alt="Project View" />
<Image src="/assets/images/posts/gitweb-theme-projects.png" alt="Project View" />
</Figure>
<Figure caption="Summary">
<Image src="/assets/images/posts/gitweb-theme-summary.png" alt="Summary" />
<Image src="/assets/images/posts/gitweb-theme-summary.png" alt="Summary" />
</Figure>
<Figure caption="Commit">
<Image src="/assets/images/posts/gitweb-theme-commit.png" alt="Commit" />
<Image src="/assets/images/posts/gitweb-theme-commit.png" alt="Commit" />
</Figure>
<Figure caption="Commit DIFF">
<Image src="/assets/images/posts/gitweb-theme-commitdiff.png" alt="Commit DIFF" />
<Image src="/assets/images/posts/gitweb-theme-commitdiff.png" alt="Commit DIFF" />
</Figure>
<Figure caption="Log">
<Image src="/assets/images/posts/gitweb-theme-log.png" alt="Log" />
<Image src="/assets/images/posts/gitweb-theme-log.png" alt="Log" />
</Figure>
<Figure caption="Tree View">
<Image src="/assets/images/posts/gitweb-theme-tree.png" alt="Tree View" />
<Image src="/assets/images/posts/gitweb-theme-tree.png" alt="Tree View" />
</Figure>
<Figure>
<MoreLink href="https://github.com/kogakure/gitweb-theme/" text="GitWeb Theme on GitHub" />
<MoreLink href="https://github.com/kogakure/gitweb-theme/" text="GitWeb Theme on GitHub" />
</Figure>

View File

@@ -4,7 +4,7 @@ slug: john-seymour-books
author: Stefan Imhoff
date: 2014-08-03T16:00:00+02:00
description: On John Seymours fantastic, beautifully illustrated books on self-sufficiency, agriculture, and crafts. The optimal equipment for an upcoming zombie apocalypse.
tags: ["book", "recommendation"]
tags: ["book", "recommendation", "self-improvement"]
---
My earliest memories of books are that I lie on my parents soft carpet on my stomach in the living room and read the <cite>Atlas of World History</cite> or the books of _John Seymour_. Who was John Seymour, and why did his books remain in my memory?

View File

@@ -4,7 +4,7 @@ slug: website-typography
author: Stefan Imhoff
date: 2014-06-19T10:30:00+02:00
description: "About the typography of my new website: scale, font, vertical rhythm, font size, font size, and sentence width."
tags: ["design", "code"]
tags: ["design", "code", "book"]
---
Im a _typophile_. But this is nothing for a self-help group because it means to love typography. It was clear to me from the start that I would start with typography for my new website.

View File

@@ -5,7 +5,7 @@ author: Stefan Imhoff
date: 2017-06-07T18:30:00+02:00
featured: true
description: Minimalism is currently popular, but Minimalism is hard to understand, and many misconceptions can be found. This essay carries my thoughts on Minimalism and my history with it.
tags: ["self-improvement"]
tags: ["self-improvement", "book"]
---
## The Pursuit of Minimalism

View File

@@ -4,7 +4,7 @@ slug: morning-routine
date: 2018-09-08T18:00:00+02:00
author: Stefan Imhoff
description: On the advantages of building yourself a morning routine and the details of my morning routine.
tags: ["self-improvement"]
tags: ["self-improvement", "book"]
---
Lately, I have been thinking a lot about habits and routines. Ive had always routines in my life, but I wanted to build a better morning routine because Ive come across many sources, that emphasized the importance of routines for success in life.
@@ -56,7 +56,7 @@ I have a [Travelers Notebook Passport Size](https://www.travelers-company.com
I start by reading the daily chapter of the fantastic book <cite><AffiliateLink asin="1781257655" text="The Daily Stoic" /></cite>. The Stoic practice is the best start to a day you can have. Thereafter, I read 1-2 books, not novels, but harder topics (philosophy, science, or psychology). If I want to remember a quote or part of a book, I mark it and extract it later into my Commonplace book or write it down in my pocket-size notebook.
<Bookshelf>
<AmazonBook asin="1781257655" />
<AmazonBook asin="1781257655" />
</Bookshelf>
### Get Up

View File

@@ -4,7 +4,7 @@ date: 2020-07-21T08:00:00+02:00
slug: new-website-2020-design
author: Stefan Imhoff
description: This is the second of three parts in a series of essays about the process of creating my new website. This one shows the design process for my website.
tags: ["design"]
tags: ["design", "book"]
series: new-website-2020
---
@@ -41,8 +41,8 @@ The next thing I moved my attention to was Typography. I always loved Typography
I even own a copy of the 650 pages strong [Decode Unicode](https://www.goodreads.com/book/show/17186505-decodeunicode), a book listing all 137,374 typographical characters, from the Armenian capital letter _Ayb_ to the Khmer Letter _Ka_. There is even a [complete website](https://decodeunicode.org/) showing all characters and a [two-and-a-half-hour-long movie](https://vimeo.com/48858289) showing all characters.
<Bookshelf>
<AmazonBook asin="0881792128" alt="The Elements of Typographic Style" />
<AmazonBook asin="3874398137" alt="Decodeunicode Die Schriftzeichen der Welt" />
<AmazonBook asin="0881792128" alt="The Elements of Typographic Style" />
<AmazonBook asin="3874398137" alt="Decodeunicode Die Schriftzeichen der Welt" />
</Bookshelf>
### Typeface
@@ -58,7 +58,7 @@ I like in particular the italic font with the beautiful loops and curves. I pick
Next, I picked a Typographic Scale. A scale is a way to pick font sizes based on a fixed set of rules, for example, a specific harmonic number or formula to create a harmonic visual image. I decided to go with the [golden section](https://www.modularscale.com/?1&em&1.618) (ratio 1:1.618).
<Figure caption="Typographic Scale" size="wide">
<Image src="/assets/images/posts/typographic-scale.png" alt="Typographic Scale" />
<Image src="/assets/images/posts/typographic-scale.png" alt="Typographic Scale" />
</Figure>
I picked 20 Pixels as the base font size. Furthermore, Im in my forties and websites pick fonts far too small. The company iA Inc. wrote 2006 the essay [The 100% Easy-2-Read Standard](https://ia.net/topics/100e2r), but still, fonts below the recommended 16 Pixels of browsers are a standard.
@@ -82,15 +82,15 @@ I wanted my website to have the color of Japanese _Washi_ (和紙) paper. Early
I picket the HSL color space, to be able to quickly create variations of my colors. In HSL, the first value **H** stands for Hue. Red is 0°, and then each color is represented by a value on a circle. The **S** stands for Saturation and is a value between 0% (gray) and 100% (full saturation). The **L** stands for Lightness and is a value between 0% (black) and 100% (white). With all three values, I was able to create the colors I wanted: First, I picked the color hue I wanted to go for. Next, I reduced the Saturation to a value below or around 10% which I found made any color instantly look _Shibui_ (one of its identifying features is desaturated colors). To get all the other colors, I moved the Lightness value down for a dark color or up for a light color.
<ColorStack>
<ColorSwatch color="#E7E6E4" title="Light Background" />
<ColorSwatch color="#0E0D0C" title="Light Foreground" />
<ColorSwatch color="#E60510" title="Accent" />
<ColorSwatch color="#E7E6E4" title="Light Background" />
<ColorSwatch color="#0E0D0C" title="Light Foreground" />
<ColorSwatch color="#E60510" title="Accent" />
</ColorStack>
<ColorStack>
<ColorSwatch color="#1B1A18" title="Dark Background" />
<ColorSwatch color="#E7E6E4" title="Dark Foreground" />
<ColorSwatch color="#E60510" title="Accent" />
<ColorSwatch color="#1B1A18" title="Dark Background" />
<ColorSwatch color="#E7E6E4" title="Dark Foreground" />
<ColorSwatch color="#E60510" title="Accent" />
</ColorStack>
---
@@ -102,15 +102,15 @@ Additionally, to the main colors, I created 3 other color themes: A green one fo
#### Green
<ColorStack>
<ColorSwatch color="#858679" title="Light Green Background" />
<ColorSwatch color="#0D0D0C" title="Light Green Foreground" />
<ColorSwatch color="#505049" title="Accent" />
<ColorSwatch color="#858679" title="Light Green Background" />
<ColorSwatch color="#0D0D0C" title="Light Green Foreground" />
<ColorSwatch color="#505049" title="Accent" />
</ColorStack>
<ColorStack>
<ColorSwatch color="#353630" title="Dark Green Background" />
<ColorSwatch color="#E7E7E4" title="Dark Green Foreground" />
<ColorSwatch color="#505049" title="Accent" />
<ColorSwatch color="#353630" title="Dark Green Background" />
<ColorSwatch color="#E7E7E4" title="Dark Green Foreground" />
<ColorSwatch color="#505049" title="Accent" />
</ColorStack>
---
@@ -118,15 +118,15 @@ Additionally, to the main colors, I created 3 other color themes: A green one fo
#### Brown
<ColorStack>
<ColorSwatch color="#988F81" title="Light Brown Background" />
<ColorSwatch color="#0E0D0B" title="Light Brown Foreground" />
<ColorSwatch color="#544F45" title="Accent" />
<ColorSwatch color="#988F81" title="Light Brown Background" />
<ColorSwatch color="#0E0D0B" title="Light Brown Foreground" />
<ColorSwatch color="#544F45" title="Accent" />
</ColorStack>
<ColorStack>
<ColorSwatch color="#38342E" title="Dark Brown Background" />
<ColorSwatch color="#E8E6E3" title="Dark Brown Foreground" />
<ColorSwatch color="#544F45" title="Accent" />
<ColorSwatch color="#38342E" title="Dark Brown Background" />
<ColorSwatch color="#E8E6E3" title="Dark Brown Foreground" />
<ColorSwatch color="#544F45" title="Accent" />
</ColorStack>
---
@@ -134,15 +134,15 @@ Additionally, to the main colors, I created 3 other color themes: A green one fo
#### Blue
<ColorStack>
<ColorSwatch color="#787D87" title="Light Blue Background" />
<ColorSwatch color="#0C0C0E" title="Light Blue Foreground" />
<ColorSwatch color="#484B51" title="Accent" />
<ColorSwatch color="#787D87" title="Light Blue Background" />
<ColorSwatch color="#0C0C0E" title="Light Blue Foreground" />
<ColorSwatch color="#484B51" title="Accent" />
</ColorStack>
<ColorStack>
<ColorSwatch color="#303236" title="Dark Blue Background" />
<ColorSwatch color="#E4E5E7" title="Dark Blue Foreground" />
<ColorSwatch color="#484B51" title="Accent" />
<ColorSwatch color="#303236" title="Dark Blue Background" />
<ColorSwatch color="#E4E5E7" title="Dark Blue Foreground" />
<ColorSwatch color="#484B51" title="Accent" />
</ColorStack>
---
@@ -154,19 +154,19 @@ I didnt invert colors but needed to make sure to create good contrast, which
Next, I moved my focus to the logo. A logo is always a difficult topic. Do I need one? Why? What should it be? My initials? An image? Its easy to create a cheesy logo. I used a _rakkan_ (落款), a Japanese artist seal, for at least 10 years. An artist carved it for me into stone, using the oldest Chinese font, the _small seal script_, introduced by the Chinese Emperor _Qin Shi Huang_, 2200 years ago. It gets pressed into red ink and then applied to the artwork as the signature. I choose the characters of my internet pseudonym _kogakure_ (木隠), meaning “hidden behind leaves”.
<Figure caption="Rakkan">
<Image src="/assets/images/posts/rakkan.jpg" alt="Rakkan" />
<Image src="/assets/images/posts/rakkan.jpg" alt="Rakkan" />
</Figure>
I created a few sketches of other possible logos, but eventually, I discarded them all and moved back to my _rakkan_. Likewise, I decided to simplify the vector form and reduce the number of points and make it more performant and easier to recognize in smaller sizes.
<Figure caption="Logo Scribbles" size="wide">
<Image src="/assets/images/posts/logo-skribbles.png" alt="Logo Scribbles" />
<Image src="/assets/images/posts/logo-skribbles.png" alt="Logo Scribbles" />
</Figure>
But after finishing the logo, I decided in the interest of simplicity and austerity that there is no reason to use a logo at all. I even removed my name from the header, as its obvious on what website the visitor is. My name is written enough around the site. The logo will appear in parts of the website, for example as an icon for the app, or on other locations, a logo fits.
<Figure caption="Rakkan Logo" size="wide">
<Image src="/assets/images/posts/rakkan-logo.png" alt="Rakkan Logo" />
<Image src="/assets/images/posts/rakkan-logo.png" alt="Rakkan Logo" />
</Figure>
## Grid
@@ -174,7 +174,7 @@ But after finishing the logo, I decided in the interest of simplicity and auster
Early on I got obsessed with the [Golden Canon Grid](https://youtu.be/fWfD0EfiXcE) and my early designs used a complicated and sophisticated version of it.
<Figure caption="Golden Canon Grid" size="wide">
<Image src="/assets/images/posts/golden-canon-grid.png" alt="Golden Canon Grid" />
<Image src="/assets/images/posts/golden-canon-grid.png" alt="Golden Canon Grid" />
</Figure>
But gradually I decided this would end in a nightmare when moving to code and migrating to a modular grid. However, I didnt recognize my error of using a fixed-size module for the grid—an error I had to correct later.
@@ -204,7 +204,7 @@ And working with [Affinity Designer](https://affinity.serif.com/designer/), [Aff
I decided to use Aaron James Draplin's method of designing. He is a talented designer inspiring millions with his artwork and author of <AffiliateLink asin="1419720171" text="Draplin Design Co.: Pretty Much Everything" />.
<Bookshelf>
<AmazonBook asin="1419720171" alt="Pretty Much Everything" />
<AmazonBook asin="1419720171" alt="Pretty Much Everything" />
</Bookshelf>
As he shows in the fantastic free video, [Aaron Draplin Takes On a Logo Design Challenge](https://youtu.be/zOPA0NaeTBk), he starts in the middle with an idea and then duplicates the whole version and iterates on it. If he reaches a dead end, he moves back to the last junction and moves from there in another direction. In the end, he has one giant board with dozens of variants and ideas, none of them worked into good craftsmanship or details, but keeps everything loose and ungrouped to be able to manipulate the individual pieces.
@@ -212,11 +212,11 @@ As he shows in the fantastic free video, [Aaron Draplin Takes On a Logo Design C
I followed this technique on all my designs and created dozens of variations, sometimes entire pages, sometimes a small detail as the footer or a meta section.
<Figure caption="All Artboards of the base design" size="fullsize">
<Image src="/assets/images/posts/base-design.jpg" alt="All Artboards of the base design" />
<Image src="/assets/images/posts/base-design.jpg" alt="All Artboards of the base design" />
</Figure>
<Figure caption="Variants of the Meta section" size="fullsize">
<Image src="/assets/images/posts/meta-section-design.png" alt="Variants of the Meta section" />
<Image src="/assets/images/posts/meta-section-design.png" alt="Variants of the Meta section" />
</Figure>
Designing was the part that brought the most fun to me. Designing is like a concert: It starts with a cello, but then more and more instruments get added until the full [concert ends in a massive crescendo](https://youtu.be/XpT-92HS11I). The start is always the hardest, with the designer staring at a blank, white screen. But then things fall into the place and ideas multiply and in the end, everything is obvious, and the next screen is easy to create.
@@ -224,23 +224,23 @@ Designing was the part that brought the most fun to me. Designing is like a conc
I started designing the blog detail page headline and moved out from there, creating text, header, footer, and small details.
<Figure caption="About Section" size="fullsize">
<Image src="/assets/images/posts/about-design.jpg" alt="About Section" />
<Image src="/assets/images/posts/about-design.jpg" alt="About Section" />
</Figure>
Then I moved into color variations for the pages. I designed error pages, navigation, special pages, and the homepage last. I didnt design every detail, but quickly moved from idea to idea, leaving behind a mess of unnamed layers and incomplete or outdated ideas.
<Figure caption="Color Variants" size="fullsize">
<Image src="/assets/images/posts/color-variants-design.jpg" alt="Color Variants" />
<Image src="/assets/images/posts/color-variants-design.jpg" alt="Color Variants" />
</Figure>
I created a giant design for all layout variations I wanted to support on a page (e.g., the combination of an image and a text). I moved quickly to [CodePen](https://codepen.io/) to create prototypes for these variations to validate my ideas where feasible. You can see all my prototypes on my CodePen account.
<Figure caption="Homepage" size="fullsize">
<Image src="/assets/images/posts/homepage-design.jpg" alt="Homepage" />
<Image src="/assets/images/posts/homepage-design.jpg" alt="Homepage" />
</Figure>
<Figure caption="Haiku Section" size="fullsize">
<Image src="/assets/images/posts/haiku-design.jpg" alt="Haiku Section" />
<Image src="/assets/images/posts/haiku-design.jpg" alt="Haiku Section" />
</Figure>
In the fall of 2019, I finished my design and left it for a few weeks untouched to see if I start disliking it. On the 25th of November 2019, I finally started coding.

View File

@@ -4,7 +4,7 @@ slug: new-website-2020-inspiration
date: 2020-07-14T08:00:00+02:00
author: Stefan Imhoff
description: This is the first of three parts in a series of essays about the process of creating my new website. This one has a look into the inspiration for my website.
tags: ["design"]
tags: ["design", "book"]
series: new-website-2020
---
@@ -23,15 +23,15 @@ And as I always collected designs and saved them on boards or put them in folder
I read all books from Kenya Hara, the art director of Muji, and one of the leading designers of Japan. Additionally, I read the old and famous books <AffiliateLink asin="0918172020" text="In Praise of Shadows" /> by Junichirō Tanizaki and <AffiliateLink asin="0909952302" text="Reflections on Japanese Taste: The Structure of Iki" /> by Kuki Shūzō. I read a compendium on all major Japanese currents of Art and Aesthetics, from glamorous gold-loaded styles to minimalistic Zen styles. I mapped out my research in detail in this [mind-map](https://my.mindnode.com/FGhdh66uMbi1aJ9RfriKUL3JoMCHd18aS8z9Uayw).
<Bookshelf>
<AmazonBook asin="0714866962" alt="Wa: The Essence of Japanese Design" />
<AmazonBook asin="0918172020" alt="In Praise of Shadows" />
<AmazonBook asin="0909952302" alt="Reflection on Japanese Taste: The Structure of Iki" />
<AmazonBook asin="303778105X" alt="Designing Design" />
<AmazonBook asin="3037781831" alt="White" />
<AmazonBook asin="3037785799" alt="100 Whites" />
<AmazonBook asin="3037784660" alt="Ex-Formation" />
<AmazonBook asin="4805312505" alt="Japanese Design: Art, Aesthetics & Culture" />
<AmazonBook asin="1880656124" alt="Wabi-Sabi for Artists, Designers, Poets & Philosophers" />
<AmazonBook asin="0714866962" alt="Wa: The Essence of Japanese Design" />
<AmazonBook asin="0918172020" alt="In Praise of Shadows" />
<AmazonBook asin="0909952302" alt="Reflection on Japanese Taste: The Structure of Iki" />
<AmazonBook asin="303778105X" alt="Designing Design" />
<AmazonBook asin="3037781831" alt="White" />
<AmazonBook asin="3037785799" alt="100 Whites" />
<AmazonBook asin="3037784660" alt="Ex-Formation" />
<AmazonBook asin="4805312505" alt="Japanese Design: Art, Aesthetics & Culture" />
<AmazonBook asin="1880656124" alt="Wabi-Sabi for Artists, Designers, Poets & Philosophers" />
</Bookshelf>
## Shibui Subtle Elegance

View File

@@ -4,7 +4,7 @@ slug: processing-information-into-notes
date: 2021-05-13T10:00:00+02:00
author: Stefan Imhoff
description: My process of extracting information out of books, articles, podcasts, and videos and creating atomic notes.
tags: ["productivity", "writing", "recommendation"]
tags: ["productivity", "writing", "recommendation", "book"]
---
Everybody is consuming content, through books, articles, videos, podcasts, or other media. We consume content for entertainment, to be informed, or to learn and grow. But few people take the time to extract the valuable parts from the content they are consuming.