[MUSIC]

okay.

So about one hour car analogies.

When I was making this talk, I was like, automate, auto, boom.

We got a theme.

So, moving along.

Alright, I work at Paravel, we're a three man team based out of Austin, Texas we've

built some websites in the past I work that's a really good image isn't it.

I work with Trenton Walton and Reagan Ray two

of my best friends, and no we are not hiring.

We have been together about seven years, which is about 9,000 years in web time.

So, it's pretty good and we kind of know what each other is thinking.

It's a pretty awesome working relationship.

I co-host the Shop Talk Show with Chris Coyer, of CSS Tricks.

It's a podcast about sound effects, that also talks about web design.

So if you like fart sounds and web design, this is the podcast for you.

Get in on the ground level.

It's skyrocketing.

We're up for a net award, vote for us.

Bing!

Alright, so I was a host of pod-, or co-host podcast with I think

it's like six of my friends in Austin, Texas called the ATX Web Show.

It's a podcast all about the Austin web design and development scene.

I think it's like, passionate to go local and like talk

about what your town is doing, so I really like that.

I encourage you to start one of your own in your town.

But, yeah, it's pretty cool if you're interested in Austin.

I would, I can talk to you about it.

I am an Ambassador, officially, no.

And then, I wanted to tell you, I have a

Bachelor's of Arts in Japanology, Asian cultures and languages, Japanese.

So just in case you're like, I wanna ask this dude

some really complicated code question, remember I majored in anime, so.

[LAUGH] And that, this will, this

[INAUDIBLE] you;re like this was really miscellaneous.

But no, this fact is gonna come back into play.

[LAUGH] So table of contents, here we go.

So we're gonna talk about web stuff, right?

We're gonna talk about stuff, cuz this is a

car talk, we're gonna talk about the command line stuff.

And I know everyone just like that's awful and then I'm gonna use my

computer, and I will fail at a live demonstration right before your very eye.

It'll be the most painful thing you'll watch, and

the whole two days that you're here, it would be

me, struggling to use the computer in front of your

very face, and then I'm going to be like, what?

Alright.

[LAUGH] Alright.

So, this is a saying, I hear.

Quite often.

On the shop talk show.

Or on everything.

Or, like, get people who call in, write in.

And, and it's just saying, you know, web design being too complicated.

There's all this stuff.

What do I need to learn?

You know?

I, you know, what is this, you know?

And whenever I hear this, I'm a little bit like.

You know?

I think about, like, drunk uncle, where he's,

just, like, is this organ, Wifi organic, or whatever.

Text me on my Blackberry, whatever, okay?

So, there, there is though, like, to your credit, who just asked that question.

There are a lot of tools.

There's a, every, you know, every day, every week, something comes out.

In fact, as I was planning this talk, a big change happened.

And I was, like, whoa.

We need to change, add a slide.

So, [LAUGH] There's a lot of stuff.

So and, and, you need to like keep on top of it, but you don't at the same time.

Like you just be kind of aware.

Like that's why you're here.

I'm gonna teach you some things, but hopefully, but then it's your job to kinda

go out and just kinda be aware, but don't like, you know, buy the farm, as they say.

Just, is that a euphemism for death?

[LAUGH] I'm not sure.

Alright.

Mental note, work on euphemisms, or whatever.

[LAUGH] So, we need to ask ourselves, this is the great prophet.

He was, you know, he rightly said.

That the rent is in fact too damn high.

And that's kind of how I feel about our industry in general, is

like, man everything's coming out, and the rent is too damn high, you know?

And so, the big question is why?

Why is it high?

Why, why, why do we have all of this stuff?

Why is my life so hard.

Well, truth be told you make webpages so like, chill out but [laughs] right?

Like, like we're not digging ditches, you know, like or laying concrete, we're

like making webpages so we should probably all chill out a little bit.

But, our jobs are a little complicated.

So here we go.

Here's the skills of web publishing and, and this is kind of where you know,

I kind of, how I see the web kind of converging and stuff like that.

We're all in the business of web publishing.

We publish things to the internet, right, whether it's an e-commerce thing,

you published a t-shirt to the website or a blog post or whatever.

You, we're all publishing things to the web.

And I think that's kinda the first thing, is we need to identify

ourselves as publishers and, and we're kind

of publishing things, making things, broadcasting things.

So I've kinda seen it like how it's growing.

It's kind of coming from two angles.

And there's, the one angle is designers.

Who's here as a designer?

Who would identify themselves as a designer?

Alright, and who here would just like identify themselves as a developer?

Okay a couple few who would be a design [UNKNOWN]?

Yeah not a word lower, your hand, I'm just kidding [LAUGH].

man.

Alright so this is kind of where actually I think we are.

You know, this design [INAUDIBLE] thing is the front

end, is kind of the convergence of these two disciplines.

You know, we have all, the designers who are like I'm making,

I'm publishing, so I want this poster to be on the web.

And then the developer who's like, well I want

it to be dynamic and PHP and, [LAUGH] you know.

And then, you know, and then there's us on the front end, who have

to kind of piece these things together and like be a little design savvy.

Being a little developer savvy that's kinda the generalist thing, but we're

just kinda put in this position in the web publishing side of things.

So, I think it's really important to start respecting the front

end as it's own separate discipline that does it's own separate

thing, so that you can get a better job title, tell

you boss about that, get a raise, you know how that works.

So, this is why it's getting harder.

Complexity.

So we've got all these, this is from Brad Frost, I stole his slide.

So, so we have these, these devices, right.

Responsive web design.

We have to like, basically make the web site work on anything ever.

That's a pretty big challenge.

And we, we, we have lots to think about,

lots of variables, android, blah [LAUGH] like there's a

lot of different things that can make us go

crazy, but we have all these, these, these complex things.

So we've started, you know, coming up with

ways to like deal with all this complexity.

You have preprocessors, we just heard all about Sass.

So you have preprocessors that are breaking

apart your CSS files into smaller modules.

Smaller little things that you can work on, and at the end you just like,

run code kit or whatever you run the command line and you like [SOUND] piece

it all together and like spit out a pretty sweet CSS file.

So that that's just kind of and these are this is a

fact, these are the only four things you need on a website.

So we'll move on.

[LAUGH] atomization.

