avatar

Michaël Duerinckx

 

Adding stereo VU meters to a turntable

My fiancée got me a great gift for my last birthday: a turntable. Being a classic trance lover, I’ve since been collecting a bunch of records. The thing has really been a source of joy thus far.

About a month ago I started itching to do a little electronics project again as it had been a while. Long story short, I figured it’d be neat to open up this relatively simple device and add a nice aesthetic feature to it: VU meters.

Since this is a rather involved hack, (as opposed to my line-in addition to a boombox), it gave me a good reason to finally check out Southampton’s maker/hackerspace, SoMakeIt.

Turntable with lit LEDs along the diameter of the record it's playing

Read more »

On Brendan Eich, Mozilla, and equal rights

This opinion piece is on current events, and given the slow update nature of my blog, I’ll give it some context before going forward.

It’s worth noting that I’m a complete outsider to all this; I don’t work and haven’t worked at Mozilla, and I don’t have close ties with anyone who did or does.

Background

Brendan Eich is the inventor of JavaScript, and the co-founder of Mozilla, the company and foundation behind the popular Firefox web browser. He was the chief architect back in 1998. In 2005, he became CTO of Mozilla Corporation.

In March 2008, Eich donated $1,000 in support of California Proposition 8, which goal was to eliminate same-sex couples’ marriage rights. Under California state law, this donation became part of the public record. Donors had to list their employer, so Brendan Eich’s donation was listed under his name, with Mozilla listed as his employer.

In 2011, someone noticed that his name and “Mozilla” were on that public record, and publicized it. This apparently needed clarification, because some people must’ve thought this donation was actually backed/condoned by Mozilla. (Spoilers: It wasn’t.)

On March 24th, 2014, it was announced that Brendan was appointed the CEO position at Mozilla Corporation. The public suddenly brought up his 2008 donation again, and a media firestorm ensued. Some Mozilla Foundation employees requested Eich to step down via Twitter, and the tech press picked up on this.

Several blog posts, both by Mozilla and Eich personally, were made, clarifying that Mozilla is an inclusive and diverse company, and in full support of LGBT (and then some) equal rights. Brendan clarified that any convictions conflicting with this are always left at the door before entering the Mozilla office.

Still, the firestorm raged on. OkCupid, possibly the most popular dating website, put up a note on their homepage for all Firefox users, which ended in requesting they use a different web browser. They later took this down again, probably when they realised that the 2008 donation was private, and that Mozilla does not condone it. This blog post by Mozilla probably helped with that.

On April third, Mozilla’s blog announced that Brendan Eich stepped down as CEO. He was not pressured into this, but felt that the whole firestorm was very much a detriment to what he and Mozilla were trying to accomplish. As far as I know, he has severed all financial ties with Mozilla, remaining only the manager of a number of bits of source code.

My opinions on the donation

I believe that all humans should be able to live their lives in a way that brings them fulfilment and happiness, insofar as this does not impede on other humans’ right to the same.
Read more »

Hacking a line-in socket into an 80s radio and cassette player

A few years ago, my grandmother gave me one of the old radios she had lying around the house. My late grandfather’s hobby was participating in radio quizzes, which led him to win a lot of radios; I assume this was one of them. The radio was manufactured in the early 80s, so the guts are relatively easy to tinker with; everything is on single-layer PCBs.

Frontal photo of the radio before any alterations were made, showing buttons on top, speakers on either side of a cassette deck, slider buttons, a radio tuning dial across the top, and sound volume indicator lights
The radio, as it looked before opening it up

I realised that the audio quality of this old boy was really decent, so it would be a waste to just let it sit in a cupboard. I don’t generally listen to the radio that much, and I don’t exactly have a big collection of music on cassettes either (and if I did, I’d digitize it anyway). To really get some use out of it, the most logical thing would be to have a line-in, letting me hook up a phone or whichever external audio source.

So, I set to work, opening the machine up.

Photo of the radio laying down on its back, the front part of the case taken off. Revealed is the mechanism of the cassette player, various sliders, PCBs with various components on the left and right, and the transformer on the far left.
The front part of the case taken off, which removes the speakers

Read more »

Embedding a player on Facebook: A guide

