Webmasters Gallery

John Resig has blogged about HTML 5 parsing and the news that Henri Sivonen (the chap who did the HTML 5 validator) has landed a massive commit to the trunk of Firefox that includes an HTML 5 parser.

The method is quite interesting:

    What’s interesting about this particular implementation is that it’s actually an automated conversion of Henri’s Java HTML 5 parser to C++. This conversion happens automatically and changes will be pushed upstream to the Mozilla codebase.

    Normally I would balk at the mention of a wholesale, programmatic, conversion of a Java codebase over to C++ but the results have been very surprising: A 3% boost in pageload performance.  

  And this is on top of the litany of bug fixes and compliance checks that this code base will be providing. You can examine some of the progress that went into the constructing the patch in the Mozilla bug.

   If you’re interested in giving the new parser a try (it’s doubtful that you’ll see many obvious changes - but any help in hunting down bugs would be appreciated) you can download a nightly of Firefox, open about:config, and set html5.enable to true.

For extra fun, throw in some inline SVG and see it just work! Bye bye namespaces!

Pithy HTML5/XHTML comments

Dan Morill (Android and formerly GWT fame and al-round good guy) had some funny remarks on the XHTML/HTML5 kerfuffle:

    An exercise: I can easily summarize HTML5 in a single Tweet. I can’t think of a way to do that for XHTML. “HTML5 codifies existing behaviors and is a practitioner’s roadmap for the future of browser capabilities.”

    This “death of XHTML” meme is awesome, it’s soooo easy to bust out with pithy zingers. 

   Here’s one: “The web *itself* is content soup, why should we expect HTML to be more than tag soup?” 

   Another: “XHTML was the Edsel of the web: painstakingly designed, proudly touted, and utterly missing the point.”   

“They finally closed the tag on XHTML, and now the web is validated.”

admin Html HTML 5, Web Design

Robert Kroeger has released a nice library for local database access. The Web Storage Portability Layer nicely abstracts on top of HTML5 and Gears for database access.

    The WSPL consists of a collection of classes that provide asynchronous transactional access to both Gears and HTML5 databases and can be found on Project Hosting on Google Code.

    There are five basic classes:

    google.wspl.Statement - A parametrizable SQL statement class

    google.wspl.Transaction - Used to execute one or more Statements with ACID properties

    google.wspl.ResultSet - Arrays of JavaScript hash objects, where the hash key is the table column name

    google.wspl.Database - A connection to the backing database, also provides transaction support

    google.wspl.DatabaseFactory - Creates the appropriate HTML5 or Gears database implementation

    Also included in the distribution is a simple note-taking application with a persistent database cache built using the WSPL library. This application (along with Gmail mobile for iPhone and Android-powered devices) is an example of the cache pattern for building offline web applications. In the cache pattern, we insert a browser-local cache into the web application to break the synchronous link between user actions in the browser and server-generated responses. Instead, as shown below, we have two data flows. First, entirely local to the device, contents flow from the cache to the UI while changes made by the user update the cache. In the second flow, the cache asynchronously forwards user changes to the web server and receives updates in response.

    By using this architectural pattern, a web application can made tolerant of a flaky (or even absent) network connection!

You can of course take a peak at the code to see how it works, for example:

JAVASCRIPT:

Nicely done. It would be great to see a version that acts as a shim and when in Gears mode manually implements the HTML5 standard API so you can write your user code to that and not a new google package.

admin Html Database, google, HTML5

In the past weeks I received some requests from my readers which asked to me to suggest a simple way to skin HTML form elements. There are a lot of ways to do that and a lot of posts with interesting resources about this topic. But if you want to save time and obtain a nice result I suggest you to use jqTransform or NiceForms.

Both scripts are very useful and simple to use. If you want to use a "native" script which doesn’t use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.

1. jqTransform

jqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.
Use this code to add a javascript inclusion to jqTransform:

…now create a form with class property equal to jqTransform:

…then add this JS code to apply the transformation:

2. NiceForms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
To implement form style transformation you have to add a javascript inclusion to NiceForms in your web page using this code:

…then create a form with class property equal to niceform:

admin Html Elements, Html

James Graham of Opera has a post about how section is not just a semantic div that argues against the folks that think that we can get by with just div class="section" for example:

HTML 5 introduces new elements like <section>, <article> and <footer> for structuring the content in your webpages. They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source. But if you just go through your document and blindly replace all the <div>s with <section>s you are doing it wrong.

This is not just semantic nit-picking, there is a practical reason to use these elements correctly.

In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free).

You can also talk about other items such as the new menu tag that the browser can render with an interesting native menu item.

admin Html HTML 5

Wordpress is a funny beast, really it is.  Usually, building a Wordpress site involves something like digging through a hundred pages of templates until you find one that’s merely passable.  Once you do, you grab it and start hacking away at everything to make it your own - CSS, HTML, everything.  And it’s fine.  Really, it is - the internet’s built on sharing ideas.  The problem appears once you start inheriting other people’s problems.  In this case, I had to hit the refresh key just to get my divs to float correctly.

The thing with using a tableless design is that people tend to create an outer division to put other inner divisions into.  Usually this looks like a main content box with two columns in it, which is what I had.  In order to get those columns to line up side by side, you tell the css of those divs to float:left;.  Here’s where we inherit the problem, however.  When I visit the page for the first time, or reload the page without using the cache, the floats start clearing one another, even though I have never set a clear css property on either of the divisions.  (If you don’t know what I mean by “clearing”, imagine you want to put two columns side by side, and instead they stack on top of one another.)  The whole ordeal was rather frustrating, until I noticed one thing.

The outer, main content division had a property from before I started editing the css.  The outer div was set to display:table;.  I don’t know if it’s a bug, but the issue remains:  If you have an outer div set to display:table, the inner divs will clear each other regardless of how you float them. The solution?  I didn’t need the outer div to act like a table, so I just removed the display:table; property and now all is well.

I don’t know if you’ll be able to remove the display:table; property from your outer div, but you’ll have to find a way around it if this problem occurs in Firefox for you.  I hope this helps someone track their problem down.

admin Html, Web Design, Web Development, css, layout

A near-final version of Microsoft’s Internet Explorer 8 was made available for download today. The free browser is only available for users of Windows Vista, Windows Server and Windows XP with Service Pack 2 installed. Microsoft has been steadily improving Internet Explorer 8 which has been in development for a few years with Beta 1 and 2 versions of the browser being released in March and August last year respectively.

Although still the most dominant web browser Internet Explorer has seen it’s market share slowly being chipped away by Mozilla Foundation’s Firefox web browser and with Google’s recent and swift entry into the market with Chrome.

admin Ajax, Html, Javascript, PHP, Web Design, Web Development, Web2.0