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.
My limited JS and React knowledge says that CSS is the right way to do most of that, or if that's not possible I think JS's requestAnimationFrame. React doesn't seem to be necessarily the issue here, though it may not be helping.
In React animations shouldn't run through reconciler, variables for JS animation should use `refs` which are mutable variables outside of React state. React supported `refs` for cases like this long before hooks were introduced.
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.
As I have written before, I like how a monospace, "typewritten", look gives a certain "straight from the lab" feel to the content. On the other hand, as you say, going to great lengths to imitate the effect of constraints which no longer apply is just silly. Maybe the "straight from the lab" look for the web is simply unstyled HTML. I always thought that was ugly without a good reason, because it can be styled to actually look good, but maybe the younger generations (who have not even seen a typewriter) think of it differently.
> Maybe the "straight from the lab" look for the web is simply unstyled HTML.
Indeed. Every time I see a white page with smol black text in the default style, it gives me flashbacks to university web pages, Kenton Lee's X11 resources and the like. I feel like I'm reading information, not design wankery, and certainly not ads or clickbait.
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.
- 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
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.
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.
It is indeed using javascript to do those parts, eg https://github.com/internet-development/www-sacred/blob/4454... .
My limited JS and React knowledge says that CSS is the right way to do most of that, or if that's not possible I think JS's requestAnimationFrame. React doesn't seem to be necessarily the issue here, though it may not be helping.
Thanks for digging it up. Hm. Maybe my machine was under load at the time.
In React animations shouldn't run through reconciler, variables for JS animation should use `refs` which are mutable variables outside of React state. React supported `refs` for cases like this long before hooks were introduced.
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?
That is almost a spec right there, tie it into a JMAP server and you are done.
[dead]
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.
As I have written before, I like how a monospace, "typewritten", look gives a certain "straight from the lab" feel to the content. On the other hand, as you say, going to great lengths to imitate the effect of constraints which no longer apply is just silly. Maybe the "straight from the lab" look for the web is simply unstyled HTML. I always thought that was ugly without a good reason, because it can be styled to actually look good, but maybe the younger generations (who have not even seen a typewriter) think of it differently.
> Maybe the "straight from the lab" look for the web is simply unstyled HTML.
Indeed. Every time I see a white page with smol black text in the default style, it gives me flashbacks to university web pages, Kenton Lee's X11 resources and the like. I feel like I'm reading information, not design wankery, and certainly not ads or clickbait.
reading their marketing page made it clear just what a huge boost this style is for readability etc
agree it's just a style/design, but one with a lot of value no one captures
and it's obvious why. where are all the ads and distracting nonsense?
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/
In HN 4 months ago: https://news.ycombinator.com/item?id=41370020 152 comments, 612 points.
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"
>TUI was peak computing.
it still is!
This is awesome.
Love the aesthetic, hate the fact that it's yet another JavaScript thing.
You could just pull up an ascii/unicode chart and write it all out yourself :P (I intend on doing exactly this)