It’s supposed to be used by 2 people taking turns (click twice for the other sign).

Basic idea:

• It uses hidden checkboxes for the states (indeterminate means empty, checked means X, not checked means O) and labels for the visible part
• When it starts, a little script (the only js in the demo) sets the states of all checkboxes to indeterminate.
• It uses the :checked and :indeterminate pseudo-classes and sibling combinators to change the states and show who won.
• Once somebody clicks on a checkbox (or in this case, its label) they change it’s state from indeterminate to either checked or not checked, depending on how many times they click on it.

As a bonus, it’s perfectly accessible through the keyboard (although I assume it’s not screen reader accessible).

A <table> would be much more appropriate for the markup, but I decided to sacrifice semantics in this case to make the demo simpler.

All modern browsers support the indeterminate state in checkboxes (for Opera you will need the latest Opera.Next), however this demo doesn’t work on old Webkit (Chrome and Safari) because of an old bug that made the sibling combinators (+ and ~) static in some cases which has been fixed in the nightlies. It should work in Firefox, Opera.next, Webkit nightlies and IE9, although I haven’t tested in Opera.next and IE9 to verify.

Enjoy:

This post is about an idea I’ve had for ages, but never found the time to actually start working on it. Maybe because it looks like a quite big project if done properly, so it’s scary to do it on my own without any help.

jQuery has a huge amount of code that deals with browser bugs and lack of implementations. For example, it needs a full-fledged selector engine, to cater for old browsers that don’t support the Selectors API. Or, it needs code that essentially does what the classList API is supposed to do, because old browsers don’t support it. Same goes for nextElementSibling (the .next() method) and tons of other stuff. However, not everyone needs all this. Some projects don’t need older browsers support, either due to the developer mindset or due to their tech-savvy target group. Also, some people only write demos/proof-of-concepts for modern browsers only and don’t need all this code. Same goes for intranet apps that are only designed for a particular modern browser. Last but not least, this code bloat makes the jQuery library hard to study for educational purposes.

However, even in a browser that supports all the modern stuff, the jQuery API is still more concise than the native methods. Besides, there are tons of plugins that depend on it, so if you decide to implement everything in native JavaScript, you can’t use them.

What I want to build is a fork of jQuery that is refactored so that all the extra code for working around browser bugs removed and all the code replaced by native functionality, where possible. All the ugliness removed, leaving a small, concise abstraction that only uses the current standards. Something like jQuery: The good parts. It could also serve as a benchmark for browser standards support.

The API will work in the exact same way and pass all unit tests (in modern browsers, in cases where they are not buggy) so that almost every plugin built on top of it will continue to function just as well. However, the jQuery library itself will be much smaller, with more elegant and easy to understand code.

So, who’s with me? Do you find such an idea interesting and useful? Would you want to contribute? If so, leave a comment below or send me an email (it’s in the about page). Also, please let me know if you can think of any other uses, or if there’s already something like that that I’ve missed.

This post is about an idea I’ve had for ages, but never found the time to actually start working on it. Maybe because it looks like a quite big project if done properly, so it’s scary to do it on my own without any help.

jQuery has a huge amount of code that deals with browser bugs and lack of implementations. For example, it needs a full-fledged selector engine, to cater for old browsers that don’t support the Selectors API. Or, it needs code that essentially does what the classList API is supposed to do, because old browsers don’t support it. Same goes for nextElementSibling (the .next() method) and tons of other stuff. However, not everyone needs all this. Some projects don’t need older browsers support, either due to the developer mindset or due to their tech-savvy target group. Also, some people only write demos/proof-of-concepts for modern browsers only and don’t need all this code. Same goes for intranet apps that are only designed for a particular modern browser. Last but not least, this code bloat makes the jQuery library hard to study for educational purposes.

However, even in a browser that supports all the modern stuff, the jQuery API is still more concise than the native methods. Besides, there are tons of plugins that depend on it, so if you decide to implement everything in native JavaScript, you can’t use them.

What I want to build is a fork of jQuery that is refactored so that all the extra code for working around browser bugs removed and all the code replaced by native functionality, where possible. All the ugliness removed, leaving a small, concise abstraction that only uses the current standards. Something like jQuery: The good parts. It could also serve as a benchmark for browser standards support.

The API will work in the exact same way and pass all unit tests (in modern browsers, in cases where they are not buggy) so that almost every plugin built on top of it will continue to function just as well. However, the jQuery library itself will be much smaller, with more elegant and easy to understand code.

So, who’s with me? Do you find such an idea interesting and useful? Would you want to contribute? If so, leave a comment below or send me an email (it’s in the about page). Also, please let me know if you can think of any other uses, or if there’s already something like that that I’ve missed.

