I was quite excited to discover this, but to my dismay, Steven Levithan assured me it’s actually well known. However, I felt it’s so useful and underdocumented (the only references to the technique I could find was several StackOverflow replies) that I decided to blog about it anyway.

If you’ve been using regular expressions for a while, you surely have stumbled on a variation of the following problems:

• Intersection: “I want to match something that matches pattern A AND pattern B”
  Example: A password of at least 6 characters that contains at least one digit, at least one letter and at least one symbol
• Subtraction: “I want to match something that matches pattern A but NOT pattern B”
  Example: Match any integer that is not divisible by 50
• Negation: “I want to match anything that does NOT match pattern A”
  Example: Match anything that does NOT contain the string “foo”

Even though in ECMAScript we can use the caret (^) to negate a character class, we cannot negate anything else. Furthermore, even though we have the pipe character to mean OR, we have nothing that means AND. And of course, we have nothing that means “except” (subtraction). All these are fairly easy to do for single characters, through character classes, but not for entire sequences.

However, we can mimic all three operations by taking advantage of the fact that lookahead is zero length and therefore does not advance the matching position. We can just keep on matching to our heart’s content after it, and it will be matched against the same substring, since the lookahead itself consumed no characters. For a simple example, the regex /^(?!cat)\w{3}$/ will match any 3 letter word that is NOT “cat”. This was a very simple example of subtraction. Similarly, the solution to the subtraction problem above would look like /^(?!\d+[50]0)\d{3}$/.

For intersection (AND), we can just chain multiple positive lookaheads, and put the last pattern as the one that actually captures (if everything is within a lookahead, you’ll still get the same boolean result, but not the right matches). For example, the solution to the password problem above would look like /^(?=.*\d)(?=.*[a-z])(?=.*[\W_]).{6,}$/i. Note that if you want to support IE8, you have to take this bug into account and modify the pattern accordingly.

Negation is the simplest: We just want a negative lookahead and a .+ to match anything (as long as it passes the lookahead test). For example, the solution to the negation problem above would look like /^(?!.*foo).+$/. Admittedly, negation is also the least useful on its own.

There are caveats to this technique, usually related to what actually matches in the end (make sure your actual capturing pattern, outside the lookaheads, captures the entire thing you’re interested in!), but it’s fairly simple for just testing whether something matches.

Steven Levithan took lookahead hacking to the next level, by using something similar to mimic conditionals and atomic groups. Mind = blown.

I’ve been revisiting this dilemma recently, while preparing the slides for my upcoming regular expressions talks. For example: Regex quantifiers.

1. General rule first, shortcuts after

You can use {m,n} to control how many times the preceding group can repeat (m = minimum, n = maximum). If you omit n (like {m,}) it’s implied to be infinity (=”at least m times”, with no upper bound).

• {m, m} can also be written as {m}
• {0,1} can also be written as ?
• {0,} can also be written as *
• {1,} can also be written as +

Advantages & disadvantages of this approach

• Harder to understand the general rule, so the student might lose interest before moving on to the shortcuts
• After understanding the general rule, and then all the shortcuts are trivial.
• If they only remember one thing, it will be the general rule. That’s good.

2. Special cases first, general rule after

• You can add ? after a group to make it optional (it can appear, but it may also not).
• If you don’t care about how many times something appears (if at all), you can use *.
• If you want something to appear at least once, you can use +
• If you want something to be repeated exactly n times, you can use {n}
• If you want to set specific upper and lower bounds, you can use {m,n}. Omit the n for no upper bound.

Advantages & disadvantages of this approach

• Easy to understand the simpler special cases, building up student interest
• More total effort required, as every shortcut seems like a separate new thing until you get to the general rule
• Special cases make it easier to understand the general rule when you get to it

What usually happens

In most cases, educators seem to favor the second approach. In the example of regex quantifiers, pretty much every regex book or talk explains the shortcuts first and the general rule afterwards. In other disciplines, such as Mathematics, I think both approaches are used just as often.

What do you think? Which approach do you find easier to understand? Which approach do you usually employ while teaching?

