Public

HTML5 at Lithium

Lithium Alumni (Retired)

If you find yourself playing a game of buzzword bingo, there's a good chance HTML5 is going to be an item on your card. But what is it, and should you even care? After all, we've been using HTML(4) for quite a while now (since 1997!) and it's been treating us pretty well. I mean, have you seen the Internet lately? It's nothing short of amazing.

 

A bit of history

 

HTML5 LogoHTML5 is a technology a long time in the making. In 2004, the Web Hypertext Application Technology Working Group (or WHATWG, for short) realized the way we were using the web had changed considerably since HTML4 was adopted, and decided to extend it to meet the needs of the growing web. Between then and 2008, a lot of debate and uncertainty crept in, at one point, a "recommendation" date of 2022 even being proposed. But in 2011, the WHATWG transitioned HTML into a "living standard," stating that it will never be completed and will be continually improved and updated.

 

OK, but why should I care?

 

The good news about this "living standard" is that we benefit from updated features as they are recommended, and don't have to wait until some "completed" state of the language to exist. At Lithium, we take care to add new features while striving for backwards compatibility. This helps us seamlessly upgrade your community on a regular basis. As such, adding certain HTML5 features are easier than others, but we're as eager as anyone to provide you the latest the web has to offer. For now, here's a quick run-down of some of the things we've implemented:

 

The placeholder attribute

 

HTML5 Placeholder

HTML5 introduces a handful of new attributes for "<form>" and "<input>" elements. The placeholder attribute allows an input element to specify default hint text when the field is empty. The text disappears either when the field gains focus or text is entered (it depends on the browser). We've added support in Lithium Studio to add this hint text to most form elements. All you need to do is add a new text key to supported elements--currently, "<textarea>" and "<input type=text>"--and the text will show up automatically. For example, adding placeholder text to your search form is as easy as adding this text key:

 

form.SearchForm.field.messageSearchField.placeholder = What are you looking for?

 

The general format is form.[form-name].field.[field-name].placeholder = [value].

 

Drag and drop

 

Drag and dropSoon, we'll be making it easier for you and your customers to upload photos to posts. HTML5 adds the ability to define drop zones on pages. Simply drag a file from your computer into one of these zones (for example, a message editor), and the file will be automatically uploaded, utilizing another new HTML5 feature: the ability to upload binary data using Ajax. We're using the recently announced social marketing solution as a testbed for this new drag and drop interaction.

 

 

 

CSS3

 

CSS3

Part of the HTML5 specification adds new selectors and properties (among other things) to CSS. As browsers have started to support these features (e.g., border radii, background gradients, downloadable fonts, etc.), we've begun adding support for them in our product. And if your browser doesn't support them, we'll do our best to degrade our pages gracefully.

 

Future additions

 

These features are in no way where we stop; we're always looking for new web technologies to adopt. Be they WebSockets, seamless iframe support for ActiveCast content, browser history management or others, we look forward to staying on top of the web as it evolves.

 

adamt-bio.jpg

Adam Traver is a Senior Software Engineer on Lithium's Engineering team.

 

He spends his days creating new product features that you're going to love and his evenings as one of Lithium's resident table tennis gurus. Follow him on the Lithosphere as AdamT. Looking to join the Engineering team? Check out Lithium's careers.

4 Comments
Honored Contributor

I'm really looking forward for these new advancements in the Lithium technical platform to adjust to modern web technologies. Thanks for explaining what to expect. Keep it coming.

Lithium Alumni (Retired)

You guys may have caught this, but one of the most frustraiting things I ran into with the placeholder script is that there is no support for ie9. There's a few shims out there, and some jQuery support.. but it starts getting pretty heavy again, esp. for something that started off as just placeholder="..."

 

Other than that, awesome stuff. Look forward to playing with some of the HTML5 stuff in Li.

Lithium Alumni (Retired)

Very true, Vincent.

 

We've historically used a simple script to check for placeholder support (something like, if ("placeholder" in document.createElement("input")) ...) and then proceeded to use a simple polyfill if no support exists. Unfortunately, simple solutions have their edge cases (like supporting @type=password), and we're now looking into libraries like jquery-placeholder. They're definitely more heavyweight, but in striving for completeness of the API, it seems there aren't many (any?) alternatives.

Valued Contributor

Any update for HTML5 support in Lithium?