Last week, I was in London to give 2 talks. The first one was last Thursday, in one of the conferences I wanted to go ever since I learned my first CSS properties: Web directions @media. The second one was 2 days later in a smaller event called Standards.next.

Web Directions @media

I managed to get my @media talk early on schedule, so I could relax afterwards and enjoy the rest of the conference. Before I saw the feedback on twitter I thought they hated it, since the audience was silent and didn’t laugh at any of my jokes and asked no questions afterwards. However, I was wrong: The tweets about it were enthusiastic! Here’s a small sample:

https://twitter.com/KrokoHunter/status/73686696381779968

https://twitter.com/adrmakow/status/73688461537849344

https://twitter.com/KrokoHunter/status/73691398058147840

https://twitter.com/xtinafowler/status/73691708138848256

https://twitter.com/stefsull/status/73692171684941825

https://twitter.com/ubelly/status/73692212772343808

https://twitter.com/pauliom/status/73694312315092992

https://twitter.com/mfujica/status/73694696517545984

https://twitter.com/johnallsopp/status/73694876524490752

https://twitter.com/johnallsopp/status/73695196986085376

https://twitter.com/prawnstar/status/73697565970935808

https://twitter.com/KrokoHunter/status/73700078921056256

https://twitter.com/matmannion/status/73700794624516096

https://twitter.com/farinab/status/73700896722268160

https://twitter.com/GlennCahill87/status/73701420704075776

https://twitter.com/NIMRweb/status/73701806122868736

https://twitter.com/xtinafowler/status/73702048620744704

https://twitter.com/KrokoHunter/status/73728517489172480

https://twitter.com/KrokoHunter/status/74227907878334464

https://twitter.com/blagdaross/status/74429856514965504

https://twitter.com/sparrk/status/74556639608442880

https://twitter.com/anttio/status/74575465905520641

https://twitter.com/sirbenjaminnunn/status/74900149448609792

You can play with the HTML version of my slides or view them on slideshare:

Mastering CSS3 gradients

View more presentations from Lea Verou

I really enjoyed some of the other talks in @media, especially:

• Stephanie Sullivan’s “Modern CSS”
• Bruce Lawson’s “Multimedia in HTML5”
• Nicole Sullivan’s “Performance of CSS3 and HTML5”

Standards.next

The morning before my Standards.next talk, I woke up with a sore throat, a running nose and a blocked ear. I even thought about cancelling my talk, but I’m one of those people that have to be dying to change their schedule. So I went, and I’m glad I did, as I got to attend Peter Gasston’s incredible talk on CSS3 layout. I really learned so much stuff from that!

As for my talk (“CSS Secrets: 10 things you might not know about CSS3”), it went fine after all. I had some trouble hearing the questions, due to the blocked ear, but nothing too bad. I had trouble with my last demo, as I got confused and used background-origin: padding-box; instead of content-box, but nobody there hated me because of it, like I was afraid would happen if I ever screwed up one of my demos :)

That event was much smaller (it took place in a small room in a pub), so the tweets were much fewer, but still very positive:

https://twitter.com/patrick\_h\_lauke/status/74496751716929536

https://twitter.com/stopsatgreen/status/74497512261693440

https://twitter.com/mfujica/status/74499137558687744

https://twitter.com/danielknell/status/74499496746299392

https://twitter.com/brucel/status/74500503098245121

https://twitter.com/patrick\_h\_lauke/status/74501557349138432

https://twitter.com/danielknell/status/74502234251071488

https://twitter.com/mfujica/status/74504295927648257

https://twitter.com/designjuju/status/74504416534855680

https://twitter.com/mfujica/status/74504823881469952

https://twitter.com/twitrnick/status/74506406191046656

https://twitter.com/patrick\_h\_lauke/status/74506910807764992

https://twitter.com/stopsatgreen/status/74508394974810113

https://twitter.com/stefsull/status/74508645513175040

https://twitter.com/albybarber/status/74532879832584194

https://twitter.com/jackosborne/status/74608125289828352

I found out afterwards that one particular lady in the audience complained about my pronunciation of the words “fuchsia” and “ems”. That’s what I would’ve said to her if I heard: “Here’s some breaking news to you: Not everyone is a native english speaker. Shocking, isn’t it? I would really be interested to hear your pronunciation if you ever did a presentation in Greek. KKTHXBAI”

Overall, I had a great time in London. I hadn’t been there for more than 10 years, so I had forgotten how beautiful city it is. I loved attending and speaking at both of those events, and I would like to thank Maxine Sherrin and John Allsopp for inviting me to @media and Bruce Lawson for inviting me at Standards.next.

