Tag Archives: javascript

Lazy-Loading Images

Jun 28, 2010 by Matt | Posted in WordPress 2 Comments

You may have noticed that a lot of large blogs, like Smashing Magazine and the TUTS+ network, are “lazy-loading” images in their posts. Sometimes, as you scroll through a post full of images, you might catch an image fading in just as it comes onto the screen.

This technique is known as lazy-loading. It makes web pages appear faster, and can save a little server bandwidth. Instead of loading all of the large images on a page, you use JavaScript to delay their loading until they’re needed. This makes the initial page load faster. As the user scrolls down the page, the script loads the images just before they’re needed and places them in their spots.

There is a jQuery plugin you can use for lazy-loading images on any page.

For WordPress users, there is an easy to install WordPress plugin that implements the jQuery lazy-load plugin for you.

Loading JavaScript Asynchronously

Jun 7, 2010 by Matt | Posted in Coding, Featured 12 Comments

BuySellAds and Google Analytics, in an attempt to make the internet faster, recently changed the code snippets they use for serving ads and tracking visitors, respectively, to be non-blocking and asynchronous. This means that the scripts won’t hold up the rendering of your pages while they load. If you reload this page, as an example, the ads to the right may actually appear after the rest of the page has finished loading. It gives the appearance of being a lot faster.

How can you load your own scripts asynchronously? Here’s an example I put together after dissecting Googles’ and BuySellAds’ scripts:

<script id="myscript" type="text/javascript">

(function() {
 var myscript = document.createElement('script');
 myscript.type = 'text/javascript';
 myscript.src = ('http://example.org/myscript.js');
 var s = document.getElementById('myscript');
 s.parentNode.insertBefore(myscript, s);
})();

</script>

What it does is it dynamically assembles and writes out a <script type="text/javascript" src="..." /> DOM element, placing it just before the loader script. You could alter the insertBefore part to append loaded script to the <head> element if you’re so inclined.

You can read further on this technique from these sources:

Like it? Tweet it! A JavaScript TweetMeme Alternative

May 10, 2010 by Matt | Posted in Software & Scripts 3 Comments

“Like it? Tweet it!” is a new JavaScript widget by Andy Graulund that, using Twitter @Anywhere, provides an easy way to display a box for people to tweet about your posts. It automatically loads a shortened URL and let’s you write a message to go along with it.

It provides more customization options than the alternatives, namely TweetMeme. You can use any link as a trigger for the overlay, and it’s possible to re-style the box. You can also change much of the text used, and set which short URL is placed in the tweet.

The only drawback is that users have to connect their account with the application. It only has to be once, and the user can then use any Like it? Tweet it! box around the internet. This is something that has been bothering me about the Twitter @Anywhere platform. Why should a basic tweet box or follow button widget require the authorization process, while the follow buttons in hovercards don’t? Why can’t they use the user’s Twitter login cookie like the hovercards do?

Twitter @Anywhere Launches

Apr 15, 2010 by Matt | Posted in Social Media No Comments

Twitter just launched their new Twitter @Anywhere platform. It lets you “Integrate Twitter seamlessly into your site with just a few lines of JavaScript,” in a manner that reminds me of Facebook Connect. It provides various enhancements that bring the Twitter experience into your site.

The platform is just out of the bubble wrap, so there are more features and documentation coming soon, but the main features currently part of @Anywhere are:

Auto-linkification of usernames – The JavaScript API can automatically link anything that looks like a Twitter username to its corresponding Twitter profile. jQuery-style selectors can be used to fine-tune what gets auto-linkified.
Hoverboxes – If you hover over someone’s username on Twitter.com, a little thing called a “hoverbox” pops up, displaying the basic information about the account. Now you can have them on your site with a couple lines of code. This works well with the “auto-linkification.”
Follow buttons – Click the button, follow the account without ever leaving the page.
Tweet Box – Give your users a form, complete with 140-character counter, that lets them update their status. You can provide default text for the tweet, and a JavaScript callback can return the contents as either plain text or the final HTML output.
User login & signup – You’ve seen those “Facebook Connect” buttons before, whether on comment forms or as part of some other service that uses the Facebook API to get information or post to your profile. Twitter @Anywhere has something very similar. A way, using simple JavaScript, for users to connect their Twitter account to your site.

The question now is, what’s coming next. Could we be seeing an official retweet button as part of the @Anywhere platform? TweetMeme doesn’t use the new retweeting system yet, and Facebook offers a “Share” button and counter as part of their Connect platform. It seems like a logical step for Twitter to take.

