Article: Every new word* they ever rapped

Sources:

• Genius: lyrics and performer credits.
• MusicBrainz: albums, release dates, and track lists.
• Wikipedia: discography cross-checks.
• The Pudding’s original article, by Matt Daniels: the rapper list, eras, and 2019 vocabulary counts.
• Wikimedia Commons, via Wikidata: portraits, individually credited in the article.

Tools: JavaScript/Node.js for data collection and word counting, Python for an independent recount, rhp for the charts, and SolidJS + Vite for the interactive article.

Code, derived data, and methodology: GitHub.

I just released rhp 2.0 around 2 weeks ago. rhp is an open-source html/CSS-type charting library I have been working on for 3 years. I finally got it to a good place in performance and capability to warrant pushing it out. Unfortunately, the library is a SolidJS library atm and plans to make it framework agnostic are going to take awhile. Meanwhile, I created an mcp server and a skill that guides AI agents to properly use rhp and produce something usable from just a single short prompt.

I just released version 1.01 of the mcp server: https://www.npmjs.com/package/@bezda/rhp-mcp

All the recipes in the rhp gallery were generated using the skill or mcp server.

rhp (Reactive Html Plots) 2.0 is the successor of rhp 1.0 which was a react charting library I built 3 years ago. rhp 2.0 is now an open-source SolidJS library of reactive components. It does not use Canvas or SVG for building the entire chart but HTML elements, CSS, and Javascript. This makes certain interactive and styling things easier (simpler to implement) that would normally be tricky to implement in SVG or Canvas.

Current temporary landing page
Github repository
npm package page

One thing I like is how straightforward it is to make charts that respond and adjust to layout changes. Some of the wider plots will rearrange their elements to be more vertical stacked for mobile devices.

Background

The original library (now called rhp 1.0) was over-engineered and overly complex. I was aiming the project in two competing directions and it had too many unnecessary components and an extra interface layer. I learned a lot from the project and from improving its performance. I took what worked and stripped all the unnecessary complexity. I also split the two most important core basic blocks (leaf components) into a group of more focused blocks where each is for presenting/containing a specific type of visual element. I also removed niche features and redundancy. Oh, and I moved over to using SolidJS because of signals (simplifies state management which allows charts to update faster when data changes...for free).

The end result of all the above is a library that performs really well overall and is pretty lightweight (less than 20kB. 16kB without special imports).

More exciting things coming to rhp

• working on a separate mcp server that will allow AI to create plots using rhp 2.0 while still keeping devs (working directly with rhp) as first class users.
• planning to make this framework agnostic in the very near future.
• working on a new landing page. The current one will be for docs.

Hi guys,

I am looking for someone to work with me on a project called rhp (2.0) that has gotten pretty large in size. It is a solid-native charting/plotting library designed for web infographic-style data visualizations. Styling and interactivity were key to the tech stack choice and why I avoided SVG or Canvas for creating plots. This project was inspired by several beautiful and highly interactive hand-made (hard-coded) graphs and charts I found on a few websites I visited.

• Current documentation landing page (will move to domain I purchased).
• Github repo

What I need help with

I need help revamping rhp-home which I now want to be the "product"-style landing page (even though this library is free and open-source). The current landing page can be repurposed somewhat but it still needs to be built out to sell people on using the library. We also need to work on framework ports or making rhp framework agnostic. Currently, I managed to get rhp 2.0 working server-side (again) and I created a react wrapper port. I want real ports because users of each framework need to be able to build their own plots without knowing solidjs.

I also need help finding and adding support/examples for other types of plots where data and information can be grouped together visually (for example, each data value has an associated image and labels and area in chart).

Also, I am evaluating a possible upgrade to Solid 2.0. I think its too early atm but if there are performance gains or other things that benefit this project, it is worth considering.

I also want to work on AI agent adaptors or mcp servers that allow agents to create these plots using the library (while at the same time, keeping developers as first class users).

Overall, rhp performs pretty well compared to many other libraries. It's of course slower than the fastest SVG and Canvas plotting libraries but thats expected given DOM and CSS which I do not want to give up (they are core features of the library). It's also pretty light-weight.

(below is extra info...its a long read)

---

Background to explain the current state of project

A long time ago (3 years ago) I created rhp which used to be short for react html plots. rhp (now called reactive html plots) is a charting library that is designed for creating interactive, dynamic, and visual infographic-type plots. Especially the types that are structured a certain way.

Obviously, I built rhp 1.0 using react and for multiple reasons such as size of user base. However, I over complicated and over-engineered the hell out of it. It was a mess because of two conflicting/competing directions I was trying to aim it towards. It was a mess but I learned a whole lot. I tried to force signal behavior and fine-grained reactivity in react to get better performance when data changes and even created a mini serializable virtual-dom. The pain of trying to squeeze performance and make it usable taught me what I should have done and how I should have built things from the start. Lessons learned. I got it working and performing ok but I was not satisfied with many things so I never promoted it. Anyways, I paused the project and put a disclaimer that I intended to revamp the whole thing.

