Posts from July 2014

What: DOMObserver – a JavaScript library for easily tracking DOM mutations.
Code: https://github.com/uberVU/dom-observer/
Demo: http://ubervu.github.io/dom-observer/

Here at Hootsuite, we love to open source components that we develop for ourselves and might be useful to others. We feel that this is a great way to help to give back and contribute to the Open Source ecosystem.

While performing some refactoring on our fronted code, we managed to isolate a component that we use for observing DOM changes, as well as reacting to those changes. The reason we developed this code was that alternatives such as mutation-summary did not do all we wanted, and even now, they don’t offer fallback support, which we need since we support older versions of IE as well.

Enter DOMObserver, a JavaScript library that lets you observe and react to DOM changes in an easy and friendly manner. It uses either the new MutationObserver API or the older Mutation Events API, whichever the browser supports, and offers you control in an unified way. We use it for managing the widgets we show on a page, but you can use it for any changes to the DOM that you care about.

DOMObserver exposes an API that lets you set handlers for when:

  • a node is added to the DOM
  • a node is removed from the DOM
  • a node’s attributes are changed

The handlers receive the mutation target as a parameter, so you know which node changed. Furthermore, if you want to do more advanced things, the handlers also receive the mutation (event) object, so you can tell exactly what has changed.

As far as performance goes – you can set the handler on a specific DOM node, so there is no need to listen on the whole document. Also, for attribute changes you can filter the attributes you care about (so for example you only get notified when data-loaded is changed, but not for src changes). When you are no longer interested in the DOM changes (say your app reaches a constant, immutable state), you can simply shutdown the observer.

Check out the demo to get a hands-on feel of what DOMObserver can do for you, and make sure to check out the README file on GitHub for more information.


uberVU is part of the Hootsuite team. Read more about it here

What?

[GridList][1] is a JS library for creating two-dimensional, resizable and responsive lists that we built to help create highly customisable dashboards. The library is used in one of our flagship features we call [Boards][2] and was developed with the needs of this project in mind.

Why a grid?

Our strongest point is our data, this is what we do best, collect and analyse great volumes of data. Data alone is not enough. It is critical to show the result of all the effort of collecting and analysing in an easy to comprehend way. We needed a way to make it easy to discover patterns and take action on them.

We needed a data visualisation tool that would be:

  • easy and intuitive to use;
  • easy to customise and manage;
  • responsive – meaning that it will look great no matter what screen it is shown on, a mobile phone or a big 4k display;

A dashboard is a way of visualising data that, if properly built, would tick all the boxes of our requirements. We are passionate about dashboards and went through a few iterations and versions of displaying data in a dashboard form to understand what makes a dashboard great.

Given all of these it was clear that we needed to use a grid system that supported drag and drop. We had two options, find and adapt an existing one or make our own. Read More …