Glow; Color; List

We’ve got three resources in today’s Drop, each named with a single word, that will help you build beautiful creations.

Glow

There’s a new, lightweight syntax highlighter in town: Glow (GH | docs). It’s technically part of the Nue web framework, but can function independently, and we’re going to focus on that independent nature of is framework component.

The Nue folks call Glow a microscale framework, especially when compared to the size of other highlighting libraries (Glue is 5K). Their Shiki comparison was pretty wild (this is their graphic):

Aesthetics are housed in just a handful of CSS variables and, unlike Shiki, Highlight.JS, or Prism, there aren’t a bazillion giant config files to deal with.

The code defines a series of regular expressions and rules that are common across many programming languages, such as keywords, strings, numbers, and comments. This approach enables it to cover the basic syntax highlighting needs of a wide array of languages without needing specific configuration files for each one.

The HTML_TAGS array and related functions (getTags, getMDTags) dynamically adjust the highlighting rules based on the language being processed. This is done by filtering the rules applicable to the given language and applying them accordingly. This flexibility means that adding support for a new language can be as simple as adding its unique syntax rules to the existing framework. And, the parseRow and renderRow functions work in combination to parse each line of code and apply the appropriate highlighting based on the matched patterns.

It’s a pretty clever approach!

I tossed together a 60-line vanilla JS example (ref: section header graphic) that shows how to define some custom variables, read in a source file, and shove it in a <pre> block. The entire vanilla JS part is 4 lines (minus whitespace and comments):

// get glow from CDN
import { glow } from 'https://cdn.jsdelivr.net/npm/nue-glow@0.1.1/+esm'

// get a source file
const res = await fetch(`https://rud.is/data/generate-random-planets.R`)
const rcode = await res.text()

// render it into an HTML element
document.getElementById("src").innerHTML = glow(rcode, { language: 'r', numbered: true })

The documentation is good, but is somewhat Nue-centric, and we won’t be covering Nue until later this year. But, kick the tyres and see if the minimalist approach in Glow works well-enough to shave some bandwidth off your pages.

Color

This past week we had our sixth annual (virtual) Community Open Forum at work where I was slated to give a talk on our second annual report on internet mass exploitation. Rather than drone on and on with boring stats and facts I ended up turning it into a Jeopardy game (which also ended up slightly embarrassing my friend, who is also the company founder). I wanted to have the charts (yes, we still went over the details of the report) match the Jeopardy theme (ref: section header) and used that as an excuse to do another survey the landscape of “make a palette from an image” tools.

To my shock and surprise, the Extractor tool from Adobe Color was joy to use (as well as being free to use).

The theme extractor:

lets you define color points and cycle through “moods” (i.e., cycle through the look of the harmonized palette based on the amount of black and the intensity in the colors).

The gradient extractor:

lets you define the number of stops, then select the color points for them.

And, the tool lets you check the contrast ratio of your choices to help ensure folks can actually see your work.

It loads fast, and works well in incognito mode, but if you do have an Adobe account, you can save your work in your library.

List

List.js (GH) by Jonny Strömberg is a small, delightfully simple library that supercharges HTML tables, lists, and various other elements with search, sort, and filter functionalities. It’s designed to be unobtrusive, seamlessly enhancing existing HTML without the need for extensive modifications or dependencies. This makes List.js an incredibly versatile tool for folks looking to add a layer of interactivity and functionality to web creations without the overhead of heavier frameworks or libraries.

I could drone on, but the site has tons of examples, and I whipped another one up that shows how to use it as an ES6 module in a vanilla JS context. The example has a before/after view, as well, to help you see the differences (and, how little it takes to add some style and functionality).

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️