Extreme decoupling or all-as-a-module

I opened my laptop in the morning and found one of my open tabs in Nightly was for Vue.js. I don’t even remember how I ended up there. Was I reading about frameworks? Did anyone send me the link? Who knows!

But I was curious. I am not a megafan of frameworks, but I like looking at them. One, because their idioms are often adopted by other developers, so it’s good to be aware of where are things going. And two, because frameworks do lots of “magic” in the background, and I always want to know how they implement their “magic”—maybe I’ll want to adopt some of it!

So instead of closing the tab, I perused the page. It has a virtual DOM as React does, but they seem to take great pride on their overall minimalism (small file size, little intrusiveness). The examples are amongst the most readable I’ve found for frameworks when it comes to the JavaScript API; the HTML directives are as alien-feeling as most frameworks.

Later I was discussing this strange incident with friends (“I found an open tab in my browser—do you think this is a signal from the universe that I should get into Vue.js?”) and Irina also highlighted the fact that Vue.js “components” might be simpler to build than the equivalent in React, and also be less coupled.

This derived into talking about The Dream:

You know what the dream is? Have everything be an npm package that I can plug in to any framework I like. And everything is packages packages packages


Oprah giving free packages away to everyone
You get a package! And you get a package! And you get a package! And you get a package! And you get a package… everyone gets a package!

(Irina demanded an Oprah themed meme)

And of course this reminded me to earlier conversations with chameleonic Jen about modularising everything and maximising reuse. She would propose, for example, abstracting a card game into separate modules; one for handling the rendering, other for handling card games in an abstract way, another one for handling a specific type of game. This way you could build multiple games by just providing an implementation for the specific game. (Games are notoriously often not built this way).

Likewise, Aria talked about radical modularity at Web Rebels and the notion that if your modules are small enough, they are done. Finished. You rarely need to ever touch them again (unless there’s a bug). Watch the talk: it’s very inspiring.

I really like this “pure” idea, and can work very nicely as long as you keep your data and logic separate from your view.

Unfortunately, the issue is that UI code often intermingles both data and view, so you end up declaring your data as instances of whatever base component the UI is using, which is not very maintainable on the long run. If you want to change the UI you will need to take the ‘data’ bits out of the UI code, or write some sort of adapter between “UI code” and “data”, to have to only change “adapter” when you decide you don’t like your current view layer. This could be a performance hit, so you might want to sacrifice flexibility for performance.

But hey… everything in computing is always a trade-off!


Notes on JSConf Australia 2016

I spoke at JSConf Australia in Melbourne at the beginning of this month. Like in CSS Conf Australia, the videos haven’t been published individually yet, but the event was streamed live, and you can watch it again… and again… and again…

My brain got into one of those intensely obsessive focused moments pre-talk so I will admit I could barely pay attention to the talks prior to mine—I’m really sorry, specially because I heard so many good things about them!

These notes will be shorter because of that. Apologies if you were expecting a full conference review… but sometimes you cannot get everything you want! 😔

And now to the talks!

Jessica Lord: “Electron: A Tale of Two Processes”

This one was a really enlightening talk about Electron’s architecture. I had no idea it worked that way, and my assumptions were basically wrong. It was good to be shown the truth in an amicable way—like Jessica’s! I really enjoyed this talk and that’s big, considering it was right before mine!

Ruth John: “How to be a Web A/V Artist”

Ruth explained the secrets behind her “Web VJ*” set-up and also managed to produce an even smaller MIDI controller than the last time I spoke to her. It’s as if she kept getting Bluetooth miniatures!

She introduced some comedic elements into the talk but I’m not quite sure they worked for everyone… I felt some of the “funny samples” (like the Windows 9x error sounds) were lost on parts of the audience… that were younger than expected!

*Web VJ sounds so much like a new and upcoming API. Maybe… maybe… navigator.webvj.... 😏

Michaela Lehr: “An Introduction to WebVR”

