The Naked Technologist

Photo from justinsomnia
Original t-shirt version

At the Confoo.ca conference in Montreal, Quebec, Mark Pilgrim of Google gave an impressive keynote providing an overview of the current state of HTML 5. The information in this post was inspired by his comphehensive talk. Are you wondering what is currently available in HTML 5 and if you can start using it? Take a look at ishtml5readyyet.com or ishtml5ready.com to get your answer.

If you take a look at ishtml5ready.com in a browser that supports HTML 5 you’ll see that HTML 5 is somewhat ready. That is, some browsers provide some current support for HTML 5. But that shouldn’t stop us from playing around with it right?

HTML5 is a container term used to describe a technology bundle that makes up the new standard. What HTML 5 really encapsulates is HTML 5, CSS 3, and JavaScript all thrown together into the pleasantly marketeering term that is HTML 5. Did you look at those links above in Internet Explorer? Well I’m afraid you’re out of luck for the time being. The A-grade browsers that are currently supporting some of the features of HTML 5 include Safari, Chrome, Firefox and Opera. Still want to use HTML 5 in IE? If you simply put the term “HTML5 elements in IE” (linked directly to Yahoo! Search because I know you all use it right?) into your favorite search engine you’ll get a nice wrapper on how to do this.

Let’s explore a few of the great improvements coming in HTML 5:

Grouping Tags
There are a number of new tags available for all of your tag grouping needs. <hgroup> is used for defining logical groups of tags or sections on your page, <nav> is present to define navigation systems – great for search engines to easily define your site structure. Tags such as <section>, <article> and <aside> can be used for data grouping. Properly using these tags can help you easily define the sections and most important content of your page. This helps search engine crawlers pick up the structure of your website.

Form Elements and Attributes
Forms have received quite a nice overhaul in HTML 5 with new features and methods for defining what data truly is. Let’s take a look at these changes:

• Sliders: Creating a simple slider within a form is as simple as defining <input type=”range” …> – no more JavaScript needed.
• Auto Focus: If you need to autofocus the user directly on a part of your form when they first come to your site (plea: please don’t) then the autofocus parameter of an input field is ready to do the dirty work. Simply use the format <input autofocus …> and you’re ready to go. This standardizes the approach so that websites no longer have to use a level of JavaScript interaction to accomplish the same task.
• Placeholder Text: In an input field, it’s sometimes neccessary to guide your users to input the values you expect, using the value attribute (e.g., add mm/dd/yyyy for them to define a date). This usually involves adding a click event with JavaScript such as this.value = “” to purge the input when the user clicks on it. Then you need some alternate logic to put the placeholder back when the focus is no longer on the input and the user didn’t type anything. This is where the placeholder attribute comes in. Using the form of <input placeholder=”some text” …> the input box will take care of this for you. You have a populated value of “some text.” When the user clicks on the input it disappears, then reappears when the user clicks off of the input and there is no text. Simple yet brilliant. (Currently works in 2 browsers.)
• Calendar Picker: Prior to HTML 5, calendar pickers in forms were non-standard and usually involved some fairly hefty JavaScript components or libraries to build the functionality. In HTML 5, we have a new input type called datetime, used in the form of <input type=”datetime” …>. This generates a standard input form for the user. When a user clicks on it, it pops up a calendar picker widget automatically. Less code is always a win.
• Multiple File Uploader: Extending upon the file type of an input field, a new “multiple” property implementation allows you to specify multiple files for upload and takes the form of <input type=’file’ multiple …>. When selecting multiple files, you should display “N files” in the input box, instead of the single filename. (Currently works only in Safari.)
• Yet More Input Types: There are even more input types that you can logically define. type=”email” and type=”url” are definitions you can explore to define the data that users will input into your forms.

Simply put, forms make sense now. No need to heavily augment a form with layers of visualization and JavaScript just to allow data to be defined as it should be in the first place, or to allow base levels of functionality that everyone uses anyway. If you want to see what your current browser supports, take a look at www.miketaylr.com/code/input-type-attr.html.

Accessibility
HTML 5 has not forgotten about improving web accessibility. ARIA (Accessibly Rich Internet Applications) defines methods for building websites and web applications in a way that make them more accessible to people wth disabilities. One way HTML 5 endeavors to improve ARIA capabilities is through the use of the role=’group’ attribute, which will allow screenreaders to properly define group content. For a more comprehensive look at common ARIA attributes, take a look at dev.w3.org/html5/markup/aria/aria.html or search for “ARIA accessibility” in your favorite search engine.

