Jon Raasch's Blog » front-end

Jon Raasch's Blog » front-end http://jonraasch.com/blog Web development and design blog from Portland based developer Jon Raasch Thu, 29 Jul 2010 16:35:00 +0000 en hourly 1 http://wordpress.org/?v=3.0 jQuery Contra Plugin – Up, up, down, down, left, right, left, right, B, A, enter http://jonraasch.com/blog/jquery-contra-plugin http://jonraasch.com/blog/jquery-contra-plugin#comments Tue, 05 Jan 2010 15:35:47 +0000 Jon Raasch http://jonraasch.com/blog/?p=520

jQuery Contra Plugin – Up, up, down, down, left, right, left, right, B, A, enter

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 [...]]]> http://jonraasch.com/blog/jquery-contra-plugin/feed 3 Appending Style Nodes with Javascript http://jonraasch.com/blog/javascript-style-node http://jonraasch.com/blog/javascript-style-node#comments Tue, 22 Dec 2009 15:00:47 +0000 Jon Raasch http://jonraasch.com/blog/?p=456

In Javascript it often makes sense to attach a stylesheet rather than style a bunch of individual attributes. Appending a stylesheet to the DOM has a number of advantages: Stylesheets can be easier to work with than Javascript—it’s just more natural to use CSS syntax for styling. It’s nice to avoid the cross-browser headaches associated [...]]]> http://jonraasch.com/blog/javascript-style-node/feed 3 TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike http://jonraasch.com/blog/javascript-translation-widget http://jonraasch.com/blog/javascript-translation-widget#comments Tue, 08 Dec 2009 23:16:38 +0000 Jon Raasch http://jonraasch.com/blog/?p=411 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?

]]> http://jonraasch.com/blog/javascript-translation-widget/feed 0 Book Review : Learning jQuery 1.3 http://jonraasch.com/blog/book-review-learning-jquery-1-3 http://jonraasch.com/blog/book-review-learning-jquery-1-3#comments Mon, 14 Sep 2009 17:06:04 +0000 Jon Raasch http://jonraasch.com/blog/?p=332

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, [...]]]> http://jonraasch.com/blog/book-review-learning-jquery-1-3/feed 1 YouTubin’ Plugin for jQuery http://jonraasch.com/blog/youtubin-jquery-plugin http://jonraasch.com/blog/youtubin-jquery-plugin#comments Mon, 15 Jun 2009 18:47:16 +0000 Jon Raasch http://jonraasch.com/blog/?p=91 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]]> http://jonraasch.com/blog/youtubin-jquery-plugin/feed 6 A million ways to embed custom fonts (and keep typography nerds off your back) http://jonraasch.com/blog/embedding-custom-fonts http://jonraasch.com/blog/embedding-custom-fonts#comments Tue, 24 Mar 2009 16:35:27 +0000 Jon Raasch http://jonraasch.com/blog/embedding-custom-fonts http://jonraasch.com/blog/embedding-custom-fonts/feed 15 10 Javascript Resources – From Noob to Pro http://jonraasch.com/blog/10-javascript-resources http://jonraasch.com/blog/10-javascript-resources#comments Fri, 30 Jan 2009 21:54:15 +0000 Jon Raasch http://jonraasch.com/blog/10-javascript-resources 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 and methods. (It's way better than w3schools.com) ]]> http://jonraasch.com/blog/10-javascript-resources/feed 6 QuickFlip jQuery Plugin http://jonraasch.com/blog/quickflip-jquery-plugin http://jonraasch.com/blog/quickflip-jquery-plugin#comments Mon, 20 Oct 2008 15:50:53 +0000 Jon Raasch http://jonraasch.com/blog/quickflip-jquery-plugin jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back. When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it‚Äôs not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over (more...)]]> http://jonraasch.com/blog/quickflip-jquery-plugin/feed 27 Handy CSS Cleanup Tool http://jonraasch.com/blog/handy-css-cleanup-tool http://jonraasch.com/blog/handy-css-cleanup-tool#comments Wed, 27 Aug 2008 14:20:24 +0000 Jon Raasch http://jonraasch.com/blog/handy-css-cleanup-tool Dust-Me Selectors, is a Firefox extension that makes cleaning up CSS a snap. It can spider an entire site or a group of pages to determine which CSS blocks are unused in the stylesheets those documents call.]]> http://jonraasch.com/blog/handy-css-cleanup-tool/feed 0