Posts Tagged ‘best practices’
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…
Tags: best practices, conferences, cross-browser, CSS, css3, front-end, html5, web design, webdev
Posted in CSS | 1 Comment
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…
Tags: best practices, cross-browser, CSS, css3, rendering, UI, web design, webdev
Posted in CSS | 14 Comments
February 10th, 2010
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 Javascript optimization is by no means black-and-white, here’s a list of 10 tips from Nicholas’ talk that will help you write Javascript that really flies.
1. Define local variables
When a variable is referenced, Javascript hunts it down by looping through the different members of the scope chain. This scope chain is the set of variables available within the current scope, and across all major browsers it has at least two items: a set of local variables and a set of global variables.
Simply put, the deeper the engine has to dig into this … Read more…
Tags: 10 tips, best practices, DOM, front-end, javascript, jQuery, loops, optimization, performance, scope, webdev
Posted in 10 Javascript Performance Tips, javascript | 21 Comments
December 22nd, 2009
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 with Javascript styling. Compare CSS’s simple float: left to Javascript’s style.styleFloat = ‘left’ and style.cssFloat = ‘left’.
-
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.
There are a couple ways to append a stylesheet. Although it’s usually best to attach an external stylesheet, there are times when you need to build a stylesheet on the fly with Javascript. Let’s walk through the code we’ll need to append … Read more…
Tags: append, best practices, cross-browser, CSS, DOM, front-end, javascript, on-the-fly, unobtrusive, web standards, webdev
Posted in front-end | 7 Comments
September 14th, 2009
For the past couple years jQuery has been gaining in popularity, from a hot script with easy CSS selectors released by John Resig in 2006, all the way to jQuery 1.3.2, probably the most widely used Javascript library today. The jQuery core has been constantly expanding, offering new methods and performance tuning with every release, in addition to the wide variety of jQuery plugins that are released almost daily.
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…
Tags: best practices, books, jQuery, resources, reviews
Posted in front-end | 1 Comment
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:
(more…)
Tags: apache, back-end, best practices, checklists, cross-browser, cyber law, debugging, education, front-end, image processing, javascript, optimization, regex, SEO, version control, web standards, webdev
Posted in webdev | 18 Comments
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
Tags: best practices, clean markup, downloads, jQuery, plugins, unobtrusive, video, youtube
Posted in front-end | 13 Comments
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…
Tags: AJAX, best practices, blog, CSS, customization, forms, front-end, javascript, jQuery, PHP, plugins, unobtrusive, web design, web2.0, webdev
Posted in webdev | 103 Comments
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.
In this article we'll cover all types of font embedding, from older image replacement methods to embedding fonts with Flash, as well as native browser methods and even full Javascript … Read more…
Tags: best practices, cross-browser, CSS, flash, front-end, ImageMagick, javascript, licensing, typography, w3c, web design, web history, webdev
Posted in front-end | 29 Comments
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.
Now that I’ve gathered a good deal of Javascript knowledge and used a wide variety of Javascript resources, I’d like to share these so that others can experience the same benefit I did. And don’t stop reading if you already know Javascript inside and out: there’s resources here for all skill levels, from noob to pro.
1. Mozilla Developer Center
The Mozilla Development Center should be your starting point for all things Javascript.
Beginners should start with the Core Javascript Guide. Javascript can be a really confusing language at first and going through each of these pages will make you comfortable with Javascript’s peculiar syntax … Read more…
Tags: best practices, books, education, front-end, javascript, jQuery, resources
Posted in front-end | 9 Comments
