Forem: lionel-rowe

NodeJS `Buffer` is cool

lionel-rowe — Thu, 16 Mar 2023 03:03:17 +0000

function displayBufferContents(buf) {
    const byteString = Array.from(new Uint8Array(buf.buffer), (byte) =>
        String.fromCharCode(byte),
    ).join('')

    return byteString.replaceAll(/\u0000+/g, (m) => `{...${m.length}}`)
}

const secretKeyBuffer = Buffer.from('SECRET KEY PLEASE DO NOT STEAL')

displayBufferContents(Buffer.from('arbitrary text'))
// /{...7}/{...7}SECRET KEY PLEASE DO NOT STEAL{...2}arbitrary text{...8130}

cool

Credit to @paulmillr on GitHub:

For the record, there are 800+ public code cases on GH that use Buffer.from(privateKey). Imagine how private repositories look like and what other secrets are stored there (symmetric keys, etc)

https://github.com/search?q=Buffer.from%28privateKey&type=code

Easily and safely escape HTML in one line

lionel-rowe — Thu, 14 Apr 2022 02:37:40 +0000

x => Object.assign(document.createElement('div'), { textContent: x }).innerHTML

True, you could also do it with

x => x.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;")

or similar, but if you do it the first way you don't have to remember the HTML entities 🙂

How to create a null-filled array without [], comma, or the word “Array”

lionel-rowe — Wed, 05 Jan 2022 07:45:22 +0000

const praiseBeToCthulhu = (len) => {
    const obj = { a: '"' }
    obj.b = ''

    const codepoints = JSON.stringify(obj).split('')
        .map(ch => ch.codePointAt())

    const grab = (n) => codepoints.slice(n).shift()

    const x = grab(6)
    const y = grab(9)

    let s = String.fromCharCode(x - 1)

    for (let i = 0; i < len; ++i) {
        s += Object.getPrototypeOf(
            Object.getPrototypeOf(
                Object.getPrototypeOf(
                    Object
                )
            )
        )
        s += String.fromCharCode(y)
    }

    if (s.length > 1) {
        const z = s.split('')
        z.pop()

        s = z.join('')
    }

    s += String.fromCharCode(x + 1)

    return JSON.parse(s)
}

OK, there are definitely more concise ways, but hey, maybe you're getting paid by the number of lines of code you write.

Thank-you for coming to my TED talk. 🙇‍♀️

`Proxy` all of the things! Part 1: Counters

lionel-rowe — Thu, 26 Aug 2021 23:54:46 +0000

To celebrate the long-overdue death of Internet Explorer, I'm writing a series of articles on a massively useful and underused API that's available in every other mainstream JavaScript environment: Proxy.

With a Proxy, you can "intercept and redefine fundamental operations" for an object, such as getters and setters.

Let's start with a simple example: counters with a default value.

Let's say you're implementing a simple algorithm to count the number of occurrences of each word in a text. In a language like Ruby, you could do that easily like this:

def word_counts(text)
    counters = Hash.new(0)

    text.split(/\W+/).each do |word|
        counters[word] += 1
    end

    counters
end

wc = word_counts 'a a a b b c' # {"a" => 3, "b" => 2, "c" => 1}
wc['a'] # 3
wc['d'] # 0

That Hash.new(0) is really neat: it gives us key-value pairs with a default value of 0 that we can increment from.

JavaScript objects, on the other hand, can't be given a default value. Passing a parameter to an Object constructor instead converts that value itself into an object: new Object(0) returns Number {0}, which isn't what we want at all.

However, we can easily mimic Ruby's Hash.new behavior with a proxy:

/**
 * @template T
 * @param {T} defaultVal
 * @returns {Record<string, T>}
 */
const hashWithDefault = (defaultVal) => new Proxy(
    Object.create(null),
    {
        get(target, key) {
            return target[key] ?? defaultVal
        },
    }
)

The target parameter passed to the getter is the proxied object itself — the first argument passed to the Proxy constructor. In this case, we use an empty object with no properties (not even those from Object.prototype), which we create using Object.create(null).

As we didn't override set, setting simply works as normal — the property is set on that same target.

Our JavaScript hashWithDefault(0) now works very similarly to Ruby's Hash.new(0). We can now easily and ergonomically write our word count function like this:

/** @param {string} text */
const wordCounts = (text) => {
    const counters = hashWithDefault(0)

    for (const word of text.split(/\W+/)) {
        counters[word]++
    }

    return counters
}

const wc = wordCounts('a a a b b c') // Proxy {a: 3, b: 2, c: 1}
wc.a // 3
wc.d // 0

Cool, no? In a future installment, we'll look at using Proxy with a setter function as well.

What makes a package useless, or "When should I reinvent the wheel"?

lionel-rowe — Mon, 23 Aug 2021 15:57:43 +0000

This is a response to a couple of comments in the discussion below this article:

10 useless NPM Package with millions of downloads

Jyotishman Saikia ・ Aug 22 '21

#javascript #webdev #100daysofcode #npm

@ansile wrote:

array-includes is a polyfill, first published 7 years ago.
array-flatten is kinda the same. It's not a polyfill, in a technical sense, but Array.prototype.flat is a new feature and the package pre-dates it.

Arguably, that makes array-flatten "useless" for new projects, because it's better to polyfill a standard API, as you can remove the dependency later on if you stop supporting legacy browsers. You can't do this if you're using a non-standard API.

Of course, that doesn't mean the package was useless when it was written, nor even that older projects should instantly switch to the standard API. Any such change requires some amount of additional work, so there's a trade-off between rework and technical debt.

ismobilejs is a device os/type/etc detector. Some apps definitely need that.

And store2 is a wrapper with a huge amount of features, some convenience-based (e.g. modifying currently stored value instead of manually doing get+set), and some unique (e.g. checking how many space is left).

Difficult to argue with either of these. Both of these packages fulfill usefull purposes, and reinventing the wheel here not only takes additional work but also won't be as well battle-tested as a public, open-source package with thousands of GitHub stars.

The main reasons not to use these would be:

Preference for a different package that covers the same use case. For example, instead of a wrapper for the somewhat outdated localStorage and sessionStorage APIs such as store2, you could use the excellent idb-keyval, which wraps the IndexedDB API instead, giving significant performance and other advantages.
Reduce bundle size by using a custom yet very simple, small, yet hacky alternative. For example, maybe you don't need all of ismobilejs's features. Per MDN's recommendation, if you simply need to know whether a UA is mobile and don't care about other details, you can get a pretty damn good approximation with just 1 line:

export const isMobile = navigator.userAgent.includes('Mobi')

Meanwhile, @mcmath argues:

I’m going to go out on a limb and say that none of these are useless. Take upper-case, for example. I imagine it’s supposed to be useless because we already have toUpperCase(). But sometimes we want to do this:
 let upperCaseStrings =
   lowerCaseStrings.map(upperCase);
... Yes, it's easy to implement yourself. In fact, I have (many times). Maybe I'll download upper-case next time instead.

I'd argue that importing the upper-case package for this purpose would be a huge mistake and lead to increased tech debt for virtually no benefit. For extremely simple features such as this, even if you frequently need a map-able version, it'd be much better to have a custom file somewhere in your own codebase, rather than an external dependency. Perhaps it'd be called something like /src/utils/string-formats.ts and look something like this:

export const upperCase = (str: string) => str.toUpperCase()
export const lowerCase = (str: string) => str.toLowerCase()
// ...

Importing an external package for such simple features would be a mistake, for a few reasons:

Many developers will assume the package is doing something special and unique, rather than just calling String#toUpperCase(). They'll end up wasting time poring over GitHub repos, trying to figure out why someone has bothered to include this package as a dependency.
Meanwhile, other developers will just ignore it and treat the package as a "black box". They won't be quite certain what it does, but they'll assume it does something vaguely similar to String#toUpperCase(). Instead of a standardized, tried-and-tested, well-known, painstakingly specified, well-documented API, they'll be left wondering. Does it work on Greek or Cyrillic text? Is it locale-sensitive, and if so, does that mean it may have different results in different user agents? Is calling upperCase(lowerCase(upperCase(str))) always identical to calling upperCase(str) for every possible value of str? Who freakin' knows!
Breaking changes might be introduced to the package, which would never (or very rarely) happen with native web platform features. In general, you want to keep packages up to date, for security reasons if nothing else; but you also don't want your project to break thanks to the updates.

In general, I'd suggest the following heuristics in determining when to use a third-party package or when to "reinvent the wheel":

Can I implement the feature myself trivially and reliably?
How well is this functionality supported by existing Web (or Node) APIs?
Will updates to this package typically be an advantage or a disadvantage?
Is this a critical part of the app for which I want to be sure the solution is robust and battle-tested?
Does the benefit the package brings justify the increased bundle size?

Would you agree with these heuristics? What other ones would you add/remove?

Gotchas when converting strings to arrays in JS

lionel-rowe — Wed, 18 Aug 2021 19:44:47 +0000

This is a response to @antoomartini 's awesome article here, where she describes 4 ways to turn a string into an array:

4 ways to convert a string to an array in Javascript

Maria Antonella 🦋 ・ Aug 18 '21

#javascript #beginners #webdev #programming

However, not all of the 4 ways work in the same way. We can see this when we try to use a string such as '💩', rather than a Latin-alphabet string:

const str = '💩'

str.split('') // ["\ud83d", "\udca9"]

;[...str] // ["💩"]

Array.from(str) // ["💩"]

Object.assign([], str) // ["\ud83d", "\udca9"]

Why the difference?

To understand the difference, let's take a look at how each way works in turn.

String#split

String#split matches and splits on 16-bit units, as encoded in UTF-16, the internal string representation that JavaScript uses.

You can find what these units are by using string index notation, and you can count them using String#length:

'ab'[0] // "a"
'ab'[1] // "b"
'ab'.length // 2

'💩'[0] // "\ud83d"
'💩'[1] // "\udca9"
'💩'.length // 2