Last weekend I had a mission: to build a player component for instaud.io that could play audio people linked to, right in Facebook news feeds. I found that there are plenty of excerpts on how to go about this, but most of them are based on outdated links to Facebook developer documentation. It bugged me greatly that Facebook didn’t bother setting up redirects to relevant pages after restructuring their docs.

Anyway, I think this would work best as a step by step guide. I’ll go through the steps I’ve had to learn about; you may want to skip over some if you’re already know what you’re doing in them.

1. Build your player in Flash

I downloaded the Adobe Flash trial for this. You’ll want to create a stage that is not much wider than 500 pixels. I went with 504px. What you’re going to be playing depends entirely on you. My purpose was simply to play audio files (MP3s), so I used Sound and SoundChannel to control that. The audio file to be played was requested with an URLRequest object.

If you want a more thorough introduction on how to set up a simple sound player, this video from 2008 is still a good starting point, even with the latest version of Flash (12, CS6):  Build Simple Sound Player: Flash Tutorial AS 3.0

Using parameters

The important part about the ActionScript is using parameters. Parameters will be passed to the eventual SWF through the querystring, that is, the bold part in this URL: http://example.com/my-player.swf?param=value&otherparam=value

In ActionScript (3), you can access these variables the following way:

loaderInfo.parameters.parameterName

To check if a parameter is actually present:

loaderInfo.parameters.hasOwnProperty('parameterName')

This way you can use default values for parameters:

var myParam = loaderInfo.parameters.hasOwnProperty('myParam') ?
    loaderInfo.parameters.myParam :
    'defaultValue';

Since hasOwnProperty returns a boolean value (true or false), this statement assigns either the value of myParam from the querystring, or 'defaultValue' if no such parameter was specified, to the myParam variable. It uses a ternary operator.

2. Export the SWF file and include it in your website’s assets

This is fairly straightforward. You’ll want the swf to live someplace where it’s directly accessible. I let mine live in the document root directory.

3. Add Open Graph meta tags to the page

This is where the Facebook magic happens.

Read more »

Event-driven JavaScript: a simple event dispatcher

One of the more valuable lessons that I’ve learned in the years I’ve been programming is that loose coupling will make your life better. A very good way to achieve loose coupling in your projects is by dividing functionality in self-sufficient modules that communicate merely by subscribing to and triggering events. To work with these events, you need one component that is relatively tightly coupled with all your modules. This little bit of coupling is definitely worth it though.

Before diving into specifics, let’s talk about just what I mean.

Loose coupling

When the code base for a project gets sizeable, one thing that can make it a nightmare to work with is tight coupling. When modules are tightly coupled in a project, it means that changing one method in module A may require you to change the way certain things are implemented in module D, F and G. In order to make any modifications, you need to be well aware of how other modules rely on the module you wish to modify.

Since having a single module in your head can be taxing enough for the mind, considering basically the whole project when making a local change is awful; oversights are bound to occur.

To ensure you do not need to wrap your head around the entire code base at all time, you’ll want to make sure your modules are loosely coupled. You can safely change the modules’ internals without having to worry about how other modules have to interact with this module. You need to consciously engineer your modules to be entirely agnostic of the inner workings of others.

You’ll find that employing this method makes it much less of a daunting task to change some functionality around.

Bring on event-driven programming

Event-driven programming is a fairly simple pattern where component subscribe to events and trigger them. A variant of the pattern is the observer pattern; the difference however lies in where the event dispatching happens.

In an observer pattern, you can register observers (subscribers) to event a certain module emits. This way you can subscribe to, for example, an after-save event, which is emitted every time an object’s data is saved. The observer subscribing to this event will be triggered every time that happens, and a function can then be run.

In this case, we move the subscribing facilities away from the modules to a dedicated event dispatcher module. This provides one central location where modules sign up to be notified when a certain event occurs, as well as where modules go to broadcast an event they want to make the application aware of.

Doing this, all each module is concerned with if it comes to communicating with the rest of the application is 2 uniform things: Emitting events and responding to events emitted elsewhere. The modules do their thing, throw out some information whenever there is something that may concern the rest of the application, and they remain alert for external events pertaining to the module in question.

Responsibilities of the event dispatcher

The event dispatcher module that drives this whole pattern has only few responsibilities:

  • Keeping track of event subscriptions
  • Dispatching incoming events to all the subscribers of that event

Read more »