Wednesday, September 27th, 2006

bytefx: simple effects

Category: JavaScript, Library, UI

Andrea Giammarchi has put together another effects library that weighs in under 3kb compressed.

The library is called bytefx and is definitely in alpha :)

The demo page shows you the effects at hand:

  • alpha
  • clear
  • color
  • drag
  • fade
  • move
  • position
  • size

Posted by Dion Almaer at 8:25 am

3.8 rating from 30 votes


Comments feed TrackBack URI


I’m getting a bit “business” on this, although I shouldn’t. What’s the (selling) point? 3kB? That’s not new. the effects themselves? I’d think that would’ve been achieved easier as custom effects.

But, on the developer side of things I’d say: Keep publishing code. Everything. All the time! Do it 100 times over, explain it well, until there’s something everybody loves.

Comment by Matthias — September 27, 2006

Thank you for this post :)

I just want to tell you that “demo page” now is the documentation page with API and few F.A.Q.s (I’m working on this page) while real demo pages are this one for new browsers (I.E.5.5+, FF1+, Opera9+,Safari2 and others) and this one for IE 5 and other old browsers using JSL (but some feature isn’t available such alpha or drag)

Comment by Andrea Giamamrchi — September 27, 2006

@ Matthias
bytefx is just a simple and little library while moo-tools is a real good, complete and lightweight javascript framework.
However I often use my personal libraries (I can debug, change or implement “easyly”) but I always publish my experiments or libraries too :)

If you want a complete FX library you have a lot of good choice and now you just have another one to add basic effects or to write a more complex library using these effects.

Finally, how do you think to get a “bit business” with only 3kb of code ? :D

Comment by Andrea Giamamrchi — September 27, 2006

uhm … You’ve changed the demo link, the this is the API and F.A.Q. page

P.S. could you change my surname too ? Andrea Giammarchi , thanks :P

Comment by Andrea Giammarchi — September 27, 2006

Updated your name.
The link now goes to the demo page rather than the FAQ.

Comment by Michael Mahemoff — September 27, 2006

Removing spaces and linebreaks in unoptimized code is a race for size which is not ~that~ important.
unoptimized code ??? … could You please show me only one line where code is not optimized ?
shortcut references, any redundant piece of code, optimized local and global vars … could You please show me what do you mean for optimized code ??? … I’m a fanatic optimizer … then this comment sounds really strange for me … maybe you’ve seen just some removed space … and with Packer spaces are even not really important … as you know.

However, your job is not bad, but I consider this all as a doubtfull starting.
imho, these few effects in a lightweight script should be a good start point to create more complex libraries too :)

P.s. Eval? Wtf!
Eval ? … sure, eval with in-scpope variables isn’t dangerous and it’s fast enought as this library is … $setInterval method can produce 2 identicall operations that other 2 methods need (but with different parameters) …. Eval, in this case, just remove redundant code …. then Eval! What’s the problem?

Comment by Andrea Giammarchi — September 27, 2006

[…] Leído en Ajaxian […]

Pingback by despuesdegoogle » Archivo del weblog » Una nueva (y ligera) librería de efectos en AJAX — September 27, 2006

… but not to make effects definetaly …

ehr … did you read about my use of eval ? I’ve not used to make effects, I’ve used to reduce size. The 3 evals on this script aren’t a must, as is eval for JSON, but if You think about this library name, bytefx, and You think about its goal, a really small fx library, you can think that I’ve tried to do everything to reduce this lib size.
Maybe some more space could make code more readable, but in every case if I can use one thing to do more things I use that, if the goal is the library size … then eval is often the evil, but sometimes, eval should be simply a shortcut to creates more than one loop and then to reduce the size of a script.

More complex libraries will force you to redesign architecture

why ? you could include bytefx inside another class and override as you want every method or add any other … if You need to implement a library, don’t You read the API and then adapt your code around that API ? … I hope You don’t need more spaces to implement another library…

However, you’re probably right then I think I’ll upload a version with spaces for a more readable code (maybe with some comment too) … but please don’t ask me to remove an eval to write 2 times the same loop inside two differents methods … or library will be kilobytefx :P

Comment by Andrea Giammarchi — September 27, 2006

It’s ~much~ cooler when you have a small size and you have your script written good.

Ok Yaroslaff … you win! Clean your cache and view bytefx version 0.1b , no more eval … even lighter than 0.1
I hope that now you think this is a good code.

Its designed in the way you just dont need two loops.

… if two methods does different things but these things use the same sequence of operation these methods are using two loops instead of one … however, I’ve resolved without eval but if you prefere I can write two different loops … that does same checks … I call them redundant code, not good code … at least with a minimal library as bytefx is.

My final opinion, as I’ve just said, bytefx isn’t absolutely a mootools alternative, it’s another lib … I know mootools (read home page, I’m on credits) and that is a really good library but too much based on prototype style, imho.

Comment by Andrea Giammarchi — September 27, 2006

Maybe I didn’t explain correctly … for same checks inside two methods I mean different properties, different callbacks, different integers end-points … but everything with the same “global” variables … however, I’v just seen You have credits on mootools too (and maybe now I understand why you’re writing so much for this lib) … well, don’t worry about bytefx, “Your” mootools is a complete framework, not a low-level fx lib as this is.


Comment by Andrea Giammarchi — September 27, 2006

Here we go again. Who cares if it is 1 kb or 10kb it doesnt matter. There are plenty of compressors out there that automate compression. I rather have easily readable code and then a compressed version for the byte impared… give me a byte why don’t ya.

Comment by Mario — September 27, 2006

@Andrea Giammarchi – dude I love your tech blog.. the post about the better onload solution is amazing. You made something great even greater’er 8)

Comment by Mario — September 27, 2006

I don’t agree with the “i don’t care” weight argument.
I like the fact that it’s only 3kb.
Look at scriptaculous and dojo for instance… Pretty heavy stuff.
The (fantastic) prototype is already 40K+
It’s not enough to have a fast connection, saving bandwidth is important too!

Comment by satane — September 28, 2006

You get what you pay for in bytes…. comparing a super simple framework to an uber rich framework is not fair. Compressed prototype is 21kb.

Comment by Mario — September 28, 2006

[…] Vía Ajaxian, me entero de la aparición de una nueva librería, muy ligera (poco menos de 3KB), de efectos visuales en javascript llamada bytefx (Simple effects in few bytes). […]

Pingback by The Mount Olympus » Bytefx: una librería (muy ligera) de efectos — September 28, 2006

that memtronic compressor works with prototype code too as long as you change the 3 references to $ in the compressed code to something like _$

took one of my peaces of code from 10kb to 2kb…

Comment by Mario — September 28, 2006

Just to let yall know… the memtronic compressor took the edge version of prototype 63.4Kb (with proper formatting, semi colons where they should be) down to 18.6kb (using the ‘better, hardcore’ setting). I used firefox and a mouse macro application to auto close the slow script dialogs… took a nap and when i woke up the compression was complete. 8)

Comment by Mario — September 28, 2006

Leave a comment

You must be logged in to post a comment.