Oh man Mr. Brad is going to talk to

us about that and tomorrow, and we're atomizing our websites.

I'll take a drink.

We're splitting our website into smaller, smaller chunks.

And if you're not doing this already, that's okay.

But I really encourage you to do this.

When we're making the web, Microsoft website, for, parallel, my

company we team up with Microsoft to make this website.

One of the biggest things we did, we like launched this prototype.

It was just, like, just code.

And then we, like, went through, and we

made sure each one of these little things was

a component that could live on its own,

and be styled infinitely by whoever down the line.

So we spent a lot of time kind of like, breaking

this thing apart and figuring out what what is each atom?

What is each little core component that we're doing?

So the thing about that though is, if you're going to like

split your website into like a hundred different components or ten or 15.

Or if you're just just going to obliterate it, and turn it into atoms don't

recommend that cuz like that's very big energy release and like Webble cities.

But, [LAUGH].

You

guys with me?

Alright.

[LAUGH] Jump analogy.

Always thinking about stuff.

Alright.

Here we go.

[LAUGH] Wa.

Yikes.

[LAUGH] Rehearse more.

Okay.

So part of that is the [LAUGH] Unix Philosophy, right?

And I spent like the last year really, kind of digging into the Unix Philosophy.

I really, really like it.

I think it has a lot of implications for our lives as front end developers.

This is, I'm kind of borrowing the, the

Mike Gangsars [LAUGH] not his pronunciation version of this.

This was written in 1994.

Probably before, most of us had AOL.

So this, one thing is, small is beautiful.

So, the, the idea is make your thing as small as possible.

Whether it's a CSS module, whether it's your lit,

little app that talks to the cloud or whatever.

You make it as small as possible, as small as it can be.

Small is beautiful.

Make each program do one thing well.

That's another little point.

It it, you want your little module, or your little, your little program or

your app or whatever, you want it to do one thing and one thing well.

In Unix it's kind of like this, you put a command

in, like you put in, put in, and it spits in output.

Like, input [SOUND], output, that's all it does.

Over and over and over, it just takes input and spits out output.

That's kind of the idea here, it's like, you

want your little app thing to do one thing well.

Build a prototype as soon as possible.

Man I think I've heard that this week.

But the idea [LAUGH] is like in UNIX, you just want to get

things done and see how it feels so that you can learn that lesson.

And then use software leverage To [LAUGH] your advantage.

Software leverage would be like use software to

then build and stitch these things back together.

Use software, don't let software use you [LAUGH] but like,

use software to your advantage, like try to find ways

where you're like you know, may be software could solve

my problem instead of me doing things all by myself.

And that leads us into automation, which is

the art of making robots do your bleep work.

So, we want robots to talk to our binary moisture evaporators.

We don't wanna have to do that by hand.

So, but real quick.

I'm sensing a premonition that I should dig a little

deeper into [LAUGH] things and you guys feel this coming.

Alright.

So, I wanna talk to you about automation versus autonomation.

Turn to your neighbor and say autonomation.

Okay, autonomation this is [FOREIGN] and [FOREIGN] duh.

So [LAUGH] there's a small difference, right.

So its the no right.

But if you look at the character there's this one little line here.

Right that vertical line that is not here.

That line means human.

Whoa.

So it's, it becomes automation with a human touch.

And this was all invented by Toyota in their TPS,

Toyota Production System, that they like sold to companies and it's

all this big documentation, but it's like where we get

the lean, lean, who does lean at their place of employment.

Does anybody do lean?

You'll hear these words, like, there's like combon, and like,

there's like all these terms, but it comes from this idea

that like when you make a car, you want to make

it as inexpensive as possible, or you want to like waste.

You know, as least as possible.

You wanna do it in the minimum effort necessary.

To achieve a product.

And, and, where they kind of came.

The, the difference in, like, automation and

autonomation comes down to kinda three points.

Is the, the machine shall detect malfunctions by its, and stop itself.

So you can imagine if you built a robot, and it's

like danger, danger, [NOISE], and then smashes through walls, right, [LAUGH].

That's not the ideal scenario.

The ideal scenario is where the robot goes, danger, danger,

and powers down and is just like, I quit my job.

And then a little error message shows up

and it's like, pleased to fix, or whatever.

So that's one.

No defective parts will be produced.

This is pretty important when working with cars.

Not to produce defective parts so, at, and if you

abstract this to your job, you know, defective JavaScript, that actually

is very bad because it stops all the other JavaScript from

working, and, womp, womp, you don't make any money that day.

Or whatever your production cycle is.

That's bad.

So the idea here is, we're trying to get

to a point where we're not producing defective parts.

Easy to locate the cause of any malfunction.

Again, like, you want the robot to like break

down, and tell you, my head is broken, beep beep.

You know?

You don't want, you don't want to have to, like, disassemble the robot.

The whole entire robot to find that one part that's broken.

And that's kind of where your apps are.

You know, if you've guys have, whose used SAS before?

Yeah, SAS, yeah.

Have you ever like, written the worst line of SAS ever and it like, just

spits out a white page and it tells you like, whats wrong with your code.

It's awesome, it, it like doesn't feel good, you're like I thought I was perfect.

But the, the, the, the good thing about it is, it's

telling you exactly what's wrong, exactly where it's wrong, rather than you

like in the old CSS days, and, and if you're still using

CSS that's fine; I encourage you though to switch over to pre-processor.

In the old CSS days if something goes wrong

like, you know oh, that box is not pink anymore.

What happened?

What, what, why that, you know, cuz you

left a semicolon off or something like that.

SASS will alert you to the errors.

And that just saved you a few hours of hunting

down a semicolon in a 10,000 line file of CSS.

Pretty good.

So I wanted to get some data.

So I dug up some data like at

the height of Japanese automation, or autonomation, you know.

So this is Ford versus [INAUDIBLE] and it's really hard to read.

But, the, this is in millions of cars produced, like in

America, drives more cars right, where gas guzzlers, we drive more cars.

So, we produce more cars.

But, at the time Japan, this is like kind of

right when the, the, the little sedans were coming out, like

the, the Honda's and stuff like that, this is kind

of right when they are kind of hitting the US markets.

They were producing about one-third of the

amount of cars that United States was making.

