Avoid Careless Production Mistakes with Custom Scripts

In the wise words of @stahnma,

“Everybody has a testing environment. Some people are lucky enough to have a totally separate environment to run production in.”

Thankfully, the project I’m working on has multiple environments: production (the most recently-released version), staging (for pre-release testing), dev (for dev team use and testing), and multiple review apps (for feature validation). Read more on Avoid Careless Production Mistakes with Custom Scripts…

What You Should Already Know about JavaScript Scope

If you are a novice JavaScript programmer, or if you’ve been messing around with JQuery to pull off a few animations on your website, chances are you’re missing a few vital chunks of knowledge about JavaScript.

One of the most important concepts is how scope binds to “this”.

For this post, I’m going to assume you have a decent understanding of JavaScript’s basic syntax/objects and general terminology when discussing scope (block vs. function scope, this keyword, lexical vs. dynamic scoping). Read more on What You Should Already Know about JavaScript Scope…

Charting Data with jqPlot

Some of the most interesting and challenging projects involve data visualization. It can be very difficult to express data in a clear way and also make the product aesthetically pleasing. There are many different ways of presenting data to users, and choosing the “correct” visualization is not always a simple decision. Having numerous tools at your disposal, or at least greater awareness of what is out there, can help you make a better decision.

I was recently experimenting with a library called jqPlot, jqPlot is a jQuery plugin that supports drawing line, bar and pie charts with many customizable features. The project I was working on involved a device that monitors the temperature of the contents of a kettle during the process of brewing beer. My goal was to show the temperature as it changes over time and also to indicate a prediction of when the temperature would reach a desired target value. Here is what I ended up with:

To produce the chart above, very little html code was required. Read more on Charting Data with jqPlot…

Testing & Tooling in EmberJS

Like many other Atoms, I’ve recently been doing some work with EmberJS. Ember is an awesome web development toolkit with some really killer features. One of my favorite parts of Ember is how easy it is to test. The framework comes bundled with a system testing framework, and its object model makes unit testing a breeze. Combine all that with a great test runner that has CI integration, and you have a really awesome testing ecosystem for your new app.

System Testing with Ember Testing and QUnit

EmberJS comes bundles with a great system testing framework called ember-testing. This framework allows you to make high-level assertions regarding your applications’ state, mostly by querying and interacting with the DOM through JQuery in a black box fashion. Since the tests are pure JavaScript however, we also get direct access to our running application if needed for testing.

Read more on Testing & Tooling in EmberJS…

A CSS Naming Convention for JavaScript

A simple, but effective, convention in web development is to have different names for css classes based on their use — one for when the class is going to define style and another for when the class is going to be used as a hook for javascript and testing.

There are plenty of articles that talk about how you should name your css, what the files should be called, etc. (Here are some at Snook.ca, Smashing Magazine, and phpied, for example.) The topic has been covered and for the most part is agreed upon.

JavaScript is the same. It’s easy to find articles that talk about what classes should be called, code styles, how to indent. etc. There are not, however, a lot of people who discuss connecting JS to the dom.

Read more on A CSS Naming Convention for JavaScript…

Selectivizr – Pseudo Selector Support for IE

Working with visuals for HTML forms can be painful. They are ugly, clunky, and tend to be different in each browser.

One way we have been spicing up our forms is by improving the look of the checkbox and radio button areas. Making toggles and visual cues for standard form elements will make forms feel more interactive. The styling can be done with CSS alone, using pseudo selectors, or with JavaScript to put classes on elements, depending on the state. Unfortunately, Internet Explorer doesn’t play nicely with pseudo selectors, but we can fix that.

In forms where there are tag selections (checkbox) or an icon selection for the item we are creating (radio buttons), we try to make the visuals nicer:

Read more on Selectivizr – Pseudo Selector Support for IE…

AJAX Interactions Need Activity Indicators

AJAX interactions from the client to the server are wonderful for user experiences. With a little JavaScript magic, form submissions, data loading, and any other interaction of the server can be done without reloading the page. One can build web applications all on one page with JavaScript frameworks like Backbone.js and Ember.js. The magic of AJAX data transmission is beautiful — until you have to wait.

Read more on AJAX Interactions Need Activity Indicators…

CSS3 Transitions – Spicing Up DOM Changes

In one of the web projects I have been working on we have a handful of elements on the page change size when they were “toggled”. This was a simple add and remove of an active class (via jQuery’s addClass() and removeClass()) that caused our elements to snap open and closed. The user experience was good, nothing jarring. Just when we were about to move to another area of the app, we decided to smooth out the snapping of the UI to increase the user experience. We had two apparent options: a JavaScript animation library, or CSS3.
Read more on CSS3 Transitions – Spicing Up DOM Changes…

Read more on CSS3 Transitions – Spicing Up DOM Changes…

Optimize Page Speed with jQuery Waypoints

My current project is a web reporting tool. Each report includes several highcharts to present data interactively to the user. The site performs just fine in modern browsers, but IE 7 and 8 just can’t take the workload. With the charts enabled, pages were taking seconds longer to load in IE for some users. All that time was spent executing JavaScript

jQuery Waypoints provided a perfect solution. Graphs that aren’t visible don’t do anyone any good, so why not load the graph when the user scrolls to it?

Read more on Optimize Page Speed with jQuery Waypoints…