Console #99 -- Yuzu, Percival, and Hibiki HTML

An Interview With Mike of Hibiki HTML

🤝 Sponsor - Around

"Once you start using Around, there is no going back."

Not a fan of video calls with clunky UX that take over your screen? Around's radically reimagined video calls are unobtrusive, thoughtfully designed, and free up your desktop. It's perfect for getting work done—instead of just talking about work. We've eliminated everything tiring about traditional video conferencing and rebuilt from the ground up for remote teams. Around's collaborative interface is perfect for things like code reviews, pair programming, and stand-ups, and comes with anti-fatigue touches like AI-based noise cancellation and background cropping. Once you try it, you'll never want to use Zoom or Google Meet again.

---

🏗️ Projects

Yuzu

yuzu is the world's most popular, open-source, Nintendo Switch emulator. It is written in C++ with portability in mind, and they actively maintain builds for Windows and Linux.

language: C++, stars: 19631, forks: 1642, issues: 931, last commit: April 01, 2022
repo: github.com/yuzu-emu/yuzu site: yuzu-emu.org/

Percival

Percival is a declarative data query and visualization language. It provides a reactive, web-based notebook environment for exploring complex datasets, producing interactive graphics, and sharing results.

language: Rust, stars: 288, forks: 12, issues: 0. last commit: March 21, 2022
repo: github.com/ekzhang/percival site: percival.ink

Hibiki HTML

Hibiki HTML is a new web framework for creating modern front-end applications, without scaffolding or setting up a JavaScript stack, that can be fully scripted and controlled by backend code.

language: TypeScript, stars: 355, forks: 5, issues: 0, last commit: March 29, 2022
repo: github.com/dashborg/hibiki site: playground.hibikihtml.com/tutorial/

---

---

🎤 Interview With Mike of Hibiki

Hey Mike! Thanks for joining us! Let's start with your background. Where have you worked in the past, how did you learn how to program, and what languages or frameworks do you like?

Started programming on a used Apple II in 5th grade.  Once I found the “rnd” function and could make games I was hooked.  Went to Stanford, got a CS degree, turned down a job at Google :/, and then worked at different startups for the beginning of my career.  My last company was Topix, a web publisher, where I became CTO.  I love learning about languages, but right now I’m a fan of Golang on the backend and TypeScript on the frontend.

Who or what are your biggest influences as a developer?

I’ve always worked at small companies where there are ten times more things to do than you have developers.  I’m always looking for how to get things quickly.  Being under that constant pressure has led me to work on devtools to help increase developer productivity.

What's an opinion you have that most people don't agree with?

Decomposition and abstraction are overrated.  Sure, if you have a 10k or 100k line code base, you need to do everything possible to keep things modular.  But for most small projects, keeping things simple and in fewer files saves time and brain cells.  I’ve seen projects that take a 20-line frontend component and turn it into 3 files to separate HTML, CSS, and JS functionality.  That’s nuts.

What is your favorite software tool?

Emacs. Been using it for over 20 years, it is the first thing I set up on every computer, and I love it.  Also, vi sucks.

Any tips on how to get started with a basic setup for a beginner?

The biggest issue with learning emacs is the keybindings.  But if you already have some familiarity with them, then on OS X this is a great distribution to get  https://emacsformacosx.com/ For the setup I can share my setup, I just made it public here https://github.com/sawka/emacs-lisp.  Black background, and removes all of the menus, toolbars, scroll bars, to just be a pure text editor.

If you could dictate that everyone in the world should read one book, what would it be?

Zen Mind, Beginners Mind by Shunryu Suzuki.

If you had to suggest 1 person developers should follow, who would it be?

For Golang I love Dave Cheney, but sadly he hasn’t been posting much recently.

If you could teach every 12 year old in the world one thing, what would it be and why?

How to program :).  Or maybe the way to think like a programmer.  How to break down problems into smaller and smaller pieces that you can easily solve and then put it all back together.  Being curious when something doesn’t work instead of frustrated.

