Nathan White [ Web Developer ]
nwhite.net
Search
Home
About
Apr
01
2009
3
Javascript Obfuscation
Category: Javascript #8212;
In recent weeks my plate has been full as I plan for a big move. When I get stressed I usually play a game of chess to help relax a bit. Last night I took a different approach. I created my own brain teaser. I haven #8217;t played golf with the following code yet, so the code isn #8217;t optimized and it could be greatly reduced. The code is in pure javascript, no libraries, but it does require a decent javascript engine to handle forEach, map etc. Sorry IE.
span style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span span style="color: #009900;" #123;span
span style="color: #003366; font-weight: bold;"varspan r span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanaspan style="color: #009900;" #41;span span style="color: #009900;" #123;span
span style="color: #000066; font-weight: bold;"ifspan span style="color: #009900;" #40;spana span style="color: #339933;"==span undefinedspan style="color: #009900;" #41;span span style="color: #000066; font-weight: bold;"returnspan t;
isNaNspan style="color: #009900;" #40;spanaspan style="color: #009900;" #41;span span style="color: #339933;"?span span style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
t span style="color: #339933;"=span span style="color: #009900;" #91;spana.span style="color: #660066;"matchspanspan style="color: #009900;" #40;spanspan style="color: #009966; font-style: italic;"/.{5}/gspanspan style="color: #009900;" #41;span.span style="color: #660066;"mapspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanpspan style="color: #009900;" #41;span span style="color: #009900;" #123;span
span style="color: #000066; font-weight: bold;"returnspan parseIntspan style="color: #009900;" #40;spanpspan style="color: #339933;",span span style="color: #CC0000;"33spanspan style="color: #009900;" #41;span.span style="color: #660066;"toStringspanspan style="color: #009900;" #40;spanspan style="color: #CC0000;"10spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span.span style="color: #660066;"matchspanspan style="color: #009900;" #40;spanspan style="color: #009966; font-style: italic;"/.{6}/gspanspan style="color: #009900;" #41;span.span style="color: #660066;"mapspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanpspan style="color: #009900;" #41;span span style="color: #009900;" #123;span
span style="color: #000066; font-weight: bold;"returnspan parseIntspan style="color: #009900;" #40;spanpspan style="color: #339933;",span span style="color: #CC0000;"7spanspan style="color: #009900;" #41;span.span style="color: #660066;"toStringspanspan style="color: #009900;" #40;spanspan style="color: #CC0000;"17spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span.span style="color: #660066;"matchspanspan style="color: #009900;" #40;spanspan style="color: #009966; font-style: italic;"/.{4}/gspanspan style="color: #009900;" #41;span.span style="color: #660066;"reversespanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span.span style="color: #660066;"mapspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanpspan style="color: #009900;" #41;span span style="color: #009900;" #123;span
span style="color: #003366; font-weight: bold;"varspan a span style="color: #339933;"=span p.span style="color: #660066;"splitspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"returnspan aspan style="color: #009900;" #91;spanspan style="color: #CC0000;"1spanspan style="color: #009900;" #93;span span style="color: #339933;"+span aspan style="color: #009900;" #91;spanspan style="color: #CC0000;"3spanspan style="color: #009900;" #93;span span style="color: #339933;"+span aspan style="color: #009900;" #91;span0span style="color: #009900;" #93;span span style="color: #339933;"+span aspan style="color: #009900;" #91;spanspan style="color: #CC0000;"2spanspan style="color: #009900;" #93;span;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #93;span.span style="color: #660066;"mapspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanpspan style="color: #009900;" #41;span span style="color: #009900;" #123;span
span style="color: #003366; font-weight: bold;"varspan a span style="color: #339933;"=span p.span style="color: #660066;"matchspanspan style="color: #009900;" #40;spanspan style="color: #009966; font-style: italic;"/.{2}/gspanspan style="color: #009900;" #41;span;
a.span style="color: #660066;"forEachspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spancspan style="color: #339933;",span ispan style="color: #009900;" #41;span span style="color: #009900;" #123;span bspan style="color: #009900;" #91;spani span style="color: #339933;"%span span style="color: #CC0000;"3spanspan style="color: #009900;" #93;span.span style="color: #660066;"pushspanspan style="color: #009900;" #40;spancspan style="color: #009900;" #41;span; span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"returnspan bspan style="color: #009900;" #91;spanspan style="color: #CC0000;"2spanspan style="color: #009900;" #93;span.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span span style="color: #339933;"+span bspan style="color: #009900;" #91;span0span style="color: #009900;" #93;span.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span span style="color: #339933;"+span bspan style="color: #009900;" #91;spanspan style="color: #CC0000;"1spanspan style="color: #009900;" #93;span.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #91;span0span style="color: #009900;" #93;span.span style="color: #660066;"matchspanspan style="color: #009900;" #40;spanspan style="color: #009966; font-style: italic;"/.{2}/gspanspan style="color: #009900;" #41;span.span style="color: #660066;"mapspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanpspan style="color: #009900;" #41;span span style="color: #009900;" #123;span
span style="color: #003366; font-weight: bold;"varspan x span style="color: #339933;"=span p.span style="color: #660066;"splitspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"returnspan String.span style="color: #660066;"fromCharCodespanspan style="color: #009900;" #40;spanparseIntspan style="color: #009900;" #40;spanxspan style="color: #009900;" #91;spanspan style="color: #CC0000;"1spanspan style="color: #009900;" #93;span span style="color: #339933;"+span xspan style="color: #009900;" #91;span0span style="color: #009900;" #93;spanspan style="color: #339933;",span span style="color: #CC0000;"17spanspan style="color: #009900;" #41;span.span style="color: #660066;"toStringspanspan style="color: #009900;" #40;spanspan style="color: #CC0000;"10spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span span style="color: #339933;":span span style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
d span style="color: #339933;"=span a.span style="color: #660066;"toStringspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span.span style="color: #660066;"splitspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span; l span style="color: #339933;"=span d.span style="color: #660066;"lengthspan; p span style="color: #339933;"=span t.span style="color: #660066;"splitspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"ifspan span style="color: #009900;" #40;spanl span style="color: #339933;"==span span style="color: #CC0000;"3spanspan style="color: #009900;" #41;span span style="color: #009900;" #123;span d.span style="color: #660066;"forEachspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanispan style="color: #009900;" #41;span span style="color: #009900;" #123;span p.span style="color: #660066;"pushspanspan style="color: #009900;" #40;spanpspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;spanspan style="color: #009900;" #41;span; span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span; t span style="color: #339933;"=span p.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span; span style="color: #009900;" #125;span
span style="color: #000066; font-weight: bold;"elsespan span style="color: #009900;" #123;span t span style="color: #339933;"=span d.span style="color: #660066;"mapspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanispan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span span style="color: #000066; font-weight: bold;"returnspan pspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;span;span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span span style="color: #339933;"+span p.span style="color: #660066;"joinspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"''spanspan style="color: #009900;" #41;span; span style="color: #009900;" #125;span
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"returnspan arguments.span style="color: #660066;"calleespan;
span style="color: #009900;" #125;spanspan style="color: #339933;",span t span style="color: #339933;"=span span style="color: #3366CC;"''spanspan style="color: #339933;",span aspan style="color: #339933;",span pspan style="color: #339933;",span b span style="color: #339933;"=span span style="color: #009900;" #91;spanspan style="color: #009900;" #91;spanspan style="color: #009900;" #93;spanspan style="color: #339933;",span span style="color: #009900;" #91;spanspan style="color: #009900;" #93;spanspan style="color: #339933;",span span style="color: #009900;" #91;spanspan style="color: #009900;" #93;spanspan style="color: #009900;" #93;spanspan style="color: #339933;",spancspan style="color: #339933;",spanispan style="color: #339933;",spandspan style="color: #339933;",spanl;
span style="color: #000066; font-weight: bold;"returnspan r;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"'sbuq1iunojjo8q7'spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #40;spanspan style="color: #CC0000;"165spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #40;spanspan style="color: #CC0000;"12spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span;
Spoiler:
Continue reading #8220;Javascript Obfuscation #8221;
Mar
05
2009
2
MooDocs TextMate Command
Category: Utilities #8212;
Tags: Markdown, Mootools, TextMate
José Prado just released the MooDocs Coda plug-in . The plug-in allows Coda to parse MooTools Classes and generates a Markdown formatted template ready to fill in with details. I took his great work and modified it for TextMate.
I packaged it as a single command that installs into the Javascript bundle. I also assigned lt;command gt;-D to the command, for even quicker generation. One minor thing I fixed with the code was the parsing of the class name. There were a few cases where classes are created without var and have a #8216;dot #8217; in the name. Like Fx.Morph or Drag.Move.
You are still required to end your classes like so:
span style="color: #003366; font-weight: bold;"varspan MyClass span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"newspan span style="color: #003366; font-weight: bold;"Classspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;span style="color: #006600; font-style: italic;"//endspan
Download MooDocs for TextMate
Update:
MooDocs for TextMate has been moved to a github repo
Tags: Markdown, Mootools, TextMate
Feb
25
2009
9
Lasso.Crop Preview
Category: Image Manipulation, Mootools #8212;
Tags: lasso, moocroop, Mootools
After releasing the #8220;magnetic poetry #8221; demo I have been working hard trying to make the code more reusable for all. In the process there has been a name change from Rubberband to Lasso. The original Rubberband code has been a great source of inspiration, but not much is left of it. I have completely gutted it reworking a lot of the internal logic.
First, the eye candy
Continue reading #8220;Lasso.Crop Preview #8221;
Tags: lasso, moocroop, Mootools
Feb
17
2009
4
Writing Mootool Classes. Things I #8217;ve learned.
Category: Mootools #8212;
Tags: Mootools
With the release of my demo last week I have had many requests to make a public API. In the process of doing so I have run into a lot of things with classes that I haven #8217;t encountered before. This has led to quite a bit of frustration because of my lack of understanding in properly using the framework. In hopes to save someone else time, below is a list of tips that may help you from making the same mistakes as I did. This list mainly applies to developers that are trying to create reusable classes. If you #8217;re developing classes that wrap application behavior most of these gotchas don #8217;t apply.
1) Using Jan #8217;s Binds mutator can save a ton of time. When dealing with Classes that extend other classes execution order becomes critical. Binds can take a lot of this worry away.
2) When developing an abstract class that other classes can Implement even if it has options do not include #8216;options #8217; in the class. When Implemented it will blow away your previously set options. Fun times.
3) Extends and Implements do not play well together when the base class, extended class and the implemented class all have initialize functions. I might be doing something wrong here but it looks like the Implement class always wins, and you loose access to #8216;this.parent() #8217;.
4) Keep track of your events! Make sure you have the ability to detach them. Again Jan #8217;s Binds can help with this.
Update:
Jan #8217;s version of bind doesn #8217;t work in 1.2 Check out Aaron #8217;s which does.
Aaron write:
The key to Implements is to think of them as add-ons, not inheritance. It would be like having a mixin for your car that adds wheels. If your car had wheels, you wouldn #8217;t need it. So #8220;Implements: Wheels #8221; adds wheels. Classes that are meant to be mixins shouldn #8217;t have any members that are already in use (like options or initialize). This is different than Extends. Extends in our car analogy would be the Model T followed by the 57 Corvette. Corvette inherits from Model T numerous things and adds additional items and can refer to elements in its inheritance chain. But Model T, Corvette, and Ferrari all Implements: Wheels. If you Implements: Wheels onto Model T, you don #8217;t need to do it to Corvette and Ferrari, because they inherit from Model T.
Tags: Mootools
Feb
13
2009
0
Visual Sorting Explained
Category: Mootools, Utilities #8212;
Tags: Javascript, Mootools, sorting, UI
I am getting the impression that my previous post was a bit esoteric. It has some valid uses and I want to help visualize how you might use the #8216;visualSort #8217; method on Elements.
Lets first take a look at the demo I put up.
In the above image we have selected 5 elements. As you can see none of them are aligned and they actually overlap. However, the human eye discerns that there are 2 lines of elements. 3 on the top row, 2 on the bottom. The #8216;visualSort #8217; method allows you to see elements like a users would in your code.
How visualSort solves this problem is two fold. First, it takes all the elements and sorts them by the #8216;top #8217; coordinate. Once this sort is complete a second sort is performed. The first element is grabbed and an index is made based off the #8216;tolerance #8217; (defaults to .5 or 50%). What this means is the height of the element is taken and multiplied by the #8216;tolerance #8217;. This result is added to the to the top value to get a tolerance range.
For example if chocolate had a top of 10px and was 20px in height. The tolerance would be within 10-20px. Any following element that has a top pixel within this range will be added to the same row. As an element is added to a row they are sorted by the left pixel to make sure they are in the correct order. If an element is not within that range a new row is created along with a new tolerance. The cycle repeats until all elements have been processed.
Continue reading #8220;Visual Sorting Explained #8221;
Tags: Javascript, Mootools, sorting, UI
Feb
13
2009
1
Visual Sorting
Category: Mootools, Utilities #8212;
Tags: Javascript, Mootools, sorting, UI
As promised I have been cleaning up the code to my most recent demo. I will be releasing a much more polished API along with documentation in the near future. Stay tuned.
I just completed one of the biggest headaches. Visual sorting. This allows DOM elements to be sorted in the same way humans would visually. I tried to make this as simple as possible to use.
I extended #8216;Elements #8217; with a new method #8216;visualSort #8217;. The tricky part with a visual sort is the fuzzy logic needed to handle elements being offset. If you play with the demo you will get a feel for what I am talking about. In the demo, there is no need for pixel perfect alignment of elements to be considered on the same row. To require this would make the UI completely useless. To have this kind of fuzzy range matching #8216;visualSort #8217; has a tolerance parameter. This allows you to define how much elements can be offset before it is considered a new #8216;row #8217;. Currently, tolerance defaults to .5 (50%). I also established a second parameter #8216;flatten #8217;. If set to true the sorted list will be flattened and returned as an Elements object. Currently #8216;visualSort #8217; defaults to false which returns a multidimensional array.
In writing this code I tried to optimize the sorting as much as possible. I see a few places that can be tweaked but overall it should be fast. I didn #8217;t use any sort() methods. I handle all my own sorting as I iterate through the elements. Feel free to ask questions about the logic or code.
Enjoy! My Brain still hurts.
Elements.span style="color: #660066;"implementspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span
visualSort span style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spantolerancespan style="color: #339933;",spanflattenspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
span style="color: #003366; font-weight: bold;"varspan tolerance span style="color: #339933;"=span span style="color: #009900;" #40;spantolerancespan style="color: #009900;" #41;span || .5;
span style="color: #003366; font-weight: bold;"varspan idx span style="color: #339933;"=span span style="color: #009900;" #91;spanspan style="color: #009900;" #93;spanspan style="color: #339933;",span elspan style="color: #339933;",span c1span style="color: #339933;",span c2span style="color: #339933;",span placed;
span style="color: #000066; font-weight: bold;"forspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"varspan i span style="color: #339933;"=span 0span style="color: #339933;",span l span style="color: #339933;"=span span style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"lengthspan; i span style="color: #339933;" lt;span l; ispan style="color: #339933;"++spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
el span style="color: #339933;"=span span style="color: #000066; font-weight: bold;"thisspanspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;span; c1 span style="color: #339933;"=span el.span style="color: #660066;"getCoordinatesspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"ifspanspan style="color: #009900;" #40;spanspan style="color: #339933;"!spanispan style="color: #009900;" #41;span idxspan style="color: #009900;" #91;span0span style="color: #009900;" #93;span span style="color: #339933;"=span span style="color: #009900;" #91;spanelspan style="color: #339933;",span c1span style="color: #009900;" #93;span;
span style="color: #000066; font-weight: bold;"elsespan span style="color: #009900;" #123;span
j span style="color: #339933;"=span 0; placed span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"falsespan;
span style="color: #000066; font-weight: bold;"whilespanspan style="color: #009900;" #40;spanj span style="color: #339933;" lt;span i span style="color: #339933;" amp; amp;span span style="color: #339933;"!spanplaced span style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
c2 span style="color: #339933;"=span idxspan style="color: #009900;" #91;spanjspan style="color: #009900;" #93;spanspan style="color: #009900;" #91;spanspan style="color: #CC0000;"1spanspan style="color: #009900;" #93;span;
span style="color: #000066; font-weight: bold;"ifspanspan style="color: #009900;" #40;spanc1.span style="color: #660066;"topspan span style="color: #339933;" lt;span c2.span style="color: #660066;"topspanspan style="color: #009900;" #41;span placed span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"truespan;
span style="color: #000066; font-weight: bold;"elsespan j++;
span style="color: #009900;" #125;span
idx.span style="color: #660066;"splicespanspan style="color: #009900;" #40;spanjspan style="color: #339933;",span0span style="color: #339933;",spanspan style="color: #009900;" #91;spanelspan style="color: #339933;",spanc1span style="color: #009900;" #93;spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;span
span style="color: #009900;" #125;span
span style="color: #003366; font-weight: bold;"varspan rows span style="color: #339933;"=span span style="color: #009900;" #91;spanspan style="color: #009900;" #93;spanspan style="color: #339933;",span row span style="color: #339933;"=span 0span style="color: #339933;",span sorted span style="color: #339933;"=span span style="color: #009900;" #91;spanspan style="color: #009900;" #93;spanspan style="color: #339933;",span slenspan style="color: #339933;",span threshold;
span style="color: #000066; font-weight: bold;"forspanspan style="color: #009900;" #40;spani span style="color: #339933;"=span 0; i span style="color: #339933;" lt;span l; ispan style="color: #339933;"++spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
c1 span style="color: #339933;"=span idxspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;spanspan style="color: #009900;" #91;spanspan style="color: #CC0000;"1spanspan style="color: #009900;" #93;span;
span style="color: #000066; font-weight: bold;"ifspanspan style="color: #009900;" #40;spanspan style="color: #339933;"!spanispan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
rowsspan style="color: #009900;" #91;spanrowspan style="color: #009900;" #93;span span style="color: #339933;"=span span style="color: #009900;" #91;spanc1.span style="color: #660066;"topspanspan style="color: #339933;",spanspan style="color: #009900;" #40;spanc1.span style="color: #660066;"topspan span style="color: #339933;"+span c1.span style="color: #660066;"heightspanspan style="color: #339933;"*spantolerancespan style="color: #009900;" #41;spanspan style="color: #009900;" #93;span;
sortedspan style="color: #009900;" #91;spanrowspan style="color: #009900;" #93;span span style="color: #339933;"=span span style="color: #009900;" #91;span idxspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;span span style="color: #009900;" #93;span;
span style="color: #009900;" #125;span
span style="color: #000066; font-weight: bold;"elsespan span style="color: #009900;" #123;span
threshold span style="color: #339933;"=span rowsspan style="color: #009900;" #91;spanrowspan style="color: #009900;" #93;span;
span style="color: #000066; font-weight: bold;"ifspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #40;spanthresholdspan style="color: #009900;" #91;span0span style="color: #009900;" #93;span span style="color: #339933;" lt;=span c1.span style="color: #660066;"topspanspan style="color: #009900;" #41;span span style="color: #339933;" amp; amp;span span style="color: #009900;" #40;spanc1.span style="color: #660066;"topspan span style="color: #339933;" lt;=span thresholdspan style="color: #009900;" #91;spanspan style="color: #CC0000;"1spanspan style="color: #009900;" #93;spanspan style="color: #009900;" #41;span span style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
j span style="color: #339933;"=span 0; placed span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"falsespan; slen span style="color: #339933;"=span sortedspan style="color: #009900;" #91;spanrowspan style="color: #009900;" #93;span.span style="color: #660066;"lengthspan;
span style="color: #000066; font-weight: bold;"whilespanspan style="color: #009900;" #40;spanj span style="color: #339933;" lt;span slen span style="color: #339933;" amp; amp;span span style="color: #339933;"!spanplacedspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
c2 span style="color: #339933;"=span sortedspan style="color: #009900;" #91;spanrowspan style="color: #009900;" #93;spanspan style="color: #009900;" #91;spanjspan style="color: #009900;" #93;spanspan style="color: #009900;" #91;spanspan style="color: #CC0000;"1spanspan style="color: #009900;" #93;span;
span style="color: #000066; font-weight: bold;"ifspanspan style="color: #009900;" #40;spanc1.span style="color: #660066;"leftspan span style="color: #339933;" lt;span c2.span style="color: #660066;"leftspanspan style="color: #009900;" #41;span placed span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"truespan;
span style="color: #000066; font-weight: bold;"elsespan jspan style="color: #339933;"++span
span style="color: #009900;" #125;span
sortedspan style="color: #009900;" #91;spanrowspan style="color: #009900;" #93;span.span style="color: #660066;"splicespanspan style="color: #009900;" #40;spanjspan style="color: #339933;",span0span style="color: #339933;",spanidxspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;span span style="color: #000066; font-weight: bold;"elsespan span style="color: #009900;" #123;span
row++;
rowsspan style="color: #009900;" #91;spanrowspan style="color: #009900;" #93;span span style="color: #339933;"=span span style="color: #009900;" #91;spanc1.span style="color: #660066;"topspanspan style="color: #339933;",spanspan style="color: #009900;" #40;spanc1.span style="color: #660066;"topspan span style="color: #339933;"+span c1.span style="color: #660066;"heightspanspan style="color: #339933;"*spantolerancespan style="color: #009900;" #41;spanspan style="color: #009900;" #93;span;
sortedspan style="color: #009900;" #91;spanrowspan style="color: #009900;" #93;span span style="color: #339933;"=span span style="color: #009900;" #91;spanidxspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;spanspan style="color: #009900;" #93;span;
span style="color: #009900;" #125;span
span style="color: #009900;" #125;span
span style="color: #009900;" #125;span
span style="color: #003366; font-weight: bold;"varspan result span style="color: #339933;"=span span style="color: #009900;" #91;spanspan style="color: #009900;" #93;span;
span style="color: #000066; font-weight: bold;"forspanspan style="color: #009900;" #40;spani span style="color: #339933;"=span 0span style="color: #339933;",span l span style="color: #339933;"=span sorted.span style="color: #660066;"lengthspan; i span style="color: #339933;" lt;span l; ispan style="color: #339933;"++spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
resultspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;span span style="color: #339933;"=span span style="color: #009900;" #91;spanspan style="color: #009900;" #93;span;
span style="color: #000066; font-weight: bold;"forspanspan style="color: #009900;" #40;spanj span style="color: #339933;"=span 0span style="color: #339933;",span len span style="color: #339933;"=span sortedspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;span.span style="color: #660066;"lengthspan; j span style="color: #339933;" lt;span len; jspan style="color: #339933;"++spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
resultspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;spanspan style="color: #009900;" #91;spanjspan style="color: #009900;" #93;span span style="color: #339933;"=span sortedspan style="color: #009900;" #91;spanispan style="color: #009900;" #93;spanspan style="color: #009900;" #91;spanjspan style="color: #009900;" #93;spanspan style="color: #009900;" #91;span0span style="color: #009900;" #93;span;
span style="color: #009900;" #125;span
span style="color: #009900;" #125;span
span style="color: #000066; font-weight: bold;"ifspanspan style="color: #009900;" #40;spanflattenspan style="color: #009900;" #41;span span style="color: #000066; font-weight: bold;"returnspan $$span style="color: #009900;" #40;spanresult.span style="color: #660066;"flattenspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;spanspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"returnspan result;
span style="color: #009900;" #125;span
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
Example Usage:
span style="color: #003366; font-weight: bold;"varspan sorted span style="color: #339933;"=span $$span style="color: #009900;" #40;spanspan style="color: #3366CC;"'your selector'spanspan style="color: #009900;" #41;span.span style="color: #660066;"visualSortspanspan style="color: #009900;" #40;span.7span style="color: #009900;" #41;span;
I believe the value of this will be seen in Drag and Drop interfaces and layout managers. It could have some potential use for serializing specific components. If you find a use for it please share.
The demo has been updated with this code, it works in IE now.
Tags: Javascript, Mootools, sorting, UI
Feb
09
2009
13
Advanced UI component using Rubberband and Drag.Group
Category: Javascript, Mootools #8212;
Tags: Drag n Drop, Javascript, Mootools, rubberband, UI
I knew after posting Drag.Group I needed to get a demo up quickly. The code is not completely refined yet so use at your own risk. I will be making updates over the next couple of days and will keep you posted.
A while back ago I posted an update to the Rubberband class. Its hard to understand the class unless you actually use it. One of the limitations that I found was the use of draggable elements. The coordinate locations were not updated and as a result the rubberband feature didn’t work.
I have made steps to add this functionality in place, currently the API is a bit broken and I am cleaning up how the coordinates are stored. In the meantime, I am providing a proof of concept.
Enjoy the demo!
Continue reading #8220;Advanced UI component using Rubberband and Drag.Group #8221;
Tags: Drag n Drop, Javascript, Mootools, rubberband, UI
Feb
09
2009
3
Drag.Group for Mootools
Category: Utilities #8212;
Tags: Mootools
Update
Check out the demo.
I have been playing around with creating more advanced UI components recently. I ran into the need to be able to drag multiple items at a time. I created the following classes to solve my problem. It is important to know that this code is still in alpha stages and is just a proof of concept for now. I will posting a bit later how I use this to create a UI component.
Drag.span style="color: #660066;"Groupspan span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"newspan span style="color: #003366; font-weight: bold;"Classspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span
Implements span style="color: #339933;":span span style="color: #009900;" #91;spanOptionsspan style="color: #009900;" #93;spanspan style="color: #339933;",span
options span style="color: #339933;":span span style="color: #009900;" #123;span
span style="color: #3366CC;"'active'span span style="color: #339933;":span span style="color: #003366; font-weight: bold;"truespanspan style="color: #339933;",span
span style="color: #3366CC;"'store'span span style="color: #339933;":span span style="color: #3366CC;"'drag-group-item'spanspan style="color: #339933;",span
span style="color: #3366CC;"'filter'span span style="color: #339933;":span $lambdaspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"truespanspan style="color: #009900;" #41;spanspan style="color: #339933;",span
span style="color: #3366CC;"'drag'span span style="color: #339933;":span span style="color: #009900;" #123;spanspan style="color: #009900;" #125;span
span style="color: #009900;" #125;spanspan style="color: #339933;",span
elements span style="color: #339933;":span span style="color: #009900;" #91;spanspan style="color: #009900;" #93;spanspan style="color: #339933;",span
initialize span style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanoptionsspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
span style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"setOptionsspanspan style="color: #009900;" #40;spanoptionsspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #339933;",span
add span style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanelspan style="color: #339933;",spanoptionsspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
span style="color: #003366; font-weight: bold;"varspan drag span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"newspan Drag.span style="color: #660066;"Groupspan.span style="color: #000066; font-weight: bold;"Itemspanspan style="color: #009900;" #40;spanelspan style="color: #339933;",span span style="color: #000066; font-weight: bold;"thisspanspan style="color: #339933;",span $mergespan style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"optionsspan.span style="color: #660066;"dragspanspan style="color: #339933;",spanoptionsspan style="color: #009900;" #41;spanspan style="color: #009900;" #41;span
el.span style="color: #660066;"storespanspan style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"optionsspan.span style="color: #660066;"storespanspan style="color: #339933;",span drag span style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"elementsspan.span style="color: #660066;"pushspanspan style="color: #009900;" #40;spanelspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"returnspan drag;
span style="color: #009900;" #125;spanspan style="color: #339933;",span
start span style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanelspan style="color: #339933;",spaneventspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
span style="color: #000066; font-weight: bold;"ifspanspan style="color: #009900;" #40;spanspan style="color: #339933;"!spanspan style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"optionsspan.span style="color: #660066;"activespan || span style="color: #339933;"!spanspan style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"optionsspan.span style="color: #660066;"filterspanspan style="color: #009900;" #40;spanelspan style="color: #009900;" #41;spanspan style="color: #009900;" #41;span
el.span style="color: #660066;"retrievespanspan style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"optionsspan.span style="color: #660066;"storespanspan style="color: #009900;" #41;span.span style="color: #660066;"startspanspan style="color: #009900;" #40;spaneventspan style="color: #339933;",spanspan style="color: #003366; font-weight: bold;"truespanspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"elsespan span style="color: #009900;" #123;span
span style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"elementsspan.span style="color: #660066;"filterspanspan style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"optionsspan.span style="color: #660066;"filterspanspan style="color: #009900;" #41;span.span style="color: #660066;"eachspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanmatchspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
match.span style="color: #660066;"retrievespanspan style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"optionsspan.span style="color: #660066;"storespanspan style="color: #009900;" #41;span.span style="color: #660066;"startspanspan style="color: #009900;" #40;spaneventspan style="color: #339933;",spanspan style="color: #003366; font-weight: bold;"truespanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #339933;",spanspan style="color: #000066; font-weight: bold;"thisspanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;span
span style="color: #009900;" #125;span
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
Drag.span style="color: #660066;"Groupspan.span style="color: #000066; font-weight: bold;"Itemspan span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"newspan span style="color: #003366; font-weight: bold;"Classspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span
span style="color: #003366; font-weight: bold;"Extendsspan span style="color: #339933;":span Drag.span style="color: #660066;"Movespanspan style="color: #339933;",span
initialize span style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanelspan style="color: #339933;",spangroupspan style="color: #339933;",spanoptionsspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
span style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"groupspan span style="color: #339933;"=span group;
span style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"parentspanspan style="color: #009900;" #40;spanelspan style="color: #339933;",spanoptionsspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #339933;",span
start span style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spaneventspan style="color: #339933;",spanalertedspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span
span style="color: #000066; font-weight: bold;"ifspanspan style="color: #009900;" #40;spanalertedspan style="color: #009900;" #41;span span style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"parentspanspan style="color: #009900;" #40;spaneventspan style="color: #009900;" #41;span;
span style="color: #000066; font-weight: bold;"elsespan span style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"groupspan.span style="color: #660066;"startspanspan style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"thisspan.span style="color: #660066;"elementspanspan style="color: #339933;",spaneventspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;span
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
Drag.Group has the following options:
active : boolean ( if active grouping behavior is performed, else default Drag.Move)
store : string ( used to store the custom drag obj on the element )
filter : function ( takes one parameter (element). return true or false if it is part of the active drag group
drag : object ( default drag options for newly created items see Drag )
Usage :
span style="color: #003366; font-weight: bold;"varspan drag_group span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"newspan Drag.span style="color: #660066;"Groupspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span
span style="color: #3366CC;"'filter'span span style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"itemspanspan style="color: #009900;" #41;spanspan style="color: #009900;" #123;span span style="color: #000066; font-weight: bold;"returnspan span style="color: #000066; font-weight: bold;"itemspan.span style="color: #660066;"hasClassspanspan style="color: #009900;" #40;spanspan style="color: #3366CC;"'active'spanspan style="color: #009900;" #41;span; span style="color: #009900;" #125;span
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
drag_group.span style="color: #660066;"addspanspan style="color: #009900;" #40;spanelspan style="color: #009900;" #41;span;
The #8216;add #8217; method takes an optional second parameter which is a #8216;Drag.Move #8217; options object. This allows for overriding the drag behavior on a single element. #8216;add #8217; is currently limited to only taking one element at a time. I will add array support later.
My biggest concern with the current interface is the number of #8216;document #8217; events that get created. I haven #8217;t noticed any real issues in testing.
I will be following up with demos and extensions soon.
Tags: Mootools
Feb
07
2009
6
Insights from Link Nudging
Category: Javascript, Mootools #8212;
Tags: jquery, Mootools
Someone recently posted the question #8220;Mootools link nudging? #8221;. I honestly wasn #8217;t familar with the term, at first I thought it was an SEO trick. I fired up google and quickly learned it was a css padding animation trick. I saw that David Walsh did a version in
jquery
$span style="color: #009900;" #40;spanspan style="color: #3366CC;"'a.nudge'spanspan style="color: #009900;" #41;span.span style="color: #660066;"hoverspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span span style="color: #009900;" #123;span span style="color: #006600; font-style: italic;"//mouse in span
$span style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"thisspanspan style="color: #009900;" #41;span.span style="color: #660066;"animatespanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span paddingLeftspan style="color: #339933;":span span style="color: #3366CC;"'20px'span span style="color: #009900;" #125;spanspan style="color: #339933;",span span style="color: #CC0000;"400spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #339933;",span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span span style="color: #009900;" #123;span span style="color: #006600; font-style: italic;"//mouse out span
$span style="color: #009900;" #40;spanspan style="color: #000066; font-weight: bold;"thisspanspan style="color: #009900;" #41;span.span style="color: #660066;"animatespanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span paddingLeftspan style="color: #339933;":span 0 span style="color: #009900;" #125;spanspan style="color: #339933;",span span style="color: #CC0000;"400spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
and mootools.
$$span style="color: #009900;" #40;spanspan style="color: #3366CC;"'a.nudge'spanspan style="color: #009900;" #41;span.span style="color: #660066;"eachspanspan style="color: #009900;" #40;spanspan style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanelspan style="color: #009900;" #41;span span style="color: #009900;" #123;span
span style="color: #003366; font-weight: bold;"varspan fx span style="color: #339933;"=span span style="color: #003366; font-weight: bold;"newspan Fx.span style="color: #660066;"Morphspanspan style="color: #009900;" #40;spanelspan style="color: #339933;",spanspan style="color: #009900;" #123;span durationspan style="color: #339933;":spanspan style="color: #CC0000;"300spanspan style="color: #339933;",span linkspan style="color: #339933;":spanspan style="color: #3366CC;"'cancel'span span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
el.span style="color: #660066;"addEventsspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span
span style="color: #3366CC;"'mouseenter'spanspan style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span span style="color: #009900;" #123;span fx.span style="color: #660066;"startspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span span style="color: #3366CC;"'padding-left'spanspan style="color: #339933;":span span style="color: #CC0000;"20span span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span; span style="color: #009900;" #125;spanspan style="color: #339933;",span
span style="color: #3366CC;"'mouseleave'spanspan style="color: #339933;":span span style="color: #003366; font-weight: bold;"functionspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #41;span span style="color: #009900;" #123;span fx.span style="color: #660066;"startspanspan style="color: #009900;" #40;spanspan style="color: #009900;" #123;span span style="color: #3366CC;"'padding-left'spanspan style="color: #339933;":span 0 span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span; span style="color: #009900;" #125;span
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
span style="color: #009900;" #125;spanspan style="color: #009900;" #41;span;
I first noticed that the mootools code could be more #8220;moo #8221;.
#8216;$$ #8217; returns an #8216;Elements #8217; object. Elements acts like an array but extended with #8216;$ #8217; ( #8217;Element #8217;). Mootools has the generic #8217;set #8217; function for setting a multitude of things on each element. The #8217;set #8217; properties can be customized or added by extending #8216;Element.Properties #8217;.
Continue reading #8220;Insights from Link Nudging #8221;
Tags: jquery, Mootools
Dec
18
2008
6
Compressed JSON Requests
Category: Utilities #8212;
Tags: compression, JSON, Mootools
I rarely find myself in a place where I am writing javascript applications that use AJAX in its pure form. I have long abandoned the #8216;X #8217; and replaced it with #8216;J #8217; (JSON). When working with Javascript, it just makes sense to return JSON. Smaller footprint, easier parsing and an easier structure are all advantages I have gained since using JSON.
In a recent project I found myself unhappy with the large size of my result sets. The data I was returning was tabular data, in the form of objects for each row. I was returning a result set of 50, with 19 fields each. What I realized is if I augment my result set I could get a form of compression.
span style="color: #006600; font-style: italic;"// uncompressedspan
JSON span style="color: #339933;"=span span style="color: #009900;" #123;span
data span style="color: #339933;":span span style="color: #009900;" #91;span
span style="color: #009900;" #123;span field1 span style="color: #339933;":span span style="color: #3366CC;"'data1'spanspan style="color: #339933;",span field2 span style="color: #339933;":span span style="color: #3366CC;"'data2'spanspan style="color: #339933;",span field3 span style="color: #339933;":span span style="color: #3366CC;"'data3'span span style="color: #009900;" #125;spanspan style="color: #339933;",span
span style="color: #009900;" #123;span field1 span style="color: #339933;":span span style="color: #3366CC;"'data4'spanspan style="color: #339933;",span field2 span style="color: #339933;":span span style="color: #3366CC;"'data5'spanspan style="color: #339933;",span field3 span style="color: #339933;":span span style="color: #3366CC;"'data6'span span style="color: #009900;" #125;spanspan style="color: #339933;",span
.....
span style="color: #009900;" #93;span
span style="color: #009900;" #125;span;
span style="color: #006600; font-style: italic;"//compressedspan
JSON span style="color: #339933;"=span span style="color: #009900;" #123;span
data span style="color: #339933;":span span style="color: #009900;" #91;span span style="color: #3366CC;"'data1'spanspan style="color: #339933;",spanspan style="color: #3366CC;"'data2'spanspan style="color: #339933;",spanspan style="color: #3366CC;"'data3'spanspan style="color: #339933;",spanspan style="color: #3366CC;"'data4'spanspan style="color: #339933;",spanspan style="color: #3366CC;"'data5'spanspan style="color: #339933;",spanspan style="color: #3366CC;"'data6'span span style="color: #009900;" #93;spanspan style="color: #339933;",span
keys span style="color: #339933;":span span style="color: #009900;" #91;span span style="color: #3366CC;"'field1'spanspan style="color: #339933;",span span style="color: #3366CC;"'field2'spanspan style="color: #339933;",span span style="color: #3366CC;"'field3'span span style="color: #009900;" #93;span
span style="color: #009900;" #125;span;
I merged all my values into a single array and store all my fields in a separate array. Returning a key value pair for each result cost me 8800 byte (8.6kb). Ripping the fields out and putting them in a separate array cost me 186 bytes. Total savings 8.4kb.
Now I have a much more compressed JSON file, but the structure is different and now harder to work with. So I implement a solution in Mootools to make the decompression transparent.
Continue reading #8220;Compressed JSON Requests #8221;
Tags: compression, JSON, Mootools
Next Page raquo;
Twitter
Recent Posts
Apr 1st
Javascript Obfuscation
Mar 5th
MooDocs TextMate Command
Feb 25th
Lasso.Crop Preview
Feb 17th
Writing Mootool Classes. Things I #8217;ve learned.
Feb 13th
Visual Sorting Explained
Categories General (2)
Javascript (8)
Mootools (21)
Image Manipulation (3)
Mutator (2)
Text Effects (1)
Utilities (7)
PHP (1)
Wordpress (1)
Archives
April 2009
March 2009
February 2009
December 2008
October 2008
September 2008
Tag Cloud
compression
design pattern
Drag n Drop
flash replacement
Hacking
Image Transition
Javascript
jquery
JSON
lasso
Markdown
moocroop
MooCrop
Mootools
Mutator
PHP
registry
rss
rubberband
sorting
text effect
TextMate
UI
Wordpress
Recent Comments
Jun 21stDaniel Steigerwald on Registry Class for MootoolsHi Nathan. I evolved your registry to meet my needs, also I fixed several issues, see specs. http://gist.github.com/133613
Apr 10thGuillermo Rauch on Javascript ObfuscationJust use rot13 and call it a day :D
Apr 2ndnwhite on Javascript ObfuscationNo server side scripts. This was hand baked for my own amusement. This solution would probably need some adjustments to be used in more generic cases. With all the base conversion I am sure there are
Apr 2ndolivier on Javascript Obfuscationthis great, but where is the other half? you know, its server side cousin. I want it!
Mar 8thTatai on Lasso.Crop PreviewAwesome Nathan! Clear, smooth and fast. We are waiting for a stable version!
top
Powered by WordPress