Tag Archives: javascript

chat.meatspac.es – from fun experiment to global community

I gave this lightning talk at today’s Ladies Who Code meeting in London. I tell the story of chat.meatspac.es, the community that has sprouted around it, and the interesting effect it has had in our lives.

Here are the slides if you want to click on things too! Or the source code for the slides! (someone was very amused because I wasn’t using Powerpoint but just HTML based slides).

What have I been working on? (2014/01)

January is over, what have I done with it?

Well, to start with I’ve been working with the fantastic people from Firefox DevTools. We’re preparing a new feature for the App Manager and I’m really thrilled to be a part of this. I’m not going to disclose what it is yet until I have something to show (it’s my way to make you all download a Nightly build, tee hee), but I believe it’s going to be GREAT.

Then I’ve also been lending my brain to other projects. First, localForage, our library for storing data using the same interface from localStorage, but asynchronously and with better performance (by using IndexedDB or WebSQL if available). Or just falling back to localStorage otherwise (sad face, sad face).

The other project I’m involved with is chatspaces, “a snazzy chat app”. I’ve done some (yet unfinished) work with implementing push notifications using Simple Push, and I’m also working on outputting better GIFs (i.e. smaller but with same perceived quality). If you’re up for a slightly bumpy ride, you can try out chatspaces today.

“Generating better GIFs” means that I’m spending quite a bit of time in Animated_GIF, a library for creating animated GIFs in the browser. I implemented a couple of features like dithering and custom palettes past week and I’m pretty happy with the results you can get. I still have some more work to do before it’s a totally awesome library from README to code to examples, but it’s already used in somewhat popular places like chat.meatspac.es which you might have heard about ;-)

And I’ve also written an article for Mozilla Hacks. If you liked my previous article on unprefixed Web Audio code, I think you might like this one too. It should be published some time soon (fingers crossed).

There are more things that I’ve been doing this month like attending LNUG’s meetup, helping people with their Firefox OS apps, improving documentation for X-Tag, and finding+filing a bunch of bugs… all of which make me terribly happy as I feel like I’m making an impact. Yay! :-)

Compressing files with node.js

I needed to compress entire folders with node.js and I tried several modules until I found one that worked. The one that actually worked for me was archiver, which apparently can do TAR apart from ZIP.

To install using npm just do

npm install archiver

It’s good that you can specify if you want relative paths and all those niceties. Also, it uses streams, which I’m still learning to use, but they’re better than reading the whole thing in memory.

Here’s how you’d use it to add everything in srcDirectory recursively:

var fs = require('fs');
var archiver = require('archiver');

var output = fs.createWriteStream(outputPath);
var zipArchive = archiver('zip');

output.on('close', function() {
    console.log('done with the zip', outputPath);
});

zipArchive.pipe(output);

zipArchive.bulk([
    { src: [ '**/*' ], cwd: srcDirectory, expand: true }
]);

zipArchive.finalize(function(err, bytes) {

    if(err) {
      throw err;
    }

    console.log('done:', base, bytes);

});

For reference purposes, I also tried adm-zip (which gulp-zip uses internally) and node-zip, none of which would produce a working ZIP file (I got CRC errors when uncompressing).

LNUG meet-up January 2014

Yesterday I attended the London Node User Group’s (LNUG for friends) meet-up. It was great to see some known faces, and lots of new ones. Maybe a third of the attendees were new, according to the relatively super unscientific method of raising their arms if that was their first meetup.

There were three short talks.

The first one by Alexandros Marinos was about resin.io, a WIP initiative to make working with physical devices in JavaScript as easy as “git push resin master”. It was great to hear about their previous work on hacking custom Linux distributions and Chromium so that they could be used in those smart rubbish bins you might have seen around the City Of London.

Second talk was by Alex Roche on Arduino and NodeJS. Sadly this is a topic that has been discussed quite a lot already, so it didn’t add much new information to what I already knew. Still I paid attention to the delivery–it was clear, efficient and to the point, which is something I appreciate.

The final talk was by Rowan Manning on UX for node modules. That is something that truly interests me! How do you make it easy for users and potential users of your node modules to know what’s up in your software? How to use it at a glance? Or, as someone from the audience suggested, are you letting them know when your library is obsolete and they should use something else that is much better? There were many things I already do, and many I will probably incorporate too.

So that’s for the talks. But before them I had been speaking to Francisco Jordano about some issues we had when debugging a Firefox OS app, and he showed me a one weird trick for the AppManager that solved my issue and makes everything easier. Megawin!

Then there was a funny thing too, and it’s that apparently I tweeted with the #lnug hash quick enough to win a ticket for London JS conf. Woooohooo! So maybe see you there.

All in all it was a great event. Many thanks to Andrew Nesbitt (@teabass) for organising! I wish I can attend the next ones, but they happen on Wednesdays while I’m having a weekly meeting, so not possible (unless I clone myself). Yesterday’s was a happy anomaly as it was on a Monday because of reasons. Yay reasons!

npm scripts

npm can do much more than just installing packages and resolving dependencies for installing packages. One of the things it can do is running scripts! You might have seen that already:

npm test
npm start

It has a series of defaults. For example:

npm start

will attempt to run

node server.js

You can, of course, redefine those defaults by specifying them in the scripts field in package.json. Suppose my script for launching the server doesn’t live in the root of the project, then I’d have to modify the start script entry consequently. Imagine this very minimal package.json:

{
  "scripts": {
    "start": "node server/main.js"
  }
}

The defaults can be called with just npm something, and there’s a list of default scripts npm recognises in the script documentation page. Some are very handy because they get called automatically before some scripts are executed. For example, if you run npm test, the pre-test script will also be automatically run before (if it has been specified). You could use that to make sure your bundles are updated before testing them.

If you want to run a script whose key is not one of the defaults, you have to invoke it in a slightly different manner. Suppose it’s specified here in your scripts:

{
  "scripts": {
    "my-specially-named-script": "echo \"NICE\""
  }
}

You would then run it with

npm run my-specially-named-script

As you can see it’s not too complicated, and the whole thing is very minimal and obvious, which I like.

If you want to learn more about “advanced” uses of npm and scripts, be sure to read the excellent Task automation with npm run from the always inspiring substack.