Follow kevinlearynet on Twitter!

kevinleary.net

Enhancing CSS with JavaScript using Sizzle RSS

A new concaution by John Resig called Sizzle has recently caught my eye. It’s a series of JavaScript files that you can add to your website to improve your CSS capabilities by adding advanced CSS3 selectors. Best of all it works in all major browsers including:
Sizzle Browser Support
Firefox 2.0+
Internet Explorer 6+
Safari 3+
Opera 9+
Chrome 1+
By using this library you can effectively do more with less CSS code, and even replace some of your JS and server-side logic.
A Few Common Usage Scenarios
Striping table rows (table tr:odd, table tr:even, etc.)
Grab specific form fields (input:checkbox, input:radio, etc.)
Grab the first or last items in a list (#navigation li:last, #navigation li:first)
Grab the first item in a region (div p:first)
By using Sizzle you’ll also become familiar with CSS3 selectors you’ve probably never used, and will likely use in the future. In an ideal world we would all take the time to learn these and use them in our everyday work, but more often than not it’s simple not possible because of older browser’s and their lack of support (Internet Explorer). By providing full support of CSS3 in Internet Explorer 6 and up, Sizzle helps to solve this issue.
Other Features
Provides meaningful error messages for syntax errors
Optimized for performance – only 4KB when gzipped and minified
Completely standalone (no JavaScript library needed)
Created by a rock solid JavaScript developer, expect to see enhancements well into the future.
I haven’t yet used Sizzle, but based on most of John’s other work I think it sounds pretty promising. I’ll be playing around with it in furure work, if anyone has anything to add please do.

Sizzle CSS Enhancement LogoA new con-caution by John Resig called Sizzle has recently caught my eye. It’s a series of JavaScript files that you can add to your website to improve your JS Selector capabilities, adding advanced CSS3 selectors to jQuery and other JavaScript libraries.

Sizzle Browser Support

  • Firefox 2.0+
  • Internet Explorer 6+
  • Safari 3+
  • Opera 9+
  • Chrome 1+

By using this library you can effectively do more with less CSS code, and even replace some of your JS and server-side logic.

Continue Reading…

A Cleaner AddThis Design RSS

AddThis Re-designI love the ease of use and rich feature set of the AddThis social media service. However, due to it’s popularity the design has become overused and mundane. I decided to see if I could customize it to match the overall experience of kevinleary.net.

The results came out pretty nice in my opinion. I may eventually swap out the [ + ] icon in the future, but for now I think it works. I’m always a bit hesitant to re-design consistencies.
Continue Reading…

Check out Fresh Tilled Soil: Web Resources! RSS

Some people may have noticed that the frequency of my articles has died down a bit over the past month or so. I’ve been adding posts at a new location now for work.

Many of the topics are the same, if your interested in checking it out head on over to Fresh Tilled Soil: Web Resources and take a look.

I’ll continue to post on kevinleary.net as well, but not as often. I’d say that I plan to average 2-3 new posts per month.

Thanks again for reading!

Highlighting The Current Page With CSS & jQuery RSS

Here’s a common web development scenario: How do we highlight the current page in a navigation seamlessly and dynamically? The answer is jQuery.

See a Live Demo

My recipe for this common scenario involves a mixture of CSS and JavaScript with a dash of jQuery.

XHTML

<ul id="navigation">
	<li><a href="about-us.html">about us</a></li>
	<li><a href="our-products.html">our products</a></li>
	<li><a href="blog.html">blog</a></li>
	<li><a class="active" href="login.html">login</a></li>
	<li><a class="active" href="contact.html">contact</a></li>
</ul>

Continue Reading…

Testing Page Load Speed With Firebug RSS

The more I find myself using JavaScript, the more I begin to worry about the weight of my pages. With the use of jQuery, much that was tradiotionally server side can now be handled on the client side with JavaScript.

So how does one go about measuring the time it takes to load there website? Furthermore, how do we determine which files are taking the most time to load? The answer is the FireBug Net Panel.

Continue Reading…