Archive for February, 2009
|GMail If Statements
Thursday, February 26th, 2009
Last night I went to the Celtics/Clippers game in LA. Boston lost, but it was a great game; right down to the wire. Anyway, that’s not the purpose of this write–up.
When I got home, I uploaded the pictures and e–mailed them out to my family (as I do). I sent them out to dad, mom, sister, and my uncle.
I wrote out the e–mail, and at the end I wanted to thank my Uncle for the tickets, but I thought it would be weird for the rest of the people to see “Thanks for the tickets uncle Jim” at the bottom of the e–mail. So instead, I wrote a second e–mail thanking for the tickets. I know e–mail is pretty "green", but I found this to be a very fixable issue to save that second e–mail from clogging up inboxes.
This actually happens to me quite a bit for some reason, and most of the time I just don’t send the second e–mail. So I got to thinking and I’d like it if GMail (the masters of web they are) could implement some sort of conditional statement to section off an e–mail.
The GMail If Statement:
{if:recipient="myuncle@example.com"}
Thanks for the tickets!
{/if}I could have e–mailed Google about this, but in the past that’s never worked so I thought I’d write something up and turn to the community about it.
Anyway, I think this is a cool idea, if you agree and think it’s a feature that could benefit you in GMail, please leave a comment, share, digg, whatever. And maybe it’ll make it’s way back to Google.
Even if it’s only applicable to GMail recipients, could be cool and a simple feature to add in. I’d rather see it as a GMail feature than a Greasemonkey script, but hey… I’d use it either way!
Tags: email
Posted in Web Development | 6 Comments »
This Week in Links 2/18
Wednesday, February 18th, 2009
Surfin’ Safari: CSS Animation
Personally, I think animation should be left to JavaScript, but this is actually pretty neat, you have to download the open source version of WebKit to see it, but it’s definitely worth a look into the future of CSS.
Get Your Flickr ID
I’m currently building a refreshed version of cssKarma.com and I want to display my Flickr photos on the site, but I couldn’t find my damn ID to grab the JSON feed. This is a neat little app that can quickly get your Flickr ID.
20 Tips for better Conference Speaking
Cameron Moll lists out 20 great points on how to grab your audience while speaking. Since I know I have this problem from time to time, I thought this was an excellent read and very share–worthy.
Aviary
Aviary is like an online version of PhotoShop. But that’s not why they’re on this list, I think I’ve actually posted this link before; but now they have a real slick new navigation menu that I LOVE. Check this out, it’s very interesting.
Something else to read over: XRDS
Tags: CSS, flickr, json, navigation, public speaking
Posted in News, Web Development | 2 Comments »
Framing an Image
Monday, February 9th, 2009
I’m not sure exactly how well known it is, but you can put a background image on any HTML element… even an image. I don’t think I’ve ever seen it done on a live site before, but it can be very useful for creating an image template for repeated use; without having to do a ton of photo editing. Like in a portfolio or image gallery.
The goal of this post is to show how you can display a decorative frame around an image with minimal markup (just your img element, and maybe a class).
The first thing I like to do when doing any serious CSS for an image is set the display to block. This allows us to do a little more with it since inline elements do have some limitations on them. So let’s do that:
CSS
img{
display:block;
}Next, we set our background image to the img. I chose a polaroid
CSS
img{
display:block;
background:url(polaroid.png);
}Then set our padding accordingly so the background image shows through, I also floated it left, for some reason.
CSS
img{
display:block;
background:url(polaroid.png);
padding:19px 25px 80px 17px;
float:left;
}And there you have it, a quick and easy way to add some *pop* to images on your site.
Tags: CSS
Posted in Web Development | 10 Comments »
Validating with WAI-ARIA
Thursday, February 5th, 2009
I was reading Validating WAI-ARIA in HTML and XHTML. Since Roger has commenting turned off on his site now, I thought I’d write up a quick post with some thoughts on this.
For those who don’t know, ARIA is a type of accessibility for Ajax apps (Accessible Rich Internet Applications). And WAI stands for "Web Accessibility Initiative". You can assign roles to your HTML elements to make it clearer to a screen reader what exactly the purpose of an unordered list is (unordered list is just an example, you can apply roles to many elements).
The example that keeps creeping up is the tree menu. Without ARIA, the tree menu is just an unordered list of links, and doesn’t speak to the actual function of menu at all:
<ul id="treemenu">
<li>Home</li>
<li>Contact</li>
<li>Articles
<ul>
<li>Validating WAI ARIA</li>
<li>Where I Get My Nws</li>
</ul>
</li>
<li>Lab</li>
<li>Portfolio
<ul>
<li>CEO</li>
<li>Globalization
<ul>
<li>Google Maps</li>
<li>Google Charts</li>
</ul>
</li>
</ul>
</li>
<li>Research</li>
</ul>This is fine, and perfectly accessible, but we can enhance it with ARIA:
<ul id="treemenu" role="tree">
<li role="treeitem">Home</li>
<li role="treeitem">Contact</li>
<li role="treeitem">Articles
<ul role="group" aria-expanded="true"/>
<li>Validating WAI ARIA</li>
<li>Where I Get My Nws</li>
</ul>
</li>
<li role="treeitem">Lab</li>
<li role="treeitem">Portfolio
<ul role="group">
<li role="treeitem">CEO</li>
<li role="treeitem">Globalization
<ul role="group">
<li role="treeitem">Google Maps</li>
<li role="treeitem">Google Charts</li>
</ul>
</li>
</ul>
</li>
<li role="treeitem">Research</li>
</ul>A screenreader (with ARIA support) will know that this is a tree menu, where all the tree items are, and, in this case, that the tree group "Articles" is expanded.
So that’s a quick overview of ARIA, there’s a lot more to it, and I encourage everyone to do a little research next time you’re building that killer Ajax app; because it’s very cool stuff.
Anyway
In Roger’s article he talks about how ARIA doesn’t validate in our (X)HTML, which is true, you’ll fail validation if you use ARIA.
To remedy this, he offers up a solution of creating custom DTDs. This will technically work fine, but who wants to go through the trouble of writing a custom DTD? I know I don’t.
A few weeks ago I was at CalWAC in Long Beach, CA (a web accessibility conference) and sat in on an ARIA workshop by James Craig from Apple. He talked about the validation problem as well. And it’s very easy to get around without using a custom DTD.
Any current (up to date) screenreader & browser with ARIA support will read through the DOM and all the elements you’ve manipulated with JavaScript, so we can simply add these ARIA roles with some JavaScript and keep our XHTML validating just fine. And it makes perfect sense since ARIA is meant for rich internet apps that are heavy in JavaScript anyway.
I’d give this a try before creating a new custom DTD, but don’t take my word for it. Try it out for yourself.
Some more ARIA resources
Tags: accessibility, wai aria
Posted in Web Development | 2 Comments »
