Episode 105: SVG Backgrounds, Breach, FastShell

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of Internets 0:02 where we talk about all things web design, web development, and more. 0:04 >> For a free month's trial of 0:07 Treehouse, join Nick and I over at www.teamtreehouse.com/show. 0:09 In this episode of the Treehouse Show, 0:14 we'll be talking about SVG patterns for background. 0:15 Breach, a new web browser, Fast Shell and more. 0:20 >> Let's check it out. 0:24 [MUSIC] 0:25 First up is Pattern Bolts. 0:30 >> That was my nickname in high school. 0:32 >> If you ever wanted to apply a pattern background to your site. 0:34 This is a great way to do it. 0:39 >> That is not why, that was my nickname. 0:41 It says PatternBolt is a fine selection, unlike Jason. 0:44 >> [LAUGH] 0:47 >> Of SVG patterned background, packed in a single CSS or SCSS file. 0:48 So you can download the demo, or look at the GitHub repo. 0:56 But that's boring. 1:00 Let's play with this thing here. 1:01 >> Yeah, look at that, buttons. 1:02 >> You, you can select a pattern. 1:04 So you can click on. 1:05 Any one of these here and you can change the size of that pattern. 1:07 So, you can increase the size there or you could make it really, really small. 1:12 [CROSSTALK]. 1:18 >> Is this a website or an art shop that's been generated by magic? 1:18 >> It's pretty amazing, isn't it? 1:23 And then, you can select a color here and it will 1:25 bring up this nice little color picker, woah, look at that. 1:28 >> Am I on vacation right now. 1:32 >> Pretty. 1:33 >> From reality. 1:34 >> Nifty, I, really like it. 1:35 You can also put SVG patterns over a random picture. 1:38 So, just any picture at all that you like. 1:42 You can have that picture as the, the picture and website. 1:44 But then you can put a specific SPG 1:48 pattern over it so that's a really nice feature. 1:50 Anyway, this is a really cool project, definitely be sure to check this one out 1:52 adding a nice pattern background to your website is a nice way to spruce things up. 1:57 >> Yeah it's a nice touch. 2:02 Next up we have a project called Domflags. 2:04 This is a project that lets you assign a keyboard shortcut to different 2:07 dom elements that will pull up automatically when you open the dev tools. 2:11 Lets go ahead and check that out, you can see there's 2:15 a great description right there, create keyboard shortcuts to dom elements. 2:17 So, if we go ahead and look at the demo. 2:22 First, you install the Chrome extension. 2:24 Then you get this little DOMFLAGS panel. 2:27 And, the elements that you can make a shortcut to. 2:30 So if we click on that, we can see by 2:33 just adding this domFlag attribute, we create a shortcut to it. 2:36 And then, in the demo, you can toggle 2:41 this different flag and the attribute by clicking around. 2:44 So, once you do all this, why in the world would you want to do something like that? 2:48 Well, this would be really, really useful when you are 2:52 developing a site and you want to check the different styling. 2:55 Let's say you have to keep reloading a page to style a certain element. 2:58 Let's go ahead and watch how fast dom elements can be styled using this demo. 3:03 By the way, I really like this UI pattern of hovering over an 3:09 image to see an animated GIF of what is going on with the functionality. 3:12 So, it's very, very easy to use, you just add the domflag 3:17 attribute to any element and then once you open up the div tools. 3:21 This will automatically open. 3:27 You can set it to automatically go to the first element with a DOM flag attribute 3:29 or you can use this key combination right here to inspect a flag element. 3:34 Then, there are a couple more options, but we're not gonna go over them here. 3:39 Instead, you can check it out in the shownotes at YouTube.com/go treehouse. 3:42 Or search for us on iTunes, we're the treehouse show. 3:46 And make sure to check us out for 30 days free at team treehouse dot com slash show. 3:48 >> That's really, really cool. 3:53 I can remember numerous times where I was trying to navigate the dom 3:55 tree and find a specific element I was trying to target and work on. 3:58 >> Yeah, right click and inspect element. 4:01 Bye bye years of my life. 4:03 Just kept losing it over and over again. 4:05 So that's, that's super cool. 4:07 >> I can sympathize with losing it over and over again. 4:09 >> Next up is a new browser called Breach. 4:12 It's a browser for the HTML5 era and it's written entirely in JavaScript. 4:15 It's free, modular, hackable. 4:21 Well, what does that mean. 4:23 Modular means that everything in the browser is in module. 4:26 And it's basically a web app running in it's own process. 4:31 So, you can construct your own browsing experience. 4:35 It's open source, and that also means that it's 4:38 hackable, so if you want vertical tabs, or some 4:42 other UI pattern, you can write that yourself in 4:45 JavaScript and CSS.If you want a customised autocomplete engine. 4:48 >> I do >> you can rewrite it yourself. 4:54 [CROSSTALK] It's pretty cool and it's kind of 4:56 a newer concept, I haven't really seen this before. 5:00 There's this technology stack of HTML JavaScript CSS. 5:05 And then there's Chromium. 5:09 So, you know that it is secure, and performant. 5:11 And then there's Node.js. 5:15 But anyway, you can download it right now, and 5:16 start hacking it yourself to see how it works. 5:20 Very cool stuff. 5:23 >> Yeah I think we should make a 5:24 module that only lets you load the Treehouse Show. 5:24 >> That's a good idea. 5:27 Just open a new tab. 5:28 >> Yeah. 5:29 >> Try to type in a web address and it's tree house show. 5:29 >> Goes to tree house show every time. 5:31 Yeah, Most popular module ever. 5:33 >> That's a good idea. 5:36 >> Next up we have a project called Fast Shell. 5:36 This is an opinionated set of components to build web sites. 5:39 So, this is billed as a fiercely quick front end boiler plate work flow. 5:44 What is included? 5:50 Well, its got the HTML5 boiler plate. 5:52 It's got Sass and Oject-Oriented CSS or OOCSS. 5:55 It's 5:58 also got Gulpjs for compiling and concatenating your JavaScript files. 6:01 And, it also will connect you a local server to do live files reloads in action. 6:07 So, what is included? 6:14 Well, you get HTML5 framework. 6:15 The ARIA roles for web apps and different HTML5 semantics. 6:17 There is just a ton of stuff in 6:23 here, includes modernizer and the HTML5 shiv, and 6:25 of course it runs on Gulpjs which we 6:28 have talked about previously on the Treehouse show. 6:30 Anyway, this is a really great start which is why it is a boilerplate 6:34 for creating websites but it really takes a lot out of doing it yourself. 6:38 So, go ahead and check that out. 6:41 Next time you're trying to build a website. 6:42 >> Very nice, well next up over on 6:44 the Coding Horror blog about programming in human factors. 6:46 It's a really cool blog, definitely be sure to check it out. 6:50 There's a post called the just in time theory of user behavior. 6:52 And basically it says that the path of least 6:58 resistance is the path that most users will take. 7:01 So, encouraging the right things by making those things intentionally easy to do is a 7:04 good thing, and you can discourage the 7:09 wrong things by making those things intentionally difficult. 7:12 >> Or you can do the opposite with dark 7:16 user patterns like we've talked about on previous shows. 7:18 >> That's right, you, you could, so, you know, let your. 7:21 Let your conscience be your guide here. 7:25 >> Jiminy, that's a great, great idea! 7:27 >> But basically, it says that users will take the path of least resistance. 7:29 So, if you have throw a big manual upfront, they're not gonna read it. 7:34 And actually, I thought this was interesting. 7:39 It says, the bad news about this is that. 7:41 Clippy, the paperclip was right. 7:43 So what, what does that mean? 7:47 Well, basically the just in time pattern is saying that 7:49 you should deliver information right when the user should need it. 7:54 So, in this example, the user is typing up. 7:59 A comment and it's basically giving instruction about that 8:04 particular action that they're taking right as they're taking it. 8:09 So, instead of having to read a whole bunch of stuff and learn 8:13 how something works you can just start using it and learn as you go. 8:17 I think this is a. 8:21 Really good idea and really solidifies a lot of ideas 8:22 I've had myself but to articulate some really really well. 8:25 >> Yeah, nd little bit of an expansion on the whole blank slate pattern. 8:29 >> Yes, yes definitely useful in the blank slate. 8:32 >> Well, its about well, we have time for today Nick who are you in Twitter? 8:36 >> I am @nickrp. 8:39 >> And I am @JSeifer. 8:39 For more information on anything we talked 8:41 about, check out our show notes on youtube.com/gotreehouse. 8:42 You can also search for us on iTunes, We are the Treehouse Show. 8:45 >> And of course, if you like to see 8:49 more videos like this one about web design, web development, 8:51 mobile, business, and so much more, be sure to 8:54 sign up for a free 30 day trial at teamtreehouse.com/show. 8:57 Thank you so much for watching and we will see you next week. 9:02 >> [SOUND] 9:05

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

Sign up