jQuery reDesign
Posted by admin | Filed under Code, Design, JavaScript, Uncategorized, jQuery
As many of you have already noticed, our beloved jquery.com had undergone a redesign. I heart jQuery quite a bit and hate to bash the new design, but all I could think of at first glace was - what were they thinking?
On that note, it isn’t all that terrible - please hear me out.
The fact that the site has finally undergone a redesign is great, as the previous version was starting to feel a bit outdated, but I’m not quite sure if this was the right way to go.
Let’s start right at the top.
The new logo is pretty cool, but I have to say it feels a bit futuristic. Sending a futuristic feel though is not a bad thing, as it shows that jQuery truly lives on the edge and is up to date with the latest trends. However, the logo in combination with the “rocker” illustration is too much. Suddenly, the logo looses it’s feel and it all conflicts. The illustration, is very nicely done - props to Varick Rosete for his awesome skills! - but the thing is though, it just does not fit jQuery - at least not from my point of view. Next to the “rocker” illustration is another tagline, which totally throws me off. Is there really a need for another tagline/slogan? “Be a JavaScript Rockstar” is just so amateur/teen-like. What was wrong with just sticking to the simple, yet bold - “write less, do more” slogan? That is such an AMAZING line, it deserves a trademark all of its own!
Overall, the welcome section with the rockstar targets a totally different demographic than what I would consider to be jQuery’s target. It makes the site look amateur, when compared to the very clean look of MooTools and Prototype. I understand that they wanted to go different and over the top, and they sure did! But it does not seem like they considered their demographic. I am a rocker and a heavy metal chick as well as an awesome developer/designer, and so I’m a rockstar as they say (literal/non-literal), but to be honest, I was almost offended as a loyal user/fan. I don’t need to have it blow in my face - it almost felt like mockery.
I must add, that I love the “Who’s using jQuery?” section. That is definitely a great addition. Love it! It would be cool if they would change out/rotate as more big names roll in using jQuery. It would just keep thinks a fresh.
Alright, now that the big/loud portion of the site is out of my system, I can move on to discussing other parts of the site.
Let’s take a look at the colors at that was the next thing that hit me as I reviewed the site. MooTools not too long ago did a redesign of their site from a dark to a light layout. Hmmm… jQuery just did the exact opposite going from light to dark. Could it be that the two rivarling libraries are trying to stay at totally opposite ends of the spectrum? It’s like they’re using their color schemes as a metaphor. Sidenote - While discussing the color schemes, let me state that the Prototype website blue/orange (tips and tuts page) make me think 1990’s like whoa! The site is quite clean with a corporate feel, but whoa! on the tutorials page.
I can’t say I take issue with anything else on the homepage, so next, let’s explore the site as a whole.
The navigation gets a bit confusing for a second there. When the user visits the UI page, the whole layout resizes. I’m not sure why they aren’t the same width, but not a biggie. The thing that I found a little weird, but got over real quick, is that while on the UI page, if the user clicks on “About,” they get the about page for the UI. To get the about page for jQuery, the user must click “jQuery” and then “About.” It’s just a bit odd as it is not the behavior I expected, but how often will a developer use that nav anyways? Like never!? Well, meaning the about pages. And if so, then the users can figure it out just like I did, after all - we are JavaScript ROCKSTARS with jQuery on our side - and I mean that in a true sense, no mockery there!
Saving the best for last, the documentation/tutorial section is MARVELOUS! As expected, it is excellent and I think I really like the new organization. Getting used to it took… oh just under a minute. Just one more reason why jQuery RULES!
So there you have it folks! My thoughts on the redesign.
*** UPDATE ***
Just noticed a tweet from John Resig - the “rockstar” is officially out (awww - now I feel a little sad) and here is their latest post. In response to that, I think there’s definitely ways to have “fun” with the homepage it’s just a matter of finding the right “thing” to represent the fun that fits their demographic. I LOVE that they took immediate action and responded to the wants/needs of the users. Damn… I LOVE those guys! Awesome work and thanks!
Oh, and I DO love the new-new version of the site.
∂ meow
Tags: Design, JavaScript, jQuery
MooTools vs. jQuery
Posted by admin | Filed under Code, JavaScript, Uncategorized, jQuery
Which library is better?
There has been much hype over the different JavaScript libraries such as Dojo, jQuery, MooTools, Prototype and Yahoo. I’d like to focus on MooTools and jQuery as those are the two libraries I have been personally debating as of recently.
As you may already know, I am fairly new to the world of JavaScript and just recently started using jQuery. Just a couple weeks ago, I wrote my first reactions/review of jQuery and here I am today comparing it head to head with MooTools.
After much analyzing here is what I’ve come up with.
jQuery is really easy to use and learn. After just a day of playing with it, I learned all kinds of things and quickly caught onto the structure of its syntax. The syntax for jQuery is very simple, easy to understand, quite short and the chain-ability is really sweet. On top of all of that, the documentation and tutorials are phenomenal.
After researching and experimenting with MooTools, I must say that the first thing I noticed is the slightly bulky and less friendly syntax. However, MooTools seems to be great for Object-Oriented Programming and it is very smooth with it’s animations - almost a Flash-like feel. I thoroughly enjoyed their demo page when I first visited the MooTools website.
The MooTools documentation is pretty good as well, but their website did lack in tutorials. That must be largely because MooTools is marketing itself toward the intermediate and advanced JavaScript developer. But what about the beginners or the not quite intermediate developers that are eager to learn? A few tutorials wouldn’t hurt, especially, since there seems to be much complaint about the MooTools community and lack of support for the simple-easy questions that someone learning might ask.
After running a SpeedTest found on MooTools website, I found that there is very insignificant difference in the speed of MooTools vs. jQuery and it varies quite a bit from browser to browser and platform to platform. If one takes all of the results into account, overall, MooTools is a bit faster than jQuery. But what is a few milliseconds? Does that really matter?
So where is the hold up and which should you choose?
This got me contemplating on which library would really be the better way to go. I think that is totally up the the individual’s preference and the project at hand. If a few milliseconds and smoother animation really matter to you, then MooTools is the way to go.
Personally, I’m loving the ease and friendliness of jQuery and do not care too much for the slight difference in smoothness of the animation. However, if a project comes along and MooTools seems to be a better fit, then that is what I will use; but by default, I’m staying loyal to jQuery.
It is good to know or at least have a good grasp of both of these libraries, and even some of the other ones, as you never know what you might encounter with a future project or employer. By knowing or at least being familiar with several of these libraries, you’ll be in a better position to judge and decide which is more fitting for individual projects and you.
In quick summary:
jQuery:
Concise syntax
Great documentation and tutorials
Easy to learn, even for beginners
Nice plugin architecture
MooTools:
Better for OOP
Smooth animations
More advanced - harder for beginners
Overall faster
∂ meow
Tags: Code, JavaScript, jQuery, MooTools
Getting My Feet Wet With jQuery
Posted by admin | Filed under Code, JavaScript, jQuery
For those that are not familiar - jQuery is “a new type of JavaScript library.”
For some time now, I’ve been reading and hearing about how great jQuery is and how I need to learn it. And so, yesterday I officially downloaded the current release (1.2.3) and started playing with it. Naturally, considering the fact that I am not crazy versed with JavaScript (I only know the basics), I started with the first tutorial on the jQuery website - you know, just to get my feet wet.
I must say, I had fun!
The first tutorial, also called “How jQuery Works” by John Resig himself, was a great introduction. Even though a lot of it I’ve already heard of or seen in use, I read every word. Building a solid base is essential, and so I wanted to make sure I got a good solid understanding of the bare basics.
From the introduction, I learned the proper way of launching the code on (document).ready instead of window.onload. The reason behind this is quite simple. By using window.onload, the code does not execute until all of the elements on the page are downloaded, which includes images, banners, etc. With (document).ready the code gets executed as soon as the document is - well, ready. What that means is that as soon as all of the HTML is loaded into our document, or in other words, as soon as the HTML tag closes, the JavaScript is executed. The beauty of this is that there is no waiting for all the elements on the page to fully download.
The other thing that makes jQuery really awesome is it’s CSS implementation. Finding this out got me pretty excited as - CSS I know; and so, this part of jQuery makes total sense. It makes it really simple to target an element. It allows you to addClass or removeClass from an element. Better yet, jQuery not only lets you pass CSS selectors, but also works marvelously with pseudo-classes!
There’s also a good amount of built in events that make the code simpler and concise. The whole list and a bunch of other options can be found in the jQuery documentation. The best part is that all of these events and methods can be chained together, which shortens the code even more. For those a bit more advanced or eager to experiment, please check out this list of 37 More Shocking jQuery Plugins. I came across that just yesterday, and it’s partly what officially inspired me to dabble into jQuery myself.
Consisting of just one, single JavaScript file, jQuery is quite an amazing library. That’s right. All of this in just one file, and I am just touching the surface. However, don’t be fooled! It is anything, but simple. The single file contains massive amounts of goodness and everything you need to get started and rolling, and well beyond with JavaScript.
∂meow
Tags: JavaScript, jQuery