If I gave you $10 million to invest in one thing right now, where would you put it?

My startup, Dashborg and Hibiki HTML!

If I gave you $100 million to invest in one thing right now, where would you put it?

Drones and autonomous robots. So much of what I do in the physical world is repetitive.  If only I could write a function to abstract tasks in the real world like I can in code.

What’s one task you’d abstract?

Making my morning coffee, making my lunch, putting all my shoes and clothes away :) .  Funny that all of these have external options -- like a coffee shop, DoorDash, maids, but sometimes I want my sandwich the way I want to make it with the ingredients in my fridge :)

What are you currently learning?

How to navigate open-source development. I’m an engineer at heart, and I love building code and products.  Figuring out how to promote my work is a huge challenge, and something I’m still trying to figure out.

What have you been listening to lately?

Anjunabeats Radio on youtube, is great for working from home.

How do you separate good project ideas from bad ones?

By coding.  Some people think best when they talk or write.  I think best while writing code.  Usually after fleshing out an idea by writing some interfaces or simple functions I can get a sense of whether it makes sense, and how easy/hard it will be to implement.

Why was Hibiki started?

Hibiki came from the frontend tech that I developed for my startup Dashborg. I talked to a lot of engineers and engineering managers, and there is a strong sense that frontend development has become too complicated and inaccessible to non–frontend specialists.  Hibiki HTML is my attempt to make the frontend simple again. 

Where did the name for Hibiki come from?

I love whiskey. The name Hibiki comes from my all-time favorite whiskey, a 17-year old Japanese whiskey from Suntory called Hibiki. It is amazing and super smooth, why not make it into a smooth web framework?

Who, or what was the biggest inspiration for Hibiki?

15 years ago, almost all of my backend engineers would write frontend code (templates, JSP pages, CGI scripts, etc.).  Fast forward to a couple of years ago, and the “full-stack” engineer is mostly dead, and none of my backend engineers are comfortable setting up a JS stack (webpack, npm, babel) and shipping a React frontend.  Hibiki is meant as a great middle-ground to allow frontend development to be accessible again.  Great for backend engineers, DevOps engineers, data scientists, students, aspiring developers, or vanilla HTML designers. 

Are there any overarching goals of Hibiki that drive design or implementation
If so, what trade-offs have been made in Hibiki as a consequence of these goals?

Hibiki HTML is HTML.  Wrapping any vanilla HTML in a hibiki tag will not change its functionality.  This allows Hibiki to be integrated risk-free into existing pages and provide incremental value

Works in a single file without scaffolding.  You can break up your Hibiki templates into multiple files, but you don’t have to.  This allows Hibiki to be easily embedded into scripts and backend code without shipping a directory of frontend assets with your backend binary

No build tools or special deployment processes.  All you need is a text editor.  Open up your HTML file on your local machine or upload it to any static host (works great right out of an S3 bucket).

No JavaScript necessary.  Build apps and import libraries and components all without ever adding a <script> tag or setting up a local JavaScript stack with npm, webpack, and babel.

Powerful component system.  Easy to build simple components, but powerful enough to build sorting data-tables or drag & drop lists.

What is the most challenging problem that’s been solved in Hibiki, so far?

So many hard technical problems from creating a fully-parsed expression language, event bubbling, and nested components.  But, the one that I’m most proud of is Hibiki’s approach to HOC (higher-order-components).  Most users will never need this functionality, but it is essential for building out great libraries of reusable components.  So much simpler than how it works in React.

Got any code links to this stuff, so the readers can browse?

Ya the table component in the Bulma library is great -- https://libs.hibikihtml.com/test-bulma.html#table .  It wraps it's "col" children and then injects attributes and the row-data to display the header cells differently from the main table cells. (https://github.com/dashborg/hibiki-libs/blob/main/src/hibiki/bulma/bulma.html#L391)

