Journal
Fun With Moo.fx
14 December 2005 › 23 comments
Note: This is not a Web 2.0 application, nor is it a demonstration of Ajax. It is just a little display of what Moo.fx can do, based on one of their tutorials. They have recently updated theirs to include a cool moon mission interface. At the time I started on this though, their demo wasn’t quite as nice, which is what inspired me to pretty it up a bit. All I really did was the CSS and the graphics.
Demo: Moo.fx iMac (View Source)
The panoramic terrain is from a skybox I made in college, using Terragen, for a multiplayer map pack of levels adding on to the video game Jedi Outcast. It was fun while it lasted, but alas the group of mappers disbanded when a few of them went to work for Nintendo, Raven and UbiSoft.
Lately I have been trying to learn more about the DOM and how to control it with JavaScript. In the past, I had sort of written it off as a “dirty” language, responsible for creating pop-up windows, distributing viruses via ActiveX, and in general only used when in conjunction with deviant behavior. It wasn’t until I read DOM Scripting by Jeremy Keith that I really came to appreciate what can be done with JavaScript. I began to see the redemptive aspects of it, and how it could be put to good use in order to provide for rich user interaction.
At my day job, we’ve been working on some cool projects, which could be described as Web 2.0, for lack of a better term. While I’m not at liberty to discuss it in depth, it employs various JavaScript effects libraries to make for a pretty sweet user interface experience, if I do say so myself. Even though I hate all the hype around that buzz-word, and the other often abused acronym Ajax, one thing is clear. JavaScript is going to be an increasingly important and necessary skill for front-end web developers in the near future.
So, even though I’m arriving a bit late to the party, I decided it’s time to take another look at JavaScript. Yesterday, I decided to get my feet wet with Moo.fx. If you haven’t heard of this funny term, it’s a JavaScript effects library by Mad4milk, an 2-man Italian web design studio. These bovine enthusiasts have created a great bundle of eye-candy, that leaves a very tiny footprint.
Moo.fx is incredibly small, weighing in at only 3kb, and is built on the Prototype.js effects library, which has been integrated into Ruby on Rails. Touted as “the next small thing,” it is anything but. It has great cross compatibility with modern browsers, and even accomodates cruddy ones like Internet Explorer. So, if you’re looking for a good place to start getting a feel for JavaScript, consider trying Moo.fx. Another good effects library to learn is Script.aculo.us, also built on the Prototype library.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Yannick
That’s pretty awesome Nathan. I like the iMac monitor and the effect the scripts give with the map being able to pan from either side. That is a pretty nice demo of what can be done with javascript.
#2 David Merwin
I LOVE moofx. Simple and easy to use.
The only hestitation I have in deploying it regularly is that it is not compatible with IE 5.5.
#3 Nathan Smith
Thanks Yannick. What amazes me is that some of these JavaScript wizards such as Cameron Adams are the same age as me, and I feel like I’m just starting to learn this stuff. Heck, Valerio Proietti made Moo.fx and he’s only 23. Some days I feel like I have it all figured out, and others I just feel like I’m trying to catch up with what everyone else knows how to do.
Dave: It also seems to have some issues in Opera. It might just be this particular effect though, or maybe I messed something up with my demo!
#4 Shawn Grimes
Nicely done Nathan. I dig that little demo. Seems Moo.fx is pretty powerful. I’ll have to pick up that DOM book you mentioned as well. Thanks for the good read.
#5 Allan Rojas
Nathan, I just discovered your site and I’m gonna add it right away to my daily visits… Great use of TextPattern !!!!
On the article, I think we’re all trying to catch-up with all the new stuff that’s coming out these days… Word of mouth is doing its job with stuff like AJAX, Ruby on Rails, script.aculo.us, prototype and moo.fx…
#6 Yannick
Nathan: I was just thinking to myself today, how far behind I am with all of this stuff. I mean I’ve heard of it but as for trying them out and actually learning them, I am waaaaaaaaaay behind. Sometimes it’s a bit overwhelming to say the least. One day I’ll catch up I suppose.
#7 Nathan Smith
Allan: Thanks. That’s a nice site you’ve got there too. Nice style switcher! I went to your about page, and saw the keyword tag cloud. I guess I’ll learn more about you and your site once it is out of Beta, looking forward to it.
Yannick, et. al: I wouldn’t worry about being behind in the whole JavaScript / AJAX game. There are plenty of books / resource sites out there, and tutorials galore. Just take to learning it in small, managable incriments. Even the longest of journies begin with a single step.
#8 Mark Priestap
I’d have to echo Yannick’s sentiments. Ugh. I have the book too. lol.
#9 Maarten Docter
Very slick demo Nathan!
#10 Jonathan
Nice implementation, and thanks for the link to Jeff Croft’s site. I know there are a lot of people who feel that way about all the overused buzzwords flying around lately.
#11 Beth
Nathan that’s really fun! It would be cool to use as a slideshow.
#12 Nathan Smith
Jonathan: Yeah, Jeff Croft has a good perspective on things. He doesn’t tend to buy into over-hyped buzz-words, and maintains a level-headed approach when evaluating web technologies. I had applied for a job working with him at KSU, but ended up taking one in Idaho to be closer to family.
Beth: Good idea. Jeremy Keith had done something similar in his tutorials for DOM Scripting. You can check out the mock-site he did to demonstrate the effects here: Jay Script and The Domsters.
#13 Brad Chmielewski
Yeah very fun. I have been playing around with it will updating one of my friends bands site. I hope to have in full action soon.
#14 Nathan Smith
Brad: That sounds cool. It’s always nice to be able to do sites that break the mold for friends and family. They often talk it up quite a bit as well, so that’s a little bit of free advertising! I’d be interested to see it when it’s done. Make sure to shoot me an email so I can check it out.
#15 Mike Montgomery
Also, what if you use this script to selectively hide content that you nevertheless want to be printable?
When I print the Moo.fx page of instructions, the text disapears.
#16 Mike Montgomery
Nathan,
I’m interested in this script, but uncertain how to make it unobtrusive.
Does this work (without the extra spaces):
< script type="text/javascript" src="moo.fx" >< /script >
...and then ftp the moo.fx file to the correct place.
#17 Nathan Smith
Mike: That’s because they have the CSS telling it to be hidden initially, and then JavaScript telling it to be visible. All the browser’s print function cares about is the initial setting, in this case
display: none;. The way to fix this when you’re using it would be to make a separate print stylesheet, withdisplay: block;or whatever, for the parts you want to be printed out.To answer your second question, that would be the right way to go about making the script un-obtrusive. You’d still of course want to call the other scripts as well. Also, don’t forget your JavaScript file extension of
*.js.#18 Henrik
Hello Nathan (and mike):
Hm, remember me from the opera debate nathan ;)?
@Mike – I did some work with Moo.fx yesterday. It can be seen at http://www.haf.se/cv/ which actually is my CV. Being a true standard-ist person with unobtrusiveness and every other thing that will save the world, in mind, I used “Behaviour” which is another library built to read css selectors and apply javascript events to them, which can be found at http://bennolan.com/behaviour/.
About the print stuff – you’re wrong nathan, I’m sorry to say… I tried that for my CV today, and it doesn’t work. This is because the content is “dynamically generated”... For my CV the solution would be a link – “expand all”.
#19 Nathan Smith
Henrik: Aw, bummer. I guess JavaScript effects are best left for on-screen only scenarios. I’d hate for a company to pass someone over, simply because their CV couldn’t be printed correctly! It’s a perfect example of the old saying, “Just because you can, doesn’t mean you should.” Use effects responsibly. ;)
#20 Henrik
Hi Nathan,
Yeah, I fixed a link at the bottom: “Expand all” which is good enough for me if they wanna print it ;). I do it because it’s cool and it’s a good way of showing that you know what you’re doing, so there is actually a point – kinda lika Faruk with his FACE animations.
#21 Nathan Smith
Henrik: Cool, I’m glad it’s working out better for you now. You might also want to consider offering a PDF version for download, printing / offline reading. By the way, I like that you’re sporting OpenOffice documents. :)
#22 Henrik
Hi Nathan,
Yeah me too :p, I was thinking of that, really. However, due to other urgent matters (such as final exams) I have decided to postpone such vast improvements till I got myself a bunch of time.
OpenOffice rocks :D, especially for scientific documents, where Word is remarkably buggy (or perhaps remarkably simplified which in turn is a negative aspect for anything more serious).
...and just as I finished the portfolio this moo.fx italian guy decided it was time for an update of the script, damnit.
#23 Nathan Smith
Yeah, I’ve completely given up on Microsoft Office, and uninstalled it from my home computer, opting instead to use OpenOffice. By the way, an update to Moo.fx shouldn’t change the way the core functionality works. You should probably be able to just swap out the JavaScript files and you’ll be fine.