BLOG
-
Do You Know Where the 'Navigation Bar' Is? Its Name Recently Changed... A Summary of Old and New Bar UIs in iOS & Android
Mobile app UIs have many UIs with 'Bar' in their names, like Navigation Bar and Toolbar. Recently, both iOS and Android have significantly changed the names and specifications of these UIs. The name 'Navigation Bar' in particular is extremely confusing because it can refer to different UIs depending on whether it's iOS or Android, and whether you're talking about the current or older versions. This article summarizes the names and appearances on each OS in tables, with links to the official specifications.
-
Design -
UI
-
-
Why I dislike Tailwind (and React)
I'll walk through the issues I have with the combination of Tailwind CSS and React—how style definitions get tangled up with document structure, my frustrations around scoped CSS, and how it compares to other frameworks like Astro, Svelte, and Vue.
-
React -
tailwind
-
-
Best Buy 2024
A list of the best things I bought in 2024. I write one every year at the start of the year.
-
Review -
Life
-
-
[Routine & Preventive Cleaning] A Lazy 15-Year Solo Liver's Take on the Minimum Habits to Keep Your Place Clean [Save This One]
I'm fundamentally a super lazy person, but I'm confident my place is clean enough to welcome guests at any time. After living alone for over 10 years across four rentals, I've figured out the easiest cleaning routines to keep things tidy, so I'm putting them together. Year-end deep cleaning season is coming up, so I'm also recommending lots of cleaning items that are great to grab on Black Friday.
-
Life
-
-
How Mouse Users Can Be Happier by Pressing Enter and Arrow Keys with Their Left Hand
An article on improving work efficiency. For right-handed mouse users — designers, creators, and anyone else. Also includes recommendations for left-hand devices.
-
figma -
Review
-
-
Best Buy 2023
A list of the best things I bought in 2023. I write this every year at the start of the year.
-
Review -
Life
-
-
For Those Who Want to Use Multiple PCs with One Display, Mouse, or Keyboard! KVM and PbP Monitors are Super Convenient
Have you heard of monitor features like KVM, PBP, and PIP? They make life much easier when you connect multiple PCs to a single display, mouse, or keyboard. If you've never paid attention to these when choosing a monitor, give them a look.
-
Review
-
-
open Best Buy 2022
The best things I bought in 2022. I built a 'home gym' and rethought 'what's in my bag', so there's a lot of that kind of stuff.
-
Review -
Life
-
-
Listening to Switch game audio and smartphone voice chat through one pair of earphones [Splatoon 3]
When you do voice chat while playing on Nintendo Switch, the tricky part is figuring out how to hear both the game audio and the call audio at the same time. In this article I've put together the best earphone setups I've tried, plus the things worth knowing when choosing one. Set yourself up to comfortably play Splatoon 3 with friends!
-
Review
-
-
The Complete 2022 Guide to Android Foldable & Responsive Design
I worked on foldable (folding smartphone) support for our company's app, so I'm summarizing the latest in Android multi-device and responsive design from a UI design perspective. It's a bit long, so feel free to jump to the parts that interest you from the table of contents.
-
UI -
Design
-
-
Best Buy 2021
A list of the best things I bought in 2021. So what if I'm writing this after the new year? Gadgets, furniture, cooking gear, and more.
-
Review -
Life
-
-
A Quick Summary of Material Design 3
Along with the release of Android 12, the official Material Design documentation was significantly updated (often called M3). I read through it, so I'd like to give a quick rundown of the key points. This assumes you're already somewhat familiar with the previous Material Design.
-
UI -
Design
-
-
Mac Productivity: Alfred Settings and Tips You Probably Don't Know Yet
A roundup of recommended ways to use and configure Alfred, the go-to productivity app on Mac. Since it's a hugely popular app, plenty of similar articles already exist, so I'll focus on tips and tricks that probably aren't widely known. This is based on the paid version (Powerpack). Covering every feature would make this too long, so I'll only introduce the ones I personally use on a daily basis.
-
App・Service
-
-
open How to use Figma when you're checking designs (for engineers and managers)
An explanation of how to use Figma — not for the people creating designs, but for the people checking the designs that designers have made.
-
figma -
UI
-
-
How to Use a Strong, Unique Password for Every Service—and Still Remember Them Easily
For safety, you should use complex passwords that can't be easily guessed, and use a different one for every app and service. Here's a way to use strong, secure, service-specific passwords that are also easy to remember.
-
App・Service
-
-
open Building an SPA Blog Site with Strong SEO using Vue 3 + Hugo
I recently renewed my personal blog site. I'd like to share my experience choosing a CMS for the blog and what I learned from working with Vue 3. The content is intended for frontend engineers.
-
Vue -
HUGO
-
-
open I built a Vue extension that turns Chrome's new tab into a VS Code-style WYSIWYG Markdown editor
I love VS Code, Chrome, and Vue, so let me introduce something that came out of that combination naturally.
-
Vue
-
-
open A UI Designer's Desk @U-NEXT
It seems like keeping desks tidy is trending in some circles, so I'm jumping on the bandwagon and writing about my own setup. There are apparently a lot of people at U-NEXT who care about their desks—I'm the fifth one to write a desk-themed note.
-
UI
-
-
open Platform Principles Every UI Designer Should Understand
This article summarizes why and how UI designers should learn platform principles. It can be hard for beginners to even know how or why to study this area, so I hope this helps.
-
UI
-
-
open Add Dark Mode to Web Pages with CSS Alone—Chrome Now Supports the Super Handy prefers-color-scheme
Using the prefers-color-scheme setting, you can easily add dark mode support to your web pages. Chrome 76, released today, now supports it as well, so I'll give a quick introduction.
-
Web -
CSS
-
-
open Beautiful Background Blur and Frosted Glass Effects in One Line of CSS! backdrop-filter Now Supported in Chrome and Super Useful
Background blur effects, which used to be difficult to implement in web design, can now be expressed super easily with a CSS property called backdrop-filter.
-
Web -
CSS
-
-
open Using iOS 13's SF Symbols in Sketch and XD
I tripped up a bit when trying to use SF Symbols in design files, so let me share how to do it.
-
UI
-
-
The true value of the Pixel 3 camera lies in the 'shooting experience'
Since its release, the Pixel 3 has been talked about everywhere for its great camera. Of course the camera performance is excellent, but I think what really makes the Pixel 3 stand out is the quality of its 'shooting experience'. This is a great opportunity, so let me share what I've always loved about the Pixel.
-
Review -
UX
-
-
open The most thorough comparison of Sketch, XD, Figma, and Studio
-
figma -
App・Service
-
-
What I learned by ditching my wallet, and the current optimal solution
Ever since I bought a Pixel3 the other day, I stopped carrying a wallet. All I carry is a Pixel3 and a card case, and I mostly pay using just the Google Pay app and a credit card.
-
Review -
App・Service
-
-
15 things I bought in 2018 that were great
A roundup of things I bought or signed up for in 2018 that turned out great. My goal this year was cranking up my QOL, so I've been buying a lot. I've grouped them into gadgets, subscription services, things for my cat, and miscellaneous. Within each category they're roughly in order of how much I liked them.
-
Review -
Life
-
-
[Chrome extension] Freely restyle the sites you use most! How to load your own CSS and JS [Stylish removal commemorative]
All you need is the basics of HTML and CSS. You can give Google Search or GitHub a dark background, hide elements you don't need, and more. Since you build the extension locally, it's safer, you can use JS, you can use SCSS — lots of upsides.
-
Chrome -
Web
-
-
Atom and Sublime users — switch to VS Code, the editor with no weak spots
There are countless editors out there, but they all come with trade-offs — missing features, sluggish performance, steep learning curves, or pricey licenses. This article makes the case for VS Code: an editor with very few weaknesses, and one that just works comfortably as a daily driver. It's mainly aimed at users of Atom, Sublime, Brackets, Coda, and similar editors.
-
App・Service -
Web
-
-
It's finally here! I tried out inVision Studio (early access), the prototyping tool everyone's been hyping as the strongest
Last year inVision released only a promo video, which created a huge buzz. It's an app that competes with Sketch and XD, and from the video it was rumored to have features powerful enough to wipe them out. The invitation email for the early access version that I had registered for finally arrived, so let's investigate.
-
App・Service
-
-
[Definitive guide] gulp, webpack, parcel... Understand the characteristics of the ever-growing list of task runners and choose the best one
Frontend development depends on tons of libraries and frameworks, and the task runners that manage them have likewise diversified into a crowded field. The aim of this article is to touch on their characteristics and concepts, making it easier to picture the differences.
-
JavaScript -
Web
-
-
How to check a web page being built on your PC in real time on your smartphone
On a Mac, with no special preparation, you can easily spin up a local server and check the web page or app you're building on your phone.
-
Web
-
-
Signifiers designers should be aware of, and the often-misunderstood concept of affordance
Have you ever heard of the words 'affordance' and 'signifier'? If you've only ever heard of 'affordance,' you should be careful.
-
Design -
UX
-
-
If you can write even a little JS or jQuery, let's make a bookmarklet
A bookmarklet is a program you register in your browser and run on any web page. If you understand a bit of JS, creating one is very easy and requires no special setup.
-
JavaScript
-