[? music ?] 0:00 Welcome to another episode of Treehouse Friends. 0:15 I'm Randy Hoyt, and I'm here today at the In Control Conference with Dave Rupert. 0:17 Welcome Dave. >>Hey, thanks for having me. I really appreciate it. 0:20 Dave's the lead developer at Paravel. 0:23 Could you tell us a little bit about your role there and what kind of work you do? 0:25 Yeah. So Paravel is a 3-man team based in Austin, Texas. 0:28 We are going to stay 3 people. We like being 3 people. 0:32 But it's 2 guys I've known since high school really--Trent Walton and Reagan Ray. 0:37 You guys may know them from the Internet. 0:42 Yeah, so we're just 3 guys. 0:44 We are based in Austin. We do good work. 0:47 Yeah. Excellent. 0:49 I saw today your talk was on HTML5 features. 0:52 What are some of the features that you are excited about in HTML5 0:56 that you're already using in your work at Paravel or some that you're looking forward 0:58 to being able to use in the future? 1:01 Right away you have the semantics side of things--the new elements and stuff like that. 1:03 Those are really easy to get using. 1:09 They're fixable in older browsers, but I still, even today, 1:12 I find that people have hesitation about using them. 1:16 There are things like the new HTML input types. 1:20 Input type equals email. Input type equals URL--stuff like that. 1:23 That huge UX gain just by like changing 4 letters. You know? 1:29 But I find people either don't do that, or they forget to do that, 1:34 or they just for whatever reason they haven't allowed themselves to do that. 1:38 I think those are huge features. 1:44 Personally I am very excited about the location API. 1:47 I've used it a lot in the past. It's kind of old news maybe now. 1:52 Best Buy, for example, you always have to enter your zip code or any store really. 1:56 I don't want to pick on them, but you enter your zip code-- 2:01 and I have to remember my zip code--but you enter your zip code, 2:05 and then it gives you a list of stores. 2:08 We have the technology now. It's really easy. 2:13 I just hit allow, and they can get my zip code and my geolocation 2:15 and tell me exactly how far away things are or just show me the things that are in stock. 2:21 That could be Target or--you know. 2:25 I'm at the point--I live across the street from a Target. Who doesn't in America? 2:28 I live across the street from a Target, and I don't go there without searching 2:32 their inventory before I go there. 2:38 It would be really cool if that website knew I was next door, 2:41 and they could just tell me the things-- 2:47 not even show me search results for things I can't buy at their store. 2:49 That would be interesting, but I'm really excited about location. 2:53 Another thing I talked about is ARIA roles and the accessibility features of HTML5. 2:57 Those are killer features. Those are really awesome. 3:03 The list kind of just goes on and on. Right? 3:06 User media is a new thing. 3:09 The ability to access webcams and audio. 3:13 I do a podcast with Chris Coyier. 3:17 It's coming to where we could maybe do that podcast with HTML-- 3:20 live broadcasting--and that's absurd to me. 3:24 That's like wow. This is the future here. 3:28 Yeah. That's stuff I'm excited about. I like HTML. 3:32 Last fall you released an article on A List Apart called "Mo’ Pixels Mo’ Problems" 3:38 where you were talking about retina displays and images. 3:41 I think there you recommended a solution using like a 1.5 size image. 3:44 So it's a little bit larger--not quite double. 3:48 Is that still something that you recommend, 3:51 or is that space evolved a lot more just in the last 6 months? 3:52 I would still recommend it for medium-importance images. 3:55 Let's say you have somebody's headshot on a website. 4:01 You don't want to do picturefill and polyfill and generate 10 different sizes 4:06 or something like that, but for somebody's headshot like on an article, 4:11 maybe beef it up a bit so it's not junky on retina displays and stuff. 4:14 After that article there was kind of rumors of it but no real great displays of it, 4:20 but there's this quality compression hack that you can do. 4:26 You basically make an image twice the size, but you compress the junk out of it, 4:31 and you do zero quality out of Photoshop. 4:38 You can have an image twice the size that looks perfect on retina. 4:42 It will scale down, and it works perfectly. 4:46 It's maybe even smaller than the original file because it's so low quality. 4:51 That is great, but I wrestle with that one because there's kind of 2 problems. 4:56 A) You are always serving people junky images. 5:04 You're just relying on them sizing them down. 5:07 I want like the official way. An image is a good image on the internet. 5:10 On mobile specifically, which is what it's targeting to solve, 5:16 is it exhausts memory on an iPhone for example. 5:19 For some reason you can only have 1.4 million pixels or something like that 5:23 in an image. I don't know the actual number. 5:29 But like 3000 by 3000--image that size--will just not show up. 5:33 It's like surprise! I don't do that. 5:37 So you have to just deal with these edge cases. 5:39 I don't know if that's perfect. 5:42 I've seen it in production, and it works good. 5:45 Back to the headshot use case, maybe that's a great one. 5:47 People tend to want to have a really nice headshot. 5:52 So maybe you don't want to compress--I don't know. 5:55 Why are you asking these questions? 5:57 It's good. Thankfully picture and source set are kind of moving forward 6:00 into the specifications, so fingers crossed that that's going to turn out. 6:05 I don't know. I want it now. 6:12 The one piece of advice you give in that article that I think does still apply 6:15 is to use you brain and to try out different techniques 6:17 and see what one's going to work best for you. 6:20 Is that still where we're at where there's not really a solid answer? 6:22 You have to try a bunch of different things and settle on the one that works best 6:24 for your particular case. 6:27 Absolutely. That's what web development is. 6:29 That's why we're professionals. Right? 6:32 You know for Treehouse you can learn different techniques about how to do 6:36 maybe one thing even. You know? 6:40 There's going to be best practices, and those will always rise to the top. 6:42 Right now you just got to think it's a no man's land and just do the best you can. 6:45 I will say with a caveat, the problem with the 1.5x hack 6:51 is that web pages are getting bigger and bigger and bigger. 6:56 So we need to be careful. We can't just give people a 2 meg website anymore. 7:01 People are expecting less, and it's just not necessary. 7:11 We're like the junkies. 7:17 We have the business requirements to have a hero image on every darn page. 7:19 We need to grow up I think. 7:24 We need to be careful--not grow up. 7:28 We need to be careful about how much we're sending down the pipe. 7:30 One of the things I want to talk to you about is your goals for this year. 7:35 So I know a lot of people look to you for answers, 7:39 but it's interesting to see that you, in public, are still talking about 7:41 how you're learning and how you're keeping up. 7:44 Would you mind talking about a couple of your goals for this year? 7:46 Every year everyone writes like a my life goal in 2013, 7:50 and I did the same thing. 7:55 My life goal is to write one of those posts. 7:57 For 2013 I decided to do 2 things. 8:00 One of my core concepts is always be learning. 8:04 We're never the smartest, and if you are you're about to get humbled in a big way. 8:08 I always want to be learning. 8:13 I came up with 2 goals that would help do that. 8:17 One goal was to finish a book a month. 8:21 I don't really have a lot--I say this--I don't have time to finish a book a month, 8:25 but if I quit playing iPhone games and stuff like that I do. 8:33 I have an amazing amount of time to read a book a month. 8:38 So I've been trying to do that. 8:41 Also another goal of mine was to spend at least a dedicated 4 hours a week 8:43 learning something I don't know for programming, 8:49 and I have this list of shame of things I want to learn. 8:52 I'll tell you. I'll just out myself. 8:57 I have not used Backbone. I need to, and I just need to learn it. 8:59 I don't use Grunt. I should. I just need to use it and add it to my workflow, 9:05 or maybe go fully Galman--or Gilman--fully Gilman. 9:11 Get on some sort of package manager for my frontend work, 9:17 but then again I don't know if I'm the target audience there. 9:22 There's a lot of other stuff, but those are kind of my big things. 9:26 It's like gosh, this is stuff I talk about, and I want to do, 9:29 but I just for whatever reason haven't done it. 9:32 I'm trying to dedicate at least 4 hours a week to learning that stuff. 9:35 In Austin, Texas, where I live, there are--every Tuesday night 9:41 this guy Damon--can I tell a story? >>Yeah. Please. 9:48 This guy Damon came up with this concept. 9:53 He negotiated with his wife one night a week to go out and work on side projects. 9:56 So he got Tuesday night. 10:01 He can go to any meet up he wants. He can go to any. 10:04 He can just sit in the coffee shop and code all night long. 10:06 Wife watches the kids. He's in good--you know. 10:09 So he kind of turned it into a thing like hey, we meet up here. 10:12 Out of that actually 2 startups have been formed. 10:17 Dudes just sitting there coding together, and they launched a startup. 10:20 They got millions in funding. It's a success story. Right? 10:25 That's kind of the environment he incubated. 10:28 Cafe Bedouins is this thing where you just go out Tuesday night, 10:33 you work on a side project. 10:36 I've just been trying to go out and do that. 10:38 There's more I can learn. You know? 10:40 I need to--I don't know every class and every function and every method. 10:43 Where it's just to learn--just to make sure I have the basics covered, 10:48 and then that will probably no doubt help me in my day job 10:52 when I'm doing something later. 10:55 For the reading a book a month, I'm guessing those are programming books? 10:58 Maybe one on JavaScript right now? 11:02 Well actually my coworker, Reagan, did a 2012 reading list, 11:04 and he had about 2 dozen books. 11:09 I was just like that's awesome. I don't read that much at all. 11:13 Most of my books are programming books or design books or just kind of web-related. 11:18 My goal was to actually broaden out and do something else. 11:24 I just finished SMACSS by Snook--best book I've read on web stuff in the last year-- 11:29 hands down. Go buy that. 11:34 I've just started reading--I'm halfway through Freakonomics. 11:37 This guy takes data--I'm sure people know. It's an old book. 11:41 The guy takes data and reinterprets it and gives you kind of a different perspective 11:47 from data, so that's cool. 11:53 I could actually see how that would apply to my life. 11:55 It's really kind of an interesting book for me, 11:58 and then I also just recently cracked open--I shouldn't read 2 books at a time 12:02 because I'll fail--but I cracked open Eats, Shoots & Leaves. 12:06 It's a book on how to write better--use grammar and punctuation correctly-- 12:11 something I don't do if you've ever read my blog. 12:15 Excellent. I noticed recently you launched The Accessibility Project website. 12:19 Could you talk a little bit about that? 12:23 Yeah. I sure can. 12:25 So The Accessibility Project--A11YProject.com--is an open source-- 12:27 it's a community-driven effort to make web accessibility easier. 12:33 I've been making websites since I was like 14, 12:38 so more than half my life now, and accessibility is still difficult for me. 12:40 I sort of have come to the conclusion like it's unnecessarily difficult. 12:48 Accessibility experts, and I know you guys have a course on accessibility, 12:53 that's all helpful, but accessibility experts tend to be really passionate people. 13:00 They tend to be academics. 13:07 They work for MIT, and they're publishing studies on screen reader usage 13:12 and stuff like that. 13:17 It's so in depth that the average web developer A) doesn't have time-- 13:20 can't immediately pull the best practice. 13:24 Yeah, so it's just kind of too much. 13:29 There's this further complex problem where everything is out of date. 13:32 There's a lot of out of date information. 13:37 If you think about it that way it's like the information is difficult to get, 13:40 the information is out of date, and then the community tends to be experts. 13:44 They've got jobs, and they're sort of isolated from the web developer community 13:50 like us and new kids getting started. 13:55 They tend to be a little more isolated from that community. Right? 14:01 So my goal--I just was looking at the problem, and I was just like I feel like it 14:04 has a design--accessibility has a design problem. 14:09 It should be a lot more approachable, 14:13 and we should be able to dilute the best practices. 14:16 It's a very nuanced field, and I want to oversimplify it. 14:19 Maybe I'm criticized for doing that, but there are best practices 14:23 that we can grasp onto now and stuff you don't even know. 14:29 I mean it turns out title attributes--they're really terrible. 14:32 Because people use them wrong, and they're over redundant, 14:37 and people don't like them. 14:39 Surprise. Because I've always read that they're great. 14:41 This is the best thing you could do for your website. 14:45 I'm just like everything gets a title tag. You know? 14:48 It's like DIV title the DIV. 14:52 Accessibility is just kind of over complex. 14:55 I put it on GitHub so it's completely open source. 15:01 If there's a problem we can update it, so in theory it has the latest, greatest information. 15:06 Now that's like--my most recent feedback was no, no, no, no, no. 15:12 Stop pedaling this bull expletive. 15:19 Maybe it's not working, but I'm really encouraged by it. 15:22 I wake up every day, and somebody's fixed a typo. Somebody's added content. 15:27 Somebody's made a pull request. 15:32 I just wake up and say open source is working. This is awesome. 15:36 Excellent. Sounds like you're trying to make accessibility itself more accessible. 15:40 You could say that. Yeah. 15:44 For me, again, it's like I'm not a dummy. I work hard at my job. You know? 15:46 So why is this so difficult. I'm just trying to pull the best resources. 15:55 There's a lot of other--I've talked to a lot of other people 16:04 who have had the same problem, and there are a lot of other people 16:07 who have pitched in. 16:10 I mean we're up to almost 40 contributors now. >>Excellent. 16:13 [Dave] It's cool. >>Are you handling all those pull requests or how does the process work? 16:17 We got a small team. There are actually 3 admins right now. 16:20 It can grow, and it should. 16:23 You don't want posts to just go up. 16:26 We've actually had a problem. 16:29 This guy committed a post. It was on access keys. 16:31 I was like I didn't know about these. These sound like an interesting feature. 16:34 It turns out access keys are terrible. 16:38 People were like this thing has failed. This is done. They don't know anything. 16:41 It's like well, exactly. 16:46 That's exactly the problem is there's so much misinformation. 16:48 We'll rewrite the article to say don't use them. 16:52 There you go. Fixed. That's it. 16:55 Perfect case of open source working. 16:58 Yeah. Yep. Open source--even bad things where terrible criticism comes, it's working. 17:00 Excellent. Well, the last thing I want to ask you about is you'll be on a panel 17:07 at South by Southwest this spring. 17:10 I want to talk a little bit about that. It's called What You See Is What You Spec'd. 17:12 Could you tell us a little bit more about that 17:14 and what you guys will be covering in that panel? 17:16 Yeah. So the panel is going to be pretty interesting. 17:18 There's probably going to be a million responsive web design panels, 17:22 but this is kind of centered around responsive web design 17:26 and kind of design patterns--sort of like Brad Frost's patterns library 17:30 or even style guides. 17:35 It's being put on by a guy from the Guardian.co.uk. 17:37 They're obviously investigating responsive web design to solve 17:43 a lot of their mobile traffic problems--problems? I guess mobile traffic is good. 17:46 They're kind of developing this really robust style guide. 17:52 I feel like that's pretty English. 17:57 The British are always very thoughtful in everything they do. 17:59 BBC.co.uk has a beautiful style guide. 18:05 These guys are very thoughtful about what they're doing. 18:10 We're going to talk a bit about just how you kind of do that workflow. 18:14 It's not just PSDs and stuff anymore. 18:20 It's these more complex things. 18:23 Are you using those more complex deliverables in your work at Paravel, 18:27 or how does that reflect that? 18:31 We're back to SMACSS--reading that book--really eye opening in just how 18:33 we should be doing web development--CSS specifically. 18:38 Just more modular. Everything's a module. Everything can be reused. 18:43 You can get IDs versus classes--that old HTML war, 18:49 but classes you can reuse. 18:53 Let's plan on everything being reusable. 18:56 That's our baseline. We're going to reuse that. 18:59 Then it's a matter of presenting it. Right? 19:04 You need to bundle it in a package that people can digest. 19:06 Usually the work we do is a lot of hand offs, so we'll hand off a site to somebody. 19:13 Then it's their developer team has to make inferences and stuff 19:21 to build out this project. 19:25 So you need a really good well-documented CSS. 19:28 In that sense you'll probably want to start building out something like style tiles 19:32 or a style guide. 19:37 If you go to Bootstrap--Twitter Bootstrap. 19:40 That website where you download Twitter Bootstrap--it's a documentation guide 19:43 for how every part of Bootstrap works. 19:47 I think delivering mini Bootstraps to clients is probably the future 19:51 just because you want them to have all the tools to build their website 19:56 from their CMS or whatever it is 20:00 hopefully with your help as client services so you get money, get paid. 20:05 But then again without you--because things go awry, 20:09 and you want to give your client the best thing. 20:16 That focus on reusable modularized code. 20:21 Starbucks has a great example of that. 20:25 It's a doc system that's using this style. It's a little inception, but it works. 20:27 Yeah. A phrase I've heard other professionals say, and you mentioned 20:34 in the description for the panel, is that we're building a system 20:37 and not a set of pages. 20:40 Could you explain a little bit more about what that means 20:42 and how that ties into this idea of a style guide? 20:44 Yeah. Definitely. This was actually at--so we're at In Control Conference right now. 20:46 I was at an In Control Conference in Hawaii talking to Daniel Burka 20:52 who works on Google--like Google's kind of app platform 20:56 and maybe Google ventures now--but Daniel Burka--old Digg guy. Right? 21:01 He's talking, and he's just explaining we don't make web pages anymore. 21:06 We're not--sure we can. You can make a conference page or something. 21:12 But really what you're making is a system--the word system-- 21:18 but you're just making an organism that has different body parts that all fit together 21:22 that needs to be recyclable. 21:27 You're never just making 1 page even if you're building a 1-page web app-- 21:31 a backbone app--you might have to use these modules somewhere else 21:37 in your app or something. 21:43 So nothing's unique anymore. 21:45 We're just heading to where the web is no longer just these pages. 21:47 They can be blogs, but your blog is actually a sophisticated web app. 21:52 It's a web app that displays content. 21:57 Once we all realize we're in the web app business, our code needs to grow up. 22:00 Andy Hume--I think he's at Clearleft--but he had a presentation called 22:06 CSS for Grownups. I recommend watching it. 22:11 It's just like how to code like an adult, and it's super convicting. You know? 22:14 If you've just been kind of like I'm going to fake it. Yeah. 22:19 Excellent. Thank you so much for your time Dave. It was great talking with you. 22:23 If people want to stay in touch with you and see some of the other projects 22:27 you're working on, where can they find you online? 22:29 Yeah. You can follow my blog daverupert.com. 22:31 Follow me online at davatron5000--D-A-V-A-T-R-O-N 5000. 22:36 You can subscribe to the podcast--Shoptalk--at shoptalkshow.com 22:42 or it's on iTunes and all that--shoptalk--one word. 22:46 By all means reach out to me. I'd love to see what you're working on. 22:49 Excellent. This has been another episode of Treehouse Friends. 22:54 We'll see you next time. 22:57 [? music ?] 22:59