I attempted a reworking a year later but it was a huge undertaking and stopped midway into refactoring and moving the project over to using solidjs instead of react.

Recently, thanks to AI and additional things I learned to keep in mind from my refactor, I was able to rebuild this project! Thanks to all of my notes and all of my existing code (that I coded prior to AI boom) I was able to give AI agents everything they needed and the correct instructions and specs to get this project as close to how I wanted it as I could. There were even additional places for performance improvements I was able to find thanks to Opus 5.5's performance testing approaches.

I wanted to talk about AI's involvement for transparency reasons and to make it clear that rhp 2.0 is currently an AI assisted project. However, the original code that the AI worked with and took from was all mine. Most of the endeavor was telling AI what I wanted it to strip out and explaining why I did certain things so it is aware of my goal and does not copy over things that no longer suit our goal or are superfluous/redundant. And also simplification and reorganization (reducing the number of blocks and their complexity..ie reducing excessive configurability).

More about RHP 2.0

rhp expects devs to code the CSS to style the chart themselves. Or grab styles from someone else's plot. Plot layout is simplified by reducing to the common denominator (a template component that we call a 'slat') which is built using a small number of building blocks. The result is that even if your plot layout is sightly different from someone else's, it is easy to adapt their CSS to work with yours. Sometimes it will be just plug n' play. This is explained in more detail in the docs.

EDIT:

If you see stutters in the video, it's something that resulted in the upload to reddit. There are no stutters in the actual video or the transitions/animations in the plots (that I can see).

So about 10 months ago, I found out that I have severe ADHD. I always suspected but never got tested. Since then, I have gotten treatment and I have also learned so much more about it and how to manage it. I learned tips and tricks to stay focused such as never sticking to a single mental task for more than 45 minutes without a mental break. It's better to focus in 10-20 minute chunks and this amount varies person to person. It turns out for me, my mind starts to wander about 15 minutes into any task that requires focus. I have also gotten to better understand how my ADHD actually impacts my efforts to learn.

I love learning. I actually love it. I make time to study or review every day. So I was watching a lecture video and I started to day dream about other stuff. I caught myself but had to rewind the video to what I last remember hearing. It turned out that I lost focus about 15 minutes in. Surprise surprise.

So I got the idea to kill two birds with one stone. To take a break from the video and test what I learned at the same time. So I built Quizmark for YouTube^(TM). It is a chrome extension that injects short quizzes at intervals of your choosing. I am putting it out for free.

getquizmark.com

Chrome Store Page

This extension uses AI to generate quiz questions. You can provide your own API key (BYOK) or use a model on your machine (provided you have LM Studio or Ollama installed both of which are also free).

I also have a safari version that is practically ready to publish but I don't want to pay the apple dev/store fees right now lol.

I like them and have begun to create/use them myself.

Edit: The title is a question, my bad. I am genuinely asking in case maybe it is disliked for some reason...

Assalamu alaikum! I hope that it is ok that I share this long-term project I have been working on with you all. I think it is a tool that can benefit scientists, educators, computer scientists, data analysts and data scientists, and more. I am planning to release first official version latter this year inshallah. I would love some Muslim developer eyes on it and feedback! Note that this project is not related to religion, Islam, Islamic practices. I just think it can be beneficial to all and wanted to share!

My project: PyNote

PyNote is a python notebook editor at heart that focuses on the reading and presenting aspect of notebooks rather than just the computing side.

Python notebooks are "documents" that allow you to combine live code, markdown, equations, and data visualizations. These documents are properly viewed and interacted with using Python notebook apps/environments.

Many python notebook editors such as Jupyter, Colaboratory, Kaggle, and even Marimo have gotten more complex as they matured resulting in a look and feel akin to full traditional IDEs rather than a "note" "book".

With PyNote,

• no install, no login, no account
• code executes locally using your browser (wasm sandbox)
• app and notebooks are theme-able
• feature-rich editors (including WYSIWYG markdown editor)
• 4 execution modes (including Marimo-style reactive execution)
• simple UI inspired by Streamlit and a specific AstroJS template

Site: https://pynote-notebook.vercel.app/

Repo: https://github.com/bouzidanas/pynote-notebook-editor

Tutorial: https://pynote-notebook.vercel.app/?open=tutorial

Example notebooks: https://pynote-notebook.vercel.app/?open=coding-prep

Thanks for your time and attention. Barakallahu fikum

PyNote is a python notebook editor at heart that focuses on the reading and presenting aspect of notebooks rather than just the computing side.

Python notebooks are "documents" that allow you to combine live code, markdown, equations, and data visualizations. These documents are properly viewed and interacted with using Python notebook apps/environments.

Many python notebook editors such as Jupyter, Colaboratory, Kaggle, and even Marimo have gotten more complex as they matured resulting in a look and feel akin to full traditional IDEs rather than a "note" "book". It's like the code editor version of carcinisation.

With PyNote,

• no install, no login, no account
• code executes locally using your browser (wasm sandbox)
• app and notebooks are theme-able
• feature-rich editors (including WYSIWYG markdown editor)
• 4 execution modes (including Marimo-style reactive execution)
• simple UI inspired by Streamlit and a specific AstroJS template

