Code

/ Don

WPNewsman Full Text Newsletters

WPNewsman

If you’re looking for a free newsletter tool for your installation of WordPress and have less than 2,000 subscribers, the WPNewsman plug-in is fairly nice. They allow you to style your newsletters, entering shortcodes for post-specific content, as well as the post entries and separators. Once finished, you have the option of selecting by author, category, and date range, and creating a newsletter to use excerpts, fancy excerpts (which includes html), and full post content. Unfortunately, the full post content turns HTML into text and removes paragraph breaks, leaving one giant mass of text and html code, commingled. Read more

/ Don

Twitter Cards

[d]online - Twitter Card Example

[d]online - Twitter Card Example

If you’re an avid user of Twitter, you’ve probably noticed the new links that show up on the bottom of certain tweets in your feed. The links say “View Summary” and allow you to read the title and excerpt of an article, along with a thumbnail of the article’s featured image. Those links are called Twitter Cards, come in three different varieties: summaries, photos, and play, and have two different layouts:  web and mobile.

Twitter Cards help increase your visibility and ensourage users to click to your site by providing more information beyond Twitter’s 140 character limit. Furthermore, design and development studios with Twitter Card functionality built into their site can provide a working example for clients to see how the same functionality can be implemented into their sites.

As with most of Twitter’s APIs, Twitter cards are fairly quick to implement. All you need to do is insert some metadata, test, and apply to participate. To make things even easier, Niall Kennedy has created a WordPress plug-in to automatically scrape your post’s title, permalink, description and image URL for summary Twitter cards. After installing and activating the plug-in, preview your Twitter card by pasting the post’s URL into their preview page.Lastly, you’ll need to apply to participate. Simply enter your site and contact information here and Twitter will reply within 5-10 business days.

/ Don

Sightsmap

Using geo data from photos uploaded by users to Google’s Panoramio, Sightsmap generates an interactive heatmap of the most frequently photographed spots around the world. It reminds me a little of the Heat Map I made back in 2006, which could be applied to any geolocational data (including photos).

/ Don

Window Focus and Blur

In working on the new Pantone Moods this week, I needed to add a listener to the widget to halt the realtime updates if a user no longer had the page active (meaning, they switched to another browser tab or application) to prevent unnecessary traffic to the server.

The application cycles through the ten most recent Moods posts and, upon nearing the end of its cache, queried the server for a new supply. However, if someone’s focus wasn’t on the page, it makes no sense to keep collecting and displaying results.

With ActionScript 3, this task is quite easy:

stage.addEventListener(Event.DEACTIVATE, onDeactivate);
stage.addEventListener(Event.ACTIVATE, onActivate);

And it’s just as easy when programming for Mobile Applications:

NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, onActivate);
NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, onDeactivate);

With JQuery, we can now accomplish the same thing for AJAX/PHP browser applications to no longer commit resources to updating a page that isn’t being viewed:

$(function(){
	$(window).bind('blur', function(){
		onDeactivate();
	});
 
	$(window).bind('focus', function(){
		onActivate();
	});
	// IE EVENTS
	$(document).bind('focusout', function(){
		onDeactivate();
	});
	$(document).bind('focusin', function(){
		onActivate();
	});
});

Note that the second two methods must be added because Internet Explorer uses focusin/focusout rather than simply focus/blur.

/ Don

Flash Video Smoothing

While working on a new project for ERA404, I received a great tip from Zeh, my Flash Obi Wan whom you’ve no doubt read me gushing about in the past. The site (which will be launched at the top of 2010) is centered around a video loop. The loop began as a 208MB raw Quicktime video clip shot by one of ERA404’s video directors/editors, Greg Stadnik (you may remember his work from our Beautiful Children viral video that was featured in Gawker and AdRants last year). The clip was then scaled in 1/2, compressed using the On2 VP6 codec, imported into flash and then manipulated manually.  The final SWF was 3.12MB, but the quality suffered terribly.

This is when Zeh clued me in to video smoothing. It’s the same principle as bitmap smoothing, since embedded video clips are technically just an image sequence. The result was night and day. The left half of the below screenshot shows video smoothing set to true, where the right shows smoothing set to false.

smoothingFigure 1. Video Smoothing – Click image for larger/detailed version

Note that this is just the beginning of this site with the radial gradient and scanlines stripped away to accentuate the smoothing detail. Overall, it’s an easy way to preserve quality without increasing loadtime, memory or processor demand. Give it a try. I’m sure you’ll be as pleasantly surprised as I was by the result.

/ Don

Flash Filter Hotspot Interference

screenshot08

I wasted almost an entire day this week attempting to figure out why a link started pulsing when activated by a mouse. The link, a 0% alpha “hotspot” or “rollbox” (as it’s sometimes called) movieclip (mouse enabled) with a dynamic textbox (mouse disabled), was listening for onRollOver and onRollOut mouse events. OnRollOver, the link was expected to switch indexes to the front, grow to 3x the original size and then ColorTransform to an active color. The index switch was updated immediately, and the scaleX/scaleY and ColorTransform was a timed action handled by Tweener. With the exception of the re-indexing, these tweens were triggered onRollOut as well, though in reverse. There are obviously a million other ways to handle this, and numerous tweening engines that could be used instead of Tweener, but this was the method I’d used in the past and was most comfortable with.

Upon testing, I found that most of the menu items worked fine, but some “pulsed” or flickered between growing and shrinking, as well as changing color sharply. Moving the mouse over the words while the tween was occurring sometimes seemed to thwart the issue. And some links seemed unaffected by the bug. Also, I noticed that when the link hit the onComplete method of the tween (meaning, it had finished growing to 300% and colorTransforming to the active state), the pulsing stopped.

Read more