Making the Website More Accessible with HTML5 & CSS3

Presented at the Amigos Library Services’ HTML5 & CSS3 Online Conference a couple of weeks ago. It was recorded, but the recordings are not public, so instead, I’ve included my deck and a slightly edited version of the script that I used.

Continue reading “Making the Website More Accessible with HTML5 & CSS3”

code4lib Cool Tool Day

So inspired by the ASIS&T Cool Tool Day, I thought it’d be neat to do one of these since there weren’t many volunteers to do lightning talks/presentations at the code4lib Toronto meetup this time around. Our attendance was a little… paltry, but we had some great presentations! Here are my notes from the session.

Presented by @waharnum

soapUI

  • working with REST based web services
  • testing automation tool for web services
  • best for building with other API
  • autogenerate stubs using WSDL
  • interface between internal systems
  • good for documenting web services, code style with examples
  • normally, mostly used for unit testing

Trello

  • virtual card based whiteboard
  • flexible for planning based
  • collaborative
  • great usability/UI
  • even has mobile apps

Mustache Templates

  • maintaining HTML email templates
  • also works as a crazy text editor for nerds

XSL Transforms plugin in Firefox

  • local reporting
  • anything XSLT with just a few security restrictions
  • e.g. SVN reporting

Presented by @adr

ShowOff

  • cross platform presentation
  • push from laptop to another computer

Sidenote: Other Presentation Tools

Presented by @ruebot

VIM Plugins

  • pathogen – linking for VIM plugins to automatically load VIM plugins
  • nerdtree – pull files quickly by displaying directory/tree

Presented by Pomax

Thimble HTML/CSS Live Web editor

  • teach anyone (kids, adults) HTML and CSS
  • use existing projects to make it fun!

FlickrFindr

  • easy inline flickr search of CC images
  • attribution in alt text

Presented by me

F.lux

  • monitor hue changer, supposedly to help people sleep better by telling your body what time of day it is

That’s it! Hope to do another one of these or lightning talks next time.

Book Review: HTML & CSS: Design and Build Websites by Jon Duckett

I don’t normally do book reviews, but Jon Duckett’s HTML & CSS book was brought to my attention via twitter and it looked interesting, so I thought I’d give it a read.

HTML & CSS Book Cover

If you’re the type that was discouraged from learning basic web programming because of the manual-like books, then I would definitely recommend this book. The information is presented in very visual ways and while there are a few pages here and there that have nothing but code on them (for full examples), almost every page has an image of some sort, whether as explanation or for decorative purposes.

While there are a couple of concepts I wish were explained in a little more detail with visuals (such as CSS selectors), I appreciate that Duckett will discuss deprecated tags and elements, which are still commonly seen, and point out which browsers do not support certain properties.

He also provides lists of practical websites or tools to use including commercial and open source alternatives. Code and extras can be found on the website, which can be useful even for those who never crack open the physical book.

The Conclusion

It’s what it purports to be. So, I highly recommend it for beginners and maybe even those that want an easy to digest review (it’s very easy to skip sections you feel you already know).

Modifying WordPress Comments Form Fields: Beyond the CSS

I ended up playing around with the CSS some more too to make the form even smaller, but I was also asked to change the form fields and decided to put in some placeholders. While the WordPress documentation for comment_form is pretty good, the example doesn’t clearly tell you how to change form fields. It’s possible I find it less than intuitive because I’m not a programmer.

In my case, I wanted to change the title from “Leave a Reply” to “Leave a Comment”. I also wanted to change the form fields to have placeholder text and make the comments box smaller.

Changing it Once

If you only want to change it in the one file, you can specify the new values just above where you call comment_form().

Let’s start with changing the easy stuff. Much like the WordPress example, just make an array with whichever values you would like to change from the default, and call the comment_form function with your array, which in this example, the form header and comment field are changed.

