Shuhei Kagawa

New look

Feb 23, 2021 - Blog

I updated this website’s design and replaced its static site generator with Eleventy. Here are some notes about the new look and implementation details.

Design

I had used only sans-serif fonts on this website. Serif fonts felt too fancy. But I like serif fonts on paper books. Many of them use serif fonts regardless of the fanciness of their contents. I wanted to do so for my website as well. But I didn’t know which font to use. There are so many fonts in this world, and Google Fonts has tons of serif fonts. So, I used a type pairing from Typewolf—Libre Franklin for headings and Libre Baskerville for body text.

For code blocks, I chose DM Mono. DM Mono is a monospace font commissioned by Deep Mind—yes, they have their own fonts. Its “f” has a fancy touch. I use it for coding these days after years with Fira Code.

function greet(name) {
  return `Hello, ${name}!`;
}

This website has mostly text and a few images. Web fonts are the only luxury that I put.

Tech

I replaced my home-grown static site generator using gulp with Eleventy. I liked gulp—it was a good use case of Node.js streams. But I wanted to try something new. I picked Eleventy simply because I heard its name many times and it runs on Node.js, which has a large ecosystem of web tooling.

Also, I removed Disqus and Google Analytics. This website is almost free of cookies now. The last one standing is Cloudflare’s bot detection cookie, which will be removed in May 2021.

Implementation details

I took image optimization techniques from google/elventy-high-performance-blog—next-gen image formats (AVIF and WebP), multiple image sizes (srcset), blurred placeholders with SVG, immutable image URLs, aspect ratio by setting width and height, lazy loading and async decoding. The implementation is rather wild. It parses each full HTML with jsdom, finds <img> tags, read and optimize linked image files, and replaces the <img> tags with optimized <picture> elements.

I implemented a funny feature that inserts <wbr> into longCamelCase words—like long<wbr>Camel<wbr>Case—to break them on small screens. Some posts on this website have long titles such as “Check your server.keepAliveTimeout.” Those titles overflow on small screens. I could use a smaller font size for the titles, but I wanted to use a big font. <wbr> HTML tag tells browsers that they can break lines there if necessary. I created a template filter to insert it.

Heading with  on the left and heading without it on the right

This website has a feature to generate Open Graph images—or Twitter Card images—using node-canvas for blog posts without any images. I used Eleventy’s pagination with size: 1 to implement it. It’s a cool way to generate another file for each post in a collection.

Another trick worth mentioning is generating CSS as Eleventy’s global data. Based on a regular CSS file, I wanted to inline Google Fonts CSS at build time (and preload woff2 files in it), apply postcss to it for transformation and optimization, and embed it into each HTML file. The quick tip to inline minified CSS on Eleventy documentation was not ideal for my use case. It didn’t feel like a valid use case of a filter to asynchronously fetch remote data, and it took a few extract seconds to run the same CSS optimization for every HTML file. Global data with JavaScript runs only once regardless of the number of templates that use it, and we can do almost anything.

Thoughts on Eleventy

I had a good experience with Eleventy. It was easy to start with, and its hot reload worked out of the box. Its data cascade is powerful. But it took some time for me to understand the powerful data (and content) cascade. To implement features inherited from the previous version, I had to read most of the documentation in the end.

It’s not the best tool for someone who just wants to write blog posts out of the box. You’ll need to write some JavaScript. But if you want to have fun writing JavaScript to implement whatever feature you like, it’s a great option.

Making coffee at home

Feb 10, 2021 - Coffee

In this stay-home time, I started making coffee at home last November. I’m quite happy with this new hobby and wanted to share the fun here.

Latte art—rabbit?

My coffee history

I was not a coffee person. My regular drinks at Starbucks in Tokyo were chai latte in the winter and matcha frappuccino in the summer. I had cappuccinos (or cappuccini!) at non-Starbucks cafes, but I never made coffee at home.

I started drinking more coffee in Berlin. Big espresso machines were introduced in the office a few years ago. My colleagues were excited. I bought Nespresso pods and joined the coffee time.

