Testing Hapi Plugins

Recently, I have found myself needing to build out some authorization modules for both Hapi and Express applications. Hapi has become my server of choice, and building some fully testable plugins has been a priority. In the process, I have learned several techniques that have really streamlined my testing.

There are a few tools I’ve settled on for the baseline structure of my testing:

Mocha
Test runner and base framework
Chai (Chai.expect)
Assertion library
Sinon
Mocks, Stubs, Spies and many other useful helpers
Supertest
Simplifies assertions against explicit routes in our server
Nock
Mocks Node’s HTTP request library for injection of responses

Continue reading →

Tracking Room Usage

At work, my team has been working on an extremely intriguing project to see whether or not we could devise a solution to allow us to accurately track the usage of our meeting rooms. The initial project was intended to simply help individual contributors find a currently open space in which to meet with a coworker for an impromptu meeting, but it has grown into much more. As the data has started rolling in, we are discovering the ability to analyze room usage and actually advice facilities management on which areas could stand some additional optimization.

testing0

Charted above is an example of the data we have been able to start visualizing. While I cannot share actual internal Disney data, this sampling is  representative of the type of metrics we are gathering. Interestingly enough, when we overlay the data collection with the bookings of the rooms in Outlook, we can start identifying trends with people who might book rooms on recurring schedules but seldom use their allocated time.

Continue reading →

Client Side Testing: a Baseline

Those who well know me and my work understand my passion for coding things right the first time. Take a little extra time to architect something, and you will save yourself hours, days or – in some cases – weeks of development time down the road. What better way to assure your code is meeting your own exacting standards on the client layer than to establish some good testing practices.

In an attempt to aid developers with less testing experience in setup and execution of client testing, I have created a new repository on Github to help with a testing baseline from which each can develop his own processes: Client Testing Baseline.

The only prerequisites is installation of NodeJS. See the README file in the repository for details on what test environments and additional code assistance tools are included.

Triggering True onChange Event for Text Fields

Something I’ve run into on multiple occasions is the desire to be able to trap the change event of text fields and textareas – not just on blur but when their value actually changes. I will assume some basic understanding of how DOM elements behave and that, while the input and textarea nodes have change events, they don’t actually fire in all browsers until you move away from them. This led me to thinking that there has to be a somewhat optimal way to trigger an event on those fields only when their value changes. If you’ve ever tried something like this before, you may have settled for a combination of listening to keypress and keyup events to get your desired behavior across all browsers, but once again, you have to attach this to all. elements on which you wish it to behave. jQuery once again allows us to develop a very simplistic solution in a relatively tiny bit of code:
Continue reading →

WordPress Plugin: Ajax and WYSIWYG Comments

I spent a good bit of time on Google and the WordPress Codex trying to figure out the best way to customize comments to use Ajax for posting. I finally decided to write my own plugin to solve the issue, since there are a lot of ideas but no real concise nor comprehensive solutions that worked across the board. Additionally, I wanted to offer the capability of using a custom version of the built-in WYSIWYG editor (TinyMCE) to users for comment modification as well. If you have some time to check it out and leave me some feedback, I would appreciate the input!

Custom Google Voice Widget Creation

If you use Google Voice, you may be familiar with the option of creating widgets that you can place on your website which allow people to enter their phone number and request to be connected to your Google Voice number. There are several benefits to this type of behavior, but the best of these is that you can offer people the opportunity to call you without ever publicly displaying your phone number. What’s more, each new widget creates a unique buttonId associated with it that allows you to record a custom voicemail response for users of that widget.

Of course, the downside to use of the widget system is that it is not customizable at all, and it is only available in the form of a rather large Flash button to place on your site. After some digging and research, I finally figured out how to post requests to your unique buttonId via standard HTML forms. Taking this to the next level (and much more usable, I might add) lets us create a manual Ajax handler that will make our request to connect the user without ever leaving our page.
Continue reading →

BackboneJS: Dynamic Override of sync() Method

As with any good solution, there needs to be a valid problem you’re trying to solve. In this case, I ran into a challenge at work and wanted to share the concepts of what I needed to accomplish in case anyone else has run into similar troubles.

I was assigned the task of integrating a new UI with a preexisting backend API, which is really not that big of a deal in and of itself. However, as I wanted to use BackboneJS as our client MVC framework and the API was by no means RESTful nor consistent, I quickly became aware that I would need to manually override the sync() method of nearly every one of my models in order to have things function properly. Again, in and of itself, this is not a problem, but working in an environment where maintenance and change are the rule, I wanted to figure out a way to extract the customization in such a way as to be extremely easy to manage.
Continue reading →

Custom Event Management in JavaScript

If you have used any JavaScript libraries before, you are most likely quite familiar with the concept of binding functions to specific events within an object, but have you ever considered creating your own custom events for your JavaScript classes to allow users even more flexibility in implementing your code? Binding listeners to user events (such as click or mouseover) is a necessity for robust coding, but what happens when I want to allow developers to execute a specific bit of logic only when my library element has been rendered to the page? I need to build my code in such a way as to give “hooks” to the coder in the form of events for which they can listen.
Continue reading →

HTML5 Canvas Layering


I have recently begun to study a couple different ideas to ease the pain of more complex animations using the HTML5 canvas element. Primarily, I have been focusing on layering – stacking individual transparent canvas elements – to achieve a robust effect and help manage individual objects without having to redraw the entire pane with every refresh. In the orbit example above, the center sphere and background are drawn statically on the bottommost layer, while the animation of the satellites is calculated and drawn on a second layer. By clicking on the demo, you can toggle the visibility of the animation layer. If you cannot see the animation at all, you may want to consider picking up a real web browser: Firefox or Chrome are always good options.
Continue reading →

Debug Logging in JavaScript

So, one of the repeat topics I’ve heard in JavaScript discussions both internal and external to work is that of tracing and logging JavaScript activities. What is the best way? How do you know in what order your code is actually completing? These are all valid concerns, and thankfully, there is a fairly easy way to help yourself out. There are back-end libraries to assist with this type of logging such as Apache’s log4j – which has been ported to other popular languages like PHP and C++, but what about seeing under the hood of your browser run scripts?
Continue reading →