As you can see, something weird is going here. That's because emojis, and various other characters, take up two 16-bit units (for a total of 32 bits) instead of just one.

Therefore, with String#split, they get split right down the middle, into those individual 16-bit units. The 16-bit units that make up our emoji aren't proper characters, so the JavaScript console displays them in Unicode escape notation (\uXXXX, where each X is a hexadecimal digit).

Object.assign

How does Object.assign work?

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object. (Source: MDN)

In this case, source is '💩', and target is []. Object.assign therefore assigns '💩''s property 0 to the array's property 0 and '💩''s property 1 to the array's property 1. As a result, we get the same outcome as with String#split — the individual 16-bit units that are found at those indexes.

[...spread]

The spread operator (...) was introduced in ES6. With the introduction of ES6 features, JavaScript started getting smarter with its Unicode handling.

Instead of assigning properties, the spread operator iterates over its operand — in this case, our string. String iteration is done based on Unicode codepoints, rather than individual 16-bit units. Our friendly poop emoji is only a single Unicode codepoint, so we get the result we want.

Array.from

As with spread notation, Array.from was introduced in ES6. It iterates over the argument passed to it, so again, we get the expected result.

Caveats

Array.from and spread notation work great for Unicode codepoints, but they still won't cover every situation. Sometimes, what looks like a single glyph is actually multiple Unicode codepoints. For example:

const str1 = 'lǜ'
const str2 = str1.normalize('NFD')
// "lǜ", looks exactly the same, but composed with combining diacritics

;[...str1] // ["l", "ǜ"]
;[...str2] // ["l", "u", "̈", "̀"]

Or, for another emoji-based example:

const emoji = '👩🏿‍💻'

;[...emoji] // ["👩", "🏿", "‍", "💻"]

Here, it's because the emoji is actually composed of 4 Unicode codepoints, representing woman, skin tone 6, zero-width joiner, and computer respectively.

Include HTML-in-HTML: an iteration

lionel-rowe — Mon, 09 Aug 2021 16:28:36 +0000

Inspired by @fjones's comment on this article:

Include HTML Inside of HTML - Just Like React Components

Suhail Kakar ・ Aug 7 '21

#html #javascript #webdev #programming

FJones • Aug 7 '21 • Edited

This strikes me as a very interesting use case for webcomponents over the (rather crude) method in htmlinclude.js. It also seems like this would hit quite a lot of CSP problems. E.g. I suspect you would struggle to load any script tags or external resources from the included file.

Sounds like a challenge! Here are the design goals:

Simple, front-end-only HTML API to include HTML fragments inside other HTML documents, similar to htmlinclude.js
No HTML boilerplate required in the included HTML fragments. For example, <div></div> is fine — doesn't need to be <!DOCTYPE html><html lang="en"><head><title>title</title></head><body><div></div></body></html>
Renders multiple-child fragments with no problem. For example, <div>1</div> <div>2</div> works just as well as <div><div>1</div> <div>2</div></div> does
Once rendered, the include-html component is no longer present in the DOM
Allows including cross-origin content, as long as CORS headers set correctly on the resource
Runs script tags on same-origin content, unless sanitize attribute is set
Doesn't run script tags or anything else dangerous from cross-origin content

Without further ado, here's the implementation.

`isSameOrigin`

We use this function to check that the included content is from the same origin. If not, it'll definitely need sanitization, as we don't want 3rd parties to be able to inject scripts.

/** @param {string} src */
const isSameOrigin = (src) =>
    new URL(src, window.location.origin).origin === window.location.origin

By providing a 2nd parameter base to the URL constructor, we resolve the src relative to the current origin. Then, we check if the origin of the two is the same.

For example:

new URL('./bar.html', 'https://foo.co') resolves to https://foo.co/bar.html, of which the origin is still https://foo.co, so the result will be true
new URL('https://baz.co/quux.html', 'https://foo.co') resolves to https://baz.co/quux.html. The base parameter in this case is ignored, as the src is already fully qualified. The origin is https://baz.co, different from https://foo.co, so the result will be false

`safeHtml`

This is the function we use to sanitize the HTML, if required.

/** @param {{ sanitize?: boolean } = {}} */
const safeHtml = ({ sanitize } = {}) =>
    /** @param {string} html */
    (html) => {
        const sanitized = sanitize !== false ? DOMPurify.sanitize(html) : html

        return Object.assign(sanitized, {
            __html: sanitized,
        })
    }

We use DOMPurify, a widely used and battle-tested solution for HTML sanitization.

Using Object.assign on a string gives a String object with the additional properties added. By adding an __html property, we could directly use the result with React's dangerouslySetInnerHTML if we wanted, but we can still assign it directly to an element's innerHTML, as it's still a string... sort of.

const result = safeHtml()('<hr/>')

result // String {"<hr>", __html: "<hr>"}
result.valueOf() // "<hr>"
'' + result // "<hr>"

`IncludeHtml` Web Component

Here's the web component itself:

class IncludeHtml extends HTMLElement {
    async connectedCallback() {
        const forceSanitize = Boolean(this.attributes.sanitize)
        const src = this.attributes.src.value

        if (!this.innerHTML.trim()) {
            this.textContent = 'Loading...'
        }

        const res = await fetch(src)

        const html = safeHtml({
            sanitize: !isSameOrigin(src) || forceSanitize,
        })(await res.text())

        const range = document.createRange()

        // make rendering of fragment context-aware
        range.selectNodeContents(this.parentElement)

        this.replaceWith(range.createContextualFragment(html))
    }
}

customElements.define('include-html', IncludeHtml)

Using range.createContextualFragment means we can create a HTML fragment that will also execute any script tags present upon rendering (assuming we haven't sanitized them away yet). range.selectNodeContents means that the rendering will work as expected in a way that's aware of surrounding context. For example, trying to insert a tr outside of a table will render nothing, but it will work as expected within a table.

By using this.replaceWith, we immediately remove the Web Component from the DOM as the content is rendered, which is similar to what you'd expect from a back-end templating framework.

Usage

Finally, here are some examples of the component in use:

<nav>
    <include-html src="./includes/nav.html"></include-html>
</nav>

<main>
    <!--
        Including from 3rd-party source works
        (if CORS headers set properly on the source)
    -->
    <include-html
        src="https://dinoipsum.herokuapp.com/api/?format=html&paragraphs=2&words=15"
    ></include-html>
</main>

<footer>
    <include-html sanitize src="./includes/footer.html"></include-html>
</footer>

You can see the rendered output and try it out yourself in this live CodeSandbox demo:

Thanks for reading! What improvements would you make to the API or features?

Let's build... a retro text art generator!

lionel-rowe — Wed, 14 Jul 2021 16:13:57 +0000

Text art, often called "ASCII art", is a way of displaying images in a text-only medium. You've probably seen it in the terminal output of some of your favorite command line apps.

For this project, we'll be building a fully browser-based text art generator, using React and TypeScript. The output will be highly customizable, with options for increasing brightness and contrast, width in characters, inverting the text and background colors, and even changing the character set we use to generate the images.

All the code is available on GitHub, and there's a live demo you can play around with too!

Here's what we'll be building

Algorithm

The basic algorithm is as follows:

Calculate the relative density of each character in the character set (charset), averaged over all its pixels, when displayed in a monospace font. For example, . is very sparse, whereas # is very dense, and a is somewhere in between.
Normalize the resulting absolute values into relative values in the range 0..1, where 0 is the sparsest character in the charset and 1 is the densest.

If the "invert" option is selected, subtract the relative values from 1. This way, you get light pixels mapped to dense characters, suitable for light text on a dark background.
Calculate the required aspect ratio (width:height) in "char-pixels", based on the rendered width and height of the characters, where each char-pixel is a character from the charset.

For example, a charset composed of half-width characters will need to render more char-pixels vertically to have the same resulting aspect ratio as one composed of ｆｕｌｌ－ｗｉｄｔｈ characters.
Render the target image in the required aspect ratio, then calculate the relative luminance of each pixel.
Apply brightness and contrast modifying functions to each pixel value, based on the configured options.
As before, normalize the absolute values into relative values in the range 0..1 (0 is the darkest and 1 is lightest).
Map the resulting luminance value of each pixel onto the character closest in density value.
Render the resulting 2d matrix of characters in a monospace font.

With the HTML5 Canvas API, we can do all this without leaving the browser! 🚀

Show me the code!

Without further ado...

Calculating character density

CanvasRenderingContext2D#getImageData gives a Uint8ClampedArray of channels in the order red, green, blue, alpha. For example, a 2×2 image in these colors (the last pixel is transparent):

Would result in the following data:

[
    // red    green  blue   alpha
       255,   0,     0,     255, // top-left pixel
       0,     255,   0,     255, // top-right pixel
       0,     0,     255,   255, // bottom-left pixel
       0,     0,     0,     0,   // bottom-right pixel
]

As we're drawing black on transparent, we check which channel we're in using a modulo operation and ignore all the channels except for alpha (the transparency channel).

Here's our logic for calculating character density:

const CANVAS_SIZE = 70
const FONT_SIZE = 50

const BORDER = (CANVAS_SIZE - FONT_SIZE) / 2
const LEFT = BORDER
const BASELINE = CANVAS_SIZE - BORDER

const RECT: Rect = [0, 0, CANVAS_SIZE, CANVAS_SIZE]

export enum Channels {
    Red,
    Green,
    Blue,
    Alpha,

    Modulus,
}

export type Channel = Exclude<Channels, Channels.Modulus>

export const getRawCharDensity =
    (ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) =>
    (ch: string): CharVal => {
        ctx.clearRect(...RECT)
        ctx.fillText(ch, LEFT, BASELINE)

        const val = ctx
            .getImageData(...RECT)
            .data.reduce(
                (total, val, idx) =>
                    idx % Channels.Modulus === Channels.Alpha
                        ? total - val
                        : total,
                0,
            )

        return {
            ch,
            val,
        }
    }

Note that we subtract the alpha values rather than adding them, because denser characters are darker (lower RGB values) than sparser ones. This means all the raw values will be negative. However, that doesn't matter, as we'll be normalizing them shortly.

Next, we iterate over the whole charset, keeping a track of min and max:

export const createCanvas = (width: number, height: number) =>
    globalThis.OffscreenCanvas
        ? new OffscreenCanvas(width, height)
        : (Object.assign(document.createElement('canvas'), {
                width,
                height,
          }) as HTMLCanvasElement)

export const getRawCharDensities = (charSet: CharSet): RawCharDensityData => {
    const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE)

    const ctx = canvas.getContext('2d')!

    ctx.font = `${FONT_SIZE}px monospace`
    ctx.fillStyle = '#000'

    const charVals = [...charSet].map(getRawCharDensity(ctx))

    let max = -Infinity
    let min = Infinity

    for (const { val } of charVals) {
        max = Math.max(max, val)
        min = Math.min(min, val)
    }

    return {
        charVals,
        min,
        max,
    }
}

