You searched for javascript - Page 14 of 18

Easy HTML5 Template

I’ll be the first to admit that when I see a default template like HTML5 Boilerplate, it brings about a swirl of emotions.

On the one hand, I’m ridiculously intimidated by the incredible amount of knowledge and experience that’s been collected into one place for the benefit of front-end developers. So much so, that I wonder what I’m even doing in this industry, because it reminds me of how far behind I am.

On the other hand, I’m inspired, because there’s so much more to learn, and it’s exciting to add new nuggets of knowledge to my toolkit, and I can’t wait to hit the books and grow my knowledge base. It also helps when others express the same feelings about lagging behind. But I’m getting sidetracked.

Recreating the MLB.com Content Switcher with jQuery and CSS3

This article was first published on June 1, 2010 and has been updated to include a few extra features and an improved code base.

I’m a huge baseball fan, so earlier this year, just for a fun side project, I recreated the MLB.com Flash content switcher using jQuery and CSS3.

My goal with this project was to try to recreate the switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

My version uses CSS3’s border-radius, RGBA colors, opacity, and a small use of a gradient, and still looks acceptable in non-supportive browsers (although the jQuery is not as smooth in IE6 & IE7). Be sure to look at the real version on MLB.com for comparison; there are a few small differences, but mine is basically the same.

Is it Accurate to call HTML5-Based Code Forking “Graceful Degradation”?

Before I go into the main content of this post, I just want to say that Bruce Lawson has done a fantastic job of promoting HTML5 education both online and in print. I haven’t had a chance to get a copy of his and Remy Sharp’s book Introducing HTML5 but it is on my definite to-read list.

But sometimes it seems that HTML5 evangelists can get a little bit carried away in their zeal for promoting these new technologies and features, and they inadvertently end up misusing terms.

In my opinion, Bruce does this in Issue #204 of .net magazine, in the recently-revamped “gallery” section that now includes HTML5 websites.

Slide-Down Mega Drop-Down Menus with Ajax and jQuery

While reading an article on CBC’s website, I noticed they have added what seem to be newly-designed mega drop-down menus that work in an interesting kind of way.

These looked like a cool and simple thing to reproduce, so I gave it a shot and came up with something that I think works pretty nicely.

It wasn’t as simple as I thought, and I don’t think my code is the greatest, so I’m open to suggestions. I think this could form the basis for a jQuery plugin but I’ve never created a jQuery plugin so holding I’m off on that for now.

There’s No Such Thing as a “Standards-Compliant” Browser

I think this is a pretty basic point, but I often see people throwing terms around in inappropriate ways (which I’ve also been guilty of), so I thought I would clear this up.

As fallible humans we tend to lean towards making excuses, blaming others, or trying to justify our mistakes or shortcomings. This is why you’ll often read comments from people discussing CSS and web standards, and they’ll say “I don’t use Internet Explorer; I use a standards-compliant browser”. Well, no you don’t. Nobody does.

How Do You Decide Which Web Design or Programming Books to Buy?

I think it goes without saying that web design bloggers love to read (similar to how it goes without saying that Germans love David Hasselhoff). If you’re like me, then it’s quite likely you’ve purchased the odd web design or programming book that you weren’t all too thrilled with.

Books can be expensive, especially if you only buy them brand new and when they’re first released. And if you live in a country outside North America or the UK, then they could be even more expensive because of shipping costs.

So before purchasing a new design or programming book, I usually do a few things to increase my odds of being happy with the purchase.

Decisions CSS Developers Need to Make

Because there are so many ways to skin the proverbial cat, as CSS developers, we pretty much have free reign to do things as we please.

While some things in CSS are pretty straightforward (like if you want to add a rollover color, you use :hover), that is not the case with others. In many cases, there is no set way to accomplish a single task in a layout or with regards to some other CSS-based technique.

In such cases, it’s up to the developer to choose what he wants to do based on his own preference, his workflow, his knowledge of CSS, and experience in dealing with certain aspects of the language.

Always Pre-Load Mandatory Content

There are some cases during the user experience where preloading content is not a good idea.

For example, if the user is faced with multiple options as to what content he will choose, then it would not be a good decision to preload all content. This would add unnecessary HTTP requests and bandwidth for both client and server, and would degrade the user experience.

But in other cases, using JavaScript (or some other means) to preload video or images is the right choice, because of the path the user has chosen to take. The website for Major League Baseball has a video page that I think could benefit from this kind of improvement.

Animated Sprites with CSS3 Transitions

I don’t think I’ve seen this specific method used yet, but it seems like one of those super obvious techniques. This technique is not really anything new, it just combines two concepts that most CSS developers should be fairly well familiar with by now.

CSS sprites are a method for creating complex rollovers without using JavaScript.

CSS3 animations (or more accurately, CSS3 transitions) is a new feature that has been added to some newer browsers, most notably WebKit-based browsers like Chrome and Safari. Like sprites, CSS3 animations don’t require JavaScript.

Things You Might Not Know About Conditional Comments

Use of conditional comments to target certain versions of Internet Explorer is pretty commonplace nowadays, and is generally seen as the best-practice method for including separate styles for IE.

Of course, I’ve argued in a previous article that if your IE-only styles are minimal, then you should just include them in your main stylesheet, a notion that others have echoed.

But conditional comments have some unique possibilities and quirks that maybe you haven’t considered before, or have simply forgotten. Here is an overview of some things you may not know about conditional comments.