Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
Automating Your Tools
62:16 with Dave RupertThe front end web designer and developer tool chain has become more and more sophisticated over recent years. It's not easy to keep up especially if you have a fear of the command line. We'll take a look at just some of the things in the modern web toolbox covering things like the command line, Git, Grunt, and more.
-
0:00
[MUSIC]
-
0:06
okay.
-
0:06
So about one hour car analogies.
-
0:08
When I was making this talk, I was like, automate, auto, boom.
-
0:13
We got a theme.
-
0:14
So, moving along.
-
0:16
Alright, I work at Paravel, we're a three man team based out of Austin, Texas we've
-
0:21
built some websites in the past I work that's a really good image isn't it.
-
0:27
I work with Trenton Walton and Reagan Ray two
-
0:28
of my best friends, and no we are not hiring.
-
0:32
We have been together about seven years, which is about 9,000 years in web time.
-
0:37
So, it's pretty good and we kind of know what each other is thinking.
-
0:41
It's a pretty awesome working relationship.
-
0:44
I co-host the Shop Talk Show with Chris Coyer, of CSS Tricks.
-
0:49
It's a podcast about sound effects, that also talks about web design.
-
0:54
So if you like fart sounds and web design, this is the podcast for you.
-
1:00
Get in on the ground level.
-
1:01
It's skyrocketing.
-
1:03
We're up for a net award, vote for us.
-
1:05
Bing!
-
1:05
Alright, so I was a host of pod-, or co-host podcast with I think
-
1:09
it's like six of my friends in Austin, Texas called the ATX Web Show.
-
1:13
It's a podcast all about the Austin web design and development scene.
-
1:17
I think it's like, passionate to go local and like talk
-
1:20
about what your town is doing, so I really like that.
-
1:23
I encourage you to start one of your own in your town.
-
1:25
But, yeah, it's pretty cool if you're interested in Austin.
-
1:29
I would, I can talk to you about it.
-
1:31
I am an Ambassador, officially, no.
-
1:34
And then, I wanted to tell you, I have a
-
1:36
Bachelor's of Arts in Japanology, Asian cultures and languages, Japanese.
-
1:40
So just in case you're like, I wanna ask this dude
-
1:43
some really complicated code question, remember I majored in anime, so.
-
1:49
[LAUGH] And that, this will, this
-
1:51
[INAUDIBLE] you;re like this was really miscellaneous.
-
1:54
But no, this fact is gonna come back into play.
-
1:57
[LAUGH] So table of contents, here we go.
-
2:02
So we're gonna talk about web stuff, right?
-
2:05
We're gonna talk about stuff, cuz this is a
-
2:07
car talk, we're gonna talk about the command line stuff.
-
2:11
And I know everyone just like that's awful and then I'm gonna use my
-
2:16
computer, and I will fail at a live demonstration right before your very eye.
-
2:22
It'll be the most painful thing you'll watch, and
-
2:25
the whole two days that you're here, it would be
-
2:27
me, struggling to use the computer in front of your
-
2:30
very face, and then I'm going to be like, what?
-
2:32
Alright.
-
2:33
[LAUGH] Alright.
-
2:37
So, this is a saying, I hear.
-
2:40
Quite often.
-
2:41
On the shop talk show.
-
2:42
Or on everything.
-
2:43
Or, like, get people who call in, write in.
-
2:46
And, and it's just saying, you know, web design being too complicated.
-
2:50
There's all this stuff.
-
2:51
What do I need to learn?
-
2:52
You know?
-
2:52
I, you know, what is this, you know?
-
2:54
And whenever I hear this, I'm a little bit like.
-
2:57
You know?
-
2:58
I think about, like, drunk uncle, where he's,
-
3:00
just, like, is this organ, Wifi organic, or whatever.
-
3:05
Text me on my Blackberry, whatever, okay?
-
3:07
So, there, there is though, like, to your credit, who just asked that question.
-
3:12
There are a lot of tools.
-
3:13
There's a, every, you know, every day, every week, something comes out.
-
3:17
In fact, as I was planning this talk, a big change happened.
-
3:20
And I was, like, whoa.
-
3:22
We need to change, add a slide.
-
3:24
So, [LAUGH] There's a lot of stuff.
-
3:27
So and, and, you need to like keep on top of it, but you don't at the same time.
-
3:33
Like you just be kind of aware.
-
3:35
Like that's why you're here.
-
3:36
I'm gonna teach you some things, but hopefully, but then it's your job to kinda
-
3:41
go out and just kinda be aware, but don't like, you know, buy the farm, as they say.
-
3:46
Just, is that a euphemism for death?
-
3:49
[LAUGH] I'm not sure.
-
3:51
Alright.
-
3:53
Mental note, work on euphemisms, or whatever.
-
3:55
[LAUGH] So, we need to ask ourselves, this is the great prophet.
-
4:01
He was, you know, he rightly said.
-
4:04
That the rent is in fact too damn high.
-
4:06
And that's kind of how I feel about our industry in general, is
-
4:09
like, man everything's coming out, and the rent is too damn high, you know?
-
4:14
And so, the big question is why?
-
4:15
Why is it high?
-
4:16
Why, why, why do we have all of this stuff?
-
4:19
Why is my life so hard.
-
4:21
Well, truth be told you make webpages so like, chill out but [laughs] right?
-
4:28
Like, like we're not digging ditches, you know, like or laying concrete, we're
-
4:33
like making webpages so we should probably all chill out a little bit.
-
4:36
But, our jobs are a little complicated.
-
4:40
So here we go.
-
4:42
Here's the skills of web publishing and, and this is kind of where you know,
-
4:46
I kind of, how I see the web kind of converging and stuff like that.
-
4:51
We're all in the business of web publishing.
-
4:53
We publish things to the internet, right, whether it's an e-commerce thing,
-
4:57
you published a t-shirt to the website or a blog post or whatever.
-
5:01
You, we're all publishing things to the web.
-
5:04
And I think that's kinda the first thing, is we need to identify
-
5:07
ourselves as publishers and, and we're kind
-
5:09
of publishing things, making things, broadcasting things.
-
5:13
So I've kinda seen it like how it's growing.
-
5:16
It's kind of coming from two angles.
-
5:18
And there's, the one angle is designers.
-
5:19
Who's here as a designer?
-
5:21
Who would identify themselves as a designer?
-
5:23
Alright, and who here would just like identify themselves as a developer?
-
5:27
Okay a couple few who would be a design [UNKNOWN]?
-
5:31
Yeah not a word lower, your hand, I'm just kidding [LAUGH].
-
5:37
man.
-
5:38
Alright so this is kind of where actually I think we are.
-
5:43
You know, this design [INAUDIBLE] thing is the front
-
5:46
end, is kind of the convergence of these two disciplines.
-
5:49
You know, we have all, the designers who are like I'm making,
-
5:52
I'm publishing, so I want this poster to be on the web.
-
5:54
And then the developer who's like, well I want
-
5:57
it to be dynamic and PHP and, [LAUGH] you know.
-
5:59
And then, you know, and then there's us on the front end, who have
-
6:02
to kind of piece these things together and like be a little design savvy.
-
6:06
Being a little developer savvy that's kinda the generalist thing, but we're
-
6:10
just kinda put in this position in the web publishing side of things.
-
6:14
So, I think it's really important to start respecting the front
-
6:17
end as it's own separate discipline that does it's own separate
-
6:20
thing, so that you can get a better job title, tell
-
6:23
you boss about that, get a raise, you know how that works.
-
6:25
So, this is why it's getting harder.
-
6:31
Complexity.
-
6:31
So we've got all these, this is from Brad Frost, I stole his slide.
-
6:34
So, so we have these, these devices, right.
-
6:39
Responsive web design.
-
6:40
We have to like, basically make the web site work on anything ever.
-
6:44
That's a pretty big challenge.
-
6:46
And we, we, we have lots to think about,
-
6:49
lots of variables, android, blah [LAUGH] like there's a
-
6:55
lot of different things that can make us go
-
6:56
crazy, but we have all these, these, these complex things.
-
6:59
So we've started, you know, coming up with
-
7:02
ways to like deal with all this complexity.
-
7:04
You have preprocessors, we just heard all about Sass.
-
7:09
So you have preprocessors that are breaking
-
7:11
apart your CSS files into smaller modules.
-
7:14
Smaller little things that you can work on, and at the end you just like,
-
7:19
run code kit or whatever you run the command line and you like [SOUND] piece
-
7:25
it all together and like spit out a pretty sweet CSS file.
-
7:31
So that that's just kind of and these are this is a
-
7:33
fact, these are the only four things you need on a website.
-
7:37
So we'll move on.
-
7:39
[LAUGH] atomization.
-
7:43
Oh man Mr. Brad is going to talk to
-
7:45
us about that and tomorrow, and we're atomizing our websites.
-
7:52
I'll take a drink.
-
7:54
We're splitting our website into smaller, smaller chunks.
-
7:57
And if you're not doing this already, that's okay.
-
8:00
But I really encourage you to do this.
-
8:02
When we're making the web, Microsoft website, for, parallel, my
-
8:06
company we team up with Microsoft to make this website.
-
8:09
One of the biggest things we did, we like launched this prototype.
-
8:12
It was just, like, just code.
-
8:15
And then we, like, went through, and we
-
8:16
made sure each one of these little things was
-
8:18
a component that could live on its own,
-
8:21
and be styled infinitely by whoever down the line.
-
8:24
So we spent a lot of time kind of like, breaking
-
8:27
this thing apart and figuring out what what is each atom?
-
8:30
What is each little core component that we're doing?
-
8:33
So the thing about that though is, if you're going to like
-
8:36
split your website into like a hundred different components or ten or 15.
-
8:40
Or if you're just just going to obliterate it, and turn it into atoms don't
-
8:45
recommend that cuz like that's very big energy release and like Webble cities.
-
8:51
But, [LAUGH].
-
8:52
You
-
8:54
guys with me?
-
8:55
Alright.
-
8:55
[LAUGH] Jump analogy.
-
8:57
Always thinking about stuff.
-
8:59
Alright.
-
8:59
Here we go.
-
8:59
[LAUGH] Wa.
-
9:01
Yikes.
-
9:02
[LAUGH] Rehearse more.
-
9:05
Okay.
-
9:08
So part of that is the [LAUGH] Unix Philosophy, right?
-
9:11
And I spent like the last year really, kind of digging into the Unix Philosophy.
-
9:15
I really, really like it.
-
9:16
I think it has a lot of implications for our lives as front end developers.
-
9:22
This is, I'm kind of borrowing the, the
-
9:24
Mike Gangsars [LAUGH] not his pronunciation version of this.
-
9:29
This was written in 1994.
-
9:31
Probably before, most of us had AOL.
-
9:35
So this, one thing is, small is beautiful.
-
9:39
So, the, the idea is make your thing as small as possible.
-
9:42
Whether it's a CSS module, whether it's your lit,
-
9:45
little app that talks to the cloud or whatever.
-
9:48
You make it as small as possible, as small as it can be.
-
9:51
Small is beautiful.
-
9:53
Make each program do one thing well.
-
9:55
That's another little point.
-
9:56
It it, you want your little module, or your little, your little program or
-
10:02
your app or whatever, you want it to do one thing and one thing well.
-
10:05
In Unix it's kind of like this, you put a command
-
10:09
in, like you put in, put in, and it spits in output.
-
10:12
Like, input [SOUND], output, that's all it does.
-
10:16
Over and over and over, it just takes input and spits out output.
-
10:19
That's kind of the idea here, it's like, you
-
10:21
want your little app thing to do one thing well.
-
10:24
Build a prototype as soon as possible.
-
10:26
Man I think I've heard that this week.
-
10:28
But the idea [LAUGH] is like in UNIX, you just want to get
-
10:33
things done and see how it feels so that you can learn that lesson.
-
10:37
And then use software leverage To [LAUGH] your advantage.
-
10:43
Software leverage would be like use software to
-
10:47
then build and stitch these things back together.
-
10:49
Use software, don't let software use you [LAUGH] but like,
-
10:54
use software to your advantage, like try to find ways
-
10:58
where you're like you know, may be software could solve
-
11:00
my problem instead of me doing things all by myself.
-
11:03
And that leads us into automation, which is
-
11:07
the art of making robots do your bleep work.
-
11:11
So, we want robots to talk to our binary moisture evaporators.
-
11:17
We don't wanna have to do that by hand.
-
11:20
So, but real quick.
-
11:23
I'm sensing a premonition that I should dig a little
-
11:26
deeper into [LAUGH] things and you guys feel this coming.
-
11:30
Alright.
-
11:31
So, I wanna talk to you about automation versus autonomation.
-
11:37
Turn to your neighbor and say autonomation.
-
11:40
Okay, autonomation this is [FOREIGN] and [FOREIGN] duh.
-
11:49
So [LAUGH] there's a small difference, right.
-
11:54
So its the no right.
-
11:56
But if you look at the character there's this one little line here.
-
12:00
Right that vertical line that is not here.
-
12:03
That line means human.
-
12:05
Whoa.
-
12:06
So it's, it becomes automation with a human touch.
-
12:12
And this was all invented by Toyota in their TPS,
-
12:16
Toyota Production System, that they like sold to companies and it's
-
12:19
all this big documentation, but it's like where we get
-
12:22
the lean, lean, who does lean at their place of employment.
-
12:27
Does anybody do lean?
-
12:30
You'll hear these words, like, there's like combon, and like,
-
12:33
there's like all these terms, but it comes from this idea
-
12:37
that like when you make a car, you want to make
-
12:40
it as inexpensive as possible, or you want to like waste.
-
12:44
You know, as least as possible.
-
12:46
You wanna do it in the minimum effort necessary.
-
12:50
To achieve a product.
-
12:51
And, and, where they kind of came.
-
12:55
The, the difference in, like, automation and
-
12:56
autonomation comes down to kinda three points.
-
12:59
Is the, the machine shall detect malfunctions by its, and stop itself.
-
13:04
So you can imagine if you built a robot, and it's
-
13:07
like danger, danger, [NOISE], and then smashes through walls, right, [LAUGH].
-
13:11
That's not the ideal scenario.
-
13:13
The ideal scenario is where the robot goes, danger, danger,
-
13:16
and powers down and is just like, I quit my job.
-
13:18
And then a little error message shows up
-
13:19
and it's like, pleased to fix, or whatever.
-
13:22
So that's one.
-
13:23
No defective parts will be produced.
-
13:26
This is pretty important when working with cars.
-
13:29
Not to produce defective parts so, at, and if you
-
13:33
abstract this to your job, you know, defective JavaScript, that actually
-
13:37
is very bad because it stops all the other JavaScript from
-
13:40
working, and, womp, womp, you don't make any money that day.
-
13:44
Or whatever your production cycle is.
-
13:47
That's bad.
-
13:48
So the idea here is, we're trying to get
-
13:50
to a point where we're not producing defective parts.
-
13:54
Easy to locate the cause of any malfunction.
-
13:57
Again, like, you want the robot to like break
-
13:59
down, and tell you, my head is broken, beep beep.
-
14:03
You know?
-
14:04
You don't want, you don't want to have to, like, disassemble the robot.
-
14:07
The whole entire robot to find that one part that's broken.
-
14:11
And that's kind of where your apps are.
-
14:13
You know, if you've guys have, whose used SAS before?
-
14:16
Yeah, SAS, yeah.
-
14:17
Have you ever like, written the worst line of SAS ever and it like, just
-
14:22
spits out a white page and it tells you like, whats wrong with your code.
-
14:25
It's awesome, it, it like doesn't feel good, you're like I thought I was perfect.
-
14:30
But the, the, the, the good thing about it is, it's
-
14:33
telling you exactly what's wrong, exactly where it's wrong, rather than you
-
14:37
like in the old CSS days, and, and if you're still using
-
14:40
CSS that's fine; I encourage you though to switch over to pre-processor.
-
14:44
In the old CSS days if something goes wrong
-
14:46
like, you know oh, that box is not pink anymore.
-
14:50
What happened?
-
14:51
What, what, why that, you know, cuz you
-
14:52
left a semicolon off or something like that.
-
14:55
SASS will alert you to the errors.
-
14:57
And that just saved you a few hours of hunting
-
15:00
down a semicolon in a 10,000 line file of CSS.
-
15:04
Pretty good.
-
15:06
So I wanted to get some data.
-
15:08
So I dug up some data like at
-
15:10
the height of Japanese automation, or autonomation, you know.
-
15:14
So this is Ford versus [INAUDIBLE] and it's really hard to read.
-
15:20
But, the, this is in millions of cars produced, like in
-
15:24
America, drives more cars right, where gas guzzlers, we drive more cars.
-
15:28
So, we produce more cars.
-
15:30
But, at the time Japan, this is like kind of
-
15:33
right when the, the, the little sedans were coming out, like
-
15:37
the, the Honda's and stuff like that, this is kind
-
15:39
of right when they are kind of hitting the US markets.
-
15:42
They were producing about one-third of the
-
15:47
amount of cars that United States was making.
-
15:51
But they were doing it, and we're going to kind of zip through some things,
-
15:55
so they were total domestic employment, they
-
15:57
had 1 10th the number of people employed.
-
16:00
So they were doing 1 3rd of the work with 1 10th the labor force.
-
16:05
That's pretty extreme.
-
16:06
If you're a businessman, you might wanna think about that.
-
16:09
But here's kinda the kicker.
-
16:11
Like, so the total employee cost per thing for you
-
16:15
like a United States carton of Ford cart was like $7,000.
-
16:20
But, for a Japanese car it's in the like, $400 range.
-
16:24
So at like, you're producing things at 1 10th the cost, like time is
-
16:29
money, you're saving time, you're saving money,
-
16:32
you're saving labor force, you're saving, saving, saving.
-
16:34
You're doing things quicker.
-
16:36
So abstracting that back to your life, because
-
16:39
we were talking about cars, I know, I know.
-
16:41
But putting this back to your life, why you might wanna start automating.
-
16:45
Well, you like making more money with less effort.
-
16:48
Who likes that?
-
16:50
I'm pretty down with that, I like to do that.
-
16:52
Your company would like to reduce overhead.
-
16:54
Whose company would like to reduce overhead, unnecessary overhead?
-
16:57
Okay.
-
16:57
You want to spend more time with your spouse, kids, pets.
-
17:00
This was the kind of the emotional punch I really
-
17:03
wanted, you know, just like boom right in the gut man.
-
17:08
But who, who works from home?
-
17:10
Who here works from home?
-
17:12
I mean this for those of us working at
-
17:14
home, like we're not really chained to a desk.
-
17:16
This is actually pretty kind of true, like, like,
-
17:19
the quicker you can get done the more you
-
17:20
can like just scoot over, and play with the
-
17:22
kids, or hang out with your spouse or, or whatever.
-
17:26
Or wrestle your dog.
-
17:28
It might not work for you at, you know, your place
-
17:31
of employment, but maybe at your place of employment like that means
-
17:34
you get to whatever, play video games at work, or play
-
17:37
more ping pong at the ping pong table in the start up.
-
17:40
You've got all those options.
-
17:42
And then the last one.
-
17:44
At, at Paraville.
-
17:46
Do you watches Always Sunny, in Philadelphia?
-
17:48
You guys?
-
17:49
Anyone?
-
17:50
You know the term Charlie work?
-
17:51
[LAUGH] Charlie's the like, wild card maniac guy, and like, but
-
17:55
he alls, always has to clean the toilets and stuff like that.
-
17:58
And they, they're like, there's whole episodes about, like.
-
18:01
I don't want to do Charlie work, you know, so.
-
18:03
The whole idea is that you can get out of this
-
18:05
Charlie work like cleaning toilets, and piecing things together by hand.
-
18:10
It's pretty gnarly.
-
18:11
So I found this quote from Cory, DJ Cory Nolan on twitters.
-
18:18
Non-programmer.
-
18:20
I don't trust a machine to do something I can do myself.
-
18:24
Who, who would identify with that, and maybe kind of feel that way?
-
18:28
No?
-
18:28
No one, that's great.
-
18:29
Okay, and then programmer, I don't trust myself to do something the machine can't.
-
18:34
So that's kind of the idea is we want to get to a place where we're
-
18:36
like, you know what, like, why would I do it if a robot can do it?
-
18:41
I, I want to get out of doing robot work.
-
18:44
So, we're gonna talk about modern web development.
-
18:46
If you were here last year, I think Chris [INAUDIBLE]
-
18:49
gave a talk on modern web development, a really futuristic talk.
-
18:53
Right?
-
18:53
Was that it, or, yeah, maybe.
-
18:55
I think so.
-
18:57
But it was a really good talk and he kinda went
-
18:59
through some tools and how he builds websites and stuff like that.
-
19:02
And I'm not going to rehash it entirely but
-
19:04
I'm going to just kind of mention a few things.
-
19:06
I, we're kind of in a era of fetchers, task runners, and scaffolders.
-
19:11
And so keep that kind of in your brain and kind of
-
19:13
like, what is that going to be and I'll explain that later.
-
19:17
So first, thing and the modern web development suite.
-
19:21
Are apps or GUIs.
-
19:22
You know, like, graphical user interfaces.
-
19:25
You got, you got GUIs.
-
19:28
This is Windows.
-
19:29
It's really awesome.
-
19:31
You got code editors.
-
19:32
Who uses a code editor?
-
19:34
Everyone should.
-
19:35
But all code editors are great.
-
19:38
Anything's fine.
-
19:39
I'm not, like, evangelizing anything.
-
19:42
Except, I'm gonna evangelize Sublime text.
-
19:45
[LAUGH] I really encourage you to use Sublime text, for a few reasons.
-
19:50
This is what Sublime text looks like out of the box.
-
19:54
It's pretty gory.
-
19:55
It's, like kinda weird to be honest, but this is my sublime
-
20:01
text and we'll see that that's not really showing up is it?
-
20:04
But hey whatever, we'll see that a little bit later we'll see it.
-
20:08
So this is my sublime text, I really like it.
-
20:13
I have configured it to be mine.
-
20:16
And, and that's one thing that sublime text offers
-
20:18
that maybe you're you know, eclipse or your eclipse
-
20:24
does a pretty good job, but like Coda or
-
20:26
something like that it, doesn't really offer like this.
-
20:29
Kind of hyper-customization just through like configuring JavaScript JSON.
-
20:35
Like, this is, it's pretty awesome how this all works.
-
20:38
So there's like there's some keys to make it yours, I've,
-
20:40
I've like written a jist about this and made some rounds.
-
20:43
But Install package control in the sublime, it's really important,
-
20:46
it's, you can Google it and find out about it.
-
20:49
Or in that post I kind of mentioned how to do
-
20:52
that but you need to do that to install the other stuff.
-
20:55
That, then you need to make it look good.
-
20:57
Add a theme that you like, that feels good.
-
20:59
I'm using a theme called space gray, it makes me feel futuristic and nice.
-
21:03
Add helpful plugins.
-
21:06
There are infinity packaged plugins in, in sublime text.
-
21:11
[LAUGH] Maybe not infinity, but there's it's really like, whatever
-
21:15
you're into I, I call it like kind of like, whatever
-
21:18
fetish you have about code, like, I really like, you
-
21:22
know, all my semicolons to actually be you know, Japanese characters.
-
21:27
That's a cool interesting thing that you do, but like you could have a plug-in that
-
21:31
then takes all those things and like actually
-
21:33
makes them into semi-colons, or like for other people.
-
21:37
Or like [LAUGH] maybe I just invented something awesome, but there's [LAUGH]
-
21:44
there's, it's whatever you're into, if you're into Java,
-
21:47
if you're into C, or if you're into Java script.
-
21:50
If you're into SASS, CSS, HTML, there are plugins that help you do your job.
-
21:54
And just one, and I'll show an example, but like hinting and linting is
-
21:58
like kind of an important part, of our job we need to pay attention to.
-
22:01
And I'll explain that in just a bit.
-
22:02
And then customized settings.
-
22:04
There's like a lot of settings you can do that will make it feel like
-
22:08
you're home, like you actually own the
-
22:10
software and that you're not using something that.
-
22:12
Somebody just like designed and was like, it's
-
22:15
perfect, I'm giving it to you, you're lucky.
-
22:17
You're, you're like, I'm actually, I can like change
-
22:19
the font size and I feel good about that.
-
22:21
And and then, yeah.
-
22:24
Figure out quick keys is kinda the last bit and I won't even dig into this.
-
22:27
This is like a whole hour-long talk.
-
22:29
But, like, if you learn the quick keys of
-
22:31
your code editor, you're going so much faster then
-
22:35
like, manually deleting everything and it like, there are
-
22:39
like, it's like, you know that claw in Photoshop?
-
22:43
You know, the like claw for save as or whatever.
-
22:46
It's like if you can get that in your code editor and your like Aah!
-
22:50
I'm raging it's awesome and you like, can really impress your family at Christmas.
-
22:56
Not true.
-
22:59
So the linting and hinting right, this hopefully that
-
23:01
you can kind of see this but the, the big
-
23:03
thing that you're looking at is like I tried
-
23:04
to write some Javascript, it was not good at all.
-
23:07
And then it gave me a little yellow dot to say like that's not good.
-
23:12
Then like I forgot a bracket, and then so it gave me a red dot.
-
23:15
And then I forgot a semi colon man so it gave me a bunch of red dots.
-
23:20
Once you get like these linters, kind of working as you
-
23:23
save a file or whatever, it will give you visual a warning.
-
23:26
Hey, you messed, you're not good at code.
-
23:31
This is really necessary, because it actually makes your job a little
-
23:34
more fun, because after this it's like a kind of video game.
-
23:37
You just like see an outline, and you're like, I will destroy you.
-
23:40
And you're like, pew pew pew pew pew.
-
23:41
And you're trying to like make all the
-
23:43
outlines all go away, and the red dots disappear.
-
23:46
And so it's fun and profit.
-
23:49
Back to GUIS GITHUB.
-
23:53
GITHUB is a really awesome service.
-
23:55
If you're not using it, it's for version control.
-
23:58
So, you'll never have that situation where somebody, like, saves over your file,
-
24:03
and obliterates your, like, whole day's work, which we just kinda talked about.
-
24:08
Version control.
-
24:08
You can kinda roll back, and find out what things are going on.
-
24:12
So there's two Mac and Windows, and these are kind
-
24:15
of like Github or Git junior versions if you will.
-
24:19
[LAUGH] Like Nick Jr. but these are,
-
24:21
these are really the, the functionality is truncated,
-
24:26
but it's also like in a language that,
-
24:29
you know, that the common person can understand.
-
24:31
It's like, sync a branch, oh, I get that.
-
24:33
I'll sync it up rather than Well you get
-
24:35
[INAUDIBLE] get pushmaster origin, and then it works, you know?
-
24:38
[LAUGH] So this is, it's in a language that really helps
-
24:41
and if you have like, if you work with a lot of
-
24:43
designers and stuff like that, I work with two designers, this is
-
24:46
crucial to like getting us kind of into version control at large.
-
24:50
So the end is for Mac and Windows so that's good.
-
24:54
Codekit, we've kind of mentioned, but this this is
-
24:58
basically a tool that works to compile your SASS.
-
25:01
It can do compass it can like take a whole bunch of JavaScript
-
25:05
files and kinda mash them all together in it's own little weird way.
-
25:09
It can take your images and optimize them, and make them good for the internet.
-
25:13
Never put an un-optimized image up on
-
25:15
the internet, unless you know what you're doing.
-
25:19
There's a lot of things it does it is Mac only, so I would recommend this, Prepros,
-
25:24
it is uh,cross platform, and it is even, I, I think I like it better.
-
25:31
I like the look of it so, I, I
-
25:33
really am really attracted to this piece of software.
-
25:39
I would recommend this, it's, it does all the same
-
25:41
things maybe a little bit more even just cuz it's, it's.
-
25:44
I feel like the, the release cycle on it is a little bit better.
-
25:48
So that stuff for compiling your stats and
-
25:51
your JavaScript, and kind of doing well with that.
-
25:56
Hammer for Mac.
-
25:57
Who's familiar with Hammer?
-
25:59
Anyone, anyone, anyone?
-
26:00
Hammer helps you build whole websites.
-
26:02
So one thing that's lacking in HTML is an include tag.
-
26:08
Like, like you can't, like, you don't have,
-
26:09
like, a nav that you can include, right?
-
26:12
Like, you, wouldn't it be awesome?
-
26:14
[LAUGH] You don't have it, we don't have it so, like, you use PHP.
-
26:18
And you're like PHP include navigation.php.
-
26:21
That's cool but, like, it's very PHP.
-
26:23
This tries to keep it all HTML based and,
-
26:26
like, this will help you start scaffolding out projects.
-
26:29
They have little mix-ins or templates.
-
26:31
Like, you can just like, start using boilerplate.
-
26:33
It's pretty awesome, pretty fast, pretty amazing.
-
26:37
I, I think it's great.
-
26:39
I, it is kind of one of those things that
-
26:41
your whole team has to be all Mac, you know?
-
26:43
That could be a deal breaker.
-
26:46
You have to pay for the software, you know?
-
26:48
Like it's, it's not free.
-
26:49
So you have to pay for the software.
-
26:51
That's, you know, that's, that's something to consider when you're factoring this
-
26:54
in, but kind of, with anything here, it's find stuff that's for you.
-
26:59
Find stuff that really speeds up your deployment.
-
27:02
What is, what makes sense to you?
-
27:03
What do you like?
-
27:04
What can you drop in your brain, and use that.
-
27:08
Cactus is another one for Mac.
-
27:10
It's kinda Python, Jango based.
-
27:12
But it does the same thing.
-
27:13
It just, like, scaffolds out an application.
-
27:15
Like, you can click new, and it's, like, what do you, what new thing do you want?
-
27:18
And you're, like, a new responsive website.
-
27:20
And it's, like, [SOUND], done.
-
27:22
Okay, cool.
-
27:22
What next?
-
27:23
You know.
-
27:24
It works really, really well.
-
27:26
So check that out.
-
27:27
But that also costs money.
-
27:28
Mixture.io costs money.
-
27:30
But it's cross platform.
-
27:32
It's built by some really cool guys I've met personally.
-
27:35
And I really, I, it does great work.
-
27:38
And you can probably not see because the image isn't super good.
-
27:41
But, like, that B, that's a F for foundation.
-
27:44
B for bootstrap.
-
27:46
So you can like, start building sites really
-
27:48
quickly just by the click of a button.
-
27:50
You like, scaffold out a site.
-
27:51
That's what the scaffolding is.
-
27:53
It's like, you just build a little site.
-
27:55
Scaffold it out, and then you can start using it.
-
27:59
So, let me take a drink of water.
-
28:03
Talk to your neighbor.
-
28:06
That's all part of the thing.
-
28:07
Because, I'm gonna introduce you to the best tool
-
28:12
the world has ever met in terms of web design.
-
28:15
I'm launching it today.
-
28:18
I present to you The Command Line.
-
28:21
[LAUGH] [SOUND] There.
-
28:25
A smattering of applause.
-
28:27
I love it.
-
28:29
The command line, established in 1969.
-
28:33
Why would we use this thing?
-
28:38
Why would we use a, a thing from the 60s, to develop websites in the 2014.
-
28:46
It really kind of comes back to that like Unix theory, right?
-
28:49
It's like this is design to build one thing and do it really well.
-
28:54
But taking a step back, and bringing it back to our analogy, cars.
-
29:01
There it is.
-
29:03
This is the interior of a 2009 Honda Civic.
-
29:06
You guys are all familiar.
-
29:07
You've all been in one.
-
29:10
It's a car.
-
29:12
Anyone from, native Floridian here?
-
29:15
Anyone?
-
29:16
Okay, so a car is a little bit like a swamp boat with wheels, okay?
-
29:21
Just got to clear that up.
-
29:22
Alright.
-
29:23
It's like a fan boat that has little wheels on it.
-
29:26
[SOUND] Goes on roads.
-
29:27
[SOUND] Alright!
-
29:33
The, so, you can imagine this is the GUI, right?
-
29:38
This is the Graphical uner, User Interface to your car.
-
29:40
You, you see a button.
-
29:42
It looks, it's, there's a red thing that goes to a blue thing.
-
29:45
You know that's oh, that must be hot and cold, I get that!
-
29:47
You know there's a, there's always this,
-
29:49
like, guy lounging with waves hitting his face.
-
29:52
You're like, that's probably the fan, right?
-
29:55
[LAUGH] There's a speedometer, it tells you how fast
-
29:58
you're going so you don't have to just guess.
-
30:02
This actually just controls what's underneath
-
30:06
or inside the car, which is this.
-
30:09
Now, this should be obvious to everyone, right, what everything in here is.
-
30:15
No, just like automotive whatever design, like don't expect to understand
-
30:23
all of the command line instantaneously in one fell swoop, and you're like I'm a pro.
-
30:28
I was just dismantle my car and fix it.
-
30:31
Like, I don't recommend that.
-
30:34
So the same with the command line.
-
30:35
It's really like, you wanna baby step into it.
-
30:37
You wanna kind of learn piece by piece, what is driving what and what does what.
-
30:42
And, my hope is, like that by the end of this talk.
-
30:45
We will all be able to do some like routine maintenance to our vehicles
-
30:50
But this is just kind of like, I hope you guys get the analogy.
-
30:55
I told you I was really working hard at this car analogy.
-
30:59
The command line anatomy, this is, I, I wanted to
-
31:02
break down like what a, a command line command looks like.
-
31:06
A shell command looks like so so you have a tool, right?
-
31:11
This is the app or the program that you
-
31:13
wanna use, and then that tool performs a task.
-
31:18
You want it to do a task.
-
31:19
Usually, that's a verb.
-
31:21
You know, like install, or get or something like that, curl.
-
31:26
No dude total different.
-
31:27
Alright, then you have optional stuff.
-
31:30
This is usually stuff like, where it's like dash gfrxp.
-
31:33
You know, these all have meanings and we can find out what those meanings are.
-
31:37
But these are all optional thing that you are
-
31:40
trying to send to that program kind of just like.
-
31:43
You know, like when you like open
-
31:45
system preferences and you start clicking buttons.
-
31:47
That's kind of like the options that you're using.
-
31:50
And then, like I said earlier, every app
-
31:54
will usually just take input and spit out output.
-
31:57
And, and sometimes it's the current folder you're in, or it's a
-
32:01
file, or a URL, or even a git branch that you're working on.
-
32:05
And then it spits out output to a destination.
-
32:09
And sometimes that's the same exact file, you just want to kind of modify that file.
-
32:14
Or sometimes you push it somewhere else.
-
32:16
Here are some of my daily shell commands
-
32:18
that I use kind of on a semi-regular basis.
-
32:22
Like I will cd.
-
32:24
And cd is shorthand for change directory, and I feel like I should mention that.
-
32:28
Like you you're kind of like why do I have to type so much?
-
32:33
Right that's like a common thing I hear about this.
-
32:36
Well don't worry like generations of neck bearded unix dudes have
-
32:39
gone before you, and burrowed these tunnels deep within the system.
-
32:45
To make shortcuts and really see these a lot, it's, it's easier than
-
32:49
moving a mouse, to be honest, cuz you just never leave your keyboard.
-
32:52
so, like cd, and that, that squiggly thing.
-
32:55
That's a shortcut for your home directory.
-
32:57
That's, like, your user.
-
32:59
There's a thing called the root directory.
-
33:01
And that's everyone on that computer.
-
33:03
Or, like or the server, or your computer.
-
33:06
Stay out of there,' cuz you can really mess stuff up.
-
33:09
[LAUGH] Stay in your home dude.
-
33:13
Stay home and like, just try to operate from
-
33:16
there unless somebody tells you to do something else.
-
33:19
So, so cd into my dropbox and then I've have a drop
-
33:23
box folder in there called [UNKNOWN] I use for all my [UNKNOWN] projects.
-
33:27
Compass watch.
-
33:28
This is a, a, if you want to get compass going
-
33:31
on the command line, this is all you have to type.
-
33:34
There's maybe like some gem install things you have to do.
-
33:36
But, compass watch.
-
33:37
Oh, that's easy.
-
33:38
That's easier than maybe even clicking a
-
33:40
button that says, like, I have Compass watch.
-
33:42
Are you sure?
-
33:43
Yes.
-
33:44
Are you super sure?
-
33:45
Yes.
-
33:45
Okay.
-
33:46
This is pretty simple.
-
33:49
Touch index study HTML.
-
33:50
This we'll just touch.
-
33:52
It's, it's a weird one, but it, it works.
-
33:55
It'll like create a file called Index study HTML.
-
33:58
Awesome, I can start using it.
-
34:00
For my blog, I, I run Jekyll, Jekyll server -- auto.
-
34:04
Now, it's like serve or something like that.
-
34:07
This is an option.
-
34:08
So, that's an auto reload.
-
34:10
Option, so if I save a file it
-
34:12
will automatically reload the server and,uh, update things.
-
34:16
So that's pretty awesome.
-
34:18
Git push master origin, I mentioned this before,
-
34:21
this is how you send the master branch
-
34:24
the input to your destination, which is the
-
34:27
origin, which is a URL out in the cloud.
-
34:30
Up on GitHub, usually.
-
34:33
Npm install -g grunt-thing.
-
34:36
This is, I'm using NPM, which is the Node package manager.
-
34:40
Or maybe it's not.
-
34:41
But that's what they say.
-
34:43
I don't know.
-
34:44
But, okay, install, so you install a thing.
-
34:47
You want to install something, -g.
-
34:49
I'm doing that globally.
-
34:51
I wanna install it for everything.
-
34:53
Not just in the thing I'm working in.
-
34:54
But I want to install it for everyone.
-
34:57
And then grunt thing.
-
34:58
Like that can be, we'll get into that, but that can be kind of anything.
-
35:02
It's it's, you kind of do this fairly often.
-
35:06
You know, and you may be feeling like you don't have any idea what your doing.
-
35:09
That's okay.
-
35:10
That's totally fine, because this gets better with friends.
-
35:14
And this is kinda one point I wanna like,
-
35:17
this is not my grand finale yet, guys, calm down.
-
35:22
thi, like Unix is a very big community and,
-
35:25
and so is our web, our front end community.
-
35:28
So it's my dream to just like sit around and share
-
35:31
Unix tips with each other and like, hey, how'd you do that?
-
35:34
Oh, I used the Command line.
-
35:36
Show me!
-
35:37
Yeah!
-
35:39
Thanks best friend.
-
35:40
We can really like, it's better when your like talking with people.
-
35:44
Or like hey how can I do this?
-
35:46
And somebodies like oh, here's my configuration file.
-
35:48
And you just copy and paste it in and it like works.
-
35:52
It's pretty awesome.
-
35:53
Never underestimate the communal aspect of coding.
-
35:57
So when we're talking about front-end command line stuff there's like three big
-
36:01
things that you should be aware of, or have kind of working knowledge of.
-
36:05
Again, like the kind of ability to check your car's oil.
-
36:08
There's Bower, there's Grunt, and there's Yeoman,
-
36:14
which is a fetcher, a task-runner and a scaffolder.
-
36:19
And these are all built on node JS, and I'm sure like I just hit
-
36:23
you with like four huge buzz words, and you're just like I don't even care.
-
36:28
You're a [UNKNOWN] you idiot.
-
36:31
And so I get it, I get it.
-
36:34
This is a lot of like buzzwords.
-
36:36
But the reason why it's important, why like
-
36:38
node is important, is because node is JavaScript.
-
36:41
It's written in JavaScript.
-
36:43
Which is kind of the language that we should all be using.
-
36:47
It's, it's kind of like PHP, or Ruby, but in JavaScript.
-
36:52
And that, we can talk later if you don't understand that
-
36:55
[LAUGH] but the idea here is like stay within your real house.
-
37:00
Like, try, like you know, HTML, CSS and Javascript, that's on
-
37:05
every single computer in the whole wide world, this is pretty
-
37:07
awesome that we can use this now from the command line,
-
37:11
as a server and like start hosting files or running programs.
-
37:15
Pretty amazing that it's all in our wheelhouse and it's
-
37:18
super powerful and it's it's really getting the job done.
-
37:22
It's not just like a fashion so when you're
-
37:24
choosing tools like, try to choose these these node-based ones.
-
37:28
And, so yeah, file fetcher this is bower, and, and there are lots of file fetchers.
-
37:34
Like, there's all different kinds and they've like
-
37:36
extend back to the history of time, right?
-
37:38
Like, there's bower, there's nmp I mentioned
-
37:40
earlier, gem if you use ruby, like,
-
37:43
er bundle, you know, like, or bun, gem install something, yum, that's the thing.
-
37:48
What these dudes do is, they, like, go out to the cloud, grab
-
37:52
a file, and all it's dependencies, and spit it back in to your project.
-
37:57
Which is pretty awesome, because in this example, I
-
38:00
want to install fitvids, a plugin I wrote myself.
-
38:03
So I have access to it, I could, I know where it is on GitHub.
-
38:06
I'm very smart.
-
38:07
But if I just type this, it will install jQuery and fitvids.
-
38:12
So jQuery is the dependency of fitvids.
-
38:15
So I installed both.
-
38:16
It just saved me two trips, like two super annoying trips I
-
38:21
do like on a daily basis, which is like I go to
-
38:24
get hub, I find the thing, I click the raw button cuz
-
38:27
I want the raw file, and then I copy and paste that file.
-
38:30
And then I go back to my code editor and I say new file.
-
38:33
And I paste all that in, and I'm like, did it work?
-
38:35
Maybe.
-
38:36
Okay, now I got to go find jQuery, and then I like find that weird
-
38:40
Google Ajax URL, and I like copy and paste that whole big file of jQuery.
-
38:44
It's like, 90,000 lines of code.
-
38:46
And I just paste it into my code editor.
-
38:49
This will just like, automate that.
-
38:51
It's, it's basically, the icon is super clever.
-
38:53
It's a little bird where you're just like, go get things.
-
38:56
And its like, I got them!
-
38:58
Doo-doo-doo-doo-doo.
-
38:59
Done.
-
39:00
And then it will, the kind of like bonus thing it
-
39:03
does, is it starts giving you like, a structure to your code.
-
39:07
Everything's stored in a Bower Components folder which is pretty awesome.
-
39:11
Because now, like, now it's not you coming
-
39:14
up with this clever naming system about folders.
-
39:17
You're like oh, I'm gonna call this one lib jQuery dependencies, URLs.
-
39:22
Blah, blah, blah, some dumb thing.
-
39:24
This is all putting it in to a really organized structure.
-
39:28
yeah.
-
39:29
Task runner.
-
39:30
So Grunt is a task runner, just like many task runners before it.
-
39:34
rake, for rails, cake for if you use cake PHP ever.
-
39:38
Make, and then gulp.
-
39:40
Gulp's a new guy on campus.
-
39:41
I'll kind of explain that, but what it does
-
39:43
is it runs mundane tasks over and over and over.
-
39:46
It doesn't care its just like, okay I'll do it boss, okay I'll do it boss.
-
39:49
Okay, yeah, he doesn't care and he can do
-
39:53
like simple things like you know hey change that weird
-
39:58
Japanese character I made and put it, make it
-
40:01
a semicolon again because that was my cool idea, right?
-
40:04
You guys tracking?
-
40:06
I've got to, got to stick with the analogies, guys.
-
40:11
like, you can do mundane tasks like that, or it
-
40:13
can do like complicated tasks like start building your whole website.
-
40:17
Like, minifying your Javascript.
-
40:20
Crushing it all down into one file, replacing things in the footer.
-
40:23
And they can start doing all this kind
-
40:25
of complicated build stuff that you weren't really, like.
-
40:29
You're like, awe, I would have had to do
-
40:30
that by hand or guess or something like that.
-
40:32
It can kind of do all of this stuff by itself.
-
40:35
Common tasks are usually verbs.
-
40:37
This is grunt build.
-
40:39
Build your website for deployment.
-
40:41
Like you could even have the build task,
-
40:44
deploy your website to the cloud in seconds.
-
40:48
Grunt watch, this is like if you just
-
40:51
wanna watch files, like I kinda explained on mine.
-
40:53
I had the auto-reload on my blog.
-
40:56
This will watch files for changes and update them as
-
40:58
they're changing and like, just kind of push it out.
-
41:02
And you could even have like a, a, a what
-
41:04
like a live reload kind of thing hooked into the watch.
-
41:09
Grunt test?
-
41:09
I don't know if, if a lot of us do this.
-
41:12
We probably all should be doing it more by putting
-
41:14
unit tests in stuff up features, functional tests for our JavaScript.
-
41:19
Inside something, so every time you build or, or, every time you're like about
-
41:23
to push the cloud, it actually runs some tests and is like, whoa, whoa, whoa.
-
41:26
Actually, you're, none, none of this Javascript works.
-
41:30
Like, that would be really good to know before you
-
41:32
send it to the cloud, and lose your company money.
-
41:35
Grunt serve, you can actually make Grunt become a server, and
-
41:39
then it maybe'll start doing the watching and stuff like that.
-
41:42
This is pretty cool stuff so I want to talk about Gulp.
-
41:47
Gulp's new thing that came out as I was planning this talk.
-
41:52
A little shifty, and everyone's like, and now it's the new cool kid in town, right?
-
41:56
And we are an industry of trends.
-
41:58
Everything becomes cool and we're like god that's so cool.
-
42:01
Gulp is the same thing.
-
42:03
It just is a little different.
-
42:07
If we have time, do we have time?
-
42:09
Maybe?
-
42:09
Okay sure.
-
42:10
If we have time, I'll talk about it.
-
42:12
But, it's basically like you're writing an app, yourself.
-
42:17
Rather than configuring Grunt to do things.
-
42:22
There's a little distinction.
-
42:23
But instead of configuration, you're kind of getting more metal.
-
42:27
[SOUND] And like you're, you're kind of building the app.
-
42:32
And then Yeoman is a robo-butler.
-
42:35
It's pretty amazing.
-
42:37
You can generate prototypes and scaffolds in seconds, you just type yo something or.
-
42:41
It's similar to like rails generate, if you guys have used Rails.
-
42:45
Or Cake Bake if you use CakePHP.
-
42:48
Pretty powerful things.
-
42:49
You just like type something, and it will just build that thing you told it to type.
-
42:53
It'll go out and build it and find all the dependencies.
-
42:56
It'll download Grunt and Bower.
-
42:58
It'll install those.
-
42:58
It'll get you all set up.
-
43:00
It's pretty awesome.
-
43:03
Here's how you would try to start a web app.
-
43:06
Npm install -g generator-webapp.
-
43:09
You're installing a generator.
-
43:11
And then you're, like, yo, web app.
-
43:13
And then it's, like, hello, pip pip, here we go.
-
43:17
Gonna build a web app.
-
43:19
[SOUND], Done.
-
43:20
So I'm gonna do a demo.
-
43:22
Of this exact functionality on hotel internet.
-
43:26
So are you ready, world?
-
43:30
[NOISE] Alright.
-
43:31
Here we go.
-
43:32
You guys did not know what you're getting into today.
-
43:37
I will.
-
43:38
Doop, doop, doo.
-
43:40
Oh, is that showing over here?
-
43:42
Let me do this.
-
43:44
Where are you?
-
43:47
Alright, so this is live demos, right?
-
43:50
These are notoriously terrible.
-
43:55
So, if you guys will rock with me.
-
44:01
So here's a web browser, right?
-
44:02
At like 800 x 600.
-
44:06
So [LAUGH].
-
44:07
Here's some things I installed, you can delete, we're not worried about that.
-
44:11
Alright.
-
44:12
Can everyone see this?
-
44:13
Is everyone good?
-
44:14
Here, let's check; I'm gonna do some things here.
-
44:17
So, I'm gonna like, just ping.
-
44:20
daverupert.com, that's my blog.
-
44:23
I'm just gonna see how my WIFI's doing.
-
44:25
No drops.
-
44:26
Feeling pretty good.
-
44:27
If you could stop watching Netflix right now though it would be really sweet.
-
44:31
[LAUGH].
-
44:33
Here we go.
-
44:34
So, I'm gonna CD into that folder I talked about.
-
44:37
I, I and it's D dude what was it?
-
44:41
DRO crud.
-
44:44
aw, I just hit tab, and it auto completed.
-
44:47
Because I made this thing mine, this my terminal.
-
44:53
Did you see what I just did?
-
44:54
I just made my life 100% better, because I can just like auto complete words.
-
44:59
Now what was that other one?
-
45:00
It was D e, oh, man, tab!
-
45:03
Boom, I even messed up, it's capital D not lowercase d and there we go.
-
45:08
Alright, so I'm going to cd into here.
-
45:11
Here I am and I'm going to do this thing, I'm gonna
-
45:13
make [INAUDIBLE] dir, I'm going to make a directory called in control.
-
45:18
Right?
-
45:18
I'm going to make it, and then I want to
-
45:21
cd to in oh, shoot, what was it called, again.
-
45:25
Tab, done, awesome.
-
45:28
I am now in incontrol, me and my Dev thing.
-
45:32
Alright, so you guys see where that is, alright.
-
45:34
So then, well it's npm install -g generator web app, alright.
-
45:43
And so and I've already gone through
-
45:45
it and installed [UNKNOWN] and stuff like that.
-
45:47
Like I just want to make sure that, that it's all good, and it's not.
-
45:52
I didn't want to fail super hard so as you can see, MPM install is a fetcher right?
-
45:58
So it just went out and fetched all these files and installed them for me.
-
46:02
And all these things like let's, let's just guess.
-
46:06
I don't even know what these things do.
-
46:07
There's probably viruses [LAUGH].
-
46:10
No [LAUGH] No that's the beauty of open sources.
-
46:13
There probably shouldn't be any viruses cuz it's all out in the open.
-
46:16
But you know, like fstream.
-
46:19
Oh, that's a little stream that like catches
-
46:21
streams, and then parses things and does things.
-
46:24
I don't know how to write that.
-
46:26
So it's really awesome somebody does, and I didn't have to
-
46:29
go find that because I don't know how to do that.
-
46:31
So, there we go and I installed the generator, and
-
46:33
then I just do, yo, shoot, what was, it was
-
46:37
yo, and then I don't know what I'm doing, so
-
46:39
I'm gonna ask for help and see if that does anything.
-
46:42
Hah, dude.
-
46:45
That was very helpful dash ageful if you will.
-
46:48
Okay.
-
46:49
So, I see webapp, okay, so I'm just gonna do, yo webapp.
-
46:54
Here we go.
-
46:55
Oh, man.
-
46:56
And there's a dude, and he's asking me, do I wanna make a webapp and I'm like, yeah.
-
47:01
I wanna make money.
-
47:02
And then, so I can like drive around and like
-
47:05
turn these off, but I'm just gonna roll with him.
-
47:07
I'm just gonna be like, yeah, give me everything.
-
47:09
Now it's fetching more files, right?
-
47:11
It's, you see Bauer, maybe you saw Bauer
-
47:13
scroll by if you're like, whatever, the speed reader.
-
47:17
[LAUGH] It's getting all these files.
-
47:19
This is pretty intense right?
-
47:21
So it's generating a web app as we speak.
-
47:23
From the cloud, it's pulling everything down.
-
47:26
Boo, boo ,boo, I'm going to get some coffee.
-
47:28
And then, you know, because your boss he was like, dude
-
47:29
I need the web app by the end of the day.
-
47:31
And you're like man how am I going to build
-
47:34
a whole web app by the end of the day?
-
47:37
Well, I'll just sit around, just, you know, get a, get a coffee.
-
47:40
Oh, but it turns white.
-
47:41
That's pretty good, and that, so it's downloading things.
-
47:43
[SOUND] Done.
-
47:46
Alright, it's done.
-
47:49
So let's do let's, so I know sublime and then I'm just gonna hit
-
47:54
a dot, cuz that means this current
-
47:56
directory, and I'm opening this up in Sublime.
-
47:59
So this is my Sublime, hopefully that's a
-
48:01
little more readable, how about you guys over there?
-
48:03
Alright, you guys are okay.
-
48:05
So this is Sublime, and this is why it's cool.
-
48:07
There's a lot of things going on, and I'm
-
48:09
gonna kind of walk through this grunt file and kinda
-
48:12
show you what's going on, but all of our
-
48:14
code for the web app now lives in App, right?
-
48:17
So you see Bauer Components, that's like what
-
48:20
the Yeoman used Bower to go get things.
-
48:23
There's images in there.
-
48:25
There's scripts.
-
48:26
There's styles and, and styles probably has, let's see, let's see.
-
48:30
Oh, it's got S-A-S-S, it's got Sass in there.
-
48:33
That's pretty sweet.
-
48:34
So, and then there's an index file with a bunch of stuff.
-
48:37
That, that should be our webapp I guess.
-
48:39
But let's, so let's just see what's going on, right?
-
48:43
So I can do, I can do Grant geez, I don't know what's going on.
-
48:48
So let me get some help, right?
-
48:49
So, the, the type is too big, so let's scroll up just a little bit.
-
48:53
So these are tasks that Grant can do, right?
-
48:56
So, all around.
-
48:57
What?
-
48:58
What's going on?
-
48:58
I said, sir.
-
48:59
I talked about that one in my talk, so I'm gonna use that one.
-
49:04
so, I'm gonna use grunt serve, and are you guys ready?
-
49:09
No one blink.
-
49:10
Everyone take a blink right now.
-
49:12
And then, we're gonna start serving this
-
49:14
[LAUGH] and we're gonna just see what happens.
-
49:15
So, it took two seconds, or for syn-total, seven seconds.
-
49:19
Holy.
-
49:19
Moly.
-
49:21
Without even offering or going to the cloud to download something manually,
-
49:25
I've just generated a whole boot strap website that is, like, responsive.
-
49:30
Whoa.
-
49:31
Now my boss is like super impressed.
-
49:35
Pretty cool, but not cool enough for Florida right?
-
49:41
So [LAUGH] why do I say these things?
-
49:44
Alright so I'm going to do the CD drive bugs
-
49:47
dev in control, and then I'm just gonna I'm gonna, gonna
-
49:50
do open because I want to oh, wait open.I'm gonna
-
49:55
open that in Finder, cuz I don't know what's going on.
-
49:57
So I'm just gonna open this in Finder.
-
50:00
Let's see here.
-
50:01
So I'll go into App, right.
-
50:02
And then I'll go into Images, and then I'm.
-
50:05
Okay, so I'm I wanna get a new one.
-
50:07
You know, I wanna go with my desktop, cuz I had a cool thing on my desktop.
-
50:10
I had a albino water alligator here.
-
50:13
So, just gonna go old Me.
-
50:15
And I messed up.
-
50:16
Okay, here we go.
-
50:16
So, live demos alright, here we go.
-
50:19
And then, for the sake of life, I'm gonna
-
50:21
call this alligator, cuz I don't wanna type it.
-
50:23
Or just gator.
-
50:24
Let's, let's shorten it, be efficient.
-
50:27
This is called optimization.
-
50:28
[LAUGH]
-
50:32
Tim's gonna talk about performance tomorrow.
-
50:35
And then, basically, that was his whole talk.
-
50:38
And so, alright.
-
50:39
[LAUGH] So, in control Orlando.
-
50:44
I wanna call it Orlando, right?
-
50:46
And so I'm gonna save it.
-
50:47
And then, like, let's go over here.
-
50:50
[INAUDIBLE].
-
50:51
Hey buddy, don't sell me out like this.
-
50:55
It [INAUDIBLE] What oh, that was the title,
-
50:58
okay, I was looking in the wrong place.
-
51:00
[LAUGH] So, let's do text muted, in control Orlando,
-
51:05
[INAUDIBLE] and then O My gosh, it just library loaded.
-
51:11
Library load is not a new thing.
-
51:13
But, it's pretty cool that it's just doing this automatically from the
-
51:16
thing, right, so so go back to our editor right, this is pretty
-
51:21
painful but we need a cooler title because this is not g- Allo
-
51:25
'allo that's not how we say it in Florida we say gator, right?
-
51:29
And, so then it says gator, right?
-
51:32
And then, so then we need to go into
-
51:33
the main, right, SCSS, we wanna do some CSS stuff.
-
51:37
I happen to know because I planned ahead that this thing's called jumbotron.
-
51:42
Right?
-
51:42
So I wanna do a background, of, let's see, I'll just call it, Image it or url right?
-
51:49
Images [NOISE] gator dot jpg oh man lets
-
51:56
see no repeat and then I'm going to do background size which Chris talked about.
-
52:01
I'm going to do this cover option its pretty sweet.
-
52:04
Come back here.
-
52:05
Something's messed up.
-
52:06
[LAUGH] Oh, David, you should have planned ahead here.
-
52:11
So we'll try that.
-
52:12
We'll just see if that works.
-
52:14
Whoa!
-
52:16
Dave, that's so cool!
-
52:17
Now you have a web app that's totally
-
52:19
working and no one can say anything about it.
-
52:21
So
-
52:23
we'll just make an f f f in there.
-
52:25
So, there we go.
-
52:27
So, in the background, it went through and it compiled all my sass.
-
52:33
So, here you go.
-
52:34
It said compass [UNKNOWN] server.
-
52:36
It took 1.3 seconds to run compass.
-
52:39
And then it ran auto prefixer which is a thing that, if
-
52:42
you guys have ever like we, we all write like, we write dash
-
52:46
webkit or dash pizza and then turns out last month, yesterday dot
-
52:52
webkit, dot pizza or dash webkit, dash pizza went totally under the water.
-
52:56
Like they un-prefixed it and so you're like, oh,
-
52:58
I'm going to have to update all my CSS.
-
53:00
Auto prefixer is like, is part of the build process.
-
53:03
And it'll figure out, it knows which ones you can un prefix.
-
53:06
So.
-
53:07
And it'll prefix things you didn't prefix, which is pretty awesome.
-
53:11
So that's kind of what it does.
-
53:13
So, we're going to take a little tour, is everyone okay?
-
53:17
Everyone okay?
-
53:19
How am I on time.
-
53:21
What
-
53:24
five six minutes stall.
-
53:27
Okay I'm just kidding guys.
-
53:29
I planned, I plan things.
-
53:32
Alright here we go.
-
53:33
So this is the grunt file.
-
53:34
This is the kind of like what is controlling grunt.
-
53:37
This is the configuration that is running grunt.
-
53:40
Over and over and over so so you load some tasks and this was all made up.
-
53:45
I didn't have to write this by hand.
-
53:46
This would be awful to write by hand.
-
53:48
So this is, now is generated for me.
-
53:50
I can probably copy and paste this and put in every project and it will work.
-
53:54
Maybe to some degree it might kinda bark at
-
53:56
me but yeah, it, it will work pretty okay but.
-
53:59
So we got Yeoman.
-
54:00
He's a thing, right?
-
54:02
Watch.
-
54:02
That was a task that does a watch.
-
54:05
Js files for changes and then it'll live reload them.
-
54:08
That's cool.
-
54:09
It'll test on changes.
-
54:11
It'll check out the grunt file, right it will do something there.
-
54:14
Compass it will watch for compass changes that we're doing that right.
-
54:18
Styles it'll update our CSS file and auto-prefix it.
-
54:23
Live reload Yeah okay, it'll live reload.
-
54:27
Essentially, we've created with this like, little
-
54:31
configuration file that I've just sort of read
-
54:33
through in two seconds, we've created a
-
54:35
code kit competitor right there on our machine.
-
54:40
That is extendible.
-
54:41
And the kind of thing about like, like
-
54:43
GUIs and stuff like that, those are awesome.
-
54:45
You should use them.
-
54:46
Like get used to that.
-
54:47
But the second, like,it, the, the, the, the, app, the like,
-
54:53
dot app, falls behind and, and isn't updating, you kind of start to feel that.
-
54:59
Like, like, singularity or whatever, like,
-
55:02
that currently can't run in code [INAUDIBLE].
-
55:05
So you're like, well what would I have to do?
-
55:06
Well, you have to go to the Command
-
55:08
line and use the latest, freshest, newest stuff.
-
55:11
So this is kinda where like you're job could get
-
55:13
better if you start learning a little bit about this.
-
55:16
But it's pretty cool that we just made an App that is a complete competitor to
-
55:19
something you'd have to pay a whole bunch of money for, or well, like 20 bucks for.
-
55:25
But this is totally free and you can give it to your whole company for free.
-
55:29
So that's pretty awesome.
-
55:30
That image of an alligator was maybe cost us money.
-
55:33
I don't know.
-
55:34
That's not how you build websites don't just steal for the internet.
-
55:37
So [LAUGH] alright connect this like creates this server with livereload.
-
55:44
Right?
-
55:44
It's kinda like manages connections to your application, lets not worry
-
55:50
about it, clean, this are clean things, I love clean things,
-
55:53
it will like, just basically kill our, our distribution thing, and
-
55:59
then it like make a whole new distribution thing, a pretty awesome.
-
56:03
Js hint kind of like with that code
-
56:06
thing, that code example where I wrote that really
-
56:07
terrible java script, it will show us, Like, it
-
56:11
will bark at us if our JavaScript isn't passing.
-
56:14
Mocha is a JavaScript test framework, let's not worry about it.
-
56:18
Compass is pretty awesome.
-
56:20
We've talked about it, but, it like has all your things for
-
56:23
like generated images path, and stuff like that, so that's pretty sweet.
-
56:28
And then it's got some more stuff.
-
56:30
Keep going, out of prefixes, we talked about that balance so blah blah blah.
-
56:33
Use min.
-
56:34
This is where it gets awesome, cuz this is kind of Mr. Tim stuff.
-
56:39
So use min and image min, image min is probably the, use min means like it's
-
56:44
gonna start, it's gonna inject and use the minified file in your distribution.
-
56:49
And image men means that it will take all
-
56:51
your files in your images directory and smoosh them down.
-
56:55
So, this is kind of super live, but let's
-
56:59
see...I'm going to stop our server for one second.
-
57:02
I'm going to just type grunt image men and just see what happens.
-
57:08
Do, do, do.
-
57:09
So, it crushed my gator image automatically.
-
57:13
And I could add that to that watch task so that every time i
-
57:15
dropped a gator image into my app it it would crush through the image.
-
57:21
But instantly just saved 3.78 kb without, like
-
57:26
I typed two words, that was super hard.
-
57:29
But, like, I didn't have to like find a setting in some app or whatever.
-
57:32
I guess I did I had to scroll through the thing.
-
57:35
I can just try, type grunt imagemin once it's set up
-
57:38
and I'm automatically saving files and getting things to my client faster.
-
57:45
So I could keep going.
-
57:47
I, it's sorta of like depends on where you want me to go.
-
57:50
But I guess right now I'll open it up for questions.
-
57:54
Does anyone have any questions because I've kind
-
57:56
of dropped some super knowledge bombs on you.
-
57:59
>> Does it take any special recreations to get this started, like configuring
-
58:07
your local server?
-
58:08
>> So the big thing, like the big.
-
58:10
The, the big hurdle to in, getting started, are you on Mac or PC or?
-
58:14
PC.
-
58:16
The big hurdle to getting started is just installing it, like, installing Node.
-
58:22
And the thing about Node is it's cross browser, like Windows, Microsoft has put a
-
58:25
lot of money and effort into The nerd
-
58:29
community, so it's pretty, they are like involved.
-
58:31
But I think there is like a thing on like,
-
58:33
oh, shoot, web platform, do you know what it's called?
-
58:39
Web platform installer?
-
58:40
I think there is a thing, a button, on
-
58:41
the web platform installer where you are just like
-
58:43
no, and it is (noise) done so Really all you need to, to do all the rest of this?
-
58:49
>> Yeah, just to kinda get started.
-
58:50
And then, so you're gonna have to install Yeoman,
-
58:53
which is npm install-g yo, and it'll start installing yeoman.
-
58:59
If you wanna get into image stuff, like, there, there's maybe
-
59:02
some like, dependancies, but they're, they've usually all been worked out.
-
59:05
It's, it's stuff like image magic or, or You know,
-
59:08
these kind of low-level C binaries that have just accesses, so.
-
59:12
Yeah, I mean, try, does anyone, anyone on Windows have a node environment set up?
-
59:17
Is it how, how hard?
-
59:22
Yeah.
-
59:24
He said, it's like running an installer, it's really easy, so.
-
59:27
Again, coding with friends?
-
59:30
Let's hook up, guys.
-
59:31
>> Take a look at Choco-lugly?
-
59:35
Choco-lotly?
-
59:35
>> Chocolately?
-
59:36
>> Yeah, that's like MPM for Windows.
-
59:38
>> Oh, okay.
-
59:39
Chocolately, MPM for Windows.
-
59:41
There you go.
-
59:42
>> [INAUDIBLE] just like he did [CROSSTALK]
-
59:45
>> Oh, so it just does it all for you?
-
59:47
[CROSSTALK] [INAUDIBLE] >> Sweet.
-
59:51
Cuz the shell in Windows is a little bit
-
59:53
different than the shell in, on Macs and Unix machines.
-
59:57
But it's, it's like only gonna be about 10% different, I would say.
-
1:00:02
Like for most of them that we do on the front end.
-
1:00:06
Any other.
-
1:00:07
For Macs, like, there's a thing called BRU.
-
1:00:10
Or that you can install and BRU does these heavy-lifting installs.
-
1:00:15
Like, it can install your PHP and stuff like that.
-
1:00:18
But BRU install node.
-
1:00:20
Whoop, it's done.
-
1:00:21
And then you're just, now you're running, basically.
-
1:00:23
And you can start building a website, so.
-
1:00:27
Yes, question.
-
1:00:28
>> Right now you [INAUDIBLE] [INAUDIBLE]
-
1:00:37
>> And it's running?
-
1:00:43
>> [INAUDIBLE] >> It's I mean,
-
1:00:52
in theory you could code a grunt file that triggers other grunt files or whatever.
-
1:00:58
That's pretty extreme.
-
1:00:59
[LAUGH] I wouldn't recommend it.
-
1:01:03
I would maybe recommend just working on one task at a time.
-
1:01:06
If possible.
-
1:01:06
[LAUGH] Generally, like closing some drawers and opening others is, is helpful.
-
1:01:12
But Yeah I mean it, it might not work for
-
1:01:16
you just in that sense,and stick to what you're comfortable with.
-
1:01:19
But if you're like dude this project is gonna be six
-
1:01:23
months long and I'm like gonna do this everyday of my life.
-
1:01:27
Like spend, spend an afternoon or a whole day getting a grunt file
-
1:01:31
set up and just use that, like try just for a whole project, so.
-
1:01:36
I mean I've, yeah I've done that and like, I'm in the situation where like
-
1:01:40
my co-workers would rather just use the GUIs,
-
1:01:43
rather than using grunt and stuff like that.
-
1:01:45
So it's like, it, it gets a little weird, cuz it's like they
-
1:01:48
mi, like one, mess with some javascript and didn't compile and send out.
-
1:01:52
And so I'm like well you have to use the command line now,
-
1:01:55
but But the whole idea is like, like, just use what you're comfortable with.
-
1:02:00
If, if you just wanna do the Sass portion, you could also just
-
1:02:03
do the Sass stuff with CodeKit and then use Grunt for everything else, so.
-
1:02:09
Cool.
-
1:02:10
>> Awesome.
-
1:02:11
That's Ron [UNKNOWN].
-
1:02:14
That's awesome.
You need to sign up for Treehouse in order to download course files.
Sign up