pixelf3hler

i'm a webdeveloper who's interested in electronic music..i also produce techno myself and spend a lot of time working on games and frameworks

[pixelf3hler]

javascript hashtable

i needed an object that behaves similar to a AS3 Dictionary:

https://gist.github.com/pixelf3hler/8207913

[pixelf3hler]

passing functions to another thread in javascript

One thing that sucks about javascript workers is that the data you give them is copied rather than shared. Browsers use the structured clone algorithm defined in the HTML5 specs to accomplish that.

As you probably know, that algorithm isn't capable of cloning Function objects, so it's pretty useless in some cases. But there's a simple workaround if you need to pass a function to a worker thread:

// the worker code: function parseFunction(fnstr) {    try{       var fn = Function(fnstr)    }catch(err) {       console.log("failed to build function from %s", fnstr)    }    return fn } self.onmessage = function(e) {    var fn = parseFunction(e.data)    fn() }

// the main thread: function serializeFunction(fn) {    var fnstr = fn.toString().replace(/^function[^\)]*\)[^\{]*\{|\}$/g, "")    return fnstr } function testFn() {    console.log("called testFn in another thread!") } worker.postMessage(serializeFunction(testFn))

This example is really simple, but i guess you get the point. Passing strings to a worker thread works just fine, so you can call toString() on the function you want to pass to obtain its source code. After that you just need to remove everything from that string that doesn't belong to the function body. The worker thread on the other hand can use that string to recreate a similar function in its inner scope using the Function constructor. Functions created that way aren't clones since you can't assign a name to them..so testFn from the example is always anonymous in the worker, but that shouldn't matter in most cases. Note that this simplified example doesn't support functions with arguments, but the code can be easily adapted to do so.

[pixelf3hler]

jss

If you're looking for a css extension that runs on the client-side without installing any additional software on the machine that runs your webserver, jss might be a solution.

jss allows you to mix css and javscript in a single file or style node

[pixelf3hler]

a simple way to clone your objects

javascript objects are always passed by reference, right? If you need a simple way to create a structured clone you can abuse a WebWorker to do your bidding:

(function(window, document, undefined) { window.URL = window.URL || window.webkitURL

var _worker, _codeBlob, _blobUrl, _workerCode = 'self.onmessage = function(e) { self.postMessage(e.data); }' function _createWorker() {    if(!_worker) {       _codeBlob = new Blob([_workerCode], { type: 'text/javascript' })       _blobUrl = window.URL.createObjectURL(_codeBlob)       _worker = new Worker(_blobUrl)    } } function copyAsync(obj, callback) {    _createWorker()    _worker.onmessage = function(e) {       this.terminate()       callback(e.data)    }    _worker.postMessage(obj) } window.copyAsync = copyAsync })(window, window.document)

the usage is more or less self-explanatory..just call it and pass the object you want to clone and a callback function like:

copyAsync(obj, function(clone) {

// do something...

})

the only drawback is that it only works asynchronously...but it's fast since it uses the browsers native structured cloning algorithm