I’ve never been a big fan of video on the web either, since I’m never at my computer unless I’m working so I never have time to watch. However, upon learning that Think Vitamin created a new membership service, called Think Vitamin Membership, I was immediately interested.

Read the rest of my post on FreelanceFolder

The other day I wrote a basic tab feature for a client and thought it would make a great beginner’s tutorial. While it’s not the coolest plugin in the world, it’s something that clients use quite commonly. So let’s get started!

The HTML

First, we need to start off with the HTML. In order for our tabs to work, we need to set up a list of links for the tabs and the divs for the content. One of the cool things that makes this different from jQuery’s standard UI tabs, is that you don’t have to the tabs and the divs in the same container, you can theoretically place them wherever you want.

<div id="container">
<div id="tab1">This is tab 1!</div>
<div id="tab2">This is tab 2!</div>
<div id="tab3">This is tab 3!</div>
<div id="tab4">This is tab 4!</div>
<ul>
	<li><a class="tab1">tab 1</a></li>
	<li><a class="tab2">tab 2</a></li>
	<li><a class="tab3">tab 3</a></li>
	<li><a class="tab4">tab 4</a></li>
</ul>
</div>

If you were to save the page and load it now, you’ll see that every div shows up, which is not what we want! Let’s give it some CSS love to hide ALL of the divs and float the tab links together like a real navigation.

The CSS

#container div { display: none; }
#container li { float: left; }

The jQuery

Now for the awesome fun stuff! First things first. If we load the page to see what we’ve done so far, you can now see the navigation, but none of the divs are showing up because we hid them all. We of course want to show the first div, and this can be done in several ways, but for the purposes of learning jQuery, let’s do it there.

Before you start, you need to declare a document ready function. Basically document ready tells the jQuery to wait until the website has loaded before trying to implement the JS.

$(document).ready(function() {
 
});

After document ready, we’re ready to tell jQuery to show our first tab’s div. Let’s also give our link to the tab1 an active status so we know that’s the tab we’re on.

jQuery is actually pretty simple and it’s more difficult to remember the syntax of parenthesis and curly brackets than it is the actual code. To tell jQuery to display something, we simply give it the show() function.

Similarily, if we want to give the corresponding link an active class so we can style it differently, we simply give it the addClass() function. Not too hard eh? Here’s the code:

$(document).ready(function() {
	$('#tab1').show();
	$('.tab1').addClass('active');
});

Now we need to make the tabs actually work when we click on the corresponding link. jQuery is so easy, I bet you’ve already guessed that the function is called click(). This tells jQuery that when the user clicks on the item it’s appending to, to perform an action.

$(document).ready(function() {
	$('#tab1').show();
	$('.tab1').addClass('active');
 
        $('.tab1').click(function() {
	});
});

We then need to tell jQuery to hide ALL of the divs again, otherwise if you were to click on tab1 and tab4, it would show both, before showing the right div. Just like the show() function, we have another easy function for that: hide(). Then we need to remove the active class from all of the links before adding the class to the active link.

$(document).ready(function() {
	$('#tab1').show();
	$('.tab1').addClass('active');
 
	$('.tab1').click(function() {
		$('#container div').hide();
		$('#tab1').show();
		$('#container a').removeClass('active');
		$('.tab1').addClass('active');
	});
 
	$('.tab2').click(function() {
		$('#container div').hide();
		$('#tab2').show();
		$('#container a').removeClass('active');
		$('.tab2').addClass('active');
	});
 
	$('.tab3').click(function() {
		$('#container div').hide();
		$('#tab3').show();
		$('#container a').removeClass('active');
		$('.tab3').addClass('active');
	});
 
	$('.tab4').click(function() {
		$('#container div').hide();
		$('#tab4').show();
		$('#container a').removeClass('active');
		$('.tab4').addClass('active');
	});
});

See how easy that was? It’s unbelievable how easy and quick jQuery has been to learn so far. Of course, there are plenty of advanced plugins that will take forever to learn, but for the most common items like dropdown menus, tabs and sliders, it’s actually pretty easy!

