Raymond Camden's Blog - HTML5

The Future of the Web

Wed, 22 May 2013 09:24:00 -0400

I know, I know. The title sounds like SEO-link-bait, I apologize. I want to talk about something that I'm fairly excited about, and I hope it excites you as well.Last week I had the pleasure of listening to Dan Callahan give the keynote at cfObjective. I didn't get a chance to meet him in person (I basically ran to my presentation and then to the airport), but I greatly enjoyed his talk. His central theme was a simple one - it is time to learn JavaScript. This is a message that I just kind of assume that people already know, but as I still encounter people struggling with client-side development, it is apparent that we (we being the greater web community) still have quite a bit of growing to do. If there was one thing I would have added to Dan's talk it would have been a reminder that web developers are probably also somewhat behind in their HTML knowledge as well. I've been using HTML since 1993 or so. I spent a long time doing just server-side development for a while but even then I was still generating HTML. But at least once a month I'm reminded about some particular tag or attribute that I've forgotten about. Don't get me started about CSS. Every time I remember that you can specify hover stuff in CSS I remember how many times I wrote the same damn code to highlight menu items with JavaScript. I've made it my mission over the past few years to focus my energy in this direction. Anyone who reads this blog or listens to me give presentations knows this. Developing for the web can still be pretty darn frustrating, but at least the tools, and the environment, are growing in leaps and bounds. There's some growing pains here, but my God, there's growth. That is why I'm so excited to be hearing more and more about Web Components. Web Components refer to a few different technologies (that I'll list in a moment). But in general, they represent an incredible change in the web. To me, they truly are "Web 2.0." For the first time you'll be able to define new building blocks (tags, behavior, design) by following web standards. You'll be able to extend the web. That is awesome. So what are Web Components? In general, they describe the following technologies/specs:

Templates

Anyone who has worked with templates in JavaScript know how powerful this can be. Templates allow you to create reusable blocks of content that can be added to the DOM with JavaScript. As a simple example, imagine you are using AJAX to fetch content from the server. As this content comes back as pure data, you need to write this out to the DOM. While you can certainly just create large blocks of HTML in JavaScript strings, this gets unwieldy pretty darn quickly. Hence the rise of multiple JavaScript template frameworks. The Template feature will provide native support for this. You will be able to use a template tag within your HTML document. The content in the tag is not executed until you actually clone the template and add it to the DOM yourself. So any images or script blocks won't be loaded until necessary. To be clear, this isn't the exact same as something like Handlebars.js. You don't get token replacement. But it is native to the browser itself which means less additional code. You can read more about the spec here: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html

Shadow DOM

Shadow DOM is - for me - the hardest concept to get my head around. I probably will not do a great job describing it, but in essence, it is a way to create a "black box" style system for content. Let me give you an example. Imagine you are writing some HTML that is meant to be consumed by someone else. Your HTML is just a H1 tag and a paragraph. You want to style this content, but in order to do so, you have to ensure your CSS does not conflict with anything in the parent document. An iFrame can solve this, but iFrames create other challenges as well. With the Shadow DOM, you can essentially say, "This CSS will apply to this block only. Period. Nothing will leak out or in." Again - I'm not the best person to speak on this. You can read more about it at the spec (https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html) or check out the excellent HTML5 Rocks article on the topic.

Custom Elements

The most exciting part of web components, for me anyway, are custom elements. As you can guess, they allow you to create new HTML elements. Right now they are prefixed (x-), but if you have ever wanted to define your own markup, this will allow you to do so. You get full lifecycle support (ie, knowing when your element is loaded, shown, etc) and you can even use this feature to extend existing elements. Of course, you can also tie your own JavaScript events and mix in both templates and the Shadow DOM. If you have ever used something like jQuery UI's Tabs to add tabs to your site, web components will allow you to do it all via web standards.

HTML Imports

