Category Archives: Projects

A three.js npm template

rotating demo cube

I can’t imagine dropping a series of <script> tags on a page to build a minimally complex website anymore. I’ve got used to browserify and so I can’t go back to building my fancy 3D thingies like it was 2012 all over again.

So I made this minimal template that sets the bare minimum you might need to build a three.js powered site using browserify via gulp. That lets you use any other npm-based modules and libraries you want! So your code should not be messy and/or a tremendously big file with everything tucked on it.

There’s also some extra help like a file watcher… and not much more, really.

Do let me know if you use it for something cool… or if you can/want to help on this issue! 😀

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

“The disconnected ensemble”, at JSConf.Budapest

Here I am in Budapest (for the first time ever 😮)! I’m back in the hotel after having a quick dinner on my own. I didn’t join the party because I had a massive headache and also I was getting so sleepy, no coffee could fight that (also probably the two things were related). But once I started wandering towards my hotel I found myself feeling so much better, and stumbled upon a cosy nice place and ended up stopping there for some food.

When I came back from the speakers’ dinner yesterday, I practiced setting up all my stuff and going through the demos again, which are in fact ran on real, physical devices, i.e. phones.

Continue reading

Running a web server on the front-end

The introduction of TCP sockets support in Firefox OS made it possible to run a web server from the front-end, and all is written in JavaScript. Think of having something similar to express.js… but running on a browser (because after all, Firefox OS is a superturbocharged browser).

Again, JS server superstar Justin d’Archangelo wrote an implementation of a web server that works on Firefox OS. It’s called fxos-web-server and it includes a few examples you can run.

None of the examples particularly fit my use case–I want to serve static content from a phone to other phones, but the examples were a bit more contrived. So I decided to build a simpler proof-of-concept example: catserver, a web server that served a simple page with full screen Animated GIFs of cats:

Continue reading

install-to-adb with command line tool!

As I said, I abhor repetition, so I added a new nifty feature to the install-to-adb module I made.

Now it also has a command line tool, and you can push and launch apps from the command line without even having to write a custom script that uses the module (of course, you can still use the module code by requiring it).

install-to-adb /path/to/your/firefoxos/app --launch

Continue reading