Today I discovered…
Rough Notation
Rough Notation is a JavaScript library to create animated annotations with hand-drawn look and feel. Built on top of RoughJS, support multiple styles such as underline, highlight, circle, etc.
💖 What I like about Rough Notation:
Simple API - This library has a specific clear purpose and delivers that via super simple APIs, no learning curve and easy to install
Elegant UI - Love the visuals it provides, and a contextual minimal use can improve UX
Lightweight and no side-effects - I didn’t see any side effects of using this library. I am usually concerned about adding js libraries just for cosmetic features as that adds another layer of unknown complexity and debugging experience. I prefer to write the code myself in vanilla js unless it is absolutely complex thing. But seeing such careful and lightweight implementation, it is hard to resist not using it even when you could write it yourself.
👎 What I dislike about Rough Notation:
As much as I am impressed with the UI and the implementation, I still might not use it most instances. The primary reason is its dependency on rough.js. In most use cases, I’d be using one or two styles here and that too sparingly on one or two pages among 100s of pages. And that should be doable with even a shorter code, I wouldn’t want to import the complete rough.js for that. Overall, the decision is to choose the rough.js ecosystem or not, which limits its use cases.
⭐ Ratings and metrics
Based on my experience, I would rate this project as following
Production readiness: 10/10
Docs rating: 10/10
Time to POC(proof of concept): less than 10 mins
Author: Preet @preetster
Demo | Source
Tech Stack: Typescript, Javascript
If you discovered an interesting Open-Source project and want me to feature it in the newsletter, get in touch via the form above. To support this newsletter and Open-Source authors, follow #OpenSourceDiscovery on LinkedIn and Twitter
Other sister projects by the same OSS maintainers worth checking out
* Rough.js - JS library to create graphics with a hand-drawn, sketchy, appearance https://github.com/rough-stuff/rough
* Wired Elements - Collection of custom web components that appear hand drawn https://github.com/rough-stuff/wired-elements