Optimize Web App Performance through Drawing

Recently, we needed to take an in-depth look at the performance of a complex web application. We wondered: What calls were being made when? How could we improve them? What impact would changing our API have on our application overall? And what would be the best way to get our heads around all of this?

For a complex web application that has been undergoing development for a while, chances are that information isn’t top-of-mind. To help visualize what’s going on, try drawing out your page. Read more on Optimize Web App Performance through Drawing…

Creating Charts with Rickshaw.js

I was recently introduced to Rickshaw, an open source JavaScript charting framework built on top of D3.js. Rickshaw specializes in creating timeseries graphs.

When recently integrating Rickshaw into a project, I ran into a few hurdles that weren’t terribly well documented or explained online. In this post I’ll provide an overview of Rickshaw and go into some detail on how several of the Rickshaw add-ons work, so you can tweak your graph to look just the way you want. Code for all of the below examples can be found in this Github repository.

Read more on Creating Charts with Rickshaw.js…

Implementing the Elm Architecture in ClojureScript

The Elm architecture is a simple and straight-forward alternative to the common model-view-controller architecture, and it’s well suited to functional programming.

In brief, the Elm architecture uses a data structure to render a UI, the UI fires actions, and actions are used to update the data structure. This is the same sort of uni-directional flow that React.js uses and the one that Ember.js has been gravitating toward in place of two-way data bindings.

Read more on Implementing the Elm Architecture in ClojureScript…

Speeding Up Your JavaScript Test Suite

Having fast tests is important. Slow running tests slow down development, especially if you’re practicing TDD. If tests are too slow to run, some developers may avoid running them altogether. Slow tests will also slow down CI builds, increasing the length of your feedback loop.

While it takes more development time, doing maintenance on your test suite to ensure it continues to run quickly is an important task that any significant project should prioritize. Read more on Speeding Up Your JavaScript Test Suite…

Drawing Objects around an SVG Circle with D3.js

For my upcoming wedding reception, I built an application that lets a guest view the table and chair they have been assigned. I’m using D3.js to draw the tables and chairs. Our particular layout required both round and rectangle tables. Drawing chairs around the rectangle tables was fairly easy. The real challenge was drawing chairs around a circle table. Here is the solution I came up with:

Read more on Drawing Objects around an SVG Circle with D3.js…

Getting Around Internet Explorer’s 4,096 CSS Rule Limit… Again

In 2012, I wrote about handling IE8’s limit of 4096 selectors in any single CSS file. It’s been several years since then… and this is still a problem.

Using SCSS and frameworks makes it distressingly easy to hit these limits. In a perfect world, we’d be able to avoid them altogether, as the bloat is not really a positive thing. However, until I’m able to refactor things to fit under such limits (or until such limits are lifted and IE9 is firmly behind us), here’s another solution.

Read more on Getting Around Internet Explorer’s 4,096 CSS Rule Limit… Again…

Testing Asynchronous Behavior in JavaScript with Selenium

Full stack browser testing of web applications is awesome. It validates that your application works end-to-end and allows you to check actual user workflows. For the last year and a half, I’ve been using Selenium to test a JavaScript web application we’re developing using Backbone.js.

Unfortunately, web apps that use JavaScript a lot can be challenging to test with Selenium. Read more on Testing Asynchronous Behavior in JavaScript with Selenium…

What “Semantic” Markup Really Means

I’ve found that trying to write semantic markup has helped me write cleaner HTML. It’s been a useful guideline, but it hasn’t been perfect, and I’ve sometimes struggled with how to model things well. Recently at the March SoftwareGR event, I heard Jonathan Snook relay an example that I found very insightful. Read more on What “Semantic” Markup Really Means…