Wednesday, September 27th, 2006
bytefx: simple effects
<>p>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
Related Content:











hmmm…
http://ajaxian.com/archives/mootools-released
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.
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)
@ 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
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
Updated your name.
The link now goes to the demo page rather than the FAQ.
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?
[...] LeÃdo en Ajaxian [...]
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.
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
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.
… 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.
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.
Regards.
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.
@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)
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!
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.
[...] 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). [...]
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…
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)