But they were doing it, and we're going to kind of zip through some things,

so they were total domestic employment, they

had 1 10th the number of people employed.

So they were doing 1 3rd of the work with 1 10th the labor force.

That's pretty extreme.

If you're a businessman, you might wanna think about that.

But here's kinda the kicker.

Like, so the total employee cost per thing for you

like a United States carton of Ford cart was like $7,000.

But, for a Japanese car it's in the like, $400 range.

So at like, you're producing things at 1 10th the cost, like time is

money, you're saving time, you're saving money,

you're saving labor force, you're saving, saving, saving.

You're doing things quicker.

So abstracting that back to your life, because

we were talking about cars, I know, I know.

But putting this back to your life, why you might wanna start automating.

Well, you like making more money with less effort.

Who likes that?

I'm pretty down with that, I like to do that.

Your company would like to reduce overhead.

Whose company would like to reduce overhead, unnecessary overhead?

Okay.

You want to spend more time with your spouse, kids, pets.

This was the kind of the emotional punch I really

wanted, you know, just like boom right in the gut man.

But who, who works from home?

Who here works from home?

I mean this for those of us working at

home, like we're not really chained to a desk.

This is actually pretty kind of true, like, like,

the quicker you can get done the more you

can like just scoot over, and play with the

kids, or hang out with your spouse or, or whatever.

Or wrestle your dog.

It might not work for you at, you know, your place

of employment, but maybe at your place of employment like that means

you get to whatever, play video games at work, or play

more ping pong at the ping pong table in the start up.

You've got all those options.

And then the last one.

At, at Paraville.

Do you watches Always Sunny, in Philadelphia?

You guys?

Anyone?

You know the term Charlie work?

[LAUGH] Charlie's the like, wild card maniac guy, and like, but

he alls, always has to clean the toilets and stuff like that.

And they, they're like, there's whole episodes about, like.

I don't want to do Charlie work, you know, so.

The whole idea is that you can get out of this

Charlie work like cleaning toilets, and piecing things together by hand.

It's pretty gnarly.

So I found this quote from Cory, DJ Cory Nolan on twitters.

Non-programmer.

I don't trust a machine to do something I can do myself.

Who, who would identify with that, and maybe kind of feel that way?

No?

No one, that's great.

Okay, and then programmer, I don't trust myself to do something the machine can't.

So that's kind of the idea is we want to get to a place where we're

like, you know what, like, why would I do it if a robot can do it?

I, I want to get out of doing robot work.

So, we're gonna talk about modern web development.

If you were here last year, I think Chris [INAUDIBLE]

gave a talk on modern web development, a really futuristic talk.

Right?

Was that it, or, yeah, maybe.

I think so.

But it was a really good talk and he kinda went

through some tools and how he builds websites and stuff like that.

And I'm not going to rehash it entirely but

I'm going to just kind of mention a few things.

I, we're kind of in a era of fetchers, task runners, and scaffolders.

And so keep that kind of in your brain and kind of

like, what is that going to be and I'll explain that later.

So first, thing and the modern web development suite.

Are apps or GUIs.

You know, like, graphical user interfaces.

You got, you got GUIs.

This is Windows.

It's really awesome.

You got code editors.

Who uses a code editor?

Everyone should.

But all code editors are great.

Anything's fine.

I'm not, like, evangelizing anything.

Except, I'm gonna evangelize Sublime text.

[LAUGH] I really encourage you to use Sublime text, for a few reasons.

This is what Sublime text looks like out of the box.

It's pretty gory.

It's, like kinda weird to be honest, but this is my sublime

text and we'll see that that's not really showing up is it?

But hey whatever, we'll see that a little bit later we'll see it.

So this is my sublime text, I really like it.

I have configured it to be mine.

And, and that's one thing that sublime text offers

that maybe you're you know, eclipse or your eclipse

does a pretty good job, but like Coda or

something like that it, doesn't really offer like this.

Kind of hyper-customization just through like configuring JavaScript JSON.

Like, this is, it's pretty awesome how this all works.

So there's like there's some keys to make it yours, I've,

I've like written a jist about this and made some rounds.

But Install package control in the sublime, it's really important,

it's, you can Google it and find out about it.

Or in that post I kind of mentioned how to do

that but you need to do that to install the other stuff.

That, then you need to make it look good.

Add a theme that you like, that feels good.

I'm using a theme called space gray, it makes me feel futuristic and nice.

Add helpful plugins.

There are infinity packaged plugins in, in sublime text.

[LAUGH] Maybe not infinity, but there's it's really like, whatever

you're into I, I call it like kind of like, whatever

fetish you have about code, like, I really like, you

know, all my semicolons to actually be you know, Japanese characters.

That's a cool interesting thing that you do, but like you could have a plug-in that

then takes all those things and like actually

makes them into semi-colons, or like for other people.

Or like [LAUGH] maybe I just invented something awesome, but there's [LAUGH]

there's, it's whatever you're into, if you're into Java,

if you're into C, or if you're into Java script.

If you're into SASS, CSS, HTML, there are plugins that help you do your job.

And just one, and I'll show an example, but like hinting and linting is

like kind of an important part, of our job we need to pay attention to.

And I'll explain that in just a bit.

And then customized settings.

There's like a lot of settings you can do that will make it feel like

you're home, like you actually own the

software and that you're not using something that.

Somebody just like designed and was like, it's

perfect, I'm giving it to you, you're lucky.

You're, you're like, I'm actually, I can like change

the font size and I feel good about that.

And and then, yeah.

Figure out quick keys is kinda the last bit and I won't even dig into this.

This is like a whole hour-long talk.

But, like, if you learn the quick keys of

your code editor, you're going so much faster then

like, manually deleting everything and it like, there are

like, it's like, you know that claw in Photoshop?

You know, the like claw for save as or whatever.

It's like if you can get that in your code editor and your like Aah!

I'm raging it's awesome and you like, can really impress your family at Christmas.

Not true.

So the linting and hinting right, this hopefully that

you can kind of see this but the, the big

thing that you're looking at is like I tried

to write some Javascript, it was not good at all.

And then it gave me a little yellow dot to say like that's not good.

Then like I forgot a bracket, and then so it gave me a red dot.

And then I forgot a semi colon man so it gave me a bunch of red dots.