Finally, we normalize the values in relation to that min and max:

export const getNormalizedCharDensities =
    ({ invert }: CharValsOptions) =>
    ({ charVals, min, max }: RawCharDensityData) => {
        // minimum of 1, to prevent dividing by 0
        const range = Math.max(max - min, 1)

        return charVals
            .map(({ ch, val }) => {
                const v = (val - min) / range

                return {
                    ch,
                    val: invert ? 1 - v : v,
                }
            })
            .sort((a, b) => a.val - b.val)
    }

Calculating aspect ratio

Here's how we calculate aspect ratio:

// separators and newlines don't play well with the rendering logic
const SEPARATOR_REGEX = /[\n\p{Z}]/u

const REPEAT_COUNT = 100

const pre = appendInvisible('pre')

const _getCharScalingData =
    (repeatCount: number) =>
    (
        ch: string,
    ): {
        width: number
        height: number
        aspectRatio: AspectRatio
    } => {
        pre.textContent = `${`${ch.repeat(repeatCount)}\n`.repeat(repeatCount)}`

        const { width, height } = pre.getBoundingClientRect()

        const min = Math.min(width, height)

        pre.textContent = ''

        return {
            width: width / repeatCount,
            height: height / repeatCount,
            aspectRatio: [min / width, min / height],
        }
    }

For performance reasons, we assume all characters in the charset are equal width and height. If they're not, the output will be garbled anyway.

Calculating image pixel brightness

Here's how we calculate the relative brightness, or technically the relative perceived luminance, of each pixel:

const perceivedLuminance = {
    [Channels.Red]: 0.299,
    [Channels.Green]: 0.587,
    [Channels.Blue]: 0.114,
} as const


export const getMutableImageLuminanceValues = ({
    resolutionX,
    aspectRatio,
    img,
}: ImageLuminanceOptions) => {
    if (!img) {
        return {
            pixelMatrix: [],
            flatPixels: [],
        }
    }

    const { width, height } = img

    const scale = resolutionX / width

    const [w, h] = [width, height].map((x, i) =>
        Math.round(x * scale * aspectRatio[i]),
    )

    const rect: Rect = [0, 0, w, h]

    const canvas = createCanvas(w, h)

    const ctx = canvas.getContext('2d')!

    ctx.fillStyle = '#fff'

    ctx.fillRect(...rect)

    ctx.drawImage(img, ...rect)

    const pixelData = ctx.getImageData(...rect).data

    let curPix = 0

    const pixelMatrix: { val: number }[][] = []

    let max = -Infinity
    let min = Infinity

    for (const [idx, d] of pixelData.entries()) {
        const channel = (idx % Channels.Modulus) as Channel

        if (channel !== Channels.Alpha) {
            // rgb channel
            curPix += d * perceivedLuminance[channel]
        } else {
            // append pixel and reset during alpha channel

            // we set `ch` later, on second pass
            const thisPix = { val: curPix, ch: '' }

            max = Math.max(max, curPix)
            min = Math.min(min, curPix)

            if (idx % (w * Channels.Modulus) === Channels.Alpha) {
                // first pixel of line
                pixelMatrix.push([thisPix])
            } else {
                pixelMatrix[pixelMatrix.length - 1].push(thisPix)
            }

            curPix = 0
        }
    }

    // one-dimensional form, for ease of sorting and iterating.
    // changing individual pixels within this also
    // mutates `pixelMatrix`
    const flatPixels = pixelMatrix.flat()

    for (const pix of flatPixels) {
        pix.val = (pix.val - min) / (max - min)
    }

    // sorting allows us to iterate over the pixels
    // and charVals simultaneously, in linear time
    flatPixels.sort((a, b) => a.val - b.val)

    return {
        pixelMatrix,
        flatPixels,
    }
}

Why mutable, you ask? Well, we can improve performance by re-using this matrix for the characters to output.

In addition, we return a flattened and sorted version of the matrix. Mutating the objects in this flattened version persists through to the matrix itself. This allows for iterating in O(n) instead of O(nm) time complexity, where n is the number of pixels and m is the number of chars in the charset.

Map pixels to characters

