Event-Driven Design for DOM Manipulation

After one of the projects in my company had reached a point where refactor was not only recomended, but necessary to clean up the code and make it maintainable, I decided to use a different approach for DOM manipulation in the client facing web app. Since we were doing a major refactor (yes, it does exist!), I was given considerable leeway to choose a different way of dealing with the big problem of manipulating DOM elements.

Javascript Web Application Development Flow

Recently, I was asked a question about Javascript development: how are modules used in ES6 and then how do they magically become one .js file when deployed. Since I have been using a workflow which answers both of these, I am going to write it up here for anyone who wants to know. Big projects can be written in modular form in one of the EcmaScript standards (Actionscript, Javascript, Typescript etc) and then compiled into one file for web delivery.

Terrains using Three.js and SRTM Data

Let’s jump right in to three.js plane buffer geometry. Three.js offers a buffer geometry object which is a simple array of height maps, much like our binary file we used from the SRTM data. Compared to the normally used plane geometry, buffer geometry uses much less overhead and is significantly faster if the object does not need to be modified once initialised. To make things simple, I will assume that the terrain we need to generate is contained only within one binary hgt file, i.e., the terrain is within one latitude and longitude cell (this means that the bounding box of the terrain will be within one integer long and wide: N58.79 - N58.92, E006.22 - E006.33 is within one integer wide and long while N58.79 - N59.12, E006.22 - E007.13 will require more than one hgt file to process and will be needlessly complicated for this example).

Using SRTM Elevation Data in Javascript

1 arc second SRTM Data was made publicly available by NASA a few months ago. SRTM Data is collected by the Shuttle Radar Topography Mission. It sweeps the surface of the earth to find irregularities which form the height map. According to the mission website: To acquire topographic (elevation) data, the SRTM payload was outfitted with two radar antennas. One antenna was located in the shuttle’s payload bay, the other on the end of a 60-meter (200-foot) mast that extended from the payload pay once the Shuttle was in space.

WGS84 Projections

For our WebGL Augmented Reality App, we needed to preprocess latitude and longitude values into localised coordinates. Lat/lng values are great, but they are not very useful if you need to represent them inside a 3D space. It is far better to use [x,y,z] coordinates which are stored as floats natively and can be used directly without projecting them into another coordinate space. Of course, you are better off using lat,lng values if you are looking at very large distances on a globe.

Cesium to Visualise NYC Carbon Footprint

Cesiumjs is a wonderfully simple and extensible library to work with. It is, in simplest terms, a 3D globe with imagery providers which can be used for nearly anything under the sun. I recently discovered that NYC publishes a lot of its data online, and I was dying to play around with that data to see what I could gather from the city data. I also had Cesium on hand, and open city data coupled with a versatile visualisation tool is a killer combination so I gave myself a few hours last Saturday afternoon to see what I could do.