Thursday, June 10, 2010

Simplifying HTML Part 1 of 4

HTML is difficult. It is difficult because there is a mountain of stuff to learn. Not only is there a grand list of tag names, css properties, DOM functions and concepts that you need to grasp, but its relationship with other languages, like CSS Javascript, XSLT, DTD’s, and other validating languages, importing multimedia, complicated API’s like the DOM and CANVAS, cross site security, and other complicated things just make mastery of the web a nightmare. And that is not even touching on cross browser incompatibilities. HTML is goddamned difficult.

So how do we go about making this easier?

Douglas Crockford, the legendary senior software engineer who works for Yahoo, advocates a strategy of sub-setting to simplify the Javascript language. Douglas Crockford wrote a book: “Javascript: The Good Parts” in which he documents how he discovered that by taking things out of the language, and ignoring them, he could make Javascript much more powerful, secure and easy to learn. Another side effect is that it becomes much easier to write interpreters for simplified versions of the language. Douglas Crockford’s extreme subset of Javascript, JSON is so easy to learn, and such a powerful concept, that it has spread to have parser implementations in nearly every vaguely useful programming language. I think the same could be done with HTML.

In this series of blog posts I will define a simplified version of HTML that I will call KISSML. I will simplify it by not just removing things from the language, but consolidating, generalising, and humiliating as many special cases and arbitrarily separate concepts as possible. Unfortunately, this effort of mine falls short of the Crockford ideal; The domain all possible valid KISSML documents are not all valid HTML. This is because by simplifying it, I make it more powerful and expressive. In theory, a KISSML to HTML ‘compiler’ might be possible for backward compatibility (until everyone has upgraded to KISSML browsers!). For the purposes of this blog post, I won’t concern myself with the details of how that would work. I realise that redefining and rebuilding HTML from scratch has been attempted (and failed) many times before. Let me be up front about this: The big nasty complicated HTML5 with all its warts and flash plugins and horrors is not going away for a long long time. Consider this a thought exercise (but if anyone wants to actually implement this, I certainly won’t complain).

i will define KISSML in relation to HTML in terms of:

  • What to remove: (The Bad Parts)
  • What to generalise and consolidate: (The Powerful Parts)
  • What’s left, What it is: (The Good Parts)
  • And its relationship to other technologies: (The New Style)
What to remove: The Bad Parts

So what do I remove? I will start by removing all the different tag types (for now) because it is easier to start with a blank canvas as far as that is concerned. KISSML is an extensible markup syntax, like xml, However, unlike XML, there is no requirement for an outer enclosing “root” element. Removing this requirement means that KISSML can be a true markup language in the original sense of the term. KISSML is a markup language in a way that XML and HTML cannot be. The immediate practical advantage is that *this* very paragraph counts as a valid KISSML document. Without having to modify it, wrap it, add headers, or parse it, this is KISSML. Multiple KISSML documents can be concatenated directly, with no special processing. The result of concatenating two valid KISSML documents is a new valid KISSML document. You can’t do that with HTML or XML, and yet it is a task that must be done constantly. Vast numbers of web developers are living in sin! Much like banning sex or alcohol, those who would forbid naked HTML from being considered valid seem to misunderstand something fundamental about how people actually behave. It is a goal to consider *most* html fragments, as produced in the previous two links, as valid KISSML.

On that note, <head> and <meta> need to go too. I already said I was getting rid of all the different tag types (for now), but these ones aren’t coming back, unlike some of the others. Their existence is a contradiction. they are meant to define “metadata” and yet here they are inside the data. it doesn’t make sense. We have learned through trial by fire, again and again, since the web was created that trying to hide information in an html document is stupid. If you can’t see it, it may as well not exist. Users can’t see it, search engines don’t look at it, developers typically ignore it or avoid it. Browsers ignore (most) of it. Hence, it seems to me <head> and <meta> are almost completely pointless. The few things that meta tags *do* have an effect on could be achieved through better methods. <title> is visible, sort of, but there can only be one. In a multiply concatenated document, which <title> do you choose? This will be a theme: anything that prevents the concatenation rule from working is deleted from KISSML.

