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/css-rounded-corners-in-all-browsers http://jonraasch.com/blog/css-rounded-corners-in-all-browsers#comments Thu, 04 Feb 2010 18:00:19 +0000 Jon Raasch http://jonraasch.com/blog/?p=628

In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites. While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. [...]]]> http://jonraasch.com/blog/css-rounded-corners-in-all-browsers/feed 73 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 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/10-things-every-web-developer-should-know-2 http://jonraasch.com/blog/10-things-every-web-developer-should-know-2#comments Wed, 12 Aug 2009 15:40:54 +0000 Jon Raasch http://jonraasch.com/blog/?p=299 (more…)]]> http://jonraasch.com/blog/10-things-every-web-developer-should-know-2/feed 10 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/jquery-video-game-remake-tc-surf-designs http://jonraasch.com/blog/jquery-video-game-remake-tc-surf-designs#comments Mon, 18 Aug 2008 16:21:12 +0000 Jon Raasch http://jonraasch.com/blog/jquery-video-game-remake-tc-surf-designs 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 the src attribute of any objects. The main obstacle in development was cross-browser keyboard support. Thankfully jQuery's keyboard event objects, along with a little Javascript hacking makes it work in all browsers. ]]> http://jonraasch.com/blog/jquery-video-game-remake-tc-surf-designs/feed 21 http://jonraasch.com/blog/site-facelift http://jonraasch.com/blog/site-facelift#comments Wed, 08 Aug 2007 13:18:09 +0000 Jon Raasch http://jonraasch.com/blog/site-facelift http://jonraasch.com/blog/site-facelift/feed 0