Many coffee shops in Berlin serve specialty coffee. I met something stronger than a cappuccino. Flat white became my regular drink.

Espresso machine

The last November, my wife and I bought De’Longhi Dedica EC685 for 153.90 €. It’s an entry-level espresso machine with good reviews. We wanted to start small because we were not sure if we wouldn’t get bored.

It came with almost everything necessary for making a cup of cappuccino—a milk jug, baskets, and a tamper with a scoop on the other end. Well, you still need to buy coffee beans and milk though.

I’m trying to make a flat white. Roughly speaking, it’s a double espresso with steamed milk on top.

Making espresso is easy—at least to satisfy my less educated taste. Put ground coffee into the basket in the handle, set the handle into the espresso machine, and press a button. That’s it.

Steamed milk is harder. Decica’s milk foam is coarser than more professional ones’. There are a few ways to improve it, but I haven’t tried any of them yet. I’ll try the cable tie trick soon.

Many online reviews pointed out that Dedica EC685 suddenly stopped working after a few months and required a factory reset to recover. It happened to ours once. But it was not an issue because we already knew the trick.

Coffee beans

I live in a neighborhood famous for gentrification. In walking distance, there are a few coffee roasters and countless coffee shops that sell specialty coffee beans. The Barn, Five Elephant, Friedl, Firstcrack, MokannTi, Coffee Stars, oh my.

I still don’t know what kind of beans I like. I’m exploring different beans one by one and looking for my favorite. My current focus is making coffee properly. Otherwise, my poor coffee-making skills diminish the difference in coffee beans.

Grinder

There are much more options if you can grind whole beans by yourself. After a month with the espresso machine, we weren’t bored yet. So we decided to invest in a grinder.

Not all grinders can grind coffee finely enough for espresso. Also, people on the internet say grinders are more important than espresso machines. But automatic grinders for espresso easily cost a few hundred euros at least. A bit too much for a beginner.

We opted for a good-quality hand grinder, Porlex, at 64.90 €. It’s made in Kagoshima, a southwest part of Japan. Its ceramic blades are easy to clean. It requires some force to rotate the handle, but it’s been working well so far.

An alternative was Comandante from Germany. It had a good reputation on the internet, but 228 € was out of our budget.

Grinding coffee is meditating. It brings analog vibes to my mostly digitalized life.

Latte art

To me, latte art is one of coffee’s biggest wonders. Baristas draw beautiful patterns only by pouring milk into coffee! It looks easy when skilled baristas do it, but it’s not.

If a picture is worth a thousand words, a video is worth a million words—especially for crafts like cooking and latte art. How to Pour Latte Art by Prima Coffee Equipment is the best video I have found so far. It was eye-opening to see how the barista pushed a circle into an arc, and he raised the milk jug before making a stroke at the end.

Also, coffee cups make a difference here. We started with small cylinder-shaped mugs that we had at home, but it didn’t go well. After we got bowl-shaped coffee cups, the bigger surface made it easier to pour milk on the surface.

Latte art—tulip?

Well, there’s still a long way to go!

Things I wish I knew about home office ergonomics

Jan 17, 2021

My current setup

Here are some tips that I learned through my own mistakes. I’m not an expert, and I know I’m late to the train. But I hope you find some of the tips useful!

Start from your body

Find furniture and equipment that fit your body. Not the other way around. I made a mistake on it when I bought my standing desk.

To have a good posture, check the following requirements:

  • Chair: Your feet should rest flat on the floor when you sit deep.
  • Desk: Your elbows should be at 90 degrees or more when you type on your keyboard.
  • Monitor: Your monitor’s top edge should be around your eye-level.

These three constraints define the ideal sizes and positions of your chair, desktop, and monitor.

Besides that, you can find tons of resources on the internet if you search for office ergonomics. I found the CUErgo website particularly informative.

Chair

Your feet should rest flat on the floor when you sit deep. It’s not hard to achieve because most office chairs are height-adjustable. But pay attention to the range of the seat level before you buy one.

Good chair is worth your money

