muxup-site VS rough-notation

On https://muxup.com/ you should see pastel-coloured randomly drawn 'roguh' highlights for the site title and for the titles of individual articles. If you mouse over, they'll be redrawn while your mouse is hovering. If you're on mobile, you won't see that, and that's fine. It worked just fine on Android (FF or Chrome) and iPhone last time I checked, but do let me know if you're not seeing that.

It's really very simple, just thought the distillation of the 'rough' drawing technique to a couple of dozen lines of code for this use case might be of interest to some.

I can recommend writing a short script to test redirects and cache control are configured as expected for your site - here's mine (health warning: shell script) https://github.com/muxup/muxup-site/blob/main/utils/server_t...

I link to something I've written in a conversation if it's relevant (like this - my blog is https://muxup.com/), and post articles to HN, lobste.rs, or an appropriate subreddit if no-one else does and I think it's relevant to people there.

I've also found that a custom-written generator is surprisingly productive. My own attempt is at https://github.com/muxup/muxup-site/blob/main/build.py and I wrote up a few notes on it here https://muxup.com/2022q3/muxup-implementation-notes#site-gen....

See my implementation notes post for more technical detail (which also links to the site source).

A quick look through the source brought me to https://roughnotation.com/

Also see RoughNotation <https://roughnotation.com/>, which uses RoughJS to support underlines, highlights etc.

I took some inspiration for my website (mouse over any highlighted title) <https://muxup.com/>. The write-up here aims to summarise how it works https://muxup.com/2022q3/muxup-implementation-notes#randomly... - if you click through you'll see it's really very little code.

I used an npm package called Rough Notation React. They have the demos here - https://roughnotation.com/

🎨 Design tip: Even though Delba’s website is fairly minimal, she sparks joy in the user with delightful highlighter animation using a JavaScript library called Rough Notation.

10. Rough Notation

Do also check out the other cool roughjs creations (https://github.com/rough-stuff), such as annotations (rough-notation: https://github.com/rough-stuff/rough-notation) and html elements (wired-elements: https://github.com/rough-stuff/wired-elements).

Shameless plug: I also created a dataviz library that uses roughjs under-the-hood: https://github.com/jwilber/roughViz

- https://github.com/rough-stuff/rough-notation

One comment: some items aren’t rendering properly on my safari (eg checkboxes)

I used [Rough notation](http:// https://roughnotation.com/) for the highlights..not sure I get your second question tho.