Markup Tutorials

  • JavaScript Canvas Image Conversion

    At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one billion dollars. Since I wouldn't mind having a bill in my back account, I decided to create an Instagram-style app (which I'll share with you in the future). This post details how you can convert an image to canvas and convert a canvas back to an image.

  • DNS Prefetching

    Despite anchor tags having HREF attributes which lead to other host names, browsers do not execute DNS lookups on those domains. Content prefetching can be invaluable in speeding up your websites, but did you know that you can also implement DNS prefetching? It's as easy as simple LINK element:

  • HTML5 Context Menus

    Update: These context menus display even when JavaScript is disabled; so best practice will be to create these menu structures via JavaScript. Mass innerHTML injection can be used or basic DOM node injection.

  • Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves a network request for each image, and if you're the paranoid type, can prevent exposure of directory paths. Since creating data URIs is incredibly easy, let me show you how to do it with PHP.

  • Facebook Tooltip HTML and CSS

    Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to grab the HTML structure and CSS rules to see how they did it.

  • Control Element Outline Position with outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug where the element outline forced a horizontal scrollbar within its parent, causing the table to look....gross. After a bit of research, I discovered the outline-offset CSS property. Let me show you what it is and how it fixed the outline bug!

  • DOM Manipulation with put-selector

    DOM node manipulation is a big part of the web today; just look at how popular the jQuery JavaScript framework has gotten. The ability to easily work with the DOM allows us to do a lot of work in a little bit of code. Thanks to a new JavaScript module by Dojo Toolkit developer Kris Zyp, working with the DOM just got a lot more compact. With a name as short as the syntax itself, put could make you change the way you work with the DOM.

  • Create a Photo Stack Effect with Pure CSS Animations or MooTools

    My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation when you hover over them.  Outstanding!  I've researched the effect a bit and was able to pull it off with both pure CSS and some MooTools JavaScript.

  • Add a Google+1 Badge to Your Website

    Google's new Google+ service is taking the development world by storm, and why shouldn't it?  It's minimalistic UI, use of cutting edge web techniques, and overall usability make it Google+ one of the more impressive web applications I've seen in quite a while (I was going to say "since Google Wave", but that one didn't end up well, did it?) Google+ allows you to share photos, links, statuses, and much more;  consider it a mesh between Twitter and Facebook.

  • Parse Web Pages with PHP Simple HTML DOM Parser

    For those of you who have had the pleasure of following me on Twitter (...), you probably know that I'm a complete soccer (football) fanatic.  I even started a separate Twitter account to voice my footy musings.  If you follow football yourself, you'll know that we've just started the international transfer window and there are a billion rumors about a billion players going to a billion clubs.  It's enough to drive you mad but I simply HAVE TO KNOW who will be in the Arsenal and Liverpool first teams next season.