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 →

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 →

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 →

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 →

Introducing JSWidgets

I have been, for some time, working on a concept that would allow the average JavaScript user to create robust, interactive applications with ease. A daunting task, I know, but having tried to implement so many bloated libraries for simplistic interaction, I wanted to create a way for the beginning or average web developer to create advanced modules quickly. One of the biggest things I have noticed in recent years is the lack of attention given by many to the client side code structure. With this project, I hope to help educate developers a bit more in the necessity of code separation, documentation and reuse of code.

I have been asked if I’m guilty of reinventing the wheel, and it is possible that you may think so, but I feel this offers a level of uniqueness not found in a library this lightweight. In fact, the purpose of this library is not to be a solution to the need in and of itself, but rather it is intended to lay the groundwork for developers to quickly extend their own widgets and have them working in no time. While I am introducing this library in its infancy, I am already in the process of overhauling the template structure to leverage Underscore.js, the most lightweight and robust JavaScript template engine I’ve found to date.
Continue reading →

Smart Resize Script for Adobe Photoshop CS4

If you have ever had a massive number of images you needed quickly and accurately resized for export, upload to web or any other reason, you may well be familiar with the concept of recording Photoshop Actions. These beautiful little tools allow you to literally record a macro (series of user actions) that can then be applied to the currently active document. Further, when combined with the “bulk” feature of Photoshop, you can apply this action to an entire directory and apply the action to each and every image, exporting the resulting image to a specified location as well. Overall, this is an extremely useful tool and can save minutes — if not hours — of work, but it has one tiny limitation that has been a bane to me for some time. When recording an action, you must specify either a height or a width on resize: there is no way to conditionally apply your length to the height OR width dependent upon ratio. Enter the Photoshop Script.
Continue reading →

How to Manually Trigger Events in JavaScript

Occasionally, I find need to be able to manually trigger a predefined JavaScript event from within the context of a web application. Those of you who didn’t understand that first statement may want to stop reading now or risk suffering from extreme boredom, but those who actually have encountered the same challenge in coding, please read on!

Let’s examine a possible scenario that could merit actually taking hold of the reigns on individual event calls. Consider the situation that you have devised a very user friendly data entry form, and in conjunction with specifications, you have a select box that triggers certain fields to be visible based on user selection. Typically, you would have simply attached a listener to the select box’s onchange event that checks the value of the field and performs the necessary showing and hiding. So far, we have done nothing difficult or out of the ordinary.

Now, suppose you also have need to be able to populate the form with a preexisting data set and get your form to behave in the same way. You could always write an onload listener for the body of your page that runs all the field checks and manipulates the fields accordingly, and in most cases, this may not be a poor solution. However, when loading dynamically via AJAX or other method, the onload event may not be triggered, and therefore, neither is your form updated.
Continue reading →

jQuery Slideshow Plugin Update

I have finally found a few spare minutes to refactor the Google Code Project I started for my jQuery plugin last year. While I still am far from where I want to be with it, I have managed to set the plugin into a fully OOP codebase and add in events and the capability for custom handlers on those events. My hope is that people will now be able to find a bit more usability to the slideshow, since it is fully customizable. Feel free to swing by my Google Code page and let me know thoughts or ideas on ways to improve the slideshow as it evolves.

JavaScript Library Nightly Builds, SymLinks and Auto-Updates

Something has been bothering me for some time, and I finally took the time to resolve the issue once and for all – relatively speaking. As mentioned in my previous post, I have had opportunity to work with multiple different JavaScript libraries, and I often find myself running behind on the newest bug fixes for a given module. Many of the library development teams offer a nightly build available to checkout via SVN or Git (usually by way of GitHub), and I devised a way to automatically update my shared repositories among all the domains on my server. While not rocket science, nor an entirely new idea to most of you, it is quite helpful to me, and I thought I’d share my method here.

There are actually four steps involved with this update, so I apologize in advance if this gets too long.

Continue reading →