Date range calculations

It happens once in a while that I come across a web-form that asks for 2 dates to indicate a time span. I know it can give quite an amount of trouble to program such a date range, especially due to validation. Luckily there can be tons of packages found on GitHub for frameworks like jQuery or AngularJS. What I didn’t found was a simple data type, so without any form of presentation, to handle and validate those ranges.

Recently I had to work with time spans that were not to overlap with each other and had to be subjected to all kinds of calculations. This inspired me to create a value object for it. Beware, the DateRange object.

Installation

This package is available via Bower:

Or NPM:

Usage

Creating a date range is as easy as creating any object. When the passed dates do not form a valid range pair an error will be thrown.

This object can now give you any info about the range you like.

Calculating with a date range

Now, especially when the validation of you date range depends on other dates or ranges, some of the next methods might be useful to achieve this.

Documentation

Full documentation can be found on GitHub.

Issues can also be filed there.

JS Value Objects

In the ‘days of the web-application’ that we live in, more and more calculation is done in the browser, but the code is often not prepared for that. When performing form-validation it can still give you headaches to come up with a decent structure to minimize the redundancy but still keep it dynamic enough so it can handle unknown future changes.

In the upcoming months I hope to write a serie of posts about the use of the Value Object pattern in JavaScript. This will be an experimental journey were I will try to find a way to improve the maintainability and sustainability of JavaScript applications.

Screen Orientation API

The Web Applications Working Group has published a Working Draft of The Screen Orientation API.

The Screen Orientation API provides the ability to read the screen orientation state, to be informed when this state changes, and to be able to lock the screen orientation to a specific state.

Probably the most interesting feature will be the lockOrientation() method, allowing the developer to force the page to be viewed in a specified orientation.

This Working Draft is an update on a previous version published in May 2012.

CSS-string to jQuery object

CSS-selectors are clean and clear, element#id.class.another-class. But why, if we want to create an element, do we have to do this?

I build a css parser that converts a css-selector into a jQuery object. For now, only node-type, id and classes are implemented.

Creating an element is now a piece of cake.

The wins might not be as astronomical as I make it sound, but in future posts I might come up with some handy uses for this code.

innerHTML in IE

I stumbled upon an interesting issue today. Internet Explorer seems to store its references to DOM elements in another way than Chrome or Firefox. A (vanilla) javascript-object of an element is linked to the element in the DOM. In Chrome and Firefox, when that element is removed from the DOM, the HTML for it still exists in the innerHTML attribute in the js-object, but in IE the innerHTML is cleared.

The Problem

We have the next example (jsfiddle):

An elment is created, text is added and it is appended to the body. When we clear the body, by replacing its HTML with nothing, in IE, the html of the element is also emptied.

The Cause

Javascript in IE seems to hold reference to the ‘real’ HTML in the DOM and its values depend on it. So, when the html is not available in the DOM, its not in the object. This is more logical than you might think. The innerHTML attribute in the object is just holding a string of HTML-code, not any objects of the inner elements. When the content is cleared, so is the innerHTML, to keep the attribute’s value up to date.
Chrome and Firefox, however, keep their reference to the content. Which will leave the element intact when you remove it from the DOM, so it can be added later in the process.

The Fix

To fix this issue, the innerHTML shouldn’t be cleared. An alternative is to remove the elements from, in this example, the body by using removeChild.

This loop will remove all elements in the body, which has the same effect as clearing the innerHTML. The difference is, that the HTML is not really removed. It is still accessible in the javascript object.

jQuery: html vs empty

Maybe this issue doesn’t seem that common, but using jQuery you might run into it. jQuery uses both ways to clear the content of an element. The first is used in the html method and the second in the empty method. When using front-end mvc’s, like Backbone, there are situations where you want to re-render a view without re-rendering it’s sub-view. By first emptying the view’s html, the element will be left intact.