nathan jara

A while ago, I posted about adding my latest read articles from Google Reader. Well, since then, Google changed some things, adding a little thing called Google+, thus leaving my reader feed unfed. Rather than reworking the Google feed, I’ve decided to replace it with my Twitter feed. So now, just to the right, you’ll find my latest twotes (hey, it’s a word according to Urban Dictionary).

Yep, I joined Twitter. I held out for a while, not sure I wanted to join in all the 140 character fun. But after just observing others’ posts for a few weeks, I found I understood why tweeters are tweeting everywhere everyday. Number one, it’s a great digest for information. Following some of my favorite magazines and news sources, you get links to the latest and greatest without having to search. The information just comes to you. And it’s fun! Following your family and friends lets you connect without the clutter and distraction.

I recently added a new feature to my website. The “My Reads” section to the right contains the latest articles that I found interesting on Google Reader. The articles I most recently shared will show up here. This feature is something I’ve been wanting to add for a while now and I started looking at plugin’s to do the work for me, but then I remembered, “Hey! I’m a developer. I should just do it myself.” A little PHP research let to the quick snippet below explaining a built-in WordPress function that made things super easy. Just plug in my Google Reader sharing feed URL and away we go.
<?php
include_once(ABSPATH . WPINC . '/feed.php');
$feed = fetch_feed('http://www.google.com/reader/shared/nate.jara');
$feed_items = $feed->get_items( 0, $feed->get_item_quantity(5) );
if ( $feed_items ) {
echo "<li><h2>My Reads</h2><ul>";
foreach ( $feed_items as $item ) {
echo "<li><a href='" . $item->get_permalink() . "' title='" . $item->get_title() . "' target='_blank'>" . $item->get_title() . "</a></li>";
}
echo "</ul></li>";
}
?>

If you haven’t heard the latest Buzz, Google recently released its Facebook killer, Google+. The Google Plus Project is the technology giant’s all encompassing foray into the dangerous world of social networking. If you were lucky enough to get an invite to the initial beta testing period, you’ve already monkeyed around with Circles, Sparks, and Hangouts. While I haven’t jumped into all the new fancy pants features, I have to say I’m liking, no Facebook pun intended, the Circles feature most. Circles basically allow you to group your Google+ friends into different categories of your choosing. You can place all your closest chums in your Friends circles while keeping work buddies in a Coworkers circle. The best part about this feature is that when sharing a post, comment or message, you can select the particular person or persons with whom you want to share that post with and not always everyone under the Facebook sun. I think the customization and personal choice of who gets to see what with Circles is an awesome move by Google. As one who has complained about Facebook’s approach in the past, it’s good to see a company taking the user’s choice into account from the get-go.

I am surprised, however, that there hasn’t been more hullabaloo about this categorization aspect of Circles. I thought for sure we’d be hearing people complaining that this “putting people into circles” business (insert whiny voice here) is unfair and will hurt people’s feelings because everyone should be equal. I’m glad there hasn’t been such comments, or at least I haven’t seen any, because I think this feature is needed. When it comes to social groups, we all have people we’re closer to and not so close to. People we want to share more personal things with and those that we just want to say “hey!” to every now and then. I think Google+’s Circles reflects more realistically our offline social lives.

If you agree, ask around and demand an invite from a pal. It’ll be interesting to see how Google+ progresses and grows over the next few months and if any Facebookers will jump ship for the new web hotness or just double up their social worlds. I doubt the Madelaine Zammits of the web will be coming aboard, but I’ve definitely tested the waters and am feeling much more relaxed. Heck, even the Zuck-man himself took a dip. +1 Google, +1.

If you haven’t already, and I’m sure you have, you should definitely check out the new and improved look of the American Eagle Outfitters website. This past week, all three of the American Eagle brands’ websites received a redesign with a sweet new look featuring side navigation, dynamic category filtering, updated search capability, an interactive shopping bag, and a totally awesome product detail page ;) The new look and features provide a more streamlined shopping experience and get you to what you want faster. Check it out and let me know what you think!

