←back to thread

WebTUI – A CSS Library That Brings the Beauty of Terminal UIs to the Browser

(webtui.ironclad.sh)
320 points IroncladDev | 6 comments | 12 Apr 25 22:02 UTC | HN request time: 0s | source | bottom
Show context
rollcat ◴[13 Apr 25 06:39 UTC] No.43670593[source]▶
I don't understand the obsession with 1980s terminals. They're even less powerful than the contemporary 8-bit home computers. It's perfectly OK to be a retro enthusiast, it's another thing to claim that this is the peak tech to power our modern CLIs, or a solid foundation for portable UIs.

From the docs:

    Stop thinking in standard CSS units like px, em, rem, %
    Start thinking in Character Cells for spacing, sizing, and positioning
A VT102 already has a character grid, but it needs a serial protocol to allow applications on the mainframe to talk to it. You can loop around this and use the raw mode to address individual cells.

The web browser has an insanely powerful typographic and layout engine. Now we're looping back into character cells. Something went wrong here, at least once.

That said, I like the aesthetic and the default color palette. It's quirky, but it has its places.

replies(13): >>43670672 #>>43670690 #>>43671003 #>>43671094 #>>43671420 #>>43671663 #>>43672234 #>>43673068 #>>43673112 #>>43674448 #>>43675035 #>>43676127 #>>43678300 #
godelski ◴[13 Apr 25 08:08 UTC] No.43671003[source]▶
The obsession is because it is still the best. For all its faults, I'm still terminally terminal. The beauty of it is in the utility and how it becomes so natural. It's a language you learn that gives you so much freedom you cannot find anywhere else. I've tried many IDEs but I'll always come back to vim. It might have taken time to learn but this is true for anything else. I didn't learn a tool, I learned a language. I didn't learn to run, I learned how to move my legs. With that I could teach myself, I can walk, I can run, I can jump, I can dance, I can be anything I want to be. In VSCode I can walk, hell I might even be able to run, but there is no dance, there is no "me".

That's the beauty of the terminal. It's not a one size tool for all. There is no product that can be made for everyone. Instead it's an environment for you to craft and live in. Everyone's dotfiles are as unique as they themselves are. That's the point. Because when you can't build something for everybody you give them the means to craft their own worlds. The computer didn't become so great because the chips, it was the ability to write software and build the things you need. The smartphone didn't take off because it had a big screen, it did because the app. Because you could create. Because your phone is yours and no other phone is like it.

But I haven't found a browser that lets me be me. That let's me dance around the web and jump and be free. And I fear we lost sight of this thing as it became so natural, that the phone and computer are turning into things that be instead of a reflection of me

replies(4): >>43671051 #>>43671236 #>>43672097 #>>43672734 #
rollcat ◴[13 Apr 25 08:58 UTC] No.43671236[source]▶
> I've tried many IDEs but I'll always come back to vim.

Vim and Emacs both have GUIs. As an Emacs user, I subjectively find the GUI superior - I can e.g. rebind Cmd-S to "save", and that's a reason enough.

> It's a language you learn [...]

You mean the serial lines and ANSI escape codes and termcap? I would say it's more like pidgin with a dozen obscure dialects, and a body language on top. Try writing a portable TUI application from scratch, without touching curses or termbox. <https://viewsourcecode.org/snaptoken/kilo/>

Or do you mean, how to drive a TUI application from the keyboard? Here's the painful truth: you can't quit a TUI application without learning it. In vi, it's "Esc-q!-Enter", in Emacs it's "C-x C-c", in screen it's "C-a C-\", in tmux it's "C-a C-d", and so on. Maybe pressing "q" or F10 or C-d will work, but good luck guessing. This is just to quit, and ironically - it's only the start.

By contrast, on macOS it's Cmd-Q; on Windows, it's Alt-F4; and so on. Innovation happens on stable foundations, not by pulling rugs.

> It's not a one size tool for all. There is no product that can be made for everyone. [...] Everyone's dotfiles are as unique as they themselves are.

