[? music ?]

Welcome to another episode of Treehouse Friends.

I'm Randy Hoyt, and I'm here today at the In Control Conference with Dave Rupert.

Welcome Dave. >>Hey, thanks for having me. I really appreciate it.

Dave's the lead developer at Paravel.

Could you tell us a little bit about your role there and what kind of work you do?

Yeah. So Paravel is a 3-man team based in Austin, Texas.

We are going to stay 3 people. We like being 3 people.

But it's 2 guys I've known since high school really--Trent Walton and Reagan Ray.

You guys may know them from the Internet.

Yeah, so we're just 3 guys.

We are based in Austin. We do good work.

Yeah. Excellent.

I saw today your talk was on HTML5 features.

What are some of the features that you are excited about in HTML5

that you're already using in your work at Paravel or some that you're looking forward

to being able to use in the future?

Right away you have the semantics side of things--the new elements and stuff like that.

Those are really easy to get using.

They're fixable in older browsers, but I still, even today,

I find that people have hesitation about using them.

There are things like the new HTML input types.

Input type equals email. Input type equals URL--stuff like that.

That huge UX gain just by like changing 4 letters. You know?

But I find people either don't do that, or they forget to do that,

or they just for whatever reason they haven't allowed themselves to do that.

I think those are huge features.

Personally I am very excited about the location API.

I've used it a lot in the past. It's kind of old news maybe now.

Best Buy, for example, you always have to enter your zip code or any store really.

I don't want to pick on them, but you enter your zip code--

and I have to remember my zip code--but you enter your zip code,

and then it gives you a list of stores.

We have the technology now. It's really easy.

I just hit allow, and they can get my zip code and my geolocation

and tell me exactly how far away things are or just show me the things that are in stock.

That could be Target or--you know.

I'm at the point--I live across the street from a Target. Who doesn't in America?

I live across the street from a Target, and I don't go there without searching

their inventory before I go there.

It would be really cool if that website knew I was next door,

and they could just tell me the things--

not even show me search results for things I can't buy at their store.

That would be interesting, but I'm really excited about location.

Another thing I talked about is ARIA roles and the accessibility features of HTML5.

Those are killer features. Those are really awesome.

The list kind of just goes on and on. Right?

User media is a new thing.

The ability to access webcams and audio.

I do a podcast with Chris Coyier.

It's coming to where we could maybe do that podcast with HTML--

live broadcasting--and that's absurd to me.

That's like wow. This is the future here.

Yeah. That's stuff I'm excited about. I like HTML.

Last fall you released an article on A List Apart called "Mo’ Pixels Mo’ Problems"

where you were talking about retina displays and images.

I think there you recommended a solution using like a 1.5 size image.

So it's a little bit larger--not quite double.

Is that still something that you recommend,

or is that space evolved a lot more just in the last 6 months?

I would still recommend it for medium-importance images.

Let's say you have somebody's headshot on a website.

You don't want to do picturefill and polyfill and generate 10 different sizes

or something like that, but for somebody's headshot like on an article,

maybe beef it up a bit so it's not junky on retina displays and stuff.

After that article there was kind of rumors of it but no real great displays of it,

but there's this quality compression hack that you can do.

You basically make an image twice the size, but you compress the junk out of it,

and you do zero quality out of Photoshop.

You can have an image twice the size that looks perfect on retina.

It will scale down, and it works perfectly.

It's maybe even smaller than the original file because it's so low quality.

That is great, but I wrestle with that one because there's kind of 2 problems.

A) You are always serving people junky images.

You're just relying on them sizing them down.

I want like the official way. An image is a good image on the internet.

On mobile specifically, which is what it's targeting to solve,

is it exhausts memory on an iPhone for example.

For some reason you can only have 1.4 million pixels or something like that

in an image. I don't know the actual number.

But like 3000 by 3000--image that size--will just not show up.

It's like surprise! I don't do that.

So you have to just deal with these edge cases.

I don't know if that's perfect.

