[HN Gopher] SRCL: Open-source React project to build web apps wi...
___________________________________________________________________
SRCL: Open-source React project to build web apps with terminal
aesthetics
Author : CharlesW
Score : 174 points
Date : 2025-01-19 06:28 UTC (2 days ago)
(HTM) web link (www.sacred.computer)
(TXT) w3m dump (www.sacred.computer)
| triyambakam wrote:
| 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 wrote:
| This is awesome.
| thih9 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| recursive wrote:
| Thanks for digging it up. Hm. Maybe my machine was under load
| at the time.
| jll29 wrote:
| 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 wrote:
| That is almost a spec right there, tie it into a JMAP server
| and you are done.
| gordinator_g wrote:
| Love the aesthetic, hate the fact that it's yet another
| JavaScript thing.
| voidUpdate wrote:
| You could just pull up an ascii/unicode chart and write it all
| out yourself :P (I intend on doing exactly this)
| jonjacky wrote:
| See also The Monospace Web: https://owickstrom.github.io/the-
| monospace-web/
| jonjacky wrote:
| In HN 4 months ago:
| https://news.ycombinator.com/item?id=41370020 152 comments, 612
| points.
| sitkack wrote:
| 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 wrote:
| 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(tm), even if your application is
| entirely React. Maybe splitting the CSS and the component logic?
| bitwize wrote:
| 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 wrote:
| 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 wrote:
| > 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 wrote:
| 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 wrote:
| 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 wrote:
| To give it more of BIOS UI feel it could use `[ ]` and `[x]` for
| checkboxes.
| pizzafeelsright wrote:
| Moving away from the CLI was a mistake.
|
| TUI was peak computing.
|
| Now "everything is a vector graphic"
| taskforcegemini wrote:
| >TUI was peak computing.
|
| it still is!
| giancarlostoro wrote:
| 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 wrote:
| Can we have an open-source React project to build terminal
| programs with web apps aesthetics instead?
| camtarn wrote:
| 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
___________________________________________________________________
(page generated 2025-01-21 23:02 UTC)