BuySellAds Introduces Asynchronous Ad Serving

Feb 11, 2010 by Matt | Posted in Monetization No Comments

BuySellAds, the ad network that I use on Webmaster-Source, has introduced a cutting-edge ad-serving feature. Their new asynchronous ad serving script dramatically speeds up page loading times, as the browser doesn’t have to wait around for the ads to load.

Todd Garland, the founder of BuySellAds, hopes that other networks will follow suit with their own asynchronous solutions, resulting in a faster internet.

If the major ad networks like Google AdSense, Yahoo! Network, AOL Advertising, as well as the popular ad serving products such as Google AdManager and OpenX converted their ad code to be non-blocking, the internet as a whole would become an order of magnitude faster. I genuinely hope that the larger ad networks will step up to the plate and follow our lead on this. A faster internet is a happier internet. This is a big deal.

I’m already using the new ad code here, as are many of the sites in the BuySellAds marketplace.

An API for the Web: Learning YQL

Jan 26, 2010 by Matt | Posted in Coding No Comments

I just read one of the most interesting articles Net.Tuts+ has published in the last few months: An API for the Web: Learning YQL.

Web apps and web services multiply like rabbits. They’re all fun to play with (like rabbits) and fun to integrate into other projects (unlike rabbits). But learning a new API every other day isn’t feasible or fun. And that’s the problem the Yahoo Query Language (YQL) is out to solve.

Think of YQL as the API for the web, the one API to rule them all. It’s not a hard one to learn, so let’s get you up to speed right now!

I couldn’t have said it better myself. YQL is just that: a wrapper for other APIs. It makes it easy to gather data from virtually any API, mash data up if necessary, and bring it into your own application. With generous daily query limits, and no commercial usage restrictions, what’s not to like?

A basic query to collect tweets from two twitter accounts would look like this:

SELECT * FROM twitter.status.timeline.user WHERE id in ('redwall_hp','fantasyfolder')

Very much like an SQL query, no? And there are “tables” to obtain data from many sources, such as Delicious, Netflix, Facebook, Flickr, Github, Last.fm, RSS feeds, etc.. Is there not a table for an API you need to use? You can create one.

Result sets can be returned as XML or JSON.

Developer tools like this and the BOSS search API, which is one of the available tables in YQL, are what I believe will keep Yahoo alive in the coming years.

jQuery 1.4 Released

Jan 22, 2010 by Matt | Posted in Coding No Comments

Version 1.4 of jQuery has been released, and Net.Tuts+ has published a nice guide to some of the more interesting features that are now available.

I’m particularly interested in the first item, which sounds intriguing.

Pre 1.4, jQuery supported adding attributes to an element collection via the useful “attr” method, which can be passed both an attribute name and value, or an object specifying several attributes. jQuery 1.4 adds support for passing an attributes object as the second argument to the jQuery function itself, upon element creation.

A few other things that have been added are: more live() events, animation queue delays, a method to check whether an element contains another element with a certain selector, and a way to remove elements without destroying the data.

It certainly is a feature-packed release.

jQuery 1.4 Released: The 15 New Features you Must Know [Net.Tuts+]

Learning oEmbed

Jan 13, 2010 by Matt | Posted in Coding No Comments

WoorkUp has an interesting post on oEmbed, and how you can use jQuery to take something like a YouTube or Flickr URL and automatically load the video or image on the page. Facebook uses this technique to fetch thumbnails and descriptions when you post a link.

WordPress 2.9 also includes oEmbed functionality, allowing you to easily add YouTube videos to your posts, simply by wrapping the video page’s URL in a pair of “embed” shortcode tags.

WoorkUp shows how you can implement the feature in your own projects.

Learning oEmbed: Convert Links Into Embedded Content [WoorkUp]

jParse: A jQuery XML Parser Plugin

Nov 20, 2009 by Matt | Posted in Coding No Comments

jParse is a jQuery plugin that can asynchronously fetch an XML file (AJAX, in other words) and parse it for display. It works in all modern browsers, plus Internet Explorer 6+, and the file is only 1.8KB in size. It’s basic usage looks something like this, where #item-cont is the element that the XML content will be displayed in:

$('#item-cont').jParse({
    ajaxOpts: {url: 'digg-feed.xml'},
    count: '#item-count'
});

The script’s biggest limitation is that you can’t request an XML file from another domain, because of JavaScript’s Cross-Site Scripting taboo. You could, if you wanted, get around that with a PHP proxy or similar trick.

Tag Archives: javascript

TweetRoll