Archive for the ‘webdev’ Category

TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis is a new Javascript widget that provides 52 languages of translation by leveraging the Google Language API.

Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.

Besides being easy to use, TranslateThis also provides many attractive features for developers. First off, requests to the Language API run in Javascript, so the translation is pretty fast. Additionally, the script is lightweight, weighing in at just over 11kb with another 7kb of imagery. And since it doesn’t depend on any Javascript library, TranslateThis can be implemented on any website without additional overhead. Finally, TranslateThis has been tested in all modern browsers and its user interface is designed to be straightforward and seamless.

Get your own TranslateThis Widget

Read the TranslateThis Documentation

What can you customize in TranslateThis?


10 Advanced jQuery Performance Tuning Tips from Paul Irish

10 Advanced jQuery Performance Tuning Tips from Paul Irish

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:

  1. Optimize selectors to descend from an id if possible.
  2. Use tag names when selecting classes and don’t use an excessive number of selectors.
  3. Define variables instead of selecting the same object repeatedly.
  4. 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…


Yet Another Featured Posts Plugin for WordPress (YAFPP)

Yet Another Featured Posts Plugin for WordPress (YAFPP)

Yet Another Featured Posts Plugin provides an easy-to-use interface for featuring specific posts in a WordPress blog. After installing the plugin, you can feature and unfeature posts by clicking on each post’s ‘featured star’ in the WordPress edit posts page.

Yet Another Featured Posts Plugin has a variety configuration options, allowing you to control a number of display options as well as which users can feature posts. For developers YAFPP allows several output options besides the default: it can return a data array, modify the next query for WordPress’ the_loop(), and or return formatted data (which can be easily formatted through the admin panel).

Download Yet Another Featured Posts Plugin (YAFPP)

YAFPP Screenshots

Read the documentation

How to use YAFPP

To start, download YAFPP and upload it to your site’s wp-content/plugins/ directory. Activate the plugin and go to the posts listing in your WordPress admin … Read more…


10 Things Every Good Web Developer Should Know (A Checklist)

10 Things Every Good Web Developer Should Know (A Checklist)

My favorite thing about web development is the wide variety of skills it uses. Being a good developer means staying on your toes and always learning, because there are so many important skills and these are constantly changing.

Here’s a checklist of 10 skills that are some of the most important for good web developers to have. These focus a bit on front-end skills, but they apply to all developers:

(more…)


QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

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…


Scrolling Parallax: A jQuery Plugin

Scrolling Parallax: A jQuery Plugin

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…


Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin

Contact-Pop jQuery Plugin

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…


Flipbook Movies with jQuery

Flipbook plugin for jQuery

Flipbook is a jQuery plugin that produces a movie effect by running images in quick succession. The concept is similar to something I always did in middle school: doodling in the margins of my notebooks to make short movies. Times have changed and nowadays I use a Javascript object, pulling the images dynamically with jQuery’s AJAX function and a PHP script ;) . But don’t worry, it’s just as easy to use as a real flipbook.

The jQuery Flipbook Plugin is built around my jQuery slideshow tutorial. It’s very flexible, providing great options for both new and seasoned developers alike. You can easily make anything from a short film to an image slideshow to a text viewer.


jQuery Video Game Remake: T&C Surf

T&C Surf Designs

When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript.

Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump

After playing Javascript Mario Kart, I’ve been wanting to develop a classic video game with jQuery. T&C seemed like a good fit because its motion and overall simplicity are ideal for jQuery’s animation library (and it’s really fun).

I’m fairly pleased with the performance, which is vastly improved through the use of cell-based collision detection. Instead of having to check for collision every pixel, it can be checked every 32, with huge processing savings. Additionally, the use of CSS sprites greatly reduces the number of HTTP requests and the need to use … Read more…


A Simple jQuery Slideshow

Simple jQuery Slideshow Tutorial

In the interest of following jQuery’s motto of “writing less and doing more,” let’s write a simple slideshow using jQuery, JavaScript and a bit of CSS.

For starters, our main goal should be keeping the markup as clean as possible: <div id=”slideshow”> <img src=”img/img1.jpg” alt=”" class=”active” /> <img src=”img/img2.jpg” alt=”" /> <img src=”img/img3.jpg” alt=”" /> </div> Now let’s use CSS to position the images on top of each other and bring the active image to the images on top of each other and bring the active image to the top level with z-index: