https://davidhampgonsalves.com/tags/javascript/Recent content in Javascript on David Hamp-GonsalvesHugo -- gohugo.ioen-USSat, 15 Mar 2014 00:00:00 +0000https://davidhampgonsalves.com/dynamic-css-reset/Sat, 15 Mar 2014 00:00:00 +0000https://davidhampgonsalves.com/dynamic-css-reset/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.https://davidhampgonsalves.com/spritz-likersvp-reader-bookmarklet/Tue, 04 Mar 2014 00:00:00 +0000https://davidhampgonsalves.com/spritz-likersvp-reader-bookmarklet/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.https://davidhampgonsalves.com/compressing-json-into-a-brittle-lightweight-string/Thu, 07 Nov 2013 00:00:00 +0000https://davidhampgonsalves.com/compressing-json-into-a-brittle-lightweight-string/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 'https://davidhampgonsalves.com/animated-javascript-heatmaps.js/Wed, 23 Oct 2013 00:00:00 +0000https://davidhampgonsalves.com/animated-javascript-heatmaps.js/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().https://davidhampgonsalves.com/detecting-mobile-device-from-javascript/Mon, 21 Oct 2013 00:00:00 +0000https://davidhampgonsalves.com/detecting-mobile-device-from-javascript/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.https://davidhampgonsalves.com/drawing-region-polygons-on-google-maps-api-v.3/Tue, 06 Aug 2013 00:00:00 +0000https://davidhampgonsalves.com/drawing-region-polygons-on-google-maps-api-v.3/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.https://davidhampgonsalves.com/generating-bitcoins-using-online-ads/Fri, 02 Aug 2013 00:00:00 +0000https://davidhampgonsalves.com/generating-bitcoins-using-online-ads/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).https://davidhampgonsalves.com/javascript-damerau-levenshtein-algorithim/Tue, 20 Nov 2012 00:00:00 +0000https://davidhampgonsalves.com/javascript-damerau-levenshtein-algorithim/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.https://davidhampgonsalves.com/html-sticky-headers/Sun, 22 Jan 2012 00:00:00 +0000https://davidhampgonsalves.com/html-sticky-headers/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.