Once you get like these linters, kind of working as you

save a file or whatever, it will give you visual a warning.

Hey, you messed, you're not good at code.

This is really necessary, because it actually makes your job a little

more fun, because after this it's like a kind of video game.

You just like see an outline, and you're like, I will destroy you.

And you're like, pew pew pew pew pew.

And you're trying to like make all the

outlines all go away, and the red dots disappear.

And so it's fun and profit.

Back to GUIS GITHUB.

GITHUB is a really awesome service.

If you're not using it, it's for version control.

So, you'll never have that situation where somebody, like, saves over your file,

and obliterates your, like, whole day's work, which we just kinda talked about.

Version control.

You can kinda roll back, and find out what things are going on.

So there's two Mac and Windows, and these are kind

of like Github or Git junior versions if you will.

[LAUGH] Like Nick Jr. but these are,

these are really the, the functionality is truncated,

but it's also like in a language that,

you know, that the common person can understand.

It's like, sync a branch, oh, I get that.

I'll sync it up rather than Well you get

[INAUDIBLE] get pushmaster origin, and then it works, you know?

[LAUGH] So this is, it's in a language that really helps

and if you have like, if you work with a lot of

designers and stuff like that, I work with two designers, this is

crucial to like getting us kind of into version control at large.

So the end is for Mac and Windows so that's good.

Codekit, we've kind of mentioned, but this this is

basically a tool that works to compile your SASS.

It can do compass it can like take a whole bunch of JavaScript

files and kinda mash them all together in it's own little weird way.

It can take your images and optimize them, and make them good for the internet.

Never put an un-optimized image up on

the internet, unless you know what you're doing.

There's a lot of things it does it is Mac only, so I would recommend this, Prepros,

it is uh,cross platform, and it is even, I, I think I like it better.

I like the look of it so, I, I

really am really attracted to this piece of software.

I would recommend this, it's, it does all the same

things maybe a little bit more even just cuz it's, it's.

I feel like the, the release cycle on it is a little bit better.

So that stuff for compiling your stats and

your JavaScript, and kind of doing well with that.

Hammer for Mac.

Who's familiar with Hammer?

Anyone, anyone, anyone?

Hammer helps you build whole websites.

So one thing that's lacking in HTML is an include tag.

Like, like you can't, like, you don't have,

like, a nav that you can include, right?

Like, you, wouldn't it be awesome?

[LAUGH] You don't have it, we don't have it so, like, you use PHP.

And you're like PHP include navigation.php.

That's cool but, like, it's very PHP.

This tries to keep it all HTML based and,

like, this will help you start scaffolding out projects.

They have little mix-ins or templates.

Like, you can just like, start using boilerplate.

It's pretty awesome, pretty fast, pretty amazing.

I, I think it's great.

I, it is kind of one of those things that

your whole team has to be all Mac, you know?

That could be a deal breaker.

You have to pay for the software, you know?

Like it's, it's not free.

So you have to pay for the software.

That's, you know, that's, that's something to consider when you're factoring this

in, but kind of, with anything here, it's find stuff that's for you.

Find stuff that really speeds up your deployment.

What is, what makes sense to you?

What do you like?

What can you drop in your brain, and use that.

Cactus is another one for Mac.

It's kinda Python, Jango based.

But it does the same thing.

It just, like, scaffolds out an application.

Like, you can click new, and it's, like, what do you, what new thing do you want?

And you're, like, a new responsive website.

And it's, like, [SOUND], done.

Okay, cool.

What next?

You know.

It works really, really well.

So check that out.

But that also costs money.

Mixture.io costs money.

But it's cross platform.

It's built by some really cool guys I've met personally.

And I really, I, it does great work.

And you can probably not see because the image isn't super good.

But, like, that B, that's a F for foundation.

B for bootstrap.

So you can like, start building sites really

quickly just by the click of a button.

You like, scaffold out a site.

That's what the scaffolding is.

It's like, you just build a little site.

Scaffold it out, and then you can start using it.

So, let me take a drink of water.

Talk to your neighbor.

That's all part of the thing.

Because, I'm gonna introduce you to the best tool

the world has ever met in terms of web design.

I'm launching it today.

I present to you The Command Line.

[LAUGH] [SOUND] There.

A smattering of applause.

I love it.

The command line, established in 1969.

Why would we use this thing?

Why would we use a, a thing from the 60s, to develop websites in the 2014.

It really kind of comes back to that like Unix theory, right?

It's like this is design to build one thing and do it really well.

But taking a step back, and bringing it back to our analogy, cars.

There it is.

This is the interior of a 2009 Honda Civic.

You guys are all familiar.

You've all been in one.

It's a car.

Anyone from, native Floridian here?

Anyone?

Okay, so a car is a little bit like a swamp boat with wheels, okay?

Just got to clear that up.

Alright.

It's like a fan boat that has little wheels on it.

[SOUND] Goes on roads.

[SOUND] Alright!

The, so, you can imagine this is the GUI, right?

This is the Graphical uner, User Interface to your car.

You, you see a button.

It looks, it's, there's a red thing that goes to a blue thing.

You know that's oh, that must be hot and cold, I get that!

You know there's a, there's always this,

like, guy lounging with waves hitting his face.

You're like, that's probably the fan, right?

[LAUGH] There's a speedometer, it tells you how fast

you're going so you don't have to just guess.

This actually just controls what's underneath

or inside the car, which is this.

Now, this should be obvious to everyone, right, what everything in here is.

No, just like automotive whatever design, like don't expect to understand

all of the command line instantaneously in one fell swoop, and you're like I'm a pro.

I was just dismantle my car and fix it.

Like, I don't recommend that.

So the same with the command line.

It's really like, you wanna baby step into it.

You wanna kind of learn piece by piece, what is driving what and what does what.

And, my hope is, like that by the end of this talk.

We will all be able to do some like routine maintenance to our vehicles

But this is just kind of like, I hope you guys get the analogy.

I told you I was really working hard at this car analogy.

The command line anatomy, this is, I, I wanted to

break down like what a, a command line command looks like.

A shell command looks like so so you have a tool, right?

This is the app or the program that you

wanna use, and then that tool performs a task.

You want it to do a task.

Usually, that's a verb.