Lets assume you have a CSS animation for background-color that goes from a shade of yellow (#cc0) to a shade of blue (#079) and repeats indefinitely. The code could be something like this:

@keyframes color {
  from { background: #cc0 }
  to { background: #079 }
}

div {
  animation: color 3s infinite;
}

If we linearize that animation, the progression over time goes like this (showing 3 iterations):

As you can see, the change from the end state to the beginning state of a new iteration is quite abrupt. You could change your keyframes to mitigate this, but there’s a better way. A property with the name animation-direction gives a degree of control on the direction of the iterations to smooth this out. It also reverses your timing functions, which makes it even smoother.

In early drafts, only the values normal and alternate were allowed. normal results in the behavior described above, whereas alternate flips every other iteration (the 2nd, the 4th, the 6th and so on), resulting in a progression like this (note how the 2nd iteration has been reversed):

The latest draft also adds two more values: reverse which reverses every iteration and alternate-reverse, which is the combination of both reverse and alternate. Here is a summary of what kind of progression these four values would create for the animation above:

The problem

I was excited to see that reverse and alternate-reverse were finally added to the spec, but something in the syntax just didn’t click. I initially thought the reason was that these four values essentially set 2 toggles:

• ¿Reverse all iterations? yes/no
• ¿Reverse even iterations? yes/no

so it’s pointless cognitive overhead to remember four distinct values. I proposed that they should be split in two keywords instead, which would even result to a simpler grammar too.

The proposal was well received by one of the co-editors of the animations spec (Sylvain Galineau), but there was a dilemma as to whether mixing normal with alternate or reverse would make it easier to learn or more confusing. This is a point where your opinion would be quite useful. Would you expect the following to work, or would you find them confusing?

• animation-direction: normal alternate; /* Equivalent to animation-direction: alternate; */
• animation-direction: alternate normal; /* Equivalent to animation-direction: alternate; */
• animation-direction: normal reverse; /* Equivalent to animation-direction: reverse; */
• animation-direction: reverse normal; /* Equivalent to animation-direction: reverse; */

A better (?) idea

At some point, in the middle of writing this blog post (I started it yesterday), while gazing at the graphic above, I had a lightbulb moment. ¡These values are not two toggles! All four of them control one thing: which iterations are reversed:

• normal reverses no iterations
• reverse reverses all iterations
• alternate reverses even iterations
• alternate-reverse reverses odd iterations

The reason it’s so confusing and it took me so long to realize myself, is that the mental model suggested by these keywords is detached from the end result, especially in the case of alternate-reverse. You have to realize that it works as if both alternate and reverse were applied in sequence, so reverse first reverses all iterations and then alternate reverses the even ones. Even iterations are reversed twice, and are therefore equivalent to the original direction. This leaves the odd ones as being reversed. It’s basically a double negative, making it hard to visualize and understand.

I thought that a property that would reflect this in a much more straightforward way, would be animation-reverse (or animation-iteration-reverse), accepting the following values:

• none (equivalent to animation-direction: normal)
• all (equivalent to animation-direction: reverse)
• even (equivalent to animation-direction: alternate)
• odd (equivalent to animation-direction: alternate-reverse)

Not only this communicates the end result much better, but it’s also more extensible. For example, if in the future it turns out that reversing every 3rd iteration is a common use case, it will be much easier to add expressions to it, similar to the ones :nth-child() accepts.

I knew before proposing it that it’s too late for such drastic backwards-incompatible changes in the Animations module, however I thought it’s so much better that it’s worth fighting for. After all, animation-direction isn’t really used that much in the wild.

Unfortunately, it seems that only me and Sylvain thought it’s better, and even he was reluctant to support the change, due to the backwards compatibility issues. So, I started wondering if it’s really as much better as I think. ¿What are your thoughts? ¿Would it make it simpler for you to understand and/or teach? Author feedback is immensely useful for standardization, so please, ¡voice your opinion! Even without justifying it if you don’t have the time or energy. Gathering opinions is incredibly useful.

TL;DR

1. ¿Is alternate reverse and reverse alternate (either would be allowed) a better value for animation-direction over alternate-reverse?
2. ¿If so, should redundant combinations of normal with alternate or reverse also be allowed, such as normal alternate?
3. ¿Or maybe we should ditch it altogether and replace it with animation-reverse, accepting values of none, all, even, odd?

Side note: If you’re wondering about the flipped question and exclamation marks (¿¡) it’s because I believe they improve the usability of the language if widely adopted, so I’m doing my part for it And no, I don’t speak Spanish.

A common response to such complaints is that they are merely philosophical and who cares if the feature works right now and degrades gracefully. This argument could be valid for some cases, when the style is just a minor, gracefully degrading enhancement and no standards compliant alternative is present (for example, I’ve used ::-webkit-scrollbar styles myself). However, this is not the case here. We have had a standards compliant alternative for this for the past 11 years and it’s called SVG. It can also do much more than masking, if you give it a chance.

Here’s an example of texturized text with SVG:

Edit: Thanks to @devongovett’s improvements, the code is now simpler & shorter.

Yes, the syntax might be more unwieldy but it works in a much wider range of browsers: Chrome, Safari, Firefox, IE9, Opera. Also, it’s trivial to make a script that generates the SVG markup from headings and applies the correct measurements for each one. When WebKit fixes this bug, we can even move the pattern to a separate SVG file and reference it from there.

In case you’re wondering about semantics, the <svg> element is considered “flow content” and is therefore allowed in heading elements. Also, even if search engines don’t understand inline SVG, they will just ignore the tags and still see the content inside the <text> element. Based on that, you could even make it degrade gracefully in IE8, as long as you include the HTML5 fix for the <svg> element. Then the CSS rules for the typography will still apply. You’ll just need to conditionally hide the <image>, since IE8 displays a broken image there (a little known fact is that, in HTML, <image> is basically equivalent to <img>, so IE8 treats it as such) .

Credits to David Storey’s original example that inspired this.

Rebecca Murphey wrote something similar a while back (albeit much shorter and less detailed), and I think it would be nice if more people in the field started posting their stories, especially women. I sure would find them interesting and if you give it a shot, you’ll see it’s quite enjoyable too. I sure had a blast writing this, although it was a bit hard to hit the “Publish” button afterwards.

Keep in mind that this is just my personal story (perhaps in excruciating detail). I’m not going to attempt to give any advice, and I’m not suggesting that my path was ideal. I’ve regretted some of my decisions myself, whereas some others proved to be great, although they seemed like failures at the time. I think I was quite lucky in how certain things turned out and I thank the Flying Spaghetti Monster daily for them.

Warning: This is going to be a very long read (over 3000 words) and there is no tl;dr.

Childhood (1986-1998)

I was born on June 13th, 1986. I grew up in a Greek island called Lesbos (yes, the island where the word “lesbian” comes from, in case you were wondering), in the small town of Kalloni. I didn’t have a computer as a kid, but I always loved making things. I had no siblings, so my childhood was mostly spent playing solitarily with paper, fabric, staples, scissors and the like. I was making all kinds of stuff: Little books, wallets, bags, pillows, anything I could come up with that was doable with my limited set of tools and materials. I also loved drawing. I had typical toys as well (legos, dolls, playmobil, cars, teddy bears) but the prevailing tendency in my childhood was making stuff. I wasn’t particularly interested in taking things apart to see how they worked, I just liked making new things.

I had never used a computer until I was around 10. We spent Christmas with an uncle of mine and his family in Athens. That uncle was working at Microsoft Hellas, and had a Windows 95 machine in his apartment. I got hooked from the first moment I used that computer. I didn’t do anything particularly interesting in it, just played around with MS Paint and some other equally mundane applications. However, for me it was so fascinating that I spent most of my Christmas vacation that year exploring Windows 95.

After I returned to Lesbos, I knew I badly wanted a computer for myself. However, computers were quite expensive back then, so I didn’t get one immediately, even though my family was quite well off. My father started taking me to his job’s offices on weekends, and I spent hours every time on a Windows 3.1 machine, exploring it, mostly drawing on its paint app.

In 1997, my mother finally bought me a computer. It cost around 700K drachmas (around €2000?) which was much more at the time than it is today. It was a Pentium MMX at 233MHz with 32MB of RAM and a 3.1GB hard drive, which was quite good at the time. I was so looking forward for it to arrive, and when it did, I spent every afternoon using it, from the moment I got back from school, until late at night. The only times I didn’t use my computer was when I was reading computer books or magazines or studying for school. In a year, I had become quite proficient about how its OS worked (Windows 95), editing the registry, trying to learn DOS (its command line). I also exercised my creativity by making magazines and newspapers in Microsoft Word. I’m quite surprised I didn’t break it, even though I was experimenting with anything I could get my cursor on.

Unfortunately, my computer fascination was largely solitary. There were no other geeks in my little town I could relate to, which I guess made me even more of an introvert. The only people reading my MS Word-generated newspaper were me and a friend of mine. During my years in Lesbos, I only met 2 other kinda geeky kids, and we didn’t really hit it off. One of them was living too far, the other was kind of annoying. The former however gave me his fonts, which I was really grateful for. I loved fonts. I didn’t have any typographic sophistication, so I loved about every font, but I remember desperately wanting to make my own. Unfortunately, I never pursued that, as I couldn’t find any font creation software until very recently.

In late 1997, we visited some relatives in a NYC suburb to spend Christmas there. It was my first time in the US and I fell in love with the place. My uncle, knowing my computer obsession took me to a big computer store called CompUSA. I was like a kid in a candy store! The software that caught my eye the most was called “Mutimedia Fusion“. It was a graphical IDE that allowed you to make applications (mostly games and screensavers, but you could potentially make anything) without writing any code. The thought processes involved were the same as in programming, but instead of typing commands, you picked them from menus or wrote mathematical expressions through a GUI. You could even go online and get new plugins that added functionality, but my access to the internet in my little town was very limited.

I got super excited. The idea of being able to make my very own programs, was too good to be true. I convinced my mother to buy it for me and thankfully, she did. For the year that followed, my afternoons and weekends became way more creative. I wasn’t interested in making games, but more in utility applications. Things that were going to be useful for my imaginary users. My biggest app back then was something that allowed you to draw different kinds of grids (from horizontal and vertical grids to simple 3d-like kinds of grids), with different parameters, or even mix them together and overlay them over an image. Anything that combined programming with graphics was doubly fascinating for me.

My access to the internet was limited, so I couldn’t share my creations with anybody. What kept me going was the idea that if I make something amazing, it will get popular and people will use it. I had no idea how that would happen, but it was useful as a carrot in front of me that made me constantly strive to improve. We had dial-up, but due to technical issues, I could only connect about 10% of the times I tried it, and even then I had to keep it short as it was quite expensive. I spent my limited time online downloading plugins for Multimedia Fusion, searching anything I could come up with in Altavista and perusing IRC chatrooms with Microsoft Comic Chat.

Adolescence (1998-2004)

After a year of making applications with Multimedia Fusion, I wanted something more flexible and powerful. I wanted to finally learn a programming language. My Microsoft uncle sent me a free copy of Visual Studio, so I was trying to decide which “Visual Whatever” language was best to start with. Having read that C++ was “teh pro stuff”, I got a book about Visual C++. Unfortunately, I couldn’t understand much. I decided that it was probably too early for me and C++, so I got a Visual Basic 6 book.  It was about 10cm thick, detailing everything you could ever possibly want to learn about Visual Basic. Thankfully, Visual Basic didn’t prove so hard, so I started with it, making small apps and finally ported my grid application from Multimedia Fusion to Visual Basic 6.

I had a very fun and creative 3 years, full of new knowledge and exercise for the mind. Unfortunately, when I reached 15, I realized that boys in my little town weren’t really into geeky girls. I decided that if I wanted a boyfriend, I should quit programming (if any geeky teenage girls are reading this: Just be patient. It gets better, you can’t imagine how much). It “helped” that my computer was broken during the summer and I had to wait for it to come back, so I had to find other things to do in the meantime.

Unable to code, I pursued other geeky interests, such as mobile phones and mathematics, which I guess shows that no matter how much you try, you can’t escape who you are. In retrospect, this helped me, as I got some pretty good distinctions in the various stages of the national mathematical competitions, up to 2nd place nationally for two years in a row (these competitions had 4 stages. I failed the preliminary contest for the Balkan Mathematical Olympiad, so I never went there.). I was fascinated by Number Theory and started wanting to become a mathematician, rather than a programmer. Sometime around then I also moved from my small town to Athens, which I wanted to do since childhood.

When the time of career decisions came, I chickened out. I knew that if I became a mathematician and failed at research, I would end up teaching mathematics in a high school. I didn’t want that, so I picked a “safer” career path. Since my grades were very good, I went to study Electrical and Computer Engineering, which is a profession held in very high esteem in Greece, about as much as lawyers and doctors. I told myself that I would probably find it interesting, as it would involve lots of mathematics and programming. I was wrong.

Adulthood (2004-Today)

I was away from Athens, in a city that most Greeks love (Thessaloniki). However, I found it cold, gray, old and with hordes of cockroaches. I hated it with a passion. I also hated my university. It involved little coding and little theoretical Mathematics, the kind that I loved. Most of it was physics and branches of Mathematics I didn’t like, such as linear algebra. It only had two coding courses, both of which were quite mundane and lacked any kind of creativity. Moreover, most of my fellow students had perviously wanted to become doctors and failed medical school so they just went for the next highly respected option. They had no interest in technology and their main life goals were job security, making money and be respected. I felt more lonely than ever. After the first semester, I slowly stopped going to lectures and eventually gave up socializing with them. Not going to lectures is not particularly unusual for a university student in Greece. Most Greeks do it after a while, since attendance is not compulsory and Greek universities are free (as in beer). As long as you pass your exams every semester and do your homework, you can still get a degree just fine.

During my first summer as a university student, we decided with my then boyfriend to make an online forum. We were both big fans of online forums and we wanted to make something better. He set up the forum software in an afternoon (using SMF) and then we started customizing it. I didn’t know much about web development back then, so I constrained myself to helping with images and settings. After 2 months, the forum grew to around 200 members, and we decided to switch to the more professional (and costly) forum software, vBulletin. It was probably too early, but the signs were positive, so we thought better earlier than later.

The migration took 2-3 days of nonstop work, during which we took turns in sleeping and worked the entire time that we were awake. We wanted everything to be perfect, even the forum theme should be as similar to the old one as possible. I had a more involved role in this, and I even started learning a bit of PHP while trying to install some “mods” (modifications to the vBulletin source code that people posted). Due to my programming background, I caught up with it quite easily and after a few months, I was the only one fiddling with code on the website.

I was learning more and more about PHP, HTML, CSS and (later) JavaScript. That online forum was my primary playground, where I put my newly acquired knowledge into practice. Throughout these years, I released quite a few of my own vBulletin mods, many of which are still in use in vBulletin forums worldwide. Having spent so many years making apps that nobody used, I found it fascinating that you can make something and have people use it only a few hours later.

By the end of 2005, I started undertaking some very small scale client work, most (or all) of which doesn’t exist anymore. I was not only interested in code, but also in graphic design. I started buying lots of books, both about the languages involved and graphic design principles. The pace of learning new things back then was crazy, almost on par with my early adolescence years.

In late 2006, I decided I couldn’t take it any more with my university. I had absolutely no interest in Electrical Engineering, and my web development work had consumed me entirely. I didn’t want to give up on higher education, so I tried to decide where I should switch to. Computer Science was the obvious choice, but having grown up with civil engineer parents, I didn’t want to give up on engineering just yet (strangely, CS is not considered engineering in Greece, it’s considered a science, kinda like Mathematics). I also loved graphic design, so I considered going to a graphic design school, but there are no respected graphic design universities in Greece and I wasn’t ready to study abroad. I was also in a long term relationship in Greece, which I didn’t want to give up on.

I decided to go with Architecture, although I had no interest in buildings. The idea was that it bridges engineering and art, so it would satisfy both of my interests. Unfortunately, since I hadn’t taken drawing classes in high school, I had to take the entire national university placement exams (Πανελλήνιες), again, including courses I aced the first time, such as Mathematics. I was supposed to spend the first half of 2007 preparing for these exams, but instead I spent most of it freelancing and learning more about web development. I did quite well on the courses I had been previously examined on (although not as good as the first time), but borderline failed freehand drawing. Passing freehand drawing was a requirement for Architecture, so that was out of the question now. This seemed like a disaster at the time, but in retrospect, I’m very grateful to the grader that failed me. I would’ve been utterly miserable in Architecture.

Not wanting to go back to EE, I took a look at my options. My mother suggested Computer Science and even though I was still a bit reluctant, I put it in my application. I picked a CS school that seemed more programming-oriented, as I didn’t want to have many physics, computer architecture and circuits courses again. When the results came out, I had been placed there. It turned out to be one of my best decisions. I could get good grades on most of the courses with hardly any studying, as I knew lots of the stuff already. I also learned a bunch of useful new things. I can’t say that everything I learned was useful for my work, but it was enough to make it worth it.

In mid 2007, the online forum we built had grown quite a lot. We decided to make a company around it, in order to be able to accept more high-end advertising. We had many dreams about expanding what it does, most of which never got materialized. In 2008, after a long time of back and forth, we officially registered a company for it so I stopped freelancing and focused solely on that.

It wasn’t easy, but eventually it started generating a very moderate income. I decided to start a Greek blog to post about my CSS and JS discoveries, but it didn’t go very well. After a dozen posts or so, I decided to close it down, and start a new one, in English this time. It turned out that developers abroad were more interested in what I had to say, so I got my first conference invitation in 2010, to speak in a new Polish conference called Front-Trends. When I got the invitation email, I couldn’t believe my eyes. Why would someone want me to speak at a conference? I wasn’t that good! How would I speak in front of all these people? It even crossed my mind that it might be a joke, but they had confirmed speakers like Douglas Crockford, Jake Archibald, Jeremy Keith and Paul Bakaus. I told my inner shy self to shut up, and enthusiastically agreed to speak there.

I spent the 8 months until that conference stressing about my presentation. I had never been to a conference outside Greece, and the only Greek conference I had attended was a graphic design one. I had only spoken once before, to an audience of around 30 people in a barcamp-style event. I decided that I didn’t want my first web development conference to be the one I speak at, so I bought a ticket for Fronteers 2010. It had a great line-up and was quite affordable (less than €300 for a ticket). I convinced 3 of my friends to come with me (for vacation), and we shared a quadruple hotel room, so the accommodation ended up not costing too much either.

It was an amazing experience that I will never forget. I met people I admired and only knew through their work online. It was the first time in my life that I was face to face with people that really shared the same interests. I even met my partner to date there. Until today, Fronteers is my favorite conference. Partly because it was my first, partly because it’s a truly great conference with a very strong sense of community.

There was a talk or two at Fronteers that year, which were criticized for showing things that most people in the audience already knew. This became my worst fear about giving talks. Until today, I always try to add nuggets of more advanced techniques in my talks, to avoid getting that kind of reaction, and it works quite well. I remember going back home after Fronteers and pretty much changing all my slides for my upcoming talk. I trashed my death-by-powerpoint kind of slides and my neat bulleted lists and made a web-based slideshow with interactive examples for everything I wanted to show.

I was incredibly nervous before and during my Front-Trends talk, so I kept mumbling and confusing my words. However, despite what I thought throughout, the crowd there loved it. The comments on twitter were enthusiastic! Many people even said it was the best talk of the conference.

That first talk was the beginning of a roller-coaster that I just can’t describe. I started getting more invitations for talks, articles, workshops and many other kinds of fascinating things. I met amazing people along the way. Funny, like-minded, intelligent people. To this day, I think that getting in this industry has been the best thing in my life. I have experienced no sexism or other discrimination, nothing negative, just pure fun, creativity and a sense that I belong in a community with like-minded people that understand me. It’s been great, and I hope it continues to be like this for a very long time. Thank you all.

In Roman’s experiment, he is using absolutely positioned pseudoelements to cover the shadows (which are basically radial gradients as background images), taking advantage of the fact that when you scroll a scrollable container, its background does not scroll with it, but absolutely positioned elements within do. Therefore, when you scroll, the shadows are no longer obscured and can show through. Furthermore, these pseudoelements are linear gradients from white to transparent, so that these shadows are uncovered smoothly.

When I saw Roman’s demo, I started wondering whether this is possible with no extra containers at all (pseudoelements included). It seemed like a perfect use case for background-attachment: local. Actually, it was the first real use case for it I had ever came up with or seen.

“background-attachment… what? I only know scroll and fixed!”

scroll and fixed were the only values for background-attachment back in the days of CSS 2.1. scroll is the initial value and positions the background relative to the element it’s applied on, whereas fixed positions it relative to the viewport, resulting in the background staying in place when the page was scrolled. As a result of these definitions, when only a part of the page was scrollable (e.g. a <div> with overflow: auto), its background did not scroll when the container itself was scrolled.

In Backgrounds & Borders Level 3, a new value was added to lift this restriction: local. When background-attachment: local is applied, the background is positioned relative to the element’s contents. The result is that it scrolls when the element is scrolled. This is not a new feature, it has been with us since the first drafts of Backgrounds and Borders 3 in 2005 (of course, implementations took some more time, starting from 2009).

If the way it works seems unclear, play a bit with this dabblet that demonstrates all three values (your browser needs to support all three of course):

“Ok, I get it. Back to the scrolling shadows please?”

Basically, the idea was to convert these absolutely positioned pseudoelements into background layers that have background-attachment: local applied. I tried it, it worked and helped reduce the code quite a lot. Here’s the dabblet with it:

The drawback of this is that it reduces browser support a bit. Roman’s original experiment might even work in IE8, if the gradients are converted into images (gradients are not essential for the functionality). When you rely on background-attachment: local, you reduce browser support to IE9+, Safari 5+, Chrome and Opera. Firefox is the most notable absentee of that list, you can vote on bug #483446 if you’re interested in getting them to implement it.

However, browser support is not that important, since the effect degrades very gracefully. On browsers that don’t support this, you just get no shadow.

The awkward moment when you realize you forgot to commit for days & you can't pick a commit message as nothing describes all these changes.

April 4, 2012 15:35 via Twitter for MacReplyRetweetFavorite

@LeaVerou

Lea Verou

Immediately, I started getting a flood of suggestions of what that commit message could have been. Some of them were hilarious, some clever and some both. So, I decided I wouldn’t be selfish and I’d share them. Enjoy:

@LeaVerou "moar awesome"

April 4, 2012 15:36 via TweetDeckReplyRetweetFavorite

@codepo8

Christian Heilmann

@LeaVerou Hah, yeah.. "Uhmm... lots of stuff added"

April 4, 2012 15:36 via webReplyRetweetFavorite

@vmasto

Vassilis Mast

@LeaVerou git commit - m "...stuff"

April 4, 2012 15:36 via TweetDeckReplyRetweetFavorite

@GovertVerschuur

Govert Verschuur

@LeaVerou A.K.A. "General design improvements"

April 4, 2012 15:37 via Twitter for MacReplyRetweetFavorite

@upperdog_se

UPPERDOG

@LeaVerou "Lotsa stuff." Always works for me.

April 4, 2012 15:37 via webReplyRetweetFavorite

@brunoscheele

Bruno Scheele

@LeaVerou Sounds like you need "committed something or other".

April 4, 2012 15:37 via Twitter for MacReplyRetweetFavorite

@idiot

Visual Idiot

@LeaVerou git commit -a -m "Metric ton of changes and stuff..."

April 4, 2012 15:37 via Twitter for iPhoneReplyRetweetFavorite

@LukeMaciak

Luke Maciak

@LeaVerou $git commit -a -m "Hey hehe.. this is awkward but I er... you know.. been busy.. with... stuff..."

April 4, 2012 15:37 via PollyReplyRetweetFavorite

@jfgen

Jorge Encarnação

@LeaVerou 'things, all the things'

April 4, 2012 15:39 via EchofonReplyRetweetFavorite

@AlexGraul

Alex Graul

@leaverou Try "Dragons be here"

April 4, 2012 15:40 via HootSuiteReplyRetweetFavorite

@captcodemonkey

Craig McCoy

@LeaVerou I tend to call these things "change binges", where I pretend I change a whole bunch of things on a whim before committing.

April 4, 2012 15:40 via Tweetbot for iOSReplyRetweetFavorite

@BoltClock

Daniel Tan

@LeaVerou "catch up commit"!

April 4, 2012 15:41 via Twitter for iPhoneReplyRetweetFavorite

@jwkozel

JWK

@LeaVerou "EVERYTHING."

April 4, 2012 15:47 via webReplyRetweetFavorite

@skidding

Ovidiu Cherecheș

@LeaVerou a generic "If you can't tell what I've done by reading the source, you don't deserve to complain about my lack of commit message!"

April 4, 2012 15:48 via webReplyRetweetFavorite

@omgmog

Max Glenister

@LeaVerou Just keep it simple with "sorry!"

April 4, 2012 15:52 via webReplyRetweetFavorite

@stevehickeydsgn

Steve Hickey

@LeaVerou git commit -m "Acquired by Facebook"

April 4, 2012 15:55 via webReplyRetweetFavorite

@_dte

Dan Eden

@LeaVerou git commit -a -m "Like a boss"

April 4, 2012 15:55 via webReplyRetweetFavorite

@nathandim

Nathan Dim

@LeaVerou "idiot commit"!

April 4, 2012 15:56 via Twitter for iPhoneReplyRetweetFavorite

@jwkozel

JWK

@LeaVerou there is only one way around this: delete commit history and start over with "First commit" :p

April 4, 2012 15:56 via Twitter for iPhoneReplyRetweetFavorite

@LukeMaciak

Luke Maciak

@LeaVerou "what is this, I don't even..."

April 4, 2012 15:57 via webReplyRetweetFavorite

@croncobaurul

Mihai Chereji

@LeaVerou 'Fixed stuff' generally fits well :)

April 4, 2012 15:58 via Hotot for ChromeReplyRetweetFavorite

@MayaPosch

Maya Posch

@LeaVerou "Reinvented the wheel. Again."

April 4, 2012 15:59 via webReplyRetweetFavorite

@OllyHodgson

Olly Hodgson

@LeaVerou only a link to that original tweet, *maybe* with the tweet text as a second paragraph.

April 4, 2012 16:00 via TweetDeckReplyRetweetFavorite

@eternicode

Andrew Rowls

@LeaVerou "This changes everything"

April 4, 2012 16:01 via Twitter for MacReplyRetweetFavorite

@mrtnrsl

Martin Rosell

@LeaVerou -m "this changes everything. again."

April 4, 2012 16:02 via webReplyRetweetFavorite

@kioopi

vTsoumenis

@LeaVerou features: "Made it better", bugs: "Fixed sh*t", tech tasks: "Misc. optimizations" or "Refactoring", mixed: "Chuck Norris was here"

April 4, 2012 16:06 via Twitter for MacReplyRetweetFavorite

@streetpc

Adrien Lavoillotte

@LeaVerou "the one true commit" always works for me ;)

April 4, 2012 16:06 via DestroyTwitterReplyRetweetFavorite

@GNi33

Lukas B Dot

@LeaVerou $git commit -a -m "Basically started from scratch and rewrote everything. NBD."

April 4, 2012 16:07 via webReplyRetweetFavorite

@jo_Osiah

Josiah Sprague

@LeaVerou "ALL THE CHANGES"

April 4, 2012 16:07 via Twitter for MacReplyRetweetFavorite

@dalecruse

Dale Cruse

@LeaVerou Commit message: What's elvish for "I forgot.";)

April 4, 2012 16:08 via Twitter for MacReplyRetweetFavorite

@jordanpittman

Jordan Pittman

@LeaVerou "REFACTOR ALL THE THINGS"

April 4, 2012 16:09 via Twitterrific for MacReplyRetweetFavorite

@michelegera

Michele Gerarduzzi

@LeaVerou "because of my lack of commits. I have committed myself"

April 4, 2012 16:13 via Tweetbot for iOSReplyRetweetFavorite

@StuRobson

Stuart Robson

@LeaVerou "this is not the commit message you are looking for..." ;)

April 4, 2012 16:18 via TweetDeckReplyRetweetFavorite

@gmoulin_dev

Guillaume Moulin

However, Open Source politics is not what I wanted to discuss today. It’s not the biggest potential benefit of reinventing the wheel. Minimizing overhead is. You hardly ever need 100% of a project. Given enough time to study its inner workings, you could always delete quite a large chunk of it and it would still fit your needs perfectly. However, the effort needed to do that or to rewrite the percentage you actually need is big enough that you are willing to add redundant code to your codebase.

Redundant code is bad. It still needs to get parsed and usually at least parts of it still need to be executed. Redundant code hinders performance. The more code, the slower your app. Especially when we are dealing with backend code, when every line might end up being executed hundreds or even thousands of times per second. The slower your app becomes, the bigger the need to seriously address performance. The result of that is even more code (e.g. caching stuff) that could have been saved in the first place, by just running what you need. This is the reason software like Joomla, Drupal or vBulletin is so extremely bloated and brings servers to their knees if a site becomes mildly successful. It’s the cost of code that tries to match everyone’s needs.

Performance is not the only drawback involved in redundant code. A big one is maintainability. This code won’t only need to be parsed by the machine, it will also be parsed by humans, that don’t know what’s actually needed and what isn’t until they understand what every part does. Therefore, even the simplest of changes become hard.

I’m not saying that using existing software or libraries is bad. I’m saying that it’s always a tradeoff between minimizing effort on one side and minimizing redundant code on the other side. I’m saying that you should consider writing your own code when the percentage of features you need from existing libraries is tiny (lets say less than  20%). It might not be worth carrying the extra 80% forever.

For example, in a project I’m currently working on, I needed to make a simple localization system so that the site can be multilingual. I chose to use JSON files to contain the phrases. I didn’t want the phrases to include HTML, since I didn’t want to have to escape certain symbols. However, they had to include simple formatting like bold and links, otherwise the number of phrases would have to be huge. The obvious solution is Markdown.

My first thought was to use an existing library, which for PHP is PHP Markdown. By digging a bit deeper I found that it’s actually considered pretty good and it seems to be well maintained (last update in January 2012) and mature (exists for over 2 years). I should happily use it then, right?

That’s what I was planning to do. And then it struck me: I’m the only person writing these phrases. Even if more people write translations in the future, they will still go through me. So far, the only need for such formatting is links and bold. Everything else (e.g. lists) is handled by the HTML templates. That’s literally two lines of PHP! So, I wrote my own function. It’s a bit bigger, since I also added emphasis, just in case:

function markdown($text) {
 // Links
 $text = preg_replace('@\\[(.+?)\\]\\((#.+?)\\)@', '<a href="$2">$1</a>', $text);

 // Bold
 $text = preg_replace('@(?<!\\\\)\\*(?<!\\\\)\\*(.+?)(?<!\\\\)\\*(?<!\\\\)\\*@', '<strong>$1</strong>', $text);

 // Emphasis
 $text = preg_replace('@(?<!\\\\)\\*(.+?)(?<!\\\\)\\*@', '<em>$1</em>', $text);

 return $text;
}

Since PHP regular expressions also support negative lookbehind, I can even avoid escaped characters, in the same line. Unfortunately, since PHP lacks regular expression literals, backslashes have to be doubled (\\ instead of \ so \\\\ instead of \\, which is pretty horrible).

For comparison, PHP Markdown is about 1.7K lines of code. It’s great, if you need the full power of Markdown (e.g. for a comment system) and I’m glad Michel Fortin wrote it. However, for super simple, controlled use cases, is it really worth the extra code? I say no.

Rachel Andrew recently wrote about something tangentially similar, in her blog post titled “Stop solving problems you don’t yet have“. It’s a great read and I’d advise you to read that too.

• Using a different <dl> for each pair: Style dictating markup, which is bad
• Floats: Not flexible
• display: run-in; on the <dt>: Browser support is bad (No Firefox support)
• Adding a <br> after each <dd> and setting both term and definition as display:inline: Invalid markup. Need I say more?

If only adding <br>s was valid… Or, even better, what if we could insert <br>s from CSS? Actually, we can!

As you might be aware, the CR and LF characters that comprise a line break are regular unicode characters that can be inserted anywhere just like every unicode character. They have the unicode codes 000D and 000A respectively. This means they can also be inserted as generated content, if escaped properly. Then we can use an appropriate white-space value to make the browser respect line breaks only in that part (the inserted line break). It looks like this:

dd:after {
	content: '\A';
	white-space: pre;
}