Last week, I was in London to give 2 talks. The first one was last Thursday, in one of the conferences I wanted to go ever since I learned my first CSS properties: Web directions @media. The second one was 2 days later in a smaller event called Standards.next.

Web Directions @media

I managed to get my @media talk early on schedule, so I could relax afterwards and enjoy the rest of the conference. Before I saw the feedback on twitter I thought they hated it, since the audience was silent and didn’t laugh at any of my jokes and asked no questions afterwards. However, I was wrong: The tweets about it were enthusiastic! Here’s a small sample:

https://twitter.com/KrokoHunter/status/73686696381779968

https://twitter.com/adrmakow/status/73688461537849344

https://twitter.com/KrokoHunter/status/73691398058147840

https://twitter.com/xtinafowler/status/73691708138848256

https://twitter.com/stefsull/status/73692171684941825

https://twitter.com/ubelly/status/73692212772343808

https://twitter.com/pauliom/status/73694312315092992

https://twitter.com/mfujica/status/73694696517545984

https://twitter.com/johnallsopp/status/73694876524490752

https://twitter.com/johnallsopp/status/73695196986085376

https://twitter.com/prawnstar/status/73697565970935808

https://twitter.com/KrokoHunter/status/73700078921056256

https://twitter.com/matmannion/status/73700794624516096

https://twitter.com/farinab/status/73700896722268160

https://twitter.com/GlennCahill87/status/73701420704075776

https://twitter.com/NIMRweb/status/73701806122868736

https://twitter.com/xtinafowler/status/73702048620744704

https://twitter.com/KrokoHunter/status/73728517489172480

https://twitter.com/KrokoHunter/status/74227907878334464

https://twitter.com/blagdaross/status/74429856514965504

https://twitter.com/sparrk/status/74556639608442880

https://twitter.com/anttio/status/74575465905520641

https://twitter.com/sirbenjaminnunn/status/74900149448609792

You can play with the HTML version of my slides or view them on slideshare:

Mastering CSS3 gradients

View more presentations from Lea Verou

I really enjoyed some of the other talks in @media, especially:

• Stephanie Sullivan’s “Modern CSS”
• Bruce Lawson’s “Multimedia in HTML5”
• Nicole Sullivan’s “Performance of CSS3 and HTML5”

Standards.next

The morning before my Standards.next talk, I woke up with a sore throat, a running nose and a blocked ear. I even thought about cancelling my talk, but I’m one of those people that have to be dying to change their schedule. So I went, and I’m glad I did, as I got to attend Peter Gasston’s incredible talk on CSS3 layout. I really learned so much stuff from that!

As for my talk (“CSS Secrets: 10 things you might not know about CSS3”), it went fine after all. I had some trouble hearing the questions, due to the blocked ear, but nothing too bad. I had trouble with my last demo, as I got confused and used background-origin: padding-box; instead of content-box, but nobody there hated me because of it, like I was afraid would happen if I ever screwed up one of my demos :)

That event was much smaller (it took place in a small room in a pub), so the tweets were much fewer, but still very positive:

https://twitter.com/patrick\_h\_lauke/status/74496751716929536

https://twitter.com/stopsatgreen/status/74497512261693440

https://twitter.com/mfujica/status/74499137558687744

https://twitter.com/danielknell/status/74499496746299392

https://twitter.com/brucel/status/74500503098245121

https://twitter.com/patrick\_h\_lauke/status/74501557349138432

https://twitter.com/danielknell/status/74502234251071488

https://twitter.com/mfujica/status/74504295927648257

https://twitter.com/designjuju/status/74504416534855680

https://twitter.com/mfujica/status/74504823881469952

https://twitter.com/twitrnick/status/74506406191046656

https://twitter.com/patrick\_h\_lauke/status/74506910807764992

https://twitter.com/stopsatgreen/status/74508394974810113

https://twitter.com/stefsull/status/74508645513175040

https://twitter.com/albybarber/status/74532879832584194

https://twitter.com/jackosborne/status/74608125289828352

I found out afterwards that one particular lady in the audience complained about my pronunciation of the words “fuchsia” and “ems”. That’s what I would’ve said to her if I heard: “Here’s some breaking news to you: Not everyone is a native english speaker. Shocking, isn’t it? I would really be interested to hear your pronunciation if you ever did a presentation in Greek. KKTHXBAI”

Overall, I had a great time in London. I hadn’t been there for more than 10 years, so I had forgotten how beautiful city it is. I loved attending and speaking at both of those events, and I would like to thank Maxine Sherrin and John Allsopp for inviting me to @media and Bruce Lawson for inviting me at Standards.next.