Here’s a talk I gave at !!Con 2019, BrooklynJS April 2019, Philly JS Meetup April 2019 about generating music with package managers!
Links & Resources
- slides on speakerdeck
- video of zooming out on node_modules folders
- node-red flow for watching a directory for changes
- node-red flow for outputting npm log to a text file and websocket
Text version w/ image descriptions
“lofi hip hop beats to npm install to”
By Melody melody.dev.
Presented at the BrooklynJS & Philly JS Dev meetups in April 2019.
It’s me, Melody!
Images: computer monitor emoji, art pallete emoji, unicorn emoji.
I design and code websites, which I guess makes me a unicorn!
Images: taco emoji, tea emoji.
I enjoy making tacos and drinking lots of tea in my free time.
Images: emoji-sized illustration of a squid.
I also stream Splatoon on Twitch!
Listen to your computer. Chances are, you probably have a laptop in front of you.
Image: computer fans, from Wikipedia.
You can probably hear (or imagine) the sounds of laptop fans whizzing as accidentally leave too many tabs open.
Image: old hard drive showing exposed spinning disk, from Wikipedia.
If this was 10 years ago, you would also probably hear the clicking sound a hard disk makes. If you remember this, you qualify for a senior discount.
Image: MacBook power charge, from Apple.com.
If you have 20/20 hearing and happen to be in a quiet room, you can also probably hear the sounds of a power brick.
But so far, I have only described ways you can physically listen to your computer.
Images: screenshots of the Activity Monitor app in macOS, showing the CPU and Network tabs.
There are ways you can also digitally listen to your computer. Most operating systems come with an interface for a task manager, which allows you to take a peek into what’s going on in your computer.
Image: a screenshot of the Activity Monitor app in macOS, zoomed into a graph showing network data sent and received.
macOS’s activity monitor even provides you with a graph. It honestly looks like something we can generate music from. (But that’s another talk for another time!)
Image: logos of node.js and npm.
What we’ll be listening to today is a package manager called npm.
Image: a file browser, showing a visually very large node_modules folder. folder.
If you have ever had the pleasure of dealing with npm before, you probably have encountered a very large node_modules folder. And when I mean large, I mean large enough to take up 10% of my disk space!
Video: a file browser, showing a visually very large node_modules folder, then zooming out to reveal many visually small node_modules folders, then scrolled down to reveal over 1,000 more node_modules folders. Link to video..
Of course, there isn’t a single node_modules folder we’re dealing with there. For a simple hello world application in react native, we’re dealing with hundreds of node_modules folders. Did I say hundreds? I meant closer to well over one thousand.
Image: a file browser, showing the contents of a single node_modules folder.
Why does this happen? Well, a project may have a couple of dependencies, but each of these individual dependencies may have a couple more dependencies, and so forth. It downloads everything recursively! That gives us a treasure trove of activity we can monitor and generate music with!
Let’s see how installing a package with npm works.
npm install express command.
Notice how a bunch of lines zip through in a matter of seconds, but the end output is maybe 20 lines at most.
Most command line applications, however, have a
--verboseflag which allows you to log and retain more details with a command’s output.
npm install express --verbose command.
npm even has a level of logging called
sillywhich can be activated using the
-dddflag. It logs absolutely anything and everything that happens. Let me show you what I mean.
npm install express -ddd command.
This provides us with more lines to work with than my terminal history can store!
(Here are the different levels of npm logging if you’re interested: silent, error, warn, notice, http, timing, into, verbose, silly.)
node-red is a package that was originally designed for programming internet of things devices, like light bulbs, voice assistants, and nest thermostats. Because I am the type of person who likes to use things outside of their intended purposes, I found a way to use node-red to. Let me show you how this works!
Demo: running the
node-red command to start the server.
Here, we can watch a folder to changes and have that output to the console.
Demo: Dragging and dropping to put together a flow to watch a node_modules folder for changes. Files that have been created or modified during the install process appear in the console.
We can also have node-red run a command and output it to any source. In this case, let’s output the install of react-native to the console!
Demo: node-red running a flow
npm install react-native -ddd.
Demo: opening the output.txt file that was generated.
Scrolling thru the file we just generated, we have 29,839 lines of logs we can work with!
We’re going to use tone.js to generate our music.
Demo: open tone.js website and show how with just a few lines of code, you can generate or play a certain tone.
Chances are if you have been on YouTube in the past year, you probably heard of lofi hip hop beats (to study and relax to.) But in case you’re not too familiar: here’s a BuzzFeed article about how it’s everywhere!
So let’s make some lofi music!
Here is where we tie it all together! We can create a switch split up different keywords generated by the
npm installcommand (such as http request, extract, or install,) and output that to a websocket.
I also created a webpage to receive these websocket output frames and match each of these keywords with a note!
So all we have to do is match each of these keywords to a note, have them queued up in tone.js… and that’s how you generate lofi hip hop beats with npm!
Demo: we now have some nice music playing!
There are things I cut out for the sake of time.
I can show you how I generate a bunch of notes without breaking my computer.
I could implement bandwidth throttling to see one package install at a time.
If I had more time, I could show you how to add visualizations by hooking into tone.js.
Image: a screenshot of my website, showing colorful tiles arranged in an irregular grid layout.
Thank you! You can find my website and the slides at melody.dev.
Slide containing my contact information:
- Twitter: @pixelyunicorn
- Slides: melody.dev/lofi-npm
- Patreon: madebymelody
- Switch friend code: SW-4207-5422-1528