3 ms·

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

183 points by CharlesW 2y ago

triyambakam 2y ago
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
drowntoge 2y ago
This is awesome.
thih9 2y ago
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.
recursive 2y ago
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.
- sesm 2y ago
  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.
- kadoban 2y ago
  It is indeed using javascript to do those parts, eg https://github.com/internet-development/www-sacred/blob/4454ed1fae0b4b536bbd0636b8a78858268d748a/components/BlockLoader.tsx#L38 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.
  - recursive 2y ago
    Thanks for digging it up. Hm. Maybe my machine was under load at the time.
jll29 2y ago
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?
- sitkack 2y ago
  That is almost a spec right there, tie it into a JMAP server and you are done.
  - rizky05 2y ago
    [dead]
gordinator_g 2y ago
Love the aesthetic, hate the fact that it's yet another JavaScript thing.
- voidUpdate 2y ago
  You could just pull up an ascii/unicode chart and write it all out yourself :P (I intend on doing exactly this)
jonjacky 2y ago
See also The Monospace Web: https://owickstrom.github.io/the-monospace-web/ https://owickstrom.github.io/the-monospace-web/
- jonjacky 2y ago
  In HN 4 months ago: https://news.ycombinator.com/item?id=41370020 https://news.ycombinator.com/item?id=41370020 152 comments, 612 points.
sitkack 2y ago
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.
endigma 2y ago
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?
bitwize 2y ago
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.
- Pinus 2y ago
  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.
  - bitwize 2y ago
    > 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.
- thejazzman 2y ago
  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?
bosky101 2y ago
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.
sesm 2y ago
To give it more of BIOS UI feel it could use `[ ]` and `[x]` for checkboxes.
pizzafeelsright 2y ago
Moving away from the CLI was a mistake. TUI was peak computing. Now "everything is a vector graphic"
- taskforcegemini 2y ago
  >TUI was peak computing. it still is!
giancarlostoro 2y ago
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.
iLoveOncall 2y ago
Can we have an open-source React project to build terminal programs with web apps aesthetics instead?
camtarn 2y ago
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

183 points by CharlesW 2y ago

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

drowntoge 2y ago

This is awesome.

thih9 2y ago

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.

recursive 2y ago

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.

sesm 2y ago
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.
kadoban 2y ago
It is indeed using javascript to do those parts, eg https://github.com/internet-development/www-sacred/blob/4454ed1fae0b4b536bbd0636b8a78858268d748a/components/BlockLoader.tsx#L38 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.
- recursive 2y ago
  Thanks for digging it up. Hm. Maybe my machine was under load at the time.

jll29 2y ago

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?

sitkack 2y ago
That is almost a spec right there, tie it into a JMAP server and you are done.
- rizky05 2y ago
  [dead]

gordinator_g 2y ago

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

voidUpdate 2y ago
You could just pull up an ascii/unicode chart and write it all out yourself :P (I intend on doing exactly this)

jonjacky 2y ago

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

jonjacky 2y ago
In HN 4 months ago: https://news.ycombinator.com/item?id=41370020 https://news.ycombinator.com/item?id=41370020 152 comments, 612 points.

sitkack 2y ago

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.

endigma 2y ago

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?

bitwize 2y ago

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.

Pinus 2y ago
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.
- bitwize 2y ago
  > 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.
thejazzman 2y ago
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?

bosky101 2y ago

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.

sesm 2y ago

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

pizzafeelsright 2y ago

Moving away from the CLI was a mistake. TUI was peak computing. Now "everything is a vector graphic"

taskforcegemini 2y ago
>TUI was peak computing. it still is!

giancarlostoro 2y ago

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.

iLoveOncall 2y ago

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

camtarn 2y ago

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