Of course, you can simply use the tabs built into jQuery UI itself, but what fun is that? Sometimes it’s quicker and easier to roll your own, especially when you get into some of these designers’ crazy widget things.

View Demo

Web technology is always evolving and it seems that every day there’s something new that’s come out. It’s enough to make a sane developer crazy – and unfortunately that means we can never take a rest from our world, or we risk being left behind. (Man that sounds like an awesome movie trailor…)

I’d love to share with you some of things I’ve been learning lately, as well as some new(or new to me) coding tricks.

HTML/HTML5

Frankly, I got so tired of hearing about HTML5, that I finally decided to try it. I now validate all of my sites in HTML5 and use all of the new shorten info in the head tag that comes along with it. However, I don’t use any of the hew HTML5 tags, as they require hacks to get them to work in Internet Explorer. We all know how I feel about hacks, and it’s isn’t good.

In order to help me learn and understand the updates to HTML, I’ve bought several books (and written reviews for you) on the subject:

• HTML5 For Web Developers
• Building Findable Websites
• The Smashing Book
• Hardboiled Web Design (bought but not read yet)

Of course I have a TON of books on my wishlist for all of these categories!

CSS/CSS3

I’ve been using CSS3 for several months now and have been able to convince my clients to embrace the idea of progressive enhancement. CSS3 has sped up my coding noticeably, as I no longer have to take the time to slice and code up images for shadows, rounded corners and the like. Also, the new advanced selectors have made my code cleaner and more efficient. I think this is why I’m starting to enjoy mobile development more – because I don’t have to worry about IE at all and can pretty much use CSS3 to it’s fullest.

And the books I’ve read on the subject:

• Advanced CSS
• Smashing CSS
• CSS3 for Web Designers (bought but not read yet)

Improvements To Coding

All this book reading would be for nothing if I didn’t actually learn and implement any of it. In fact, I learned a ton and have made major revisions to the way I write CSS and a few to HTML as well.

CSS

I continue to prefer single line CSS, but I’ve now just started to put my declarations in alphabetical order. While I’m still getting used to this, it’s made it a lot easier to find what I’m looking for, especially on longer lines. I’ve also learned some nifty new selectors I never though to use before. The most helpful has been the use of:

 a > d {}

Which selects only the top level child of the element. This select has been so incredibly useful, I can’t believe I never used it before.

I’ve also started using shorter selectors and not chaining them as much. This makes the file smaller and quicker to implement on loading.

HTML

Besides switch over to the HTML5 doctype and using the new <head> elements, there’s not much I’ve changed in my HTML. I have stopped using containers as much as possible, and instead have started centering the divs, and putting backgrounds on the <html> and <body> tags. This lends to much cleaner code.

To see examples of all of these, you’re welcome to download my Hijinks WordPress theme, which is the exact same theme I use for all the WordPress sites I code.

Other Languages/Platforms

I’ve also been experiencing with other languages and CMS’s and here are some books on those topics as well:

WordPress

I actually didn’t start WordPress development until the very end of 2009, I can’t believe how far I’ve come in learning!

• Digging Into WordPress

Objective C
I spent most of the spring, summer and beginning of the fall reading this book. I’m still no where near to making my own apps, but the foundation is there.

• Beginning iPhone3 Development

jQuery
This book has allowed me to start writing my own jQuery from scratch. No longer do I have to haggle with plugins or ask the fiance to do it for me.

• jQuery Novice to Ninja

What about you?

What are some of the things you’ve learned this year in order to make yourself better for the next?

I picked up a copy of jQuery: Novice to Ninja both because it was free and because I heard it was one of the best books on the subject. My review of this book is sort of split half and half. I give the first half of the book 5 stars…and the other half…3 stars, only because it began to delve into things that didn’t interest me.

The Facts

jQuery: Novice to Ninja is written by Earl Castledine and published by Sitepoint. The book is 407 pages long, 330ish of that being the actual book, and the rest if the pages at the end of the book contained a bunch of great resources. I had the PDF version, so I can’t comment on print or paper quality, but the PDF was laid out nicely and easy to read.

My Thoughts

