Episode 130 of The SitePoint Podcast is now available! This week the panel is made up of Louis Simoneau (@rssaddict), Brad Williams (@williamsba), Stephan Segraves (@ssegraves and Patrick O’Keefe (@ifroggy).
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 #130: High on Responsive Design (MP3, 41:36, 38.2MB)
Subscribe to the Podcast
The SitePoint Podcast is on iTunes! Add the SitePoint Podcast to your iTunes player. Or, if you don’t use iTunes, you can subscribe to the feed directly.
Episode Summary
Here are the topics covered in this episode:
- Boston Globe’s new Responsive design
- How to Report Browser Bugs
- Node.js Knockout Winners Revealed
- Introducing Twitter Analytics
- Google Aims Dart To Kill JavaScript
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/130.
Host Spotlights
- Brad: The Evolution Of The Web
- Patrick: Back4TheFuture.com – Nike Shoes for Michael J Fox Foundation
- Louis: FitVids.js
- Stephan: Bubble Boys
Interview Transcript
Louis: Hi everyone, thanks for downloading this episode of the SitePoint Podcast, just wanted to drop in a quick note to remind you all that we’ve yet again been nominated this year in the .net Magazine Awards for Podcast of the Year.
Patrick: Yeah!
Stephan: Woo-hoo!
Patrick: Please vote.
Louis: Yeah, absolutely. So just wanted to tell everyone that if you haven’t voted yet now is the time because the voting for the preliminary round closes on September 30th, so this is our last panel show before the voting closes, so go to thenetawards.com, cast your votes for SitePoint in the Podcast category and any of your other favorites in all the other categories. Thanks very much, now on to the show. Hello and welcome to another episode of the SitePoint Podcast, this week is another news and commentary show with a regular panel, how’s it going guys?
Brad: Howdy.
Stephan: Pretty good, how are you?
Patrick: It’s going good, just got back from Los Angeles where I hung out with Ted S from the SitePoint Forums, Ted Sindzinski, had a lot of fun and, yeah, he’s been around for a long time like me, so it’s good to swap stories with another old-timer.
Louis: Awesome, sounds good.
Brad: Grand old man of the forum.
Patrick: Yeah, much like Brad and Stephan also old men of the SitePoint Forums, that should be a calendar shoot, the old men of the SitePoint Forums (laughter).
Louis: That sounds terrible, I think we would sell like — we would see seven copies of that.
Brad; They’d pay us not to make that contentalendar!
Stephan: We’d sell seven copies to our mothers.
Patrick: I’d buy one, not hang it up mind you, but store it.
Louis: Awesome. So there’s a bit of news this week, the story I had was pretty interesting to anyone who follows web design and who’s been following the podcast for the past couple of months, we’ve been talking a lot about responsive web design as a sort of concept, when I interviewed Jeremy Keith we talked about it, back when I had the authors of our mobile book, Myles Eftos and Max Wheeler on the show we talked about responsive web design, had Chris Coyier on a couple of weeks ago, he’s just done a redesign of his site that’s ultra-cool and responsive and has a search box that zips around the screen when you resize the page, which we’re all big fans of. But it’s still pretty much a technique that has stuck to sort of the little agency sites or blogs or personal sites of web designers trying to demo out this technology, at least until now. I think yesterday The Boston Globe just launched a brand new site, it’s not even a redesign it’s a brand new site, which is I guess the first really mainstream website that’s going to get a lot of traffic that has one of these responsive designs that displays beautifully really whatever the dimensions of your browser or device are.
Patrick: Yeah, I’ve never done any drugs (laughter), and I never will, but –
Brad: I don’t know where you’re going with this.
Louis: I wonder where this is going.
Patrick: Let me finish. I think that as I open and scroll this and I watch the sun jump around, just watch the sun and watch different things, I think I would have to believe that this is kind of what it’s like to be on drugs watching this text jump around like this (laughter), like I’m high right now just looking at this website.
Brad: Managed way to read, I think it’s great, I love it, I’ve seen a lot of chatter on Twitter about it too, and I’ve got to say this is one of the bigger sites that’s actually done a redesign or relaunch and people have liked it; typically it seems like when these really popular and large sites do this the immediate first reaction is “it sucks, I hate it, blah, blah, blah, go back to the old way, you know, people don’t like change.
Patrick: I hate to be that guy, but is it because you listen to the web development audience, Brad, you listen to a lot of developers who are just like “oh, wow, it’s out there, responsive design!”?
Brad: Well, it was moreso — a lot of it was responsive design but it was also just the cleanliness, and it’s like a lot of new sites have this problem, it’s so much content it can be overwhelming, and I don’t think anyone’s perfected that art of how to give out a lot of content without it being overwhelming or too cluttered or just over the top. This Boston Globe site’s pretty good, and the fact that it’s responsive just really puts it over the top, I mean I think it’s a great site; they did a really good job.
Louis: Yeah, it’s interesting, I mean I think from my understanding is that this is not actually a redesign, it’s a brand new site, right; Boston Globe used to have, or still has a site called Boston.com which many people would be familiar with, a sort of mix of blogs and some content from the newspaper that’s very popular, they do the big picture blog that I’m a big fan of anyway, a photography blog. But this was an attempt to launch something that’s a little bit more focused on the text content from the newspaper, it’s going to be a subscription model that’s I think something like three or four dollars a week, so probably pretty similar to the price of the newspaper. And I guess they’re going the angle of because it’s responsive you can view on any device be it a phone or tablet or whatever, so this is going to kind of take the place of the subscription app that other news outlets like say the New York Times have gone in the way of monetizing their content for say the iPad or iPhone.
Patrick: Yeah, and we spoke about this in a recent episode, that was one of the things that I found most interesting about it is the development, it increases the development, but also the development that it eliminates that a lot of brands and companies might have had to do before like a mobile app, where now it’s just a part of the native website, and I think it’s interesting to see that play out and so soon especially with such a big brand and a big content company like The Boston Globe.
Louis: Yeah, it’s really great and it’s also going to be interesting to see, I mean I don’t know if any of our listeners have been around for long enough to remember when table-based layout was just giving way to CSS for design, some of the big sites that went that route to begin with kind of paved the way for that to become a mainstream and just to become the way that web design is done, so if you think back to I think it was ESPN that was one of the first ones that did a table-less layout, and there are some others that I’m forgetting, but yeah, a lot of people at least in my Twitter stream seem to think that this is kind of a similar moment for responsive web design and that from now on if you’re doing a content website that’s not responsive you’re kind of old-school and doomed to the history bin of web design.
Patrick: So was The Boston Globe paywall before this launch or is this a new thing for them?
Louis: I think it’s an entirely new thing is my understanding is that Boston.com is a different thing where they were just trying to be an ad supported online presence that included a bunch of blogs and content that was outside of the newspaper, and this is an attempt to do a real sort of newspaper site that exists as a paywall thing.
Patrick: Yeah, it’s interesting because when we, us four, put our ear to the ground obviously a lot of that is influenced by development types. I don’t know what the general consumer reaction is to the paywall, right, because I think that’s the area that they would go to more is that there’s a new paywall for Bostonglobe.com website. So I don’t know if that’s something that has received any pushback or any criticism, because obviously paywalls have been criticized a lot in the past with different outlets, so I don’t know if The Boston Globe is going to avoid that here.
Louis: To me what it seems more like is it’s comparable like I was saying with some of the subscription based apps that other news outlets have launched for the various platforms, right, so you can get the New York Times app for your iPad and that costs a fixed amount and you get the New York Times on your iPad. What they’ve tried to do here, and it’s kind of an ambitious play, is to leverage the idea of responsive web design and say look if we can make one website that works on any device and you get one subscription that gives you access to all of that, so the paywall content on your desktop is the same as the tailored content on your iPad, and when you load it on the iPad you get a really nice sort of two-column view that really looks like it was designed for that screen size and similarly if you look at it on your phone. So they want sort of to replace the paywall app with the web based paywall, and maybe that will work with consumers because people have come to the understanding that it is okay to pay for content on those devices as long as it looks like it was tailored for those devices; like I wouldn’t pay to access the New York Times website on the iPad because it just — I have to zoom around all the time because it’s not designed for that kind of screen, but I would pay for the app because it’s a really pleasant and easy reading experience.
Stephan: Do you know if the, I guess the website; does it use HTML5 so they can cache the content?
Louis: That’s a great question; I do not know the answer to that. I can probably find out relatively quickly.
Stephan: The reason I ask is because you know that’s one of the big pluses for me for the New York Times is that I can download a bunch of articles before let’s say I get on an airplane or get on a train and I can read it on a train, so if they’re not offering that to me I’m not going to pay because that’s usually when I’m reading is on the plane or going somewhere.
Louis: Yeah, right, that’s a really good point, I don’t see an obvious like cache manifest kind of thing, so I guess the app might have that advantage in that it’s really — it works offline really well. But it will be really interesting to see how this works going forward and the effect that it has on other sites’ willingness to embrace the kind of responsive web design instead of paying for a bunch of separate apps on different platforms.
Patrick: Right.
Louis: Yeah, but I mean one thing we all have to agree is that it is a really pretty looking website and the way they’ve done some of the challenges of responsive design, so if you look when you’re looking at it full screen you’ve got to sort of hover over the menu items and then you get this big dropdown with the subsections, but then when you’re looking at it in a narrow window you’ve just got a one-sections thing which doesn’t have a hover because I’m assuming they’re expecting most people looking at it on a screen that size will be using touch devices and when you tap on it then you get all the subsections sort of appear below it, so ways of dealing with like big menus that are hard to cram into a small amount of space they’ve collapsed it really nicely, and it may not have the search box zooming around the screen like Chris Coyier’s site.
Brad: Boo.
Louis: (Laughs)
Brad: If the search box isn’t flying then I’m definitely not paying.
Patrick: This site isn’t as trippy as the last one (laughter), but it’s still trippy.
Stephan: I’ll say this, I think it looks good, I think especially as it’s smaller I think it looks good, full screen on my laptop here I don’t know, I don’t know if it feels like a news website to me, I guess that’s my only complaint, it doesn’t feel like a newspaper, I don’t know what the means, like I don’t know what a newspaper is supposed to feel like.
Brad: Maybe they didn’t want it to feel like a newspaper.
Stephan: Yeah, you know what, Brad, I don’t need sarcasm (laughter). But other than that I really like the way it looks on a smaller screen because it’s very easy to navigate so I like that.
Patrick: So I found this story through Forbes.com and it is a blog post on the Twitter Developer blog introducing Twitter web analytics, and what I gather from this post is that Twitter will soon be releasing for all website owners over the next few weeks a way to track what traffic you’re generating through Twitter, how many clicks you’re getting from Tweets, how many Tweets there are that mention your website, the effectiveness of the Tweet button if you use it, and more like your most popular content, from a special dashboard that you’ll be able to access through the Twitter website, sort of like Google webmaster tools I would say in how they allow you to view your rank in various Google search terms and see whether they can spider you and all those things. It looks like Twitter is going to roll out something like that, and a small pilot group of testers have access to it now but the rest of us, large and small, should be getting access to it in the next few weeks.
Louis: Yeah, this looks really good. I’m definitely looking forward to this because it’s something that if you use sort of a social media analytics tool, or social media sharing tool like Share This or Add This, those come with some built-in analytics, the analytics aren’t great, and it also means if someone Tweets a link to your thing not from that button you don’t get the tracking on it, so is something that I think would be really useful for any kind of website owner that wants to be able to track how many people are clicking on stuff from their Tweets.
Patrick: Yeah, and as I look at this I can’t help but think about bit.ly and if they’re going to become the next service that the Twitter main website goes after because it might already be built-in in some way that you can get traffic for the specific links that you Tweet, since I do see a content tab in this screen grab, but either way it’s something that you could certainly Twitter rolling out at some point is — since they’re already shortening the URLs with t.co the only real issue is the custom URLs, but Twitter has shown before that it’s willing to go into certain markets where developers have already built up good presences, so I don’t know if I’m saying to be worried but I can definitely see them going there.
Louis: Well, I just think it makes a lot more sense for this stuff to be handled by Twitter than by a third party, like for me if I’m posting content to Twitter I’m okay with relying on Twitter to still be around for that content to continue existing, but if I have to also rely on a third party to shorten the URL and then track all my stuff which is independent of Twitter, especially in the case of bit.ly who are on a top-level domain which is let’s just say –
Patrick: Completely safe!
Louis: (Laughs) Let’s go with that, alright, so the CCTLD of bit.ly is totally secure, it’s in the most politically stable country in the world so we never have to worry about that, but yeah, for me like it makes sense for the URL to be shortened on Twitter because that’s where I’m putting the content.
Brad: Isn’t that kind of putting all your eggs in one basket though?
Louis: But you’re putting all your eggs in one basket anyway, right, because if Twitter goes away the link isn’t there anyway, right?
Brad: Well, I mean so you don’t share shortened links on any other service except for Twitter?
Louis: No, why would you have to? No one else has a stupid 140 character limit (laughs).
Brad: Yeah, I mean I’ve actually gotten in the habit of sharing short links for the fact that it does give you those analytics, so if you’re sharing those links across rather than just pasting a link wherever it may be you’re still getting that quick traffic and you can kind of see is this effective or whatever, you know, even if you share wherever it may be I try to keep the links consistent. And, you’re right, I don’t share too often outside of Twitter maybe even Facebook, but when I do it’s typically I take that same URL that was shortened via Twitter and I’ll kind of pass it around because then I can track those stats.
Louis: I guess that’s a good point.
Patrick: That’s a good point. And I can see that being a reason that maybe Twitter doesn’t go the full route, and maybe bit.ly still has a good business with The Pro or obviously there are other tools that allow you to do that, some that you host yourself; for sure I use like using that Illiums, whatever it is, the short URL.
Brad: It’s not that short.
Patrick: (Laughs) Yeah, I’ve got iFrog.gy that I have not yet rolled out, so maybe one day.
Louis: Yeah, I still think that that’s probably the best solution for anyone who’s really serious about this, if you have the technical ability and you can register your own shortened domain then doing it yourself.
Patrick: Right.
Louis: And I remember it was some time ago Tantek Çelik wrote this piece about coming up with a way of shortening links in an algorithmically reversible way so that you wouldn’t necessarily look up a database but you could just expand out the — was that more like just compressing the string of the URL? I don’t know if that’s making sense to anyone.
Stephan: That makes sense, smart URLs.
Louis: Yeah, so a way that even if the service goes away you can still use the algorithm to figure out what the original links were. So I don’t know, I mean I can’t say that I think doing it yourself is the best way, but then obviously no one can be bothered, and you know Twitter is probably a pretty safe bet for this, and it’s great that they’ve got analytics now, I think that’s going to be really useful.
Brad: Alright, next up is the Node Knockout which is the annual Node.js Hackathon has announced their winners for the competition this year, this is actually the second year they’ve hosted this event, and it’s grown quite a bit. So this year they had 320 teams with more than 700 individuals competing, and that’s up from 100 teams last year with 250 participants. So basically what this competition is it’s a 48 hour hackathon building an application built on Node.js, which is if you’re not familiar with it it’s basically server side JavaScript environment which we’ve talked about a little bit recently and it seems to be certainly one of the buzzwords this year, and one of those technologies a lot of people are looking a little bit closer at, but I thought we could go through some of the winners and check out these apps because I mean these are pretty impressive apps for a 48 hour build.
Louis: Yeah, this stuff looks pretty cool.
Brad: Yeah, so the first winner, overall winner and solo winner category, I don’t know if that’s two categories or one, but it is Observer and the website is Observer.no.de, some of these sites are public apps so you can actually login to them and to play with others you just have to go into Git if it’s available and check out the source. But Observer actually allows you to watch your application users in realtime and you can actually see what they’re doing on your website, so if a user’s on your website and they’re kind of stumbling around lost trying to find the registration button or something like that you can actually see that and you can initiate a chat, an anonymous chat with them, and say hey are you looking for the register button, it’s right over here, and you can help them out, it’s kind of an interesting application. I think the one that I thought was the most interesting and the most fun was the overall team winner and that was the eight bit beats, and basically this is a web app where you signup, you literally just type in your name and it drops you right into a collaborative social beat and melody sequencer so you can actually make tracks in realtime with multiple people throughout, so it’s kind of interesting; if you fire it up it literally has I think it was Super Mario or somebody running across the sequencer.
Patrick: Megaman.
Brad: Megaman, that’s who it was, and you can actually drop beats, and I though of you, Patrick, when I saw this, you can drop whatever beats and tones and as a group you can try and come up with a song together, so it’s kind of a cool way to work with each other.
Patrick: Yeah, gotta get Puttin’ on the Ritz into this somehow.
Brad: I would imagine. This reminds me of when Google came out with the guitar and in like one day people were recreating Led Zeppelin songs and passing links around, like I could see that turning into something like this. There’s also a Drive.in which is basically a YouTube battle party, I guess it’s similar to Chill.com or Turntable but for videos where you can actually — you basically battle back and forth on YouTube videos for a crowd of people who can then kind of vote on whether they like or do not like your video and can throw tomatoes at you, so.
Patrick: Ouch.
Brad: They’re all pretty fun apps, and the fact that some of the source is actually available is kind of cool. These apps, by entering they’re not considered open source apps, they’re only open source if the author wanted to make them open source, so not all the apps are actually available for download but some of them are.
Louis: Right. What’s interesting here is you can really see that all of these apps are sort of leveraging the strengths of Node.js and sort of going places where it’s been difficult to develop apps using traditional stAX, so it’s a lot of stuff that requires high concurrency and a lot of simultaneous connections that stay open to the website which is something that Node.js does really well and that other, you know, like if you had a Lamp Stack every connection is firing up your whole PHP binary and Apache binary in memory, so you’d end up using a lot of memory if you have a lot of people connected at the same time in a lot of concurring connections, but Node being really small and fast and good at handling that kind of thing is ideal for these kind of apps that involve sort of monitoring things or that feel kind of realtime over TCP, you know.
Brad: Another interesting thing, this website it’s actually Nodeknockout.com and if you go all the way to the bottom it actually tells you that this website is a massively multi-player website, and if you realize it as you click around in the background you actually have a little avatar on this website that will kind of follow your mouse and you can actually talk to everybody else that’s viewing the website, which when I saw that I was like that’s kind of cool, so it’s kind of a little hidden bonus in the website itself.
Louis: Yep.
Brad: Anyways, it’s fun so certainly check it out and I would imagine that we will probably see the amount of entries double next year over this year just as it did this year, so some really cool stuff coming out of it.
Louis: Yeah, it’s surprising to me to even realize that Node has been around that long because it feels to me like we just started hearing about it, and then when you said like it’s an annual Node.js competition it’s like what do you mean annual, it hasn’t even been around for a year, but I guess time flies and we’re already two years into this.
Brad: Yeah, from 250 last year that’s over 700 people this year so it’s more than doubled it’s almost tripled, and it’s only going to go up from there, it seems like it’s really starting to catch on, like you said, we’ve talked about it a few times already on the podcast and I’m sure we’ll be talking about it quite a bit more.
Patrick: As if I didn’t feel old enough already now Node.js is getting older (laughter).
Brad: The old man of JavaScript.
Patrick: The travesty.
Stephan: And this all while Google aims to kill JavaScript (laughter), I mean come on guys. We talk about Node.js and now there’s an article in Information Week about Google wanting to start its development and pushing its own language.
Louis: So Google is trying to kill JavaScript is the TLDR of the story you’re about to link me to?
Stephan: So Google’s pushing to have Dart, which is the new name for Dash, on the Web and they want people to use it to develop web applications rather than JavaScript. In their words they say that JavaScript is an implementation of the ECMA standard but it’s fundamentally flawed and can’t be fixed at a speed that matches its development ambitions. So, I think it’s interesting.
Louis: It’s pretty harsh.
Stephan: Pretty harsh and it may be a failure in the end.
Louis: Yeah, it doesn’t sound like that’s gonna pan out, I mean is this something — is this for front end stuff?
Stephan: Yeah, it’s actually going to be based on ECMAScript as well, so it’s going to be — I guess they’re trying to jumpstart, jump ahead of JavaScript where JavaScript is now and take it from there, and they really want to see it replace JavaScript as the main language of web development on the open web platform, that’s their words not mine.
Louis: Wow.
Stephan: So I don’t know. I don’t see this going over well, I see it kind of turning into just another one of those things that we hear about in another couple of months that –
Louis: Yeah, I mean this one’s kind of baffling because you’d have to get all the browser makers on board to be like oh yeah we’ll just ditch JavaScript and all the work we’ve put into developing our JavaScript engines and we’ll just use this new thing. And the other thing is it seems like it’s kind of giving — it would be giving Google a head start if they play into it, right, because Google will have already developed an engine and an interpreter that runs this new language really fast and then everyone else has to build one from scratch.
Stephan: Yeah. So I don’t know, I mean if it’s based on the ECMA T39 standard does it need its own or most of these browsers now are they supporting ECMA out of the box?
Louis: Man, I have no idea, as soon as people start talking about ECMAscript standard you’ve totally walked off the deep end of what I’m able to comment on.
Stephan: (Laughs) I’m just wondering if that’s what their goal is with this is to follow the ECMA script standard because they think that’s going to be in the browser. Or maybe they think that Google Chrome is going to be the only browser in the next three years.
Louis: Yeah, maybe that’s it.
Stephan: (Laughs)
Brad: Yeah, I would be shocked, I mean you know JavaScript not only from the browser standpoint but also from the developer standpoint, I mean it’s been around a long time and there’s a lot of developers out there and there’s a lot of really passionate developers. It’s certainly not perfect, I don’t think any language really is, but you’re right, who knows, we might be eating our words in a year from now, but it would definitely take a huge push and some big names to get behind something like this for there even to make a dent to where people actually start discussing it on a regular basis.
Patrick: And the interesting part of the article for me was Brendon Eich, the creator of JavaScript and the Mozilla CTO is quoted in the article linking to a blog post that he wrote last month where he said that “many Googlers, especially the principles, do not like JavaScript and don’t believe it can evolve in time,” whatever that might mean, “and Google of course influences JavaScript evolution directly so they can put a finger on the scale here,” he says, “but they’re wrong and I’m glad at least some of the folks at Google working in TC39 actually believe in JavaScript, specifically its ability to evolve soon enough and well enough to enable both more predictable performance and programming in the large.” And he argued, according to the article here, that the slower development of the community driven standards is a necessary price to avoid fragmentation and to maintain interoperability, which makes sense to me; it’s one of those things that’s been around for a long time and, you know, I’m a non-developer but it’s — so many things I run are JavaScript that it would seem natural that it wouldn’t be going away any time soon. And the main problem I have with JavaScript is that you can turn it off in the browser (laughs), if you could just leave it on and not have it disabled that would be perfect because then you would always see my ads, greedy, greedy (laughter). So if Dart had to be on and you couldn’t disable it and I could serve ads through it I love it!
Louis: Alright, I think we’ve just killed this story.
Patrick: Ah, man, dollar signs everywhere.
Stephan: Priorities there, Patrick, priorities.
Louis: You started off so well with like the community based standard is going to be a necessary condition for interoperability, you know you had me.
Patrick: Cha-ching! (Laughter)
Louis: Yeah, so I guess it’s kind of a wait and see thing. Obviously this isn’t even coming from a statement from Google, so it’s not on the Google blog, it’s from another news outlet that’s reporting on something that Google is saying that they’re going to unveil in a month, so what it is and what the details are and how it plays out are really yet to be seen, so I guess we’ll have to wait and see.
Stephan: Yeah, I mean they probably came about this at some bar, they found some device that had –
Patrick: They found Dart, someone at Google had left Dart laying on the bar next to an iPhone7 and they found both and this was a news worthy one.
Stephan: This was the news worthy one, exactly.
Louis: Yep. So, another story I wanted to link to this week, and this is something I saw floating again across my Twitter stream, a bunch of people linked to, is an article on Smashing Magazine by, and I’m going to get the name wrong again, I always get people’s names wrong, but he’ll have to forgive me for this one, Lea Verou, I’m going to go with that –
Patrick: Sounds good.
Louis: — as the pronunciation of that name, which is titled Help the Community Report Browser Bugs. So what it is, is this really in depth article sort of outlining the process of if you stumble across something that you think is a browser implementation bug how to isolate it, how to create a test case, how to report it on the browser’s bug tracker, test it in the latest nightly build of that browser, find out if it’s already been reported, so all of this stuff to really help browsers move along faster in their implementation of new and emerging standards like, for example, HTML5 and CSS3. So, I guess this is interesting because, how can I say this, we had IE6 which had a bunch of bugs that were known and the best you could do was come up with workarounds, so you’d blog about the workarounds that you had, and then after that we were kind of in this period of stagnation for a long time, but now suddenly you’ve got new standards and new browser versions being released really quickly, and what that leads to is you discover some interesting bugs sort of at the frontier of development, right, as new features are added and new specs are started to be implemented, and especially when the specs are worded perhaps ambiguously and there’s multiple different ways of interpreting it; it happens pretty frequently that if you’re playing with cutting edge stuff you’ll stumble across bugs and implementations. A lot of people maybe don’t have the experience or the knowhow to go out and sort of pare down your project to isolate the bug and then reproduce it and submit it so that the progress can go faster.
Patrick: I used up my joke for this story pre-show, so I will just say that everything you’ve said sounded great until you lost credibility when you said IE6 had bugs.
Louis: (Laughs)
Patrick: Right there is where I fell asleep.
Brad: Those aren’t bugs those are features.
Patrick: (Laughs) No, this is a good tutorial and especially for someone, well, I don’t want to say someone like me because that’s an insult to other people (laughter). It would be someone more technically savvy than me who would be discovering bugs, but this is a good guide for reporting the bugs not just for browsers but also kind of a general good idea thing for technology software related bugs in general, how you go about finding a bug, making sure that it’s actually a problem, spending the time to read through the documentation and then, and only then, making the final step to actually report the bug to the proper party, so this is a really interesting article.
Stephan: For me reporting web browser bugs is kind of like reporting spam on Twitter, I don’t feel like it does any good.
Patrick: So you don’t contribute to the solution, Stephan, you just stand by on the sideline and complain while the rest of us help make the world a better place.
Stephan: Well, my day-to-day life involves reporting bugs, so I don’t feel like doing it when I’m browsing the Web.
Brad: Stephan’s idea of reporting a bug is clicking that button “your browser crashed, would you like to report it,” sure (laughter).
Patrick: Would you like to notify Microsoft, yes.
Stephan: Yes, I would.
Brad: I gave back. I thought this article was great, I mean it’s definitely in depth and extremely detailed, but like you said it’s a good tutorial for anyone wanting to learn. But this actually reminded me quite a bit of, and they’re very similar, is pretty much the same approach you would take to like contributing to an open source application, I mean this is very, very similar; obviously browsers and web apps are a little different in how they’re built, but as far as the steps to take to determine if it’s a bug, to try to reproduce it, to search if it’s already been reported, I mean all that stuff is exactly the same. And I will say if you do actually go through this process whether it’s with open source or browser or anything for that matter, if you do discover something and actually are involved in helping fix it there’s a really good feeling behind that when it actually happens and you can say I found a bug in my favorite browser, I submitted it, they confirmed it, you know, fixed it because of me. Or an open source app, they took my code and used it because I figured it out, there’s a really good feeling behind that, so I definitely urge everyone to give it a shot sometime.
Louis: Yeah, absolutely. And the other thing is even if you go out there and find — so you reduce it down, you discover that it’s actually a bug, you go out to the bug tracker on wherever, whichever browser maker or site you want to see, and find out that the bug has already been submitted, you can just subscribe to that ticket and then once its fixed in the nightly builds you’re made aware of it, and that gives you a better idea of where the state of development in your browser is, right; you get to know what’s going on and what the status is. If you found something that sort of prevents you from using a given technology on your website because, for example, there used to be this bug in WebKit browsers, so Chrome and Safari, where if you used a drop shadow that had a large blur it would make the scrolling really, really choppy like there was something really inefficient in there, so if you had a big blurry drop shadow it would be really, really sluggish, and basically that meant that you couldn’t use that in your sites because anyone coming to your site with Chrome or Safari would just have this awful experience, so you just had to turn it off. So knowing when that goes away, okay, now it’s been fixed in the nightlies so the next release of Chrome and Safari so give it about three or four months the problem goes away I know that I can use it, so staying in touch with the development of the browser is another big upside of this.
Brad: A little trivia, do you guys happen to know what holiday it is today, today being September 13th the day we are recording this podcast, not the day the listeners are getting it.
Louis: Yeah, September 13th –
Brad: I hear Patrick Googling.
Patrick: National Peanut Day!
Louis: It’s close to Talk like a Pirate Day but I don’t think it is yet.
Patrick: We’re Googling pulling up random holidays (laughs). I see Defy Superstition Day on here when I Googled September 13th holiday.
Stephan: No, it’s International Chocolate Day.
Louis: Yeah, Talk like a Pirate Day is September 19th, so next week will be Talk like a Pirate Day.
Brad: These are all good days, unfortunately none of these have anything to do with web development and design, but my day does and today is actually Programmer’s Day, it’s celebrated all around the world (laughter).
Patrick: All around the world; are you overdoing it a little bit celebrating all around the world.
Brad: All around the world. Hey, Wiki tells me it’s all around the world so it is. It’s actually celebrated on the 256th day of the year because that is the — because the number of distinct values that can be represented with and eight-bit byte, so there’s a little trivia for you, and that day is today September 13th, so happy Programmer’s Day.
Louis: So in a Leap Year it’s September 12th apparently, that’s really interesting.
Stephan: But wait I want to know when is a byte not eight-bits?
Louis: Never. I’m pretty sure the answer to that question is never.
Stephan: It’s kind of redundant, right? Okay, nevermind.
Patrick: Happy Programmer Day Stephan, Brad and Louis.
Brad: So if you’re a programmer go out there, maybe somebody will buy you a beer, and if you are not a programmer maybe you should buy a programmer a beer, so I wanted to mention that. That actually wasn’t my spotlight; I just wanted to throw that out there.
Patrick: Either way Brad is suggesting you drink! No matter what just buy a beer, it doesn’t matter what day it is.
Brad: Yeah, just find me I’ll allow it, so I certainly won’t turn it down. My real spotlight is actually called the Evolution of Web.
Patrick: Double dipping.
Brad: Yeah, I am a little bit. It was released by the Google Chrome team, and I got to be honest, I don’t know, it seems like this came out in the last few weeks, I could be completely wrong, it could’ve been out for a while, but it’s the first time I’ve seen it and it’s really, really cool so I wanted to make sure I shared it. But you can find it at evolutionofweb.appspot.com, and it’s actually this interactive timeline that shows exactly what you would think, the evolution of web by the most popular web standards and browser technologies, and it starts back in 1990 with the http protocol, you know going into HTML 1.0 and then it dives right into the first major browser, Mosaic version one, which was released in ’93, and actually it’s really neat because you kind of see the lifeline of all the various browsers, the ones that lasted, the ones that didn’t, and web standards and technologies as well.
Patrick: Yeah, as you first load it it’s almost like a horse race, go Netscape, go!
Louis: (Laughs)
Patrick: You can do it! Oh, no, it died; it fell off (laughter).
Brad: I was gonna say it lasted so long, I bet if you polled all the developers and designers out there when did Netscape end or die –
Louis: Yeah, I would not have guessed that it was 2008.
Brad: I would not have guessed 2008. A new version came out in 2007, who knew? We probably talked about it.
Patrick: This actually makes me realize how early we were online, like we weren’t online that early because different forms of the Internet have existed for a while, but I got online in 1995 and it’s right there before Internet Explorer even.
Brad: This whole timeline kind of puts it in perspective how young the Web really is, I mean it seems like it’s been around forever really, but I mean 20 years it’s really not that long of time in the grand scheme of things, and it’s amazing how things have come and gone in that short amount of time, too, different types of standards and technologies were all the rage and then like two years later they’re gone and nobody supports them, so it’s kind of neat looking at it visually.
Louis: Yeah, I’m looking forward to seeing how this evolves over time, like for example the JavaScript line just stops and Dart starts up replacing it.
Stephan: I’m interested to see how gun happy Google Chrome is for the next three years.
Patrick: Yeah, and this is from Google obviously because Google has two spots, the last two the big innovators Chrome and Chrome OS are each separate categories.
Brad: I love that you can click on any browser and actually scroll through screenshots of each version.
Patrick: That is slick.
Brad: IE 1, 2, 3, 4, all the different versions for every browser, it’s definitely a blast from the past looking at some old Netscape screenshots and Internet Explorer 3, things like that.
Stephan: It makes me miss old Firefox, like version 1 and 2 looking at the screenshots; I miss it (laughter).
Brad: Back when it was innocent.
Stephan: Yes, back when it was innocent and the Internet was full of tables.
Louis: Yeah, I remember that, that was terrible.
Patrick: My spotlight is Back4thefuture.com, I found this via Crispian Burkes who is an active member on the SitePoint forums, and Nike has teamed up with the Michael J. Fox Foundation for Parkinson’s Research to sell 1,500 pairs of the 2011 Nike Mag, i.e. the shoe from Back to the Future. They light up, there’s a button inside that turns them on and off, and you can buy them on eBay now at Nikemag.ebay.com, and they are selling for thousands of dollars, two to three, four thousand, maybe even more depending on your size. But, it’s going to charity and Sergey Brin from Google has vouched to match I think up to 50 million dollars in donations from the auction, and someone else as well, I forget his name, sorry other kind donator, but it is pretty neat I think and a pretty neat shoe, if I had some discretionary income to spend I might even buy a pair, but yeah, so if you’re a big Back to the Future fan this is your opportunity.
Louis: My spotlight this week is something called Fitvids.js which is something put out by Think Vitamin this week, it’s this little JavaScript snippet, the purpose of which is to allow you to embed videos in a responsive site in a way that the actual video will scale along, so if you embed a YouTube video or a Vimeo video in an iFrame inside your website there are problems with putting that in sort of a fluid width container, so it will either break out of the container and cause some horizontal scroll bars or if you do resize it by sending a width on it in your CSS then you get something where the aspect ratio is all wrong. So, while we’ve had techniques for adjusting layout and adjusting images with responsive design and responsive sites, we haven’t really had anything to do a good job with video embeds which are a pretty key part of a lot of content based sites, and this is a great little JavaScript snippet and there are some cool demos if you want to have a look at it, and there’s a video demonstrating the functionality as well, so that’s mine.
Stephan: And I’ll go last I guess, after the phone call, mine is an article in the New York Magazine that’s called Bubble Boys and it’s kind of about all these geeks and programmers and hackers staying up late writing code in their dorm room being the future Steve Jobs and Mark Zuckerbergs, and it’s a really — it’s an interesting article about some of these guys and their obsession with code, so I figure some of our listeners will probably want to read that.
Patrick: Do we know any of these guys?
Stephan: I didn’t recognize any of the names.
Patrick: We’re the past generation at this point.
Louis: It’s very suited for Programmer’s Day.
Patrick: A made-up holiday that I learned about five minutes ago.
Stephan: Maybe that’s why they came out with it today, I don’t know.
Patrick: Probably not. I don’t think New York Magazine makes publishing decisions based upon made-up holidays.
Brad: Any title that says How Coding is like Cocaine is definitely geared towards developers.
Stephan: (Laughs) Oh, I totally missed the subtitle there.
Louis: Alright, well that’s as good a cue as any to wrap this one up.
Brad: I’m Brad Williams from Webdev Studios and you can find me on Twitter @williamsba.
Patrick: I’m Patrick O’Keefe for the iFroggy Network, I blog at managingcommunities.com, on Twitter @ifroggy, i-f-r-o-g-g-y.
Stephan: I’m Stephan Segraves; my blog is Badice.com and I occasionally Tweet @ssegraves.
Patrick: You also occasionally blog (laughter).
Louis: And you can follow SitePoint on Twitter @sitepointdotcom, that’s SitePoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. If you go to sitepoint.com/podcast that’s a place to subscribe to the show, to find all our previous episodes, to leave a comment on this show, anything you want to do related to the podcast is found at sitepoint.com/podcast. Alright, thanks everyone, see you next week.
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.
Comments