Back to the Future: HTML and Javascript in 2013
It has been a long time since
- I Rock and Rolled
- I HTMLed
Recently, I've made a bit of time to pick up my Les Paul and remember how to noodle away at some of my favourite Led Zeppelin numbers (and discover I'd re-purposed a bunch of those neurons; not to mention worn away the callouses on my left hand, dammit. They're a bit of a bloody1 mess again.)
I've also returned to writing some HTML/Javascript, and was expecting another bloody2 mess.
It wasn't quite as bad as I feared. Still not great, but not quite as bad. Some quick thoughts.
The Good
- If you use a framework like Bootstrap, along with Modernizr then you are in pretty safe hands when it comes to layout across all semi-modern browsers from IE8 to IE10, Safari, Chrome and Firefox.
- The box model problem is more-or-less dealt with; you can get most browsers to behave the same way, despite the terrible, terrible specification and gross illogicality of the original Chrome/Firefox way of implementing it.
- The aforementioned semi-modern browsers can all manage to render transparency, including (using their own proprietary extensions) transparent gradients. (That link is to a great cross-browser gradient editor.)
- Semantic elements. It makes HTML much more readable (let alone processable) if a page contains
<header/><nav/><section/><footer/>elements, rather than a total random spattering of<div>.
The Bad
- Most of the examples out in the wild are just terrible. Don't even think about (re-)learning HTML from the web. You need a more reliable guide. But there isn't one. So you're going to have to do it by trial and error.
- A corollary of this is that a lot of the tricks that you learned in terms of making stuff work cross-browser just aren't the best solution any more. Many things (fixed pixel sizes, background images etc.) are actively evil in a responsive world.
- IE7 is still out there in the wild and is a curse
- Firefox is currently the annoyingly quirky browser (odd application of negative margins, and a weird way of applying zoom, for example). This is not a downer on Firefox. Someone's always going to be the quirky one. Historically, it was IE; Chrome was in that position about a year ago; and right now it is Firefox. With 3 major browser engines out there (Mozilla, IE and WebKit), it is not surprising that one is often out-of-line with the other two.
The Worse
We're still living in the dark ages of the developer experience.
The Debug Experience (in Visual Studio, Firebug, WebStorm or whatever) is like going back to the dark magic of debugging assembly language programs. The code-writing experience is much, much better (semi-reasonable intellisense, for instance), but even that leaves a lot to be desired.
Javascript libraries are a fragmented mish-mash of total crap and the data structures and algorithms you get "out of the box" aren't exactly a rich toolkit of basic developer needs. It is quite obvious that HTML/Javascript has been the domain of non-developers (whatever their job title) for a very long time.
How do people deal with this? Solutions like Less on the CSS side, and Typescript or Coffeescript on the language side offer a way forward for some of the "too-low-level" issues, but have even worse tooling support. WebStorm is improving all the time as an IDE, but is still a bit raggedy round the edges.
On the plus side, I did, in general, enjoy the foray back into HTML/Javascript; but spending some quality time with HTML reminds me what a comparatively great experience it is building apps in C#/XAML (the many, many negative aspects of which seem to pale into relative insignificance.)
