Here are some interesting things I found from Dive into the HTML5 ebook:
Note: a couple of months ago, when I started reading this ebook, it was available under diveintohtml5.org. However, the author – Mark Pilgrim – is 410 Gone from web. However, his ‘Dive into …’ book were mirrored and they are still available.

 
  1. XHTML vs HTML parser
  2. Even if you declare your DOCTYPE as being XHTML, if you serve the page as Content-Type: text/html, it will be parsed by the HTML engine, not by the ‘draconic’ XHTML one. #

  3. Double negative to convert to Boolean #
  4. /* You can use the double-negative trick 
    to force the result to a Boolean value (true or false).*/
    return !!document.createElement('canvas').getContext;
    
  5. Skip ‘skip to content’ πŸ™‚
  6. No need to add ‘skip to content’ links at the beginning of your page if you are using HTML5’s nav element. The screen readers will handle it correctly. [#]

  7. Character encoding
  8. Web Server’s HTTP Header:

    Content-Type: text/html; charset="utf-8"

    Briefly, this says that the web server thinks it’s sending you an HTML document, and that it thinks the document uses the UTF-8 character encoding.

    <meta charset="utf-8" />
    or
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    Briefly, this says that the web author thinks they have authored an HTML document using the UTF-8 character encoding.

    Both of these techniques still work in HTML5. The HTTP header is the preferred method, and it overrides the meta tag if present. But not everyone can set HTTP headers, so the meta tag is still around. [#]

  9. Document outline
  10. You can have multiple h1 tags in the same page. [#]
    You can check your HTML5 page outline using this outliner.

  11. Use Modernizr
  12. Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

    if (Modernizr.canvas) 
    if (Modernizr.canvastext) 
    if (Modernizr.video) 
    if (Modernizr.localstorage) 
    if (Modernizr.webworkers) 
    if (Modernizr.applicationcache) 
    if (Modernizr.geolocation) 
    if (Modernizr.inputtypes.date)
    if (Modernizr.input.placeholder) 
    if (Modernizr.input.autofocus) 
    if (Modernizr.history) 
    
    //Example video:
    if (Modernizr.video) {
      // let's play some video! but what kind?
      if (Modernizr.video.webm) {
        // try WebM
      } else if (Modernizr.video.ogg) {
        // try Ogg Theora + Vorbis in an Ogg container
      } else if (Modernizr.video.h264){
        // try H.264 video + AAC audio in an MP4 container
      }
    }
    

    More on the video element

  13. HTML5 canvas element
  14. It kind of looks like Flex without the Flash Builder πŸ™‚ To use it in older IE browsers as well, use ExploreCanvas [#]
    Here’s a nice application which lets you draw 3D sketches with animating strokes on HTML5 canvas.

Quiet instant notifications

Written on 23 November 2011, 04:47pm

Tagged with: , ,

I recently came across an article against instant notifications on the mobile devices:

You receive a new message, say an email or a tweet, and at that very moment your software decides to do something stupid. A little red bubble appears over its icon. A ringing bell is heard. Sometimes even the message itself will pop up over your screen announcing its arrival and inviting you to read it.
Is it not rude to disturb people? Does the software assume you were sitting there doing absolutely nothing, just waiting for that update? Not only does it decide to disturb you, it does it in the most forceful way it possibly can, using every weapon at its disposal: sounds, colors and animations.

I must say that I do not fully agree with this view. And the main reason is that the reason why these notifications pop up on your screen is you. It’s you who allowed Twitter to send you notifications, it’s you who set up the push/fetch email, so you cannot really complain about that. You have the power to enable them, as well as turn them down.
But what I would like to have is a mechanism to shut down all the notifications. (more…)

Cfdocument – different behavior in CF7 vs CF8

Written on 26 October 2011, 02:26pm

Tagged with: , ,

The simple code below should write a PDF file on disk. This file should contain an image and two lines of text – next to the image (ignore the use of tables for layout πŸ˜› ):

<cfsetting enablecfoutputonly="yes" showdebugoutput="no">

<cfoutput>
<cfdocument filename="output#Left(server.ColdFusion.ProductVersion,1)#.pdf" 
		format="pdf" overwrite="yes">
	<cfdocumentsection marginleft="1">
        <table>
            <tr>
                <td><img src='../images/image.gif'></td>
                <td>This is a simple text<br>spanning on two lines.</td>
            </tr>
        </table>
    </cfdocumentsection>
</cfdocument>
</cfoutput>

The result is quite different in ColdFusion 7 vs ColdFusion 8, as the following image shows:

In CF8, the PDF text and image appear visible smaller than in CF7.
Now the strange part: if I add unit attribute to cfdocument tag (with any value, ‘cm’ or ‘in’) – the CF8 version shows exactly the same size as CF7.

Anyone has any idea why this happens?