Browserify libraries that can be tested with Jasmine... before they are rolled up by Browserify

This is part of a series of notes about bringing a JS project, sf-active-js, over to a contemporary Javascript development environment.

This is a trick to write modules that are testable in a browser, without subjecting the test to Browserify. Why?

I want to develop without the compilation step. It's easier and faster to work in the browser. (This particular app is mostly DOM manipulation, so headless isn't important.) Once the module has settled down, it can be added to the library.

The rest of this note assumes you know the Jasmine sample test runner included with the distro.

Notes on migrating to a contemporary javascript development environment

I'm writing this after writing the first two notes in this series about migrating sf-active-js to a contemporary Javascript development environment.

I wrote the original experiment a couple years ago. It's a JS client that retrieves some json data from the server, and displays it. I ran out of time, and didn't finish it then.

Upon revisiting the code, I found it a little confusing. It was around 800 lines of jQuery-style JS.

Node Package Manager, Bower, Yo, Jasmine Beginner Notes

Some rough notes related to the JS development toolchain. I've known JS for years, and have done Crockford-style dev a while, but this JS toolchain stuff is mindblowing and pretty complex. The docs are also pretty confusing. So these are rough notes. Not really a tutorial or the voice of experience.

Local, Global

"Local" means "local to the project".

"Global" can mean "global to the computer" or "global to the user, meaning really local to the user, but global across multiple projects."

It's a bad idea to install things globally to the computer system.

One Event Bus to Rule Them All! d3 dispatch, the d3 event system, notes

Learning d3 events this afternoon. These are the notes I'm taking while I'm learning it. I hope it helps.

It's called d3.dispatch. d3.dispatch('eventname1','eventname2') returns an object that manages setting event handlers, and dispatching events. The event system isn't global (unlike in most frameworks, where the event system appears to be globally available)- it's contained entirely within the object.

Bitten by the "this" scope issue in JavaScript callbacks

I took a step away from Angular and jQuery style coding conventions and dropped back to the traditional JS-style OOP, mainly because I wanted to get familiar with regular JS programming using the MDN docs, and learn the new HTML5 calls (which aren't new anymore).

I ended up coding using an MVC style, and consequently, added an event handling system. It was easy-but-cheesy so I eneded up using Backbone's event system. (It makes me look more hip.)

BTW, here's one way to use Backbone events within traditional JS code:

FooController = function() {
  var obj;

Parallax Effect

This is a short snippet of code to do the popular "parallax" effect for headings. This code has two boxes. The second box helps you see how to deal with a box that's not at the top of the page.

There's not much to it. You make some boxes and set the background-position based on the window.scrollY value.

        <style type="text/css">
            #box1 {
                height: 350px;
                background-image: url(trafficjam.jpg);
            #box2 {
                height: 350px;

What is Dependency Injection?

I've answered this a couple times so I'm writing it down :)

DI is a way to separate services from the code that uses those services.

DI makes testing easier. It also allows the services to be replaced with alternatives - but this is less important than the testing.

DI is used in Angular, Zend Framework 2, Symfony and more frameworks.

DI is implemented as an array or dictionary of services with generic names. Services are created during startup, and registered.

CORS, Angular JS, and, together, didn't let me login twice.

Things were going well with a re-architecting and re-factoring of a service to use Angular's awesome $request, and Django REST Frameworks' awesome ModelViewSet generics. As usual, when things are chugging along, you come across a weird bug that just sucks you in for a while. The bug I hit today involved CORS, AngularJS, and Parse (we're using Parse for part of our backend).

The symptom was that, if I logged in once, then logged out, I could not log in again. I could reach the server, but it wouldn't let me do the exact same thing I'd done just 30 seconds before.

Should Javascript Code Blocks be Delimited with Parentheses?

This is some some random thought I had.

I'm annoyed that I often need to terminate with this "})".

It would be easier, in some editors, to terminte with "))", because the editor will show you the matching parentheses.

Let's see:

function z(x)(return x+x;)
applying(a, function(x)(return x+x;));
var z = generate_function(function(x)(return x+y;), y);
if (x==y) (return x+y;) else (return false;)
for(var i=0;i<x.length;i++) (document.write(i))

Maybe it would work.

Not Hating on HATEOAS

There's been some loving and some hating on HATEOAS (which I don't know how to pronounce), but I'm starting to get it. See: REST Cookbook, Timeless, and PayPal's API.

The core idea is, in addition to the data, you send over some information about the possible URLs you can use as a next step.

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.

Cast any Javascript Value to a Boolean with 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.

Syndicate content