Here's how we map the pixels onto characters:

export type CharPixelMatrixOptions = {
    charVals: CharVal[]
    brightness: number
    contrast: number
} & ImageLuminanceOptions

let cachedLuminanceInfo = {} as ImageLuminanceOptions &
    ReturnType<typeof getMutableImageLuminanceValues>

export const getCharPixelMatrix = ({
    brightness,
    contrast,
    charVals,
    ...imageLuminanceOptions
}: CharPixelMatrixOptions): CharPixelMatrix => {
    if (!charVals.length) return []

    const luminanceInfo = Object.entries(imageLuminanceOptions).every(
        ([key, val]) =>
            cachedLuminanceInfo[key as keyof typeof imageLuminanceOptions] ===
            val,
    )
        ? cachedLuminanceInfo
        : getMutableImageLuminanceValues(imageLuminanceOptions)

    cachedLuminanceInfo = { ...imageLuminanceOptions, ...luminanceInfo }

    const charPixelMatrix = luminanceInfo.pixelMatrix as CharVal[][]
    const flatCharPixels = luminanceInfo.flatPixels as CharVal[]

    const multiplier = exponential(brightness)
    const polynomialFn = polynomial(exponential(contrast))

    let charValIdx = 0
    let charVal: CharVal

    for (const charPix of flatCharPixels) {
        while (charValIdx < charVals.length) {
            charVal = charVals[charValIdx]

            if (polynomialFn(charPix.val) * multiplier > charVal.val) {
                ++charValIdx

                continue
            } else {
                break
            }
        }

        charPix.ch = charVal!.ch
    }

    // cloning the array updates the reference to let React know it needs to re-render,
    // even though individual rows and cells are still the same mutated ones
    return [...charPixelMatrix]
}

The polynomial function increases contrast by skewing values toward the extremes. You can see some examples of polynomial functions at easings.net — quad, cubic, quart, and quint are polynomials of degree 2, 3, 4, and 5 respectively.

The exponential function simply converts numbers in the range 0..100 (suitable for user-friendly configuration) into numbers exponentially increasing in the range 0.1..10 (giving better results for the visible output).

Here are those two functions:

export const polynomial = (degree: number) => (x: number) =>
    x < 0.5
        ? Math.pow(2, degree - 1) * Math.pow(x, degree)
        : 1 - Math.pow(-2 * x + 2, degree) / 2

export const exponential = (n: number) => Math.pow(10, n / 50 - 1)

...Fin!

Finally, here's how we render the text art to a string:

export const getTextArt = (charPixelMatrix: CharPixelMatrix) =>
    charPixelMatrix.map((row) => row.map((x) => x.ch).join('')).join('\n')

The UI for this project is built in React ⚛ and mostly isn't as interesting as the algorithm itself. I might write a future post about that if there's interest in it.

I had a lot of fun and learned a lot creating this project! 🎉 Future additional features, in approximate order of implementation difficulty, could include:

Allowing colorized output.
Moving at least some of the logic to web workers to prevent blocking of the main thread during expensive computation. Unfortunately, the OffscreenCanvas API currently has poor support outside of Chromium-based browsers, which limits what we could do in this respect while remaining cross-browser compatible without adding quite a bit of complexity.
Adding an option to use dithering, which would improve results for small charsets or charsets with poor contrast characteristics.
Taking into account the sub-char-pixel properties of each character to give more accurate rendering. For example, _ is dense at the bottom and empty at the top, rather than uniformly low-density.
Adding an option to use an edge detection algorithm to improve results for certain types of images.
Allowing for variable-width charsets and fonts. This would require a massive rewrite of the algorithm and isn't something I've ever seen done before, but it would theoretically be possible.

I'm not planning on implementing any of these features in the near future, but those are some ideas to get you started for anyone that wants to try forking the project.

Thanks for reading! Don't forget to leave your feedback in the comments 😁

Rotten Tomatoes 🍅 star rating system ⭐ with Web Components 🎆

lionel-rowe — Wed, 07 Jul 2021 18:54:59 +0000

On Rotten Tomatoes, a film can be rated either "fresh" or "rotten". Here's how to build a star rating component that can show both negative and positive values with different icons — in this case, "fresh" or "rotten" tomatoes.

Here's what we'll be building

The API for our Web Component will look like this:

<star-rating min="-5" max="5" value="0"></star-rating>

First, we set up a StarRating Web Component:

class StarRating extends HTMLElement {
    constructor() {
        super();
    }
}

customElements.define("star-rating", StarRating);

Within the constructor, we set up a Proxy to get and set the min, max, and value attributes, for convenience later:

this.attrs = new Proxy(this, {
    get: (o, k) => Number(o.getAttribute(k)),
    set: (o, k, v) => (o.setAttribute(k, String(v)), true),
});

const { min, max, value } = this.attrs;

Then, we set up the shadow DOM. For the codepen demo, we also clone and inject the pen's inline stylesheet within the component's constructor, to allow the styles to take effect in the component's shadow DOM. In production, you'd typically want to link out to an external stylesheet instead.

// in constructor

