Grid Layout comin’ to a Webkit near you

Posted on by Jon

I heard on twitter from my homeboy Peter Beverloo1 that Google are gonna start implementing CSS Grid Layout in Webkit. This is rad news for web devs, for a few reasons:

Firstly, CSS Grid Layout is just great. It’s a proposal from Microsoft on a new way to layout HTML components via CSS. See, one big problem with HTML/CSS over the years has been that the layout model was meant for documents, not for application UI. Document layout is pretty simple, you get a width as input, and then you lay words out in rows until you reach the end of a line. Then you go to the next line, and continue until you run out of words, at which point you get a height, and you can render a resulting box. Unfortunately, this doesn’t work at all for the layouts with buttons and widgets and columns and all the other crap that UIs have.

Web devs needed to find a way to build these kind of UIs on the web. The first way they did it was using HTML tables, because tables are pretty much perfect for building those kinds of UI. However, the problem was that HTML isn’t meant to be presentational, it’s meant to be “semantic”, where elements express the meaning of data rather than how it looks, and using tables for layout violates that principle. Presentation was meant to be controlled using CSS. However, CSS was originally created for styling documents, not laying out UI. It didn’t provide any obvious way to achieve equivalent results, nor was any such functionality forthcoming. Instead, web devs learned to abuse features such as margins, padding and (especially) floats to get the results they wanted. Later-on absolute positioning came along, which made things easier, but was still far from a silver bullet.

This difficulty lead to a schism in web development between those who build web sites using tables for layout. and those who use CSS. And it’s one that you still see see today, whenever people in blogs, forums, etc. discuss the topic of web development. A lot of developers, especially those who only do a bit of web development, really hate CSS. They don’t see any problem using tables for layout, and override objections with the argument that it is simply too awkward to try and build complex layouts with CSS. Most of these people aren’t building web sites for fortune 500 companies, more often just small firms and internal tools, but they’re still a sizeable group of vocally dissatisfied customers. Arguing back is usually an equal number of CSS apologists who are adamant that using tables for layout is an abhorrence, and that everything is easily achievable with CSS.

While I don’t use tables for layout, I do have sympathy with the former of the two groups. Building UIs with floats and margins is a horribly unnatural and unintuitive process, especially for the beginner. These features were never intended to be leveraged in this way, and in that respect it’s an abuse just as much as using tables for layout was. It’s also an approach that is practically impossible to build good visual tooling experience around. Something is badly wrong when doing things the “right” way is so difficult.

Some better means of laying out pages via CSS was badly needed, and for years the W3C worked on various half-assed proposals around adding columns and weird ASCII-art based templates, but nothing practical ever arrived in the browsers. Things weren’t helped of course by this being Internet Explorer’s wilderness years, where it was enjoying 90%+ market share and 0% development effort. However, while they were ignoring IE, Microsoft were building WPF and Silverlight, two closely related technologies that took a lot of inspiration from the web, while attempting to improve it. One such area of improvement was layout. In particular, they provided a grid layout container that could be used to lay out controls in rows and columns.

Finally, a couple of years ago, Microsoft started getting serious about the web again, and putting a lot more effort into improving IE and participating in the creation of web standards. They submitted a number of proposals to the W3C, and one such proposal was Grid Layout, essentially an adaption of the model they developed in WPF and Silverlight for HTML and CSS.

The key thing about Grid Layout is that the structure of the grid is not specified in markup. There are no <tr> and <td> elements containing things. Instead, there is just a container element of some kind, perhaps a <div>, and some other elements within it, and then the grid is specified through CSS properties that target the elements via their id.

While the grid layout is a major improvement on floats and margins for hand-coded layouts, its real strength is that it’s eminently toolable. It should finally be possible to build a visual design tool for HTML and CSS that is…

  • Intuitive
  • Powerful
  • Round-tripping
  • Produces clean and straightforward markup and CSS

Truly a promised land, eh? We’re not quite there yet, but the holy grail of easy layout for web UIs is within our grasp.

Microsoft themselves have already implemented Grid Layout and shipped it in previews of IE10, so it’ll be available on Windows 7 and Windows 8. There’s still the long tail of IE7-9 users to worry about, but at least there’s light at the end of the tunnel. Firefox doesn’t yet appearing to be working on support, although I expect they’ll try to get one in time for the Windows 8 release in order to stay competetitive, especially if webkit also has an implementation. There is a Firefox bug open here, voting on it can’t hurt.