HTML entities. In HTML, and XML, in order to insert a special character, you must use the & followed by some special name, followed by a ;, as in : “Bill &amp; Ted&apos;s Excellent Adventure”. Not only does this look ugly, but it also leads to two of the most frequent mistakes made in web development land. The first is using the ampersand & character without encoding it into an entity, like this: “Bill & Ted”, a mistake that leads to an invalid document, and breaking parsing software not prepared for the situation. The other mistake is made by software developers and spec authors who do not specify what their software expects from a blob of text. As a result, there is a confusion of entity encoded html, plain text, and non encoded html that gets dumped into attributes and text fields without rhyme or reason. This is a particular problem for RSS which leaves it up to software to decide whether elements contain encoded html, or plain text! Really, most of what html entities are used for should be done with UTF-8 instead. Which leads us to...

Encodings other than UTF-8 need to die. I mean that as politely as possible. Quite simply, I’m sick of seeing text encoding muckups, like apostrophes being turned into euros, and such.

Not only does the existence of numerous myriad different text encodings make files difficult to parse and display, it makes client/server interaction difficult too. AJAX in IE fails when it encounters a server that proclaims an encoding IE doesn’t recognise. Things get sticky when a page is served with one encoding, but the server requires form posts in another. UTF-8 only should be used from now on, and browsers should assume they are receiving UTF-8. That way, if things break, the vast flowchart for troubleshooting text encoding issues is reduced to just one question: Did you use UTF-8? If no, use UTF-8. If yes, someone else failed to use UTF-8. Why UTF-8? Because we’re moving in that direction anyway, and UTF-8 theoretically has no upper limit to the number of glyphs it can represent. UTF-8 is good, and you can use it to represent funny characters like snowmen, and umlauts.

Frames: Better arguments than I can come up with have been made elsewhere. Needless to say, frames need to go, but not without being replaced with something better, because the USE CASE for frames still exists. It’s just that frames are a bad solution to that use case.

The Script Tag: Surely there must be a better, more secure way of making a web-page scriptable! Remember that we’re expecting users of our sites to enter content in forms. We then take that user entered content, and display it on our sites with full privileges and abilities. The existence of the script tag, or any other way to modify the browser behaviour in the markup language itself makes securing these forms incredibly difficult. Markup should be, quite simply, markup and nothing else. Otherwise, XSS exploits ahoy!

The Style Tag: for symmetry with the elimination of the script tag, let us affirm that we shouldn’t be mixing these powerful languages in with the markup, because once you’ve spilled oil in the ocean, it’s really really hard to get it out again.

TO BE CONTINUED IN PART 2: THE POWERFUL PARTS

Sunday, May 23, 2010

Cultural Matrix: C.A. 2005

Cultural partical simulation

Each individual is populated with a collection of multidimensional memes. The position and color of each meme is stored in an individual's mind, which is in turn presented as an object in a 2 dimensional plane.

The goal of this is to abstract a meme into a simplified object with a position and color in a person's mind, giving color and contour to an individual's mind.

The more contact an individual has with other individuals, the more their memescape comes to resemble that of its peers, often taking on new memes, and new territories are opened in their individual memescape.

This comes with neccesary improvisational algorithms which enable each individual to assimilate sections of memescape into their own cultural matrix.

An individual will feel most comfortable communicating with peers with similar memescapes, and gravitate towards memescapes which they have found to be compatible with their own. However, depending on certain attitudes encoded in their cultural matrix, may gravitate toward diversely appearing individuals, or conversely toward similarly appearing individuals. This may also depend on the size and color of their memescape.

The effect of mass encultration on various groups may have interesting effects as well.

The overarching goal of this simulation is to produce an interesting and complex visual presentation which enables one to more simply and visually think about these complex abstract concepts.

The precise parameters of the simulation still require much development, but overal may produce an interesting emergent behavior.



Meme:
Each meme consists of a multidimensional point (the number of dimensions being adjustable, as long as it is equal or more to 2) , a color (consisting of a 3 dimensional position in a color space such as L*a*b), and a directional vector of dimensions matching that of each meme's position. A meme's vector would consist of the averaged directions of a set of peer memes selected according to a process in which an adjustable threshold is used to identify similarly colored memes. Therefore a meme would gravitate toward memes of similar color.

The peer memes selected in the aforementioned process would be connected, in addition to unarticulated rules to produce the cultural matrix


Cultural matrix:

A cultural matrix is composed of a collection of memes interconnected according to a set of rules which allows for random and intuitive improvisation. This matrix would be processed in such a way to be capable of producing a visually representable landscape. Additional rules may be made to evaluate one matrix's similarity to another's.

