July 29th, 2010
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 … Read more…
March 30th, 2010
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 there simply wasn’t enough cross-browser support for all the wonderful CSS3 attributes.
However, with IE9 just around the corner and Opera 10.5 already released, we are extremely close to the point where we can render web pages in CSS3 across all modern browsers (IE, Firefox, Chrome, Safari, Opera). Legacy browsers won’t get left out, since our CSS3 pages can degrade gracefully to square corners, flat-color backgrounds, etc. Additionally, we can use browser-specific stylesheets that include plain old image support for key design elements that shouldn’t degrade.
CSS3 makes drawing elements with CSS a … Read more…
February 10th, 2010
1. Define local variables
Simply put, the deeper the engine has to dig into this … Read more…
December 22nd, 2009
Appending a stylesheet is better for performance when styling 15 or more elements.
CSS allows you to leverage pseudo-classes and define styles with the simple a:hover selector instead of both onmouseover and onmouseout event listeners.
September 14th, 2009
Known for publishing resources for the latest development trends, Packt Publishing has recently released an updated version their jQuery book: Learning jQuery 1.3, by Jonathan Chaffer and Karl Swedberg of Learning jQuery (the website). This new resource provides an excellent introduction to jQuery as well as going into detail on some of its finer topics. I’d highly recommend it for anyone who is fairly new to jQuery—it will give you a great head start in … Read more…
August 12th, 2009
My favorite thing about web development is the wide variety of skills it uses. Being a good developer means staying on your toes and always learning, because there are so many important skills and these are constantly changing.
Here’s a checklist of 10 skills that are some of the most important for good web developers to have. These focus a bit on front-end skills, but they apply to all developers:
June 15th, 2009
YouTubin’ is a jQuery plugin that makes embedding 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
May 7th, 2009
Contact-Pop is a jQuery plugin that makes contact forms with grayed out overlays incredibly easy. The basic script grabs any links that point to your contact page and flags them for the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.
While there are a lot of options for producing grayed out overlays in jQuery, Contact-Pop provides a more robust and specialized solution for in-page contact forms. The main advantage is ease of use: simply flag any links to your current contact page by href or jQuery selector, and ContactPop does the rest. Combining this simplicity with a plethora of customizable options, Contact-Pop is a useful plugin for … Read more…
March 24th, 2009
It’s time for developers to stop complaining about web typography. Custom font embedding has been around for years, and it has finally gotten to the point that typography nerds can be equally happy with the fonts on a website as they are with the Photoshop comps. Many of the things that were a total pain to support previously have become a piece of cake. Leading, kerning, and all the major typography buzzwords have been handled for some time. Even drop shadows and Photoshop-style font rasterization options such as ‘strong’ and ‘crisp’ are now fully supportable.
So let’s make sure that we don’t become dinosaur developers, and get up on these modern methods of custom font embedding.
January 30th, 2009
When I started developing I was fortunate enough to have an experienced friend who pointed me to all the right articles, websites, etc. The right tools make all the difference and this educational jumpstart was exactly what I needed to hit the ground running.
1. Mozilla Developer Center