1He’s not really my homeboy, I don’t even know him.

Development Developments

Posted on by Jon

Work has been pretty crazy over the last few months, hence my not finding the time to write much here. As evidenced by my previous posts, when I do write I tend to ramble on for pages at a time, so rattling off a quick new post here and there wasn’t really an option. However, now that I’ve got my weekends back, I might have time to start blogging a little more, particularly on the technical side.

The past six months have been spent working on two projects. The first of these was a fairly significant Silverlight application for a financial services company. The second, which I’m still working on, is an AJAX intensive website for a property company. Somehow, through this work, I’ve transitioned from being a mainly server-side developer to being a mainly client-side one. Right now, 90% of the code I write is client-side JavaScript, which is something of a change from the 100% C# I was writing before this.

It’s certainly a change, but not an unwelcome one. I’ve always had an (un)healthy fascination with browsers and the client-side, um, side of web-development, but traditionally at my  firm, “real” programmers have done the server stuff, while designers and front-end specialists have handled the scripting stuff alongside the photoshop, HTML and CSS work, with little crossover between the two. However, the realities of, firstly, developing in Silverlight, and secondly, developing a complex AJAX interface, have meant the lines have become somewhat blurred.

The Silverlight project was an interesting experience. I’m not really a fan of proprietary web stacks, being more of an open-web advocate. Albeit one who is often driven to despair by the politics of the standardisation process and the glacial rate of advancement (mainly due to IE version lag). It also became increasingly clear as the project went on that Silverlight as a technology was sitting on a rather shaky foundation, as the news coming out of Microsoft regarding its future was not promising. In fact, just last week the shoe dropped, and Mary J Foley all but confirmed that the next release of Silverlight, version 5, will be the last.

What happened to cause this is, of course, the rise of the Smartphone and iOS, and the decline of Flash. Silverlight was developed by Microsoft purely as a competitive move against Adobe, in the days when it genuinely seemed possible that Flash might take over the web. Now that everyone agrees that isn’t going to happen, and focus is instead switching to “HTML5″ for the web and integrated app stores selling native apps. Indeed, even as we were finishing up work on the Silverlight app, work was beginning on an alternative HTML version to run on mobile platforms. From what I gather, that version may end up supplanting the Silverlight app on desktops as well.

It might sound like a frustrating experience, to invest that much time in what appears to be a doomed app and platform, but it was actually an incredibly useful one. As I said, I have no love of proprietary web stacks, and will not shed any tears over the death of Silverlight for that reason. On the other hand, I cannot deny that it is a fantastic piece of technology is many respects. It’s clearly the product of some smart people who looked at web development, understood what worked about it and what didn’t, and tried to make a technology that improved upon it. In some respects they succeeded, in some they didn’t. In some respects I think they succeeded even in-spite of themselves.

Working with Silverlight, and learning the patterns and practices required to implement a complex app, really helped me grasp the right way to build for the client-side web, in particular the use of the MVVM pattern and asynchronous operations. In many ways Silverlight forces you, or at least strongly encourages you, down the right path in these areas, and this is tremendously useful when you move back to regular web development using HTML, CSS and JavaScript. That is something I want to expand on in future posts, and go into the kinds of libraries and patterns that have been particularly useful in my latest work project. I think that’ll do for now though.

Hacking Hacks

Posted on by Jon

The News of the World phone hacking scandal has provided no end of entertainment and office chat over the past week. I must admit to getting swept along with the mob spirit and sending a few polite emails to various companies, expressing my wish that they cease advertising with the paper due to its nefarious activities. It’s all a bit of self-righteous moral masturbation of course. After all, the British social-networking crowd were recently falling over themselves to aid newspapers in exposing the private affairs of Ryan Giggs and other celebrities, who were using super-injunctions to keep details of their private lives out of the tabloids. And now everyone is waging war on the News of the World for going too far in giving people exactly what they want, and seem to believe they’re entitled to?

