Categories
Programming Uncategorized

Designing for the world: Color contrast tools

The other day I put a call out for tools to check websites to make sure they are accessible for people with color deficiencies and got back some great responses that I thought I would share. Please note, that I am using the term color deficiency here, rather than color blindness. It’s not meant to be politically correct, it’s meant to be more accurate. Some of these tools also help when designing for people with other visual deficiencies.

Contrast-A is a adobe air app that Allows you to easily Check how two colors look when placed on top of one another and also if they pass Web Content Accessibility Guidelines for contrast in their natural state, and four different common forms of color deficiency. You are able to save color pairs for later reference and export a pdf that explains what level of WCAG2.0 passage it has under normal vision.

Sim Daltonism is a OSX application that allows you to view a portion of your screen as if you are suffering from one of eight types of color deficiency. It is incredibly easy to use, and can be especially handy when you are dealing with very color complex websites.

WorldSpace Fire Eyes is a firefox and firebug plugin that allows for excellent accessibility testing, including color contrast testing. It provides you with a list of concerns related to the page you are looking at, including recommendations from the Web Content Accessibility Guidelines on solutions.

Those three tools are coming in very handy when testing the accessibility of designs and sites. As I look for more and find them, I’ll make sure to share them here.

Categories
Programming Uncategorized

AddThis Blog » Blog Archive » Using HTML 5 to Make the Analytics Charts

I wrote a post today on the AddThis blog describing how we made the new analytics mobile friendly by getting rid of flash and using HTML5 canvas, JavaScript, google charts api and css for all of our charts:

All in all, our charts went from being a clunky, heavy, flash-based monstrosity to being light weight and flexible

via AddThis Blog » Blog Archive » Using HTML 5 to Make the Analytics Charts.

Categories
Programming Uncategorized

Accessibility Camp DC 2010

I spent last Saturday at Accessibility Camp DC learning about some ways to make technology more accessible to the world. Before hand, I knew just a little bit about accessibility, but I’m happy to say that I walked out with a ton of new knowledge and a desire to keep learning on the subject. Some of the highlights for me:

  • Jeanne Spellman from the W3C speaking about standards and the upcoming Authoring Tool Accessibility Guidelines. She also spoke of other important standards that all developers should be aware of when it comes to accessibility. Slides
  • Russell Heimlich (like the maneuver) gave speaking about “”How to Build an Accessible Website from the Ground Up” that was one of the most code heavy speeches for the day. I can’t wait to see his slides online so I can look through them for all the great tips EDIT:Russell shared his slides in the comments below.
  • The Fire eyes plugin is a great tool for accessibility testing. Every developer should have it in there toolkit.
  • UX expert Jimmy Chandler speaking about Integrating Accessibility Into Your Projects.
  • The Able Gamers Foundation had some cool accessible games setup. I was able to play a racing game with my face, much like a quadriplegic would. It gave me a completely different prospective on gaming.

Overall, I’m incredibly happy that I went and can’t wait to continue learning. Big thanks to John Croston and his team for organizing this great event. Hopefully in the next year I will have learned enough to feel comfortable presenting a session at Accessibility Camp DC 2011.

Categories
Code Programming Uncategorized WordPress

Adding a twitter box to the Profile page in WordPress

I haven’t used AIM in years and I haven’t used Yahoo Messager in even longer.  What I do use is twitter.  Therefore, having a box in the WordPress admin for twitter name is better and with some code I wrote for the , super easy.

[php]
add_filter(‘user_contactmethods’, ‘jorbin_user_contactmethods’);

/**
* Removes AIM, YAHOO, and Jabber boxes from profile page and adds Twitter in it’s place
*
*/
function jorbin_user_contactmethods($user_contactmethods){
$new_user_contactmethods[‘twitter’] = __(‘Twitter’);

return $new_user_contactmethods;
}
[/php]

Filtering user_contactmethods is one of the easiest things you can do. All you need to do is return an array where the key is the code based name you want and the value is the public facing name. Easy. As. Pie.

Categories
Code Programming Uncategorized WordPress

Add Role

This simple plugin, built for my WordPress DC Presentation on the Users API adds a role called link master, that gets the capability to edit links and also read private posts and pages and also removes the ability for editors to manage categories.

