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