You know, like install, or get or something like that, curl.

No dude total different.

Alright, then you have optional stuff.

This is usually stuff like, where it's like dash gfrxp.

You know, these all have meanings and we can find out what those meanings are.

But these are all optional thing that you are

trying to send to that program kind of just like.

You know, like when you like open

system preferences and you start clicking buttons.

That's kind of like the options that you're using.

And then, like I said earlier, every app

will usually just take input and spit out output.

And, and sometimes it's the current folder you're in, or it's a

file, or a URL, or even a git branch that you're working on.

And then it spits out output to a destination.

And sometimes that's the same exact file, you just want to kind of modify that file.

Or sometimes you push it somewhere else.

Here are some of my daily shell commands

that I use kind of on a semi-regular basis.

Like I will cd.

And cd is shorthand for change directory, and I feel like I should mention that.

Like you you're kind of like why do I have to type so much?

Right that's like a common thing I hear about this.

Well don't worry like generations of neck bearded unix dudes have

gone before you, and burrowed these tunnels deep within the system.

To make shortcuts and really see these a lot, it's, it's easier than

moving a mouse, to be honest, cuz you just never leave your keyboard.

so, like cd, and that, that squiggly thing.

That's a shortcut for your home directory.

That's, like, your user.

There's a thing called the root directory.

And that's everyone on that computer.

Or, like or the server, or your computer.

Stay out of there,' cuz you can really mess stuff up.

[LAUGH] Stay in your home dude.

Stay home and like, just try to operate from

there unless somebody tells you to do something else.

So, so cd into my dropbox and then I've have a drop

box folder in there called [UNKNOWN] I use for all my [UNKNOWN] projects.

Compass watch.

This is a, a, if you want to get compass going

on the command line, this is all you have to type.

There's maybe like some gem install things you have to do.

But, compass watch.

Oh, that's easy.

That's easier than maybe even clicking a

button that says, like, I have Compass watch.

Are you sure?

Yes.

Are you super sure?

Yes.

Okay.

This is pretty simple.

Touch index study HTML.

This we'll just touch.

It's, it's a weird one, but it, it works.

It'll like create a file called Index study HTML.

Awesome, I can start using it.

For my blog, I, I run Jekyll, Jekyll server -- auto.

Now, it's like serve or something like that.

This is an option.

So, that's an auto reload.

Option, so if I save a file it

will automatically reload the server and,uh, update things.

So that's pretty awesome.

Git push master origin, I mentioned this before,

this is how you send the master branch

the input to your destination, which is the

origin, which is a URL out in the cloud.

Up on GitHub, usually.

Npm install -g grunt-thing.

This is, I'm using NPM, which is the Node package manager.

Or maybe it's not.

But that's what they say.

I don't know.

But, okay, install, so you install a thing.

You want to install something, -g.

I'm doing that globally.

I wanna install it for everything.

Not just in the thing I'm working in.

But I want to install it for everyone.

And then grunt thing.

Like that can be, we'll get into that, but that can be kind of anything.

It's it's, you kind of do this fairly often.

You know, and you may be feeling like you don't have any idea what your doing.

That's okay.

That's totally fine, because this gets better with friends.

And this is kinda one point I wanna like,

this is not my grand finale yet, guys, calm down.

thi, like Unix is a very big community and,

and so is our web, our front end community.

So it's my dream to just like sit around and share

Unix tips with each other and like, hey, how'd you do that?

Oh, I used the Command line.

Show me!

Yeah!

Thanks best friend.

We can really like, it's better when your like talking with people.

Or like hey how can I do this?

And somebodies like oh, here's my configuration file.

And you just copy and paste it in and it like works.

It's pretty awesome.

Never underestimate the communal aspect of coding.

So when we're talking about front-end command line stuff there's like three big

things that you should be aware of, or have kind of working knowledge of.

Again, like the kind of ability to check your car's oil.

There's Bower, there's Grunt, and there's Yeoman,

which is a fetcher, a task-runner and a scaffolder.

And these are all built on node JS, and I'm sure like I just hit

you with like four huge buzz words, and you're just like I don't even care.

You're a [UNKNOWN] you idiot.

And so I get it, I get it.

This is a lot of like buzzwords.

But the reason why it's important, why like

node is important, is because node is JavaScript.

It's written in JavaScript.

Which is kind of the language that we should all be using.

It's, it's kind of like PHP, or Ruby, but in JavaScript.

And that, we can talk later if you don't understand that

[LAUGH] but the idea here is like stay within your real house.

Like, try, like you know, HTML, CSS and Javascript, that's on

every single computer in the whole wide world, this is pretty

awesome that we can use this now from the command line,

as a server and like start hosting files or running programs.

Pretty amazing that it's all in our wheelhouse and it's

super powerful and it's it's really getting the job done.

It's not just like a fashion so when you're

choosing tools like, try to choose these these node-based ones.

And, so yeah, file fetcher this is bower, and, and there are lots of file fetchers.

Like, there's all different kinds and they've like

extend back to the history of time, right?

Like, there's bower, there's nmp I mentioned

earlier, gem if you use ruby, like,

er bundle, you know, like, or bun, gem install something, yum, that's the thing.

What these dudes do is, they, like, go out to the cloud, grab

a file, and all it's dependencies, and spit it back in to your project.

Which is pretty awesome, because in this example, I

want to install fitvids, a plugin I wrote myself.

So I have access to it, I could, I know where it is on GitHub.

I'm very smart.

But if I just type this, it will install jQuery and fitvids.

So jQuery is the dependency of fitvids.

So I installed both.

It just saved me two trips, like two super annoying trips I

do like on a daily basis, which is like I go to

get hub, I find the thing, I click the raw button cuz

I want the raw file, and then I copy and paste that file.

And then I go back to my code editor and I say new file.

And I paste all that in, and I'm like, did it work?

Maybe.

Okay, now I got to go find jQuery, and then I like find that weird

Google Ajax URL, and I like copy and paste that whole big file of jQuery.

It's like, 90,000 lines of code.

And I just paste it into my code editor.

This will just like, automate that.

It's, it's basically, the icon is super clever.

It's a little bird where you're just like, go get things.

And its like, I got them!

Doo-doo-doo-doo-doo.

Done.

