Light

Intro

Very few parts of the large chunks of text we read from our browsers daily are actually worth our time. To this regard, I've always wanted a functional way to highlight pieces of text on websites. I'm tired of keeping several notes and struggling to link them later on. And as the bare minimum, I need these highlights to persist beween subsequent visits; just like we do with pdf's and their readers. The need for this tool was so pressing, I almost tweeted at the founder of the Dia browser to bake it into their software as a native feature.

Agency

Today, I finally exercised some agency and did some searching online for a chrome extensions for this. But just like every peice of software built in our time, based on findings and reviews, were either bloated with unnecessary features, making weird network calls, or selling ads.

AGI

In the spirit of functionalism & AGI, I fired up google's jules agent and made myself a decent piece of technology in just 5 prompts. It matches my taste and goals and it's called light. You can find it on github.

Engineering

End-to-end, the whole session took less than 2hours, including testing & debugging time. Unfortunately, the coding agent that's supposedly coming for my job struggled to handle highlights that span multiple html nodes, so most of the time was spent coming up with an algorithm for handling those. The code that unlocked everything is below, but you can also find the prompts on github.

function getHighlight() {
    let getChildren = (node, collection) => {
        let children = Array.from(node.childNodes)
        if (children.length == 0) {
            collection.push(node)
            return
        }
        children.forEach(child => getChildren(child, collection))
    }

    const chunks = []
    const components = []

    const selectedText = window.getSelection().getRangeAt(0).cloneContents()
    getChildren(selectedText,components)

    components.forEach(component => chunks.push(component.textContent))

    return {
        representation: selectedText.textContent,
        chunks: chunks,
    }
}

Conclusion

We should all aim to build simple and functional software, rid of ads, bloat and only seeks to amplify the user.