(Archived) UI Series — Table Of Contents

Main Series

UI, Part 1: The Interaction Medium

You navigated to this blog post in a web browser, so chances are, you’re familiar with software user interfaces. For users, they’re everywhere on a modern computer. And, when I say “everywhere”, I actually do mean everywhere—they are the only thing that a user ever actually interacts with. And yes, I’m talking to you, Arch Linux hermit, tightly gripping…

3 years ago · 61 likes · 3 comments · Ryan Fleury

UI, Part 2: Every Single Frame (IMGUI)

In Part 1, I outlined my framework for thinking about user interfaces, and established a set of goals, constraints, and ideas that inform my approach to building one. One of these ideas was that our code for implementing a user interface would be subdivided into at least two parts, or “layers”. One layer is the…

3 years ago · 46 likes · 10 comments · Ryan Fleury

UI, Part 3: The Widget Building Language

I outlined in Part 1 the existence of at least two layers in my style of user interface implementation: core code and builder core. In Part 2, I introduced an immediate-mode style API that would help reach certain goals in builder code. Now, let’s talk about how we might go about writing the…

3 years ago · 34 likes · 20 comments · Ryan Fleury

UI, Part 4: The Widget Is A Lie (Node Composition)

So far, we’ve covered a lot of ground. I started this series with a first-principles definition of a user interface, and the idea that a user interface facilitates communication between a user and a programmer. I’ve introduced the concept of an immediate-mode API as a suitable design strategy for a user interface system’s builder code. And lastly, I’ve …

3 years ago · 32 likes · 5 comments · Ryan Fleury

UI, Part 5: Visual Content

In this post, I’ll fill in some blanks I’ve skipped, relating to specifying visual content in builder codepaths. The first topic I’ll cover is how we can use the tools we’ve put together to encode spacing in a builder codepath. The second topic I’ll cover will be about how a builder codepath can specify…

3 years ago · 28 likes · 2 comments · Ryan Fleury

UI, Part 6: Rendering

The first post in this series talked about the flow of information between the user and implementer of an interface through a “machine”. In the case of software user interfaces, that machine is the hardware and software on a computer—a desktop computer, laptop, or game console…

3 years ago · 39 likes · 2 comments · Ryan Fleury

UI, Part 7: Where IMGUI Ends

In any application with a user interface, the user manages higher level entities that correspond with a single cohesive user interface design. For example, in your web browser, you directly manage tabs. Tabs are the entities that allow you to spawn and despawn instances of interfaces. You, as the user, will create tabs, and you’ll also close them. You c…

3 years ago · 21 likes · Ryan Fleury

UI, Part 8: State Mutation, Jank, and Hotkeys

In this series, I’ve written a number of times that a software user interface is, fundamentally, the barrier between a user and some computational system. It is what allows information flow between a human using a computer and the human who programmed that computer…

3 years ago · 17 likes · 2 comments · Ryan Fleury

UI, Part 9: Keyboard and Gamepad Navigation

If you’ve learned about operating systems, chances are you’ve heard the term “context switch”. It’s the name given to the operation done when an operating system scheduler stores state required for some thread to execute, prepares some state for another thread to execute, and resumes. It’s an implementation detail of how one CPU core might execute work …

2 years ago · 15 likes · 2 comments · Ryan Fleury

Bonus Posts

UI, Bonus 1: Simple Single-Line Text Input

It was a sunny afternoon. There I was: optimistic, and ready to take on the software world. I was encouraged by the vast number of from-scratch projects implemented without bloated, proprietary frameworks, by developers who weren’t afraid to understand the physical machine that they were working on…

3 years ago · 12 likes · 1 comment · Ryan Fleury

#nojs-banner { position: fixed; bottom: 0; left: 0; padding: 16px 16px 16px 32px; width: 100%; box-sizing: border-box; background: red; color: white; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 13px; line-height: 13px; } #nojs-banner a { color: inherit; text-decoration: underline; } This site requires JavaScript to run correctly. Please turn on JavaScript or unblock scripts