Wednesday, February 24, 2010

This is not what you think it is.

The two sat together awkwardly. The memory of what happened sat ajar between them. He thought that he should stroke her hand to comfort her but he stopped himself once he realized his palms were sweating profusely. Her brow was tense, and her knees tightly clamped. "this isn't how it is in stories", she thought.

For the past 3 weeks she watched him longingly. She admired from a distance the graceful way he walked, his calming smile, the sense of gentle warmth he projected. She frequently imagined what it must be like to be embraced by him. She would never see love the same way again.

He nervously looked out the window. Hoping for a blissful end to this moment, he considered jumping out. Unfortunately, the window was stuck fast. He was recalled to what his heart felt; like a frightened sparrow beating against the glass of his chest.

Since the day she arrived on campus, he was enamoured. Her beauty was both captivating and intimidating. His excruciatingly gentle and repressed nature meant he would never feel comfortable approaching her. If he were to so much as say “hello”, he would make himself feel as though he were causing some terrible kind of violence upon the poor girl. If he were to even think of her lustfully, he would never forgive himself. Now, everything would be different.

The smell of sticky skin permeated the air. The weather was uncomfortably warm and humid. She unwillingly leaned into him as the bus turned. “how long until my stop?” she thought.

Saturday, January 2, 2010

The mating habits of the christmas reindeer

The ritual begins when the population of reindeer shed their summer coats, revealing the golden shimmering skin underneath. The reindeer then congregate, forming two large orbs (one male, one female). The golden orgy froths and frenzies for 12 days climaxing in a spectacular "fireworks" show in which the gendered gametes are projected from each orb at extremely high speed. The force of the collision forms a mushroom cloud, and destroys the christmas village. The new Santa Clause is formed at ground zero, which then distributes reindeer spores in multicoloured box shaped packages all around the world. Once the santa completes its jolly task, he returns to the spawning ground and melts into a highly fertile mound from which grows the first tree of the new christmas village, marking the spot to which the reindeer will return for next year's mating season.

Monday, December 21, 2009

Canvas Accessibility.

There has been some discussion going on about Accessibility in the html5 Canvas Api.
You can see such discussion here:

http://www.paciellogroup.com/blog/?p=362
http://www.brucelawson.co.uk/2009/canvas-accessibility-and-svg/
http://krijnhoetmer.nl/irc-logs/whatwg/20090710#l-20
http://lists.w3.org/Archives/Public/public-html/2009Jul/0372.html
http://esw.w3.org/topic/HTML/AddedElementCanvas

In case you don't know, the canvas API provides a postscript-like drawing api to javascript running inside webpages. It was introduced by apple to provide a richer graphical experience for the "dashboard" feature introduced in their OS X Tiger.

The argument on one side seems to be that if you don't bake accessibility right into the API such that programmers don't have to do anything particularly special to make it accessible, then people just won't do accessibility.

There's the extreme position that the canvas API just should never have been added to browsers in the first place, and it shouldn't be in any standard, because it's inherently not accessible.

Then there's reactions to the extreme positions, that argue that sometimes we just need to make content that is inherently not accessible to everyone, and this is okay, and they are legitimate forms of expression. And besides, we don't ask that everyone put wheelchair accessible ramps on their houses, and so we shouldn't require every single website be accessible.

Of course there already is a simple accessibility mechanism built into the canvas tag: Simply put some plain text inside the canvas tag as fallback content. If a client doesn't understand the canvas tag, it will simply display the text content.

A counter example to that approach that is being used, and which I believe sparked the debate is Bespin. Bespin implemented a widget/gui system that runs entirely inside a single canvas tag. They did this for performance, and for control over the gui experience. Static text content is not a sufficient fallback for such a program.

Here's my opinion: It will be a grave mistake to get distracted by projects like Bespin into thinking that the canvas api's accessibility features are lacking. A widget system is only one potential use for the canvas tag, and gearing an accessiblity design around this one use case will cripple the canvas API, and ultimately, I believe, make accessibility worse for uses that are NOT widget systems.

