ES2015 Generators

I have written a guest blog post, “ES2015 Generators“, on the eNotes developer blog:

Recently I had the opportunity to re-write the content tree control that we use to manage content nodes in www.enotes.com. We’ve all worked with the DOM, which represents HTML nodes in a tree structure but has some challenging deficiencies and a relatively grumpy API, the tortures of which prompted me to take a stab at a smoother tree-like design. During this process I experimented with several approaches to managing nodes in a tree structure, the first of which was a “flat hierarchy” which is as obtuse as it sounds and didn’t get much traction. I then opted for the more traditional parent/child approach, but still wanted a way to treat an entire tree of nodes in a “flat” manner. The ES2015 generator function was my solution…

Read the rest of this article on the eNotes developer blog.

JavaScript Frameworks for Modern Web Dev

JavaScript Frameworks for Modern Web DevI am thrilled to announce the publication of my newest book, JavaScript Frameworks for Modern Web Dev, available now from APress!

A year ago my friend and former co-worker Tim Ambler approached me with a project: a list of strong frameworks and libraries in the JavaScript space that can each be effectively introduced in a single chapter. Over the last twelve months we wrote numerous drafts and revisions, and created a somewhat frightening amount of source code for these sixteen topics:

  1. Bower
  2. Grunt
  3. Yeoman
  4. PM2
  5. RequireJS
  6. Browserify
  7. Knockout
  8. AngularJS
  9. Kraken
  10. Mach
  11. Mongoose
  12. Knex and Bookshelf
  13. Faye
  14. Q
  15. Async.js
  16. Underscore and Lodash

Obviously, the scope of each topic is greater than its chapter, but the book’s goal is to be a quick but thorough introduction to the core concepts in each framework and library. The source code is non-trivial and executable, so a reader can see concepts in action while following along in the text.

Some of the technologies covered have aged (like fine wine!), and some are much younger, but we believe that each has staying power and stands well among its peers. Between us we have used all of these technologies in our own projects and in production deployments, and while we cannot claim complete expertise, we humbly submit that, to the best of our knowledge, the information here is both sound and practical.

We sincerely hope that this book brings much value to you and your team!

 

 

Conditionally adding object methods

I stumbled my way into an interesting experiment today where I discovered that, within a JavaScript constructor function, one might conditionally add a method based on whether the prototype has that method already or not.

This code ensures that when the method `bar` exists on the prototype for Foo, the instance implementation of `bar` added in Foo’s constructor won’t be applied. So the instance implementation is kind of like a “default implementation”. This might really only be useful if a constructor function’s prototype property changes over time, a scenario that is not likely to occur in most applications.

This came in handy for me while writing unit tests, however. I have a complex mock that creates an object for which I control both the prototype used and the constructor function. What I do not control, however, is how the object is instantiated within the module I am testing because it is ultimately instantiated through a factory function. So I can’t intercept the object and just “append” an overriding method onto the instance; the function must be added to the prototype before the object is even created by the factory function. But if a method is created on the prototype AND the constructor defines a method of the same name, the constructor function’s method will take precedence in the prototype chain. Instead, I used the conditional logic shown in the gist above to ensure that the method I define on the prototype (which I control for the purposes of the test) is the one that will be used.

There are probably much better ways to accomplish this. Conditional constructor methods reek like a code smell, so I would probably not implement anything like this in production code. For a little unit test mock, though, it is a fun thought experiment.

hintme

I use jshint to lint JavaScript code in my projects. Typically I include a project-wide .jshintrc file which contains a set of the linting options I wish to be applied whenever jshint scans my code. I keep a gist with a list of all possible options and the settings I normally use. This works pretty well but I thought it might be nice to create a tool that would interactively prompt a user for jshint settings and then create a .jshintrc file based on user response. So I created hintme, a small node.js CLI tool that does just that.

hintme

Right now it iterates through every jshint option and prompts the user for a setting value. Each setting has a default value, which may be chosen by simply hitting enter at the prompt. Defaults were chosen based on a simplistic criteria, one which I tend to refine a bit:

  1. the default for enforcing options is always TRUE
  2. the default for relaxing options is always FALSE
  3. the default for environment options is always FALSE

I also want to add some better command arguments, such as being able to specify known settings via a switch (e.g.: –use=eqeqeq=true;forin=true). The user wouldn’t be prompted for these settings since they’ve been specified already.

The –live=true switch forces hintme to screen-scrape the jshint options page and then prompt the user for the most “current” options instead of using the options.json file included with the hintme module. This is probably a tenuous way to get the most current options but it works for now.

I intend to add a suite of unit tests soon, and probably break up the code a bit. Releases < 1.0.0 should be considered rough drafts.

If you have any feature suggestions please leave a comment!

Use node to change your bash prompt

I use the bash shell with git completion on my Mac. It’s awesome except it makes my bash prompt (PS1) kind of long and ungainly:

I wanted to optimize space in my terminal, so I searched for alternative ways to display the bash prompt and found an elegant solution on askubuntu.com that reduces each directory in PWD to its first letter by evaluating the output of the `pwd` command and piping it through sed (streaming editor).

It works really well, but I wanted the last portion of the path displayed as the full directory name. I’m not familiar with sed syntax, and found myself thinking: I know how I would do this in node.js. So I copied the example, opened `.bash_profile`, and hacked up some code.

Turns out that when you invoke node with the `-e` parameter it will evaluate the string that follows. That gave me the exact prompt that I wanted:

Is it elegant? Not really. Is sed syntax more terse? Absolutely. But you know what, I do what I want and I had fun doing it. 😀

And yeah, I know, zsh.