Web Fonts
From the time I first started developing web applications I knew that font support was a joke and never functioned as it should have (great idea – bad implementation). Well, this fact is no longer true, I am happy to say. Web fonts finally work, allowing you to define your own font faces, even if all browsers have different implementations. For more information, take a look at Paul Irish’s post: Bulletproof @font-face syntax.

Video and Audio

Video is now scriptable, folks. With the new <video> tag, you’ll be able to include a video player, implementing ogv & mp4 formats. You can now use DOM scripting to control video – mute, forward, stop – all through the DOM. The <audio> tag is there as well, to include audio files easily. If you want to see the video tag in action, go to youtube.com/html5 to opt in to HTML 5 standards beta. YouTube will not use the Flash player when video tag support is available in the browser and uses the HTML 5 video player instead. The video tag may be styled in exactly the same way as you would see with the standard Flash video players out there.

Freeform Drawing with Canvas
Have you ever wanted a blank canvas where you could programmatically draw anything within a website or web application? Well there are a number of server-side languages that do this – but have you ever wanted to do this through scripting (with a little bit of embedded JavaScript)? Well that’s where the <canvas> tag comes in. There are many canvas demos available for you to see exactly what can be done with the canvas tag by typing in “HTML5 canvas demos” in your favorite search engine. The code for creating a canvas and working with it is also very simple:

Using JavaScript, you can draw on the canvas:

More Information and Links
We’ve just scratched the surface of HTML 5 and all of the new functionality. There are some great resources available if you want to explore even further:

• Current HTML 5 Draft Standard – http://whatwg.org/html5
• Dive Into HTML 5 by Mark Pilgrim – diveintohtml5.org

A big thanks to Mark Pilgrim for his talk at Confoo. I look forward to seeing the standard expanded and adopted by all the browsers out there.

- Jonathan LeBlanc

No Comments | In: Programming | tags: css3, html5, JavaScript, Programming, Technology. | #

I have been recently working on a trip planner application where I have had to display the next trip that a user has coming up. This involved having to make a comparison between the starting date of the trip and the current date to find the trip that met this criteria. I thought I would share the basic query of how you can do this should anyone need to do accomplish a similar task.

Given the Following:
- My table name is trip_list
- The starting date of the trip (which we will compare) is named date_from
- The dates stored into the date_from field are stored in the format of dd-mm-yyyy

SELECT * FROM trip_list WHERE trip_list.date_from =
(SELECT MIN(trip_list.date_from) FROM trip_list WHERE
trip_list.date_from >= DATE_FORMAT(NOW(),'%d-%m-%Y'))

What I am doing here is selecting all columns in the table where the starting date is equal to the lowest date that is after the current date. At the end of the query I format the output of the current date to be dd-mm-yyyy for comparison since this is an application for the Australia / New Zealand region and that’s their date structure.

That’s all there is to it.

- Jonathan LeBlanc

No Comments | In: SQL | tags: mysql, Programming, SQL. | #

Profile information within a social network (e.g. MySpace, Orkut, YAP, Hi5) is something that users take painstaking amounts of time to input so that they can tell their friends and the world who they are. If a developer is building an application on one of these same platforms, that same profile detail is a gold mine of information that can be obtained to customize and personalize an application. Why would you ever ask a user to input their name, interests or gender if they already have this information freely available on their profile? Having the user re-enter this information is just asking for the user to drop off of your application. Using the knowledge wealth will both decrease user drop rates and make your applicatio more appealing to the masses.

Within a container that supports the OpenSocial 0.8 JavaScript specification, fetching the profile information of a person can be accomplished and customized with several steps.

The first thing we do is call newDataRequest to set up a new information request object within OpenSocial. Once this has been done we create our parameter list which will define what type of information we want to access within the information request. In our case here, we specify that we would like to capture “PeopleRequestFields”, namely a user’s “PROFILE_DETAILS”, and of those profile details we want to return the name and the thumbnail_url to their profile image. We can add in a whole series of profile information here, depending on what the container supports within the profile information specification. We then add to our request a newFetchPersonRequest and specify that we want the “VIEWER” profile (this could also be OWNER) and then input the params we set up to define what data we want from the viewer. Then we just name that request as “viewer_profile” so that we can access it later and send the request. The request function takes the name of the callback function as a parameter.

When the request completes and gets to our callback function, our data is returned to us with the profile information of the viewer presuming that everything completed correctly. In the callback we can call get on the returned data, inputting the name of the request, and then call getData on that. If we want a finer granularity of control over the data that is returned, we can then call the getField function with the information that we want (in this case the viewer name).