The truth is that I don't think there's any way to know, from the perspective of a browser that is receiving canvas API instructions, precisely what the meaning of those instructions are. Yes, it could be something like bespin, or it could just be a simple animation. It could be a graph, or it could be some abstract artwork. You could ask the programmer to provide hints in the API calls, but that's not really any better than the "tack on" accessibility that the accessibility proponents speak out against. However without such hints, all you see is "Curve, curve, rectangle, image, textbox" etc. etc. No way to know whether you can interact with anything, no way to know what the text in a textbox is referring to, and no way to know what nature of image a sequence of shapes is constructing.

A low level drawing API is the wrong target for accessibility. You might as well try and make the PNG image format "accessible" by allowing a screen reader to read out the color of each pixel, or making SVG accessible by making it read out loud each curve and shape in sequence.

For bespin, what you need to make accessible is its widget toolkit. That's the level of abstraction where you have some actual useful information. That's where you know whether something is a menu or a button or a text-box. There's already a standard called "aria" that aims to make dynamic widget toolkits in html accessible. The limitation in this case though, is ARIA's assumption that you'll have some kind of 1:1 correspondence between HTML tags and widgets, and its dependance on your ability to assign attributes to each of those html tags.

I think what we really need is some kind of low level accessibility API, at a level equal to the canvas API, but not cannibalizing it, and without attempting to combine them, or make them into the same API. Then to make programmers want to use it, you need to make it useful for things other than Accessibility. Here's a suggestion:

Let's provide a low level javascript API that makes it relatively straightforward to turn your javascript program, embedded in an html page, into a command line utility, an interactive terminal program, a webservice, or even the basis for a desktop application using a native OS widget toolkit. Just add a few extra API calls, and you get to reuse your efforts in multiple and many different contexts, accessible interfaces just being one of them by chance.

What's the best way to do that? I'm not sure exactly, but I think it's a more productive direction to explore than the futile task of trying to make abstract low level drawing commands mean something to a computer: Something which I think can only be achieved via advanced artificial intelligence of the sort that is perpetually 10 years away.

My instinct is to encourage MVC style programming via the design of the in browser API for constructing applications, the same way that Apple's cocoa encourages good MVC design by simply making it the path of least resistance. This would involve encouraging programmers to build a clean "domain model" version of their javascript programs, and making it incredibly easy to express the logic of that program through rich UI's (potentially using the canvas tag), or via a command line program/interactive console program/webservice/accessible client without changing the code of their "model" tier. Go further: make a model tier simply work on its own without any gui programming. Then adding a rich gui with graphics is simply enhancement. Make this the easiest way to write a program, and they will come. Consider the analogy:

html : css :: javascript models : canvasApi

Nobody complains that CSS is not accessible. Why is that?



One thing I think we should definately not do: Standardise an "accessible" version of the canvas API that doesn't have a single implementation, and hasn't yet gone through the trials and tribulations of real world practice.

Thursday, August 6, 2009

Another javascript pitfall: Hoisting

The problem is that, whether you realise it or not, javascript invisibly moves all the var declarations to the top of the function scope.

so if you have a function like this


var i = 5
function testvar () {
alert(i);
var i=3;
}
testvar();


the alert window will contain undefined. because internally, it's been changed into this:


var i = 5
function testvar () {
var i;
alert(i);
i=3;
}
testvar();

this is called "hoisting". The reason Crockford so strongly advocates var declarations go at the top, is that it makes the code visibly match what it's going to do, instead of allowing invisible and unexpected behavior to occur. function definitions are also hoisted to the top of the scope.

Putting a var inside an if statement is not against "the rules" of the language, but it means that, because of var hoisting, that var will be defined regardless of whether the if statement's condition is satisfied. Javascript also does not have block scope, so declaring a variable inside a block is doubly confusing to those who come from languages that do have block scope, because of hoisting.

Keep in mind also that hoisting does not include the assignment, so the var declarations will be moved to the top, and left undefined until they're assigned later, as in the example above.

This is a feature that must have seemed like a good idea at the time, but it has turned out to be more confusing than helpful.

Sunday, August 2, 2009

Insomniac Theater, A dream

I had a dream about a particular cinema. Not one that I know if in the waking world, but one that I visited quite avidly in this dream world.

At this theater, you could purchase a ticket to see a contemporary movie at around 11:30pm at the regular price. Then, you could stay at the theater on until 6am, and watch classic/old/public domain movies and cartoons for free.

The theater would recoup the cost of this through sales at the snacks counter. This might actually work, sleep deprivation can make people quite hungry.