Note that nothing above is CSS3. It’s all good ol’ CSS 2.1.

Of course, if you have multiple <dd>s for every <dt>, you will need to alter the code a bit. But in that case, this formatting probably won’t be what you want anyway.

Edit: As Christian Heilmann pointed out, HTML3 (!) used to have a compact attribute on <dl> elements, which basically did this. It is now obsolete in HTML5, like every other presentational HTML feature.

You can see a live result here:

Tested to work in IE8+, Chrome, Firefox 3+, Opera 10+, Safari 4+.

Every time you call a proprietary feature “CSS3″, a kitten dies

Some comments about it on twitter:

What you think is CSS3, really may *not* be. How #CSS3 was infiltrated under a -webkit- cloak! http://t.co/BKgh0Ehf

February 14, 2012 16:13 via SGPlusReplyRetweetFavorite

@kkmett

Keith Kmett, CUA

Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies - http://t.co/8dfmh93u

February 14, 2012 16:19 via TweetDeckReplyRetweetFavorite

@codepo8

Christian Heilmann

Sing it, @leavrou "…proprietary features of today are no better than ActiveX & IE filters…only difference is better PR" http://t.co/TWVTAtSQ

February 14, 2012 16:20 via webReplyRetweetFavorite

@lydiamann

lydiamann

✩ Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies by @leaverou. http://t.co/V2iKffE8 #webkit #mustread #css3

February 14, 2012 16:22 via Tweet ButtonReplyRetweetFavorite

@zeldman

Jeffrey Zeldman

Lea Verou: Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies. http://t.co/8ILOQtQz #css3 #webstandards

February 14, 2012 16:23 via Twitterrific for MacReplyRetweetFavorite

@alistapart

A List Apart

Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies: Lea Verou in a special issue of @alistapart. http://t.co/6pcX26Ob

February 14, 2012 16:24 via Twitterrific for MacReplyRetweetFavorite

@happycog

Happy Cog™

Eye opening for me at least, had no idea some features in CSS3 where make believe http://t.co/vkHk5bEZ

February 14, 2012 16:33 via webReplyRetweetFavorite

@AlanBWhitney

Alan Whitney

I <3 new @alistapart articles: Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies http://t.co/IRaoGpJx #webstandards

February 14, 2012 16:38 via webReplyRetweetFavorite

@LeftyDesigner

Shannon Mølhave

I'm in love with the Valintine's Day issue of @alistapart. @LeaVerou is awesome. http://t.co/EZcU79Bd

February 14, 2012 16:48 via Twitter for MacReplyRetweetFavorite

@dap6000

Derek Pennycuff

Save teh kitteh (and teh web): Every time you call a proprietary feature “CSS3” a kitten dies, by @LeaVerou: http://t.co/uW7Lz6Q1

February 14, 2012 16:55 via Twitter for MacReplyRetweetFavorite

@martuishere

Marta Armada

Important Read! — Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies: http://t.co/T3HX6tYy

February 14, 2012 17:25 via Tweet ButtonReplyRetweetFavorite

@rachelober

Rachel Ober

Also on #ALA, @LeaVerou on the difference between CSS and WebKit and what it means for kittens http://t.co/OhOnSiWZ

February 14, 2012 17:30 via webReplyRetweetFavorite

@sgalineau

Sylvain Galineau

A List Apart on -webkit- css - http://t.co/wTGRIG5a - remember, the last time vendors ignored standards groups... we got a decade of IE6

February 14, 2012 17:50 via chrome-shareReplyRetweetFavorite

@sdague

Sean Dague

A cautionary tale of modern browsers: Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies: http://t.co/ynWIpbZN

February 14, 2012 18:01 via Tweet ButtonReplyRetweetFavorite

@whitman

Bobby Whitman

Go and read what @LeaVerou says about proprietary features, #CSS3 and kittens. http://t.co/4ogWcjwt

February 14, 2012 18:20 via webReplyRetweetFavorite

@peterwinnberg

Peter Winnberg

Before you disagree with me, just read this: http://t.co/pztTosp1 I'm so pissed off at @LeaVerou for being so damn talented. Great article.

February 14, 2012 19:09 via TweetDeckReplyRetweetFavorite

@cssquirrel

Kyle Weems

@LeaVerou nails it. http://t.co/H07y5AQJ Seems like we keep fighting the same battles. #css #standards

February 14, 2012 19:38 via webReplyRetweetFavorite

@jameswillweb

james williamson

Excellent couple articles on vendor prefixes at ALA: http://t.co/uz6zA7FW, http://t.co/MSKZVm4a. Brace yourself before reading comments tho.

February 14, 2012 20:06 via webReplyRetweetFavorite

@rogerjohansson

Roger Johansson

@LeaVerou great #ala article http://t.co/gCtSokC7 and the best possible followup for recent misunderstandings. Keep up the good work.

February 14, 2012 20:37 via webReplyRetweetFavorite

@beardChamp

Tim McElwee

And that brings us to the other thing that made me sad these days. 2 days ago, the CSS WG published its Minutes (sorta like a meeting) and I was surprised to hear that I’ve been mentioned. My surprise quickly turned into this painful feeling in your stomach when you’re being unfairly accused:

tantek: Opposite is happening right now. Web standards activists are teaching
 people to use -webkit-
tantek: People like Lea Verou.
tantek: Their demos are filled with -webkit-. You will see presentations
 from all the web standards advocates advocating people to use
 -webkit- prefixes.

Try to picture being blamed of the very thing you hate, and you might understand how that felt. I’ve always been an advocate of inclusive CSS coding that doesn’t shut down other browsers. It’s good for future-proofing, it’s good for competition and it’s the right thing to do. Heck, I even made a popular script to help people adding all prefixes! I’m even one of the few people in the industry who has never expressed a definite browser preference. I love and hate every browser equally, as I can see assets and defects in all of them (ok, except Safari. Safari must die ).

When Tantek realized he had falsely accused me of this, he corrected himself in the #css IRC room on w3.org:

[17:27] <tantek> (ASIDE: regarding using -webkit- prefix, clarification re: Lea Verou - she's advocated using *both* vendor prefixed properties (multiple vendors) and the unprefixed version after them. See her talk http://www.slideshare.net/LeaVerou/css3-a-practical-introduction-ft2010-talk from Front-Trends 2010 for example. An actual example of -webkit- *only* prefix examples (thus implied advocacy) is Google's http://slides.html5rocks.com/ , e.g.
[17:27] <tantek> http://slides.html5rocks.com/#css-columns has three -webkit- property declarations starting with -webkit-column-count )

That’s nice of him, and it does help. At least I had a link to give to people who kept asking me on twitter if I was really the prefix monster he made me out to be. The problem is that not many read the IRC logs, but many more read the www-style archives. Especially since, with all this buzz, many people were directed into reading this discussion by the above articles. I don’t know how many people will be misled by Tantek’s uninformed comment without reading his correction, but I know for sure that the number is non-zero. And the worst of all is that many of them are people in the CSSWG or in the W3C in general,  people who I have great respect and admiration for. And quite frankly, that sucks.

I don’t think Tantek had bad intentions. I’ve met him multiple times and I know he’s a nice guy. Maybe he was being lazy by making comments he didn’t check, but that’s about it. It could happen to many people. My main frustration is that it feels there is nothing I can do about it, besides answering people when they take the time to talk to me about it. I can do nothing with the ones that won’t, and that’s the majority. At least, if a forum was used over a mailing list, this could’ve been edited or something.

So, even though this solution was better, I wasn’t fully satisfied with it due to the need for the extra element. So, it kept being stuck in the back of my head.

Recently, I suggested to www-style that transform-origin should be a list and accept multiple origins and presented this example as a use case. And then Aryeh Gregor came up with this genius idea to prove that it’s already possible if you chain translate() transforms between the opposite rotates.

I simplified the code a bit, and here it is:

With the tools we currently have, I don’t think it gets any simpler than that.

Today I decided to simplify it a bit and make it more flexible, at the cost of browser support. The new version fully works in Firefox 1+ and IE10, since Opera and WebKit don’t support the ch unit and even though IE9 supports it, it doesn’t support CSS animations.

To put it simply, one ch unit is equivalent to the width of the zero (0) character of the font. So, in monospace fonts, it’s equivalent to the width of every character, since every character has the same width.

In the new version, we don’t need an obscuring span, so no extra HTML and it will work with non-solid backgrounds too. Also, even though the number of characters still needs to be hard-coded, it doesn’t need to be hardcoded in the animation any more, so it could be easily done through script without messing with creating/modifying stylesheets. Note how each animation only has one keyframe, and takes advantage of the fact that when the from (0%) and to (100%) keyframes are missing, the browser generates them from the fallback styles. I use this a lot when coding animations, as I hate duplication.

In browsers that support CSS animations, but not the ch unit (such as WebKit based browsers), the animation will still occur, since we included a fallback in ems, but it won’t be 100% perfect. I think that’s a pretty good fallback, but if it bothers you, just declare a fallback of auto (or don’t declare one at all, and it will naturally fall back to auto). In browsers that don’t support CSS animations at all (such as Opera), the caret will be a solid black line that doesn’t blink. I thought that’s better than not showing it at all, but if you disagree, it’s very easy to hide it in those browsers completely: Just swap the border-color between the keyframe and the h1 rule (hint: when a border-color is not declared, it’s currentColor).

Edit: It appears that Firefox’s support for the ch unit is a bit buggy so, the following example won’t work with the Monaco font for example. This is not the correct behavior.

Enjoy:

How it works

css3test (very superficially) tests pretty much everything in the specs mentioned on the sidebar (not just the popular widely implemented stuff). You can click on every feature to expand it and see the exact the testcases run and whether they passed. It only checks what syntax the browser recognizes, which doesn’t necessarily mean it will work correctly when used. WebKit is especially notorious for cheating in tests like this, recognizing stuff it doesn’t understand, like the values “round” and “space” for background-repeat, but the cheating isn’t big enough to seriously compromise the test.

Whether a feature is supported with a prefix or not doesn’t matter for the result. If it’s supported without a prefix, it will test that one. If it’s supported only with a prefix, it will test the prefixed one. For properties especially, if an unprefixed one is supported, it will be used in all the tests.

Only stuff that’s in a W3C specification is tested. So, please don’t ask or send pull requests for proprietary things like -webkit-gradient() or -webkit-background-clip: text; or -webkit-box-reflect and so on.

Every feature contributes the same to the end score, as well as to the score of the individual spec, regardless of the number of tests it has.

Crazy shit

Chrome may display slightly different scores (1% difference) across pageloads. It seems that for some reason, it fails the tests for border-image completely on some pageloads, which doesn’t make any sense. Whoever wants to investigate, I’d be grateful.
Edit: Fixed (someone found and submitted an even crazier workaround.).

Browserscope

This is the first project of mine in which I’ve used browserscope. This means that your results will be sent over to its servers and aggreggated. When I have enough data, I’m gonna built a nice table for everyone to see In the meantime, check the results page.

It doesn’t work on my browser, U SUCK!

The test won’t work on dinosaur browsers like IE8, but who cares measuring their CSS3 support anyway? “For a laugh” isn’t a good enough answer to warrant the time needed.

If you find a bug, please remember you didn’t pay a dime for this before nagging. Politely report it on Github, or even better, fix it and send a pull request.

Why did you build it?

To motivate browsers to support the less hyped stuff, because I’m tired of seeing the same things being evangelized over and over. There’s much more to CSS3.

Current results

At the time of this writing, these are the results for the major modern browsers:

• Chrome Canary, WebKit nightlies, Firefox Nightly: 64%
• Chrome, IE10PP4: 63%
• Firefox 10: 61%
• Safari 5.1, iOS5 Safari: 60%
• Opera 11.60: 56%
• Firefox 9: 58%
• Firefox 6-8: 57%
• Firefox 5, Opera 11.1 – 11.5: 55%
• Safari 5.0: 54%
• Firefox 4: 49%
• Safari 4: 47%
• Opera 10: 45%
• Firefox 3.6: 44%
• IE9: 39%

Enjoy! css3test.com Fork css3test on Github Browserscope results

Tabs take up less space

Yes, this might be an insignificant difference after gzipping and a nonexistent one after minification. But it means you need these processes to keep your code size reasonable. You depend on them, for no reason. Comments for example are useful, and it’s worth having them even if you knew you couldn’t minify or gzip your code. Tabs could do the same thing as spaces, so you’re just bloating your code for no reason.

Tabs can be personalized

The width of a tab character can be adjusted per editor. This is not a disadvantage of tabs as commonly evangelized, but a major advantage. People can view your code in the way they feel comfortable with, not in the way *you* prefer. Tabs decouple the code’s presentation from its logic, just like CSS decouples presentation from HTML. They give more power to the reader rather than letting the author control everything. Basically, using spaces is like saying “I don’t give a rat’s ass about how you feel more comfortable reading code. I will force you to use my preferences because it’s my code”.

Tabs are better for collaboration

Personalization is incredibly valuable when a team is collaborating, as different coders can have different opinions. Some coders prefer their indents to be 2 spaces wide, some coders prefer them to be 4 spaces wide. Rather than manually or automatically converting the code post-pull, and then back pre-commit, it would be adjusted automatically, depending on the editor’s tab-width setting, so every coder could start editing right away, with their favorite type of indent.

You don’t depend on certain tools

When using spaces, you depend on your editor to hide the fact that an indent is actually N characters instead of one. You depend on your editor to insert N spaces every time you press the Tab key and to delete N characters every time you press backspace or delete near an indent. When you have to use something that’s not your editor (for example when writing a snippet of code on a webapp that embeds something like codemirror) you will have to face the ugliness of your decision. Especially with codemirror, everyone else will have to face the ugliness of spaces too, as it converts tabs to spaces

Tabs are easy to select

Assume for some reason you want to select all indents and double them or convert them to spaces. This is very easy with tabs, because that’s their sole meaning. Tabs were invented for this sort of thing. Spaces on the other hand, have many meanings, so you can’t just find & replace space characters. And how do we usually call the practice of using things for a different purpose than they were made for? Yup, that’s right, using spaces for indentation is a hack.

Code indented with tabs is easier to copy & paste

As pointed out by Norbert Süle in the comments, when you copy and paste code that’s indented with spaces, you have to manually adjust the indentation afterwards, unless the other person also happens to prefer the same width indents as you. With tabs, there is no such issue, as it’s always tabs so it will fit in with your (tabbed) code seamlessly. The world would be a better place if everyone used tabs.

But what about the web? Tabs are super wide there!

This used to be a big problem, and even the enlightened coders that prefer tabs usually convert them to spaces before posting code online. However, CSS3 solves this problem, with the tab-size property. It’s supported by Opera, Firefox and very soon by WebKit too. It also degrades gracefully: The code is less pretty, but still perfectly readable.

Are spaces always evil?

Spaces are the best choice for aligning, rather than indenting. For example, in the following code snippet:

var x = 10,
    y = 0;

you need 4 spaces to make the variables line up. If you used tabs, they would only line up when the tab width is 4 and the formatting would look messed up in every other case. However, if this code snippet was also indented, the indents could (and should) still be tabs.

Another example is aligning CSS3 properties with different vendor prefixes. The indent should be done with tabs, but the aligning with spaces, like so:

div {
	-webkit-transition: 1s;
	   -moz-transition: 1s;
	    -ms-transition: 1s;
	     -o-transition: 1s;
	        transition: 1s;
}

It’s just a pointless detail, are you seriously that obsessed?

Um, ok I am exaggerating a bit when I say how spaces suck. I do think they suck, although I admit the world has much bigger problems than coders who use spaces for indentation.

For example, coders that don’t name their variables properly. Or the ones that prefer Emacs over Vim

Further reading

• Indentation With Spaces Considered Harmful
• Tabs vs spaces for code indentation
• Why I love having tabs in source code
• Tabs vs spaces
• Relevant: Elastic tabstops

Blogs are excellent places for new year’s resolutions. Posts stay there for years, to remind you what you’ve been thinking long ago. A list on a piece of paper or a file in your computer will be forgotten and lost, but a resolution on your blog will come back to haunt you. Sometimes you want that extra push. I’m not too fond of new year’s resolutions and this may as well be my first, but this year there are certain goals I want to achieve, unlike previous years were things were more fluid.

So, in 2012 I want to…

• Land my dreamjob in a US company/organization I respect
• Get the hell out of Greece and move to the Bay Area
• Strive to improve my english even more, until I sound and write like a native speaker
• Find a publisher I respect that’s willing to print in full color and write my first book.
• Stop getting into stupid fights on twitter. They are destructive to both my well-being and my creativity.
• Get my degree in Computer Science. This has been my longest side project, 4 years and counting.

We can’t do templating across pages

Before rushing to tell me “no, we can”, keep reading. I mean have different files and re-use them accross different pages. For example, a header and a footer. If our project is entirely client-side, we have to repeat them manually on every page. Of course, we can always use (i)frames, but that solution is worse than the problem it solves. There should be a simple way to inject HTML from another file, like server-side includes, but client-side. without using JavaScript at all, this is a task that belongs to HTML (with JS we can always use XHR to do it but…). The browser would then be able to cache these static parts, with significant speed improvements on subsequent page loads.

We can’t do localization

At least not in a sane, standard way. Client-side localization is a big PITA. There should be an API for this. That would have the added advantage that browsers could pick it up and offer a UI for it. I can’t count the number of times I’ve thought a website didn’t have an English version just because their UI was so bad I couldn’t find the switcher. Google Chrome often detects a website language and offers to translate it, if such an API existed we could offer properly translated versions of the website in a manner detectable by the browser.

Update: We have the ECMAScript Globalization API, although it looks far from ideal at the moment.

We can’t do screen capture

And not just of the screen, but we can’t even capture an element on the page and draw it on a canvas unless we use huge libraries that basically try to emulate a browser or SVG foreignObject which has its own share of issues. We should have a Screen Capture API, or at the very least, a way to draw DOM nodes on canvas. Yes, there are privacy concerns that need to be taken care of, but this is so tremendously useful that it’s worth the time needed to go intro researching those.

We can’t get POST parameters and HTTP headers

There’s absolutely NO way to get the POST parameters or the HTTP response headers that the current page was sent with. You can get the GET parameters through the location object, but no way to get POST parameters. This makes it very hard to make client-side applications that accept input from 3rd party websites when that input is too long to be on the URL (as is the case of dabblet for example).

We can’t make peer to peer connections

There is absolutely no way to connect to another client running our web app (to play a game for example), without an intermediate server.

Anything else we still can’t do and we still don’t have an API to do so in the future? Say it in the comments!

Or, if I’m mistaken about one of the above and there is actually an active spec to address it, please point me to it!

Why would you want to do these things client-side?!

Everything that helps take load away from the server is good. The client is always one machine, everything on the server may end up running thousands of times per second if the web app succeeds, making the app slow and/or costly to run. I strongly believe in lean servers. Servers should only do things that architecturally need a server (e.g. centralized data storage), everything else is the client’s job. Almost everything that we use native apps for, should (and eventually will) be doable by JavaScript.

I’ll post there about Dabblet updates and not flood my regular subscribers here who may not care. So, if you are interested on Dabblet’s progress, follow that blog or @dabblet on twitter.

That was also an excuse to finally try tumblr. So far, so good. I love how it gives you custom domains and full theme control for free (hosted WordPress charges for those). Gorgeous, GORGEOUS interface too. Most of the themes have markup from the 2005-2007 era, but that was no surprise. I customized the theme I picked to make it more HTML5-ey and more on par with dabblet’s style and it was super easy (though my attempt is by no means finished). There are a few shortcomings (like no titles for picture posts), but nothing too bad.

Native apps use these shortcuts all the time. For example, I press Cmd+1,2,3 etc in Espresso to navigate through files in my project. People press F1 for help. And so on. These shortcuts are so ingrained in our (power users) minds and so useful that we thoroughly miss them when they’re not there. Every time I press Cmd+1 in an OSX app and I don’t go to the first tab, I’m distraught. However, in web apps, these shortcuts are taken by the browser. We either have to use different shortcuts or accept overriding the browser’s defaults.

Using different shortcuts seems to be considered best practice, but how useful are these shortcuts anyway? They have to be individually learned for every web app, and that’s hardly about memorizing the “keyboard shortcuts” list. Our muscles learn much more slowly than our minds. To be able to use these shortcuts as mindlessly as we use the regular application shortcuts, we need to spend a long time using the web app and those shortcuts. If we ever do get used to them that much, we’ll have trouble with the other shortcuts that most apps use, as our muscles will try to use the new ones.

Using the de facto standard keyboard shortcuts carries no such issues. They take advantage of muscle memory from day one. If we advocate that web is the new native, it means our web apps should be entitled to everything native apps are. If native editors can use Cmd+1 to go to the first tab and F1 for help, so should a web editor. When you’re running a web app, the browser environment is merely a host, like your OS. The focus is the web app. When you’re working in a web app and you press a keyboard shortcut, chances are you’re looking to interact with that app, not with the browser Chrome.

For example, I’m currently writing in WordPress’ editor. When I press Cmd+S, I expect my draft to be saved, not the browser to attempt to save the current HTML page. Would it make sense if they wanted to be polite and chose a different shortcut, like Alt+S? I would have to learn the Save shortcut all over again and I’d forever confuse the two.

Of course, it depends on how you define a web app. If we’re talking about a magazine website for example, you’re using the browser as a kind of reader. The app you’re using is still the browser, and overriding its keyboard shortcuts is bad. It’s a sometimes fine distinction, and many disagreements about this issue are basically disagreements about what constitutes a web app and how much of an application web apps are.

So, what are your thoughts? Play it safe and be polite to the host or take advantage of muscle memory?

Edit: Johnathan Snook posted these thoughts in the comments, and I thought his suggested approach is pure genius and every web UX person should read it:

On Yahoo! Mail, we have this same problem. It’s an application with many of the same affordances of a desktop application. As a result, we want to have the same usability of a desktop application—including with keyboard shortcuts. In some cases, like Cmd-P for printing, we’ll override the browser default because the browser will not have the correct output.

For something like tab selection/editing, we don’t override the defaults and instead, create alternate shortcuts for doing so.

One thing I suggest you could try is to behave somewhat like overflow areas in a web page. When you scroll with a scroll mouse or trackpad in the area, the browser will scroll that area until it reaches it’s scroll limit and then will switch to scrolling the entire page. It would be interesting to experiment with this same approach with other in-page mechanisms. For example, with tabs, I often use Cmd-Shift-[ and Cmd-Shift-] to change tabs (versus Cmd-1/2/3, etc). You could have it do so within the page until it hits its limit (first tab/last tab) and then after that, let the event fall back to the browser. For Cmd-1, have it select the first tab. If the user is already on the first tab, have it fall back to the browser.

• JSFiddle is very JS oriented, as you can tell even from the name itself
• JSFiddle is heavily server-side so there’s always at least the lag of an HTTP request every time you make an action. It makes sense not to run JS on every keystroke (JSBin does it and it’s super annoying, even caused me to fall in an infinite loop once) but CSS and HTML could be updated without any such problems.
• I’m a huge tabs fan, I hate spaces for indenting with a passion.
• Every time I want to test a considerable amount of CSS3, I need to include -prefix-free as a resource and I can’t save that preference or any other (like “No library”).

Features

So what does dabblet have that similar apps don’t? Here’s a list:

• Realtime updates, no need to press a button or anything
• Saves everything to Github gists, so even if dabblet goes away (not that I plan to!) you won’t lose your data
• No page reloads even on saving, everything is XHR-ed
• Many familiar keyboard shortcuts
• Small inline previewers for many kinds of CSS values, in particular for: colors, absolute lengths, durations, angles, easing functions and gradients. Check them all in this dabblet.
• Automatically adds prefixes with -prefix-free, to speed up testing
• Use the Alt key and the up/down arrows to increment/decrement <length>, <time> and <angle> values.
• Dabblet is open source under a NPOSL 3.0 license
• You can save anonymously even when you are logged in
• Multiple view modes: Result behind code, Split views (horizontal or vertical), separate tabs. View modes can be saved as a personal preference or in the gists (as different demos may look better with different view modes)
• Editable even from an embedded iframe (to embed just use the same dabblet URL, it will be automatically adjusted through media queries)

Examples

Here are some dabblets that should get you started:

• http://dabblet.com/gist/1441328
• http://dabblet.com/gist/1454230
• http://dabblet.com/gist/1454409
• http://dabblet.com/gist/1457668
• http://dabblet.com/gist/1457677
• http://dabblet.com/gist/1421054
• http://dabblet.com/gist/1454889

Credits

Roman Komarov helped tremendously by doing QA work on dabblet. Without his efforts, it would have been super buggy and much less polished.

I’d also like to thank David Storey for coming up with the name “dabblet” and for his support throughout these 3 weeks.

Last but not least, I’d also like to thank Oli Studholme and Rich Clark for promoting dabblet in their .net magazine articles even before its release.

Update: Dabblet has its own twitter account now: Follow @dabblet

Discussion about prefixes was recently stirred up again by an article by Henri Sivonen, so the CSS WG started debating for the 100th time about when features should become unprefixed.

I think we need to think out of the box and come up with new strategies to solve the issues that vendor prefixes were going to fix. Vendor prefixes have failed and we can’t solve their issues by just unprefixing properties more early.

Issues

The above might seem a bold statement, so let me try to support it by recapping the serious issues we run into with vendor prefixes:

1. Unnecessary bloat

Authors need to use prefixes even when the implementations are already interoperable. As a result, they end up pointlessly duplicating the declarations, making maintenance hard and/or introducing overhead from CSS pre- and post-processors to take care of this duplication. We need to find a way to reduce this bloat to only the cases where different declarations are actually needed.

2. Spec changes still break existing content

The biggest advantage of the current situation was supposed to be that spec changes would not break existing content, but prefixes have failed to even do this. The thing is, most authors will use something if it’s available, no questions asked.  I doubt anyone that has done any real web development would disagree with that. And in most cases, they will prefer a slightly different application of a feature than none at all, so they use prefixed properties along with unprefixed. Then, when the WG makes a backwards-incompatible change, existing content breaks.

I don’t think this can really be addressed in any way except disabling the feature by default in public builds. Any kind of prefix or notation is pointless to stop this, we’ll always run into the same issue. If we disable the feature by default, almost nobody will use it since they can’t tell visitors to change their browser settings. Do we really want that? Yes, the WG will be able to make all the changes they want, but then then who will give feedback for these changes? Certainly not authors, as they will effectively have zero experience working with the feature as most of them don’t have the time to play around with features they can’t use right now.

I think we should accept that changes will break *some* existing content, and try to standardize faster, instead of having tons of features in WD limbo. However, I still think that there should be some kind of notation to denote that a feature is experimental so that at least authors know what they’re getting themselves into by using it and for browsers to be able to experiment a bit more openly. I don’t think that vendor prefixes are the right notation for this though.

3. Web development has become a popularity contest

I’ll explain this with an example: CSS animations were first supported by WebKit. People only used the -webkit- prefix with them and they were fine with it. Then Firefox also implemented them, and most authors started adding -moz- to their use cases. Usually only to the new ones, their old ones are still WebKit only. After a while, Microsoft announced CSS animations in IE10. Some authors started adding -ms- prefixes to their new websites, some others didn’t because IE10 isn’t out yet. When IE10 is out, they still won’t add it because their current use cases will be for the most part not maintained any more. Some authors don’t even add -ms- because they dislike IE. Opera will soon implement CSS animations. Who will really go back and add -o- versions? Most people will not care, because they think Opera has too little market share to warrant the extra bloat.

So browsers appear to support less features, only because authors have to take an extra step to explicitly support them. Browsers do not display pages with their full capabilities because authors were lazy, ignorant, or forgetful. This is unfair to both browser vendors and web users. We need to find a way to (optionally?) decouple implementation and browser vendor in the experimental feature notation.

Ideas

There is a real problem that vendor prefixes attempted to solve, but vendor prefixes didn’t prove out to be a good solution. I think we should start thinking outside the box and propose new ideas instead of sticking to vendor prefixes and debating their duration. I’ll list here a few of my ideas and I’m hoping others will follow suit.

1. Generic prefix (-x- or something else) and/or new @rule

A generic prefix has been proposed before, and usually the argument against it is that different vendors may have incompatible implementations. This could be addressed at a more general level, instead of having the prefix on every feature: An @-rule for addressing specific vendors. for example:

@vendor (moz,webkit,o) {
    .foo { -x-property: value; }
}

@vendor (ms) {
    .foo { -x-property: other-value; }
}

A potential downside is selector duplication, but remember: The @vendor rule would ONLY be used when implementations are actually incompatible.

Of course, there’s the potential for misuse, as authors could end up writing separate CSS for separate browsers using this new rule. However, I think we’re in a stage where most authors have realized that this is a bad idea, and if they want to do it, they can do it now anyway (for example, by using @-moz-document to target Moz and so on)

2. Supporting both prefixed and unprefixed for WD features

This delegates the decision to the author, instead of the WG and implementors. The author could choose to play it safe and use vendor prefixes or risk it in order to reduce bloat on a per-feature basis.

I guess a problem with this approach is that extra properties mean extra memory, but it’s something that many browsers already do when they start supporting a property unprefixed and don’t drop the prefixed version like they should.

Note: While this post was still in draft, I was informed that Alex Mogilevsky has suggested something very similar. Read his proposal.

3. Prefixes for versioning, not vendors

When a browser implements a property for the first time, they will use the prefix -a-. Then, when another browser implements that feature, they look at the former browser’s implementation, and if theirs is compatible, they use the same prefix. If it’s incompatible, they increment it by one, using -b- and so on.

A potential problem with this is collisions: Vendors using the same prefix not because their implementations are compatible but because they developed them almost simultaneously and didn’t know about each other’s implementation. Also, it causes trouble for the smaller vendors that might want to implement a feature first.

We need more ideas

Even if the above are not good ideas, I’m hoping that they’ll inspire others to come up with something better. I think we need more ideas about this, rather than more debates about fine-tuning the details of one bad solution.

It’s essentially a gallery of basic transitions. It aims to show how different animatable properties look when they transition and to broaden our horizons about which properties can be animated. Hover over the demos to see the animation in action, or click “Animate All” to see all of them (warning: might induce nausea, headache and seizures ). You can also click on it to see more details and get a permalink. Instead of clicking, you can also navigate with the arrow keys and press Esc to return to the main listing.

Fork it on Github and add your own ideas. Be sure to add your twitter username to them as a data-author attribute!

I’ve only tested in Firefox and Chrome for OSX so far. Not sure which other browsers are supported. However, since it uses CSS animations, we know for sure that it won’t work in browsers that don’t support CSS animations.

Hope you enjoy it

FromTheFront

This was a rather low-budget Italian conference that took place in Cesena, a city near Bologna. Despite the extremely low ticket price, they managed to pull off a very decent one day conference, which is very admirable. Italian food is so good that I’d recommend visiting this country even if it’s just for the food! They were very nice hosts, and I thoroughly enjoyed my time there.

My talk was right after Jeremy Keith‘s, who is a very well-known and experienced speaker that knows how to make audiences delirious (in a good way), so I was naturally a bit nervous about the unavoidable comparison. Despite my fears, my talk was very well received. Here’s a sample of the twitter feedback I got:

@LeaVerou is presenting js methods I did not even know existed during her css3 talk!!

September 29, 2011 21:50 via Plume  ReplyRetweetFavorite

@cedmax

cedmax

#ftf11 this is a real css/js hardcore talk. Fascinating @LeaVerou

September 29, 2011 21:54 via Twitter for AndroidReplyRetweetFavorite

@caludio

Claudio Cicali

#ftf11 when you watch a @LeaVerou presentation there is always something you didn't know

September 29, 2011 22:03 via Gravity!ReplyRetweetFavorite

@andypanix

Andrea Panisson

#ftf11 I hugged @leaverou at the end of her presentation at @fromthefront :-) Loved her

September 29, 2011 22:40 via Twitter for iPhoneReplyRetweetFavorite

@verlok

Andrea Verlicchi

Great presentation by @LeaVerou #ftf11

September 29, 2011 22:41 via Twitter for iPhoneReplyRetweetFavorite

@fburatti

Filippo Buratti

A whole hour of CSS3 to the tenth by @leaverou at #ftf11

September 29, 2011 22:48 via Twitter for iPhoneReplyRetweetFavorite

@Facens

Andrea Giannangelo

@leaverou "what can we do in this case?" Nice presentation of css problem solving #ftf11

September 29, 2011 22:19 via Twitter for iPadReplyRetweetFavorite

@matteocollina

Matteo Collina

JSConf EU

Next stop was Berlin and JSConf’s European sister conference. This was one of the most well organized conferences I’ve been to: The food, the coffee, the afterparties, the wifi, the projectors, everything was top notch. Also, it had a get-together the day after the conference (called “hangover.js”) which I think is great and more conferences should start adopting this tradition. It eases the pain of the conference being over and you get to say goodbye to a few folks you weren’t able to catch at the afterparty. It also featured many cool ideas, like a gal drawing live visualizations of the talks (Here’s mine) and a singer to open the conference in the first day singing a song to …Brendan Eich (!). I made new friends, had lots of fun and everything was awesome.

I was a bit more nervous about my talk for two reasons: Firstly, it was my first JavaScript talk, and secondly, it had no live demos like my CSS talks, which is a big part of why people like them. It went much better than I expected, and I got very good feedback and even though I went hugely overtime (I had 30 minutes and did 55!) nobody complained. Thankfully, it was right before lunch so I didn’t eat up another speaker’s time (which is part of the reason I love the pre-lunch spot so much).  I didn’t get the super-enthusiastic feedback I get from my CSS talks, but it was good enough to not be disappointed. Here’s a sample:

Now the lovely @leaverou is rocking the polyfills on stage at #jsconfeu - good talk, I worked through the slides with her earlier :)

October 2, 2011 12:49 via TweetDeckReplyRetweetFavorite

@codepo8

Christian Heilmann

wise JS code+hints on CSS and DOM features detections by @LeaVerou #jsconfeu

October 2, 2011 13:19 via Twitter for AndroidReplyRetweetFavorite

@WebReflection

Andrea Giammarchi

Awww @LeaVerou is sooo cute when saying "in other browsers, CSS polyfills are a pain in the ass!". Nice talk btw! #jsconfeu

October 2, 2011 13:19 via TweetDeckReplyRetweetFavorite

@nddrylliog

Amos Wenger

@LeaVerou dropping knowledge bomb after knowledge bomb about how to build polyfills. Awesome Talk! #jsconf

October 2, 2011 13:24 via Twitter for MacReplyRetweetFavorite

@cramforce

Malte Ubl

Don't do CSS polyfills! Says @LeaVerou. She is soooo right! #jsconfeu Excellent talk, really more technical then thought it would be!

October 2, 2011 13:38 via Twitter for iPhoneReplyRetweetFavorite

@wpbasti

Sebastian Werner

Overwhelming talk by @leaverou on #polyfills great detail hope to see it published! srsly this girl rocks http://t.co/APkxpGPl

October 2, 2011 13:49 via Twitter for iPhoneReplyRetweetFavorite

@claudiopro

Claudio Procida

some great work by @LeaVerou at #jsconfeu. "Impossible to detect"? Sounds like a fun game! :)

October 2, 2011 13:55 via webReplyRetweetFavorite

@VeganBen

Ben Green

@LeaVerou Really long and really informative. Dope styling + rich content. Congrats :)

