Posts Tagged ‘jQuery’
August 17th, 2010
With IE9 in development and Opera 10.5 released, CSS3 is a few steps away from being supported by all modern browsers. But users may take a while to upgrade, and responsible developers will support legacy browsers for years to come.
For some, cross-browser development means making websites that look exactly the same in all browsers. But if developers continue to cater websites to inadequate browsers such as IE6, then they’re just holding back modern browsers from performing to their potential.
Graceful degradation is not about allowing websites to look bad in older browsers, but about making them look great in modern ones. It means taking advantage of CSS3’s useful features to progressively enhance web pages for the vast majority of users.
Tags: browser hacks, cross-browser, CSS, css3, front-end, graceful degradation, IE, jQuery, web design, webdev
Posted in CSS | 14 Comments
February 10th, 2010
Nicholas Zakas is a Javascript guru and principle front-end engineer for the Yahoo! homepage. Zakas just announced his new book High Performance JavaScript, which you should order today.
Zakas is pretty much the man when it comes to Javascript performance, and in June he gave a Google Tech Talk entitled Speed Up Your Javascript.
While Javascript optimization is by no means black-and-white, here’s a list of 10 tips from Nicholas’ talk that will help you write Javascript that really flies.
1. Define local variables
When a variable is referenced, Javascript hunts it down by looping through the different members of the scope chain. This scope chain is the set of variables available within the current scope, and across all major browsers it has at least two items: a set of local variables and a set of global variables.
Simply put, the deeper the engine has to dig into this … Read more…
Tags: 10 tips, best practices, DOM, front-end, javascript, jQuery, loops, optimization, performance, scope, webdev
Posted in 10 Javascript Performance Tips, javascript | 21 Comments
January 5th, 2010
Remember the code from Contra on original Nintendo? Up, up, down, down, left, right, left, right, B, A, start; it’s also known as the Konami Code and the 30 Lives Code.
This famous sequence of buttons from the 80’s isn’t going anywhere: in more recent times it’s been in a Moldy Peaches song, and used as an easter egg in Google Reader and Facebook, to name a few.
But I’m sure tons of great things can still be done with the code from Contra, so I built it into a simple jQuery plugin that can be easily used on any site.
The jQuery Contra Plugin allows you to call a function of your choice whenever a user enters the Konami Code (up, up, down, down, left, right, left, right, b, a, enter).
Download the Contra Plugin
Read the jQuery Contra docs
How to use … Read more…
Tags: code, downloads, easter egg, freebies, javascript, jQuery, Nintendo, plugins, pop culture, throwbacks, video games
Posted in front-end, jQuery Plugins | 5 Comments
November 19th, 2009
There were a lot of good speakers at today’s jQuery Summit, but Paul Irish‘s talk on jQuery Anti-Patterns for Performance & Compression was my stand-out favorite. Covering a number of advanced jQuery performance optimization techniques, this speech put my knowledge of jQuery optimization to shame.
Before Paul’s talk my understanding of jQuery performance tuning was fairly simplistic:
- Optimize selectors to descend from an id if possible.
- Use tag names when selecting classes and don’t use an excessive number of selectors.
- Define variables instead of selecting the same object repeatedly.
- Optimize your code replacing repetition with object oriented functions.
But the information Paul presented blew all that out of the water. Here are 10 jQuery performance rules I gathered from his presentation:
1. Optimize selectors for Sizzle’s ‘right to left’ model
As of version 1.3, jQuery has been using the Sizzle Javascript Selector Library which works a bit differently from the … Read more…
Tags: front-end, javascript, jQuery, performance, selectors, webdev
Posted in webdev | 25 Comments
September 14th, 2009
For the past couple years jQuery has been gaining in popularity, from a hot script with easy CSS selectors released by John Resig in 2006, all the way to jQuery 1.3.2, probably the most widely used Javascript library today. The jQuery core has been constantly expanding, offering new methods and performance tuning with every release, in addition to the wide variety of jQuery plugins that are released almost daily.
Known for publishing resources for the latest development trends, Packt Publishing has recently released an updated version their jQuery book: Learning jQuery 1.3, by Jonathan Chaffer and Karl Swedberg of Learning jQuery (the website). This new resource provides an excellent introduction to jQuery as well as going into detail on some of its finer topics. I’d highly recommend it for anyone who is fairly new to jQuery—it will give you a great head start in … Read more…
Tags: best practices, books, jQuery, resources, reviews
Posted in front-end | 1 Comment
July 13th, 2009
I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back. The flip effect is similar to the UI animation on the iPhone
Download QuickFlip 2 for jQuery
Read the QuickFlip documentation
QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.
It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with … Read more…
Tags: animation, front-end, javascript, jQuery, performance, plugins, UI, web design, web2.0, webdev
Posted in webdev | 144 Comments
June 15th, 2009
YouTubin’ is a jQuery plugin that makes embedding YouTube videos clean, easy and unobtrusive. In its simplest form, YouTubin’ grabs any links that point to a YouTube page and replaces them with an embedded video. To do so, YouTubin’ leverages SwfObject 2 if available, but otherwise just embeds the video through standard markup.
Advanced options include flagging specific video elements using a jQuery selector and setting a variety of swf properties such as dimensions, flash version, flashvars and params. Youtubin’ can even be used to cause the video to embed once a link is clicked rather than when the page loads.
Download YouTubin’ jQuery Plugin
Tags: best practices, clean markup, downloads, jQuery, plugins, unobtrusive, video, youtube
Posted in front-end | 13 Comments
June 2nd, 2009
Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.
Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.
The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the … Read more…
Tags: animation, downloads, front-end, javascript, jQuery, open source, parallax, performance, plugins, web design, webdev
Posted in webdev | 81 Comments
May 7th, 2009
Contact-Pop is a jQuery plugin that makes contact forms with grayed out overlays incredibly easy. The basic script grabs any links that point to your contact page and flags them for the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.
While there are a lot of options for producing grayed out overlays in jQuery, Contact-Pop provides a more robust and specialized solution for in-page contact forms. The main advantage is ease of use: simply flag any links to your current contact page by href or jQuery selector, and ContactPop does the rest. Combining this simplicity with a plethora of customizable options, Contact-Pop is a useful plugin for … Read more…
Tags: AJAX, best practices, blog, CSS, customization, forms, front-end, javascript, jQuery, PHP, plugins, unobtrusive, web design, web2.0, webdev
Posted in webdev | 103 Comments
January 30th, 2009
When I started developing I was fortunate enough to have an experienced friend who pointed me to all the right articles, websites, etc. The right tools make all the difference and this educational jumpstart was exactly what I needed to hit the ground running.
Now that I’ve gathered a good deal of Javascript knowledge and used a wide variety of Javascript resources, I’d like to share these so that others can experience the same benefit I did. And don’t stop reading if you already know Javascript inside and out: there’s resources here for all skill levels, from noob to pro.
1. Mozilla Developer Center
The Mozilla Development Center should be your starting point for all things Javascript.
Beginners should start with the Core Javascript Guide. Javascript can be a really confusing language at first and going through each of these pages will make you comfortable with Javascript’s peculiar syntax … Read more…
Tags: best practices, books, education, front-end, javascript, jQuery, resources
Posted in front-end | 9 Comments
