It’s 2014 and I’m feeling inspired to change my ways. In 2014, I want to go jQuery-free!
Before I get started, I want to clear the air and put in a big fat disclaimer about my opinions on jQuery. Here we go:
Lovely, now that’s done, this is why I want to do it. Firstly, as lots of people know, jQuery is quite a weighty library considering what it does. Coming in at 32KB for version 2.x and around 40KB for the IE-compatible (gzipped and minified), it’s a significant chunk of page weight before you’ve even started using it. There are alternatives that support the majority of its functions in the same API, such as Zepto, but even that comes in at around 15KB for the most recent version, and can grow larger. The worst thing for me, is that I don’t use half of the library, all I really do is select elements, use event handlers and delegation, show/hide things and change CSS classes. So, I want a library of utility functions that only does these things.
Word to the wise, this is not a new notion, and follows on very nicely from the work that Remy Sharp has done in this area in his min.js library.
I’m going to write a series of posts as I attempt to separate myself from jQuery, and make my websites leaner and faster. The first of which will be on “what you think you need, and what you actually need” and give you ways to work out if this approach is for you, or if you should be sticking with jQuery. Next, I’ll cover the basics of what a minimalist jQuery library; and finally I’ll cover strategies for dealing with unsupported browsers.
Let me know if there’s anything in particular you want me to cover, and I’ll do my best to go over it for you.
“Our work here is done” – the immortal final words of the web standards project. Please, read the post, for me it’s a tearjerker, and I’ll tell you why.
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
TL;DR; I’ve made a polyfill for CSS3 Object-fit. Download it from Github here: https://github.com/steveworkman/jquery-object-fit
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
The polyfill is based on jquery-object-fit by Simon Schmid, to which I’ve made some improvements:
- Added support for
- 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
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.
This month was a very special meetup for London Web Standards – it’s 5th birthday celebrations! Yes, it’s hard to believe that 5 years ago in October three guys met up in a North London pub to talk about the web. To celebrate this momentous occasion, Imogen Levy baked us a massive 7-layer London Web Standards Cake (British Bake-off contender next year 2013 for sure). Imogen, thank you so much (from all of the LWS Organisers)!
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 Sketchnotes from Peter’s Talk
The CSS of Tomorrow – Peter Gasston
Thanks again to everyone involved, we truly celebrated LWS’s birthday in style.