And then it will, the kind of like bonus thing it

does, is it starts giving you like, a structure to your code.

Everything's stored in a Bower Components folder which is pretty awesome.

Because now, like, now it's not you coming

up with this clever naming system about folders.

You're like oh, I'm gonna call this one lib jQuery dependencies, URLs.

Blah, blah, blah, some dumb thing.

This is all putting it in to a really organized structure.

yeah.

Task runner.

So Grunt is a task runner, just like many task runners before it.

rake, for rails, cake for if you use cake PHP ever.

Make, and then gulp.

Gulp's a new guy on campus.

I'll kind of explain that, but what it does

is it runs mundane tasks over and over and over.

It doesn't care its just like, okay I'll do it boss, okay I'll do it boss.

Okay, yeah, he doesn't care and he can do

like simple things like you know hey change that weird

Japanese character I made and put it, make it

a semicolon again because that was my cool idea, right?

You guys tracking?

I've got to, got to stick with the analogies, guys.

like, you can do mundane tasks like that, or it

can do like complicated tasks like start building your whole website.

Like, minifying your Javascript.

Crushing it all down into one file, replacing things in the footer.

And they can start doing all this kind

of complicated build stuff that you weren't really, like.

You're like, awe, I would have had to do

that by hand or guess or something like that.

It can kind of do all of this stuff by itself.

Common tasks are usually verbs.

This is grunt build.

Build your website for deployment.

Like you could even have the build task,

deploy your website to the cloud in seconds.

Grunt watch, this is like if you just

wanna watch files, like I kinda explained on mine.

I had the auto-reload on my blog.

This will watch files for changes and update them as

they're changing and like, just kind of push it out.

And you could even have like a, a, a what

like a live reload kind of thing hooked into the watch.

Grunt test?

I don't know if, if a lot of us do this.

We probably all should be doing it more by putting

unit tests in stuff up features, functional tests for our JavaScript.

Inside something, so every time you build or, or, every time you're like about

to push the cloud, it actually runs some tests and is like, whoa, whoa, whoa.

Actually, you're, none, none of this Javascript works.

Like, that would be really good to know before you

send it to the cloud, and lose your company money.

Grunt serve, you can actually make Grunt become a server, and

then it maybe'll start doing the watching and stuff like that.

This is pretty cool stuff so I want to talk about Gulp.

Gulp's new thing that came out as I was planning this talk.

A little shifty, and everyone's like, and now it's the new cool kid in town, right?

And we are an industry of trends.

Everything becomes cool and we're like god that's so cool.

Gulp is the same thing.

It just is a little different.

If we have time, do we have time?

Maybe?

Okay sure.

If we have time, I'll talk about it.

But, it's basically like you're writing an app, yourself.

Rather than configuring Grunt to do things.

There's a little distinction.

But instead of configuration, you're kind of getting more metal.

[SOUND] And like you're, you're kind of building the app.

And then Yeoman is a robo-butler.

It's pretty amazing.

You can generate prototypes and scaffolds in seconds, you just type yo something or.

It's similar to like rails generate, if you guys have used Rails.

Or Cake Bake if you use CakePHP.

Pretty powerful things.

You just like type something, and it will just build that thing you told it to type.

It'll go out and build it and find all the dependencies.

It'll download Grunt and Bower.

It'll install those.

It'll get you all set up.

It's pretty awesome.

Here's how you would try to start a web app.

Npm install -g generator-webapp.

You're installing a generator.

And then you're, like, yo, web app.

And then it's, like, hello, pip pip, here we go.

Gonna build a web app.

[SOUND], Done.

So I'm gonna do a demo.

Of this exact functionality on hotel internet.

So are you ready, world?

[NOISE] Alright.

Here we go.

You guys did not know what you're getting into today.

I will.

Doop, doop, doo.

Oh, is that showing over here?

Let me do this.

Where are you?

Alright, so this is live demos, right?

These are notoriously terrible.

So, if you guys will rock with me.

So here's a web browser, right?

At like 800 x 600.

So [LAUGH].

Here's some things I installed, you can delete, we're not worried about that.

Alright.

Can everyone see this?

Is everyone good?

Here, let's check; I'm gonna do some things here.

So, I'm gonna like, just ping.

daverupert.com, that's my blog.

I'm just gonna see how my WIFI's doing.

No drops.

Feeling pretty good.

If you could stop watching Netflix right now though it would be really sweet.

[LAUGH].

Here we go.

So, I'm gonna CD into that folder I talked about.

I, I and it's D dude what was it?

DRO crud.

aw, I just hit tab, and it auto completed.

Because I made this thing mine, this my terminal.

Did you see what I just did?

I just made my life 100% better, because I can just like auto complete words.

Now what was that other one?

It was D e, oh, man, tab!

Boom, I even messed up, it's capital D not lowercase d and there we go.

Alright, so I'm going to cd into here.

Here I am and I'm going to do this thing, I'm gonna

make [INAUDIBLE] dir, I'm going to make a directory called in control.

Right?

I'm going to make it, and then I want to

cd to in oh, shoot, what was it called, again.

Tab, done, awesome.

I am now in incontrol, me and my Dev thing.

Alright, so you guys see where that is, alright.

So then, well it's npm install -g generator web app, alright.

And so and I've already gone through

it and installed [UNKNOWN] and stuff like that.

Like I just want to make sure that, that it's all good, and it's not.

I didn't want to fail super hard so as you can see, MPM install is a fetcher right?

So it just went out and fetched all these files and installed them for me.

And all these things like let's, let's just guess.

I don't even know what these things do.

There's probably viruses [LAUGH].

No [LAUGH] No that's the beauty of open sources.

There probably shouldn't be any viruses cuz it's all out in the open.

But you know, like fstream.

Oh, that's a little stream that like catches

streams, and then parses things and does things.

I don't know how to write that.

So it's really awesome somebody does, and I didn't have to

go find that because I don't know how to do that.

So, there we go and I installed the generator, and

then I just do, yo, shoot, what was, it was

yo, and then I don't know what I'm doing, so

I'm gonna ask for help and see if that does anything.

Hah, dude.

That was very helpful dash ageful if you will.

Okay.

So, I see webapp, okay, so I'm just gonna do, yo webapp.

Here we go.