Categories
Code Programming Uncategorized WordPress

Personalized Read More

Want to make the read more link in WordPress call out the user if they are logged in?  As part of my DC WordPress presentation, i showed that it’s easy as pie and only about 10 lines of code.

Categories
Code Programming Uncategorized WordPress

WordPress Shortcodes for Users and Non Users

One of the plugins I wrote for the DC WordPress group’s meeting on Users / Roles / Capabilities demonstrates how to create shortcode that makes some content only visable by users with a certain capability and other content only visable to non logged in viewers.  You can download Shortcodes for Discrimination (along with the other three ) from google code.  Beyond the jump, I go over the code and an explanation of how it works.

Categories
Code Programming Uncategorized WordPress

Introducing Thirty Ten, my guide to creating a Twenty Ten Child Theme

WordPress 3.0 is introducing a new theme that is light years ahead of Kubrick (also known as the old WordPress default), that looks so good you won’t even mind running it on a live site. In addition to being a beautiful theme in it’s own right, it’s also easy to build upon and create your own child themes for. I’ll show you just how easy it is to make some substantial changes. We are going to move the two column Twenty Ten to a three column theme I’m going to call Thirty Ten.

I’m going to lay out a couple of ground rules for myself when building this theme:

  1. I’m not allowed to override any of the template files with my own version. I want this to be as easy to maintain as possible. This means that I have to use footer.php, header.php and all of the other files.
  2. No output buffers This means I can’t use an output buffer and then regular expressions to get around rule number one.
  3. I want the reader of this article to be able to take and borrow any piece of this theme and use it to modify their own theme Every part of this theme and tutorial is licensed under the GNU public license, just like WordPress

The first step is to create a theme folder and put a blank style.css and functions.php in it. This is where the bulk of the changes are going to come in. into our style.css document we are going to insert our header that looks like:

[css]
/*
Theme Name: Thirty Ten
Theme URI: http://aaron.jorb.in/thirty-ten
Description: A child theme of the 2010 default theme for WordPress.
Author: Aaron Jorbin based on work by the WordPress team
Author url: http://aaron.jorb.in/
Version: 1.0
Tags: black, blue, white, three-columns, fixed-width, custom-header, theme-options, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
Template: twentyten
*/
@import url(‘../twentyten/style.css’);
[/css]

My next step is to follow the sage advice: “good artists borrow, great artists steal” and will use the 3c-fixed.css layout style from thematic. I also need to add a fix to make it work with the current Twenty Ten style in all browsers.

[css]
@import url(‘3c-fixed.css’);
#access{overflow: visible;}
#main{clear: both;}
[/css]

So in four lines of css, I’ve switched Twenty Ten from a two column theme to a three column theme. SWEET!

That’s how flexible twenty-ten is. I want to do more then that though, because that alone is boring. Let’s now move our navigation menu to be above our image. This step we are going to be almost as easy.

[css]
#header #access{
top: -240px;
position: relative;
}
#site-title {
margin:0 0 44px;
}
[/css]

All we are doing this time is making the site-title have a bit more of a bottom margin to bump down the image, and then filling that space with our menu. I also want to make a few cosmetic changes to the default link colors and also change the formatting in the footer a bit (which will make a lot more sense after you’ve read the rest of this tutorial) To do this I added the following css:

[css]
/* Change our default link colors */
a:link{
color:#fdb120;
}
a:visited{
color:#d00c0d;
}
a:hover{
color:#1143d8;
}
a:active{
color:#a67942;
}
/* Modify the footer to allow for a bigger description and nicer looking links */
#site-info{
width:250px;
}
#site-generator{
width: 535px;
}

#site-generator a{
background: none;
padding: 0 7px;
}

#jorbin-link a:link, #jorbin-link a:visited, #jorbin-link a:hover,#jorbin-link a:active {
color:#990000;

}
#generator-link a{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../twentyten/images/wordpress.png) no-repeat scroll left center;
color:#666666;
display:inline-block;
line-height:16px;
margin-left:1px;
padding-left:19px;
text-decoration:none;
}
[/css]

Speaking of the header image, as much as I like the default ones, I want to include some of my own. That’s incredibly easy and leads us to our first additions to the functions.php file.

