Four-five years ago there was a crossroad that in reflection I screwed up on. I was so sure that PrototypeJS was the right library to invest in, it made working with multi-browser javascript a breeze & had a plethora of fantastically useful helper functions. Now, present day, its been almost three years of non-stop jQuery and I’m kind of fine with that. Though a mere shadow of the power that is ExtJS, jQuery UI is a semi-decent library for widgets and asthetics, jQuery itself does what I need, and I don’t get looks of WTF when I mention I’m using jQuery over Prototype at the local developer meetups.
Category Archives: javascript
JQuery dataTable plugin quick notes
Server-side processing
To return the names of the columns you want, you need to use aoColumndefs and provided individual objects with the property sName.
Below is most of the implementation for a jeditable Ajax driven dataTables, this is the Alpha version and still needs a lot of love in places, but the gist of it is here
var semesterTable = $("#semesterViewTable").dataTable({
"bProcessing" : true
, "bServerSide" : true
, "sAjaxSource" : ""
, "fnRowCallback" : function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
//console.log(nRow, aData, iDisplayIndex, iDisplayIndexFull);
var recordId = aData[0];
$("td", nRow).data("recordId", recordId);
return nRow;
}
, "fnDrawCallback" : function(){
$("td.editableMajor")
.editable("",
{
loadurl: ""
, type: "select"
, submit: "OK"
, method: "post"
, submitdata: function(){
console.log(this, arguments);
var $this = $(this);
return {
recordId: $this.data("recordId")
, classes: $this.attr("class")
}
}
});
}
/* Seriously a meta-generator for this would be nice */
,"aoColumnDefs": [
,{ sName:"record_id", aTargets:[00], bSearchable:false, bVisible:false }
,{ sName:"roster_date", aTargets:[01], sClass:"roster_date"}
,{ sName:"roster_name_both", aTargets:[02], sClass:"roster_name_both"}
,{ sName:"roster_student_id", aTargets:[03], sClass:"roster_student_id"}
,{ sName:"roster_major1", aTargets:[04], sClass:"roster_major1 editableMajor"}
,{ sName:"roster_major2", aTargets:[05], sClass:"roster_major2 editableMajor"}
,{ sName:"roster_major3", aTargets:[06], sClass:"roster_major3 editableMajor"}
,{ sName:"roster_major4", aTargets:[07], sClass:"roster_major4 editableMajor"}
,{ sName:"roster_minor1", aTargets:[08], sClass:"roster_minor1 editableMajor"}
,{ sName:"roster_minor2", aTargets:[09], sClass:"roster_minor2 editableMajor"}
]
});
For the tbody, just put something like
<tbody><tr><td>Chill the fuck out, it's loading</td></tr></tbody>
Server side data contract
dataTables expects a JSON’ified construct like this
$responseBody = array(
"sEcho" => intval($input['sEcho']),
"iTotalRecords" => (int) $count,
"iTotalDisplayRecords" => count($data),
"aaData" => $data
);
- sEcho is a security variable used by dataTables, basically just send it back and don’t worry about it
- iTotalRecords – is the MAXIMUM # of records in the data set without any filtering
- iTotalDisplayRecords – is the MAXIMUM # of records in the data set WITH filtering
- An array of numerically indexed arrays, dataTables doesn’t like associative arrays
Total and Display total records
If the blink tag still worked reliably, I’d put a neon sign here. Basically you need to do 3 queries per Ajax call… call 1 is to get a
SELECT count(1) FROM sourceTABLE
call 2 is
SELECT count(1) FROM sourceTable WHERE someCriteria
and finally call 3 is
SELECT yourColumnList FROM sourceTable WHERE someCriteria
With memcache or such, I’d advise caching the total count but no matter what you unfortunately need to make these three SQL calls :(.
Canvas optimization trick – avoid put/getImage calls unless necessary
Thanks to the power of google and some very explicit search terms, I stumbled upon this ( http://www.onaluf.org/en/entry/13 ) valuable tip.
Inside Ping, my implementation of putPixel uses either a fillRect or arc path because I’d already found making direct writes to the canvas pixel array terrifyingly expensive.
Next up for Ping is to use multiple canvas’s to store static images ( examples background layout ) and see how that works out.
Ping documentation in progress
I’ve been writing class/method level documentation and ideally plan to make a step by step explanation of what the heck is going on inside the Ping toolset. Until then it’s pretty doubtful anyone will want to use it. Never mind everything is still in Alpha state and there is very little guarantees that something won’t be written.
Snake game prototype
Running live here
User input is fed off the left & right cursor keys.
Ping additions included a formalized Quad tree library into the ping.Lib namespace but I want to fix up the factory function I wrote to take an instance of the Canvas rendering class instead of manually writing out the root dimensions. Otherwise collision checks are still a tad wonky… there’s a high propensity for near misses unfortunately 🙁
Ping, a canvas toolset, is nearing Alpha Alpha stage
So I’ve got a working Quadtree implementation that is relatively performent on Google Chrome 10
Demo here
GitHub repo here
So far bounding box detection isn’t but working on that, also documentation, and unit-tests are non-existent but I’m working on that now.
Once I hash those out, then this should be an useful collision detection/proximity check library for canvas tag games.
Canvas pixel collision detection
So… a fair number of people arrive here looking for how to detect when a pixel/object/thing has collided with something else.
I’ll add more information in the future but in the interim, the quick and dirty advice I can provide:
Given p = x, y where this is the point your trying to determine if it intersects another… the best place is to start with bounding box logic. Â Regardless of what shape your object is, if wrap it in an invisible box boundry, it’s relatively trivial to do:
box upper left origin is bX, bY off size sizeX, sizeY.  If p.x greater then bX and p.x less then bX + sizeX AND p.y greater then bY and p.y less then bY + sizeY  you’re inside the bounding box and it’s highly likely your point has or will soon be colliding with an object.
That’s pretty much it and is perfect if you don’t mine lagging the crap out of whatever is running this logic.   To make these collision checks performant, you need to make the computer do less work.  For two dimensional space, my personnel research has led me to the Quad tree structure ( wikipedia article ).  I’ve got a brute force / naive implementation prototyped  @ here & here but as of 2011 March 9th it is not finished and needs some more work.
Basically Quad tree’s provides a super quick way for you to determine if there is any other objects in relative space to an entity. Â Doing a quick lookup, if there’s nothing nearby then you can skip the bounding box checks and then the stupidly expensive perimeter intersection checks.
Full library is here and like most of my pet projects is heavily undocumented and completely absent of unit-testing.
Initial look at ExtJS 4
So… the graphing library look damn good, but focusing more on the nutts & bolts.
Previously ExtJS has had an on demand instantiation system vi anoymous objects with a property of xtype. It’s fairly likely that not every component of an ExtJS enhanced page is going to be used by a user or even looked at, so the xtype support allowed for avoiding costly and wasted object/component instantiations.
Now it looks like they’re taking that one step further. Looking at the Public Release 3 of ExtJS 4’s documentation, I noticed some new additions… specifically lazy class loading. If I’m correct in my assumptions, that means that instead of loading the ENTIRE ExtJS library and possibly only using a tiny bit of it, you can load up only what you need saving rendering time & bandwidth!
Ext.require([
'widget.window',
'widget.button',
'layout.fit'
]);
Ext.onReady(function() {
var window = Ext.widget('window', {
width: 500,
height: 300,
layout: 'fit',
items: {
xtype: 'button',
text: 'Hello World',
handler: function() { alert(this.text) }
}
});
window.show();
});
Authoritative source here
Stellar simulator thingy
Inspired by this
Source code @ Github here
So… this basically covers elliptical paths ( which I want to play with more ), a rendering chain I’m happy with, and a few others things. What isn’t exactly right: speed, planetary/stellar surface animation is missing, and I’d like to have a fly by mechanism that shifts the Y ratio progressively over time.
Deferreds for JQuery 1.5
Anyone familiar with async programming like Node.JS or Python’s twistd library will be familiar with deferreds. Its usually a simple nuisance to re-implement when needed, so it’s nice to hear that’s not an issue anymore with JQuery’s $.when & $.then methods
Really useful guide here
What does this mean?
Say you’ve got a compound action you want to complete. For example a user clicks on a leaf in a tree like directory
menu. Now you want to update both the menu to add any possible sub nodes of that leaf PLUS update a content panel and once its finished, maybe update the hash tag to the current page’s url.
$.when( updateMenu(), updateContent() )
.success( function(){
console.log("Both menu & content panel have been updated!");
})
.fail( function(){
console.log("Oh noes, we didn't finish... try again?");
});
That’s pretty much the gist of deferreds in a nutshell. Furthermore it appears that the author of this fantastic addition to jQuery really grokked the concept of deferreds because you can chain one deferred result to multiple child deferred’s allowing for cascading events to fire in response to one event.