this.attachShadow({ mode: "open" });

const el = document.createElement("div");
el.classList.add("rating");

this.shadowRoot.append(
    document.querySelector("style").cloneNode(true),
    el
);

el.innerHTML = `<div>
    Rating: <span class="score">${value}</span>
</div>

<div class="stars-container">
    <input type="range" min="${min}" max="${max}" step="1" value="${value}">
    <div class="stars" aria-hidden="true"></div>
</div>`;

this.dom = {
    parent: el,
    stars: el.querySelector(".stars"),
    input: el.querySelector("input"),
    score: el.querySelector(".score"),
    get allStars() {
        return [...el.querySelectorAll(".star")];
    }
};

this.renderStars();

// ...

renderStars() {
    const { attrs, dom } = this;
    const { min, max, value } = attrs;

    const starHtml = '<span class="star"></span>';

    dom.stars.innerHTML = `<div class="neg">${starHtml.repeat(
        Math.abs(min)
    )}</div>
        <div class="zero">${starHtml}</div>
        <div class="pos">${starHtml.repeat(max)}</div>`;
}

We use attributeChangedCallback and static observedAttributes to keep the DOM in sync with changes:

static observedAttributes = ["min", "max", "value"];

attributeChangedCallback(name) {
    const { dom, attrs } = this;
    const { value } = attrs;

    switch (name) {
        case "value":
            dom.input.value = value;
            dom.score.textContent = value;

            break;
        case "min":
        case "max":
            this.renderStars();

            break;
        default:
            break;
    }

    this.renderClasses(value);
}

Finally, we attach the various listeners we need:

// in constructor

this.attachListeners();

// ...

attachListeners() {
    const { dom, attrs } = this;

    dom.stars.addEventListener("mouseover", (e) => {
        if (e.target.matches(".star")) {
            const val = this.getValFromStar(e.target);

            this.renderClasses(val);
        }
    });

    dom.stars.addEventListener("mouseleave", (e) => {
        this.renderClasses(attrs.value);
    });

    dom.stars.addEventListener("click", (e) => {
        if (e.target.matches(".star")) {
            const val = String(this.getValFromStar(e.target));

            this.attrs.value = val;

            dom.input.focus();
        }
    });

    dom.input.addEventListener("input", (e) => {
        const val = e.currentTarget.value;

        this.attrs.value = val;
    });

    let negative = false;

    dom.input.addEventListener("keydown", (e) => {
        const { min, max } = attrs;

        if (/^\d$/.test(e.key)) {
            const val = Number(e.key);

            this.attrs.value = negative
                ? Math.max(-val, min)
                : Math.min(val, max);
        }

        negative = e.key === "-";
    });
}

Note that the behavior on input is controlled by the input type="range", so we get all the benefits of that automatically, including keyboard input. The input element is also exposed to accessibility APIs, while the visible stars (tomatoes) are hidden.

We'll need to add some styling to that to hide the native input element from view, though:

.stars-container {
    position: relative;
}

.stars-container:focus-within {
    outline: 3px solid #4caf50;
}

.rating input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

We use :focus-within to add styling to the container when the input element is focused, and the input element itself is visibly hidden.

To style the stars/tomatoes themselves, we use ::before pseudo elements and emojis.

As there's no rotten tomato emoji available, we add a filter: hue-rotate(75deg); to change the color to green!

.star {
    cursor: pointer;
}

.zero .star::before {
    content: "🚫";
}

.pos .star::before {
    content: "🍅";
}

.neg .star::before {
    content: "🍅";
    filter: hue-rotate(75deg);
}

.neg .star.below,
.pos .star.above,
.zero .star:not(.exact) {
    opacity: 0.1;
}

.pos .star.below,
.neg .star.above,
.exact {
    opacity: 1;
}

Finally, we stack the .pos, .zero, and .neg elements on top of each other for better ergonomics on small screens, using a media query and some flex-direction trickery:

.stars {
    display: flex;
    flex-direction: row;
}

.neg,
.zero,
.pos {
    display: flex;
}

