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 http://jonraasch.com/blog/css-summit http://jonraasch.com/blog/css-summit#comments Thu, 29 Jul 2010 16:33:06 +0000 Jon Raasch http://jonraasch.com/blog/?p=1124 CSS Summit featured some the best CSS minds presenting on cutting edge CSS issues. There was a ton of great information presented across the 8 sessions, but here's a wrap up of the single best piece of information from each presenter:

Denise Jacobs – Advanced CSS Troubleshooting

The highlight of Denise's talk was some specific coding tips about clearing floated content. She started with the standard overflow: hidden method, which falls short with support for borders & margins and also doesn't allow scrollbars if they're needed. Denise suggested instead using overflow: auto; width: 100%; which avoids these issues. You don't have to use the exact values above, you just have to set some type of overflow and width / height value. Denise went on to discuss a .clearfix:after method, see the gist. Denise likes this clearing method since it doesn't include any extra, non-semantic markup (as opposed to <br class="clearfix" />). However the fact that the :after selector doesn't work in IE6/7 makes this method unusable in my opinion. Ultimately I'm going to stick to the overflow: auto; method described above.]]> http://jonraasch.com/blog/css-summit/feed 0 http://jonraasch.com/blog/drawing-with-css http://jonraasch.com/blog/drawing-with-css#comments Tue, 30 Mar 2010 17:34:15 +0000 Jon Raasch http://jonraasch.com/blog/?p=964

I’ve always been a fan of drawing page components with pure CSS rather than using image support. Although rendering the page with CSS can sometimes be a pain, the rewards of fewer HTTP requests & less download time make it well worthwhile. Until recently, most web designers and developers couldn’t design using CSS alone, because [...]]]> http://jonraasch.com/blog/drawing-with-css/feed 3 http://jonraasch.com/blog/5-reasons-to-buy-cs5-and-not-just-steal-it http://jonraasch.com/blog/5-reasons-to-buy-cs5-and-not-just-steal-it#comments Thu, 25 Mar 2010 21:00:08 +0000 Jon Raasch http://jonraasch.com/blog/?p=887 Adobe CS5 is coming out on April 12, and I can't wait. This new release comes packed with a ton of awesome new features, such as content-aware fill, painting, better edge detection and time-saving shortcuts. But this post isn't about all of CS5's awesome features, it's about why you should actually buy it this time around. In a few weeks, just about anyone will be able to find a torrent, download link or burned copy of CS5. It seems to me that Adobe unofficially condones this, similar to record labels unofficially allowing "leaked" videos on YouTube. Let's face it: readily available pirated copies of the Creative Suite allow Adobe to retain what is basically a monopoly on this software. Amateur users, who would never actually purchase the software, find illegal copies and not only learn the Creative Suite, but more importantly don't learn something from a competitor. Adobe then depends on professional users such as design agencies and larger freelancers to actually buy the software.]]> http://jonraasch.com/blog/5-reasons-to-buy-cs5-and-not-just-steal-it/feed 9 http://jonraasch.com/blog/poopy-social-media-icons http://jonraasch.com/blog/poopy-social-media-icons#comments Tue, 16 Feb 2010 17:03:27 +0000 Jon Raasch http://jonraasch.com/blog/?p=705 this post or retweet it if you like using these. Thanks! Download the Poopy Social Media Icons The Poopy Social Icon set covers 34 different social media outlets with an extra icon option for both Twitter and Digg. If I missed any, please let me know.]]> http://jonraasch.com/blog/poopy-social-media-icons/feed 1 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 http://jonraasch.com/blog/quickflip-2-jquery-plugin http://jonraasch.com/blog/quickflip-2-jquery-plugin#comments Mon, 13 Jul 2009 21:15:45 +0000 Jon Raasch http://jonraasch.com/blog/?p=114 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 a depth effect try jQuery Flip!, although this only works with background colors (not images) and hides the panel content before flipping.]]> http://jonraasch.com/blog/quickflip-2-jquery-plugin/feed 70 http://jonraasch.com/blog/scrolling-parallax-jquery-plugin http://jonraasch.com/blog/scrolling-parallax-jquery-plugin#comments Tue, 02 Jun 2009 16:55:25 +0000 Jon Raasch http://jonraasch.com/blog/?p=59 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 background to name a few. Addtionally you can attach the parallax to any piece of markup, as well as pass an image path as described above.]]> http://jonraasch.com/blog/scrolling-parallax-jquery-plugin/feed 14 http://jonraasch.com/blog/contact-pop-jquery-plugin http://jonraasch.com/blog/contact-pop-jquery-plugin#comments Thu, 07 May 2009 15:52:46 +0000 Jon Raasch http://jonraasch.com/blog/contact-pop-jquery-plugin http://jonraasch.com/blog/contact-pop-jquery-plugin/feed 49 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 http://jonraasch.com/blog/translate-it-easy-translation-for-multiple-languages http://jonraasch.com/blog/translate-it-easy-translation-for-multiple-languages#comments Mon, 01 Dec 2008 05:14:49 +0000 Jon Raasch http://jonraasch.com/blog/translate-it-easy-translation-for-multiple-languages Download Translate-It. The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like Google Translate and Yahoo's Babelfish have made the web more accessible. While accessing these translation tools is often too cumbersome for your site's visitors, leveraging these tools is relatively simple for developers. (more...)]]> http://jonraasch.com/blog/translate-it-easy-translation-for-multiple-languages/feed 21