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