Blog and portfolio site of designer 'Akira Hirata'. I share information about web front-end technologies, UI design, and more.https://hira.page/https://hira.page/en/blog/bar-ui-naming/https://hira.page/en/blog/bar-ui-naming/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.Thu, 28 Aug 2025 00:00:00 GMThttps://hira.page/en/blog/tailwind-react-styling-issues/https://hira.page/en/blog/tailwind-react-styling-issues/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.Sat, 22 Mar 2025 00:00:00 GMThttps://hira.page/en/blog/2024-best-buy/https://hira.page/en/blog/2024-best-buy/A list of the best things I bought in 2024. I write one every year at the start of the year.Mon, 13 Jan 2025 00:00:00 GMThttps://hira.page/en/blog/minimal-house-cleaning/https://hira.page/en/blog/minimal-house-cleaning/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.Mon, 25 Nov 2024 00:00:00 GMThttps://hira.page/en/blog/designer-left-hand-happy/https://hira.page/en/blog/designer-left-hand-happy/An article on improving work efficiency. For right-handed mouse users — designers, creators, and anyone else. Also includes recommendations for left-hand devices.Thu, 11 Apr 2024 00:00:00 GMThttps://hira.page/en/blog/2023-best-buy/https://hira.page/en/blog/2023-best-buy/A list of the best things I bought in 2023. I write this every year at the start of the year.Mon, 08 Jan 2024 00:00:00 GMThttps://hira.page/en/blog/kvm-display/https://hira.page/en/blog/kvm-display/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.Wed, 06 Dec 2023 00:00:00 GMThttps://hira.page/en/blog/2022-best-buy/https://hira.page/en/blog/2022-best-buy/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.Sun, 08 Jan 2023 06:46:48 GMThttps://hira.page/en/blog/vc-with-switch/https://hira.page/en/blog/vc-with-switch/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!Mon, 22 Aug 2022 09:42:41 GMThttps://hira.page/en/blog/responsive-for-android-foldable/https://hira.page/en/blog/responsive-for-android-foldable/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.Wed, 16 Mar 2022 02:14:08 GMThttps://hira.page/en/blog/2021-best-buy/https://hira.page/en/blog/2021-best-buy/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.Thu, 20 Jan 2022 02:57:05 GMThttps://hira.page/en/blog/material-design-3/https://hira.page/en/blog/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.Thu, 18 Nov 2021 06:31:14 GMThttps://hira.page/en/blog/alfred-technique/https://hira.page/en/blog/alfred-technique/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.Tue, 20 Apr 2021 08:31:43 GMThttps://hira.page/en/blog/how-to-figma-for-engineer/https://hira.page/en/blog/how-to-figma-for-engineer/An explanation of how to use Figma — not for the people creating designs, but for the people checking the designs that designers have made.Tue, 23 Mar 2021 09:55:26 GMThttps://hira.page/en/blog/password-management/https://hira.page/en/blog/password-management/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.Wed, 10 Mar 2021 07:55:13 GMThttps://hira.page/en/blog/hugo-vue3/https://hira.page/en/blog/hugo-vue3/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.Mon, 08 Mar 2021 07:55:13 GMThttps://hira.page/en/blog/tabulasa/https://hira.page/en/blog/tabulasa/I love VS Code, Chrome, and Vue, so let me introduce something that came out of that combination naturally.Sat, 04 Apr 2020 08:04:35 GMThttps://hira.page/en/blog/my-desk/https://hira.page/en/blog/my-desk/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.Fri, 06 Mar 2020 08:18:50 GMThttps://hira.page/en/blog/platform-guideline/https://hira.page/en/blog/platform-guideline/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.Sun, 15 Sep 2019 08:17:10 GMThttps://hira.page/en/blog/prefers-color-scheme/https://hira.page/en/blog/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.Wed, 31 Jul 2019 08:15:11 GMThttps://hira.page/en/blog/backdrop-filter/https://hira.page/en/blog/backdrop-filter/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.Wed, 31 Jul 2019 08:13:31 GMThttps://hira.page/en/blog/sf-symbols/https://hira.page/en/blog/sf-symbols/I tripped up a bit when trying to use SF Symbols in design files, so let me share how to do it.Wed, 05 Jun 2019 08:09:27 GMThttps://hira.page/en/blog/201905_pixel3-camera/https://hira.page/en/blog/201905_pixel3-camera/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.Tue, 07 May 2019 23:45:17 GMThttps://hira.page/en/blog/201904_ui-tools-compare/https://hira.page/en/blog/201904_ui-tools-compare/Sun, 21 Apr 2019 23:45:17 GMThttps://hira.page/en/blog/201901_cashless/https://hira.page/en/blog/201901_cashless/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.Thu, 10 Jan 2019 01:42:17 GMThttps://hira.page/en/blog/201812_goodbuy/https://hira.page/en/blog/201812_goodbuy/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.Wed, 05 Dec 2018 14:46:13 GMThttps://hira.page/en/blog/201809_chrome-stylize/https://hira.page/en/blog/201809_chrome-stylize/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.Sun, 02 Sep 2018 14:46:13 GMThttps://hira.page/en/blog/201807_vs-code-introduction/https://hira.page/en/blog/201807_vs-code-introduction/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.Sun, 15 Jul 2018 14:46:13 GMThttps://hira.page/en/blog/201803_invision-studio/https://hira.page/en/blog/201803_invision-studio/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.Thu, 22 Mar 2018 14:46:13 GMThttps://hira.page/en/blog/201712_taskrunner/https://hira.page/en/blog/201712_taskrunner/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.Tue, 12 Dec 2017 12:57:25 GMThttps://hira.page/en/blog/201712_python-server/https://hira.page/en/blog/201712_python-server/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.Sun, 03 Dec 2017 04:05:42 GMThttps://hira.page/en/blog/201710_signifier/https://hira.page/en/blog/201710_signifier/Have you ever heard of the words 'affordance' and 'signifier'? If you've only ever heard of 'affordance,' you should be careful.Sun, 22 Oct 2017 06:17:51 GMThttps://hira.page/en/blog/201710_lets-bookmarklet/https://hira.page/en/blog/201710_lets-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.Sun, 01 Oct 2017 14:46:13 GMT