October 2, 2011 14:05 via TweetDeckReplyRetweetFavorite

@nddrylliog

Amos Wenger

You can find my slides on Speakerdeck , Slideshare or the HTML version on my website.

Fronteers

I was looking forward to Fronteers the most, since it’s my favorite conference. It might not be the one with the most money or the biggest, but it has a special place in my heart for a number of different reasons (not all of which I can write in a public blog post). It was the first international conference I ever attended (in 2010) and I’ve met there so many people I used to only know (and admire) as a name & avatar before. It’s the conference I’ve had the most fun at, in both years I’ve been there. Everyone, the volunteers, the attendees, the speakers, everyone is awesome. There is something magic about this conference, as most of its speakers and attendees think about it in the same way (Christian Heilmann for example calls it “his special conference” and he goes to A LOT of conferences). It doesn’t just feel like a professional conference, it feels like a big, loving, open, web development family that gets together once a year to celebrate the advances in our field.

But this time, I wasn’t just an attendee. I wasn’t a regular speaker either. I was also hosting a workshop, my first full day workshop. I was super stressed about that, and in retrospect, it was the most exhausting thing I have ever done. Some other speakers told me it felt so exhausting because it was my first, I really hope they’re right. Luckily, attendees loved it, and they didn’t seem to notice my progressively getting tired after the 4th hour. Here’s some of the feedback I got:

Cool way of testing your CSS3 skills. Interesting workshop so far @LeaVerou #fronteers11 http://t.co/ht9XwgHY

October 5, 2011 10:52 via webReplyRetweetFavorite

@flyingpinguin

Jurgen Vansteelant

Need coffee to keep up with @LeaVerou! Very nice and interactive workshop so far, though. #fronteers11

October 5, 2011 11:05 via YoruFukurouReplyRetweetFavorite

@V_v_V

Vivienne

Lea Verou really does it right. Her css3 workshop is pretty awesome! @leaverou #fronteers11

October 5, 2011 11:36 via TweetDeckReplyRetweetFavorite

@Jessman5

Jessica Lazarus

Agree :) RT @Jessman5: Lea Verou really does it right. Her css3 workshop is pretty awesome! @leaverou #fronteers11

October 5, 2011 11:57 via TweetDeckReplyRetweetFavorite

@tforza

Tamara Forza

The CSS3 workshop by @LeaVerou is pretty well executed. Learning loads of new stuff!

October 5, 2011 12:24 via Twitter for MacReplyRetweetFavorite

@ronderksen

Ron Derksen

My talk was the next day, and even though I was afraid it would be bad due to being tired from the workshop and the pre-party, I think it was my best talk ever. I was much more relaxed, and I got the most enthusiastic feedback I ever have. My hand literally got tired favoriting tweets, and I’m pretty sure I missed some. Here’s a small sample:

If you thought you can just miss the CSS talk by @leaverou at #fronteers11, you're doing a big mistake. The talk will be amazing.

October 6, 2011 11:36 via TweetDeckReplyRetweetFavorite

@smashingmag

Smashing Magazine

Up next is @LeaVerou, awesome! #fronteers11 http://t.co/ZsL1mPST

October 6, 2011 11:38 via Twitter for iPadReplyRetweetFavorite

@ldebrouwer

Luc De Brouwer

Whee, @LeaVerou on stage. Css3 madness ensues. #fronteers11 http://t.co/OefgPsYQ

October 6, 2011 11:39 via Twitter for iPhoneReplyRetweetFavorite

@wnas

wilfred nas

Live coding CSS queen @LeaVerou is now talking about 10 things we didn't know yet. #fronteers11

October 6, 2011 11:44 via EchofonReplyRetweetFavorite

@FronteersConf

Fronteers Conference

.@LeaVerou is like a CSS3 knowledge cannon on stage! #fronteers11 http://t.co/3IOXbUQl

October 6, 2011 11:47 via Twitter for iPadReplyRetweetFavorite

@ldebrouwer

Luc De Brouwer

I've seen @LeaVerou's 10 things talk three times now, yet still somehow manage to learn something new each time. Nice work.

October 6, 2011 11:51 via Twitter for MacReplyRetweetFavorite

@addy_osmani

Addy Osmani

Great live CSS coding session by @LeaVerou revealing some very handy ans usable#CSS tricks #fronteers11

October 6, 2011 12:01 via TweetDeckReplyRetweetFavorite

@LuukWilms

Luuk Wilms

There are some really awesome CSS3 tricks shown by @LeaVerou here at #fronteers11

October 6, 2011 12:05 via webReplyRetweetFavorite

@Georg_Tavonius

Georg_Tavonius

@LeaVerou just made geeks to love CSS. Nice usage of CSS pseudo-selectors! #fronteers11

October 6, 2011 12:06 via Twitter for iPhoneReplyRetweetFavorite

@okonetchnikov

Andrey Okonetchnikov

@LeaVerou is on fire. #fronteers11

October 6, 2011 12:07 via Twitter for iPhoneReplyRetweetFavorite

@decthomas

Thomas Deceuninck

CSS Mindfucks by @LeaVerou #fronteers11

October 6, 2011 12:08 via Tweetbot for iPhoneReplyRetweetFavorite

@eising

Arjan Eising

@leaverou showing off insanely amazing capabilities of CSS3 with the :nth-child selectors with adding and removing elements #fronteers11

October 6, 2011 12:08 via Twitter for MacReplyRetweetFavorite

@artjulian

Arthur Stobbelaar

Impressive css selector-fu by @LeaVerou gets an applause from the #fronteers11 audience. And rightly so. Respect!

October 6, 2011 12:09 via Mobile WebReplyRetweetFavorite

@ronderksen

Ron Derksen

I was sceptical because of the title of this talk. But @LeaVerou rocks "10 things you might not know about CSS3" #fronteers11

October 6, 2011 12:10 via Twitter for iPadReplyRetweetFavorite

@dantz

Andreas Dantz

Indeed 10 CSS3 Secrets that are actually secrets. Mind=blown. #fronteers11 by @LeaVerou

October 6, 2011 12:11 via Twitter for MacReplyRetweetFavorite

@nerdismus

Nils Riedemann

Can't wait for @LeaVerou 's presentation/slides to come online. And she's not even done. #fronteers11 #cssQueen

October 6, 2011 12:12 via Twitter for iPhoneReplyRetweetFavorite

@okke29

Auke

.@LeaVerou has magic css powers. Seriously! #fronteers11

October 6, 2011 12:16 via Tweetbot for iPhoneReplyRetweetFavorite

@mylittletony

Anthony

@LeaVerou kudos for your live coding slides! Awesome! And thank you very much for some very useful tips!

October 6, 2011 12:24 via TweetDeckReplyRetweetFavorite

@LuukWilms

Luuk Wilms

@LeaVerou talks things about CSS3, I didn't know before. I am shocked! o_O #fronteers11 http://t.co/i4A6MdOk

October 6, 2011 12:25 via webReplyRetweetFavorite

@soswow

Aleksandr Motsjonov

@leaverou on CSS3 completely blew me away. Very creative use of properties and selectors. #fronteers11

October 6, 2011 12:25 via EchofonReplyRetweetFavorite

@mennovanslooten

Menno van Slooten

Kudos to @LeaVerou for cramming all these unknown CSS gems in one hour! Thanks! #fronteers11

October 6, 2011 12:28 via EchofonReplyRetweetFavorite

@FronteersConf

Fronteers Conference

@leaverou makes CSS look easy! #fronteers11

October 6, 2011 12:29 via EchofonReplyRetweetFavorite

@edgarleijs

Edgar Leijs

@LeaVerou kicked a whole lotta ass! #fronteers11

October 6, 2011 12:29 via Socialite.appReplyRetweetFavorite

@usethetics

Usethetics

Totally amazed by the vast knowledge and CSS skills of @leaverou. Wow. Learned some nice css3 tricks along the way! #fronteers11

October 6, 2011 12:33 via TweetDeckReplyRetweetFavorite

@peterpeerdeman

Peter Peerdeman

Just seen @LeaVerou pull some amzing rabbits out of the hat. Pure magic at #fronteers11

October 6, 2011 12:35 via SeesmicReplyRetweetFavorite

@bjornjohansen

Bjørn Johansen

10 blackbelt CSS3 techniques in under one hour. @LeaVerou is a CSS guru! #fronteers11

October 6, 2011 12:37 via Twitter for AndroidReplyRetweetFavorite

@cruster

Ján Sokoly

@LeaVerou just rocked my CSS3 world. #impressed

October 6, 2011 13:36 via Twitter for iPhoneReplyRetweetFavorite

@decthomas

Thomas Deceuninck

This is probably the most enjoyable/informative talk on CSS I've attended (& I've attended many) @leaverou = awesome presenter. #fronteers11

October 6, 2011 14:12 via Tweetbot for iPhoneReplyRetweetFavorite

@aral

Aral Balkan

So glad I got to thank the lovely @LeaVerou in person for all her hard work! #fronteers11

October 6, 2011 18:57 via Twitter for iPhoneReplyRetweetFavorite

@ldebrouwer

Luc De Brouwer

Recapping the first day of #fronteers11 - the talks by @aral and @leaverou were the definitive highlights. I'm glad I came.

October 6, 2011 18:57 via webReplyRetweetFavorite

@wiekatz

Patrick Hund

First day at #fronteers11, with great presentations by @LeaVerou (awesome skills), @brucel (really funny) and @aral (inspiring enthusiasm)

October 6, 2011 19:02 via webReplyRetweetFavorite

@GovertVerschuur

Govert Verschuur

@LeaVerou BTW, saw you in Stockholm and sat behind you today during the afternoon. Big fan! #fronteers11 #sweden

October 6, 2011 19:23 via Twitter for iPhoneReplyRetweetFavorite

@johannesaxner

Johannes Axner

The "10 secrets of css3" talk at #fronteers11 by @leaverou all summed up here http://t.co/IJeW3UdP

October 6, 2011 22:16 via Twitter for MacReplyRetweetFavorite

@flurin

Flurin Egger

My slides are now online at Speakerdeck, Slideshare and the interactive version on my website.

Frontend 2011

Oslo is a city I’ve been to many times in the past, so there was nothing new to see there. I didn’t make it to the speakers dinner & pre-party due to my late flight, which kinda sucked but it’s my fault since it took me a long while to decide on my flight dates. The conference itself was a bit more design-focused that I’d like, but very well organized. It took place in the same hotel the speakers were staying at, which is always a good thing. It also had the best coffee I’ve ever drank at a conference, and one of the best I’ve tasted in general. I also loved the idea of having multiple projectors, so that everyone in the audience can see clearly. They had the very original idea of not only drawing caricatures for every speaker (here’s mine, I also got it in a nice frame) but also having the artist in the venue to draw caricatures for attendees as well!

My talk went smoothly, and received very good feedback:

Awesome CSS3 use cases from @LeaVerou on #frontend2011 livestream http://t.co/a1YLCZLE

October 11, 2011 14:30 via Twitter for MacReplyRetweetFavorite

@iceMagic

Eystein

fantastic presentation from @LeaVerou at #frontend2011 is online http://t.co/GP5VU5Whuses her own build CSSS slides framework

October 11, 2011 14:46 via webReplyRetweetFavorite

@gustaff_weldon

Gustaff Weldon

Great CSS3 Talk at #frontend2011 by @LeaVerou!

October 11, 2011 14:47 via Twitter for MacReplyRetweetFavorite

@kaelig

Kaelig Deloumeau

Great presentation @leaverou ! Grwat presentation framework! http://t.co/zKw8XRHH #frontend2011

October 11, 2011 14:50 via HootSuiteReplyRetweetFavorite

@orioltf

Oriol Torrent

Wow, @LeaVerou fantastic presentation.Link to slides: http://t.co/6ssRhhxL. #frontend2011

October 11, 2011 14:50 via Twitter for MacReplyRetweetFavorite

@chemikpil

Michał Maćkowiak

really enjoyed @LeaVerou's talk, some great tips n tricks #css3 #frontend2011

October 11, 2011 14:50 via webReplyRetweetFavorite

@gav_taylor

Gavin Taylor

Just attended an amazing session with @LeaVerou. Thank you! #frontend2011

October 11, 2011 14:51 via Mobile WebReplyRetweetFavorite

@mikaeljorhult

Mikael Jorhult

Inspiring peek into the less widespread secrets of #CSS3 with @LeaVerou . @ded up next on modular #JavaScript with Ender #frontend2011

October 11, 2011 14:59 via Twitter for MacReplyRetweetFavorite

@ken_guru

Ken Paulsen

Great preso on CSS3 by @LeaVerou http://t.co/6wOOpoCB Thanks a lot Lea, really enjoyed it.

October 11, 2011 18:52 via Twitter for MacReplyRetweetFavorite

@cornae

Cornelis Kolbach

That’s it. I now get to rest for a while. Next stop is SWDC in November, which will host the première of my new talk “CSS in the 4th dimension: Not your daddy’s CSS animations” which will be about CSS transitions & animations, from the basics all way to badass secrets.

Thanks to all the conference organizers for inviting me and for the attendees for attending and giving feedback on my talks. You are all awesome, and it was the best 2 weeks ever.