For this component, Aaron Hockley of Hockley Photography was nice enough to let me use a few of his photos that are available for you to download and use with Thirty Ten. To register some additional headers I’m using the following function:

[php]
add_action( ‘after_setup_theme’, ‘thirtyten_setup’ );
function thirtyten_setup(){

/* Add additional default headers All Photos are by Aaron Hockley of Hockley Photography */
$thirty_ten_dir = get_bloginfo(‘stylesheet_directory’);
register_default_headers( array (
‘lights’ => array (
‘url’ => "$thirty_ten_dir/images/lights.jpg",
‘thumbnail_url’ => "$thirty_ten_dir/images/lights-thumbnail.jpg",
‘description’ => __( ‘Lights by Aaron Hockley’, ‘thirtyten’ )
),
‘train’ => array (
‘url’ => "$thirty_ten_dir/images/train.jpg",
‘thumbnail_url’ => "$thirty_ten_dir/images/train-thumbnail.jpg",
‘description’ => __( ‘Train by Aaron Hockley’, ‘thirtyten’ )
),
‘bridge’ => array (
‘url’ => "$thirty_ten_dir/images/bridge.jpg",
‘thumbnail_url’ => "$thirty_ten_dir/images/bridge-thumbnail.jpg",
‘description’ => __( ‘Bridge by Aaron Hockley’, ‘thirtyten’ )
)

));
}
[/php]

This will add three choices for default headers to your site. It keeps all of the original default headers that come with Twenty Ten. If I wanted to get rid of any, I could use unregister_default_headers and just pass the name of the one I wanted to get ride of. Another option would be to create my own version of twentyten_setup. If you do that, make sure you include all the parts of that function you want to keep.

Another change that I want to make is the read more link. Twenty Ten uses the function twentyten_excerpt_more to make the link say ” …Continue reading → “. I’m going to make my own version that says ” …finish reading ” followed by the blog title. I do this by first adding the following function:

[php]
function thirtyten_excerpt_more($more){
return ‘&nbsp;… <a href="’. get_permalink() . ‘">’ . __(‘finish reading ‘.get_the_title() .”, ‘twentyten’) . ‘</a>’;
}
[/php]

Next I just have to deregister twentyten_excerpt_more and register my own. By adding the following lines to the function thirtyten_setup that I created earlier, I make sure that we remove twentyten_excerpt_more after it’s been created:

[php]
remove_filter( ‘excerpt_more’, ‘twentyten_excerpt_more’ );
add_filter (‘excerpt_more’, ‘thirtyten_excerpt_more’ );
[/php]

The Next change I want to make is to some of the strings. I want to have a slightly unique footer and I also want to change the meta text on single pages. As I learned in mangling strings for fun and profit/by WordPress lead Developer Peter Westwood, using the WordPress internationalization functions allows me to change almost any string in WordPress (or in this case, Twenty Ten). I use the following code for that purpose:

[php]
class Thirty_Ten_Text_Wrangler {
function site_generator($translation, $text, $domain) {
$translations = &get_translations_for_domain( $domain );
if ( $text == ‘Proudly powered by <span id="generator-link">%s</span>.’ ) {
return $translations->translate( ‘Proudly powered by<span id="jorbin-link"><a href="http://aaron.jorb.in">Aaron Jorbin\’s Idea</a></span>, <apan id="hockley-link"><a href="http://www.flickr.com/photos/ahockley">Aaron Hockley / Hockley Photography</a>, and <span id="generator-link"> </span>’ );
}
return $translation;
}
function single_meta($translation, $text, $domain) {
$translations = &get_translations_for_domain( $domain );
// With Tags
if ( $text == ‘This entry was posted in %1$s and tagged %2$s. Bookmark the <a title="Permalink to %4$s" rel="bookmark" href="%3$s">permalink</a>. Follow any comments here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.’ ) {
return $translations->translate( ‘This entry was posted in %1$s and tagged %2$s. It can always be found at <a title="Permalink to %4$s" rel="bookmark" href="%3$s">it\’s permalink</a>. Follow any comments left here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.’ );
}
//Without
elseif( $text == ‘This entry was posted in %1$s. Bookmark the <a title="Permalink to %4$s" rel="bookmark" href="%3$s">permalink</a>. Follow any comments here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.’ ) {
return $translations->translate( ‘This entry was posted in %1$s. It can always be found at <a title="Permalink to %4$s" rel="bookmark" href="%3$s">it\’s permalink</a>. Follow any comments left here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.’ );
}

return $translation;
}

}
add_filter(‘gettext’, array(‘Thirty_Ten_Text_Wrangler’, ‘site_generator’), 10, 4);
add_filter(‘gettext’, array(‘Thirty_Ten_Text_Wrangler’, ‘single_meta’), 10, 4);
[/php]

