SRCL: Open-source React project to build web apps with terminal aesthetics

The loaders should be able to animate with buttery smoothness. On this 5-year-old laptop running firefox on windows, the loader animations are prone to stuttering jank. Perhaps this is just the nature of running an animation through a react reconciler, but also these loaders should be able to go around react without invoking a render function or reconciler.

Thanks for posting this, I like it very much.

Furthermore, I would like to see a simple email client written using it, which can be controlled using only the keyboard (on mobile devices) or with the mouse (when at home). This seems possible as you have integrated some hotkey event management already.

• Login (receive password and then connect to remote account via IMAP)

• Inbox view (default) (up/down/PgUp/PgDown)

• Write an email ("W" or "N"ew email or "M"ail)

• Contacts ("C" or "A"ddress book)

• Search ("S" or "F"ind)

• Logout ("Q"uit or e"X"it)

(What I'm after is to re-create the BlackBerry e-mail experience.)

I wonder how much effort this would be, and if I outsourced it, how much that would cost?

You should make it draw from a palette of colors, like an actual terminal does, and easy to customize. Base16 would likely be enough given the web has opacity and a bunch of other ways to slightly modify colors. I'd also like to see how much of this doesn't need to be React™, even if your application is entirely React. Maybe splitting the CSS and the component logic?

This is the terminal equivalent of one of those games that go for "pixel art aesthetics", but as soon as something scales or rotates it's clear everything is a billboard texture being blitted to a high-res surface and the pixels are just rectangles that look low-res. Terminal apps aren't an aesthetic, they are intended to provide as clear an affordance as possible within a certain set of constraints. In React web apps, those constraints are not there, so why should the aesthetics be? A React component that reintroduced those constraints, for example representing the screen as a grid of characters+attributes and rendering those to the DOM, might be interesting, but this is just copping a "look" to show your friends on r/itsaunixsystem and I'm not sure what the practical appeal is.

The AS/400 bit is neat, though. Very reminiscent of ISPF, the equivalent interface on System/360 and System/370 mainframe systems. Those UIs evoke everything we Gen-Xers and younger associate with the boring, awful dinosaur days of computing but... with a bit of training, data entry clerks, customer service reps, cashiers and the like could become very efficient with them.

Love it, though the shortcut choices clash with browser shortcuts, like CTRL + T opens a new tab, CTRL + G shows the grid but opens what I would expect when I hit CTRL + F (idk why). CTRL + O opens a file dialog (??? this makes no sense Chrome!) but you can click on those shortcuts and interact that way, so there is that.

Lol, as someone who hates fighting with css and html, this is how I would make my web apps, everything rendered inside of a <pre> tag.

I like it!

Demo bugs:

- Clicking on the header of the static data table brings up an alert box saying 'testing'

- Clicking Render Modal Matrix Modes brings up a modal that's too tall to see the close button (Chrome, Win11, screen res 1920x1200, display scale 125%, viewport 1536 x 826)

Toolkit bugs:

- If a modal is active, the background should be dimmed. This is implemented for other modals (opening one modal on top of another will blur the bottom modal attractively) but not for the base page

- Clicking outside a modal should probably dismiss it by default, although this does need to be able to be disabled

Looks great, congrats! Feature request: keep all letters in the monospaced grid; do this across styles (so: the letters in headlines and the letters in the body text, or badges, they all should be aligned) and when animating.

I really like the idea and aesthetic but my totally superficial evaluation is that it really misses on making actions distinct. The terminal doesn't have a lot of these functionalities so it feels too heavy handed and confusing to the user as to what should be a clickable button etc

To give it more of BIOS UI feel it could use `[ ]` and `[x]` for checkboxes.

Nice work! Definitely going to use it at a hackathon. There are css frameworks that do this, but this really went super deep with keyboard and interaction and components.

See also The Monospace Web: https://owickstrom.github.io/the-monospace-web/

Can we have an open-source React project to build terminal programs with web apps aesthetics instead?

Moving away from the CLI was a mistake.

TUI was peak computing.

Now "everything is a vector graphic"

This is awesome.

Love the aesthetic, hate the fact that it's yet another JavaScript thing.