Jon Raasch's Web Development Blog

CSS Summit: The Good Parts

Jon Raasch — Thu, 29 Jul 2010 16:33:06 +0000

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.

5 Asset Management Tricks for Faster Websites

Jon Raasch — Tue, 11 May 2010 17:04:53 +0000

When it comes to front-end performance, good asset management is just as important as good code. Simply put: downloading assets takes time. Computers and browsers now render pages and execute Javascript faster than ever. Although user bandwidth is increasing, the filesize of assets has been growing in turn. These factors, combined with the rise of the mobile web, have made bandwidth the primary bottleneck in website performance. Here are 5 simple steps to reduce download times with better asset management on your sites. Read more...

Great Examples of Drawing With CSS

Jon Raasch — Tue, 30 Mar 2010 17:34:15 +0000

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 [...]

5 Reasons To Buy CS5 (And Not Just Steal It)

Jon Raasch — Thu, 25 Mar 2010 21:00:08 +0000

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.

Announcing the TranslateThis Button for WordPress

Jon Raasch — Thu, 25 Feb 2010 17:42:51 +0000

I just released a new WordPress plugin to leverage the TranslateThis Button, a Javascript translation widget that uses the Google Language API. This plugin provides an easy interface for customizing the options in the TranslateThis Button. The widget can be either be displayed anywhere in your theme with a template tag, or be included as part of the widgetized sidebar. The plugin provides a variety of settings that can be accessed in the WordPress admin section:

Control the languages in the dropdown and the text of the various UI elements.
Enable Google Analytics tracking for translation events.
Use new button imagery, or disable images altogether, opting for text-only links.
Confine the translation to the post/comments, or translate the entire page.
Disable the cookie, or allow the plugin to translate all the pages on your site automatically.
And more...

These Icons Look Like Crap – Poopy Social Media Icons

Jon Raasch — Tue, 16 Feb 2010 17:03:27 +0000

Social media often seems like a load of crap, so I’m releasing these Poopy Social Icons: 36 different icons in 3 crappy sizes: 48×48, 64×64, 128×128. Feel free to use the Poopy Social Media Icons on any site personal or commercial. No attribution is necessary but please link back to 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.

Get Around Email Address Privacy Issues in Google Buzz (Sort of)

Jon Raasch — Mon, 15 Feb 2010 16:44:29 +0000

Last week marked the release of Buzz, Google’s new competitor for Facebook and Twitter. Initially Buzz inherited a lot of the privacy issues of G-Chat by automatically adding everyone in your Google contacts. The problem with Google contacts is that even people you email casually end up in this list. Fortunately, this privacy issue has [...]

10 Javascript Performance Boosting Tips from Nicholas Zakas

Jon Raasch — Wed, 10 Feb 2010 16:55:06 +0000

Nicholas Zakas is a Javascript guru and principle front-end engineer for the Yahoo! homepage. Zakas just announced his new book High Performance JavaScript, which you should order today. Zakas is pretty much the man when it comes to Javascript performance, and in June he gave a Google Tech Talk entitled Speed Up Your Javascript. While [...]

CSS Rounded Corners In All Browsers (With No Images)

Jon Raasch — Thu, 04 Feb 2010 18:00:19 +0000

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. [...]

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

Jon Raasch — Tue, 05 Jan 2010 15:35:47 +0000

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 [...]