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

I found it really interesting when I read over the article and instantly thought - can I do that with jQuery? We’ll have to see…
∂ meow

I get a fever-flu-cold on a regular basis of 4 times a year - as the seasons change. And so for the last week, I’ve been really fighting it, but today I lost the battle. I woke up with a killer throat ache, throbbing headache, and even body aches. It really sucked! It sucked especially because it was a beautiful day out, and I had lots of work to do, but had no focus or direction. Hopefully, cups full of herbal teas and orange juice in combination with some rest will get me out of bed and into the world.

On the brighter side - I’ll get to catch up on some reading and doodling.

Oh, oh oh, oh, oh! Almost forgot.

A couple days ago, my boyfriend shared a marvelous piece of information with me and I just have to share with you! So, it turns out, NYTimes prefers to hand-code or use a plain text editor rather than a WYSIWYG editor like Dreamweaver. According to their design director, Khoi Vinh, it just works better. Let me quote:

We just find it yields better and faster results.

Now, that’s awesome. I my TextMate and would never give it up! If interested, read the full article here.

∂ meow

And so, just a couple days ago, I found myself at Barnes & Noble sifting through books of JavaScript. I was specifically searching for the “Pro JavaScript Techniques” by John Resig book. Unfortunately, they did not have any and so I was left to sort through a bunch of other JavaScript books.

After careful analysis, I managed to narrow my selection and I walked out with two books. One: “Simply JavaScript” by Kevin Yank and Cameron Adams. Two: “Designing with Web Standards” by Jeffrey Zeldman (second edition).

Currently, I am in the process of reading the “Simply JavaScript” and it seems like a really good book. Once I’m done, or at least half way through it, I’ll do a fair review of it to let you know if it is worth the time and money.

∂ meow

After a discussion over something, I think it was jQuery, but I’m not sure, he brought up a good point. He mentioned how there is a new era emerging with web designers and developers that have never dealt with tables before and he thought it was funny how all of these new designers/developers will have to pick-up/fix-up all these shitty table based websites. I laughed with him for a bit, until I realized - that is exactly what I have been doing for the last year. At that point, I got a bit annoyed.

And so, “the new era of web designers/developers” that have NEVER dealt with tables before is not just emerging, but it’s already here. Yes, that’s right, it’s not just around the corner as it may seem, it’s right here - starting with me.

Now, do not get this confused with web trends and web standards, etc. I am not talking about seasoned designers/developers that have adopted the table-less design, but rather specifically about those that have NEVER even seen tables in use for website layout.

Let me take you back a bit and give you a little of my background before I continue on this rant of the new era within the web world.

When I decided to pursue and education/career in the graphic and web design world, I have never before opened or used Photoshop, Illustrator or any of the other programs we all use daily. On top of that, I did not know a lick of HTML and had no clue what CSS was. To say the least, I dove head first into the deep end of the pool not realizing how deep it really is and how much of learning I would have to do. Thanks to my drive and motivation and a HUGE learning curve, I managed to learn it all in just a few short months. Now - I am not a seasoned expert, but I can say I am a professional web standards advocate.

I remember walking into my first xHTML/CSS class, not knowing what either one of those languages really do or how they work and just after the first week, walked out with a 100% on my first hand coded (on a piece of paper) xHTML quiz. The CSS came the following week, and a couple weeks later came a fully functioning 3 column xHTML/CSS website that I managed to do all on my own. I was so proud of myself! But enough of that, let’s move on with the point of this post.

What is the point of this post? I already got sidetracked and forgot.

Yes, I have a super short attention span and on top of that, I suffer from, as my boyfriend calls it, “premature optimization.” Actually, I was just recently diagnosed with the “premature optimization” syndrome. I’ve been dealing with it for years, and finally learned the proper name for it. I hear it is quite common.

And so, let’s swing back.

Yes, the new era of web designers/developers that have NEVER dealt with tables before is already here. It’s not just around the corner, like I said, it’s right here - starting with me.

