Lokesh Dhakar Lightbox Creator On HTML CSS and JS

Our professor Patti Chan asked Lightbox creator Lokesh Dhakar to be a guest speaker in our class today and talk to us a bit about where the language of the internet is going. Lokesh Dhakar is an independent designer, developer, and consultant who lives in Baltimore and supports his highly acclaimed and widely used script called Lightbox. Some of his current work focuses on user experience using HTML, CSS, and Javascript together. He has recently completed a redesign of Scilink which is a social networking site for scientists and is also working with a new startup, Taggart Software, to build a web-based solution for the mortgage industry on the user interface side of things.

After a few technical difficulties Lokesh cracked open his moleskine and began talking to us about the stuff the internet is made of – code. He told us his main focus in his work was on user experience through a cooperative effort between HTML, CSS, and Javascript.

HTML 5

Lokesh took us on a short tour of some of the new features of HTML 5 which is in the works and is coming out shortly.

The <video> tag is a new addition and makes it much easier for the developer to add video and motion into a web page. It helps avoid using flash to embed or other more complicated techniques. The tag interacts with traditional javascript and lets you have a lot of inline control inside the tag.

The <audio> tag was next up and we could start to see a trend of media on the web becoming more important. The importance of video and audio on the web is continually increasing and these small updates to HTML will only feed this. The audio tag is a proposed addition at this point and is not currently supported by any browsers.

There are also a few very useful elements to be added in HTML 5. Rather than coding a site will a million different <div>s with different ids and classes, HTML 5 adds some new elements to your code, adding to its level of semantic markup. <header>, <footer>, <nav>, <article>, and <sidebar> will be added.

I asked Lokesh what he would like to see added and supported by HTML 5 and he gave the answer that every designer wants to believe is possible – support for more fonts on the web. This struggle is certainly happening behind the scenes and not so behind the scenes and hopefully it’s only a matter of time before the idea of those few web fonts are a thing of the past. Sitepoint suggests that you should do something positive to help this effort along in their article about the debate and it’s possible resolutions. Another must-read on the subject is A List Apart’s Interview With The Font Bureau’s David Berlow.

“To understand issues surrounding web fonts from the type designer’s perspective, we interviewed David Berlow, co-founder of The Font Bureau, Inc., and the ﬁrst TrueType type designer”

CSS 3

Next we talked a bit about what’s coming down the pipes of CSS in the form of CSS3, all of it pretty minor additions but very cool none the less.

The text-shadow property is a cool new feature for typography on the web and has a lot of potential for designers to do beautiful things with it. It is now supported by Safari 3+, Opera 9.5+, and FireFox 3.1 (currently in beta) and is a nice detail to add to your site if you do it tight. It also includes parameters for adding a blur to the shadow and all of this rendering is done through the browser.

Another cool little addition is the still under development column-count attribute for blocks of text. It uses the webkit rendering engine used by Safari and Chrome currently but will eventually be integrated into CSS 3.

A few other additions discussed were rounded corners with CSS, a CSS table element to deal with display inline display block issues, and multiple background images on one element. A lot of it seems to be legitimate ways to acomplish things that there are crude hacks for at this point.

Javascript

Lokesh also took some time to talk a bit about javascript in terms of examples that push the limit and the direction in which the language is headed.

We were thoroughly entertained during his lecture by Twistori, a Twitter based derivative of WeFeelFine created by Amy Hoy. It doesn’t use javascript that is all that complex but it is endlessly distracting in its user of keywords in tweets and highlighting them through the site.

In class we’ve been using Yahoo Pipes a good bit but Lokesh told us a bit about how the actual editor/creator works. He explained you can so most of the functionality of the web app with a few simple javascript libraries but they all lack the functionality to create new shapes on the fly which you need to do to use Pipes. Yahoo Pipes uses Canvas to do this. The canvas element is part of HTML5 and allows for dynamic scriptable rendering of bitmap images. It integrates with a corresponding javascript library to produce the effects that Pipes uses to make its editor truly functional.

280 slides was an example of javascript pushed to its limits. It uses the language to create a fully functioning web version of Keynote all in-browser. You can edit text, move elements, create new elements and overall is a legitimate and free competitor to Power Point and Keynote. This site too uses Canvas heavily for it’s functionality.

Google has also created a few examples using canvas to create 3d effects and visualizations which spells some interesting things in the future of javascript. One such example is the Google Trends visualizer all built with javascript.

Lokesh on Lightbox

When prompted by Patti, Lokesh talked a bit about how he came to write the first version of the lightbox script. When he first was beginning to write it, Lokesh had a personal blog that he redesigned and in his new design most of the images in the posts of the old design didn’t fit into his new layout. He was considering how to remedy this issue so that he wouldn’t have to be dependent on the layout of his site to have all the images fit. In creating lightbox he was attempting to solve the problem of a better way to display images in the browser.

Some of his user experience reasoning was that previously, many images were linked to blank pages with only the images in the top left corner. For Lokesh this wasn’t logical and seemed to break continuity and was an unnecessary page reload. For him, Lightbox keeps the user in the context of the site and doesn’t break the flow of user experience. Lightbox has come under some criticism but overall is a widely used, praised and cloned script.