The final piece of the puzzle is HTML imports. Essentially, once you've defined a custom element, applied some layout to it via the Shadow DOM and custom behavior, you can then create a reusable template that can be shared with others. In the same way you import a style sheet, the link tag will allow you to import custom elements. For example, x-tab or x-cowbell. You can find the spec for this here: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html

So What, I Can't Use It Now!

I bet you're asking, how well is this stuff supported? Right now support is pretty limited. In fact, custom elements aren't supported at all yet. The features that do work now are limited to Chrome and Firefox Nightly. The specs are still in development. Keep in mind though that a majority of our major browsers now are moving to a continuous update cycle. If you are still of the mindset that you don't need to care or pay attention to web standards then you are failing in your job as a web developer. Want to know more? There is an awesome, and short, video by Eric Bidelman of Google that you can watch on this topic. I've embedded it below. You can also find his slide deck here: http://www.webcomponentsshift.com/. Do note though that you are supposed to click the right arrow to start the presentation. The initial gray screen confused me a bit and I assumed something had broken.

Capturing camera/picture data without PhoneGap

Mon, 20 May 2013 10:31:00 -0400

As people know, I'm a huge fan of PhoneGap and what it allows me to do with JavaScript, HTML, and CSS. But I think it is crucial to remember that you don't always need PhoneGap. A great example of that is camera access. Did you know that recent mobile browsers support accessing the camera directly from HTML and JavaScript? Let's look at an example.Over a year ago I wrote a blog post in which I created an application called "Color Thief." This application made use of PhoneGap's Camera API and a third party JavaScript library called Color Thief. I loved this example because it demonstrated how you could combine the extra power that PhoneGap provides along with existing JavaScript libraries. This morning I watched an excellent Google IO presentation (https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player) on Mobile HTML. It was an overview of some of the exciting stuff you can now do with mobile HTML and JavaScript. To be clear, this was all without using wrappers like PhoneGap. In one of the examples the presenters discussed the new "capture" support for the input/file field type. This is rather simple to implement: <input type="file" capture="camera" accept="image/*" id="takePictureField"> If supported (recent Android and latest iOS), the user can then use their camera to select a picture. I decided to rebuild my old demo to skip PhoneGap completely and just make use of this feature. Here's the code: For the most part, this is pretty similar to the last version. I no longer wait for the deviceready event, but instead just listen for the document itself to load. Instead of listening for a button click, I've switched to an input field using type=file. I now listen for the change event, and on that, I see if I have access to a file. If I do, I can then use the URL object to create a pointer to the source and then simply add it to my DOM. After that, Color Thief takes over. The only tricky part I ran into was that in iOS the URL object is still prefixed. You can see how I get around that in the startup code. To be fair, this isn't 100% backwards compatible, I could add a few checks in here to ensure that things will work and gracefully let people on older phones know they can't use this feature. But the end result is nearly the exact same functionality in a web page - no PhoneGap, no native code.

MAX Session: Advanced PhoneGap Build

Thu, 09 May 2013 21:49:00 -0400

Oddly, the last of my Adobe MAX sessions is available online now but none of my earlier ones. I assume they will show up in the next day or so. But for now, enjoy my eloquent presentation on the more advanced aspects of using PhoneGap Build. You can download the source code for the sample apps and slide deck as well. As always, I hope this is helpful!

Auto-escaping code blocks in Reveal.js

Thu, 25 Apr 2013 10:06:00 -0400

Warning - this falls into the "Cool, but may not be a good idea category." I'm a huge fan of the Reveal.js framework for HTML-based presentations and I've already posted a few of my utilities/tips/etc for making it work better (or at least better for me). One issue I've run into a few times lately is escaping HTML for code slides.Reveal.js has great support for code coloring (color coding?). Here's a quick screen shot of an example: In general this works simple enough. Here is how a typical code slide would look. But if you want to include HTML in your slide then you run into a problem. As you might expect, your HTML will be rendered as, well, HTML, not source code. Typically this isn't a huge deal. Code samples are short and if you type fast, you can replace < and > in a few minutes, but after doing this a few times, and preparing to do some slides focused on HTML5 development, I thought there might be a cooler way. By default, Reveal.js initializes itself immediately. I modified the code to do this after the DOMContentLoaded event and did some hacking: As you can see, I simply make use of querySelectorAll to find all of my code blocks. (I could make that selector a bit more precise.) I then simply grab the HTML, escape the < and > characters, and then update the innerHTML property. Voila!