A simpler example is how the Bulma menus work. When a menuitem is wrapped in a menulist.  The list can inject the "selected" menu item value (which causes it to highlight).  It can also inject the "click" handler that sets the selected value. (https://github.com/dashborg/hibiki-libs/blob/main/src/hibiki/bulma/bulma.html#L202).

It's hard to explain inline here, but it lets you cut out that code-duplication and write a menu in a very intuitive way (like raw HTML) with all the ugly script-y bits handled by the wrappers.

Are there any competitors or projects similar to Hibiki? If so, what were they lacking that made you consider building something new?

Other frameworks require you to buy into the whole JavaScript stack (npm, webpack, babel) and install hundreds of megs of packages, multiple configuration files, source files, and directories, even for the simplest of apps.  Other smaller frameworks are just point solutions which are great for some tools, but lack components, libraries, built-in ajax support, and an integrated data-model.

Hibiki gets you dynamic functionality, reusable components, and backend REST calls in a single HTML file.  No tools to install, no JavaScript stack to configure, no build process, and no need to be a JavaScript expert.

What is the release process like for Hibiki?

Right now things are moving very fast, and I’m trying to push out new features once or twice a week.  A lot of the features are driven from the community.  If you have a need or a request, please join the Discord channel and let me know.  I’ve turned around multiple feature requests in just a couple of days.

How do you eventually intend on monetizing Hibiki?

Security, authentication, and deployment are really important, but also very different skills from front-end programming.  They also require some fixed infrastructure (servers, configuration data, etc.) so they can’t just be distributed as an open-source library.  I’m working on an easy-to-use freemium hosting service for Hibiki apps.

How do you balance your work on open-source with your day job and other responsibilities?

Right now I’m full-time on Hibiki and hope to stay that way.  Looking for seed funding to keep going.

What is the best way for a new developer to contribute to Hibiki?

There are so many projects that could help Hibiki get to the next level.  Creating reusable Hibiki components and wrapping UI controls (Bootstrap, Material UI) would be amazing.  Also just using the framework to build tools and giving feedback on what was easy or what was hard would be a huge help to make the framework even better.

If you plan to continue developing Hibiki, where do you see the project heading next?

The magic of Hibiki is the unified data model and the ability to easily compose components over that data model.  I’m inspired by the UNIX filesystem and pipes, and how so many different programs can interact seamlessly through that abstraction.

Building out a great set of libraries, and a way for people to contribute additional open-source Hibiki libraries will make the Hibiki even easier to use and get started with.

I also have some exciting features planned around websockets and integrations with backend frameworks and APIs.

What motivates you to continue contributing to Hibiki?

Frontend tools should be easier and more inclusive.  Things have gotten so complicated that I see so many low-code GUI platforms taking off.  But then they own your tools and the code.  What’s needed is a simpler framework where you are still in control of your own code.

Are there any other projects besides Hibiki that you’re working on?

I have a couple of other projects, some still under wraps.  I’m really interested in how to make publishing admin services (REST interfaces) easier, especially cutting out the overhead around security, authentication, and deployment.

Where do you see software development heading next?

Serverless and SaaS is huge.  I’m talking to lots of startups (even technical ones) that don’t run any servers or containers of their own.  They have data in AirTable, UI in Notion, and tools in Retool, and hook things together with Zapier.

Most people see this as the “future”.  I see it as a failure of frameworks and dev tools to keep pace with all of the complexity.  No-code is great for some applications, but personally, I never want to type SQL into a textbox on the web, or configure my UI components with menus and dropdowns only to have your code live on (and get locked into) a proprietary platform.  I see a huge opportunity to improve tools and frameworks to make coding just as easy as no-code.   That’s the future.

Where do you see open-source heading next?

No idea, but the future is bright.  Open source is only getting stronger and stronger all the time.

---

Want to join the conversation about one of the projects featured this week? Drop a comment, or see what others are saying!

Interested in sponsoring the newsletter or know of any cool projects or interesting developers you want us to interview? Reach out at console.substack@gmail.com or mention us @ConsoleWeekly!