When I started working from home, I ordered the cheapest chair in stock at the time to satisfy my minimum needs. The chair looked OK, but its seat was too stiff. I nearly got hemorrhoids after a few weeks. I had to buy a donut-shaped seat cushion to get around the issue. But it didn’t support my weight well and caused back pain.

Eventually, I decided to go with Aeron Chair Remastered, and I love it. It’s not cheap, but it’s much better than getting health problems.

Desk

Your elbows should be at 90 degrees or more when you type on your keyboard. This arrangement requires careful planning. Few desks are height adjustable. Even adjustable desks have their minimum/maximum heights. If you can’t get a desk of your perfect height, you can a keyboard tray to lower your keyboard or footrest to elevate yourself.

Check the minimum height before buying a standing desk

I bought a standing desk, Flexispot E1, because I saw Flexispot on many blog posts in Japan and E1 was the most affordable one. It turned out that its minimum height 71 cm was too high for me. It took me a while to realize it because it’s a standing desk. More expensive models of Flexispot have lower minimum heights. For example, E5 can go down to 62 cm.

To work around the issue, I ordered a keyboard tray from Flexispot. The keyboard tray lowered the position of my keyboard and created more space on my desktop. I was happy that I was able to open a book between my keyboard and monitor. But the keyboard tray came with its problems. Typing hard on it shook the desk itself. It revealed the desk’s instability. On top of that, the tray was unstable by itself because its screws were quite loose.

A good side effect was that I stopped resting my palms on wrist rests when I type. It was advice from the CUErgo website and an attempt to reduce the wobble of my desk and monitor. Now my monitor doesn’t wobble and I can type faster.

Stability matters

If you are getting a standing desk, get a stable one!

Stability is especially important if you use a big monitor and a monitor arm. I tried a 32-inch monitor once with a monitor arm and had to return it because it wobbled too much on the standing desk.

btod.com has stability reviews of standing desks.

If I buy a standing desk again, I would try IKEA’s Idasen.

Monitor

I’m using a 27-inch QHD monitor now after trying 24-inch and 32-inch. 32-inch was too big for me.

Monitor height

Your monitor’s top edge should be around your eye-level. Usually, the built-in stands of regular monitors don’t go high enough. A stack of books, a monitor stand, or a monitor arm elevate your monitor. If you use a keyboard tray, you need less monitor elevation because you can keep your desktop higher.

Before buying anything, check whether your setup can satisfy your monitor’s perfect height. If you are getting a monitor arm, check the relative position of your monitor’s VESA mount to its top. Not all monitors have their VESA mounts at their center.

I’m using Flo from Colebrook Bosson Saunders. I’m satisfied with the beautiful monitor arm so far. Its maximum height is just enough for my eye-level. You may need a more robust one if you need more height or a bigger monitor.

Inside your screen

You don’t need to fill your screen with windows. My neck hurts if I stare at a corner of my screen for a long time. But I often found myself in this neck-bending situation. It helps if you keep your working area at the top center of your screen.

I stopped using applications in full screen or multi-window layout. I put my browser window in the half-width of my screen and put it at the center. Instead of showing multiple windows, I keep only one window at a time and switch windows with a keyboard shortcut. This single-window policy allows me to always look in front of me and focus on one thing at a time.

One window at a time

Vim

Goyo is a Vim plugin that creates a focus mode. The plugin hides non-essential elements and places the text at the center. The focus mode helps you not only focus, but also keep you face the center of the screen.

If Goyo provides horizontal adjustment, z<CR> provides vertical adjustment. The normal-mode command brings the current line to the top of your screen. It helps you keep your neck straight.

Distraction-free Vim

Terminal

Can we create the Goyo-like focus mode outside of Vim? This cool trick on SuperUser allows you to create a focus mode on tmux. You can also move up your eyes to the top of your screen by clear on your terminal.

Move!

Even with all of the above, my body doesn’t feel well if I stay in front of my computer all day. I go out for a walk every day, and it makes a difference. Ergonomic setup doesn’t mean you can work all day.