Jungle Gym - Jon Raasch's lifestream


Jon Raasch's Web Development Blog

Web development and design blog from Portland based developer Jon Raasch

  • My OS X Lion Horror Story

    OS X Lion was released in July 2011 and includes a number of new upgrades. Some of these are very impressive, such as complex touch gestures for the trackpad. Others are more mundane, such as fullscreen mode for applications and hidden scrollbars. But all things considered the upgrade is definitely worth it. The problem isn’t [...]

  • CSS Data URIs – Use Them In All Browsers Now!

    Data URIs are one of the best techniques in CSS, allowing developers to avoid referencing external images and instead embed them directly into a stylesheet. The main advantage of this approach is to save HTTP requests. HTTP requests are a huge performance bottleneck, and the reason techniques such as CSS image sprites have been popular for some time. Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. In fact, HTTP request management is so important, that it is the top issue in the Yahoo Performance Rules. Data URIs are an excellent way to reduce HTTP requests and speed up your pages, so let's walk through how to use them in all major browsers.

  • Huge Performance Improvements In Latest Translate This Button

    A few days ago I released a new version of the Translate This Button, a free JavaScript translation widget. Of the sites I tested, the translation operation now runs an average of 70% faster. This performance increase adds to several layers of speed improvements made in previous versions. Additionally, this release includes other enhancements, such [...]

  • Graceful Degradation With CSS3

    With IE9 in development and Opera 10.5 released, CSS3 is a few steps away from being supported by all modern browsers. But users may take a while to upgrade, and responsible developers will support legacy browsers for years to come. For some, cross-browser development means making websites that look exactly the same in all browsers. But if developers continue to cater websites to inadequate browsers such as IE6, then they're just holding back modern browsers from performing to their potential. Graceful degradation is not about allowing websites to look bad in older browsers, but about making them look great in modern ones. It means taking advantage of CSS3's useful features to progressively enhance web pages for the vast majority of users.

  • CSS Summit: The Good Parts

    Yesterday's 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.

Subscribe to my blog's feed


Interactive Volcano

All-inclusive interactive + creative website providing tutorials for jQuery, Flash and JavaScript

  • jQuery? You’ve got to toggle

    Toggling makes it easy to turn things on and off Everyone likes writing jQuery for one main reason: it’s really easy to use. One feature that makes life a lot easier is toggling. Let’s say you have an image that you need to show when a button is clicked and then hide when it is [...]

  • Appending Grayed-Out Overlays with jQuery and CSS

    Probably one of the most widely adopted "web 2.0" features is the grayed out overlay. Rather than always redirecting users to a new page, overlays allow the current page to get "grayed out" with an overlaid panel. With the wide use of Javascript libraries like jQuery, the prevalence of these grayed-out overlays is understandable: they are very easy to build. Let’s start with the markup and CSS. We’ll need two wrappers, appended at the end of the DOM. Although we will append these later with jQuery, for now just put them right in the HTML (or wait until we append them). The idea for these wrappers is that the first 'overlay' div will be the grayed-out background and the 'overlay-panel' will be the HTML panel that sits on top of the overlay. Now let's get started by styling the overlay. The first problem we'll have to tackle is making the overlay fill the screen and sit on top of all the content:

  • Best Practices: How to Include IE-Specific CSS Styles and Stylesheets

    Although good CSS should be written to be as browser-universal as possible, even the best front end developers find it necessary at times to target specific browsers for certain styles. In most cases this means writing a set of special CSS blocks to handle eccentricities in IE and its various versions. There's a wide variety of reasons to target specific browsers: IE6's lack of native support for transparent png24's, pesky 'has-layout' bugs, and IE6's lack of min-height support are just a few. One way to target specific browsers is through CSS selector hacks, which take advantage of quirks in different browser implementations. Perhaps the best known browser hack is the "star html" hack. Basically you prepend * html to any normal selectors in order to target IE6 specifically:

  • Controlling Animation Timing in jQuery

    Animation and function timing can often seem like an uphill battle in Javascript. Thankfully jQuery's variety of timing control mechanisms provide excellent alternatives to Javascript's standard order of function processing. With both callback functions and chainable methods, jQuery allows much greater control over animation timing than Javascript alone. Callback functions provide the ability to execute a function once an animation has completed. Chainable methods allow us to stack a series of operations on a single object. Combining the two, jQuery provides near perfect control over the timing of animations.

  • Build a Simple Flash MP3 Player in AS2

    Making a MP3 player is really simple using Flash and AS2. First open up an FLA in Actionscript 2.0 format. In the first frame, open the actions window and write: var simple_mp3:Sound = new Sound(); simple_mp3.loadSound( 'example.mp3', true ); Here we're loading the MP3 'example.mp3'. The second variable in loadSound() is whether to stream the media. If you would like to wait until the MP3 loads completely, just set this to false.