@media screen and (max-width: 600px) {
    .stars {
        flex-direction: column-reverse;
    }

    .neg {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}

Here's the finished project:

Have fun with it, and don't forget to leave your feedback in the comments!

How to view the raw markdown of a dev.to post

lionel-rowe — Mon, 15 Feb 2021 13:20:51 +0000

Sometimes on dev.to, you might come across an article that uses some interesting markdown or liquid tags and wonder how it was created. Well, wonder no more!

dev.to is built on top of the forem software, which has a well-documented API. Each path is resolved relative to https://dev.to/api, so to get information about an article, all you need to do is add /api/articles in front of the pathname (username and slug).

For example, information about this article can be found here:
https://dev.to/api/articles/lionelrowe/how-to-view-the-raw-markdown-of-a-dev-to-post-391b

The raw markdown can be found under the body_markdown field.

Alternatively, here’s a browser console-friendly snippet:

;(async () => {
    const url = new URL(window.location)
    url.pathname = '/api/articles' + url.pathname

    const res = await fetch(url)
    const { body_markdown } = await res.json()

    console.log(body_markdown)
})()

FizzBuzz Lightyear: to `Infinity` and beyond!

lionel-rowe — Fri, 12 Feb 2021 17:36:25 +0000

Perhaps the most famous of all coding interview questions is FizzBuzz. For the uninitiated, the algorithm is as follows:

For multiples of 3, print “Fizz”.
For multiples of 5, print “Buzz”.
The multiples of both 3 and 5, print “FizzBuzz”.
For all remaining numbers, print the number as-is.

Any fresh bootcamp grad should be able to solve it without too much trouble, but the challenge (or so the rationale goes) is in how they implement it.

With that in mind, let’s over-engineer the crap out of it! 🚀🚀🚀

Usually, the question only asks for output for the numbers 1 to 100, but we’d be remiss if we didn’t go all the way up to Infinity — or at least as close as we can get before hardware limitations get in the way.

To do that, let’s first build a range data structure that can be logically infinite in size. We’ll do this using an iterator, along with JavaScript’s bigint data type. The range increments by 1 each iteration, so we allow the upper bound to be positive Infinity, but we don’t allow the lower bound to be negative Infinity, because incrementing an Infinity is meaningless.

const range = (min: bigint, max: bigint | typeof Infinity) => {
    max = max === Infinity
        ? max
        : BigInt(max)

    if (min > max) {
        throw new RangeError('min cannot exceed max')
    }

    return {
        *[Symbol.iterator]() {
            for (let n = min; n <= max; n++) yield n
        },
        min,
        max,
        toString: () => `${min}..${max}`,
        includes: (n: bigint) => n >= min && n <= max,
    }
}

Next, we create our format function:

const format = (n: bigint) => [
    !(n % 3n) && 'Fizz',
    !(n % 5n) && 'Buzz',
].filter(Boolean).join('') || n.toString()

Here, we’re checking the remainder from 3 and 5 and joining the truthy items of the array. If the resulting string has length zero, we simply return the number itself (as a string, for type safety).

We’ll also need a map function to map over our iterable. For small ranges, we could simply convert the iterable to an array and then use Array#map, but this would cause problems for infinite or very large ranges, which need to be mapped over lazily. With that in mind, here’s map:

 const map = <TArg, TReturn>(fn: (arg: TArg) => TReturn) => (
    iter: Iterable<TArg>,
): Iterable<TReturn> => ({
    *[Symbol.iterator]() {
        for (const x of iter) yield fn(x)
    },
})

Great! Now we can already start consuming our infinite FizzBuzz with a for...of loop. We’re using pipe from fp-ts to make our code a bit more readable — pipe(val, fn1, fn2) is equivalent to fn2(fn1(val)):

import { pipe } from 'fp-ts/function'

const fizzBuzz = pipe(
    range(1n, Infinity),
    map(n => ({ n, formatted: format(n) })),
)

for (const { n, formatted } of fizzBuzz) { 
    console.log(formatted)

    if (n === 100n) break
}

The logic is somewhat brittle here, though — if we’d accidentally written 100 instead of 100n, our code would have got stuck in an infinite loop, because a number will never be strictly equal to a bigint. To remedy this, let’s create a take function that grabs the first n elements of an iterable and spits them out as an array.

const take = <T>(n: number) => (
    iter: Iterable<T>,
): Array<T> => {
    const arr: Array<T> = []

    for (const x of iter) {
        arr.push(x)

        if (arr.length >= n) break
    }

    return arr
}

Now, we can be sure our code is safe from infinite loops, as long as we remember to call take:

const fizzBuzz100 = pipe(
    range(1n, Infinity),
    map(format),
    take(100),
)

fizzBuzz100.forEach(x => console.log(x))

Much better!

We can also consume our infinite fizzBuzz asynchronously, using setInterval:

const iterator = fizzBuzz[Symbol.iterator]()

setInterval(() => {
    console.log(iterator.next().value.formatted)
}, 1000)

This will keep on spitting out values every second until the process crashes, the integers get too big to be operated on or stored in memory, or the heat death of the universe, whichever comes first.

For a slightly more ergonomic version of this, we can use async/await with a custom sleep function:

const sleep = (ms: number) => new Promise(res => setTimeout(res, ms))

;(async () => {
    for (const { formatted } of fizzBuzz) { 
        await sleep(1000)
        console.log(formatted)
    }
})()

And with that, we’re done! The interviewer politely thanks us for our time and shows us out of the building. A few days later, the long awaited email arrives. “We regret to inform you...” Our heart sinks. It turns out they were looking for a candidate who doesn’t over-engineer things.

But in our heart, we know it was worth it.

Reverse a ‮string‬: revisited

lionel-rowe — Mon, 08 Feb 2021 16:08:13 +0000

[...'‮!dlrow ,olleH'].slice(1).reverse().join('')

The above is executable JavaScript code, with no syntax errors. Try pasting it into your browser console.

Once you've figured it out, leave your explanation in the comments inside a spoiler tag:

{% details Spoiler %}
Your answer here
{% enddetails %}

Happy hunting!