Episode 79: Front-End Development Guidelines, Sublime Text, Sass and Compass

[MUSIC] 0:00 >> I'm Nick Petit. >> And I'm Jason Seifer. 0:00 >> And you're watching the treehouse show, you're weekly does of internets, 0:02 where we talk about all things web design, web development and more. 0:05 >> In this episode we're going to me talking about 0:08 front end development guidelines, sublime text, Sass and Compass, and more. 0:09 >> Let's check it out. 0:14 >> Let's do that. 0:16 [MUSIC] 0:17 >> First up is a really cool list of front-end guidelines from TMW. 0:23 >> I read that as TMRW, which is tomorrow. 0:28 I thought it was like a future post. 0:32 Like tomorrow's front-end guidelines. >> Nope. 0:34 Tomorrow is today with these front-end guidelines. 0:36 Here's the table of contents. 0:39 You can see that this is actually quite extensive. 0:41 We're not gonna go into all of this right here on the show. 0:45 But they 0:47 have some very common things that you might 0:48 encounter when doing front end development, such as indentation. 0:50 They suggest a default tab size. 0:54 As four they have a couple of guidelines for browser support. 0:58 Readability. 1:03 What type of markup you should be using. General markup guidelines. 1:04 How to quote attributes. That's a popular topic as well. 1:09 Lots of cool stuff here. Don't have time to go into all of it. 1:13 Definitely be sure to check this out because if you are new to coding. 1:18 Having really good coding conventions can help you out a lot. 1:21 >> I'm gonna be honest Nick, I usually set my tab size to two. 1:25 >> I do as well. 1:30 >> That's that's a Ruby thing, usually. >> Two spaces. 1:30 >> Two spaces. 1:34 The deuce. 1:34 Next up, we have a plugin for sublime text called sublime all. 1:35 Which is billed as quote one SublimeText all your devices. 1:40 Now, if you've ever used SublimeText before you can really 1:44 customize it and personalize it a ton of different ways. 1:48 However, if you have two or three computers 1:51 well, you're going to have to reconfigure it. 1:55 Hopefully the same way every single time. 1:57 Not so anymore with this plugin called Sublime All, or maybe Sublimall. 1:59 >> 2:05 Subliminal? >> Sublimall. 2:05 Sublimall. 2:07 So anyway very, very easy use, you just install the package. 2:08 You sync it, and then you stay in sync forever. 2:12 You just install that on all of your devices and boom. 2:15 You are good to go. 2:18 So, its super easy to install, you just 2:19 need to have seven-Zip installed, and then done. 2:22 Now I do recommend encrypting your settings for this plugin. 2:26 They're, it's a totally free service, but if you don't encrypt your 2:30 settings it can be seen by the developer if that matters to you. 2:33 Personally, I guess I'm a little bit of of a free spirit. 2:37 I don't really care if my, tab indention preferences 2:40 sync and people on the internet can see it. 2:44 I mean I just admitted it here two, two, two spaces is a tab. 2:46 >> Nothing to hide. >> Nothing to hide. 2:50 >> Next up is [CROSSTALK]. 2:52 [LAUGH] We all have some shame to hide. >> Barely concealing that one. 2:55 >> Next up is Sachae where you can discover Sass and Compass extensions. 2:59 This is actually built by one of our very own tree house employees. 3:06 >> Ooh. 3:10 >> Which is. 3:10 Pretty cool, had some help on this. >> Is it maybe sash? 3:11 >> Sash? 3:14 >> Yeah. 3:15 >> I thought it was sashay, like the dance move. 3:15 >> Yeah, but you would expect an accent on the e, 3:18 right? >> Mm mm. 3:20 I think you're right. >> I think the accent would be an aigu. 3:22 >> I could be saying this wrong. Point being you can discover Sass and 3:26 Compass extensions. Sass of course allows you to pre-compile 3:30 your CSS and make it a little bit more enhanced with things like variables, 3:36 mixings and so on. However, you can further enhance Sass and 3:41 Compass, which is a Sass framework Using extensions. 3:46 And it can be a little bit tricky navigating and 3:50 discovering new extensions, but this tool makes it pretty easy. 3:53 Here we have a table with the name of several popular extensions and then 3:58 there's a description for each one, so you can get a quick TLDR on what each one is. 4:04 There's a couple of tags so 4:10 you can navigate the site by tag, and you can see how many stars it has on Get Hub. 4:11 Now when I click on each one of these, it will take you 4:18 to the GetHub page where you can go ahead and pull the code. 4:21 Pretty nifty. 4:25 >> Very, very nice. 4:27 We're gonna sashay over onto the next link right here, which is called Instant Click. 4:28 This is a new JavaScript plug-in that quote, 4:32 dramatically speeds up your website, making 4:36 navigation effectively instant in most cases. 4:38 Now, what this does is, it preloads the next page 4:41 that your user is going to go to in the background. 4:45 It uses a couple different technologies to get this done. 4:49 It uses push state and the ajax, which is, quote, a combo known as pjax. 4:52 Now, if your browser doesn't support push state, this fully degrades. 4:57 So, what happens is, somebody goes and clicks on your site and 5:02 while they're clicking on the link, gets reloaded and replaced in the page. 5:06 So, the reason that they wanna do this is because there is 5:10 some latency between the mouse down event and when everything actually gets fired. 5:12 There's a demo on here, so check this out. 5:17 This will tell you the delay between your 5:20 hover, mouse down, touch start, and click events. 5:21 So here's a normal link. Click it. 5:24 You can see 5:26 I hovered for 1825 milliseconds and the mouse down event was 135 milliseconds. 5:27 So really, really useful plugin. 5:34 You can find a link to that in the show notes which you can get to at 5:36 youtwo.com, youtube.com/gotreehouse or search for us on iTunes at 5:40 the Treehouse Show and rate us while you're there. 5:44 >> So does Instant Click actually try to predict what I'm gonna do next? 5:47 >> It is. >> They don't know me. 5:52 >> Yeah, they do. 5:54 You, you're an open book to this Java Script plugin. 5:56 >> Next up is CSS A to Z which is an entirely HTML, CSS animated sketch. 6:00 For each letter. 6:08 And there's a new one every, for every day. 6:09 So this is pretty cool. N is for nautilus. 6:13 M is for metronome. L is for lava lamp. 6:17 Lots of really, pretty cool ones here. I'm very impressed by this. 6:21 Library that they've built up but I think 6:26 the most impressive thing here obviously is the animation. 6:29 So if you are new to CSS animation and you 6:32 may be wondering how to do cool things like this. 6:35 You can check this out and inspect the code and 6:39 see how it's done. 6:43 >> Alright, we're gonna, we're gonna go ahead and move on to the next link. 6:45 Which is over on the Eight Arms Blog. 6:47 Which could also be a spider blog, with that name. 6:49 It's called Go Ahead with the treehouse show. 6:52 Now we're not gonna play this right here. 6:56 But I, I absolutely love this. 6:57 They say they're massive fans of the Treehouse show. 6:59 Well, clearly they have great taste. 7:01 And they made a short video. 7:02 Which goes through and shows different clips of us saying 7:05 go ahead. I guess we say that a lot. 7:08 >> I never say that go ahead. 7:11 >> It's pretty much all you in the video, 7:13 and I don't know, I think it's pretty cool. 7:15 Pretty nifty. 7:17 >> Go ahead and check that out. 7:18 >> Yeah. 7:19 >> Next up, this is really cool app called Hemingway. 7:20 Hemingway makes your writing bold and clear, 7:23 so if your'e trying to check your copy. 7:26 You can go ahead and paste it 7:28 into Hemingway, there's that word again, go ahead. 7:30 >> [LAUGH] 7:33 >> I wish 7:33 Hemingway would highlight that for me. You can check the readability here. 7:33 It says grade seven, which is perfect for Jason, and over here on the side bar, 7:37 you can see which sentences are hard to 7:43 read, so this sentence it's highlighting in yellow. 7:45 That's hard to read. 7:48 You can see sentences that are very hard to read. 7:49 It highlights adverbs, words or phrases that could be simpler. 7:53 And uses of 7:58 the passive voice which is kind of a, a grammatical no-no. 7:58 There's lots of cool stuff here but like I said if you paste in your own text 8:04 It will give you good tips about how you can improve your copy. 8:10 So, very cool stuff. 8:16 >> That is very cool. 8:18 Next up we have a project called local Forage which sounds pretty similar 8:19 to local storage. Now this is a little library from Mozilla. 8:24 That really helps improving the offline experience of your web app by 8:28 using a synchronist storage, but it's using a local storage, like API. 8:32 Now, the reason that you're gonna want to use this, is if 8:38 your application goes offline, boom, you can just pick up using local storage. 8:41 And maybe use callbacks for later. 8:45 Now, callbacks are primarily how this differs 8:47 from using the local storage API, hence why they call it local forage. 8:49 So you can see, you can set an item with a key and then this is what 8:54 you would do it by, with local storage, but 8:58 with local forage, you just use that particular callback. 9:00 You can also use JavaScript promises if that's what you're into, and it also 9:03 comes with a poly fill for browsers that don't yet support those promises. 9:09 So that's 9:14 it, that's about all we have for this, this lovely episode. 9:14 [MUSIC] 9:16 Nick, who are you on Twitter? >> I'm @nickrp. 9:17 >> And I'm @jseifer. 9:19 For more information on anything we talked about, check out our shownote 9:21 at youtube.com/gotreehouse/ or search for us in iTune at the Treehouse show. 9:25 >> And of course, if you'd like to see more videos like this one about web 9:29 design, web development, mobile business and so much 9:32 more, be sure to check us out at teamtreehouse.com. 9:35 Thanks so much for watching and we will see you next week. 9:39

You need to sign up for Treehouse in order to set up Workspace

Sign up