Site: https://pynote-notebook.vercel.app/

Repo: https://github.com/bouzidanas/pynote-notebook-editor

Tutorial: https://pynote-notebook.vercel.app/?open=tutorial

Example notebooks: https://pynote-notebook.vercel.app/?open=coding-prep

Note on AI use:

Originally used AI for research and notes (rarely in agent mode). Core systems like pynote_ui and kernel bridge (class and utils) were coded by me. After Opus 4.8, started using it more and more. So yes, project is AI assisted. But I review changes at least before commit but often immediately after model makes changes to code because I am still a paranoid person.

PyNote is a python notebook editor at heart that focuses on the reading and presenting aspect of notebooks rather than just the computing side.

Python notebooks are "documents" that allow you to combine live code, markdown, equations, and data visualizations. These documents are properly viewed and interacted with using Python notebook apps/environments.

Many python notebook editors such as Jupyter, Colaboratory, Kaggle, and even Marimo have gotten more complex as they matured resulting in a look and feel akin to full traditional IDEs rather than a "note" "book". It's like the code editor version of carcinisation.

With PyNote,

• no install, no login, no account
• code executes locally using your browser (wasm sandbox)
• app and notebooks are theme-able
• feature-rich editors (including WYSIWYG markdown editor)
• 4 execution modes (including Marimo-style reactive execution)

Site: https://pynote-notebook.vercel.app/

Repo: https://github.com/bouzidanas/pynote-notebook-editor

Tutorial: https://pynote-notebook.vercel.app/?open=tutorial

Example notebooks: https://pynote-notebook.vercel.app/?open=coding-prep

Hi guys,

The last 3 years of various personal/side-projects have essentially culminated into me being able to build this project. I have been prototyping and planning for over a year and have been working on it for 8 months now. It is called PyNote. It is a feature-rich, zero-setup, and serverless Python notebook environment built with SolidJS (for that fine-grained reactivity and performance). Side note, Solid was such a perfect stack choice for this app. So much so, that I think other highly reactive notebook environments like Marimo should switch from React to SolidJS.

Instead of describing the direction I decided to take with this python notebook editor (that I think is what makes it stand out), I would rather just give you a link to the tutorial which doubles as a demo of the features:

PyNote Tutorial

Feel free to explore. Things get more interesting near the end!

Here are some other project links:

GITHUB | NOTEBOOK

A few extra tid bits of info:

• PyNote is open-source (am looking for contributors with an eye for simple modern UI design)
• Just finished building out the internal data/file handling and management system. Also expanded the theme configuration options and added theme 4 presets.
• I expect this to be ready for first official release sometime later this year.

PyNote is the zero-setup, serverless python notebook environment that I am developing.

• Easy and quick access. No account or setup needed.
• Nothing is saved to a server or executed on a server.
• Free and open-source
• Focused on simple and clean theme-able UI that easily gets out of the way
• What you see is what you get. Aimed at interactive, presentation oriented applications.
• Modern tech stack: SolidJS (fine-grained reactivity, performance), CodeMirror, Milkdown, Pyodide.

It attempts to prioritize presentation and interactivity while keeping the UI as simple as possible. As far as presentation goes, the markdown editor is WYSIWYG and the styling/theming decisions attempt to make the notebooks presentable as is. If you toggle presentation mode, you see that the actual notebook content doesn't shift or change layout or styling and all that happens is that the UI slides away and editing is disabled.

Latest progress

1. I added 4 theme presets and 5 advanced sections to the theme configuration dialog so now, a lot more can be customized. You can access the theme configuration dialog by clicking Options > Theme
2. I also added a panel and dialog that allows users to manage uploaded files and the internal sandboxed filesystem that the python code (in the code cells) has access to. This provides a much easier way to upload files than previously. It allows drag and drop and the usual file operations. It also has a tree file list view and the typical explorer folder view. You can access it by clicking Options > Files & Data
3. NEW built-in notebook series that shows off PyNote's capabilities.

GITHUB | TUTORIAL

The project is open-source and first official release is still planned for end of year

PyNote is the zero-setup, serverless python notebook environment that I am developing.

It attempts to prioritize presentation and keeping the UI as simple as possible. As far as presentation goes, the markdown editor is WYSIWYG and the styling an theming decision attempt to make the notebooks presentable as is. If you toggle presentation mode, you see that the actual notebook content doesn't shift or change layout or styling and all that happens is that the UI slides away and editing is disabled.

Updates

1. I added 4 theme presets and 5 advanced sections to the theme configuration dialog so now, a lot more can be customized. You can access the theme configuration dialog by clicking Options > Theme
2. I also added a panel and dialog that allows users to manage uploaded files and the internal sandboxed filesystem that the python code (in the code cells) has access to. This provides a much easier way to upload files than previously. It allows drag and drop and the usual file operations. It also has a tree file list view and the typical explorer folder view. You can access it by clicking Options > Files & Data
3. NEW built-in notebook series that shows off PyNote's capabilities.

GITHUB | TUTORIAL

The project is open-source and first official release is still planned for end of year