Over the last year, I’ve worked on several different sites all of which were build using tables. It has definitely been a great learning experience as well as a very painful one. It’s been painful and frustrating as I have never worked with table based design before and I was totally lost in the code. The best part came when I first tried to organize and clean up the tables in an attempt to make it easier for me to find my place. Unfortunately, in many cases, that was a horrible idea as that resulted in shifting of the layout on the actual site. At that point, I thought to myself - if they don’t care enough to spend a couple of months on re-building the site to optimize and clean up then why should I?

Using table for layout is absolutely the messiest thing I’ve ever seen! Not only is it messy, but the decision makers behind the companies with table-based websites have no clue how horrible their code really is and on top of that, most of them are not even willing to consider a re-build of the website. It is our duty as web designers/developers to educate and steer towards the better and the best; however, how does one do that when table-based website owners don’t even want to hear us out? To them, the sites work just fine the way they are and bring in enough business to satisfy.

I think the main reason behind that logic is just a simple fear of change and perceived loss of time if a reworking of the website was to take place.

Tables can be great when managed and organized properly for their intended use - as tables to display tabular data. When used for layout, the code just gets super messy, confusing and elaborate - I’m constantly getting lost and can never find anything. I use TextMate as my text editor, and thanks to it’s “find” search option, I can find my way around those messy tables.

When one thinks of a table in terms of information it means simply means some sort of organization of random information in a comprehensive manner. As my favorite look-up website describes it, tables in general are:

1. An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form.
2. An abbreviated list, as of contents; a synopsis.

Roger Johansson, from 456 Berea Street, wrote a marvelous article about the proper use of tables a while - while back. It is a great read, just like any other article he writes. If you’ve never visited his site, I suggest you take a peak every now and then.

Getting back to the messy tables. I once interviewed/trained for two half-days for a company whose website was just an absolute mess of tables within tables and more tables inside of that. The reason I was open to working with them is the fact that they were really open to a re-design/re-build when we talked about it during my interview. However, after two half-days of trying them out, things proved to be completely different (I sort of expected it).

The best part, the part that made me walk out the door and not look back, was when I was asked to use the visual view in Dreamweaver to update the website. Yup - you read right, no joke! The person training me asked me to actually leave the code view and edit the site in the visual view of Dreamweaver. He was actually testing me, to see if I knew how to use it and used that as a leverage for placing me. I can’t remember the last time I used the visual view in Dreamweaver. I’m not a huge Dreamweaver fan to start with, I mean - it’s a great piece of software, but I just prefer my simple text editor. Nonetheless, I was extremely shocked and quite offended, and decided that it just wasn’t worth my time. It felt like backtracking a few years.

The even more shocking thing was that the person training me was an old era developer without any willingness to improve and change. He was one of those fully satisfied where I’m at developers and I just could not believe it. He was familiar with HTML/CSS and web standards, but didn’t care for that at all. I was so frustrated after finding that out. Why wasn’t he willing to grow, educate himself and the people he was working for? How could he call himself a web developer when he spends his days hacking sites together?

And so, as times change and technology evolves it is up to the individual to stay on top of the cutting edge technology and techniques within their respected field. Web standards have been around for a long time, but only as of late, have the table-less designs really started to shine through. With all the efforts to standardize the web today, there are still many websites being built using tables. There’s many reasons as to why that is so, but one thought creeps in; could it be the old era web designers/developers are not willing to change, educate themselves or stay up to date?

I wonder - are the old era designers/developers better and right because of their experience, wisdom and authority, or does the eagerness and willingness to learn of the new era web designers/developers make them who are right? How long will it be till the table based layouts become obsolete and if we have designer/developers not willing to grow - will that time ever come?

∂ meow

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:

∂ meow

This post is just an ode to Poetic Prophet for promoting web standards. In case you haven’t seen it, below is the video and even lyrics, so you may sing along. Hope you enjoy it as much as I did when I first watched it a couple weeks ago.

Lyrics:

Your site design - the first thing people see,
it should be reflective of you and the industry.
Easy to look at with a nice navigation,
when they can’t find what they want it causes frustration.

