My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Wednesday, October 03, 2007

Are You Ready To Pack ?

I'm pleased to announce my last revolutionary project called packed.it !

Just another minifier packer alternative ???


No guys! packed.it goals is to reduce using best practices both CSS and JavaScript sources in a single file.
You can write directly on JS area or in CSS one or upload one or more file, choosing which one should be executed before others.
Based on MyMin project, a personal revisit of JSmin plus a dedicated compressor and a CSS minifier for C#, JavaScript, PHP or Python languages, packed.it creates a project archive, in zip format, that will contain everything You need to server your files gzipped, deflated or clear for browsers or robots that does not support gz pages.


Not only JavaScript !


The innovative packed.it idea is to process both JavaScript and CSS to create a single project file just compiled to be served using gzip, deflate or clear text.
In this case your server will not need to do anything, just serve correct file verifying its sha1 summary to choose it browser need to download them or use them from its cache.
Any other JavaScript compressor system includes possibility to pack CSS too and the reason is really simple.

How many times You write CSS dedicated only for your client library?
How many times You use words such div, body, li, #some-id, float, width inside CSS using same words inside JavaScript too?
Think about document.body, var li, getElementsByTagName("div"), getElementById("some-id"), setStyle("width") and so on.

My personal compressor, inspired by fantastic Dean Edwards packer idea, creates a single list of keywords used inside both CSS and JavScript sources.

Its simple but efficient algorithm counts how many times one word is present inside merged sources, CSS + JavaScript, and orders them to put most common words at the begin of keywords list, moving before words with length bigger than others.

In few words, every word will be replaced inside source reducing its size from 30% to 60% and if browser is compatible with gzip or deflate, final size should be even less than 20% of original one.


Do You want to know more about MyMin ?


MyMin is originally based on JSmin C implementation but it was partially rewrote to be compatible with JavaScript conditional comments too (for example: /*@cc_on @*/ and //@cc_on) while MyMinCSS is a simply but powerful minifier dedicated only for CSS and totally wrote by myself.


Do You want to know more about MyMin Compressor ?


MyMin Compressor works with every kind of source. This mean that You don't need to respect any rule when You write your JS or CSS code just because it doesn't modify original output and result will be exactly the same.
Its also based on fastest decompression algorithm I could thought and sources parsed with this Compressor will be available quickly even using old computers.

Its decompression procedure is compatible with every recent browser (IE 5.5 or greater, FireFox 1 or greater, Safari 2 or greater, KDE 3 or greater, Opera 7 or greater, NetScape 6 or greater, others too!) and should be compatible with old browsers too just adding a little function like this one before decompression (required only with IE5 or lower).


Do You need something else to choose packed.it ?


I hope there's no reason to don't use packed.it service:

  • it's innovative

  • it's free

  • it's compatible with W3 validator and WatchFire too (WAI-AAA friendly)


Ok, I know, It's beta ... but it's just working so please tell me some question to create a useful F.A.Q. site section or tell me if something doesn't work as expected.

Regards, and have fun with Web 2.0 technologies !

P.S. I'm working to include a C# and Python variant to packed.it.php file (gzipped and deflated files just works with every language).
If You want to do it for me before I'll do that, please tell me and I'll put your credits in dedicated page, thank You :-)



Example using Ext (all both for JS and CSS)
ext-all.js + ex-all.css ... original size: 559.90 Kb
after packed.it conversion: one file, total size: 129.81 Kb :-)

Example using jQuery + jQuery UI + every CSS theme
From 260 Kb to 40Kb , about 15% :-)

Example using bytefx
From 18 Kb to 1.5 Kb , about 8% and Yessss, less than 2kb! :-)


Update
Please note that packed.it is beta and not totally debugged with different browsers.
However to be sure your JavaScript enabled browser is compatible with packed.it result projects just visit this page.

If You can read a text over a background #DDD body, Your browser is compatible with packed.it produced code.

4 comments:

Anonymous said...

I just spent over a minute looking for a "download" link and can't find one.

Andrea Giammarchi said...

You should spend few seconds to read and understand what packed.it is ... an on line service so You don't have anything to download but MyMin project (just click on its logo on the right) but MyMin is the core, not the service :-)

Anonymous said...

Unforutnately, an online service is not so handy for me since I use minification in an automatic build process (as I believe most projects should.)

There is no logo for MyMin on the right of this page.

Does MyMin produce exactly the same thing as Packed.it or does packed.it have some other added functionality?

Andrea Giammarchi said...

I use minification in an automatic build process

Your build process just build minification, MyMin project does much more, allowing You to build not only JavaScript but CSS too if necessary.

At the same time packed.it (and MyMin logo is there so You should view at least for two seconds this site) build everything for You and is based on MyMin without extra features, just a simple manager to make build process more simple and to produce one time only gzip, deflate and entire archive.

packed.it, and MyMin, is the first project that includes everything in a single file, not only JavaScript guys !!!