Episode 139 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews Lea Verou (@leaverou) the speaker and web developer who helps us all with her cool CSS3 tools on her site lea.verou.me.
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
SitePoint Podcast #139: Experimenting With CSS3 with Lea Verou(MP3, 44:56, 43.1MB)
Episode Summary
Louis and Lea discuss the tool out there for using CSS3, her contribution to those and what the current topics are on the conference circuit.
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/139.
Interview Transcript
Louis: Hello and welcome to another episode of the SitePoint Podcast. My guest on the show today is a Web designer and developer who I’ve wanted to have on the show for some time now, it’s finally sort of aligned, you’ve been very busy with conferences, Lea Verou, hi Lea.
Lea: Hi Louis, thanks for having me here.
Louis: It’s absolutely a pleasure. I’ve been sort of following your work on your website and on Twitter for some time, it’s just sort of all of a sudden I think a couple of months ago just about everyone I followed suddenly started re-Tweeting your stuff and with reason, you’ve done a lot of really cool stuff, so I wanted to have you on the show and talk about that a little bit.
Lea: Thank you so much. It’s funny; I keep hearing the same thing from many people that you suddenly started being popular even though I was working on this stuff for like years.
Louis: Yeah, I guess it’s just the whimsy of the Internet and social media that all of a sudden if a few people who have a lot of followers who are well known catch on to your work and it explodes all of a sudden. Just an example of that, I think you’re still — you’re a finalist in the .net Magazine Awards in the category of Brilliant Newcomer, am I right?
Lea: Yeah, I’m in the three finalists and the results come out in like nine days, so I’m kind of looking forward to what they’ll be.
Louis: Yeah, well, congratulations on the nomination and on making it through to the final round.
Lea: Thank you.
Louis: You’ve been really busy of late, it’s one of the reasons it’s taken a little while to get you on the show is you’ve been traveling a lot and giving talks at conferences.
Lea: Well, October and November are usually really busy months conference-wise, there are many, many conferences these months; I’m not sure exactly why. And especially October has been crazy for me, I had like four conferences in a row flying from one country to the other, it was so exhausting, but really it felt good but it was really exhausting.
Louis: Yeah, I can imagine. I saw the video of one of your talks.
Lea: Which one?
Louis: The CSS3 Secrets, I think it was from Fronteers is the one that was — that I saw a video of.
Lea: Oh, good. I think that was one of my best.
Louis: (Laughs) Well, that’s good. So I’ll talk about that a little bit later, but first, since you’ve been traveling to all these conferences what’s the report from the front-lines, what are the big themes that everyone’s talking about, what’s your take on the vibe at these conferences?
Lea: Most talks, well, it seems like the hot topics in our industry right now are CSS3, of course, so a big bunch of talks are about CSS3 or server side JavaScript. I’ve listened to many talks about Node.js or also ECMAScript 6 Harmony that’s coming now and it’s quite hot in the JavaScript industry. Also we have many people coming over from the Flash world and they are educating us about their experiences with animations, they’re much better with this stuff and we have loads to learn from them like, for example, Aral Balkan, he gave a really interesting talk at Fronteers, or also Seb Lee-Delisle, I’m not sure if I’m pronouncing his name right, he also gave an amazing talk at Fronteers, and he used to be a Flash developer; we have loads to learn from these people.
Louis: Yeah, that’s really interesting, it’s something you don’t tend to think about but I imagine there are probably a lot of people who’ve been working in the Flash world for years who are very familiar with all these concepts of doing keyframe animation and doing somewhat more dynamic interactions on the Web, and now that we have these tools available in the browser directly I guess it makes sense for a lot of these people to have a lot to teach us.
Lea: Exactly. We can learn the technology ourselves, we can learn how to write the keyframe animations and the animation property, but they know, they actually know the physics, they’ve worked for it for years and they know how to create realistic animations that we don’t have the experience to create yet, so they can teach us a lot about that. I mean even personally I know a lot about the animation spec and I know the technical aspect of it, I really have issues with trying to make animations look realistic because it takes far more than knowing the syntax, you need to know the physics behind how things move around.
Louis: Yeah, absolutely. I imagine there are a ton of ways that you could create sort of a bouncy animation that it would just look not like a bouncing object, and if you’ve had these tools available to you for a long time you’d be a bit more experienced.
Lea: Exactly.
Louis: Right. So that actually kind of leads on because one of the tools you put out, or a couple of the tools you put out recently have to do with CSS animations and they’re these really cool tool, so anyone who doesn’t — who hasn’t seen your tools should definitely go to your website, it’s at lea.verou.me/css3-tools, and there’s a ton of really cool little things in there. If you haven’t had a chance to play with CSS3 animations or any of these things and just get a feel for what’s possible. So the most recent one is a sort of a gallery of animations that came out I think very recently, right, you only posted this —
Lea: Yeah, I was creating my slides for a talk I was giving in Sweden earlier this month, so in one slide I wanted to show how many possibilities we have when we animate a specific property, and I wanted to show the audience that every property that accepts animatable values can be animated, even properties that we don’t usually think of as animatable, for example, text-indent or line-height or letter spacing; who thinks about animating those. So I wanted to show that all these properties that are animatable and in some cases can create really interesting effects because I see that people keep animating the same properties over and over again like transforms, for example, or colors and that’s about it. In every website I see about those kinds of effects, either colors animated or transforms animated, but we can do many more things than just that, and I wanted to show this in my presentation. So it started off as a slide and then I thought, hey, many people could benefit from this, not just the audience of my presentation, so maybe I should make into a separate site and embed it in my slideshow as an iFrame, so that’s what I did.
Louis: Yeah. So as you mentioned, some of the weird ones that you don’t think of animatable, like letter spacing, some of our listeners remember, I don’t know if you would be familiar with this, but on Sesame Street they used to have this bit where there were these two monsters with two parts of a word and they were teaching how to pronounce the word by sliding them together, and when I look at your letter spacing demo that’s exactly what they reminds me of.
Lea: (Laughs)
Louis: But there’s a lot of ones in here that show you how to do things that you don’t see. I like, um, I don’t know if you know them by number because I’ve got them here.
Lea: Oh, no, the number changes.
Louis: Right.
Lea: The number changes every time and a new one is added.
Louis: Right. There’s one where you use text shadows to sort of create a rainbow array of the text sort of scaled out.
Lea: Oh, I remember that.
Louis: Which is really impressive and it sort of breaks what the expectation is, right, when you think of text shadow you think of sort of just a drop shadow on text, but the fact is if you do it without a blur it creates sort of a duplicate of the text and because you can control the color and control its position you can do some really cool things, so absolutely the listeners should check this out. And there’s another one, sort of a box shadow where the box sort of explodes and goes away.
Lea: Yeah.
Louis: Sort of a fadeout effect.
Lea: Yeah, those two ones weren’t created by me, they were user submitted ones which is another thing that maybe you should mention, that this gallery is editable and everybody can fork it on GitHub and add something, adding new animation, and send me a pull request; not all pull requests are accepted, but I think about half of them are. If you click on each animation you can see who created it, the Twitter username of the creator.
Louis: Alright.
Lea: And actually on text shadow you mentioned, and I think there’s another interesting thing about it, that one shadow can be animated to multiple shadows, you wouldn’t normally expect that, you would expect the browser to fail interpolating these two values, but all the browsers I tested do just fine. No, I just wanted to say it’s not very usual that you see browsers exceeding expectations.
Louis: (Laughs) Well, sometimes they exceed expectations in unpredictable ways which I think is the problem we often have.
Lea: Yeah.
Louis: And another one of these tools that you put up recently was a sort of a tool to play with cubic bezier functions which are used to control the easing of these animations, and it’s a pretty straightforward way of just sort of dragging the line around and creating the function because the syntax for that can be scary especially for people who are familiar with CSS but have never worked in Flash, never worked in animation.
Lea: Oh, yeah. That was actually also created for a presentation. When I first gave the CSS Secrets presentation I was just showing how bouncing transitions work by editing the code directly, but I thought this doesn’t exactly show people how cubic bezier works and they will just memorize the numbers which is not good, they should understand what they’re doing. So after a certain point I started including images of how the cubic bezier function works and I was explaining them how it works but by showing them things over the image, but it was a static image and I thought it didn’t exactly show them how the function works. So I wanted to actually show them and actually like drag the handles and everything, and there were some tools already that allowed you to do this thing, but none of them supported cubic bezier values out of range because it’s a fairly new thing for the spec. When the spec was firstly written that wasn’t allowed, the values, all four values, had to be between zero and one, and then Opera I think, yeah, I’m pretty sure it was Opera, they thought why shouldn’t we be able to have y values out of range, I mean of course we can’t extend the transition beyond the time limits imposed, but we can certainly extend the property value below or after the start and end values, so, and that would create quite interesting bouncing effects, so they suggested that to the CSS Working Group and it was accepted and you can find it in the editor’s draft. But at least until a while ago it wasn’t published in working draft yet, so most people authoring tools about cubic bezier were just — I guess they were reading the working draft and they constrained these values to that range, the zero one range. So I wasn’t able to show my audience exactly what I wanted in these tools, so I guess the only reasonable thing to do was to make my own, and that’s how that mini-site was created.
Louis: Right. And this was something so when you’re talking about values out of range the support has since gone into other browsers or is it still sort of in development?
Lea: Oh, totally! Firefox also supports it, I’m not even sure if there’s a version of Firefox that supports transitions and doesn’t support that; IE recently started supporting transitions in IE10, and it supports that of course since they implemented the very latest version of the spec, and the only problem used to be WebKit which didn’t support it, but recently they fixed that in the nightlies and I’m not sure if it propagated with stable release yet, but even if it hasn’t it will very soon, and everyone interested can test it in the nightlies.
Louis: Right.
Lea: The good thing is that usually WebKit users tend to upgrade quickly, so essentially the only problem with WebKit is mobile.
Louis: Yeah, yeah, so Android is always the lagging platform for WebKit which is stuck with a very, very old version.
Lea: Exactly. Although I heard recently they updated it.
Louis: Oh, yeah.
Lea: That’s what I heard. I haven’t tested it myself because I don’t have an Android phone, but that’s what I heard.
Louis: Right. Well, that’s — yeah, and the other issue obviously is that a lot of the older phones don’t get releases from the makers and from the carriers as often as you do with iPhone.
Lea: Yeah.
Louis: Speaking a little bit about browser bugs and browser development, we actually talked on the show a few weeks ago about an article that you wrote for Smashing Magazine, sort of a beginner’s guide to reporting browser bugs.
Lea: Oh, right.
Louis: Yeah, I thought it was a great primer for people, a lot of people are working on these things and especially now that there’s so much let’s say cutting edge CSS being done and a lot of people are playing with this stuff, you run into browser bugs a lot more often than you used to.
Lea: You do.
Louis: Because a lot of this stuff is on the edge.
Lea: I mean even though I’m encouraging developers to report browser bugs in that article, I have to admit that sometimes I discover bugs and I don’t find time to report them always because if I reported every single bug I find it would be a full-time job, seriously, I’m not exaggerating it.
Louis: (Laughs)
Lea: It would be a full-time job because it’s not just one browser it’s Opera, WebKit, Firefox, and I find bugs with them like every day, and if I reported them in the level of detail that I describe in that article it would really take a very long time, but I try to report most of them and even if I don’t have the time to create a proper test case or whatever I say I’m describing in that article, it’s still better to report the bug than leave it for later and end up never reporting it.
Louis: Yeah, absolutely. And obviously the more people who are playing with these cutting edge things, and the more people who are prodding the limits of browser functionality the more likely these bugs are to be discovered, and then it’s just a matter of educating people on what the process is for reporting them.
Lea: Yeah, of course. I think in the past it’s not that we had less browser bugs but the standards weren’t evolving, so we had a specific set of browser bugs that most developers already knew and it was quite hard to discover new ones, but right now we have a huge set of features and the combination between those features generates a very large amount of bugs.
Louis: Yeah, and especially that a lot of this stuff is things that even the browser makers don’t have a lot of experience working with, right, I mean animation is going to be entirely new to everyone who’s implementing it, so there’s a lot of room for error.
Lea: Yeah, especially animations because the spec is a bit unclear, and sometimes implementers have to guess what they should do, and when they have to guess of course one browser guesses one thing and the other browser guesses the other thing, and then we’re stuck wondering what’s a browser bug and what’s actually correct.
Louis: Yeah, absolutely, and I mean even things that aren’t bugs there are varying implementations; I think I’ve been watching this bug report on Firefox about something about the multi-column display, and there’s one of them, I think column span, that it doesn’t implement — that isn’t implemented in Firefox so that it wasn’t.
Lea: Yeah.
Louis: And I’ve just been watching the thread for this thing for nearly a year now and it’s just — it’s always a bit weird to watch people going back and forth, you know, it’s not a bug we just haven’t done it or —
Lea: Yeah, many people haven’t realized that browser vendors use bug trackers not just for bug reporting but also for tracking the progress of implementing new features, especially Firefox does that a lot; Opera does that too but its bug tracker is internal, and WebKit kind of does that but sometimes it gets moved to an internal Apple bug tracker and the public doesn’t get to see it. But, yeah, they have like a bug report for every feature they haven’t implemented, and people keep going in those bug reports and nag them why haven’t you implemented this yet, and I’m guessing this must be really annoying for browser vendors because of course they can’t implement everything at once, it takes time.
Louis: Yeah. I guess it’s just — the good news is it does become a bit more of an open discussion about what the users want to see and what developers want to see, you know, something generates a lot of noise it might get a bit more attention than something where two or three people have asked for it.
Lea: And it’s also what’s easy to implement and what’s hard to implement.
Louis: Yeah. What about IE, you mentioned just about every other browser there; what’s their process for dealing with bug reports and has it improved?
Lea: Oh, it’s horrible.
Louis: (Laughs)
Lea: It’s absolutely horrible. It has improved a lot since the past, at least now they have a public bug tracker, but it’s really the most frustrating experience I’ve ever gone through while reporting a bug; it takes me like half an hour to find how to report the bug every single time, it’s like completely hard to use and also sometimes you get a response that they’re working on the bug which is good but you don’t get any feedback about the process, what’s going on, just that they’re working on it. And also sometimes they might tell you that it’s by design even though it actually violates the spec. For example, Paul Irish reported this bug about IE not supporting the second argument in the get computed style function, and he got the reply that it was by design, and that’s actually a spec violation, how can it be by design; you actually design your browser to violate specifications? It doesn’t make any sense.
Louis: Well, as Web developers I think we’re all used to the world of Internet Explorer not making any sense.
Lea: Yeah, but they’re trying to convince us they’re making progress, they’re trying to convince us that these dark ages are behind us, so how can they say something like that is by design, I don’t get it.
Louis: Yeah, no doubt that they’ve made progress but I guess there’s still a long way to go for Microsoft to convince Web developers that they’re on the right side of this now.
Lea: I guess; it seems like it.
Louis: (Laughs) So just to switch gears a little bit, we were talking a little bit earlier about the talk you gave at a conference which is a talk called CSS3 Secrets, and you sort of mentioned in your answers to previous questions that you have Web pages and demonstrations sort of embedded in your slides.
Lea: Yeah.
Louis: All these slides are available on your website and they’re all built in HTML so that it’s easy to sort of play around and watch the things live, and this is a sort of a mini-framework for slides that you built yourself?
Lea: Yeah, it’s called CSS-S which is an acronym for CSS Based Slideshow System and they can find it on GitHub, it has lots of plugins that are also written for it like to boost CSS regions or code highlighting; in the beginning it used to be very heavily CSS based, hence the name, but right now many things that were CSS based under the first version are now done with JavaScript because CSS is a bit restrictive sometimes, for example, the number of each slide that was displayed used to be done with CSS counters, but the latest versions it’s done with JavaScript because CSS counters don’t increment when you hide something with display: none, and in the latest versions I hide all the slides except the current, previous and next one with display: none so they don’t — for performance reasons so that the browser doesn’t have to render everything at the same time, and CSS counters broke when I did that so I had to implement them with JavaScript.
Louis: Right. So the presentation itself is really cool. So it includes a couple of the things we’ve mentioned, sort of a description of how cubic beziers work and some demos to do with that, but it’s really just a kind of a list of little sort of tips and tricks in CSS3 for even properties that people might know about but little sort of hacks that people might not have played with to do with properties that they might use. So what are a few of your favorites from this presentation?
Lea: It’s a bit hard to tell, most people like the section about gradients, even though I’ve given many talks about gradients on their own like I used to give a talk about CSS gradients and the whole talk was bout CSS gradients and it was published, and I’ve written a lot about CSS gradients on the Web, still people get impressed that you can make patterns with CSS gradients, even the last time I gave that talk people came to me and they were like, “I can’t believe you can do these things with CSS gradients,” and every time people mention that. But I guess my favorite is the background origin trick that you can use to position a background image and have it follow the padding if you give the value content box to the background origin property. Also I like bouncing transitions a lot.
Louis: So maybe just explain a bit what you mean by the background origin, I maybe didn’t quite exactly follow there, and I’m looking at the slide and it’s not entirely clear to me.
Lea: Oh, yeah, that’s the problem with editable HTML slides that when you put them online people can’t really understand what you’re talking about unless they see the video because every slide is like a starting point that I added on stage to show them what I want, so when I put the slide online people just see the starting point and they don’t get what I’m going to show in that slide. So, to explain it further, CSS3 expands the definition of the background position property, so if you want to position something from, for example, 10 pixels from the right and 20 pixels from the bottom, in CSS2 you couldn’t really do that, you had to approximate it with percentages or do something like that, and the only way you had to position something on the bottom right corner was to position it exactly at the bottom right corner with zero offsets; if you did background position bottom right, right?
Louis: Yeah.
Lea: So, in CSS3 you could just write background-position: bottom 10 px, right 20 px, for example, and you could have these offsets from the bottom right corner even though in CSS2 you could only have offsets from the top left corner, is that understandable?
Louis: Oh, right, yeah, so you can — it’s a little bit better control.
Lea: Yeah.
Louis: And that’s currently supported in a few browsers but not all of them.
Lea: Exactly, that’s only supported by Opera and IE 9. So the thing is we have a better way to do that because even if it was supported by every browser, in the most common use case that we want to do that is to have the background image follow the padding, so we have like 40 pixels padding and we want the background image to be on the bottom right corner and have an offset of 40 pixels from there because our padding is 40 pixels; almost every time I’ve needed to use something like that it was to follow the padding. So even if the extended definition was supported by every browser it’s still not ideal because you would have to duplicate the value of the padding three times, one time for the padding and two times in the background position definition. But, there’s an even better way to do that if you use background origin. Background origin is a new CSS3 property that controls where the background starts from, I mean in the CSS box model there are three boxes, the border box, the padding box and the content box. The border box is if you have a border it’s the box that starts from the outer edge of the border, the padding box starts from the outer edge of the padding, and the content box is where your content is and it starts from the inner edge of the padding. So essentially what you want to do in our use case is position the background image according — where the inner edge of the padding is, right?
Louis: Right.
Lea: So, if you give background origin the value content box and the background position of bottom right, it is placed on the bottom right but which box is bottom right? The border box is bottom right, no, the padding box is bottom right, no, that’s the default but since we specified content box it’s the content box is bottom right, so that’s where it starts from and it follows the padding because it’s placed to the bottom right of the inner padding edge.
Louis: Right.
Lea: Does it make sense?
Louis: Yeah, absolutely. So if the listeners have been hearing tapping as you’ve been explaining this it’s because I’ve been playing around with the slide and entering these values in as you were describing them to see how it works. And these properties, however, are supported pretty much across modern browsers.
Lea: Yeah. Essentially the only problem right now is IE8, every other browser currently in use supports them, I mean really old versions of Opera or Firefox or WebKit don’t support it, but these really old versions aren’t in use anymore.
Louis: Right, whereas IE8 would still be in use because it’s the highest version available on Windows XP which is still very widely in use.
Lea: Yeah. And essentially in almost every CSS3 feature that’s popular today in most of them it’s only IE8 and below that’s actually a problem because users of other browsers upgrade fast and users of IE don’t, and it’s not just Windows XP, I’ve met many people that are on Windows Vista or I think maybe on Windows 7 that were still in IE8, and one of them told me ‘I didn’t really see a reason to update, why should I update?’ They don’t understand that there are differences.
Louis: Hmm.
Lea: The only differences they notice are the UI, that’s what they know, they don’t understand that the rendering engine changes, and they don’t understand how that would make their browsing experience better.
Louis: Yeah, it’s interesting to see, maybe it’s a failing of marketing on Microsoft’s behalf, but it might be in their interest to start pushing updates like what Firefox and Chrome are doing.
Lea: I think that would be amazing.
Louis: (Laughs) You don’t think it’s terribly likely?
Lea: Yeah, because a big portion of Microsoft’s clients are enterprises, and for some reason, well, not for some reason, it’s obvious which reason, these enterprises don’t want to upgrade because they have applications that only work in this version of IE, and they don’t know if it will work in a higher version, and it will cost a lot of money to upgrade these applications and have the developers work on them to make them compatible with later versions of IE, and that’s why we’ve been stuck with IE6 for so many years too.
Louis: Hmm.
Lea: Because many companies had intranet applications that only work there. I really don’t get why they can’t have automatic updates and a setting to turn them off, and these enterprises could just turn them off.
Louis: Yeah, that obviously makes perfect sense but as we’ve mentioned before, making perfect sense does not necessarily jive with Microsoft’s behavior.
Lea: (Laughs) Yeah.
Louis: So this kind of leads into something else I just wanted to touch on briefly because it’s the other thing that your name has come up on the show was a sort of a little bit of I don’t want to say an argument, but it was a discussion on Twitter a few weeks ago that you may remember, it was I think Aral Balkan started it with a Tweet, let me find it so that I can get the text. Do you remember what I’m talking about?
Lea: You’re talking about the one version discussion.
Louis: Yeah, here we are, there we go I’ve got it. So, Aral Balkan Tweeted with hashtag one version, hashtag manifesto, “my websites will only support the latest versions of browsers, it’s the browser makers duty to get users to upgrade.” So this kind of ties in to what we were just talking about in that we’d all be much happier if Microsoft could encourage its users more aggressively to update their browsers, and this was pretty widely re-Tweeted, including by you, and it drew a little bit of disagreement from other quarters of the Web. So I think I remember seeing John Allsopp disagreeing with it, which is totally out of character for him because he’s usually such a non-controversial person, and also Remy Sharpe I think had words to say about it.
Lea: I think most disagreements are rooted that people don’t understand each other’s opinions very well, and this is a perfect example of that. Support is not black and white, it’s not even black, white and gray, support is many, many different levels. There is this one edge that’s like I use IE8 to enter this site and it’s completely broken and I can’t even read the content, and there’s the other edge of the spectrum that’s I enter this site with IE8 and it’s pixel-perfect, it’s exactly the same as it is with the newest Chrome, and I think both edges are wrong and that’s why I re-Tweeted that; I think people spend way more time than they should trying to make things — even though they have understood that they don’t need to be exactly pixel-perfect in older versions of IE, I still think they spend way more time than needed in these versions. I think what’s necessary for these versions is that you get the content and it doesn’t look like crap, and I think that’s sufficient for like IE6 or IE7 or even IE8 in some cases.
Louis: Yeah, absolutely. I mean Andy Clark had an idea a few years ago about a sort of generic IE style sheet that would just be basic typography with no layout.
Lea: Exactly. I think most people just disagree because they have different ideas of what that level should be for its old browser. Some people think that in IE8, for example, it should be pixel-perfect, and they think that graceful degradation is fine for IE7 and IE6, but in IE8 it should look pixel-perfect. Some other people think that even in IE8 it’s enough if it just looks decent and you can get to the content, and some other people have the same opinion about even IE9, they think if it doesn’t support something it’s fine and you just need to get the content, and that’s essentially what people disagree on. And John Allsopp, for example, in this debate he wrote his blog post about universality and how this manifesto is against universality because I think that’s the idea he got, that’s the idea many people got from this discussion that we don’t support older browsers at all, the content is inaccessible, which is not the case; it’s not really hard to make the content barely accessible, it doesn’t take much time. What takes much time is struggling over and trying to find the polyfill that does CSS animations in IE6, for example, and why doesn’t this polyfill work, why is it broken, this should be perfect; and people spend too much time on that. When color TV’s came out, people with black and white TV’s didn’t start shouting that we expect to see color TV shows in our black and white TV’s, they just accepted that they had an old TV and that’s — it’s the same case with browsers.
Louis: (Laughs) That’s a great analogy, I like that, I’m definitely going to use that the next time somebody asks me that.
Lea: It’s not my analogy, it’s Paul Irish’s I think.
Louis: Alright, credit where credit is due. So, again, as with just about every argument on Twitter, everyone agrees, they just can’t explain why they agree in 140 characters so they fight about it.
Lea: Yeah.
Louis: I gotta say I love Twitter for that.
Lea: Ah, sometimes I love it and sometimes I hate it; sometimes you just need more than 140 characters. That’s why I made this little application called TweetPlus, it was my entry to the 10K contest, and it allows you to post a longer Tweet, it’s like services like TwitLonger, for example, or similar services, but the new thing about it is that it’s completely client side except downloading the application, of course, everything is done with JavaScript, there’s absolutely no server side component, there’s no database storing the longer tweets, and everything is done through the URL, tweet is encoded in the URL, and when you post it on Twitter the URL is shortened by Twitters short URL service. So essentially you have a short URL pointing to the huge URL that contains everything.
Louis: Oh, so you’re just kind of exploiting Twitter’s URL shortner to contain the extra data; that’s a very clever hack.
Lea: Well, thanks, I’m not sure if it’s —
Louis: When you don’t have a database, use someone else’s database.
Lea: (Laughs) Well, I think the good thing about that is that when you services like TwitLonger, for example, you depend on TwitLonger being around for your tweets to be readable; if TwitLonger decides that their business model is failing, for example, and shuts down like many services do, then you lose your long tweets and you won’t be able to do anything about them. With TwitPlus everything is in the URL, they will always be there, and even if TwitPlus goes down at some point, which I don’t see any reason why it should, but even if it happens it’s pretty trivial to recover the tweets since you have the URL, and it would even work locally, if you take the hash and you put it on the URL of your local TwitPlus installation it will still work fine, you’ll be able to read the tweet.
Louis: It kind of reminds me a little bit of Tantek Celik’s idea about a URL shortner where you could sort of algorithmically reverse it and come up with the original URL without depending on a database to do the mapping.
Lea: Yeah, it’s called — it’s part of the own your data movement and I’m pretty much a fan of it; I don’t like my data to depend on whether multiple companies business model is going to be successful or not. Of course in some cases you just can’t do otherwise, like, for example, I do use Twitter to post my tweets, but I think tweets are temporary anyway for the most part, and I use Disqus for my blog’s comments, but in general I try to avoid depending too much on third party services for my data.
Louis: Yeah, that’s something that’s come up on the show before, and I make that argument and then people call me paranoid. But, yeah, absolutely, and with respect to things even like Twitter I’ve often considered just coming up with a way of posting them through my blog and then having them syndicated out to Twitter, it’s just always been on the bottom of the to-do list.
Lea: Yeah, well, doing something like Tantek it’s admirable what he did, but for me it would be a bit too far.
Louis: Yeah.
Lea: I kind of trust Twitter, it’s too big to easily go away.
Louis: Yep, too big to fail.
Lea: Yeah, I guess.
Louis: We’ve already mentioned your website which is at lea.verou.me, you’ve also developed this little JavaScript library called Prefix Free, do you want to talk a little bit about that?
Lea: I really like this script and it allows you to write CSS without any vendor prefixes, completely valid CSS3, and the vendor prefixes are added on runtime and they’re not predefined lists about which feature needs which prefix, everything is done through feature detection so it’s very future proof.
Louis: Alright, so it’ll actually — it’ll try a vendor prefix and see if that exists and then if it does it’ll add it.
Lea: It does many feature detection tests when it starts, and then it keeps in the results in some arrays and it processes every CSS code on the page and it adds the prefixes only when they’re needed, only when prefix-free version is not supported and the feature is only supported with a prefix. So, for example, you want to do animations you write a keyframes rule without any prefix, and when Opera starts supporting CSS animations they will start working without you needing to do anything, not even upgrade, not even using a newer version of Prefix Free, just leave it there and it will work.
Louis: Yeah, that’s fantastic, and it’s a fairly small library, I’m seeing it’s about 2 kilobytes of JavaScript, so not a big hit, and it’ll probably save you 2 kilobytes worth of vendor prefixes.
Lea: Oh, yeah, totally. And the style sheets are so much easier to read and it saves you so much time. I didn’t want to use CSS pre-processors, but I didn’t want to depend on such proprietary syntax that CSS pre-processors require because each one of them has their own syntax, and you kind of become dependent on them. So, I always added my prefixes by hand and I had — every time I wanted to change something I had to change it like five times and I just got too sick of it. I had developed this script for my presentations because if you noticed on stage I always write prefix-less code. I had this script behind the scenes adding the necessary prefix, and then I thought why not use the same script on Web pages, so I adopted this to be used on Web pages, I actually did that during a conference in the airport in October (laughter), and actually I’m thinking of separating this into two components, if you actually see the code it’s already separated but they’re on the same file; one component is serving as a framework for many kinds of CSS polyfills, and the other part is Prefix Free, you know the part doing the detection and adding the prefixes and everything, because I think the base will be useful for many different kinds of polyfills, for example, I wanted to write a polyfill for the vm, vh and vw units, there’s these new CSS3 units that are only supported by IE and they’re about the viewport size, and at some point I needed to use them. So I wanted to write a polyfill for them, and I used the same base from the Prefix Free code, and it was just a few lines of code to add them, and if I didn’t use that it would be much, much bigger, and most CSS polyfills of this kind are just — just repeat the same things; they need to XHR the style sheet because there’s no way to access the link style sheet and get the unsupported features; if you access it through the CSS object model unsupported features are dropped, so every CSS polyfill needs to send XML http request so you get the style sheet and then do some kind of processing and convert it to a style element, and then you need to convert the URLs because they’re relative to a new root, right now they’re relative to the document and in the CSS file they’re relative to the CSS file, and stuff like that which is about the same in every CSS polyfill, and why write these things over and over again. It would be good if we had a framework for that.
Louis: Yeah, that’s a great idea; I look forward to seeing what comes out of that. I guess one of the issues you’d have run into with something like this is dealing with cases where the syntax in one prefix version is different from the syntax in other prefix versions, so, for example, the older WebKit gradient syntax.
Lea: The older WebKit gradient syntax is not a problem because you can just use the WebKit gradient syntax along with an un-prefixed linear gradient decoration because it’s not the same thing. But you actually made a very good point, what happens when the same feature works differently across different prefixes? You can work around this but by using a prefix version as well as the un-prefixed version, for example, you want to specify a different value for WebKit box shadow and a different value for box shadow, you can use the two values together, the only caveat to that is that you have to include the prefixed version after the un-prefixed version because the un-prefixed version might get a prefix on runtime if it’s only supported with a prefix, if it’s like — if we’re on an older version of WebKit. But another way to get around this is that Prefix Free also adds a class to the root element with the current prefix, so you can actually write different rules if that’s convenient in some cases. I’m hoping that won’t be abused for doing separate things for separate browsers, but it’s there just in case somebody needs something like that.
Louis: Right. Well, I mean it’s always useful to be able to know the context you’re in, and taking a cue from Modernizr for that kind of thing.
Lea: Yeah, exactly.
Louis: Most of the time it’s fine to degrade and not worry too much about making things work exactly pixel-perfect, but sometimes you do run into an issue and it’s good to be able to have that finer control.
Lea: Yeah. I just hope they exercise restraint with it.
Louis: (Laughs) Well, you can always hope but, uh, I guess when you put a tool out there you can never really know what’s going to be done with it and we’ll just wait and see. So I’ll look forward to seeing people play around with this and what can be done.
Lea: Yeah, well, people are already using it and so far the feedback is quite positive. There are some people that have a few arguments against it; I mentioned the one that I think holds more truth, the one about different implementations. The other ones can be answered quite easily and I’m already — I’m answering them in the project’s page, like, for example, you’re depending on JavaScript; no, you’re not depending on JavaScript, you’re only depending on JavaScript for a few CSS3 extensions, and if you design your page with progressive enhancement then it should be fine without JavaScript, people who disable JavaScript are not expecting a perfect experience anyway, and if you’re not designing it with progressive enhancement in mind you have much more serious problems like IE8, for example.
Louis: Right, exactly. Thanks so much for taking the time to come on the show, and I’m glad we managed to work around all the scheduling issues and finally get it done, and the cool thing is a number of things I hadn’t seen your presentation when I initially contacted you about doing the interview and this animatable tool wasn’t out either, so just by virtue of delaying the interview we’ve had a lot more stuff to talk about.
Lea: Yeah, that’s true.
Louis: I’ll ask you the same question I asked Chris Coyier which is where does the time come from because when I see people like you and like Chris who come up with all of this work pretty much on a weekly basis I’m always is there some kind of secret day of the week that the rest of us don’t know about?
Lea: Uh, is that off-the-record (laughter)?
Louis: Alright, we’ll keep it a secret.
Lea: Yeah, I guess those are results of me procrastinating a lot, and also my daily job is about a company I co-founded, and it’s around a Greek website that’s kind of popular in Greece and the revenue comes from advertising, so even if I don’t do anything for a while we still have revenue so I can devote some time on these experiments.
Louis: Well, I think we all, the Web at large and developers out there, win as a result of this because we get the chance to use all these cool tools in our work and see all these fun experiments.
Lea: I hope so.
Louis: (Laughs) If your procrastination helps the rest of us then everybody wins.
Lea: Except me (laughter).
Louis: Alright, well, Lea thanks again so much for taking the time to come on the show, it’s been a pleasure. We got delayed a little bit by a washing machine (laughter) but, uh —
Lea: I guess that must have been the most weird delay you ever had for this podcast.
Louis: It’s pretty good, yeah, usually it’s just time zone issues, but, so a backstory for the listeners, we were supposed to record this an hour ago but you’re in a hotel room and the cleaner turned on the washing machine and it’s really loud apparently so we had to wait to record until the cycle was done.
Lea: Yeah.
Louis: Thanks for sticking around despite the delay.
Lea: Thank you for waiting.
Louis: And for taking the time to talk with me. No, it was good, I took the time to deploy a bug into production and then you came back on just before I could investigate or fix it, so perfect timing.
Lea: Cool, I’m glad you weren’t just waiting for the dishwasher to finish.
Louis: No, I had plenty of work to do. So if the listeners want to find you we’ve already mentioned your website which is at lea.verou.me, but on Twitter what else should people look you up on?
Lea: I’m @LeaVerou on Twitter and essentially I’m LeaVerou almost anywhere, you can find me on LinkedIn, on Facebook, on Zerb.ly, on Last.fm and most social networks, and I always use the same username. And actually on my blog there’s a list of some of the social networks I take part in on the sidebar, so they can find my work there, but I post almost everything on my blog, and for somebody interested in my work I guess the most relevant ones are Dribble and GitHub.
Louis: Yeah, absolutely. Again, there’s tons of fantastic stuff up there, just a great sort of playground, for CSS3 goodies that are fun to just mess around with on the browser and see how well your browser supports it and see some of the more interesting things that can be done with background or patterns, with animations, and maybe give you some ideas and inspiration for the next website, so definitely recommend it.
Lea: Thank you for listening to me babbling for an hour.
Louis: (Laughs) It’s always great to hear what people who are out there doing kind of fun work have to say, yeah, like I said, it was my pleasure. So best of luck in all your travels, do you have a bit of time off from conferences coming up?
Lea: Oh, yeah, my next talk is going to be in February, and I don’t have anything scheduled until then so I’m resting a bit.
Louis: That’s fantastic.
Lea: Taking some time off the conference frenzy.
Louis: Alright. If any of our listeners happen to be available for the conference you’re speaking at in February, where is it and what is it?
Lea: It’s a conference in Finland, it’s called D-Day, it’s the first time they’re doing it but it sounds quite interesting, it has some good speakers, and I’m not talking about myself, I’m talking about like Vitaly Freidman from Smashing Magazine, and the website is dday.fi, and I’m kind of looking forward to it, the only thing I’m not looking forward to is the cold; even if you go to the website you’ll see people sitting in snow and even snow falling on their heads, it kind of scares me.
Louis: (Laughs) Yeah, February in Finland is probably going to be a little colder than you’re used to in Greece and California.
Lea: Yeah.
Louis: Alright, well, if anyone happens to be in Finland, we don’t have a lot of listeners in Finland, but if you’re one of our Finnish listeners and you happen to be around for this conference, check it out because you’ll be able to see Lea give a talk there.
Lea: Yeah, I’ll be glad to see them there.
Louis: Absolutely. Alright, well, thanks again, and as I said before enjoy your time off and look forward to seeing what other new things come out of your brain in your procrastination time.
Lea: Thank you so much.
Louis: Alright, thanks very much, Lea.
Lea: Have a good day.
Louis: You too.
And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to Sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s sitepoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad and I’m Louis Simoneau, thanks for listening and bye for now.
Theme music by Mike Mella.
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.
Louis SimoneauLouis joined SitePoint in 2009 as a technical editor, and has since moved over into a web developer role at Flippa. He enjoys hip-hop, spicy food, and all things geeky.