Oh, man.

And there's a dude, and he's asking me, do I wanna make a webapp and I'm like, yeah.

I wanna make money.

And then, so I can like drive around and like

turn these off, but I'm just gonna roll with him.

I'm just gonna be like, yeah, give me everything.

Now it's fetching more files, right?

It's, you see Bauer, maybe you saw Bauer

scroll by if you're like, whatever, the speed reader.

[LAUGH] It's getting all these files.

This is pretty intense right?

So it's generating a web app as we speak.

From the cloud, it's pulling everything down.

Boo, boo ,boo, I'm going to get some coffee.

And then, you know, because your boss he was like, dude

I need the web app by the end of the day.

And you're like man how am I going to build

a whole web app by the end of the day?

Well, I'll just sit around, just, you know, get a, get a coffee.

Oh, but it turns white.

That's pretty good, and that, so it's downloading things.

[SOUND] Done.

Alright, it's done.

So let's do let's, so I know sublime and then I'm just gonna hit

a dot, cuz that means this current

directory, and I'm opening this up in Sublime.

So this is my Sublime, hopefully that's a

little more readable, how about you guys over there?

Alright, you guys are okay.

So this is Sublime, and this is why it's cool.

There's a lot of things going on, and I'm

gonna kind of walk through this grunt file and kinda

show you what's going on, but all of our

code for the web app now lives in App, right?

So you see Bauer Components, that's like what

the Yeoman used Bower to go get things.

There's images in there.

There's scripts.

There's styles and, and styles probably has, let's see, let's see.

Oh, it's got S-A-S-S, it's got Sass in there.

That's pretty sweet.

So, and then there's an index file with a bunch of stuff.

That, that should be our webapp I guess.

But let's, so let's just see what's going on, right?

So I can do, I can do Grant geez, I don't know what's going on.

So let me get some help, right?

So, the, the type is too big, so let's scroll up just a little bit.

So these are tasks that Grant can do, right?

So, all around.

What?

What's going on?

I said, sir.

I talked about that one in my talk, so I'm gonna use that one.

so, I'm gonna use grunt serve, and are you guys ready?

No one blink.

Everyone take a blink right now.

And then, we're gonna start serving this

[LAUGH] and we're gonna just see what happens.

So, it took two seconds, or for syn-total, seven seconds.

Holy.

Moly.

Without even offering or going to the cloud to download something manually,

I've just generated a whole boot strap website that is, like, responsive.

Whoa.

Now my boss is like super impressed.

Pretty cool, but not cool enough for Florida right?

So [LAUGH] why do I say these things?

Alright so I'm going to do the CD drive bugs

dev in control, and then I'm just gonna I'm gonna, gonna

do open because I want to oh, wait open.I'm gonna

open that in Finder, cuz I don't know what's going on.

So I'm just gonna open this in Finder.

Let's see here.

So I'll go into App, right.

And then I'll go into Images, and then I'm.

Okay, so I'm I wanna get a new one.

You know, I wanna go with my desktop, cuz I had a cool thing on my desktop.

I had a albino water alligator here.

So, just gonna go old Me.

And I messed up.

Okay, here we go.

So, live demos alright, here we go.

And then, for the sake of life, I'm gonna

call this alligator, cuz I don't wanna type it.

Or just gator.

Let's, let's shorten it, be efficient.

This is called optimization.

[LAUGH]

Tim's gonna talk about performance tomorrow.

And then, basically, that was his whole talk.

And so, alright.

[LAUGH] So, in control Orlando.

I wanna call it Orlando, right?

And so I'm gonna save it.

And then, like, let's go over here.

[INAUDIBLE].

Hey buddy, don't sell me out like this.

It [INAUDIBLE] What oh, that was the title,

okay, I was looking in the wrong place.

[LAUGH] So, let's do text muted, in control Orlando,

[INAUDIBLE] and then O My gosh, it just library loaded.

Library load is not a new thing.

But, it's pretty cool that it's just doing this automatically from the

thing, right, so so go back to our editor right, this is pretty

painful but we need a cooler title because this is not g- Allo

'allo that's not how we say it in Florida we say gator, right?

And, so then it says gator, right?

And then, so then we need to go into

the main, right, SCSS, we wanna do some CSS stuff.

I happen to know because I planned ahead that this thing's called jumbotron.

Right?

So I wanna do a background, of, let's see, I'll just call it, Image it or url right?

Images [NOISE] gator dot jpg oh man lets

see no repeat and then I'm going to do background size which Chris talked about.

I'm going to do this cover option its pretty sweet.

Come back here.

Something's messed up.

[LAUGH] Oh, David, you should have planned ahead here.

So we'll try that.

We'll just see if that works.

Whoa!

Dave, that's so cool!

Now you have a web app that's totally

working and no one can say anything about it.

So

we'll just make an f f f in there.

So, there we go.

So, in the background, it went through and it compiled all my sass.

So, here you go.

It said compass [UNKNOWN] server.

It took 1.3 seconds to run compass.

And then it ran auto prefixer which is a thing that, if

you guys have ever like we, we all write like, we write dash

webkit or dash pizza and then turns out last month, yesterday dot

webkit, dot pizza or dash webkit, dash pizza went totally under the water.

Like they un-prefixed it and so you're like, oh,

I'm going to have to update all my CSS.

Auto prefixer is like, is part of the build process.

And it'll figure out, it knows which ones you can un prefix.

So.

And it'll prefix things you didn't prefix, which is pretty awesome.

So that's kind of what it does.

So, we're going to take a little tour, is everyone okay?

Everyone okay?

How am I on time.

What

five six minutes stall.

Okay I'm just kidding guys.

I planned, I plan things.

Alright here we go.

So this is the grunt file.

This is the kind of like what is controlling grunt.

This is the configuration that is running grunt.

Over and over and over so so you load some tasks and this was all made up.

I didn't have to write this by hand.

This would be awful to write by hand.

So this is, now is generated for me.

I can probably copy and paste this and put in every project and it will work.

Maybe to some degree it might kinda bark at

me but yeah, it, it will work pretty okay but.

So we got Yeoman.

He's a thing, right?

Watch.

That was a task that does a watch.

Js files for changes and then it'll live reload them.

That's cool.

It'll test on changes.

