Posts

Showing posts with the label JavaScirpt

A Meaningful Client Side Alternative To node require()

TL;DR Here you have the solution to all your problems ... no? So take a break, and read through :) Current Status Using a generic " module loader " for JavaScript files is becoming a common technique, and full of wins, not only on the node.js server side. There are different client side alternatives , not entirely based over the module concept, and apparently only one concrete proposal, called AMD , able to work in both server and client following a build/parsing procedure. However, as somebody pointed out already ... AMD is Not the Answer This post does not even tell everything bad about AMD problems, and I am getting there, but it's surely a good starting point. Tobie article is another resource that inspired somehow what I am going to propose here, so before discriminating this or that technique, I hope you'll find time to understand the whole problem ... found it? Let's go on then :) The Beauty Of node.js require Function I don't think I should even s...

My BerlinJS Slides

It was a great event today at @co_up in @berlinjs meet-up and here are my sides about wru which accordingly with today meeting means where are you , directly out of SMS syntax. Enjoy ;)

ES5 NOW! ... or better, @falsyvalues

Update more than a person asked me more details and here I am: The workshop will be Thursday 19th of May on Track 3 and from 9am to 5pm. Registrations open at 8am and to be sure everything I have written is correct, please double check the schedule . This time is not about my uncle, this time is about my workshop in Warsaw, during Falsy Values Event , and this is its description: Massive rumours behind buzz words such HTML5 and ES5, the latest updated specification about JavaScript programming language, have surely increased confusion about where is JavaScript today, and how this language should be in the future. Unfortunately, we all know that many users are still trapped behind really outdated browsers and their relative JS engines. This could lead us to be stuck with old coding patterns and style but here I am to show most recent performances oriented techniques that could make the transition to this new specification less painful and efficient Size matters: code size oriented tech...

Rewind: getters & setters for all IE with cross browser VBClass!