Subscribe to Interactive Volcano's feed

Up to 88

A blog about stuff that has disappeared

  • Silk Stalkings

    Silk StalkingsSilk Stalkings was a trashy detective drama from the early 90′s. Think Miami Vice with more boobs, except that they couldn’t show boobs because it aired on the USA network. The show was basically soft-core porn for people who couldn’t afford “Skinamax”, and didn’t have a time machine to go watch Baywatch. Silk Stalkings was [...]

  • Mouse Pads

    Mouse PadsMouse pads were the best way to show a little personality around the office. You’re in a cubicle with gray walls, a gray chair, a gray desk, and BAM a bright red mousepad with cool race-cars, Marvin the Martian, or maybe the San Francisco 49ers. Whoever manufactured mouse pads must have been raking in the [...]

  • Power Walking

    Power WalkingPower Walking was an exercise fad that peaked around 1996. It fell somewhere in between a real workout and wearing an electric ab belt. Power walking was particularly popular amongst the elderly. They must have gotten bored of water aerobics. Probably the best part about power walking was actually seeing people do it. I remember [...]

  • Married With Children

    Married With ChildrenMarried with Children was a crass sitcom from the late 80′s and early 90′s that aired on (who else) the Fox Network. It was probably the start of “toilet humor”. Married with Children starred Al Bundy, the lovable anti-father who hated his kids, his wife and his job. His wife Peg kept begging him for [...]

  • The “Dude You’re Getting a Dell” Guy

    The “Dude You’re Getting a Dell” GuyRemember the commercials with the kid who always said “Dude you’re getting a Dell”? Ben Curtis was that lovable stoner from all the Dell commercials in the late 90′s / early 2000′s. It was no small task: Curtis had to be lovable enough to both appeal to kids and get your parents to buy you [...]

  • Ricardo Montalban

    Ricardo MontalbanRicardo Montalban, AKA Ricardo Gonzalo Pedro Montalbán y Merino, AKA KHAAAAAAAAAAAAAAAAAN was a Mexican-born actor with an amazing voice. Poor Ricardo died about a year ago, the cause of death: sheer awesomeness. Ricardo’s stint as Mr. Roarke on Fantasy Island was before my time, but I loved him as the suave bad guy in The [...]

  • Kenny Loggins

    Kenny LogginsKenny Loggins, AKA Adventure Kenny, AKA Kenny Fucking Loggins, pretty much defined the sound of the 80′s. Probably most notable is Kenny’s involvement in the Top Gun soundtrack. In this ‘nothing-but-hits’ soundtrack, Loggins dropped the mega hit Highway to the Danger Zone, as well as the incredibly homoerotic Playing with the Boys. (OK the beach [...]

  • Hey Dude

    Hey DudeHey Dude was a show on Nickelodeon in the 90′s that was a teenage soap opera on a dude ranch. Think Saved by the Bell meets Bonanza. Hey Dude actually kind of sucked. It was a lot like Home Improvement; I only watched it because it was sandwiched between shows that were good. Watch Hey [...]

  • Dennis Rodman

    Dennis RodmanDennis Rodman: proof that ugly people can make it. To be honest, I’m not sure how Dennis Rodman stayed so famous for so long. He got started by simply looking weird: crazy tattoos, facial piercings and hair colors really appealed to 90′s audiences. Rodman was also a pretty good basketball player, but even combining the [...]

  • Ronnie James Dio

    Ronnie James DioDio was an awesome metal band from the 80′s headed by frontman Ronnie James Dio. In case you whipper-snappers don’t remember, Dio invented the devil horns (or at least their use in the heavy metal scene). Poor Ronnie died yesterday, and will be greatly missed. While Holy Diver was Dio’s biggest hit, Rainbow in the [...]

Subscribe to Up To 88's feed