It'll check out the grunt file, right it will do something there.

Compass it will watch for compass changes that we're doing that right.

Styles it'll update our CSS file and auto-prefix it.

Live reload Yeah okay, it'll live reload.

Essentially, we've created with this like, little

configuration file that I've just sort of read

through in two seconds, we've created a

code kit competitor right there on our machine.

That is extendible.

And the kind of thing about like, like

GUIs and stuff like that, those are awesome.

You should use them.

Like get used to that.

But the second, like,it, the, the, the, the, app, the like,

dot app, falls behind and, and isn't updating, you kind of start to feel that.

Like, like, singularity or whatever, like,

that currently can't run in code [INAUDIBLE].

So you're like, well what would I have to do?

Well, you have to go to the Command

line and use the latest, freshest, newest stuff.

So this is kinda where like you're job could get

better if you start learning a little bit about this.

But it's pretty cool that we just made an App that is a complete competitor to

something you'd have to pay a whole bunch of money for, or well, like 20 bucks for.

But this is totally free and you can give it to your whole company for free.

So that's pretty awesome.

That image of an alligator was maybe cost us money.

I don't know.

That's not how you build websites don't just steal for the internet.

So [LAUGH] alright connect this like creates this server with livereload.

Right?

It's kinda like manages connections to your application, lets not worry

about it, clean, this are clean things, I love clean things,

it will like, just basically kill our, our distribution thing, and

then it like make a whole new distribution thing, a pretty awesome.

Js hint kind of like with that code

thing, that code example where I wrote that really

terrible java script, it will show us, Like, it

will bark at us if our JavaScript isn't passing.

Mocha is a JavaScript test framework, let's not worry about it.

Compass is pretty awesome.

We've talked about it, but, it like has all your things for

like generated images path, and stuff like that, so that's pretty sweet.

And then it's got some more stuff.

Keep going, out of prefixes, we talked about that balance so blah blah blah.

Use min.

This is where it gets awesome, cuz this is kind of Mr. Tim stuff.

So use min and image min, image min is probably the, use min means like it's

gonna start, it's gonna inject and use the minified file in your distribution.

And image men means that it will take all

your files in your images directory and smoosh them down.

So, this is kind of super live, but let's

see...I'm going to stop our server for one second.

I'm going to just type grunt image men and just see what happens.

Do, do, do.

So, it crushed my gator image automatically.

And I could add that to that watch task so that every time i

dropped a gator image into my app it it would crush through the image.

But instantly just saved 3.78 kb without, like

I typed two words, that was super hard.

But, like, I didn't have to like find a setting in some app or whatever.

I guess I did I had to scroll through the thing.

I can just try, type grunt imagemin once it's set up

and I'm automatically saving files and getting things to my client faster.

So I could keep going.

I, it's sorta of like depends on where you want me to go.

But I guess right now I'll open it up for questions.

Does anyone have any questions because I've kind

of dropped some super knowledge bombs on you.

>> Does it take any special recreations to get this started, like configuring

your local server?

>> So the big thing, like the big.

The, the big hurdle to in, getting started, are you on Mac or PC or?

PC.

The big hurdle to getting started is just installing it, like, installing Node.

And the thing about Node is it's cross browser, like Windows, Microsoft has put a

lot of money and effort into The nerd

community, so it's pretty, they are like involved.

But I think there is like a thing on like,

oh, shoot, web platform, do you know what it's called?

Web platform installer?

I think there is a thing, a button, on

the web platform installer where you are just like

no, and it is (noise) done so Really all you need to, to do all the rest of this?

>> Yeah, just to kinda get started.

And then, so you're gonna have to install Yeoman,

which is npm install-g yo, and it'll start installing yeoman.

If you wanna get into image stuff, like, there, there's maybe

some like, dependancies, but they're, they've usually all been worked out.

It's, it's stuff like image magic or, or You know,

these kind of low-level C binaries that have just accesses, so.

Yeah, I mean, try, does anyone, anyone on Windows have a node environment set up?

Is it how, how hard?

Yeah.

He said, it's like running an installer, it's really easy, so.

Again, coding with friends?

Let's hook up, guys.

>> Take a look at Choco-lugly?

Choco-lotly?

>> Chocolately?

>> Yeah, that's like MPM for Windows.

>> Oh, okay.

Chocolately, MPM for Windows.

There you go.

>> [INAUDIBLE] just like he did [CROSSTALK]

>> Oh, so it just does it all for you?

[CROSSTALK] [INAUDIBLE] >> Sweet.

Cuz the shell in Windows is a little bit

different than the shell in, on Macs and Unix machines.

But it's, it's like only gonna be about 10% different, I would say.

Like for most of them that we do on the front end.

Any other.

For Macs, like, there's a thing called BRU.

Or that you can install and BRU does these heavy-lifting installs.

Like, it can install your PHP and stuff like that.

But BRU install node.

Whoop, it's done.

And then you're just, now you're running, basically.

And you can start building a website, so.

Yes, question.

>> Right now you [INAUDIBLE] [INAUDIBLE]

>> And it's running?

>> [INAUDIBLE] >> It's I mean,

in theory you could code a grunt file that triggers other grunt files or whatever.

That's pretty extreme.

[LAUGH] I wouldn't recommend it.

I would maybe recommend just working on one task at a time.

If possible.

[LAUGH] Generally, like closing some drawers and opening others is, is helpful.

But Yeah I mean it, it might not work for

you just in that sense,and stick to what you're comfortable with.

But if you're like dude this project is gonna be six

months long and I'm like gonna do this everyday of my life.

Like spend, spend an afternoon or a whole day getting a grunt file

set up and just use that, like try just for a whole project, so.

I mean I've, yeah I've done that and like, I'm in the situation where like

my co-workers would rather just use the GUIs,

rather than using grunt and stuff like that.

So it's like, it, it gets a little weird, cuz it's like they

mi, like one, mess with some javascript and didn't compile and send out.

And so I'm like well you have to use the command line now,

but But the whole idea is like, like, just use what you're comfortable with.

If, if you just wanna do the Sass portion, you could also just

do the Sass stuff with CodeKit and then use Grunt for everything else, so.

Cool.

>> Awesome.

That's Ron [UNKNOWN].

That's awesome.