The first part of the book was phenomenal awesome. After the first few chapters, I could understand and write jQuery syntax, I knew all of the basic animations and selectors, and could write my own plugins, including dropdowns, tabs, sliding div books and other effects. I learned the most about jQuery in these first few chapters.

In my opinion, the second half of the book was filled with things that you can easily find plugins for. Although I now tend to write my own tabs because of how quick it takes, I’m more apt to look for an existing plugin before I sit down for a long amount of time to write a custom one. It saves my client money and myself sanity and makes everyone around happy. Of course, I know that most of the examples were there to simply to teach the reader how they work and how to write custom code, I simply wasn’t too interested in this part.

The Big Let Down

One major let down of jQuery: Novice to Ninja, is that it really wasn’t a follow along coding book per se, they didn’t really take you step by step through the entire plugin from start to finish. Instead, they only gave excerpts from the code and expected you to download the code off their site, and replace it with each project…this was simply too much work which ultimately helped to lead to skinning of the last part of the book.

I would have prefer if they’d laid out all of the code in the book itself, so I could follow along and type the examples, instead of having to copy and paste excerpts and guess which parts were needed. This was a huge pain, especially as the examples and projects became a lot longer.

Worth a Buy?

If you’re a beginner and wanting to learn the basics, the first have of the book will serve you very well. If you’re wanting to go all the way or already know the basics, the second half of the book will quench your thirst for jQuery goodness. Either way, I recommend it as an awesome after-work read.

You can find it on Amazon for $35.51

Today I’d like for us to take a look at two popular types of dropdowns: one based on CSS only, and another based on jQuery.

The Standard WordPress navigation layout

Before we get into making dropdowns, we need to take a look at the way WordPress layouts it’s navigation. Both wp_list_pages and wp_nav_menu lay out their menus pretty much exactly the same, besides different class names, so we’ll just take a look at wp_nav_menu ‘s printed code:

<ul class="menu" id="menu-main-menu">
<li class="menu-item menu-item-type-post_type menu-item-131" id="menu-item-131"><a href="#">Link</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-132" id="menu-item-132"><a href="#">Link</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-140" id="menu-item-140"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-139" id="menu-item-139"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-142" id="menu-item-142"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-144" id="menu-item-144"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-138" id="menu-item-138"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-141" id="menu-item-141"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-143" id="menu-item-143"><a href="#">Link</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-133" id="menu-item-133"><a href="#">Link</a></li>
<li class="menu-item menu-item-type-post_type menu-item-134" id="menu-item-134"><a href="#">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-135" id="menu-item-135"><a href="#">Link</a></li>
</ul>

As you can see, WordPress neatly (well neat besides all of the classes) layouts out the menu in a nice semantic list, with the children of the navigation nested inside of it’s parent li. This allows us to use both CSS and/or jQuery to make our dropdowns work!

DropDowns with CSS Only

CSS only dropdowns are my favorite, as they allow you the functionality without the use of more Javascript. This means the sites loads faster and works if the user has JS turned off.

CSS only dropdowns work in IE7+ and all other modern browsers, so it’s the perfect way to go!

Since the HTML is already down for us, we just need to get the CSS itself going. Let’s start out by formatting our menu a bit, so the li’s float together, and have some space in between:

ul.menu, ul.menu li { float: left; }
ul.menu li { margin: 0 15px; }

Next, we should hide the sub-menu, so that only our top level items show:

ul.menu, ul.menu li { float: left; }
ul.menu li { margin: 0 15px; }
 
.sub-menu { display:none; }

Now we need to show the sub menu, when we hover over it’s parent link:

ul.menu, ul.menu li { float: left; }
ul.menu li { margin: 0 15px; }
 
.sub-menu li { display:none; }
ul.menu li:hover li { display:block; }

If you go ahead and test it, you can see it works, but it breaks the rest of our navigation! We need to apply a few more basic styles, so when hovering over the sub li items, it doesn’t push over the rest of the menu.

ul.menu, ul.menu li { float: left; }
ul.menu li { position: relative; margin: 0 15px; list-style: none; }
 