spoiler: if once again everybody knew except me, you guys should do something to be better indexed in Google ... while if this is totally new and cool, well, you are welcome :) Sometimes I am stubborn, so stubborn, that even if it was me writing this post , and this one after , I have never given up about IE < 9 getters and setters ... " there must be a way ", I have thought during last days, and ... yes, eventually I have found the way ! Test Driven Developed Solution I have decided the possible behaviour, I have implemented all use cases, and I have successfully validated them against all browsers I could came up, with the exception of a single test, the first one, which fails in those browsers unable to freeze an object ... well, these browsers are disappearing thanks to their suggested, or automatic, updates, so everything is fine. Here the unit test that should cover 100% of the used JavaScript and/or the used VBScript where available (only IE < 9 so please don...

100% Client Side Image Resizing

... I know, I have said " Happy Holidays " already, but yesterday, after a (annoying) picture upload in Facebook , I had a an idea ... why on earth I should have a Java plugin to perform images resizes on Facebook? Why on earth if I don't have such plugin I have to wait the possibly extremely long upload, up to 10x slower for high quality images, stressing Facebook servers for such " simple " operation as an image resize/resample could be? The FileReader Interface In the W3C File API , I guess part of the HTML5 buzzword, we can find all we need to perform the operation we want totally on client side. The interface is called FileReader , and it provides functionalities to read chosen files from an input node with type file, and that's it: we can even disconnect from the network and keep resizing and saving images without problems . The Canvas Trick Still into HTML5 buzzword world, the canvas element and it's 2dContext.drawImage method is the key to perfo...

mjst - Micro JavaScript Template Engine

This is the content I've written so far in the official mjst repository . I'd love to know your thoughts about this little experiment, cheers! What mjst is a lightweight, about 1Kb minified and gzipped, and performances focused template engine with standards support. There are dozens JavaScript ? Template Engines solutions out there but as far as I know this is the only one based on validation for both client and server side programming languages. How There is one single function to call: // via text (e.g. Ajax or innerHTML from a template node) var transformed = mjst ( '<?js var hello = "mjst!"; ?><js-hello/>' ); // classic template node example < script id = "mytpl" type = "text/html" >   <? js     var hello = "mjst!" ;   ?>   < js - hello /> < /script> myEl.innerHTML = mjst(document.getElementById("mytpl")); / / via XML ( e . g . Ajax or a created document ) // this is a ...

DOM Node Proxy

This is just a quick post from home sweet home. A common DOM related problem is to create an association between a node and a generic object. The most dirty, memory leaks prone, and obtrusive way to perform this task is this one: document.body.obj = { prop:"value", otherProp:function(){} }; Above snippet is a bad practice for different reasons. obtrusive , it's assuming that no other libraries will use "obj" property name to perform an analogue task dirty , if we associate a primitive value Internet Explorer will expose it in the node string representation memory leaks , if the object points something "live", another node, or a HTMLCollection, the generic node will never be collected by the garbage Alternatives Specially to avoid last problem, the memory consumption, it's a good practice to store an index, rather than an object. To make things less obtrusive and get rid of conflicts, we usually create a "unique id". // the array ...

Named function expressions demystified III

Update For those interested about Internet Explorer scope resolution, I summarized everything in 5 slides . This is hopefully the end of the Named function expressions demystified trilogy, where here you can find episode I , and episode II . Juriy knows I am hard to convince, but apparently he is not better than me at all ... Inglorious Correction Sure, it's better than nothing, but after I have spent dunno how many tweets plus 2 posts, all I have obtained is a small correction in the whole article (and you have to scroll a bit before): Generally, we can emulate function statements behavior from the previous example with this standards-compliant (and unfortunately, more verbose) code: var foo; if (true) { foo = function foo(){ return 1; }; } else { foo = function foo() { return 2; }; }; // call the function, easy? foo(); Above snippet is the best solution in the entire article but probably to avoid my name in article credits, and it does not matter since I ...

Named function expressions demystified

Update If after this reading things are still the same, please read the part 2 of this post , thanks. This is a re-post, and few considerations, about the good Juriy article , which I suggest for every JavaScript developer with a deeper knowledge than just an API (jQuery or others). Github For Everything! My first consideration is about github, something I've never used that much since via Google Code I feel pretty comfortable with subversion. I find truly interesting the way Juriy is tracking his documentation, I've never thought about an article, as my old JavaScript Prototypal Inheritance could be, in a code repository as kangax did: good stuff! My Alternative Solution There are few extra consideration to do over Juriy explanation, plus minor inconsistencies. The first thing is that Internet Explorer basically manages Function expressions and Function declarations in the same way, there's no such VS in the middle. The fact we assign the function to a whatever named v...

YUI Compressor Meets The Batch Scripting

Mainly to work, also to investigate some good old DOS feature, I created a batch file able to make YUI Compressor more portable and easy for every Windows based client/server developer. I wrote the story, and I described each file, plus I added a workable Zip with everything you need to understand what I have created and use it, starting with a double click into a projects/vice-versa.bat file which aim is to create from a list of files a unique YUI Compressed one. Here is the link , the rest is up to you (comments, questions, suggestions, etc)

Drip under control via another IE memory leak tentative ...

Apparently, using this strategy I can obtain a flat line in Drip monitor: // function used to remove a node, every attached // attribute and every nested node via the same procedure var destroy = (function(destroy){ // WebReflection IE leaks attemp! function $destroy(node){ while(node.lastChild) destroy(node.lastChild); if(node.parentNode) node.parentNode.removeChild(node); }; return destroy = destroy.clearAttributes ? function(node){ if(node.clearAttributes) // Hedger suggestion node.clearAttributes(); $destroy(node); } : $destroy ; })(document.createElement("script")); // used to remove everything function destroyAll(){ destroy(document.documentElement); }; // used to avoid leaks when the page is refreshed // or the url is changed if(this.attachEvent) attachEvent("onunload", destroyAll); reasonable performances and apparently a relia...

Ext JS - How to hack the JsonReader

I have a new job ( hooooray?! ) and I suggested Ext JS framework as web UI to focus more about Ajax, XML + XSLT data interactions rather than problems with CSS, events delegations, etc ... and I guess I am doing well, so well, that here I am with a simple tiny trick to hack an Ext.data.JsonReader instance, specially the root and the totalProperty params: // directly from Ext JS 2.2 API site // http://extjs.com/deploy/dev/docs/ new Ext.data.JsonReader({ totalProperty: "results", // The property which contains the total dataset size (optional) root: "rows", // The property which contains an Array of row objects id: "id" // The property within each row object that provides an ID for the record (optional) }) Especially for the paginator toolbar, the JsonReader is a must to surf a big amount of data without stressing too much both server and client sides. One nice feature, or one cleve...

Image Protector, a nice waste of time

I've read right now about another, pointless, attempt, to avoid the classic Save Image As from a website. Guys, we are in 2008, and I hope that everybody knows what can the simple Stamp / Print button can do, when we are simply watching whatever in our screen. No way, every tot months, somebody "creates" the ultimate version of an Image Protector , usually based on JavaScript, then "startly pointless" because JS could be easily disabled. Morevore, this times the trickless trick even requires an excellent library as MooTools is. Well, since I hate disinformations about techniques to make data truly safe, I can tell you that you need 159 characters to remove the protecion , javascript protocol included. The funny stuff is that basing the same anti protector over MooTools, since this library is required for the amazing protector, you need even less characters to do the same, basing them on a $$("img") call, instead of document.getElementsByTagName. Bei...

Io programming language List for JavaScript

Io is a small, prototype-based programming language. The ideas in Io are mostly inspired by Smalltalk (all values are objects, all messages are dynamic), Self (prototype-based), NewtonScript (differential inheritance), Act1 (actors and futures for concurrency), LISP (code is a runtime inspectable/modifiable tree) and Lua (small, embeddable). This programming language is really interesting, starting from syntax, throw the entire guide . One of its primitive type is called List, and this is a summary of this type: A List is an array of references and supports all the standard array manipulation and enumeration methods. It seems that List is all we need when we think about an Array of elements ... so why couldn't we have something similar in JavaScript? // Io programming language List example // followed by my JavaScript List implementation a := List clone a = List.clone() a := list(33, "a") a = list(33, "a") a append("b") a.append("b") ==> ...