Tag: javascript (page 2 of 6)

Handsontable – jQuery grid editor

Provide spreadsheet style editing pretty much any where with Handsontable, a jQuery plugin.

No formula support, so not really an Excel/Google Docs replacement, but still useful.

Difference Between A Human Click And A Trigger Click With jQuery

I was recently working on a page that had some existing transitions that happened when a user clicked on an item. My thought was to periodically trigger a click event that would automate the process some what, allowing me to take advantage of the existing transition code.

jQuery has a nifty method called .trigger that takes care of firing the click event for me. Very handy, but then I quickly realized that I needed to be able to tell the difference between a human click event and a .trigger‘d click event.

Fortunately I wasn’t the only one to have run into this issue and there is a solution described at http://stackoverflow.com/questions/6692031/check-if-event-is-triggered-by-a-human/6692173#6692173. The key is event.originalEvent, here is an example from the StackOverflow post:

$( "#click-me" ).click( function( event ) {
    if ( event.originalEvent === undefined ) {
        alert( 'not human' )
    } else {
        alert( 'human' );
    }
} );

You can also try it out on jsFiddle – http://jsfiddle.net/Uf8Wv/

This appears to be specific to jQuery, which in this case wasn’t a big deal since all of the other code on the page was using jQuery as well. The Event object documentation mentions event.originalEvent, but doesn’t indicate that it can be used in this way.

Javascript Graphs with Rickshaw

Anyone replaced flot graphs with Rickshaw? Rickshaw appears to have a number of the extras you had to add to flot built right in.

Is Meteor The Future Of Node.JS Development?

What does the next step in the evolution of Node.js look like? One answer to that question is Meteor. I found their screencast very interesting:

The idea of having a built-in framework that takes care of updates for you, on the fly, is compelling. I also liked the example of being able to work with the MongoDB data right from the client (that also scares me).

I’m not ready to abandon all other web development platforms and move strictly to Meteor, but I’ll definitely be watching it. I’d like to dig deeper into the details of what makes Meteor tick.

Microjs, Long List of Libraries

I don’t recall the last time I’d looked at microjs.com, but I’m quite sure the list of libraries was much smaller back then.

Some of the libraries listed, like Mustache, I’ve seen and played with before. Skimming through the list this morning, most of them are new to me. The number of libraries listed is impressive.

I’m still not sure that I’ll have a use for many of these, I suspect for most sites being able to rely on jQuery (and jQuery plugins) consistently will out weigh trying to save a few bytes here and there. I’m willing to be proven wrong though, which is why one of the reasons I find the microjs list so fascinating.

Do you have a favorite microjs library, or one that you can’t live without?

Javascript Timeline

It seems that having Facebook offer a timeline UI has reignited interest in that format. I’ve seen several Javascript libraries pop up that make generating a timeline UI fairly simple. One that caught my eye is Timeline.

Has anyone whipped up scripts to automatically populate data for Timeline from Subversion or Git repos?

Live Updating a Node.js Web Server

Each time I look at Node.JS the issue of live updating comes up. For PHP it is easy to take live updating for granted. You update your .php files and *poof* your site is running the new code. With the merged web server model of Node.JS that doesn’t happen.

I’m happy to see some folks thinking along these same lines. From Staying up with Node.JS:

To many beginner Node.JS users, a fundamental and immediate apparent disadvantage of writing their web applications with Node.JS lies in the inability to save a file, refresh the browser and see their changes live.

This isn’t just a beginner issue though, it make deploying to production much more complex as well:

The need for seamless code reloads extends into the realm of production deployment as well: one needs to be able to serve new requests with fresh code immediately, without breaking existing ones (such as file uploads or content transfer).

To deal with these issues LearnBoost has developed two projects: distribute and up.

Another option that has been brought up is hotnode, which looks like a fairly simple approach. In general the fewer moving parts the better.

If you are using Node.JS for production services, what approach do you use for deploying updates? Are you doing a load balancer and worker dance (spin up new worker, add it to load balancer pool, drop out an older worker, update it, add it back to the pool) or have you come up with a live update method?

Google’s plusone.js Doesn’t Support HTTP Compression

I was surprised to see that Google’s plusone.js doesn’t support HTTP compression. Here is a quick test with
curl -v --compressed https://apis.google.com/js/plusone.js > /dev/null

Request Headers:

> GET /js/plusone.js HTTP/1.1
> User-Agent: curl/7.19.7 (universal-apple-darwin10.0) libcurl/7.19.7 OpenSSL/0.9.8r zlib/1.2.3
> Host: apis.google.com
> Accept: */*
> Accept-Encoding: deflate, gzip

Response Headers:

HTTP/1.1 200 OK
< Content-Type: text/javascript; charset=utf-8
< Expires: Fri, 18 Nov 2011 02:35:20 GMT
< Date: Fri, 18 Nov 2011 02:35:20 GMT
< Cache-Control: private, max-age=3600
< X-Content-Type-Options: nosniff
< X-Frame-Options: SAMEORIGIN
< X-XSS-Protection: 1; mode=block
< Server: GSE
< Transfer-Encoding: chunked

You'll notice there is no Content-Encoding: gzip header in the response.

We'll have to get Steve Souders to pester them about that.

There Is More Than One Way To Do It – Javascript Edition

One of the Perl slogans was “There is more than one way to do it”. After seeing this list of ways to redirect a page in Javascript I think it may be time for Perl to retire that slogan and grant Javascript license to use it.

Now they went to some extremes to come up with that many, but 535? Yikes.

Cookies That Won’t Die: evercookie

User tracking on the web is an interesting field. There are projects like evercookie that provide insight into the different techniques that are available given todays web client technologies.

The methods listed by evercookie that I thought were particularly curious are:

- Storing cookies in RGB values of auto-generated, force-cached PNGs using HTML5 Canvas tag to read pixels (cookies) back out

- Storing cookies in HTTP ETags

And of course the various methods used by evercookie all cause the original HTTP cookie to re-spawn.

The code is available at https://github.com/samyk/evercookie and is worth a look if you are interested in this sort of thing. The evercookie page has descriptions of how some of the techniques work, along with a sample piece of code to get started with.

Older posts Newer posts

© 2014 Joseph Scott

Theme by Anders NorenUp ↑