An insight on what goes on at Seegno
(and why it is so much fun)
Making the web a better place
December 9, 2010
Are you ready for HTML5?
HTML5 has been under the radar for a couple of years now, but only recently has it gained the much needed spotlight it deserves. But not without reason. As far as marketing and commercially-driven products and services go, new technologies create great opportunities to attract new customers with faster, simpler and more powerful software. "Web 2.0" did it on 2004, "Ajax" on 2005 and "Web 3.0" will still be probably used on 2020.
While there's a lot of misconception of what HTML5 is and isn't, we have been growing a lot of love for the technologies it brings to the Web. The specification itself won't be "ready" until 2022 but that doesn't mean we cannot use specific technologies to solve current problems. In order to be "ready", the specification has to be fully implemented on at least two browsers. Even CSS 2.1, which became a Candidate Recommendation on 2007, is not yet "ready" if these guidelines are firmly met - but does this mean we cannot use it?
The capabilities of the new Web APIs are driving a lot of innovation between the community and developers want to take advantage of what they have to offer. To compensate for the lack of proper implementations on Grade A browsers, the community is creating countless shims and polyfillers that mimic native HTML5 API's.
When shims are not available or a more robust fallback solution is necessary, Flash and other technologies are being used to help developers write truly cross-platform code, knowing that it will eventually work one way or another virtually on every Web browser (and that includes Internet Explorer!).
What have we been doing
One of the most basic examples we can present you is the video tag on this blog. We present a bulletproof video solution using multiple codecs (h264, OGG and WebM) and targeting different application (iPhone/iPad, Android, Desktop, etc.). We do this with the good practices of the "Video for Everybody" initiative and the fine player from Jillion (SublimeVideo).
We are also working with other interesting APIs of HTML5 such as the new WebSocket protocol. By combining Node.JS for Evented I/O, Socket.IO for WebSocket abstraction and channel management and, finally, Redis for PubSub messaging functionality, we are able to present our clients performant, realtime communication solutions without requiring third party plugins by relying on the native browser implementations (Safari 5, Chrome, Firefox 4, Opera 11, etc.). For all others, we use Flash sockets (WebSockets implemented in Flash).
We mentioned that cleaning our HTML template was crucial to make content more relevant. Microdata is also a very important aspect of the semantic web, as are the new markup element of the HTML5 spec. It's a specification that allows content description by type, like reviews, events or a person information. It uses simple attributes in HTML tags to define names and properties that relate to a certain type. For instance, on UploadLisboa we used the Event and People types to make search engines understand better what the content is all about.
HTML5 also brings a lot of innovation to the uploading drama of the web. By combining the power of FileReader and dataTransfer, we can leverage the easiness of common operating system tasks like drag-n-drop with pain-free file uploading. FileReader gives us the ability to do chunk, stream and multipart upload, which greatly improve robustness and speed of this operation and, of course, upload progress. If the API is not present, we fallback to other solutions such as Flash or Silverlight. This was how we provided support for large file uploads (100 MB+ TIFF format) to Encontros da Imagem Emergents DST photo competition.
Performance has always been a priority for us since day one. However, due to growing demand of faster responsiveness from new projects and to an increased web audience, we have been working towards new techniques and code optimizations to make sure that priority is respected. We have been using basic optimizations like CSS sprites and sliding doors to reduce the number of GET requests, but only recently have we been making a standard to compress CSS with MinifyCSS, compile and compress JS with Google Closure, optimize script execution by markup position, loading them using asynchronous mode, using Content Delivery Networks to leverage parallel downloading and caching, as well as using Cache-Control policies, optimizing images and gzipping content.
This is just a glance of what we're doing here at the Seegno's offices. We hope to role out these new techniques in the near future to all our projects, giving a very small contribution to make the web just a little faster.
December 1, 2012
August 31, 2012
October 2, 2011
June 30, 2011
March 1, 2011
December 23, 2010
December 9, 2010
November 10, 2010
November 2, 2010
September 23, 2010
August 10, 2010
July 7, 2010
June 28, 2010
June 16, 2010
May 1, 2010
January 11, 2010
November 16, 2009