Promises, promises (in Javascript)

This is a short explanation of what promises are, and how they work.

You're probably familiar with callbacks, where you pass a function as an argument to another function, like this:

   f( function b() {...});

When f does something, usually taking some time, it runs b.

Promises are just callbacks with a little more structure.

There's a library called Q that's influencing frameworks like Angular. Q's most visible quality is that it uses a differen syntax:


Demo of rotating an element to make a "dial" or "knob" ui element

Here's a little bit of code that shows how to create a "dial" knob that you can control with the mouse. It's entirely in HTML, CSS and Javascript.

It's not hard, but there are a lot of little details to make it look reasonable and not completely goofy. I think it moves a little weird - and it should respond to both x and y axes, but doesn't.

The sum of two sines, with an offset.

Javascript Double Exclamation

It's a way to cast any variable to a boolean.

var x = true;

!!x === true; // this is a fact

Sometimes, we do a check on an object:

if ( {

However, if we assign a variable like this:

var isFoo =;

isFoo will now contain a reference to 
If you want isFoo to contain the truthyness of, you do this:

var isFoo = !!;

Nesting Angular Directives

I've been learning how to write directives, and it's really tough to grok how to do it. This blog post's been rewritten three times so I don't come off as totally ignorant about the "right way" or "the Angular way" to do things.

What I'm trying to do it implement a menu display with lightweight, role-based control over what is displayed.

My first iteration was done entirely with controllers, HTML, and jQuery and plain Javascript. That was clearly not the Angular way, so I revised it a little bit - CSS animations, and let's use directives.

Angular Service and Factory

I was reading the docs, and read things that seemed to contradict what I thought. I thought that Services were singletons, and Factories were instantiating new instances. It turns out that's not quite right. It's explained well here.

Base32 Encoding and Decoding in Javascript

This is a simple implementation of base 32 encoding and decoding that conforms to RFC 4648.

Battle of the Naming Conventions (how to avoid them in Django REST Framework)

Python and Django like snake_case.

AngularJS feels like Java, and likes camelCase.

HTML likes dashed-words.

MySQL docs like snake_case, but I see more PascalCase used in databases. It's case-sensitive, too. uses PascalCase for tables/classes, and camelCase for columns/properties/fields. That's like Java OOP.

Django likes to append _id to your primary keys.

So... the problems start to happen when one piece of named data is passed from one layer of the system to another. It's just a good policy to use the same names at all layers, if possible.

Benchmarking String Function to camelCase

I needed a function to turn snake_case to camelCase. The reason why? Angular and Javascript are better with camelCase, and Python and Django prefer snake_case. I tried working with both in the Django side, and it wasn't pretty. Even worse, I lost track of when I switched from one to the other, if I switched at all. So, I'm going to try renaming the keys as they are handed off from Django Rest Framework to the Javascript.

The AngularJS File Upload Blues

I've got the angular file upload blues. It's hard to upload files in Angular JS. Who was to know?

One solution.

A nice module called angular-file-upload.

Angular JS Doesn't Suck

So I read this somewhat legendary rant about how JQuery is better than AngularJS, and AngularJS will fail. It's not going to fail.

It's just hard to learn. It's also verbose. You could say the same about any of the OO descendents of C. The difficulty generally comes from learning where your code should reside in the framework. Verbosity is just part of writing larger programs, and Angular is about writing larger programs. Maybe not large programs, but larger than a thousand lines.

My Second Angular Directive - Menus

This was downright difficult. The good news is that the code got a little shorter, the HTML is a LOT shorter, the menu settings are in a shorter config file, and the direct manipulation of the DOM has reduced significantly.

When the user clicks on a menu item, here's what happened:

The original scanned the DOM to toggle off the current item. Then toggled the new item.

Now, the new version maintains a copy of the menu configuration, and alters this model. A loop scans the model and sets a "selected" bit, then triggers the animations.

My First AngularJS Directive: Stretchdown - stretches an element to the bottom of the window.

I've made may first directive! OK, not that special, but to me it is. This is one of the more difficult features I've come across in Angular, and I still don't really "get it".

I'm not even going to do a code walkthrough, because I can't really explain it well. The easy part is calculating the height the element should be. The tricky part is implementation.

Tiny Javascript Cookie Library

This is one of those "why bother with an external library" moments. Mostly copied from MDN.

Button to Scroll to Top of the Page

Mobile websites all seem to have this button, which appears when you've scrolled down a bit. The button scrolls you back to the top of the page, where most of the menus reside.

Using strings to create functions

One of the less-used features is the Function() object, which can turn a string of Javascript code into a function. This is an example of how it can be useful.

Syndicate content