Javascript on David Hamp-Gonsalves

Dynamic CSS Reset

Sat, 15 Mar 2014 00:00:00 +0000

When ever you ever have to inject HTML into an unknown page you have to battle with all the page styles messing with your own content. This happens a lot when building bookmarklets like my recent RSVP Reader. In the past you had to manually assign values for all the CSS properties that could have been set by the page. Since then then initial CSS property was added we can perform this reset automatically. The following is a function that resets all CSS properties for a given DOM node.

Spritz like(RSVP) Reader Bookmarklet

Tue, 04 Mar 2014 00:00:00 +0000

So after seeing Spritz I waited for someone to whip up a nice extension so that I could try out the same technique(RSVP) in my brower. Since that hasn’t happened I created a bookmarklet that covers the basics so that we test this all out in real life and see how useful it really is.

install

To install drag the following link to your bookmark bar.


RSVP

Instructions

Select some text on a page and click the bookmarklet.
Read like the wind!

Key Bindings

ESC: exit.
R(hold): rewind.
←/→: jump forward or back by 20 words.
-/+ or ↑/↓: adjust WPM rate.
Spacebar: pause/resume.

Features

Smooth acceleration on start up.
Variable speed when reading long words, punctuation, etc.
Spritz like word centering.

Notes

I’m sure Spritz is way better then this simple bookmarklet. This isn’t a comment on how easy this technology is. To do it properly it would take a look of statistics and reading analysis and a lot of science which I think is what Spritz has done. This is just a very basic tool that I built to try out the concept of RSVP and see how useful it is.

Compressing JSON into a Brittle Lightweight String

Thu, 07 Nov 2013 00:00:00 +0000

Client side single page apps tend to throw a lot of JSON data across the internet. These are some techniques I used on cimrheatmap.ca to compress my Geo/Time data by about 90% and avoided the overhead of gzipping the page. Be warned most of this was just for fun and is a silly idea because of the disadvantages listed bellow. {lat\:45.123, lng\:-63.123, type\: 'Assult', timestamp\: '1383837388112'} vs. '3 0 '

Maps vs. Arrays

Standard JSON compression usually focuses on flatening the maps that are normally used to represent objects. This removes all the duplciate keys.

Animated Javascript Heatmaps.js

Wed, 23 Oct 2013 00:00:00 +0000

I’ve been working on a crime heatmap animation lately and these are some tips for anyone else building something similar.

Heatmap.js

For my animation I used a version of heatmap.js that was tweeked for animation by alastair.is. The tweek slightly changes the look of the heatmaps but achieves a much better frame rate.

The Animation

If you new to Javascript based animation you will want to read up on window.requestNextAnimationFrame().

For a heatmap animation you need to push the current set of geo coardinates to the heatmap which corrispond with the the current animation progress.

Detecting Mobile Device from Javascript

Mon, 21 Oct 2013 00:00:00 +0000

This is a pretty lightweight way of detecting when your javascript is living in a mobile device.

if(typeof window.orientation != 'undefined') { /* put mobile spesific code here */ }

To omit spesific devices from running this code you can also add individual checks like the following.

if(typeof window.orientation != 'undefined' && !navigator.userAgent.match(/iPad/i)) {
 /* put mobile spesific(but not ipad) code here */
}

This is a mix of the answers found on stack overflow.

Drawing Region Polygons on Google Maps API v.3

Tue, 06 Aug 2013 00:00:00 +0000

You can “draw” all sorts of stuff on Google Maps using Layers but mor simply you can also directly create polygons and with a bit of extra work make them looks pretty cool. In this case I’m tracing a country using data from the Natural Earth Google Fusion Tables Dataset. Here is the final product showing where New York is.

Drawing a Polygon

The Natural Earth Dataset provides outline coordinates using the EPSG 4326 projection. We can build our polygon(s) with those points like:

Generating Bitcoins using Online Ads

Fri, 02 Aug 2013 00:00:00 +0000

After reading about using online ads to launch a javascript based DDoS attack I started wondering about how well such a system would do at mining bitcoins. These are my rough calculations.

From my research I’ve found there are 3 ways to mine bitcoins(compute hashes) using Javascript:

UI thread (I was seeing about 800 hashes/s)
Multiple threads via WebWorkers (I was seeing about 13000 hashes/s)
Using the GPU via WebGL (limited browser support couldn’t find working example).

I based my numbers on this implementation: (http://bitcoin.biniok.net/gl.html) running chrome on a pentium 4. The rates are averages over 5 seconds.

Javascript Damerau Levenshtein Algorithim

Tue, 20 Nov 2012 00:00:00 +0000

The Damerau Levenshtein algorithim calculates a distance between two words in the same way that basic Levenshtein does but adds transpositions to the set of operations that it uses to calculate distance. This makes it much more reliable at finding similiar or alternate spellings of words.

I was doing some nodejs work lately and needed such a function to clean up one of my datasets and so I ported this version from C# to Javascript.

HTML Sticky Headers

Sun, 22 Jan 2012 00:00:00 +0000

Sticky headers are heading elements that stick to the top of the window as the user scrolls down the page. This is useful since you can use them to retain the contextual information of the section regardless of the position.

In my case I needed to have multiple headers in the hourly forecast list for hourweather.com.

I found there wasn’t much out there about this topic, especially when you want to have multiple sticky headers per page so I thought I’d share my implementation(which is pretty rough) for others to reference for the main ideas.