LOTW VS Ink

I see this directory: https://github.com/linuxontheweb/LOTW/tree/main/root/code/ap...

how do I play any games on your "https://linuxontheweb.github.io/" demo?

So, this is about popups inside of browser windows, is it? And not about popups in Windows/Mac/Linux desktops? Because I couldn't start making up my mind until close to the end of the article.

FWIW, I do make some use of modals in Linux on the Web (source code, admittedly somewhat sloppy: https://github.com/linuxontheweb/LOTW/blob/main/root/code/mo...). In fact, I just tried to make a post about a new app I'm working on (that happens to use them) called "HackerNotify": https://news.ycombinator.com/item?id=32358782

I think I'll take this opportunity to introduce "HackerNotify" (https://lotw.site/net/HackerNotify.app), which is a different kind of interface into the Hacker News backend (via firebase).

You can tell how many total comments a story has by the color of its title. The ranking from low to high is: dark blue -> light blue -> aqua -> green -> yellow -> orange -> red.

It has a keyboard-centric interface. Here is the breakdown:

'Space' toggles an item's open/closed state.

'Tab' is used to move between items in a list. If an item is in the open state, pressing tab will focus the first item in its list. Otherwise, it will focus the next item in the list that the item is a member of. This is really the "go to" key in the app. If ever in doubt, just hit 'tab'.

'Enter' is for opening the link (in a new window) to which a "story" item refers. (You can also click the link to open it.)

'c' is for popping open a comment window to respond to whichever item is in focus.

'n' is for setting a "notice" to periodically poll the backend for new replies to a given item (story or comment). The current polling period is one minute.

'/' is for cycling between the 3 screens of the app (Top stories, Watched stories and Notifications).

'1' is to jump to the "Top stories" screen. (All story titles that start out as "Launch HN:" are filtered out of the listing.)

'2' is to jump to the "Watched stories" screen. "Watched stories" is the screen that will hold the top level story items that contain notification items that are no longer embedded in the DOM of the "Top stories" screen.

'3' is to jump to the "Notifications" screen.

'x' is to delete a given notification. The app currently allows for 5 notifications to be set at any given time.

'r' is used to refresh a given item to sync it with the firebase backend.

'Esc' allows you to "escape out" of embedded items. This key also automatically closes items.

'Ctrl+Esc' allows you to immediately escape out to the top level listing, closing all embedded comments along the way.

Finally, since there may still be a bug or two in the app's logic, 'Alt+l' is the "hard reset" shortcut that forcefully closes and blurs every item on every screen. If you need to invoke this shortcut, just pressing 'Tab' again should get you back on your feet.

The link I provided above allows you to open up a Linux on the Web app in the experimental "app mode". If you want to play around with it in its native environment, though, you will need to need to see the LOTW README: https://github.com/linuxontheweb/LOTW#applications

Now, take a look at the following file in my github repo: https://github.com/linuxontheweb/LOTW/blob/main/www/img/screenshot.png

Yeah, I don't personally mess with anything but Chrome, and I consider supporting browsers that are not Chromium-based to be a fork of the entire project.

Per the Disclaimer in the Github README (https://github.com/linuxontheweb/LOTW/):

---------------

LOTW is developed in the crouton environment, which involves ChromeOS in developer mode. All development and testing is currently done on a Chromebook, using an up-to-date Chrome browser.

The system should basically work in any modern browser and host OS, but there are likely many tiny glitches that degrade the user experience in other browsers and/or operating systems.

---------------

The crucial fact of LOTW is that it is based around the concept of a full-featured, sandboxed file system in your browser. Only Chromium-based browsers natively support that kind of thing via 'webkitRequestFileSystem'.

That being said, there is a shim/polyfill that is supposed to load and take care of that (https://github.com/linuxontheweb/LOTW/blob/main/www/js/fs-sh..., created by Eric Bidelman when he was at Google). Last I knew, Firefox seemed to work with it.

I found it funny that he put out this tweet in which he said, "Some people are no nonsense, but, personally, I like a little nonsense" (), only like a day after I started posting here to try to generate excitement for my site (see my username).

Now, take a look at the following file in my github repo:

That image is prominently displayed on the main README of the repo, and as you can tell, it was committed before Elon made his comment. (Also, there are some forks and stars in the repo now, whereas before I started posting here, there were none, so I know at least some people have been appreciating my work.)

You should be able to plainly see that there is "a little nonsense" in that image! I'm just wondering if you all think that is a coincidence or not...

One reason I started working on "Linux on the Web" is that I wanted to work within a paradigm (web development) that has strong connections with current practices but that also can allow me to iterate in directions that are more related to the nuts and bolts of our shared physical reality.

One thing that nobody ever talks about are the more hardware-centric possibilities of the web platform such as WebUSB, but I would absolutely love to start playing around with it in order to allow for an interface of real world objects with the LOTW system -> https://github.com/linuxontheweb/LOTW

I've always wanted to build a CLI tool, and when I realized that you can build one using React with Ink, I converted my Python script into a CLI tool.

⚠️ Git for Windows Terminal is currently not supported, and the tool is limited to ink. We will look for alternatives later. Please use CMD, Vscode terminal's Git... terminal

There is a good solution for some of those cases - ink. With ink, I can implement text-based UI with knowledge of React, which is neat but there are still some caveats for my usages:

Looks cool, right? Building a similar UI in the terminal without any library would be quite hard, though, thanks to Ink it's almost as easy as building any frontend UI with React.

ink?

I'm writing a CLI with ink. Writing async code is important as to not block the rendering and respond to user input. I have a few loading animations that update every 100ms. Synchronous operations can make the animation hang for >500ms, making the animation choppy.

You get the comfort of using react components instead of fighting with HTML tables to make your emails look nice. I think it's awesome! It's analog to what ink[0] does with CLI outputs. Sure, you could write fancy CLI outputs in bash, but ink takes the pain out of it and makes it easy.

[0] https://github.com/vadimdemedes/ink

Due to Node's asynchronous behavior, it makes Node great for long-running processes that make a lot of HTTP requests, database calls, and other async ops, like a web server or a REST API. However, if I am making a CLI tool for pretty much personal use only, with very minimal async operations, then blocking the event loop with a synchronous function that will resolve almost immediately will make no difference perceivable to a human brain or have any speed benefits that someone can actually observe (think `fs.readFileSync` or `require('dotenv') of 10 line config file, or a quick embedded db (sqlite) query with only ~100 records. I'm wondering what the best way to implement the database part of the app synchronous. I can read/write to JSON files but it would be tricky because the data is relational, and some complex joins and other data wrangling operations are required (complex to perform in JS but are easy to implement in a SQL statement). It's not important what the operations are, that's not the point of this post. This is mostly a personal project of interest: making this CLI tool completely avoiding any async operations/using no promises. I would like to use node tho, as I said this is just out of interest and I also want to experiment with several CLI libraries such as Ink or Cliffy.