She had an slightly different take on WebVR, which was really refreshing. She also mentioned things rarely mentioned such as the fact that VR can cause strong psychological and physiological responses on some people, and we need to be mindful of that when we design the new experiences in the web. If certain things are VR only, are we going to exclude some people this way?

Lena Reinhard: “Debugging the Tech Industry”

I have huge respect for Lena—she’s always delivering these immensely difficult talks. It’s hard to be the bearer of bad news. And there are plenty in tech!

Weeks after the talk, I’m still thinking about the message, and trying to come up with ways in which we can build tech that is not “accidentally” hostile to everyone who is not the creator of said tech.

Live.JS + Karaoke(.js?)

After the talks were done and we took the “family photo” and announcements were done, the room was cleared and Matt McKegg and Ruth John set up shop to have one of their Live.js events, like the one in Singapore.

I challenged Matt to “dubstepify” his act, which sort worked because his music is super improvisational.

Once they were done, an impetuous bunch of karaokers took up the stage and starting singing with lots of energy and heart and soul, but also lots of misplaced notes. I described this as “this is when the bar is closed, the last patrons get out and they really want to keep singing the last song the bar was playing, and so they keep singing it in the streets”…

This is when I left—and I was so tired anyway, I could barely stand on my feet, no energy left to listen to extremely eager karaokers—let alone join in the party 😜


Like CSS Conf, this was a really chill and enjoyable conference. I had again lots of interesting conversations–more so on this day because people had seen me speak, so they wanted to ask me questions or just discuss ideas they had had!

I also learnt a few things. All good stuff!

If you are ever faced with the possibility of submitting a proposal for this conference, don’t even think about it—do it! It was really lovely and well organised—I’m very glad I was invited to apply and my proposal was accepted!

Also: Melbourne is such an interesting city… lots of things to look at and explore, from street art to museums to neighbourhoods to just buildings, and of course great food and coffee, although I still can’t stop feeling so confused with “Jingle bells” playing on the background while signs for “Happy summer!” and “Merry Christmas” live side by side on the storefronts!

I feel like I’m missing out on the part of Australian culture that has warm reggae Christmas songs instead. If that doesn’t exist—it MUST be invented!

And this is the last installment of “notes on…” for this year, at least!

Notes on Live.JS at JSConf.Asia 2016

I had sketched some ideas for the Web Audio Hackday before flying to Singapore, but I really had to finish them before the actual day came. So I spent Friday doing an intense labour of testing, testing and more testing with the latest versions of the browsers that implement MediaRecorder. Since I was on the business of talking and promoting this API, I was determined to get more people to try it out, but that meant that I needed to be prepared for the “surprises” that working with new and upcoming APIs entail. Namely, that what worked yesterday might not work anymore, and what didn’t might have started to work without prior warning.

That said, my infinitely curious self would not resist flying to such a beautiful city as Singapore and not exploring a little bit of it: I squeezed some time out of the morning to visit the Marina Bay gardens, which again I found baffling (botanical gardens which are cooled down instead of heated!), then did a lot of work, and then later in the afternoon I went to the CSS Conf/JS Conf venue, as Live.JS was going to happen.

And “What is Live.JS?”, you might be wondering. Basically it’s a collective that is dedicated to making audio visual shows using JavaScript. JavaScript!!! It’s a bunch of people, but that doesn’t mean that you will always get the same people in each “show”. In this case, it was

  • Matt McKegg, which would play music using his own Loop Drop instrument for live performances. He built it using Google Web Apps initially, then migrated to Electron when GWA was starting to stagnate. He uses two Novation launchpad controllers, and the sound generation itself is via Web Audio. And it is really impressive, if you ask me!
  • Ruth John, who was VJing. Not sure what the name of her software is, but she makes heavy use of CSS variables (to animate stuff), SVG to draw elements on screen, and of course Web Audio’s Analyser nodes to modify the values of variables, in response to the music being played. Also, Web MIDI so she can use external MIDI controllers to do things such as change layer opacities and switching between effects at the turn of a knob, etc.
  • Martin Schuhfuss, who was controlling the lights in the venue using the DMX512 protocol (which happens to be a close MIDI relative) and a Monumental Hack with CSS property interpolation to run light animations: colour, rotation, focus, etc. This was quite impressive to hear!

