SitePoint Podcast #154: Education and CSS3 at South By SouthwestBy Louis Simoneau
Episode 154 of The SitePoint Podcast is now available! This week Kevin Dees (@kevindees) has two interviews for us from South By South West. He interviews firstly Bob Simonette (@Bongo_Bob) and Jeremy Stepp on web education, and then Chris Mills (@chrisdavidmills) who works for Opera about HTML5 and CSS3.
Listen in Your Browser
Play this episode directly in your browser — just click the orange “play” button below:
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
- SitePoint Podcast #154: Education and CSS3 at South By Southwest (MP3, 35:51, 35.4MB)
Subscribe to the Podcast
Kevin, Bob and Jeremy cover various things about Web education including how web educators can improve their courses and also how students can play their part in improving the courses they take part in. Kevin then talks with Chris about how we can take a pragmatic approach to the use of HTML5 and CSS3. Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/154.
Kevin: Hi, and welcome to the SitePoint Podcast. I’m Kevin Dees and today we have two remotely recorded interviews at South By Southwest this year for you. The first of these is with Jeremy Stepp and Bob Simonette on Web education. Both of these men are practiced Web educators and have been in the field for some time.
So I’m here with Bob Simonette and Jeremy Stepp, tell me if I butcher your name in any way.
Bob: No, that’s pretty good, you got it.
Kevin: So, I’ve been following Bob on Twitter for a good two years now, and we’re still at South by, we’re at the Hampton Inn, and Bob and Steven are teachers, they’ve been teaching on the Web for quite a while from what I understand; how long has it been?
Bob: I’ve been — as far as doing Distance Ed or just teaching in general?
Kevin: Teaching, teaching.
Bob: Eleven years, so almost eleven and a half years now.
Kevin: So, you teach the Web specifically, and that’s why I wanted to talk to you because in the Web space there’s a lot of this kind of negative connotation that goes along with education in the Web, and not without good reason, because the Web is young, it’s only been around 20 some-odd years now, and so it’s very hard to have a solid curriculum with something so young; other things that they teach have hundreds of years of studies and things that you can go off of, such as mathematics and language.
Kevin: But the Web is a different beast in and of itself, and you get to teach that on a day-to-day basis. And one of the things I want to kind of make the topic of this conversation is how students can work to make education better for themselves because, you know, the learning has to come from the student, right, it can’t — it does come from a teacher but the student has to communicate that to the higher education, right, I would say to help you push that to the people that you have to talk to to get the curriculum. And so while there is a little bit of background noise here, it’s a little bit earlier in the day, I would like to get maybe some viewpoints that you have on some of the day-to-day things that you do in your classes.
Kevin: Right; HTML5, CSS3 now just from, what, two years ago people weren’t talking — I mean they were talking about it, but not like they are now.
Bob: No, not like they are now. And I mean even when dealing with other technology, I teach at a technical college and so there’s lots of technologies, but we probably are one of the few on campus that the rapid change of pace just — it’s really difficult to keep up. It’s difficult from the standpoint of myself as an instructor to stay up with the trends in technology because I’m busy grading and revising curriculum and all that, and then of course it’s also difficult in the sense with the students deciding how much of what are we going to give them, because we’re a two-year school Associates Degree program, so we only have — we have a limited number of hours that we can give to a student, and there is so much in this field. And so we have to kind of try to stay focused in on what do they need on an entry level kind of —
Bob: Right. But in our program we also do Flash, PHP, cover databases, we’ve been doing Cold Fusion, I think that’s going to be going away in the fall, but we have several other classes on e-commerce, creating shopping carts, all of those kinds of things, so it’s pretty broad, but we do have to pick and choose.
Bob: Well, we don’t want the students to complain, no, but we do have — we have an advisory board that meets once a year with all the faculty and the department chair, some of the administrative folks, and during that meeting that’s kind of what we try to get from them is direction as to where we need to take the curriculum, because you know we can come to like South by Southwest and I can go home crazy about this is the next big thing, but out there in the business world they’re not interested in that, or they’re not interested in that as far as bringing people in as a new hire. So we rely quite a bit on our advisory board to give us that direction and tell us what is it, and the advisory board’s made up of folks from the industry who hire people in also from education as well, and we try to get a pretty broad spectrum of folks on our advisory board because we need to know that, we need to know, for instance, I just was looking in a book store and I saw these books on Ruby on Rails and I had heard about Ruby on Rails, and so I got a book and I started messing with it, and I thought oh, yeah, we need to get this in, and I brought that to the advisory board several years ago and they said, well, really not that much. So, I might have gone off and tried to fit it in the curriculum somewhere, but they kind of said no don’t worry about that right now and, in fact, it’s their direction why we’re taking Cold Fusion out of the program as well on their advice.
Kevin: So I think that kind of what we’re saying is very true in that in the industry what kids really need to know, and what I wanted to know when I was in school, was what are kind of the basic concepts that I need to know to be a good programmer, not necessarily what is the specific language, but how do I go about programming properly, right. And so I think that’s one of the wonderful things that Web Standards do, W3C, I know the WASP helps with that, like basically saying these are the methods, these are the web standards that we need to move in the direction of, not necessarily specifically to the technology, even though at its core that’s what it’s about, it’s really about the practice of moving the industry forward. And so I think the advisory boards are really good, and it’s really good to hear that the industry is doing things as well. From your experience what can students do to better help you help them, right? Because when I was in school we would complain, we’d say, oh, we don’t feel like we’re learning the best stuff, or we feel like it’s going to be out of date, but we wouldn’t really tell that to the teachers, we’d just kind of gripe in our own little circles, right. What would you like to hear from your students, and what can students listening to this go to their teachers and say, hey, this is what we need?
Bob: Yeah, that’s a really good point because I always feel like I don’t hear enough from the students, usually it’s a complaint about too much work or something like that, but, you’re right, I would love for students to say I was on the Web and I saw this, I read this blog, or I saw this article and what about that, and are we going to get that, are we going to cover that anywhere in this class or some other class in the program.
Bob: And those types of things, or on the other side, like maybe I would love for them to come and say, you know, we’ve been talking about XHTML but I’ve been reading all about HTML5, what’s the deal, I want to get more of this. And I do get that occasionally from a student here or a student there, but I would like to hear it more from as many students as possible. I’ve even tried to elicit that kind of information, and students seem to be kind of shy about doing that.
Kevin: I think that is a pretty big barrier there, because I know when I was in school like basically you’d go and you’d read things online like you’re talking about, like I’d read a blog post and I would kind of, you know, you’d stick your chin out just a little bit, you know, you’re proud of yourself, and then you wouldn’t really go to the teacher and say anything. And I think looking back that was kind of a mistake because the teacher is looking for help, like I still go to my teachers from time to time and kind of send them emails and say, hey, here’s something I found after-the-fact, because I have now looking back like, wow, that could have been really helpful. So, with the students giving you kind of what they’re looking at, what they’re thinking, what would be your advice for a student to go and find those things? Like I know, for example, we mentioned the W3C, WASP InterAct, what are some other places that students can go to kind of see what’s out there to get that information and bring it back to their teacher?
Bob: Well, along with those that you mentioned, Opera, the Opera education, their space, they have a lot of good articles and materials that students can go to see what’s going on and to augment what they’re getting in the classroom. Another thing is I try to encourage my students to get a hold of a few blogs and then maybe from there they’re going to find some others.
Bob: A List Apart is a great place to start, and what the students should do is when they find these blogs they should go back to their teacher and say, hey, I was reading this, what do you think of this person, because there’s so much out there some of it’s still old and may not really be relevant, and students may not know what’s relevant and what isn’t’, hopefully their instructors do. And so it’s a good idea for them to come back and say have you ever read this blog or what do you think about this? I tell my students at the beginning of the semester “I don’t know it all,” there’s no way, there’s just no way; the day of that kind of paradigm where the instructor held all the knowledge and you just dumped it in their heads, that’s gone, I mean it’s over and should be over, because all the knowledge is out there if they will go out and search for it. So, I try to get them on to some solid blogs, like I said, A List Apart, John Allsopp, all the rock stars, you know.
Bob: And also I point them to places like Smashing Magazine. I like Smashing Mag because it combines, it goes out and gets all these articles and then puts them all together, kind of aggregates it, which is really nice; SitePoint, W3 Schools, those two, W3 Schools has some good tutorials that they keep up-to-date. I’ve gone out and found a lot of tutorial sites, they’re just not up-to-date.
Kevin: I know W3 Schools has taken a lot of flak in the past for not keeping everything they have up-to-date, but when you think about the W3 Schools, like they have a lot of information, right, and so it’s understandable on a basic level to say, hey, cut them a little bit of slack. But at the same time like when I Googled, when I was first getting into this when I Googled how to make web pages W3 Schools came up, and that’s where I learned a lot of my CSS, basic CSS stuff, and I thought it was a great resource because I learned it, right. Now, I learned that everything they said might have not been perfect, which can include any site, right, because some people are going to talk about something that’s actual and technical, and other people are going to talk about things that are abstract and kind of just ideas. So I think the list of things that you put out there are — you couldn’t come up with a better list, you got Smashing, I know this is going to be part of the SitePoint Podcast, you got SitePoint in there, right. To kind of wrap some of this up, what would be the one thing that you would say to students, and what would be the one thing that you would say to other teachers, like what are things that you’re doing, maybe you need to ask a question or maybe you need to make a statement; what are those two things?
Bob: Well, for the students I would definitely say — actually I’ll quote Andy Rutledge, or not quote, I guess paraphrase Andy Rutledge, but, your education, you have to basically own your education.
Kevin: I totally agree.
Bob: I think he said you have to go steal it. You really do. It’s really, really important that students go and say this is what I’m doing right now, I’m getting an education, and I’m going to do whatever it takes. And in this area where we’re talking about technology, and specifically the Web, doing whatever it takes means getting out there and reading and going beyond your textbook, beyond what your instructor, teacher, professor is giving you in the classroom, and finding out what’s happening out there right now, and then taking that back to your instructor and saying — asking what about this; ask, ask.
Kevin: Ask the questions while you can.
Bob: Ask the questions while you can. As far as to other faculty, number one, get on board with Web Standards; if you’re not there then, you know, as far as faculty teaching the Web, Web Standards, I can’t stress that enough; I’ve been a Web Standards advocate since 2001, and that needs to be. And please do whatever you have to do to bring your programs current, get them current; I know that’s hard in some places. We’re very fortunate where I teach in that we don’t have somebody else telling us what our curriculum is going to be, we get our input from our advisory board, and we take that and we kind of put that together and we discuss it, but then when it comes right down to building those classes and the content, that’s up to us, we do that. And that’s great because we’re a small department and we’re all on board with being right on the edge, and I know it’s hard in some places, especially four-year institutions.
Kevin: Doesn’t the WASP InterAct Group or the InterAct Web Standards, is that right website? I can’t recall the URL precisely, but that has a whole set of curriculum already pre-built with the current stuff, right?
Bob: Yeah, I’m not exactly sure either, but if you Google WASP Interact it’ll get you there. And, yes, they do, they have — it’s not complete yet, but they have a lot of good stuff out there.
Kevin: And it’s not meant to be, right, it’s meant to be growing with the industry.
Bob: Right. And they have, you can see where they’re going to go and when they’re going to come out with things, but, yeah, I’ve already used some of what they have, it’s great stuff.
Kevin: Awesome. Well, I know you didn’t get to say much (laughs), but —
Jeremy: Well, I mean Bob covered pretty much all of it, I mean you’re talking about the students having to own their own education, I mean that’s exactly right; students have to have the passion to be able to go out and learn this stuff, because without that they’re not going to get what they need to out of being in school.
Kevin: I think the college experience, too, like especially for the younger ones coming in like I did where you just come straight from high school to college, you kind of, in a way, if you’re not serious about it you just consider it that one more thing you have to do, ugh, I just want to go hangout with my friends or, you know, do whatever, and you kind of have to get past that in a way and say, you know, because you don’t have to go to college, right, but you have to say I’m going to college for me and this what I want to do, I want to make websites, I want to build applications, or whatever it is, you have to be serious, you have to be exactly what you were saying, passionate, I think your advice is spot-on there.
So to wrap things up, where can people find you to ask you questions maybe about some things?
Bob: Where can they — like an email address?
Kevin: Well, email, Twitter, whatever your preference is as a springboard to a conversation.
Bob: Okay, well Twitter, my Twitter name is @bongo_bob, so @bongo_bob.
Kevin: And yours?
Jeremy: Just shoot me an email, email@example.com.
Kevin: Alright, excellent guys, well thank you very much for coming on, and hopefully this is going to help the students get out there and be more productive and also learn some really good things and make education better, because it does, it builds up from within and not externally. So, thank you, guys.
Bob: Thank you.
Kevin: This next interview is with Chris Mills of Opera. Chris spoke this year at South by Southwest about HTML5 and CSS3, and the pragmatic approach we can have to using these technologies today, which include using Modernizr and things like Normalise CSS. I hope you enjoy the interview.
So I’m joined by Chris Mills here at South by Southwest. You gave a talk yesterday and I’d like to kind of hit on that a little bit, but first I’d like to say welcome to the SitePoint Podcast.
Chris: Well, thank you having me, Kevin; it’s great to be on board.
Kevin: So, your talk, you spoke about CSS3, HTML5, basically the new cool tools that you can use in the web development community, web design community, right now. And not only that, but you also talked about some of the issues around that, one of them being compatibility between browsers and what parts you can use. I was hoping maybe you could talk a little bit about some of these things like CSS3 gradients and transitions, all this stuff that you kind of demoed during your talk.
Chris: Okay, sure thing, I mean this is really one of the key subjects I’ve been focusing on for the last couple of years, I mean I work in the Opera Developer Relations Team, for people that don’t know, and a large part of our work tends to focus on site compatibility, and this is particularly prevalent for Opera because we’re a more minor player in the browser fields, and the trouble is that a lot of developers too easily forget about us. Sometimes they’ll make silly mistakes like only using WebKit properties where they could use prefix properties, where they could quite easily —
Kevin: Which has been a big kerfuffle here recently, right?
Kevin: Exactly. You can easily go from 100 lines of code to 1,000 just by adding, you know.
Chris: Absolutely. But the mission here really is not to obsess over just Opera compatibility, my mission is to try and make it, websites and web apps, more compatible for all web users, so I have a large focus on compatibility with older versions of IE that still have significant market share, and also users of assistive technologies; I think the simple strengths of the Web, such as universal access, are often forgotten when you’re dealing with these shiny new toys.
Chris: Well, I think things like Modernizr for feature detection and polyfills and shims, things like CSS3 PIE and respond JS and media queries, JS for media query support, I think they’re pretty much essential if you want to use these tools in this day and age, because until the older versions of Internet Explorer die off in terms of their market share, we’re going to need to use things, because you can sit there and say, okay, as long as the content is still at a base level usable and accessible to use of those browsers, as long as it’s there at that base level then it’s okay, but often clients are going to want more, so instead of just relying on something like graceful degradation to say okay you’re not going to have the rounded corners and the gradients, but you’re still going to be able to read the text, you’re going to want some more intelligent, more reasoned, solutions for those users, so using Modernizr to detect for support for those features and then provide a really, really nice looking experience that’s different but still looks really good is very important.
Kevin: Is there some sort of practical application like maybe folks coming out of school or those working on small business websites, right, the time allocation is very tough to justify going in and using something like Modernizr; is there some sort of system that they can use to kind of creep into the new technology without increasing their budget time? I know that’s kind of a bigger question than maybe you were expecting.
Chris: No, it’s cool, it’s an interesting question, and it’s these kinds of things that we really are going to have to start sitting up and answering because, you know, it’s easy to sit there and just preach how cool these new features are, but we really are going to have to start answering questions that are in the minds of real people out there making money for real businesses.
Chris: So I’m quite happy to talk about that. I don’t see that there’s any specific methodology, maybe we should write one, who knows, I’d love to have a go at writing one, get together with some of the other open standards advocates and think about this stuff. But my advice would be that, yeah, it’s a total pain, but I don’t see that it’s any more of a pain than the stuff we had to do in the late 90’s at the height of the browser wars when we literally had to think about doing complete code forking for Netscape and IE back in those days. It’s a lot easier than it was back then I’d say, but obviously a lot of people new into the industry won’t remember that stuff, a lot of the recent graduates and stuff. So I’d say, you know, no matter how bad you think it is it was worse back in the old days.
Chris: And I’d say you need to deal with this on a case-by-case basis, you know, each site you come to build you think okay, well, let’s start off by looking at what we want to actually accomplish with this site, let’s look at the tools we want to use, and then you should be able to fairly quickly build up some sort of mockup for what the content and functionality going to look like in the new shiny browsers that support the new shiny features. But then it’s always worth going back and just having a careful look at what’s your first impression at what it looks like in the older browsers, how easy is it to get it looking very much the same or building an acceptable alternative experience.
Kevin: I think that is a tough part, right, it’s getting the client or whoever is working with the Web, even if it’s a personal site, right; you do want that experience to be the same for all people because you invested your time in creating that experience in the first place.
Chris: Well, I mean experience the same is always a very sort of subjective term, isn’t it.
Chris: I like to think of equivalents of service, which it’s an official term, it tends to get used a lot in the business community and the accessibility communities, the idea that if it’s not the same experience as long as the outcomes are the same for different users I think that should be acceptable, and I try to preach that a lot to developers and designers to try and sell that to their clients in terms of a message, you know. And I think it’s easier to sell that message to clients; now we have such an increase usage of alternative browsing devices such as browsers on mobile phones and browsers on tablets, because back in the old days it used to be very hard to say to a client, “Well, here’s a load of different browsers on your same desktop screen, but it looks different on that one because that one doesn’t support the features as well,” and the clients going to look at it and say, “Well, I don’t care, I just want it to work.” Whereas these days you can show them a physical difference, it’s a much smaller screen, the experience can’t be the same, and I think clients find it much easier to get their heads around that and to swallow that.
Kevin: Right, because it’s not just a different screen size, it’s a completely different medium.
Kevin: It absolutely makes sense, right, if you need to find out what prescription you’re taking or how much to take, or contact your doctor, those are important things and they need to be accessible at all times regardless of your environment.
Chris: Allegedly, but yeah, so —
Kevin: But what are the legal things, I know there’s the WCAG and then the ones for the U.S. is the 508, correct?
Chris: Yep, section 508, yep, that’s absolutely right, and these things must be followed because this is where government’s going to actually fall foul of the law in a very objective way, whereas but then again anybody can sue anybody for anything, can’t they, but it’s a bit less, actually written into the mandate than it is for public sector. But then the next thing you were asking about was —
Chris: Well, so I think YepNope is a slightly different thing, that’s a — for people that don’t know that are listening, that’s a conditional resource loader so you can kind of say, well, you know, for example if the browser coming to view the site is IE6 and you want your media queries to work then you can conditionally load in something like Respond JS to actually provide support for those media queries in a polyfill kind of fashion, whereas conditional comments can still be used for that kind of thing, you can just basically say, well, I’ll put a conditional comment around this script tag to say if it’s IE then I can load this script kind of thing. So in essence I suppose, yeah, they do quite similar things, it’s just that YepNope is a slightly more intelligent way to do it which goes beyond just IE, you know, you can do that for more different browsers, and it’s a more intelligent way because it’s more like a feature detection stance, really, rather than just a single browser. You can say if the browser supports this feature then load this library, not if the browser is IE then load this library in because I mean it’s a lot more shortsighted to just do your specific browser support, browser-sniffing stuff.
Kevin: Where can you get YepNope, how can somebody access that and kind of play with it?
Chris: It’s actually included inside Modernizr by default, so if you use Modernizr you’ve got access to YepNope, pretty simple.
Kevin: Yeah, exactly. So, and with Modernizr I know in your talk you said that’s like 42k, right?
Chris: 49, but let’s not split hairs.
Kevin: But that’s a significant page load, right, especially when you’re thinking about a slower browser that you would be testing for and using this tool for, right, so let’s say Internet Explorer 7.
Chris: Sure, yeah.
Kevin: And it’s going to take a little bit longer for it to process everything. Is there a way to make that smaller to where you don’t have to download as much?
Kevin: So you could totally get into the single k’s.
Chris: Absolutely, yeah, I’d say if you want, yeah.
Kevin: And then on top of that I believe Modernizr also includes the HTML5 shiv, right?
Kevin: So what is the shiv for HTML5, why is it important?
Chris: Okay, so the reason it’s important is because older browsers, again, we’re coming back to our old friends IE6 to IE8, they’re not going to support those HTML5 elements yet, they will treat them as unknown elements, which by default an unknown element is just basically treated like an anonymous inline element of some kind. And this is obviously a problem because a lot of the new HTML5 semantic stuff is pretty much turbo charged divs with more specific applications for semantic markup. So the first thing you need to do, by the way, this is not in the HTML5 shiv, this is just a CSS thing, you have to set all of those elements to display as block in your CSS to actually make them behave in most browsers, but IE needs some extra help, and this is where the shim comes in.
Kevin: Right. And so display block is included in things like Eric Meyers new version 2 of the CSS Reset, and there are other CSS Resets that also include this, right?
Kevin: And that’s all included in Modernizr.
Kevin: Except for the Normalize CSS.
Chris: No, Normalize CSS is a separate thing.
Kevin: Right, so you have to Google that and find it.
Chris: Yeah, you can find Normalize CSS pretty easily.
Kevin: Excellent. Well, is there any further thoughts that you have, things you might want to wrap up our conversation here today? And then after that where can folks find you?
Chris: So, the easiest way to find me is probably just to look me up on Twitter, it’s @Chrisdavidmills is my Twitter handle, so just please get in touch with me if you want to talk about any of this stuff. The only other thing I’d like to mention really is very briefly all of the education work I’ve been doing at the W3C, I’m the Co-Chair of the W3C Web Education Community Group, and our aims are to provide resources for teachers and students to teach and learn Webdev stuff in a much better fashion which is more in keeping with modern Web Best Practices, because a lot of courses out there really suck, to be blunt.
Chris: And we also want to do a lot of outreach activities to get these materials to the people that could make most use of them, so if you’re interested in improving the Web of tomorrow through education please Google the Web Education Community Group and you can get in touch with me through those pages as well. So, yeah, anyway, thank you for having me.
Kevin: Yeah, thank you for coming on, have a good one.
And thanks for listening to the SitePoint Podcast. If you have any questions or thoughts about today’s show please feel free to get in touch. You can find SitePoint on Twitter @sitepointdotcom, that’s sitepoint d-o-t-c-o-m. You can find me on Twitter as @kevindees, and if you’d like to leave comments about today’s show check out the podcast at sitepoint.com/podcast; you can subscribe to the show there as well. This episode of the SitePoint Podcast was produced by Karn Broad, and I’m Kevin Dees, 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.