That’s all there is to it – with a few calls you now have all the information you need to personalize your application to every users that uses it.

Jonathan LeBlanc

No Comments | In: OpenSocial, Programming | tags: JavaScript, Opensocial, Programming, Social Networking. | #

One of the biggest issues that many people have with the small view of a YAP open application is that the view is cached on Yahoo! servers and can only be updated with manual intervention from either the application owner or the application user. In the past, application owners had a few options for updating this small view. The most common were:

• When the user visited the canvas view of the application the owner would have a setSmallView call set up to refresh the small view of the user (process described here: http://www.nakedtechnologist.com/?p=181. The problem with this is that it requires the user to go to the canvas view. Many users would just view their small view on My Yahoo! so the content of the app was either generic or stale.
• The owner would set up a cron job to update the small view of their app users on regular intervals (process described here: http://www.nakedtechnologist.com/?p=220). The issue with this one is that the content will only be updated at regular times and will be stale for a user in between those times.
• The owner would implement a yml:a tag to call a server-side script to update the small view of the user when the user clicked on the link (process described here: http://www.nakedtechnologist.com/?p=204). This relied on user interaction to function and in many cases links on the small view would need to be added just for this requirement.

Many developers, myself included, opted for a mix of all of the options above. This worked fairly well to mimic a dynamic small view, but having three solutions for a single problem was unwieldy.

Enter the yml:include tag
The purpose of this tag is to dynamically load content onto a page. This tag can be used in both the canvas and small views, but the real benefit to its use is the small view.

I would recommend looking over the documentation for yml:include as there is quite a lot of detail that a developer would find useful: http://developer.yahoo.com/yap/guide/include.html

The features that are most important to note here are:

• insert – if a node id is specified in the insert parameter, the content of the include request will load into that node.
• delay – the amount of time to delay the loading of the content (in milliseconds)

These parameters will help in setting up a dynamic small view for the user. Using these, I’ll go through two examples on how to use yml:include. The first will cover a simple single load case and the second will display how to build a continually updating small view set to update on a specific delay.

Simple Use Case – Single Dynamic Load
This first example will display a simple use case for yml:include. We will use the setSmallView call to insert an include tag into the small view of the current user.

The PHP layer to this is just to insert that yml:include tag the first time, and is only needed once. This will replace the cached small view of the user with the include tag. For my applications, I ran this in a cron job to update the small view for all users at once. Doing so replaced my need to constantly update the small view of my users on a daily basis.

The full details for setting up this example can be found here: http://www.nakedtechnologist.com/?p=181. This piece is the PHP layer that just sets the small view of the user with a yml:include tag and the div node that the content will be inserted into.

$html = '<yml:include params="training_sdk.php" insert="loadHere"></yml:include><div id="loadHere">REPLACE</div>';
if (!$yahoo_user->setSmallView($html)){
	echo "NO SMALL VIEW";
}

When the dropzone (my.yahoo) and application load, an AJAX GET request will be made to training_sdk.php. This file will return the content of the small view and then be inserted into the div with the id of “loadHere” (as denoted by the insert parameter). This allows us to generate whatever content we want within training_sdk.php and the small view will reflect that change as soon as the user loads the application.

Extended Use Case – Updating the Small View Every x seconds on a delay
Now we’re going to look into an extended use case for yml:include. This version will extend upon the basic example to refresh the small view automatically every 5000 milliseconds (every 5 seconds). We will start off with the same code that we insert into the small view to include the yml:include tag. From that point we take a look at the file that we capture the content of the small view from, training_sdk.php.

<yml:include params="training_sdk.php" insert="loadHere" delay="5000"></yml:include>
<?= time(); ?>

What we’re doing here is inserting another yml:include tag onto the page. Just like the first tag we are calling the same file, training_sdk.php, and inserting it into the same DOM node. The difference here is that we are delaying the load of this request by 5 seconds with the delay parameter. Following that all we do is display the current UNIX timestamp. What’s going to happen when this content is inserted into the small view is that the new yml:include will count down 5 seconds and then make an AJAX call to the same file and insert another UNIX timestamp and yml:include tag (which is delayed 5 seconds). So there we have it, we now have a small view that will update itself automatically every 5 seconds.

There’s only one catch here. There is a limit on the number of times you can call yml:include within a span of time. If too many consecutive yml:include calls are made, you will see the following error message:

error-243: maxIncludes limit hit for appid XXX

If you see this message, you have made too many yml:include calls within the particular dropzone. Currently the front page will allow unlimited yml:include calls and http://my.yahoo.com will allow 10 calls per session. My Yahoo! is looking into this at the moment so keep checking back to see if there have been changes with this tag. If you see this error, increase the delay on your yml:includes and that should solve the issue.

- Jonathan LeBlanc

2 Comments | In: PHP, Programming, Yahoo! Application Platform (YAP) | tags: PHP, Yahoo!, YAP, YML. | #

I’m sitting here hacking away at this custom visual HTML editor that I put together through some extensible JavaScript libraries – all the while the system is becomming more complex and…I must admit…I let it get a little out of control. In an effort to build as quickly as possible I broke some of my own rules and built this thing in a way that isn’t condusive for debugging or integrating new features.

So it’s a good thing I didn’t dump too much time into this project right? . Now I’m broadening my research a little bit and seeing what else may be out there on the interwebs that would be a good solution. What I just found and configured is FCKEditor (http://www.fckeditor.net/)…and I was hoping that it was available in PHP because that’s what I am currently building in. Well, kudos to this team because this is available in a bunch of languages – well done indeed. Configuration took no time at all and it seems to have excellent UTF8 support. UTF8 support…something that should be fairly trivial right? Well, it’s not something that many developers take into account when putting something together.

I’m not going to tout this tool as the be all end all of this project just yet, but I’ll explore it a bit more and see where it takes me. I’ll still need some custom file upload and file loading tools but I have those already thanks to the awesomeness of YUI. I’ll post more if this thing does everything I need of it.

- Jonathan LeBlanc

1 Comment | In: PHP, Programming, Reviews | tags: PHP, Programming, Reviews. | #

One of the tasks that I have been working on lately has been to create front-end JavaScript visualizations of YQL query results. What I ended up doing was creating a generic JavaScript include that uses YUI for some of the data parsing. Using this method, I set up a system where a developer could just include this JavaScript file, set up a few configuration variables and then a nice visualization widget would be displayed.

You can see a sample of the widget by going here: http://www.liquidmediatech.com/php_widget/yql_php_widget.html

Here’s what the full configuration for the widget looks like:

<!-- widget file include -->
<script type="text/javascript" src="yql_php_widget.js"></script>

<style>
div#badgeContainer{ padding:0 5px; font:bold 14px arial,helvetica,sans-serif; color:#f0f0f0; }
div#badgeContainer img{ float:left; margin-right:8px; margin-top:3px; border:0; }
div#badgeContainer span{ font-weight:normal; font-size:12px; }
div#badgeContainer a{ text-decoration:none; color:#f0f0f0; }
div#badgeContainer a:hover{ text-decoration:underline; }
div#widgetContainer{ background-color:#474747; width:300px; padding:5px 0; }
div#widgetContainer div.iconBox{ width:17px; height:16px; float:left; }
div#widgetContainer div.widgetRow{ padding:5px; background-color:#509cd1; border:1px solid #8fc5eb; margin:5px; overflow:hidden; }
div#widgetContainer div.widgetRow, div#widgetContainer div.widgetRow a{ color:#f0f0f0; font:11px arial,helvetica,sans-serif; }
div#widgetContainer div.widgetRow a{ font-weight:bold; }
</style>

<div id="widgetContainer"></div>

<script type="text/javascript">
var config = {'badge':true, 'num_results':10, 'debug':true};
var format = '<div class="widgetRow"><a href="{link}" target="_blank"><div style="background-color:#fff;border:2px solid #8fc5eb;width:20px;height:20px;float:left;margin-right:4px;"><img src="{loc_iconURL}" width="16" height="16" style="border:0;padding:2px;" /></div></a> <a href="{link}" target="_blank">{loc_longForm}</a><br />' + '{lastUpdated}</div>';
var yqlQuery = 'select lastUpdated, link, loc_iconURL, loc_longForm, profile_nickname, profile_profileUrl, publishedTime from social.updates where guid=me | sort(field="lastUpdated") | reverse()';
var insertEl = 'widgetContainer';
yqlWidget.push(yqlQuery, config, format, insertEl);
yqlWidget.render();
</script>

I have full documentation and the code base to set up this example on my github account at http://github.com/jonleblanc/yql-utilities/tree/master.

For a more in depth explanation of what was built out with this tool take a look at my post on the YUI blog at http://www.yuiblog.com/blog/2009/06/17/yui-and-yql/

- Jonathan LeBlanc

No Comments | In: Programming, YQL, YUI | tags: PHP, Programming, widgets, YQL, YUI. | #