LocalStorage Monitor Updated

Mon, 11 Mar 2013 13:07:00 -0400

Just an FYI - if you follow this blog pretty regularly, then you know I'm a big fan of the LocalStorage API. It is one of those simple, practical APIs that I think are far more useful than the much praised/talked about canvas tag. A while ago I built a Chrome Extension called the LocalStorage Monitor. The idea being that I wanted to know when sites were making use of LocalStorage and have a quick way to view that usage.To be clear, you can always view LocalStorage usage in Chrome Dev Tools, but I don't always keep that open and this extension was a bit more "up front" about letting me know when a site was using the feature. Today Adam Tuttle pushed up a mod to the code (https://github.com/cfjedimaster/Local-Storage-Monitor) to add memory usage reports to the display. As an example, here is how Amazon's Cloud Player is using local storage. Anyway, it is a cool little modification and thanks go to Adam for adding it. You can add this to your Chrome install here.

Simple Reverse Geocoding Example

Tue, 05 Mar 2013 09:07:00 -0400

Have you ever seen a web site that seemed to know where you were located? I'm not talking about a map, but the actual name of the location? This is done with a process called "Reverse Geocoding." Whereas geocoding refers to translating a human-readable address into a longitude/latitude pair, reverse geocoding is, well, the opposite of that. Given a longitude/latitude pair, what would be the description of that location. In this blog post I'll show a simple example of this process. My example application will attempt to report the city and state you live in.Once again I'll be making use of Google for my example. One of the services of the Google Maps API is geocoding as well as reverse geocoding. Their reverse geocode API needs a longitude and latitude, we can get that easily enough using Geolocation. Here is a snippet of code that begins the process: Please note that in this demo, if the user doesn't support geolocation I'm not going to do anything else. They won't get an error though and won't know what they are missing. Once we have the longitude and latitude, we then fire off a request to the geocode service. As with our initial geolocation support, all I care about here is a success. If anything goes wrong, I don't care and I just ignore it. So, here comes the difficult part. The result was from the geocode call is fairly complex. You get an array of results ordered by the quality of the match. If you check the docs, you can see an example of this. Each individual result is also fairly complex. You get an array of address parts that represent, obviously, parts of an address. If you read the "Address Component Types" section of the docs, you can see an explanation of the types of address parts. Each part has one or more of these types applied as a tag. Based on my reading of the spec, I determined I could get the city when the tag was "locality" and the state when the tag was "administrative_area_level_1." This is US-centric and I've not done any testing yet with other countries. Given that I knew which tags to look for, I decided to work with the first result and see if I could match those tags: Again, if there isn't a match I don't throw an error. Since this is simply window dressing for the site it doesn't really matter if we don't get a match. Want to see this in action? Check out the demo below.

My IndexedDB recording, and a few notes

Thu, 28 Feb 2013 13:17:00 -0400

Here is the recording URL for the presentation I just gave on IndexedDB: http://experts.adobeconnect.com/p30v2nmantc/ You can find the full source code for the demos and slide deck here: https://github.com/cfjedimaster/indexeddb-preso Now for some random notes: I plan on writing up this presentation as an article (not sure for whom yet, maybe Smashing Mag). But basically, I'm going to turn the presentation and demo assets into a guide that can be downloaded, read offline in the bathroom, etc. Secondly, one topic I didn't go into, but bit me in the butt today, was the transaction object's "oncomplete" handler. This comes into play when doing something like this: Add some crap. Run a method to get all crap so I can see it listed. I've had a "Note Database" demo in my presentation for a while now and it worked fine... until today. When I presented it today (and you can see my surprise in the recording), I noticed that my add/edit/delete operations were not updating the list of notes. Why? Because I was asking the system to refresh the notes in the success handler of the request (where the request was either add/edit/delete). Instead, I needed to wait for the transaction to end as a whole. As an example of this mistake, here is my original code for delete: Notice that displayNotes() is in the request success handler. Here is the corrected version. I've broken up my chained calls there a bit so I get access to the transaction and add the oncomplete there. Previously this wasn't required in Chrome, so I'm assuming something has changed, but to be honest, this feels like the right way of doing things anyway.

Presentation: Browser Tools for Debugging

Fri, 22 Feb 2013 14:32:00 -0400

A huge thank you goes to Andrew Trice for spending hours on polishing and editing a video of my last presentation. He uploaded it to Youtube and now you guys can watch it as well. I'm proud of this presentation so I hope it is helpful. As always, criticism is welcome. You can download the demos and slide deck here: https://github.com/cfjedimaster/BrowserToolsForDebuggingAndProfit

Google Map/Directions Mashup

Mon, 18 Feb 2013 07:56:00 -0400

A while back I ran into an interesting problem with Google Maps. I was booking travel for a conference and needing to find the closest Marriott to the conference location. I didn't know the area very well so seeing a few addresses meant nothing to me. I figured Google Maps would be able to help me, but I could only plot one location at a time. (To be clear, I bet there is a way to plot multiple addresses, I just couldn't find it.) I then tried the Directions service. That too was only able to work with two addresses. I ended up entering 4 or 5 Marriott addresses and just trying to remember which one seemed shorter. To get around this, I built a simple application that lets you enter up to five starting addresses and a destination. It then plots driving directions and reports on the total distances for each. It also reports on which starting address is the best.The code for this application is relatively simple. I began by creating a simple Bootstrapped UI: I built in a bit of basic validation logic (which isn't too exciting) and then began work on the real meat of the application. Here's the entire JavaScript library behind the demo. The interesting part begins around line 47. I geocode the destination address first to ensure it is valid. (I should probably do the same for the starting addresses as well.) Once I have a valid destination address, I map it, and begin a loop for each of the starting addresses. I make use of the Google Directions API to get and plot the directions from each starting address to the destination. This API is very cool (I've blogged on it a bunch already), but modifying the display of the plot is a bit broken. Unless you want to handle all of the drawing yourself, you can't really (nicely) do small modifications, like changing the initial pushpin. (Which is documented to work, but does not.) Here's a quick example: You can try this yourself by hitting the demo button below.

Big new releases today - including Reflow

Thu, 14 Feb 2013 12:36:00 -0400

Today we announced some updates and additions to our Edge Tools lineup. As a reminder, everything here is part of the Creative Cloud lineup, and you can sign up for free to get these tools right now. First up is Reflow. I had the pleasure of demoing Reflow at my "Create the Web" tour stops, and this was the application folks were more excited about. Unfortunately, we couldn't share this with you till now. Today, the first preview release of Reflow is available. For an in depth review of the tool, please see the team's blog post, but honestly, you need to download this bad boy and try it yourself. I don't pretend to be a designer, but I've found Reflow to be a killer way to visualize and try out responsive designs. You can read about responsive all day long, but Reflow lets you actually build it and see for yourself. Definitely check this out. Next up is an update to Edge Animate. This tool allows you to build HTML/JavaScript-based animations using a tool much like the Flash IDE. Today version 1.5 was released and brings features like CSS filters, gradients, and support for Edge Web Fonts. You can see more about the update (and watch some demonstration videos) on their blog post. Both Brackets and Edge Code were updated today as well. Brackets is now on Sprint 20 and Edge Code has been updated to Preview 3. Check the downloads page for Brackets for details on Sprint 20 and read this forum post for information about Edge Code Preview 3. Finally, Dreamweaver has also been updated. Changes include Edge Web Font integration and better fluid grid support. More details here. Again - you can get all of the Edge Tools described above - for free - as part of your Creative Cloud membership!

Quick Tip: Running WebSQL commands in Chrome Dev Tools

Wed, 16 Jan 2013 09:57:00 -0400

I'm a big fan of WebSQL, which is, unfortunately, going the way of the Dodo since it was apparently just too easy to use. One of the nice things about the feature is that Chrome Dev Tools make it real easy to use. As an example, here is what you can see on a page making use of WebSQL. As you can see, both the database and its tables are enumerated. If you click on the table, you get a list of data. There's no UI hint to this, but you can click the columns to sort. The coolest feature though is the one that is very non-obvious (in my opinion). If you click the database name, you may notice the right side of the panel empties out... That's actually an editor. If you start typing you can execute arbitrary SQL. Hell, Chrome will even autocomplete table names and SQL commands for you. Here's an example: One thing to watch out for. If you execute a SQL command that returns no results, Chrome doesn't display anything. You don't get a nice "0 Results". In fact, Chrome will remove the SQL from the pane.

Chrome Extension for Microdata

Fri, 11 Jan 2013 08:06:00 -0400

A while back I read an interesting blog post on Microdata. While I encourage you to read the article I just linked to, the basic gist of the feature is that it provides a way to create metadata for your HTML content. By embedding certain properties into your HTML you can create search engine/robot friendly data for your content. I'm not sure how much this is actually being used in the wild (see my resources links at the bottom), but it seemed like a pretty cool thing.Back in November I posted a blog entry about how you could parse an HTML page for microdata in Chrome. (There is a much clearer API that is - unfortunately - not supported by Chrome yet.) I thought it might be nice to take that code and package it up into a proper extension. The idea being that you could add microdata to your HTML page and then use Chrome Dev Tools to see how a robot might read it. Here is a screen shot to give you an idea of what I'm talking about. The site in question is Southern African Travel. Here is another example where microdata is used for the reviews at CTS Wholesale Sunglasses. For now, you have to manually open dev tools and select the tab, but I'm considering adding an icon next to the URL bar that flags when it sees microdata being used. If you want to install this extension, simply go here. The icon is from The Noun Project, courtesy of Ed Jones. (Original Icon) Ok, if you don't care how Chrome Extensions are developed, you can stop reading now. What follows is some technical background on the extension and why I almost pulled out all my hair last night. I've blogged before about the difficult in handling "communication" in Chrome Extensions before. By that I mean having part A talk to park B. Chrome Extensions have rules related to security and context that can make it extremely difficult to get things working. In this extension, the biggest issue was getting the content script (a JavaScript file which can run in the context of the current page) talking to my "devtools" script (where I'd be able to update the content of my panel). There is documentation at Google on this, but nothing that covers this specific use case. In fact, panels in general are pretty poorly documented. To be honest I don't know who to complain to and figure it wouldn't help much anyway. I'm hoping my extensions help out. I ended up dropping the content script and instead making use of an evaluation technique shared with me by John J. Barton. It worked perfectly. If you want to read more about his workaround, checkout our discussion thread on the Google group. Resources:

Sites Using Microdata
Darn good article: Make Your Page Consumable by Robots and Humans Alike With Microdata

For your post-Christmas hangover, another CanIUse Mashup

Wed, 26 Dec 2012 09:24:00 -0400

This will be short and quick as I've got to hit level 24 on Guild Wars 2. A while back I posted a few demos that made use of CanIUse.com data. These demos were kinda nice I think, although not the most prettiest examples of what you could do with CSS. Based on a suggestion from one of the commenters I created something a bit simpler and more direct.Based on selecting a set of features, this new demo will tell you the minimum version of each major browser required to support those features. So for example, if form field validation requires IE10 and canvas requires IE9 (I'm not going to rant about this again I'm not going to rant about this again) then the minimum version of IE you can use for both those features is IE10. Here's a screenshot of this in action. As a reminder, CanIUse.com supports multiple browsers. The ones you see here were simply my list of what I thought was critical enough to include in the UI. Ok, check it out, and let me know what you think. Edit: Based on a recommendation by Jesse Freeman, I finally got around to adding 'bookmarkability' to the demo. Check this version: http://raymondcamden.com/demos/2012/dec/20/test4.html. As you select options, the URL will change. You can then bookmark and load up that version, or share the URL with others. Edit 2: After a bug was found in test3.html, I fixed it in test4.html and modified all my links above to just use that version.

W3C and the HTML5 Spec

Tue, 18 Dec 2012 08:49:00 -0400

Ok, I know specs aren't the most exciting thing that will happen to you this week (and if it is, I'm sorry), but I think this is pretty cool. Yesterday the W3C (Worldwide Web Consortium) finalized the HTML5 spec. This isn't the final final version, but is the "feature complete" version, and frankly, is a good step forward. Those of you who did the extra credit homework in school should go ahead and start reading up on HTML 5.1!

