Hiroki Osame

GitHub LinkedIn Tokyo, Japan

I’m a software engineer specializing in JavaScript & TypeScript. I’m interested in web development tooling and helping other engineers be more productive by improving their Developer Experience. I enjoy delving into low-level JavaScript concepts such as module resolution, static analysis, bundling, and AST transformations. I have expertise in a range of tools including Node.js, Rollup, Webpack, esbuild, Vite, and Vue.js.

Work + Education

Square / Block

2018-Present

As a Senior L6 Frontend SWE on the ECOM DX team, I develop tools to address common pain-points across Eng departments. I’m also the ECOM Open Source (OS) ambassador, and I encourage & drive OS contributions. Previously, on the ECOM Site Performance team, I helped optimize loading times & Lighthouse scores. On the ECOM Site Design team, I helped build a themeable Vue.js component library for our client websites.

Weebly

2015-2018

On the Design Engineering team, I helped build a Vue.js component library with 50+ components. I collaborated extensively with Engineering & Design and developed a comprehensive tooling ecosystem (style guide, recipe-book, playground, auto-upgrade command, visual regression testing). I’m proud to be recognized as a top 10% performer in the Eng department.

Boston University

2011-2015

B.A. in Computer Science

Personal projects / Open Source

I’m a highly enthusiastic Open Source developer who dedicates personal time to maintaining around 70 projects on GitHub. Several are popular and utilized by renowned developers, projects, and companies. Last month (Apr 2023), they were downloaded 24.7 million times (10/sec). Here are some notable ones:

tsx

1.5M/month

Enhanced Node.js to “just run” TypeScript & ESM code. It’s zero-config so it’s a beginner-friendly way to jump-start TypeScript development. Powered by esbuild.

I’m proud of this project because I managed to simplify a complex system behind a single command. The implementation required a deep understanding of Node.js internals and the intricacies between ESM and CommonJS (CJS). The development of this project also entailed the creation of independent loaders for CJS & ESM, cleye—a strongly typed CLI framework—, and get-tsconfig—a tsconfig.json resolver.

More

esbuild-loader

3.2M/month

Webpack loader for transforming JS & CSS code using esbuild. It’s a blazing fast alternative for popular loaders such as Babel, TypeScript, and Terser.

This project is my most popular project and what initially drew me to Open Source. I started as a contributor and eventually took over maintenance. The concept is straightforward, but required extensive work to execute correctly, especially when it came to handling two Webpack versions both at runtime & types, and testing them. To accomplish this, I developed tools such as pkgroll, webpack-test-utils, fs-fixture, and get-tsconfig. I’m also proud of my contributions to esbuild through issue submissions and feature requests.

More

pkgroll

3.2K/month

Zero-config bundler for Node.js packages. It infers how to bundle the package by analyzing package.json entry-points and dependencies. Powered by Rollup & esbuild.

Pkgroll is my go-to bundler for my Node.js projects because it knows how to bundle them without any configuration. I created it to streamline my workflow, as I noticed I was repeatedly using the same Rollup configuration for most of my projects. It also reduces the effort required to manage entry-points in both package.json and build configuration, making it especially convenient for ESM and CJS distribution.

More

minification-benchmarks

Comparison of JS minifiers based on minification, compression, & speed. Often referenced when picking a minifier. The project is automated and always up-to-date.

I created minification-benchmarks when esbuild first released JS minification, and I wanted to evaluate it against alternatives. I publicized the results to help developers select a minifier, and it was even linked by the esbuild website. The benchmark also functions as a test, aiding minifiers in identifying bugs and enhancing performance.

More

tasuku

11.1K/month

A minimal Node.js library for elegantly displaying the progress of tasks in the terminal. It’s unopionated and strongly typed, so it can easily enhance any CLI tool.

As a lazy engineer, I often write scripts to automate my workflow. I used to use listr to display the progress of my scripts, but I found it overly structured and limiting in terms of code organization. Seeking a simpler & unopinionated solution, I created tasuku, a lightweight alternative. Since adopting tasuku, I have been able to significantly improve the UX of my scripts with no additional effort.

More

webpack-localize-assets-plugin

11.3K/month

Webpack plugin for multi-locale asset i18n. Very fast because it uses string manipulation, while predecessors used ASTs. Used to localize StackOverflow.com.

I made this plugin to improve the Webpack build time at work. Upon investigating bottlenecks, I found that our fork of the deprecated i18n-webpack-plugin was causing significant slow-downs. It localized at the AST level, leading to asset generation & minification being multiplied for each locale. Inspired by how Rollup works, I used string-manipulation to localize minified assets. As there was no successor to i18n-webpack-plugin, I decided to open source my solution.

More

Check out the rest of my packages.

Contact me

If you’d like to talk to me about anything, feel free to reach out.