I've seen it in production, and it works good.

Back to the headshot use case, maybe that's a great one.

People tend to want to have a really nice headshot.

So maybe you don't want to compress--I don't know.

Why are you asking these questions?

It's good. Thankfully picture and source set are kind of moving forward

into the specifications, so fingers crossed that that's going to turn out.

I don't know. I want it now.

The one piece of advice you give in that article that I think does still apply

is to use you brain and to try out different techniques

and see what one's going to work best for you.

Is that still where we're at where there's not really a solid answer?

You have to try a bunch of different things and settle on the one that works best

for your particular case.

Absolutely. That's what web development is.

That's why we're professionals. Right?

You know for Treehouse you can learn different techniques about how to do

maybe one thing even. You know?

There's going to be best practices, and those will always rise to the top.

Right now you just got to think it's a no man's land and just do the best you can.

I will say with a caveat, the problem with the 1.5x hack

is that web pages are getting bigger and bigger and bigger.

So we need to be careful. We can't just give people a 2 meg website anymore.

People are expecting less, and it's just not necessary.

We're like the junkies.

We have the business requirements to have a hero image on every darn page.

We need to grow up I think.

We need to be careful--not grow up.

We need to be careful about how much we're sending down the pipe.

One of the things I want to talk to you about is your goals for this year.

So I know a lot of people look to you for answers,

but it's interesting to see that you, in public, are still talking about

how you're learning and how you're keeping up.

Would you mind talking about a couple of your goals for this year?

Every year everyone writes like a my life goal in 2013,

and I did the same thing.

My life goal is to write one of those posts.

For 2013 I decided to do 2 things.

One of my core concepts is always be learning.

We're never the smartest, and if you are you're about to get humbled in a big way.

I always want to be learning.

I came up with 2 goals that would help do that.

One goal was to finish a book a month.

I don't really have a lot--I say this--I don't have time to finish a book a month,

but if I quit playing iPhone games and stuff like that I do.

I have an amazing amount of time to read a book a month.

So I've been trying to do that.

Also another goal of mine was to spend at least a dedicated 4 hours a week

learning something I don't know for programming,

and I have this list of shame of things I want to learn.

I'll tell you. I'll just out myself.

I have not used Backbone. I need to, and I just need to learn it.

I don't use Grunt. I should. I just need to use it and add it to my workflow,

or maybe go fully Galman--or Gilman--fully Gilman.

Get on some sort of package manager for my frontend work,

but then again I don't know if I'm the target audience there.

There's a lot of other stuff, but those are kind of my big things.

It's like gosh, this is stuff I talk about, and I want to do,

but I just for whatever reason haven't done it.

I'm trying to dedicate at least 4 hours a week to learning that stuff.

In Austin, Texas, where I live, there are--every Tuesday night

this guy Damon--can I tell a story? >>Yeah. Please.

This guy Damon came up with this concept.

He negotiated with his wife one night a week to go out and work on side projects.

So he got Tuesday night.

He can go to any meet up he wants. He can go to any.

He can just sit in the coffee shop and code all night long.

Wife watches the kids. He's in good--you know.

So he kind of turned it into a thing like hey, we meet up here.

Out of that actually 2 startups have been formed.

Dudes just sitting there coding together, and they launched a startup.

They got millions in funding. It's a success story. Right?

That's kind of the environment he incubated.

Cafe Bedouins is this thing where you just go out Tuesday night,

you work on a side project.

I've just been trying to go out and do that.

There's more I can learn. You know?

I need to--I don't know every class and every function and every method.

Where it's just to learn--just to make sure I have the basics covered,

and then that will probably no doubt help me in my day job

when I'm doing something later.

For the reading a book a month, I'm guessing those are programming books?

Maybe one on JavaScript right now?

Well actually my coworker, Reagan, did a 2012 reading list,

and he had about 2 dozen books.

I was just like that's awesome. I don't read that much at all.

Most of my books are programming books or design books or just kind of web-related.

