Category Archives: Code

safeRegisterElement

For the project I’m working on I’m building web components that sometimes require other components to build their UI. For example, the theremin-ui uses the slider. So they will try to load and register the component before creating instances of it. It worked fine when there was only one level of dependencies, but then I put all of the components on the same document, to let the user choose an instrument from the collection of Web Audio instruments, and I got an error from the browser complaining about… something:

NotSupportedError: Operation is not supported

I traced it down to the register() call, and I figured that I was registering an element twice. So I made safeRegisterElement, a one-function module I’m using now instead of directly calling document.registerElement:

var safeRegisterElement = require('safe-register-element');

// safeRegisterElement(type, prototype);
// e.g.:
safeRegisterElement('custom-name', customElementPrototype);

All my custom element modules have a register method that uses safeRegisterElement internally (this lets you register the element with whatever name you want to use).

In npm: https://www.npmjs.com/package/safe-register-element
And sources: https://github.com/sole/safe-register-element

Loading webcomponents-lite with require()

I just realised that the Web Components polyfills not only are in npm so you can install them like this:

npm install --save webcomponents-lite

but they also have a well formed package.json with a main entry.

So if you’re writing your front-end code with Browserify and want to load the polyfill without adding an additional script tag, you can do this:

require('webcomponents-lite');

and this pulls the polyfill into the scope.

NICE! Thanks, Addy :-)

PS I guess this should also work with webpack, if you’re so inclined.

Enabling Wi-Fi direct on your rooted Firefox OS device

I’m doing some research and playing with this new-ish API which is available in Firefox OS on rooted phones with Certified apps etc etc. Guillaume wrote a post on the Hacks blog–read it if you’re interested in what can be accomplished.

The very first thing you need to do is to enable Wi-Fi direct on the device. This involves running some commands as root, via adb. Justin made a gist which worked with Flame phones, but it didn’t work with a Nexus 4, because of the way the /system partition is mounted on those phones.

A (more?) fail-proof way should be this:

#!/bin/sh
adb shell "mount -o rw,remount /system"
adb shell "stop b2g"
adb shell "echo \"ro.moz.wifi.p2p_supported=1\" >> /system/build.prop"
adb shell "mount -o ro,remount /system"
adb reboot

this will add a line to the /system/build.prop file and reboot the device.

Once it’s rebooted, the result of navigator.mozWifiP2pManager.enabled should be true, which is GOOD NEWS!

Remember that you need to run that code in

  1. a certified app
  2. request the wifi-manage permission in the manifest

So essentially your manifest.webapp MUST contain the following fields in addition to the rest of fields you usually have:

{
  "type": "certified",
  "permissions": {
    "wifi-manage": "for wi-fi direct"
  }
}

Hashing passwords with Bcrypt and node.js

I have a little pet project that I’m using to learn Hapi.js.

Today I wanted to add authentication and since this is, as I said, a tiny little mini project, I want to only allow specific users (actually, just me) to log in, and not everyone+dog using bell or something of that sort. So I thought I’d go for hapi-auth-basic.

This module performs, not surprisingly, an HTTP basic authentication, and also wants a password hash generated with Bcrypt. I didn’t really find a command line thing that would generate the hash for me on this mac computer in a convenient fuss free way, and I also didn’t really spend hours looking because it’s Saturday, so in my most pragmatic move of today I decided I would just write a little snippet of code that would hash and verify the password using JavaScript.

So here it is, roughly based off this post of using Bcrypt with mongoose.
Continue reading

Danger Dashboard: for the adventurous `dom.webcomponents.enabled` enablers

You know the drill, you go to about:config, look for dom.webcomponents.enabled and turn it on because you want to try some new feature in Firefox. And then you visit some other website which relies on said support to be fully complete and all hell breaks loose… or it just breaks in variously spectacular degrees of fail.

Wait, no more–now you can install this fantabulous add-on called Danger Dashboard which will overlay a little dashboard on the bottom right corner of each website you visit, so you can

  • spot if the site is loading a polyfill
  • or spot if the site is using web components natively
  • and also toggle web components support without going to about:config, because it gets tiring after doing that many times on the same day

Toggling dom.webcomponents.enabled in one of Mozilla Brick’s demo components, brick-deck

toggling
Continue reading