The final change is that I want to change how my authors page looks, or at least how posts show up on them. Twenty-ten makes it easy for child themes to have their own loop on a specific page type. All it takes is creating a loop-templatename.php  file and inserting your loop there.  So I made loop-author.php file and my custom loop lives there.

If you want to download this theme and use it for your own, you can Download thirtyten here. Also, take a look at to see this Twenty Ten Child Theme in action. And I’ve added all the code to a mercurial Google code site for you to easily make changes to. And finally make sure to comment below if you use it or do something cool with it so I can check it out.

UPDATE: I’ve added the ability to pick which style of three column theme you want.  Check out http://aaron.jorb.in/thirtyten/three-columns-three-ways/ to see the options.  And Follow the Thirty Ten subsite for more changes

Categories
Programming Uncategorized WordPress

Commit: The Story of Writing a WordPress Patch

Hanging out in the #WordPress irc channel or on the wp-hackers mailing list, a question that comes up from time to time is “How do I get a bug patched”. I recently had a patch committed, so I thought I would detail the process from start to finish to help others get an idea of the process. I can’t guarantee that others will have the same experience, or that even I will have the same experience next time, but this was how I had my first substantial patch committed to WordPress.

The process for me started by seeing a post by Jane Wells talking about a few UX enhancements she wanted to see handled during the recent patch sprint. One that I noticed hadn’t received any attention was Showing the status of an admin attempts an e-mail change under the new multisite configuration. I took a quick look at the relevent code and figured this was something I could patch.

Lesson 1: Make it easy for coders and non-coders to see the change

After I wrote my first iteration of a patch, I hopped into #wordpress-dev and Andrew Nacin recommended that I add a screenshot to make it easier for Jane to see the change.  I couldn’t agree more that this was a great idea. After all, why should you need to apply my patch & test it, or understand the code behind it just to comment on it.

Lesson 2: Just because you write the patch, doesn’t mean others don’t have good ideas for it

I then waited till I was in #wordpress-dev at the same time as Jane and brought up the ticket. This led to a conversation between Jeremy Clarke, jane and myself about the best way to let users know. During this time I went thought a few other iterations and shared those on the ticket. We didn’t come to a firm conclusion, and the next morning Nacin commented with a suggestion on the ticket.

Lesson 3: Sometimes one small change leads to another

The next day I once again headed to #wordpress-dev where Jane, Nacin, and I took another stab at it and decided that an inline warning box would give the proper notification without being distracting. While writing the final version of the patch I noticed that all warning boxes automatically moved to the top of the screen. Nacin took ownership of fixing this, made a few minor changes to my patch and committed changeset #13446.  Now not only will users be able to see pending admin e-mail changes, but developers can use the existing UI warnings inline.

Overall, the process to fix this UX bug took four people and multiple iterations.  I want to thank all three others for assisting me. While there are times that errors make it into the released version of WordPress, I hope this story gives you the idea of the effort that the core development team takes to make sure only the highest quality code and user experience for users.

Categories
Code Programming WordPress

WordPress External Cron Plugin

There are plenty of scripts out there that require you to request a page on a daily basis to perform certain tasks. Normally you can accomplish this by setting up a simple cron. And on a good host, that’s easy. But what if your host doesn’t have cron? Well if you run WordPress, you now can use my Hit an External Cron plugin. You can download it from Google Code. It’s a simple plugin that adds an options page under settings to enter the url you need to visit on a daily basis.

Not only am I releasing this plugin under the GPL, but if you continue reading I’ll explain to you everything under the hood.