Usually my github workflow is like this:

git add .
git status // to see what changes are going to be commited
git commit -m 'Some descriptive commit message'
git push origin master

Now, when I use gh-pages, there are only a few more commands that I have to use after the above:

git checkout gh-pages // go to the gh-pages branch
git rebase master // bring gh-pages up to date with master
git push origin gh-pages // commit the changes
git checkout master // return to the master branch

I know this is old news to some of you (I’m a github n00b, struggling with basic stuff, so my advice is probably for other n00bs), but if I had read this a few months ago, it would’ve saved me big hassles, so I’m writing it for the others out there that are like me a few months ago.

Now if only I find an easy way to automate this…

Read my announcement about it on Smashing Magazine.

Hope you like it!

First of all, it gave me the opportunity to visit Zurich for free, and meet an old friend for the first time. A girl we used to be penpals with at primary school & junior high when she was still living in Athens and I in Lesvos. She is now living in Zurich and doing her PhD in ETH. I arrived in Zurich a day earlier and stayed in her place that first night. We caught up and I had a great time.

Secondly, the rest of the speakers are great people and fun too, it was a pleasure to meet them. Especially Smashing Magazine‘s Vitaly Friedman. He’s a very kind guy, nothing like what you’d expect from somebody so successful. I also got the chance to meet Robert again, who was lots of fun as always. Those Swedes have a great sense of humor!

The conference itself was very nice, although small (only 200 people). Many inspiring talks, although I couldn’t attend them all because they were split into multiple tracks in one day. I would very much prefer it if it had 1 track and was 2 days. The 2nd day was an unconference, where attendees could speak, about whatever they wanted. I decided to get some sleep the second day, so I arrived a bit later, and didn’t attend many talks. It was kinda sad that it finished so early, around 4pm almost everyone was gone and most speakers were flying back the same day.

My talk went great, although I had the most technical glitches I’ve ever faced in a talk. That was my fault, not the conference’s. I guess I should learn to stop tweaking my slides at the last moment, cause things might break (and this time they did). Despite those glitches however, the audience loved it. Here’s a small sample of the twitter feedback I got:

.@LeaVerou is up the stage now! Live stream: http://t.co/qG3eM7Q

September 9, 2011 11:07 via CoTweetReplyRetweetFavorite

@frontendconfch

Frontend Conference

I really like the slides by @LeaVerou. Please make them available later on, Lea. #FEC11

September 9, 2011 11:08 via Twidroyd for AndroidReplyRetweetFavorite

@FabianBeiner

Fabian Beiner

Outstanding live CSS examples in the slides by @leaverou. #fec11

September 9, 2011 11:09 via EchofonReplyRetweetFavorite

@michalbe

Michal Budzynski

Using multiple outlines with CSS3 box shadows, one of @LeaVerou's awesome live slides at #fec11: http://img.ly/8dgR

September 9, 2011 11:14 via Tweetbot for iPhoneReplyRetweetFavorite

@jfahrenkrug

Ⓙohannes Ⓕahrenkrug

@LeaVerou has some seriously good CSS3 tricks up her sleeve. #fec11

September 9, 2011 11:14 via Twitter for MacReplyRetweetFavorite

@kcornelius

Kathryn Cornelius

Wicked! Spread-radius for box-shadow could be really useful /cc @LeaVerou

September 9, 2011 11:14 via Twitter for MacReplyRetweetFavorite

@backflip

Thomas Jaggi

Multiple box-shadows! Brilliant! Thank you @LeaVerou #fec11

September 9, 2011 11:16 via EchofonReplyRetweetFavorite

@cainvommars

Peter Willert

I sure hope the slides will be available online, there are some really cool CSS tricks in the talk by @LeaVerou #fec11 /cc @lejoe @nicam

September 9, 2011 11:21 via Tweetbot for iPhoneReplyRetweetFavorite

@euklid

Fabian

Learning a lot of CSS3 hacks with @LeaVerou at #fec11.

September 9, 2011 11:31 via webReplyRetweetFavorite

@shvi

Pierre Spring

@LeaVerou sure knows what she is talking about. #impressing #fec11

September 9, 2011 11:33 via webReplyRetweetFavorite

@lorentzforce

Simon Josi ⚡

.@LeaVerou sure knows how to catch the audience ;) #SwissFlag #fec11 #kudos /cc @frontendconfch http://t.co/ysl61uG

September 9, 2011 11:54 via TweetDeckReplyRetweetFavorite

@mettlerd

Daniel Mettler

Thanks @LeaVerou, this was an awesome talk. :)

September 9, 2011 11:54 via Twidroyd for AndroidReplyRetweetFavorite

@FabianBeiner

Fabian Beiner

Check out @LeaVerou's awesome html5 slides framework CSSS at http://t.co/vgPTwWL #fec11

September 9, 2011 11:55 via Tweetbot for iPhoneReplyRetweetFavorite

@jfahrenkrug

Ⓙohannes Ⓕahrenkrug

Thank you for your absolutely awesome talk @LeaVerou!

September 9, 2011 12:00 via Tweetbot for iPhoneReplyRetweetFavorite

@jfahrenkrug

Ⓙohannes Ⓕahrenkrug

And here is the recorded Session of @LeaVerou at the @frontendconfch http://t.co/A3dxNaU #fec11

September 9, 2011 12:01 via TweetDeckReplyRetweetFavorite

@Schnitzel

Michael Schmid

@leaverou great presentation about #css3 secrets. i really need to check #csss now http://t.co/CW2Ipy1 #fec11

September 9, 2011 12:03 via Mobile WebReplyRetweetFavorite

@marcoegli

Marco Egli

@LeaVerou Don't be disappointed by "no questions". This just means your talk was so good that there are no open ones. :)

September 9, 2011 12:04 via Twidroyd for AndroidReplyRetweetFavorite

@FabianBeiner

Fabian Beiner

great speach by @leaverou she really showed 10 new things bout css3 I didn't know

September 9, 2011 12:06 via Tweetbot for iPhoneReplyRetweetFavorite

@mauricenaef

Marcel Maurice Naef

@sprain @frontendconfch Der Talk von @LeaVerou war sehr lehrreich!

September 9, 2011 12:11 via Twitter for iPhoneReplyRetweetFavorite

@lulezi

Luzi Humm

@LeaVerou Wonderful presentation Lea! :-) Great work! Impressive CSS3 examples you had... Enjoyed it very much! :-) εύγε!

September 9, 2011 12:17 via webReplyRetweetFavorite

@smash_it_on

Iris

@LeaVerou Nice presentation with some very useful examples!

September 9, 2011 12:19 via webReplyRetweetFavorite

@walktheweb

Robin

WEB: CSS3 Secrets: 10 things you might not know about CSS3 from @LeaVerou at @frontendconfch http://t.co/9mVeOfz Smart girl ;-)

September 9, 2011 12:43 via TweetDeckReplyRetweetFavorite

@andypanix

Andrea Panisson

If you fancy css3, the talk by @LeaVerou @frontendconf is a must watch. http://t.co/bQaiwrs #fec11

September 9, 2011 13:13 via webReplyRetweetFavorite

@lorentzforce

Simon Josi ⚡

Delightful, eye-opening talks by @michalbe (next gen web games) and @LeaVerou (CSS3 wizardry) were a great kickstart to #fec11

September 9, 2011 13:31 via webReplyRetweetFavorite

@loleg

Oleg

@LeaVerou totally rocked at her #CSS3 presentation. The #fec11 fee is now worth every penny. http://t.co/C1QlPqm

September 9, 2011 13:59 via TweetDeckReplyRetweetFavorite

@whitefleaCH

Thomas Lohbeck

@LeaVerou - Awesome CSS3 Secrets presentation. Loved your comment "Thats what they deserve for using IE8" =) http://t.co/U5bULgo

September 9, 2011 18:09 via EchofonReplyRetweetFavorite

@Juztin

Justin

Totally blown away by @leaverou's "10 things about CSS3" talk http://yjo.go.ly - she channels the pragmatism of @simplebits to a T. #mustsee

September 9, 2011 21:52 via TweetDeckReplyRetweetFavorite

@codepo8

Christian Heilmann

OMG @leaverou is such a CSS think-tank superhero! Watch her talk on CSS3 http://t.co/QFkA5KX now. And then worship her. I do.

September 9, 2011 23:26 via TweetDeckReplyRetweetFavorite

@derSchepp

Christian Schaefer

Just listened to @LeaVerou speaking at @frontendconfch, what a fantastic talk. So would love to hear her speak in person some time.

September 10, 2011 00:11 via webReplyRetweetFavorite

@susanjrobertson

Susan Robertson

If you read the above carefully, you might have noticed that my talk was recorded, so you can see it too. Enjoy!

Actually, while using Chainvas myself, I found it immensely more useful for chaining DOM methods and setting multiple element properties at once. Chainvas had a lot of potential, that most people were missing. And then it dawned on me: I should modularize the library! A generic chaining library at its core and additional modules for making the different APIs chainable. And I did it.

On the way to that, I added IE8 compatibility, and tested in many other browsers, thanks to Browserstack. I actually found that Chainvas’ core even works in IE6! I also wrote unit tests, a much more extensive documentation, added a script generated table of contents and designed a logo and a Chainvas pride banner.

Also, since it was now modular, it needed a build script. I badly wanted to make this client side, so I followed this architecture:

• Every module is included in chainvas.js and chainvas.min.js, along with a header comment that follows a specific syntax.
• The user selects a compression level and then, the relevant script is downloaded through XHR and split into parts according to the module headers. Then a module list is generated with checkboxes for the user to select the ones they want to include.
• When the user checks and unchecks those checkboxes, the URL of the download link changes to a data URI that contains the script.

However, in the case of cubic-bezier() that’s not enough. No matter how much you see someone changing the parameters, if you don’t picture it in a 2D plane, it’s very hard to understand how it works. So, the night before, I searched for a tool I could use to show them how bezier curves are formed. I found plenty, but all of them restricted the the coordinates to the 0-1 range. I’m not sure if the cause is ignorance about the spec changes or that Webkit hasn’t caught up with those changes yet (but it will, soon). The only one that supported values out of range was this one from the Opera Dragonfly developers, but I found it kinda impossible to adapt.

For my talk, I tried to adapt one of them but it was late so I gave up after a while and ended up just showing them a screenshot. And the day after the talk, I started adapting this to my needs (ever tried coding at a conference? It’s awesome, you get to ask questions from very knowledgeable people and ger replies straight away). And then I started cleaning up the code, changing how it worked, adding features. At this point, I think the only thing that’s left from that tool is …the HTML5 doctype. After 3-4 days, I finished it, and got it its own domain, cubic-bezier.com (I was surprised it was still free).

So, in a nutshell, what makes this better?

Lots of things:

• It supports y values out of range, as per the latest version of the spec (and shows a warning for Webkit)
• It’s fully accessible from the keyboard
• You can move the handles not only by dragging but also by clicking on the plane or using the keyboard arrow keys
• You can mouse over the plane and see the progression and time percentages that correspond to every point
• You can save curves you like in your “Library” (uses localStorage to persist them)
• You can import and export curves to/from your library to share them with others
• You can share a permalink to every curve. For example, here’s a bouncing transition (FF & Opera only)
• You can compare the current curve with any in your library, setting the duration yourself
• Custom favicon that reflects the current curve

Cool stuff used

Given that this tool is not only for developers, but for badass developers that care about stuff like cubic-bezier(), I think I can safely assume they’re using a top notch browser. So, I went crazy with using cool modern stuff:

• HTML5: Canvas, localStorage, History API, range inputs, oninput event, output, classList, data- attributes
• ES5: Accessors, Array#map, Array#forEach
• Selectors API
• JSON
• CSS3: Transitions, gradients, media queries, border-radius, shadows, :in-range pseudoclass, box-sizing, transforms, text-overflow

Browser support

So far, I’ve tested it in modern versions of Chrome, Firefox, Opera and Safari and it seems to work. I haven’t tested it in IE10 (too lazy to open vm), although I want it to work there too, so if it doesn’t let me know.

Enjoy! cubic-bezier.com

However, I think my attempt has merit, because it’s not really focused in chaining canvas methods, but just about every API you use it on and because it’s super small, only 1KB!