I’m using Google CDN to load my Ajax libraries specifically jQuery and jQuery UI. Its been working great but I’m often annoyed that I have to load Yahoo!’s YUI-CSS files from the yahoo CDN. However I recently found that I did not need to do this. Google also maintains the YUI-CSS files which can be accessed using the following URL:
http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css
which is equivalent to:
http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css
Since DNS lookups are cached, keeping the number of domains to a minimum gives you a small performance boost.
“The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people’s names to their phone numbers. When you type www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server’s IP address. DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname. The browser can’t download anything from this hostname until the DNS lookup is completed.”
Read more at Yahoo!
Tags: Ajax, CDN, CSS, YUI-CSS
Creating rounded corners boxes proves a fairly difficult challenge. While there are numerous elegant solutions to this problem for the purposes of the design proposed for ACS.org Release 2, none of these solutions was ideal.
Both spiffy corners and nifty corners are great solutions. However, I needed to consider what might happen when user added alot of boxes to a page. How would these JavaScript heavy solutions perform? Also there is the issue of users who have disabled JavaScript in their browsers. I wanted a solution which could swing both ways. A solution which could be created using CSS only or be applied with JavaScript. Finally, I want rounded corners for a designer. I wanted a solution which could be custom themed one in which the corners could all be different, so of course this means using images for the borders and the corners.
Custom Corners Demonstration
A few notes…
First I’ll be updating this post soon with some graphics and instruction, but for now just go here
Custom Corners Demonstration.
Also, I ran across this post from 465 Berea St Transparent custom corners and borders, version 2
Anyhow, that technique seems very close to my own. I’ll update this post with the differences once I’ve had a chance to see how my technique differs from Roger’s.
I was googling for some inspiration for this website when I discovered Noah Stokes. He may be the best designer in the whole interweb thingy. Check him out at http://noahstokes.com while I pack my things and start looking for a new profession.
Tags: humor, portfolio, Website
A couple of weeks back we took our latest website site design to the annual conference which my employers host. This is a pretty well attended event which takes place over three days. I was told that 14,000 people came to the event this year. A healthy number by my standards and a great opportunity to conduct user testing.
Continue Reading »
Tags: design, testing
Yahoo Astra is Yahoo’s answer to the components that are missing from flash, such as: tree menu, alert windows, carousel, charts, auto suggest, menu, menu bar, tab bar and layout managers.
Many of these elements can be found in Flex Flash Builder, but that won’t do you much good if you are developing in the flash IDE.
I’m using these components in a few projects I’m working on at ACS. By using Astra I’m getting the not insignificant benefit of standing on the shoulders of some very smart and accomplished programmers. Yahoo Astra components have numerous features which accommodate most common situtations and the components can of course be extended to fit your sites specific needs.
You can find Yahoo Astra at: http://developer.yahoo.com/flash/astra-flash/
There seems to be a lot going on with flash this past week. Adobe has posted Flash Builder 4 on labs along with Flash Catalyst aka Thermo. This is seems like a good time to check out labs.adobe.com
Tags: ACS, American Chemical Society, design, flash, My Work, Website, Yahoo! Astra
This video demonstrates using jQuery to select checkboxes and mark them checked. Also covered is selecting a group of related checkboxes using jQuery’s filter.
Continue Reading »
Tags: jQuery
This video tutorial demonstrates how to modify CSS using Firebug for Firefox. I will explain how to use firebugs inspect feature to review your websites CSS and then how to update the CSS and see the changes in realtime. Finally the video demonstrates getting the new CSS you develop in Firebug, back into you code editor.
I’m a long time DW CS4 user but I’ve worked firebug into my workflow over the past year. This is a great tool, you shouldn’t miss it.
Be sure to download Firebug from http://www.getfirebug.com.
Continue Reading »
Tags: CSS, Firebug, Tutorials
The following tutorial demonstrates how to use a toggle button to animate and fade some text in and out with jQuery.
Continue Reading »
Tags: jQuery, Tutorials
Watch a video tutorial to get started with jQuery. I will cover a few of the basics in this video.
Continue Reading »
Tags: jQuery, Tutorials
Hello and welcome to my site, which represents highlights from my past 10 years of work as a graphic designer and art director. During my time in the industry, I’ve been fortunate to work as a designer and developer for – and with – some great people.
Continue Reading »
Tags: My Work, Website
