Tag Archives: javascript

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

Assorted bits and pieces

As we wrap the year and my brain is kind of hazy with the extra food, and the total shock to the system caused by staying in Spain these days, I thought it would be a splendid moment to collect a few things that I haven’t blogged about yet. So there we go:

Talks

In Hacks

We were brainstorming what to close the year with at the Mozilla Hacks blog, and we said: let’s make a best of 2014 post!

For some reason I ended up building a giant list of videos from talks that had an impact on me, whether technical or emotional, or both, and I that thought would be great to share with fellow developers. And then the planets aligned and there was a call to action to help test video playing in Firefox, so we ended up with You can’t go wrong watching JavaScript talks, inviting you to watch these videos AND help test video playing. Two birds with one stone! (but figuratively, we do not want to harm birds, okay? okay!).

Since it is a list I curated, it is full of cool things such as realtime graphics, emoji, Animated GIFs, Web Components, accessibility, healthy community building, web audio and other new and upcoming Web APIs, Firefox OS hardware hacking, and of course, some satire. Go watch them!

Mine

And then the videos for some talks I’ve given recently have been published also.

Here’s the one from CMD+R conf, a new conference in London for Mac/iOS developers which was really nice even though I don’t work on that field. The organiser watched my CascadiaJS 2014 talk and liked it, and asked me to repeat it.

I’m quite happy with how it turned out, and I’m even a tad sad that they cut out a bit of the silly chatter from when I jumped on the stage and was sort of adjusting my laptop. I think it was funny. Or maybe it wasn’t and that’s why they cut it out :-P

Then I also spoke at Full Frontal in Brighton, which is not a new conference but has a bit of a legendary aura already, so I was really proud to have been invited to speak there. I gave an introduction to Web Audio which was sort of similar to the Web Audio Hack Day introduction, but better. Everything gets better when you practice and repeat ;-)

Podcasts

Potch and me were guests in the episode 20 from The Web Platform, hosted by Erik Isaksen. We discussed Web Components, solving out problems for other developers with Brick, the quests you have to go through when you want to use them today, proper component/code design, and some more topics such as accessibility or using components for fun with Audio Tags.

And finally… meet ups and upcoming talks!

I’m going to be hosting the first Ladies Who Code meetup at London of the year. The date is the 6th of January, and here’s the event/sign up page. Come join us at Mozilla London and hack on stuff with fellow ladies who code! :-)

And then on the 13th of January I’ll be also giving an overview talk about Web Components at the first ever London Web Components meetup. Exciting! Here’s the event page, although I think there is a waiting list already.

Finally for-reals I’ll be speaking at the Mozilla room at FOSDEM about Firefox OS app development with node-firefox, a project that Nicola started when he interned at Mozilla last summer, and which I took over once he left because it was too awesome to let it rust.

Of course “app development with node-firefox” is too bland, so the title of the talk is actually Superturbocharging Firefox OS app development with node-firefox. In my defense I came up with that title while I was jetlagged and incubating a severe cold, so I feel zero guilt about this superhyperbolic title :P

Merry belated whatevers!

Why I check for length === 0

A few weeks ago (or was it a few days ago? ahhh, holidays) I had my code reviewed by a colleague, who suggested I replaced all appearances of

if(whatever.length === 0) {

with

if(!whatever.length) {

I said I preferred to just leave it as it was, as I found it easier to scan visually. I find the strict comparison with zero highly stands out when you’re reading code, which is what we most often do as programmers.

What I didn’t also express is that there is a certain cognitive dissonance when I see the if(!whatever.length) part. It sounds like “if whatever has not length, then…” which is not what I want to express, and is also distracting: “what do you mean if it has length, can it not have length, and why should I be worried about that?”

Or also, if you’re not familiar with precedence rules, you might wonder if it’s applying the NOT operator to whatever itself. Why would we do that? What would that mean? It’s confusing.

I don’t want people unfamiliar with coding to agonise over my intentions. I want them to look at the code and immediately go: “oh, so we want to know if there is something in this array. We want to know if it’s empty, therefore we want to know if it has zero elements, so we’ll look at its length property”.

That’s it.

There’s another reason why I don’t like to use this style and it’s the lack of consistency it engenders. Suppose you want to look for whether the array is empty, whether it has exactly one element, or whether it has more than one, at different points in the code. So you might end up with something like this:

if(!array.length) {
  // if it's zero
}

// ...

if(array.length === 1) {
}

// ...

if(array.length > 1) {
}

We are enquiring about the same thing all the time: the amount of items in the array. But we are doing it in slightly different ways. This is, again, very confusing, both when you’re new to programming and when you’re tired, because you have to make an argument of why using one versus the other, and those are mental resources you’d better spend solving your actual problem. Better be consistent and use the same style everywhere. You’ll be just “wasting” a few characters, but gaining a lot of time. And code uglifiers can take care of compressing your code to the very minimum, anyway.

Moreover: using truthy values such as in this case feels like the ghost of C code past*, where boolean didn’t exist as a data type until very recently, so all boolean-like values were held in integer-typed variables, and anything with a value of zero evaluated to “false” and anything not zero was “true”. That gives way to code like this:

file = open("todo.txt", O_WRONLY);

if(file) {
  /* we could open the file */

where if the todo.txt file can be opened, the file variable will hold a bigger than zero value representing the file descriptor, and hence it will be “true”.

But not everyone that comes to JavaScript has a C background, so I fear that each time I am “clever” and use one of these I am making it harder for new people to use or learn from my code.

Since I am sufficiently convinced that I am clever, I don’t need to demonstrate it by writing pseudo-obscure code constructs. So I’d rather use my cleverness to write code that is crystal clear and expressive :-D

* will you excuse the BAD PUN?

Tools for the 21st century musician—super abridged dotJS edition

I attended dotJS yesterday where I gave a very short version of past past week’s talk at Full Frontal (18 minutes versus 40).

The conference happened in a theatre and we were asked not to use bright background so I changed my slides to be darker and classier.

It didn’t really go as smoothly as I expected (a kernel panic a bit before the start of the talk, and I got nervous and distracted so I got more nervous and…), but I guess I can’t always WIN! It was fun to speak in French if only one line, though: Je suis très contente d’être parmi vous!–thanks to Thomas for the assistance in coming up with the perfect presentation line, and Guillaume and Sasha for listening to me repeat it until it resembled passable French!

While the video is edited and released, here’s a sample in the form of slides, online and their source code in GitHub.

It was fun to use CSS filters to invert the images so they would not be a big white block on top of a dark background. Yay CSS filters!

.filter-invert {
    filter: invert(100%) brightness(2);
}

Also, using them in transitions between slides. I discovered that I could blur between slides. Cinematic effects! (sorta, as I cannot get vertical/horizontal blur). But:

.bespoke-active.emphatic-text {
  filter: none;
}
.bespoke-inactive.emphatic-text {
  filter: blur(10px);
}

I use my custom plugin presentation-fullscreen for getting real fullscreen in my slides. It’s on npm:

npm install presentation-fullscreen --save

then just

require('presentation-fullscreen');

will add a new option to the contextual menu for making the whole body go fullscreen.

I shall write about this tip and how I use bespoke.js in general, and a couple thoughts and ideas I had during the conference soon. Topics including (so I don’t forget): why a mandatory lack of anonymity is not the solution to doxxing, and the ideal talk length.

Full Frontal 2014

I had the honour and privilege to speak at Full Frontal this year. I also had the chance to watch most of the talks, so here are some notes and thoughts on the ones I was able to watch (I was too late for the first ones, and I’m so sad, because I’ve heard they were so good!).
Continue reading