But you know what, fuck it. I never buy tabloid papers, and it’s nice to engage in a little moral posturing and schadenfreude when the targets are as disagreeable as Rupert Murdoch and his cohorts. I do feel a little sorry for the journalists who will lose their jobs now that the News of the World has been shut down. They’ve basically been used as human shields in News International’s desperate attempt to protect Rebecca Brooks at all costs. However, I’m not sure I buy into all their teary eyed laments that NotW was a great paper and its closure a terrible loss. Looking through their website now the paywall has been pulled down, it just seems like a fairly worthless mix of tits, celebs and right-wing political rhetoric that the country won’t be much poorer without.

I also got involved in the campaign to stop Rupert Murdoch from taking over BSkyB, by submitting an entry to the government consultation on the matter. They’ve already achieved a minor victory, as the submission of over 100,000 responses to the consultation apparently means the decision will be delayed until at least September, as they examine every single response as they are legally required to do. If you want to contribute yourself, the consultation is closing on Friday 8th July, so I suggest you submit a response as soon as possible.

I didn’t send the form letter the campaign provided, as there seemed little point. It opines that the takeover is undesirable for various reasons, but the government’s line seems to be that its hands are tied as it can only block the deal on the grounds of media plurality, not on ethics. Therefore, I decided to write my own response, attempting to present a quasi-legal argument why recent events do in fact have a bearing on whether the deal affects media plurality. I don’t have the exact text of what I sent, so I can’t include it here (I may have used some language that it wouldn’t be wise to openly publish anyway), but I’ll try and provide a summary.

I am not a lawyer, so cannot really make a properly informed legal argument, but I decided to at least start by looking at what the law says. In particular, I found a Media Plurality Dossier by the London School of Economics that included an interesting quote from the relevant legislation:

2a.1. Enterprise Act 2002

“Section 67 allows the Secretary of State to intervene in order to protect legitimate interests, including that there is a sufficient plurality of persons with control of media enterprises.” http://www.legislation.gov.uk/ukpga/2002/40/contents

The use of the word “sufficient” seemed particularly interesting. What is “sufficient” plurality of the media? It seemed to me that if there was a case to be made, this was a promising area of attack.

News International has allegedly been involved in a wide range of illegal and immoral activities, and also an effort to cover-up that activity that has continued for a number of years. Some claim this attempted cover-up is still ongoing. Perhaps of more concern however, is that there seemed to be little appetite to investigate News International and hold them to account. The metropolitan police, the government, the Press Complaints Commission, the government; all of them failed to give the oversight that it is their responsibility to provide. Even the rest of the press, with the exception of the Guardian, were highly reluctant to investigate or cover the story.

Why did this occur? The most plausible explanation appears to be that News International was powerful enough that it could frighten politicians, dissuade police officers, pay-off victims, and silence journalists. And it did exactly that for many years. Its power stemmed from the scale of its reach within British public life. It had too many newspapers, too many people on the payroll, and too many friends for anyone to cross it and expect to win, especially in the highly-political upper-echelons of bodies like the police, parliament and national newspapers.

This situation came abount due to the plurality, or lack thereof, of the British media. Too much power has been concentrated in the hands of too few, unaccountable individuals. In this context, for the plurality of the media to be eroded even further, by allowing News International to take full ownership of BSkyB, seems highly foolish. It is clear that, instead, the definition of what is “sufficient” plurality needs to be examined in light of these events, with the likely conclusion that organisations like News International should be owning less of the media, not more. Media plurality over the past decade has obviously been grossly insufficient, and contributed to a media and wider establishment wholly unequal to the task of holding News International to account over its actions.

That was pretty much the gist of my argument, although I couldn’t resist getting in one, slightly cheeky, final point. Given that there is an ongoing police investigation into criminal activity by the News of the World, and that there is grounds to suspect that News International used its influence to unduly disrupt attempts to investigate and expose this activity, wouldn’t any decision by the government to extend News International’s influence even further mean it was essentially acting an accessory to this activity? Not a position that government would want to be in, I’m sure!

That was more or less what I sent in. Given how quickly things are changing, the next days and months may render current questions about the takeover of BSkyB moot anyway, but I’m still glad I made my voice heard, in however small a way. I encourage you to do so as well. It really is therapeutic to unload on an issue like this, with the hope, however small, that it might have some effect or do some good somewhere down the line.