Drop #225 (2023-03-22): Multi-threaded Edition v0.2.0

Back To [Modern Web] Basics; React: Don't Do It; Checking in on WezTerm

Ref this Drop for "Why 'Multi-threaded?'"

I’m developing a special affinity towards these hodgepodge editions, as I am oft concerned that always focusing on a single “theme” might make a given Drop fairly useless for some readers. So, today, we once again break free from the chains of uniformity and cover three different recent discoveries (well, two of them are kinda related) that felt share-worthy.

Back To [Modern Web] Basics

Photo by Element5 Digital on Unsplash

I find “complexity” anathema. I'm pretty sure most of us do.

But, when you daftly choose a career path in cybersecurity, you soon develop an especially intense vitriol-laden attitude towards it. This is due to “complexity” being one of the biggest reasons for cybersecurity failures.

Complex systems fail in unexpected ways. Some of these failure modes result in just broken processes, but others (more often, these days) result in far worse outcomes.

The “modern” web — focusing on the creation side for this section — has grown immensely complex.

Gone are the days of a simple index.html with tags in <ALL> <CAPS>1, with some basic CSS, and lightweight javascript. Now, we have SASS compilers, massive npm projects, and Gordian knotted frameworks that kind of make my head spin.

But, are those golden days truly gone?

As some have likely observed, WebR has re-kindled the desire to create some web things. And, coming along for the ride with this spark, is the desire to keep things as simple and dependency free as possible.

There was a time when you literally had to deal with tool-dependent compiled/bundled/assembled javascript-centric projects² because javascript and CSS just didn't have the chops to support things like modular namespace encapsulation (js) and variables (css).

Modern browsers do have rich support for the latest evolutions of javascript and CSS, and the folks over at Modern Web (GH) are here to help us embrace the simplicity and elegance of this highly capable environment.

Their goal is to “provide developers with the guides and tools they need to build for the modern web”. Modern browsers are a powerful platform for building websites and applications, and the Modern Web folks try to work with what's available in the browser first before reaching for custom solutions. This posit from them really resonated with me:

When you're working with the browser rather than against it, code, skills, and knowledge remain relevant for a longer time. Development becomes faster and debugging is easier because there are fewer layers of abstractions involved.

For me, at least, reduced complexity == web development is fun again.

My Spidey-sense intuits that most current subscribers are, like myself, involved in some daily work that is not centered on web development. Yet, there is some inevitability to the need to touch or at least read HTML, javascript, and CSS at some point.

With that in mind, rather than leave you to meander through the Mondern Web's site, let's issue a reset command³ command; then point you to three content pieces of theirs which that may give you (as it did me) a fresh take on what power lies in modern web standards.

First up is “Serving” which explains the “fundamental relationship at the heart of the web” which is the relationship between the server and the client or browser. I suspect most readers know everything in that section, but it is concise, and something you might want to bookmark to help bootstrap others who are just learning.

The “CSS” section does not aim to teach all there is to know about “Cascading Style Sheets”. But, it does a phenom job at highlighting some modern CSS techniques and workflows — such as “CSS Custom Properties” and “Style Encapsulation” made possible by web standards. This was one of the best 'splainers I've come across in this area, and their explanation of the CSS implications of the scary sounding “shadow DOM” was :chefs-kiss:.

For me, the best of these three basics was their coverage of “ES Modules”. They address a great deal in this part:

• Loading modules

• File extensions

• Import paths

• Referencing Reusable Assets with CommonJS modules

Even if you don't have a pressing need to develop, becoming familiar with what's available in modern web standards will at least be able to help you read and grok modern HTML, CSS and javascript, which is a skill that you never know might come in handy.

React: Don't Do It

Photo by Mike U on Unsplash

I waxed a bit long and un-poetic in the first section, so well try to keep this one brief; perhaps, covering it in more depth in a single “Knowledge Drop”⁴.

Reef (GH) is a tiny javascript utility library for building “reactive state-based UI”.

Both React and Vue cause considerable cognitive load for me due to the size and scope of their frameworks (and b/c I don't “live” in that world 9-5).

Reef is a simpler alternative to those giants and has no build steps or fancy syntax. Just 100% pure “vanilla” JS and a few small utility functions.

React, Vue, and Reef all take advantage of javascript Proxy objects. These proxies let you create an object wrapper that can be used in place of the original object. With them, you can redefine fundamental javascript object operations like getting, setting, and defining properties. Proxy objects are commonly used to log property accesses, validate, format, or sanitize inputs, and so on.

While Reef can do much more than the following, but this alone is pretty cool:

In js:

# a Proxy wrapped (by Reef) value
let message = store({ text: null })

# code that Reef will execute when the value changes
function showMessage() {
  const { text } = message;
  return (text === null) ?  "" : `<pre>${text}</pre>`
}

# associating the updater function with an HTML tag from the DOM
component('#message', showMessage);

In html:

<div id="message"></div>

Now, whenever you do message.text = "some important note", that <div> will get updated with the contents of the return value of showMessage(). The updates are also intelligent in that Reef “diffs” the DOM and only updates elements that are different. Say, only one `<li>` in a massive `<ul>` (never do that) changes as a result of some operation your app performs. Reef will only update that element in the active DOM, which will speed up re-rendering.

It has loads more features, but we'll save that for another time⁵.

Checking in on WezTerm

Well, two attempts at brevity have failed. Perhaps, the third try will be charmed.

I'm still devoted to WezTerm, and a recent update was packed with new features. One of my favs is a handy new level-up to the CLI utility that ships with the terminal.

The get-text wezterm command retrieves the textual content of a pane and output it to stdout. That means you have full, simple programmatic access to the main portion and scroll buffer of any WezTerm pane.

(I'm ripping this right from the release notes.)

Doing:

$ wezterm cli get-text > /tmp/myscreen.txt

will capture the main (non-scrollback, in this case) portion of the current pane to /tmp/myscreen.txt.

By default, just the raw text is captured without any color or styling escape sequences. You may pass --escapes to include those:

$ wezterm cli get-text --escapes > /tmp/myscreen-with-colors.txt

The default capture region is the main terminal screen, not including the scrollback. You may use the --start-line and --end-line parameters to set the range. Both of these accept integer values, where 0 refers to the top of the non-scrollback screen area, and negative numbers index backwards into the scrollback.

The --pane-id <PANE_ID> parameter will let you pick a given pane.

FIN

Taking to heart the theme of yesterday's Drop, I might need to find or write a compression utility that can shave a few bytes off of these larger Drops. ☮

1. A terrible idiom that hearkened back to the old school XML roots of HTML.

2. And, these are still 100% appropriate for “big” applications.

3. Which ties in nicely to the last section.

4. Especially since it's been six months since my first one of those O_o.

5. This is a small example of Reef, but the WebR parts may be confusing for some folks:

#reef #react #vue #html #css #javascript #esmodules #webr #wezterm