Before I left uni, when I still didn’t know what I wanted to do, I found the WaSP group online and thought, “that’s amazing – people from all walks of life and competing companies no less, all getting together to make possibly the world’s most important invention a better place. I want to do what they do”

Many years later, as the web standards project closes its doors, I help to run a web standards meetup group, speak at conferences on web standards and evangelise their use every day. Thank you WaSP members for inspiring me to be where I am today.

Thank you so much

If you liked this, you may also like:

1. Project WOW on the Google App Engine Blog
2. Node & Tell at London Web Standards #lwsnode
3. SteveWorkman.com Launches

Massively exciting news: I am going to be speaking at the Future of Web Design London conference on their Rising Stars track! I’m going to be talking about “Putting your site on a diet” – an educational/technical talk on reducing the size of web pages whilst keeping all of the great graphics and interaction that is possible with the latest browsers.

I’m really pleased to be doing this talk, if you’ve got any specific topics you’d like me to mention, put them in the comments or twitter @steveworkman

If you liked this, you may also like:

1. Future of Web Design Sketchnotes – Day 1
2. Future of Web Design Sketchnotes – Day 2
3. Javascript Fun at London Web Standards #lwsfun

2013 is already shaping up to be a landmark year, I’m hugely excited about it already and can’t wait to share the first bit of news in the next few weeks (no, my wife isn’t pregnant – see this: http://instagram.com/p/T5k0Nqv0TL/)

If you liked this, you may also like:

1. LWS is 5 – Less on CSS and More on CSS!
2. State of the Browser 2012
3. The Guardian Mobile Business Summit 2012

The need for object-fit

A month ago, I was looking into creating a responsive grid full of images for a client. The width of the columns would vary depending upon device, and the dimensions and aspect ratio of the provided images could not be guaranteed.

The issue for me is keeping the images looking great, without skewing the dimensions and distorting the results, but I also needed them to expand or shrink to fit the boxes that they had been provided with.

Knowing CSS, the property background-size: cover|contain would do this perfectly (See this A List Apart article for lots more detail), but this is for background images, and semantically, the images in my grid are part of the content, so should not be background images.
Looking for an equivalent, I found Object-fit: part of the CSS3 Image Values and Replaced Content spec. Unfortunately, browser support for this is very poor; this is the current browser implementation of this property:

As you can see, as of September 2012, only Opera support this feature! Side note: there is one other browser (there has to be for this to be for the spec to reach candidate recommendation) which is the HP TouchPad, not very useful for the majority of users

This isn’t going to get anyone very far, given that over 90% of all browser usage doesn’t support this feature. So, whilst browsers catch up, we have to use a polyfill to re-create this functionality with JavaScript.

Object-fit polyfill

The polyfill is based on jquery-object-fit by Simon Schmid, to which I’ve made some improvements:

• Added support for cover
• Fixed the implementation for IE and Firefox
• Added feature detection so it uses the native implementation where possible
• Made it re-calculate on resizing the browser for responsive layouts
• Added a more tests to the suite

The results

A responsive grid of images with the correct aspect ratios

What you get is a simple polyfill for object-fit which follows the spec as closely as it can. There is one main difference:

• In a native implementation the image size remains the same and the picture within the image changes its dimensions, revealing grey letterboxed content. In the poly fill, an extra div is created around the image to take its dimensions and then the image is resized within that to provide the effect.

The source code is on github so please contribute if you can. I’ll be keeping this up-to-date so follow me @steveworkman on Twitter for the latest updates.

My thanks to Chris Mills of Opera for his articles and helping to explain how on earth all this works, and to Tab Atkins and the CSS WG for spelling it out. Hopefully there will be some more work on this feature soon. You can track the status of its implementation in Gecko (Firefox) and Webkit (Chrome et al) on their bug trackers (see links).

Please, let me know what you think in the comments and on github.

If you liked this, you may also like:

1. CSS3 Bookshelf
2. HTML5 Video and Audio at #lwsdeep
3. CSS Matrix Layouts: Another Way?

Some of the talks were very interesting in the huge number of stats that they poured out: conversion rates, sales figures, profit figures, all pointing to the decline of Nokia and the rise of Samsung (a principle sponsor who gave the most monotone speech of the day). For me, the most interesting talk was on LinkedIn’s mobile redesign, focusing on the IA of the site rather than aesthetics or profit figures.

I particularly enjoyed the talk by Mozilla’s r&d director who talked about the Firefox OS, a contender to grab hold of the low end smartphone market by replacing the native APIs with standardised HTML and JavaScript.

I’ve done sketchnotes for most of the sessions except the panel sessions where absolutely nothing new was said or discussed, the mobile future panel being particularly grumpy about their own subject as if they’d said it a thousand times before (and they had).

Overall it was an enjoyable day, but lacking in any revolutionary sound bites or theories, though I’m sure that the crowd got what they wanted out of each of the sessions. My thanks to Chris at he guardian for inviting me along.

If you liked this, you may also like:

1. Sketchnotes from The Big M 2012 at Bath Digital Festival (Open Mic 13)
2. State of the Browser 2012
3. v3.03 and The Business

It was also a big LWS for me personally, as I took the stage to talk about a pet topic of mine: Less, Sass and CSS Pre-processors. Gotta say, I had a lot of fun and got some really great questions and comments from the audience. I’ll definitely do it again.

So, the sketchnotes service is at half capacity today, it being quite hard to do sketchnotes of my own talk. The notes this month are of Peter Gasston’s talk on The CSS of Tomorrow, covering future specs that will bring some of the features from Less/Sass to CSS, and hugely improve the way we layout websites (finally!).

My Talk – CSS Pre-Processors: 21st Century CSS (HTML slides)

Peter Gasston The CSS of Tomorrow

My Sketchnotes from Peter’s Talk

The CSS of Tomorrow – Peter Gasston

Thanks again to everyone involved, we truly celebrated LWS’s birthday in style.

If you liked this, you may also like:

1. The Progressive Web with Andy Hume (LWS Future)
2. Sketchnotes from LWS Print
3. The Future of Web Typography with Richard Rutter (LWS Future)

Sorry it’s not much of a write-up (and a month late) but better late than never.

If you liked this, you may also like:

1. Future of Web Design Sketchnotes – Day 1
2. Future of Web Design Sketchnotes – Day 2
3. Sketchnotes from #LWS3D – A 50-line WebGL app

The fury is all about this diagram and paragraph:

In the upper right-hand quadrant are services that enable users to interact with Tweets, like the Tweet curation service Storify or the Tweet discovery site Favstar.fm.
That upper-right quadrant also includes, of course, “traditional” Twitter clients like Tweetbot andEchofon. Nearly eighteen months ago, we gave developers guidance that they should not build client apps that mimic or reproduce the mainstream Twitter consumer client experience.” And to reiterate what I wrote in my last post, that guidance continues to apply today.

So, apps like Tweetbot, Echofon and Tweetdeck are no longer wanted. But why would they do this, and what are the alternatives?

Why?

Because Twitter is changing, and it’s going to change rapidly. Twitter’s 1.0 API has been around for 6 years, which is an eternity in API terms. They need to move on and they want their applications to come with them in the same way that Apple wants to control their app ecosystem and user experience. The problem is that these rules haven’t existed before and the way it’s all been phrased is pretty hideous and very negative.

Alternatives

Well, they could have phrased it better. Anil Dash does a great job of re-writing the post and making the world seem right again.

Joe Stump makes some great suggestions as to how to control third party clients:

Why not run API like the App Store? 1. Require they use Twitter ads 2. Require they follow design rules 3. Require all clients be approved

I really like those ideas, and they seem implementable, but it will require a lot of effort on Twitter’s side to set up this ecosystem and encourage third party apps again.

But, from the blog post, it seems Twitter doesn’t want to encourage third party apps.

What next?

There’ll still be 6 months between v1.1 being turned on and 1.0 being turned off, which is plenty of time for developers to bring themselves into line with the new rules. Twitter will be listening to this discussion, and will probably respond in time. Hopefully this will clear up the confusion, and I hope they work directly with the developers that are affected by this, instead of just dictating the rules. We can always hope!

Just remember, it’s still a great service (via Jason Snell)

As the Twitter angst burns bright, let me say this: I think Twitter is the single best thing ever made on the Internet. Seriously.

If you liked this, you may also like:

1. Destroy Twitter – my new favourite Twitter client
2. Steve is now on Twitter
3. Why iPhone Web Apps are Still Worthwhile

• Removing the jQuery dependency (as I know a lot more JS now)
• Using a CSS pre-processor on the stylesheet
• Adding CSS gradients for the spines of the books, because there’s no need for images for most of them

Take a look at the project and let me know what you think in the comments

If you liked this, you may also like:

1. CSS3 Bookshelf
2. Is CSS a black art?
3. CSS Animations on iPhones

We were also graced with the presence of Clare Sutcliffe, who came to talk to us about Code Club, getting kids aged 9-11 to learn to program using Scratch. The video that she showed is after the gallery.

Click here to view the video on YouTube.

If you liked this, you may also like:

1. London Web Standards Semantic Web
2. Node & Tell at London Web Standards #lwsnode
3. Javascript Fun at London Web Standards #lwsfun