You know non-TUI applications are also customisable? I have Hammerspoon scripts, a dozen custom keybindings in macOS, .xsession+.Xdefaults+.Xresources, .gitconfig (I use git via Emacs+Magit), various .config/*'s (for e.g. sway), .emacs (bankrupted several times), and so on - none of these are TUI applications.

Or do you mean the command line? I believe we can build a better REPL than a terminal emulator. Emacs is a decent PoC, you can also have a look at Swift Playgrounds. Maybe we can build a generic non-terminal REPL where Ctrl-C means "copy", and Ctrl-V means "paste", that would be a great start.

Don't get me wrong, I'm happy if you're happy, I just don't understand the collective obsession. These tools exist, which is great, but we deserve better.

replies(4): >>43671405 #>>43674978 #>>43675314 #>>43678539 #
geocar ◴[14 Apr 25 06:17 UTC] No.43678539[source]▶
> Here's the painful truth: you can't quit a TUI application without learning it

So what? I'm not so sure you can learn Photoshop without either watching someone use it or reading a few books on it, whilst emacs maintains an excellent tutorial that it tells you to read multiple times when you start it.

In the 1990s and early 2000s I volunteered at a senior center teaching people how to move the mouse and translate that movement into the little arrow-cursors' movement, and the experience convinced me absolutely nothing about computer-use is intuitive or obvious to anyone who did not grow up using it.

I urge you not to stick with a worse-user-experience just because you already "know" it. If you think GUIs are better, that's one thing, but this cannot possibly be the reason.

> Try writing a portable TUI application from scratch, without touching curses or termbox

Try writing a portable X11 application from scratch, without touching libX11 or libxcb.

Try writing a portable Win32 application from scratch, without user32.dll

None of this is fun, but the TUI application is less code, and it's not even close.

> As an Emacs user, I subjectively find the GUI superior - I can e.g. rebind Cmd-S to "save", and that's a reason enough.

The mac Terminal isn't great for a few reasons, but iTerm and kitty absolutely let you do this if you teach Emacs to decode the sequences.

https://github.com/benotn/kkp

I find this a much better experience than using tramp to tunnel remote servers.

> non-terminal REPL where Ctrl-C means "copy", and Ctrl-V means "paste", that would be a great start

You can have this today (see above), but I much prefer ^C being cancel/interrupt/compile, and ^V being make-visible. I avoid copy and paste because it doesn't fit in my workflow very well:

> You know non-TUI applications are also customisable? I have Hammerspoon scripts, ... I just don't understand...

I don't want hotkeys, I want automation.

In a terminal I just run the regular application (like emacs) under autoexpect. I then edit the resulting script, and run it and now I have a new application that does something useful to me. Eventually I add it to an application I wrote which just runs all of my scripts in a big loop.

I run one gui application (chrome), and then use vncsnapshot to dump images that I print out over the kitty image protocol. I then have a perl script forward the keyboard and mouse metrics into qemu via vnc. It works well enough for autoexpect, but it's a lot of work for one application.

Then, I go to the beach while my computer is doing stuff people pay for.

replies(2): >>43678924 #>>43715797 #
1. rollcat ◴[14 Apr 25 07:29 UTC] No.43678924[source]▶
> I'm not so sure you can learn Photoshop [...]

I'm not talking about learning Photoshop, I'm talking about quitting Photoshop. On a Mac, the "close" button is in the upper left corner of the window, and has been there since 1984. Dock icons only appeared in NeXTStep, which OS X inherited ca 2000. But the list goes on.

> Try writing a portable [...] application from scratch.

That's not my point at all. The terminal emulator creates a window for you, and puts pixels in it. The TUI application then talks to that emulator over a serial line, as if they were running on separate machines. Why not let the application paint the pixels directly?

> The mac Terminal isn't great for a few reasons, but iTerm and kitty absolutely let you do this if you teach Emacs to decode the sequences.

These extensions are non-portable, and require specific integrations on the part of each and every TUI application. For example, kkp is 800 lines of Lisp. Also, termcap is hell, and comes to bite you as soon as you spell "ssh".

> I avoid copy and paste because it doesn't fit in my workflow very well [...] Then, I go to the beach while my computer is doing stuff people pay for.

That's a lot of effort and dedication on your part, and I respect that. But let's be honest, what you're doing is a narrow specialisation - and that is what you're being paid for. I'm talking about applications copying and pasting text, displaying an icon in the dock, or having consistent key shortcuts - out of the box, consistently, no glue, no side channels to cheat the serial line.

replies(1): >>43680634 #
2. geocar ◴[14 Apr 25 12:37 UTC] No.43680634[source]▶
> But let's be honest, what you're doing is a narrow specialisation - and that is what you're being paid for

That's your unfounded opinion man. You have no idea what I'm doing.

There's only two reasons to use a computer: One is because it is an entertaining way to spend your time and money, the other is because it's a way to make money.

> Why not let the application paint the pixels directly?

Partly because they do it badly, and partly because it's harder for other applications to read the pixels.

Think about how the clipboard has to work: The application just told the display to write some text there, but the clipboard has to ask again what text is there, wait for a response, and let the other program know. Meanwhile the terminal just knows, so it's faster.

> I'm not talking about learning Photoshop, I'm talking about quitting Photoshop. On a Mac, the "close" button is in the upper left corner of the window

And you learned that somehow. You can learn other things too.

> These extensions are non-portable

So what? They're portable to every terminal I use, every new terminal being made, and if you want, any terminal you use. The Mac isn't portable to anything except another mac.

replies(1): >>43690356 #
3. rollcat ◴[15 Apr 25 08:33 UTC] No.43690356[source]▶
> Partly because they do it badly, and partly because it's harder for other applications to read the pixels.

I can select text in a web browser or a spreadsheet or a chat app just fine.

> The application just told the display to write some text there, but the clipboard has to ask again what text is there, wait for a response, and let the other program know. Meanwhile the terminal just knows, so it's faster.

How does a terminal emulator render text on the screen then? Your screen is made of pixels.

> And you learned that somehow. You can learn other things too.

You're missing my point entirely, but you seem to enjoy taking an hour to open every new door. I won't judge that.

replies(1): >>43697016 #
4. godelski ◴[15 Apr 25 18:58 UTC] No.43697016{3}[source]▶

  > You're missing my point entirely
The reason you're having a hard time communicating is because, honestly, you do not understand how these things work. You've made assumptions about how they work but be honest with yourself, could you code them up yourself? I don't mean gluing some libraries together, I mean straight up in C. I'm pretty sure the person you're responding to would say they couldn't (I sure couldn't!). Not because lack of experience in C but because they have a better understanding in all the details that goes into these things.

  > How does a terminal emulator render text on the screen then? Your screen is made of pixels.
This alone says a lot, even if you don't know it. Do you know how pixels are painted on a screen? I know you got this thought in your head like "duh, you just give each one an RGB value". Great! But how do you determine what pixel gets what values? How do you define a letter? It is not just as easy as making a predefined box where you have constructed the letter inside. Look up ligatures. Now how do you do colors? How do you define different fonts? How do you scale? How do you scale without turning your text into a bunch of giant pixelated crap? Do me a favor, increase the font size on your terminal and keep going to a really ridiculous size. Then do the reverse, make it ridiculously small. Everything still should look sharp. You can't do that by having a predefined box that says where to shade and not shade without aliasing. It wouldn't look sharp when big nor small because even going small the interpolation methods are still going to introduce aliasing. To go big you either need a fucking gigantic image for each letter or something different.

You're not going to be able to communicate effectively because you're actively demonstrating to people that you think you know more about how these things work than you actually do. I get it. The modern way people learn CS and programming is so high level and there's this bad culture of being know-it-alls, as if there is some shame in not knowing how things work. Shit's complex. Stop pretending like it isn't. There's a huge difference in thinking "there's a lot of complexity here, I need to approximate and just get going" vs "shits easy". If you take the latter you'll never build anything of quality because the truth is that there's massive amounts of complexity even in the most mundane things. If you gain a deep expertise in any single one thing this truth will be self-evident. So thing is, by thinking things are easy you're more telling on yourself that you have no depth. It's fine to be a generalist, but a generalist can't be effective if they think depth doesn't exist. You might as well try walking in the middle of the ocean, because I mean, hey, you were able to walk around on the shore of the beach, why would it be any different?

replies(2): >>43703748 #>>43715862 #
5. rollcat ◴[16 Apr 25 10:50 UTC] No.43703748{4}[source]▶
You're assuming I'm ignorant.

I would also assume so. It's the only way not to be.

6. queenkjuul ◴[17 Apr 25 12:33 UTC] No.43715862{4}[source]▶
There certainly is a bad culture of being know it alls, that much is very apparent