My goal was to actually broaden out and do something else.

I just finished SMACSS by Snook--best book I've read on web stuff in the last year--

hands down. Go buy that.

I've just started reading--I'm halfway through Freakonomics.

This guy takes data--I'm sure people know. It's an old book.

The guy takes data and reinterprets it and gives you kind of a different perspective

from data, so that's cool.

I could actually see how that would apply to my life.

It's really kind of an interesting book for me,

and then I also just recently cracked open--I shouldn't read 2 books at a time

because I'll fail--but I cracked open Eats, Shoots & Leaves.

It's a book on how to write better--use grammar and punctuation correctly--

something I don't do if you've ever read my blog.

Excellent. I noticed recently you launched The Accessibility Project website.

Could you talk a little bit about that?

Yeah. I sure can.

So The Accessibility Project--A11YProject.com--is an open source--

it's a community-driven effort to make web accessibility easier.

I've been making websites since I was like 14,

so more than half my life now, and accessibility is still difficult for me.

I sort of have come to the conclusion like it's unnecessarily difficult.

Accessibility experts, and I know you guys have a course on accessibility,

that's all helpful, but accessibility experts tend to be really passionate people.

They tend to be academics.

They work for MIT, and they're publishing studies on screen reader usage

and stuff like that.

It's so in depth that the average web developer A) doesn't have time--

can't immediately pull the best practice.

Yeah, so it's just kind of too much.

There's this further complex problem where everything is out of date.

There's a lot of out of date information.

If you think about it that way it's like the information is difficult to get,

the information is out of date, and then the community tends to be experts.

They've got jobs, and they're sort of isolated from the web developer community

like us and new kids getting started.

They tend to be a little more isolated from that community. Right?

So my goal--I just was looking at the problem, and I was just like I feel like it

has a design--accessibility has a design problem.

It should be a lot more approachable,

and we should be able to dilute the best practices.

It's a very nuanced field, and I want to oversimplify it.

Maybe I'm criticized for doing that, but there are best practices

that we can grasp onto now and stuff you don't even know.

I mean it turns out title attributes--they're really terrible.

Because people use them wrong, and they're over redundant,

and people don't like them.

Surprise. Because I've always read that they're great.

This is the best thing you could do for your website.

I'm just like everything gets a title tag. You know?

It's like DIV title the DIV.

Accessibility is just kind of over complex.

I put it on GitHub so it's completely open source.

If there's a problem we can update it, so in theory it has the latest, greatest information.

Now that's like--my most recent feedback was no, no, no, no, no.

Stop pedaling this bull expletive.

Maybe it's not working, but I'm really encouraged by it.

I wake up every day, and somebody's fixed a typo. Somebody's added content.

Somebody's made a pull request.

I just wake up and say open source is working. This is awesome.

Excellent. Sounds like you're trying to make accessibility itself more accessible.

You could say that. Yeah.

For me, again, it's like I'm not a dummy. I work hard at my job. You know?

So why is this so difficult. I'm just trying to pull the best resources.

There's a lot of other--I've talked to a lot of other people

who have had the same problem, and there are a lot of other people

who have pitched in.

I mean we're up to almost 40 contributors now. >>Excellent.

[Dave] It's cool. >>Are you handling all those pull requests or how does the process work?

We got a small team. There are actually 3 admins right now.

It can grow, and it should.

You don't want posts to just go up.

We've actually had a problem.

This guy committed a post. It was on access keys.

I was like I didn't know about these. These sound like an interesting feature.

It turns out access keys are terrible.

People were like this thing has failed. This is done. They don't know anything.

It's like well, exactly.

That's exactly the problem is there's so much misinformation.

We'll rewrite the article to say don't use them.

There you go. Fixed. That's it.

Perfect case of open source working.

Yeah. Yep. Open source--even bad things where terrible criticism comes, it's working.

Excellent. Well, the last thing I want to ask you about is you'll be on a panel

at South by Southwest this spring.