.sub-menu { position: absolute; float: none; width: 100px; padding: 0; left: 0; } 
.sub-menu li { display:none; margin: 0; padding: 0; }
ul.menu li:hover li { float: none; display:block; clear: both; }

View the demo

DropDowns With jQuery

For all you jQuery fans, there’s also an easy way to implement WordPress menus with jQuery dropdowns. jQuery allows you to get a bit more fancy, by adding speeds and fades to the animation. It’s also useful if you’re still stuck supporting IE6.

Let’s take the basic CSS from the tutorial above and shed it down to just what we need for jQuery to work and the presentation to look nice:

ul li { position: relative; float: left; margin: 0 20px; list-style: none; }
 
ul ul { width: 100%; visibility: hidden; position: absolute; top: 100%; left: 0; padding: 0; }
ul ul li { position: static; float: none; width: 100%; margin: 0; }

Upon testing, you can see it looks pretty much the same, except that hover over the li with the sub-menu no longer shows the sub items.

First, make sure you attach a copy of jQuery to your document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Now for our jQuery:

<script>
$(function(){
    $("ul li").hover(function(){
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
});
</script>

Test it and voila! You can also add fades and other animations to it.

View the Demo

Perhaps the guys who take care of the podcast aren’t coders, or aren’t front-end developers, and if that’s the case, then I forgive them for their validation transgressions. I just hope they really aren’t front-end developers…

What They Said

The guys at Sitepoint admitted they no longer validate their sites, and none of their sites could pass basic validation. They believed that because large sites like Google and Facebook didn’t validate, why should they? They then commented that validation is no longer important today.

Validation Is Important

I’ve always believed that validation is important, especially since I decided to focus my career on front-end development. Surprisingly, this is a source of a lot of debate in the development world, which makes about as much sense to me as policemen disregarding their standard rules.

Validation is written by the W3C, which takes care of HTML and CSS standards. Validation rules are like guidelines, you don’t have to do it, but it’s something you should do.

Passing validation helps in several ways – it helps you rule out browser bugs, your code tends to be cleaner in nature, and you help push a browser standard that will make it easier to code for in the future. Think about it – if developers didn’t care about following standards, why would browsers? We’d probably end up back in the Netscape/Internet Explorer days where each browser went off in their own direction in how they rendered items. It would be like hacking and coding for each browser – and we’re trying to move away from hacks right? (Which is why I’m holding off on using HTML5).

Plus it holds your code to a higher standard and shows you care about quality. Designers don’t have to use grids or good typography to make a living, both those that do are often more successful. The same with developers. I’ve actually had clients go through each of my portfolio pieces to see if they validated.

Validation Is More Important Than Ever

Not only has validation always been important, but it’s now more important than ever. Even though it can’t directly affect your SEO, getting rid of extra divs (divitis & semantics related to validation) allows the Google bot to make it through your code easier and ensures they capture all of your content.

With the proliferation of new kinds of browsers as well (think mobile, iPads & netbooks), validation becomes even more important. I just finished coding a huge mobile site for Audible and encountered several bugs invisible to Firefox and even the desktop version of Safari. Upon glancing at the iPhone, however, you could see huge layout issues. The problem was mismatched tags and improper nesting. Had I not gone and validated the site, I could’ve been searching for the bug for forever.

Resistence

I’ve never understood why a lot of developers never took the extra step to validate their HTML. A lot of the complaints I get about validating, is that it takes forever. However, it should easily take you less than five minutes to validate your code if you learn proper syntax and rules. It’s easy.

Of course, there are always exceptions to the rule. When a client insists on a new browser window popup on link, and for some reason you’re unable to use JS for this, you’ll often find yourself using target=_blank and that’s ok every once in awhile, although you should try to deter the client from new browser windows due to user annoyance.

I will admit that I don’t bother validating my CSS. Before CSS3 I never really had any CSS validation errors, and if I did it was easy to tell by the messed up website. Now that I use a lot of CSS3 and vendor prefixes, I don’t even bother to look. But these aren’t improper syntaxes or hacks – they’re still valid code.

Your Thoughts

Do you validate your code? Why or why not?