For about a week and a half now, I’ve been fighting with WordPress. While I really like using the tool, it’s been very frustrating when trying to use some new HTML5 web elements, specifically the HTML5 video tag. I mentioned my first foray into the latest web language addition a while ago in a past post and tried again with my previous post. Out of the box, WordPress’ post editor doesn’t allow you to enter any HTML elements other than the specific elements and attributes of those elements defined within a file called kses.php. This means that if you try to add a <video> tag to the HTML area of the post editor, for example, flip back to the visual editor, your spiffy new elements are kaput. Tears. Sadness. Frustration.

The kses file basically tells WordPress which HTML elements are safe for blog post entries. Anything other than what’s defined here will be torn asunder. (See Otto’s post for a more detailed description.) Many queries to the all powerful Google resulted in this post by Rhys Burnie for a solution to my quandary. Rhys’ code basically creates an addendum to the allowed HTML elements defined in the kses file. The additional elements and their attributes are then plopped into the filter used for the WordPress editor, called tinyMCE, before it’s initialized. The additional PHP code can then be added to your theme’s functions.php file, a quick FTP upload, and you’re off! Pretty slick, eh?

I found, however, that Rhys’ element list wasn’t quite up to date, most likely because the HTML5 spec has changed since the post was made last year. I added some additional element attributes, particularly for the video tag. You can see the attributes for each element noted by [#|attribute|attribute|etc....] on the various lines. Here’s the code:

//extending valid elements
function extend_valid_html5($init) {
	//Standard attributes
	$atts = 'role|accesskey|class|contenteditable|contextmenu|dir|draggable|hidden|id|item|itemprop|lang|spellcheck|style|subject|tabindex|title';
	$html5Elements = array(
		'article[#|cite|pubdate]',
		'aside[#]',
		'audio[#]',
		'canvas[#]',
		'command[#]',
		'datalist[#]',
		'details[#]',
		'figure[#]',
		'figcaption[#]',
		'footer[#]',
		'header[#]',
		'hgroup[#]',
		'mark[#]',
		'meter[#]',
		'nav[#]',
		'output[#]',
		'progress[#]',
		'section[#]',
		'summary[#]',
		'time[#|datetime]',
		'video[#|src|poster|autoplay|loop|controls|width|height|type|style|id|preload]',
		'param[#|name|value]',
		'source[#|src|type]'
	);
	if(!isset($init['extended_valid_elements'])) {
		$init['extended_valid_elements'] = '';
	}
	$init['extended_valid_elements'] .= str_replace('#',$atts,implode(',',$html5Elements));
	return $init;
}
add_filter('tiny_mce_before_init', 'extend_valid_html5');

Rhys also gives mention to Nick Gallagher’s approach to solve the HTML5 element issue, which I also tried, but found the kses modification technique to work more successfully. An additional note, if you plan on giving the whole thing a whirl: I found that even by adding all of the attributes for the video tag above, the editor was still stripping out the controls and preload attributes. By HTML5 definition, so far, these attributes can be used by declaration only, as follows: <video controls width=”640″ height=”360″ preload>. But the gosh darn editor stripped out these anyway. Trial and error found that if you add these declarations with values set: <video controls=”true” width=”640″ height=”360″ preload=”auto”>, everything stays put :) An additional additional note, don’t forget to update your doctype to HTML5 :P

For more info on the video tag, check out Dive into HTML5 and Camen Design.

Sooo, I finally beat the system. And I feel great. And now I can post with HTML5 video galore and be accessible all around and everyone can enjoy my multimedia-tastic posts with the browser of his or her choice. Without silly Flash. You can use Chrome. Or Safari. Or Firefox. Or even Opera. I guess you can use IE too. I’m falling back to a Flash player if you’re still using that silly browser. Enjoy.

(At least until WordPress releases an update that fixes the problem in core and makes this fix obsolete  :P, which according to their bug tracker, will be the case. ;)