I personally I’m a big fan of Matt’s music since I saw him live in CampJS, so I was excited about this event. And of course, I was quite intrigued about the visual side of things. Hearing about the techniques underneath made me giggle and be in awe at the same time: “can’t this be done in a better, proper way, or are these hacks just used for the sheer pleasure of subverting the original purpose of the technology?”, I wondered.

In the meantime, “special cocktails” were served—although they were actually called “codetails” in the leaflet:

  • ES4: Old Fashioned
  • jQuery: Rum Punch
  • Outsourced: Curry and tonic
  • Unicode: Unicorn tears (non-alcoholic)

I had “a jQuery” as it seemed the sweetest of the punch, and chatted around with a bunch of people, then went and admired Matt’s total LoopDrop skills, and wondered again if I’d ever understand how it works for reals.

Then I focused my attention on what the lights were doing: many things. I guess my issue was exactly that: they were doing many things, and I was kind of expecting some sort of carefully built progression which would not happen, because the LiveJS people had just met a day or two ago, and Martin had only had access to the light equipment the same day, because obviously you don’t travel from Germany with a rack of professional light equipment. So there’s only so much you can prepare, and given that Matt’s music is so improvisational, I should probably not expect a heavily synchronised audiovisual show. Still, I couldn’t but admire two facts:

  • a browser was interpolating between CSS values and ultimately this was generating MIDI commands that caused spotlights to move and change colours.
  • that the DMX512 standard did indeed work well enough that he could just show up and control DMX512 lights with his software, without further changes

That was super cool!

People often fixate in the business value of JavaScript, but it’s important to also consider JavaScript as a creative medium which has lots of potential expressivity and also reach by virtue of being online. I’m glad that Live.JS exists to inspire and support this, and I’d love to see even more exploration in this field. Bring it on! 🤘🏼

Here’s the video of this event:

One demo: two new bugs!

I thought that since I was going to the Web Audio Hack Day here in Singapore, it would be great to have a more Web Audio focused Media Recorder demo, so I built a little demo that essentially asks for audio permission, then records a short clip of audio, decodes it as an audio buffer and uses it to loop a BufferSourceNode in Web Audio.

You wouldn’t believe what happened next… or would you?

Two Things That Happened When Sole Ran This Demo

1. Chrome Canary Just Totally Gave Up

Aw, snap!

I filed a bug, since there wasn’t really much I could do…

2. Nightly Sometimes Insisted In Returning Some Mysterious 596 Samples Length Which Was Totally Not What I Expected, And Did So Without Following Any Meaningful Reproducible Pattern

596 samples for some reason

I tried to dump the contents of the returned blob once read as a buffer, using String.fromCharCode–perhaps looking at binary data while having my breakfast coffee would enlighten me?

I eat hex dumps for breakfast

As it turns out, no. So I filed another bug.

Try this yourself maybe?


The demo is here: instalooper (sources) … just in case you want to play with the code–maybe it will be fixed next month, who knows!!? Or maybe it is just a bug in my machine and it works in everyone else’s!

Disclaimer: I have not tested this anywhere else than Nightly and Canary. So I’ve no idea of how it works (or not) in mobile.

I have a more complicated version that not only loops the sample but also randomly changes its playback frequency. Sometimes the generated sounds are strangely fascinating. It still needs a bit of interface work, but hey… watch out, Steve Reich! 😎

And now… time to prepare to go to the airport and fly to Melbourne for JSConf.AU! More jetlag, YAY!