I want to talk a little bit about that. It's called What You See Is What You Spec'd.

Could you tell us a little bit more about that

and what you guys will be covering in that panel?

Yeah. So the panel is going to be pretty interesting.

There's probably going to be a million responsive web design panels,

but this is kind of centered around responsive web design

and kind of design patterns--sort of like Brad Frost's patterns library

or even style guides.

It's being put on by a guy from the Guardian.co.uk.

They're obviously investigating responsive web design to solve

a lot of their mobile traffic problems--problems? I guess mobile traffic is good.

They're kind of developing this really robust style guide.

I feel like that's pretty English.

The British are always very thoughtful in everything they do.

BBC.co.uk has a beautiful style guide.

These guys are very thoughtful about what they're doing.

We're going to talk a bit about just how you kind of do that workflow.

It's not just PSDs and stuff anymore.

It's these more complex things.

Are you using those more complex deliverables in your work at Paravel,

or how does that reflect that?

We're back to SMACSS--reading that book--really eye opening in just how

we should be doing web development--CSS specifically.

Just more modular. Everything's a module. Everything can be reused.

You can get IDs versus classes--that old HTML war,

but classes you can reuse.

Let's plan on everything being reusable.

That's our baseline. We're going to reuse that.

Then it's a matter of presenting it. Right?

You need to bundle it in a package that people can digest.

Usually the work we do is a lot of hand offs, so we'll hand off a site to somebody.

Then it's their developer team has to make inferences and stuff

to build out this project.

So you need a really good well-documented CSS.

In that sense you'll probably want to start building out something like style tiles

or a style guide.

If you go to Bootstrap--Twitter Bootstrap.

That website where you download Twitter Bootstrap--it's a documentation guide

for how every part of Bootstrap works.

I think delivering mini Bootstraps to clients is probably the future

just because you want them to have all the tools to build their website

from their CMS or whatever it is

hopefully with your help as client services so you get money, get paid.

But then again without you--because things go awry,

and you want to give your client the best thing.

That focus on reusable modularized code.

Starbucks has a great example of that.

It's a doc system that's using this style. It's a little inception, but it works.

Yeah. A phrase I've heard other professionals say, and you mentioned

in the description for the panel, is that we're building a system

and not a set of pages.

Could you explain a little bit more about what that means

and how that ties into this idea of a style guide?

Yeah. Definitely. This was actually at--so we're at In Control Conference right now.

I was at an In Control Conference in Hawaii talking to Daniel Burka

who works on Google--like Google's kind of app platform

and maybe Google ventures now--but Daniel Burka--old Digg guy. Right?

He's talking, and he's just explaining we don't make web pages anymore.

We're not--sure we can. You can make a conference page or something.

But really what you're making is a system--the word system--

but you're just making an organism that has different body parts that all fit together

that needs to be recyclable.

You're never just making 1 page even if you're building a 1-page web app--

a backbone app--you might have to use these modules somewhere else

in your app or something.

So nothing's unique anymore.

We're just heading to where the web is no longer just these pages.

They can be blogs, but your blog is actually a sophisticated web app.

It's a web app that displays content.

Once we all realize we're in the web app business, our code needs to grow up.

Andy Hume--I think he's at Clearleft--but he had a presentation called

CSS for Grownups. I recommend watching it.

It's just like how to code like an adult, and it's super convicting. You know?

If you've just been kind of like I'm going to fake it. Yeah.

Excellent. Thank you so much for your time Dave. It was great talking with you.

If people want to stay in touch with you and see some of the other projects

you're working on, where can they find you online?

Yeah. You can follow my blog daverupert.com.

Follow me online at davatron5000--D-A-V-A-T-R-O-N 5000.

You can subscribe to the podcast--Shoptalk--at shoptalkshow.com

or it's on iTunes and all that--shoptalk--one word.

By all means reach out to me. I'd love to see what you're working on.

Excellent. This has been another episode of Treehouse Friends.

We'll see you next time.

[? music ?]