//for long defaults, such as the comment_field, I suggest copy/pasting the default and then modifying it
$comments_args
= array(
‘title_reply’ => ‘Leave a Comment’,
‘comment_field’ => ‘<p><label for=”comment”>’ . _x( ‘Comment’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” placeholder=”Eggy approves!” cols=”45″ rows=”4″ aria-required=”true”></textarea></p>’
);
comment_form($comments_args);

Changing the other fields makes things a tad more complicated. For other fields, you need to specify another array, then apply your new values in the comments array.

//required variables for changing the fields value
$commenter = wp_get_current_commenter();
$req = get_option( ‘require_name_email’ );
$aria_req = ( $req ? ” aria-required=’true'” : ” );

//name the array whatever you want; I strongly suggest copy/pasting the default then modifying it
$new_fields = array(
‘author’ => ‘<p>’ . ‘<label for=”author”>’ . __( ‘Name’ ) . ‘</label> ‘ . ( $req ? ‘<span>*</span>’ : ” ) .
‘<input id=”author” name=”author” type=”text” placeholder=”Eggy the Ram” value=”‘ . esc_attr( $commenter[‘comment_author’] ) . ‘” size=”30″‘ . $aria_req . ‘ /></p>’,
’email’ => ‘<p><label for=”email”>’ . __( ‘Email’ ) . ‘</label> ‘ . ( $req ? ‘<span>*</span>’ : ” ) .
‘<input id=”email” name=”email” type=”text” placeholder=”eggytheram@ryerson.ca” value=”‘ . esc_attr(  $commenter[‘comment_author_email’] ) . ‘” size=”30″‘ . $aria_req . ‘ /></p>’,
//in this case, we’re applying filters, so it changes all the values. If ‘url’ is not specified, then it gets removed.
);

$comments_args = array(
‘fields’ => apply_filters( ‘comment_form_default_fields’, $new_fields ),
‘title_reply’ => ‘Leave a Comment’,
‘comment_field’ => ‘<p><label for=”comment”>’ . _x( ‘Comment’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” placeholder=”Eggy approves!” cols=”45″ rows=”4″ aria-required=”true”></textarea></p>’
);
comment_form($comments_args);

For a full list of default values in comment_form(), take a look at the Codex Function Reference.

Changing the Defaults

To change the fields for all comment forms, meaning it will change the default values and will be applied whenever you call comment_form(), you can change the defaults using a filter in the functions.php file.

//name it whatever you want
function alter_comment_form($new_defaults) {

//required variables for changing the fields value
$commenter = wp_get_current_commenter();
$req = get_option( ‘require_name_email’ );
$aria_req = ( $req ? ” aria-required=’true'” : ” );

//name the array whatever you want
$new_fields = array(
‘author’ => ‘<p>’ . ‘<label for=”author”>’ . __( ‘Name’ ) . ‘</label> ‘ . ( $req ? ‘<span>*</span>’ : ” ) .
‘<input id=”author” name=”author” type=”text” placeholder=”Eggy the Ram” value=”‘ . esc_attr( $commenter[‘comment_author’] ) . ‘” size=”30″‘ . $aria_req . ‘ /></p>’,
’email’ => ‘<p><label for=”email”>’ . __( ‘Email’ ) . ‘</label> ‘ . ( $req ? ‘<span>*</span>’ : ” ) .
‘<input id=”email” name=”email” type=”text” placeholder=”eggytheram@ryerson.ca” value=”‘ . esc_attr(  $commenter[‘comment_author_email’] ) . ‘” size=”30″‘ . $aria_req . ‘ /></p>’,
//in this case, we’re applying filters, so it changes all the values. If ‘url’ is not specified, then it gets removed.
);

$new_defaults[‘fields’] = apply_filters(‘comment_form_default_fields’, $new_fields); //changing default fields to the new values in your array
$new_defaults[‘comment_field’] = ‘<p><label for=”comment”>’ . _x( ‘Comment’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” placeholder=”Eggy approves!” cols=”45″ rows=”4″ aria-required=”true”></textarea></p>’;

$new_defaults[‘title_reply’] = ‘Leave a Comment‘; //changes the form header text

return $new_defaults;
}

add_filter(‘comment_form_defaults’, ‘alter_comment_form‘); //basically tells it to replace the existing defaults with your new defaults value (where applicable)

If you only want to change the fields or if you want to do it separately from the comments_form_defaults (especially if only changing one field), then you can set new values in a similar way to the new defaults, say:

function alter_comment_form_fields($new_fields) {
    if(isset($fields[‘url’]))
unset($fields[‘url’]);
return $fields;
}
add_filter(‘comment_form_default_fields’, ‘alter_comment_form_fields‘); //make sure to use comment_form_default_fields

Note: In this case, since we’re using the add_filter for the fields (instead of apply), it will only change the values specified.

Since this example only changes the url field, I could’ve actually used the specific field filter (i.e. comment_form_field_url) instead. Near the bottom of the Codex Function Reference page is a list of filter hooks related to comment_form.

The Result

As I mentioned, I edited the CSS further since my last post on editing the TwentyEleven comment form, so now it’s even smaller. It’s now 124px shorter and 84px less wide than my last version for a total of 367px shorter (and 84px less wide).

WP Comments Form Edited version 2

I was also recently reading about adding ‘character’ or ‘personality’ to a website and thought having fun placeholder text would be one small way to do that. (Eggy the Ram is the university’s mascot.)

How Hard Can Finding a WordPress Plugin Be? Part 2: Custom CSS & Social Media Sharing

Sadly, this was also harder than I expected. Honestly, in this case, the only requirement I had was that it worked.

Custom CSS Plugin

I tested a lot of plugins (pretty much every one I could find), many of which didn’t work and were simply incompatible with the newest version of WordPress. Here are some that worked:

  • My Custom CSS – I liked that it colour codes and has line numbers, but it broke when I got over 700? lines. New classes that I added would be empty. I’m also not a fan of the fact that it just adds it at the top of the page instead of as an external file.
  • Custom CSS Manager – Pretty much exactly like My Custom CSS, but I haven’t broken it. Still unhappy that it doesn’t load an external file instead though.
  • Your Custom CSS – Simple, but seems to work just fine, even puts your code into an external file, which I like. Didn’t test it to 500+ lines though like I did with the previous ones.
  • Best Custom CSS – Works fine, can edit CSS files through built-in WP editor, only doing it that way isn’t very intuitive. It also presets CSS files instead of allowing you to set your own unfortunately.
  • Site Specific CSS – Turns out, most CSS plugins only work in a single site since they write to an external file and the plugin always calls the same external file. Since we’re running a Multi-Site install, I ended up with the site specific CSS plugin. It’s simple (all it does is load a CSS file you link to), but it works! Since it’s just a link, you have to edit the files externally or put it into your theme root folder (or plugin folder) to edit it in the built-in editor.

I rejected a couple of CSS plugins that seem to be no longer in development (such as WordPress.com Custom CSS) even if they (mostly) work and I used a combination of how recent there has been an update and whether developers responded to forums posts as a criteria.

Social Media (Twitter, Facebook) Sharing Plugins

On the upside, it was quite easy to find a social media sharing plugin that worked. I did have a couple of requirements for this:

  • Facebook and Twitter required
  • Share buttons (not sidebar widgets) at the bottom of each post (but not pages)
  • Have to be able to turn off the display of shares counters

I didn’t test a lot of them since I found a couple that work, and I was happy with one in particular. Here are the results:

  • Facebook, Twitter, Google Plus One Share Buttons – Works, but does not have as many options the other plugins. I also didn’t like the counters showing above instead of next to the buttons, which would be more compact.
  • Twitter, Facebook, Google Plus One Social Share – This one works great and has a lot of options including a floating box of the share buttons. The problem I had with this one is that you have more than one row of buttons, it goes beyond the div because of the display setting. I reported it, but didn’t feel like hacking it, so I went with the last one.
  • Really Simple Facebook Twitter Share Buttons – This one works great, plus it lets you reorder buttons, and set the width spacing. While the more-than-one-row behaviour isn’t ideal, it works. It also has a via username for twitter. It even comes with a shortcode and selective exclude method.

I’m open to suggestions on better plugins of either, especially CSS ones (for single and multi-site). Next might be form management, but if I can’t find a good free one, I might simply suggest paying for GravityForms (since it’s a one time payment).

UPDATE: Of course, then I finally find out about Jetpack almost all of which is free, including Custom CSS and Sharing. The only downside is that you need a wordpress.com account, and I am not connecting my personal account to work sites.