An example of history management in the browser

Mon, 17 Dec 2012 15:34:00 -0400

What follows is an example I built to help me learn how to manipulate browser history with JavaScript. Do not consider this a tutorial, an example of best practices, or anything more than a personal learning exercise. This is a topic I've been meaning to learn for months and I finally took the time to wrap my head around it today. I wrote some code that seems to work well and wanted to share it, but keep in mind that I'm probably doing it wrong. Want a good explanation? Try one of the links below.

I began by creating a super simple remote service. It simply returns an array of strings along with a 'total' value. The idea being that the front end is going to allow you to view one 'page' of content at a time. This back end is written in ColdFusion and simply returns titles of my blog entries along with a total number of results. You may click here to see a sample of the JSON data. The first iteration of the application was entirely client side. I wrote a quick and ugly application with simple Previous/Next links. Again, this is ColdFusion-specific, but you could imagine this in any language. You can demo this here: http://www.raymondcamden.com/demos/2012/dec/17/oldskool/ Obviously this is kind of a lame example, but if you imagine the page using "real" layout, then every page would be a complete reload of header graphics, CSS, etc. In the next iteration, I rebuilt the front end using JavaScript. This is also kinda ugly, but it uses XHR to fetch pages of content. You can demo this here: http://www.raymondcamden.com/demos/2012/dec/17/newskool/ Better, right? Now each page is loaded without a full page reload. You can quickly jump back and forth to different pages. But it has two issues that the History API can help with. First, it doesn't allow you to bookmark a page. Second, if you use your browser's back button, you actually end up leaving the page entirely. Using the History API is - for the most part - pretty simple. You can use pushState to update the URL of the browser (but not the title, all the browser vendors ignore this) as well as push information to the new page. So a simple example may look like this: Note that third argument there - you really can change the URL to anything. So I could switch to index.ruby if I wanted. But here's the crucial bit - if the user bookmarks that URL and returns to it later, your server better respond to it. The other part that confused me was the first argument. I kept thinking of it as data I was sending to the new page. That isn't exactly right. Rather, you are associating data with that part of your history. I don't think I'm doing a great job explaining this, but think of it as data you want to use when, in the future, you return to this new history item you are creating. So for example, going from page 1 to page 2, I've passed an object. When I go to page 3, and then hit back to page 2, then I make use of that object. You make use of that data using the popstate event handler. Now - here is where things get tricky. In Chrome, if you listen for the popstate event, you get one immediately after the page loads. If you use Firefox, you don't. From what I know, the draft spec says you should get one on page load, so Firefox is wrong here, but it is a draft spec, not a final spec. That made things very tricky for me. I essentially had to figure a way to ignore an initial popstate event in Chrome but not in Firefox. I found some possible workarounds, but none that worked well for me. I finally came to a realization. I only needed to worry about popstate once I've made at least one change. So I simply wrote some simple code that waited until you had loaded your first new page and then registered the event listener. Make sense? Here's the complete new version. It isn't that much different from the earlier version. Also note the support for checking location.search on page load. This allows me to handle a bookmarked version of the application. (That code could be tighter!) I tested this in Chrome and Firefox and it seems to work reasonably well. Check it out below.