A clear call to action to increase the temptation,
use appealing graphics they create motivation.
If you have animation - please use with moderation,
cause search engines can’t index the information.

Display the logos of all your associations,
highlight your contact info that’s an obligation.
Create a clean design - you can use some decoration,
but to try to prevent any client hesitation.

Every page that they click should provide and explanation,
should be easy to understand like having a conversation.
Create a site style you can use your imagination,
but make sure you use correct color combinations.

Do some investigations, look at other organizations,
but don’t duplicate or you might face a litigation.
You done, congratulations - start construction,
move into production - follow these instructions.

Your Photoshop functions - slice that design,
do your layout with divs make sure that it’s aligned.
Please don’t use tables even though they work fine,
when it come to indexing they give searches a hard time.

Make it easy for the spiders to crawl what you provide,
remove font type, font color and font size.
No background colors, keep your coding real neat,
and tag your look and feel on a separate stylesheet.

Better results with xml and css
now you making progress, a lil closer to success.
Describe your doctype so the browser can relate,
make sure you do it great or it won’t validate.

Check in all browsers, I do it directly,
gotta make sure that it renders correctly.
Some use IE, some others use Flock,
some use AOL, I use Firefox.

Title everything including links and images,
don’t use italics, use emphasis.
Don’t use bold, please use strong,
cause if you use bold that’s old and wrong.

You use CSS, you’re page will load quicker,
your client satisfied - like they eating on a snicker.
They stuck on your page like you made it with a sticker,
and then they convert - now, that’s the real kicker.

Make you a lil richer, your site a lil slicker,
design and code right - man, I hope you get the picture.
What I’m telling you is true - man, it should be a scripture,
if it’s built right you’ll be the pick of the litter.

Everyone will want to follow you like twitter,
competition will get bitter - you’ll shine like glitter.
If you trying to grow - your company will get bigger,
design and code right - man, can you get with it?

∂ meow

This weekend, I finally sat down and started to really crank in out. I had the design all ready to go for some time now, but just kept putting it off and focusing on other things. Well, after much nagging from friends and loved ones - it’s finally done. Just need to tweak a few things, and it will soon be up an running.

I’m excited about showing it off, as I have tried new techniques and approaches with my CSS. I will elaborate more on those once it’s all up, that way you may view my code and better understand what I am blabbing about.

“Delay always breeds danger and to protract a great design is often to ruin it.” - Miguel de Cervantes Saavedra

∂ meow

I just downloaded the new Firefox just a couple days ago to test it out and slowly make the switch from Firefox 2; however, I was very upset when none of my add-ons worked. Naturally, I searched for a way to fix that and make them work and came out with this marvelous add-on that makes all the other add-ons compatible with Firefox 3. The add-on, Nightly Tester Tools, is available on the mozilla add-ons page. I must add that I came across this marvelous piece of equipment through a post on LifeHacker where they do a little rant about Firefox 3 and it’s perks.

After reading LifeHacker’s Firefox 3 article, and a couple of other articles from other bloggers prior to that, I must say it seems like everyone is thrashing Firefox 2 as if it was the worst browser ever. I agree that Firefox 3 is 10 times better; however, I would not thrash Firefox 2 so much. After all, if Firefox 2 was so horrible, then why have they (the people that are now thrashing it) used it in the first place? It must have been, because it wasn’t all that bad after all!

The new Firefox definitely has many awesome features that are just freaking amazing - it is hard not to fall in love with it instantly. The thing that did it for me, literally love at first sight, was the new interface.

It is hard to miss the elegant new dress that Firefox 3 had put on. I the darker shade, and the large back button. Love the fact, that the drop down for the back button is off to the side instead of being a part of it - I rarely use it, but it bugged me whenever it would drop down in Firefox 2. On top of that, it has a smart address bar and the pages seem to load much faster.

Overall, it is much sleeker, faster, smarter, elegant and of course - amazing - after all, it’s Firefox.

Take a look and try it for yourself - be amazed!

Read the Beta 5 release notes here.
Download Firefox 3 Beta 5 here.

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