lofi hip hop beats to npm install to

Change Theme Change Theme
Reset

Here’s a talk I gave at !!Con 2019, BrooklynJS April 2019, Philly JS Meetup April 2019 about generating music with package managers!


Text version w/ image descriptions

Slide 1

“lofi hip hop beats to npm install to”

By Melody melody.dev.

Presented at the BrooklynJS & Philly JS Dev meetups in April 2019.

Slides 2-6

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!

Slide 7

Listen to your computer. Chances are, you probably have a laptop in front of you.

Slide 8

Image: computer fans, from Wikipedia.

You can probably hear (or imagine) the sounds of laptop fans whizzing as accidentally leave too many tabs open.

Slide 9

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.

Slide 10

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.

Slide 11-12

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.

Slide 13

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!)

Slide 14

Image: logos of node.js and npm.

What we’ll be listening to today is a package manager called npm.

For those of you not aware, node.js is a runtime that allows you to run javascript outside of the browser, and npm is a package manager for node.js.

Slide 15

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!

Slide 16

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.

Slide 17

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!

Slide 18

Let’s see how installing a package with npm works.

Demo: 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 --verbose flag which allows you to log and retain more details with a command’s output.

Demo: npm install express --verbose command.

npm even has a level of logging called silly which can be activated using the -ddd flag. It logs absolutely anything and everything that happens. Let me show you what I mean.

Demo: 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.)

Slides 19-20

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.

node-red flow for watching a directory for changes

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.

node-red flow for outputting a command to a file

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!

Slides 21-22

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.

Slide 23

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!

Slide 24

Here is where we tie it all together! We can create a switch split up different keywords generated by the npm install command (such as http request, extract, or install,) and output that to a websocket.

node-red flow for outputting npm log to text file and 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!

Slide 25

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.

Slide 26

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 27

Slide containing my contact information:


About Melody

Photo of Melody!

Melody is a web developer, designer, and community event organizer based in Philly. You can find them on Twitter at @pixelyunicorn .


Tags & Sharing

#talks #dev #borojs
Mastodon Twitter View on GitHub Remix on Glitch

Support my work!

I do a lot of things: I write, draw, code, stream, and also drink a lot of tea. I would love to keep doing what I love to do, but these things take time in energy. That's where you come in. By supporting what I do, I have less to worry about so I can go back to doing what I love 💖

Buy me a Taco! Patreon logo Subscribe on Patreon! Remind me later

More Posts