Episode 7: Web Development Tips

[The Treehouse Show] 0:00 I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching The Treehouse Show. 0:02 Your weekly dose of Internets where we talk about all things 0:05 web design, web development, and more. 0:08 In this episode, we'll be going over a typing tutor for programmers. 0:11 We're going over different design tricks that you can use 0:14 in your applications as well as our first ever App review. 0:17 Ooooh. >>Let's get into it. 0:20 [The Treehouse Show] 0:26 As a developer, one thing that you're going to be doing a lot-- 0:29 in fact, most of the time, is typing. 0:32 Now, normal typing tutors aren't going to get all of the extra special characters 0:34 that you need to type while coding such as brackets, colons, ampersands-- 0:39 all the wonderful characters you have to type all the time. 0:43 Now, recently a website called typing.io came out, which features different 0:46 exercises to go through and practice your typing skills. 0:52 You can check that out over at typing.io. 0:56 A really great practice runs in here and just get your typing skills, pardon the pun, up to speed. 1:00 I see what you did there Jason. That's really clever actually. 1:07 Huh? >>Yeah. >>Huh. Oh, that was good. 1:11 Recently, there's a really cool article on TechCrunch about 5 design tricks 1:14 that Facebook uses to affect your privacy decisions. 1:19 It's really well worth the read, but I just want to go over just the first 1:23 couple of things that Facebook change recently. 1:27 First, they have this single button trick as TechCrunch calls it 1:31 where they used to have an allow and don't allow button 1:35 when an App was requesting permission for your information. 1:39 Now, they've simplified that to a single button which just says "Play game." 1:44 Now, I think that's actually pretty smart from a user's perspective because basically 1:49 you're just saying either you're going to hit the button or you're not going to. 1:55 All right, so it narrows the choices for the user and I think the don't allow button 2:00 is kind of strange actually when I see this weird button here. 2:06 But, it also doesn't give the user the chance to let's say deny that information from the App. 2:10 Right--not with the explicit button click. 2:18 They can hit the back button or go to a different website, but I missed the don't allow button. 2:20 I almost instinctively click it all the time because I don't want anybody 2:26 having all of my information that I already put on the Internet even more public. 2:29 It sometimes feels good to hit that don't allow button. >>Yeah. 2:34 Another trick that they're using is what TechCrunch calls the tiny gray font trick. 2:38 Basically, they used to have some bold fonts next to their allow and don't allow buttons, 2:44 and now they've reduced that to just tiny gray text. 2:50 So basically, they've taken the fine print and made it actually look like-- >>Even more fine. 2:53 Fine, fine print--which again, from a design perspective, I feel like it make sense. 2:58 It's not stuff that people are always going to necessarily read. 3:05 I feel like it's almost like an end user license agreement just in a very TLDR form. 3:09 Which means too long, didn't read for those of you listening and don't know what that--- 3:15 That's the longer form of too long, didn't read or TLDR. 3:20 I find it really interesting how different designs can affect your decisions 3:24 and what you're going to do on a website. 3:29 Yeah, definitely, but well worth the read. 3:30 Next up, if you're looking to learn the Python language, 3:34 head on over to pythonbooks,revolunet.com. 3:38 There is a huge collection of different books to learn Python and Django 3:43 and even looking games with Python, and these are all completely free to read. 3:48 Select any one, just click it, and boom--good to go. Read up on your Python. 3:52 Python is actually a really cool language when you get into it, 3:58 very similar to Ruby, except in syntax. 4:01 Cool stuff. Next up is big screen. 4:04 Big screen is basically a little piece of JavaScript that you can include 4:07 on your website to access the JavaScript Fullscreen API. 4:10 So if you have a nice picture on your website and you want people to go ahead and click it 4:15 and enhance and let them see the the fullscreen image, you can go ahead and do that. 4:20 So pretty nifty, and I, just from a design perspective, love that they're including 4:25 "Why should I use it?" right down the webpage because that's exactly the question I had. 4:31 Why would you want to just drop this into a webpage, make sense in general. 4:36 But basically what big screen does that's really nice is it smoothes out 4:40 browser inconsistencies and a lot of bugs that prevents people from using 4:46 that JavaScript Fullscreen API very smoothly. 4:51 Yeah, I understand there's a lot of really minute details you have to 4:55 consider when you're going fullscreen. 4:58 I don't like considering minute details when I'm trying to create a masterpiece of a website. 5:00 You're thinking about the big picture. >>That's right. >>>Right. 5:05 I'm thinking about the big screen. I get it. 5:08 But it also makes it really easy to make images fullscreen from an iframe, 5:12 which I actually didn't know this apparently on the the Big Screen site 5:17 that they're saying that that's actually particularly difficult. 5:21 So, it's nice that they smooth that out as well and it also works for video, which is really cool. 5:24 It weighs in at just under 1 kilobyte when it's g-zipped and minified, which basically means 5:29 that it's not going to have much of an impact at all on your pageload times. 5:34 That's awesome. >>That's pretty much it for big screen. 5:37 Next up is our very first App Review. 5:40 [App Review] 5:45 The App that we're going to be taking a look a look at today is called Skitch. 5:49 Skitch is just a quick little App for drawing attention to what you're working on. 5:52 This is really useful in a client setting where you're doing some work for a client, 5:56 making some changes to a site, you can use Skitch to capture any area of your screen 6:01 and then add text or arrows or even some different shapes on there. 6:06 You can get this over at skitch.com. It was recently purchased by Evernote. 6:10 You'll see that there's different Evernote sharing options in the App, 6:15 and if I take Chrome at a fullscreen here, I can go ahead and bring up Skitch. 6:19 Now, I've got a shortcut key to do it. Here's what the App looks like. 6:24 This has a screenshot that I took earlier in the day of our live show Trello board 6:28 and if I wanted to call out a certain area of the screen, I can click the arrow button 6:32 and then draw something to it and then if I want to label it say, 6:37 "This is a part of the screen"--ain't that cool. 6:41 The nice thing about it though is you get this little drag me icon 6:46 and you can drag that anywhere you want to. 6:49 This could go into an email, it could go into Cloud App, 6:51 or pretty much wherever you want to do. 6:55 Skitch is a great App--I use it all the time, just for capturing parts of screens or whatever-- 6:58 anything on the screen--it does full windows. You can do partial windows. 7:05 So check that out at skitch.com. 7:08 I find it really, really useful and pretty much integrated into 7:10 my muscle memory for day-to-day life--CMD + SHIFT + 5. 7:16 Once you start using it everyday, it become a little bit essential. >>Yeah. 7:18 It's pretty strange how it sneaks up on you like that. >>Pretty cool. 7:23 Next up is JS Plum, which is basically this really cool tool that allows you to create 7:26 these crazy-looking charts where you can drag these elements around 7:32 and maintain connections between them. 7:37 There's a couple of different type of charts. 7:40 I'll go ahead and just select a different one here where you can go ahead and drag 7:44 connections around and it says "Do you want to connect window 1 to window 2?"-- 7:48 Yeah, absolutely. Let's go ahead and look at another one. That may includes some animation. 7:53 So if you click on stuff and it will smoothly animate around. 7:59 You can actually use this with a couple of different libraries. 8:02 You can use it with new tools or you can use it with YY3, but of course, 8:07 I think most people are going to be using it with jQuery just because 8:13 it's the most popular JavaScript library out there. 8:17 Yes, something like 80% of websites use jQuery now. >>Yeah. 8:20 The thing that I was impressed by this, you can also use it with different rendering modes. 8:23 So you can not only render with SVG, you can also do this with the Canvas or even VML, 8:28 which I thought was pretty nifty. 8:35 Oh, that's interesting. >>Yeah. >>But we don't hear much about VML anymore. 8:37 No, we don't. That's why--I saw that and I was like "Geez, that's crazy." 8:41 It's way backward compatibility. >>Uh-huh, way back. 8:45 But, it's pretty cool stuff, you can go ahead and download JS Plum 8:49 on GitHub and put it on your website. 8:54 So next time your boss ask you to go ahead and put together 8:57 a drag and drop interface, just let it out. 9:00 You can go ahead and make it really easy on yourself. 9:04 Visually, it reminds me a little bit of Yahoo! Pipes--not in functionality but more it lets you do. 9:08 Just in the front end of Yahoo! Pipes. >>Yeah. >>Yeah. Cool stuff. 9:14 So next up, there is a blog post on some web development tips. 9:17 This is some really, really useful information from a former engineer at Digg, 9:22 and as you go through, this maybe not so much for a beginner to take a look at 9:28 and then read the list, keeps some things in mind, but when you get to a 9:33 more intermediate level of doing web development, fantastic tips in here. 9:36 Just going to call out a couple of things. 9:41 I don't have time to go over the whole article in the show but things to keep in mind 9:43 unless you're using a framework, you are most likely not protecting yourself 9:48 against things like cross site request forgery attacks, especially AJAX request. 9:53 So you have to learn about how to use AJAX setups so that you 9:58 include your different tokens by default. 10:03 Performance site, something we talk about on the show a lot is spriting your assets. 10:05 On previous episodes, we've gone over a few tools 10:11 that you can use to make CSS spriting a lot easier. 10:14 And just generally, really, really great advice on dealing with kind of larger scale 10:17 of web applications and websites and what goes into actually developing them. 10:24 So keep that in mind, check it out. The link will be in the share notes over on our page. 10:28 Pretty cool stuff. Next up, I'd like to finish out by talking about-- 10:33 Well, actually we have one more segment after me. I'm sorry. 10:38 I almost ended the show early there. It could have been a disaster. 10:40 Next up, we're going to talk about complex navigation patterns for responsive web design. 10:43 Now, this is something that I have actually given talks about in the past 10:48 because I think that as we move towards this new responsive web design era, 10:53 we have to develop--basically design patterns that are going to fit across mobile devices 10:58 including tablets and phones as well as desktops. 11:05 Because we've established a lot of design pattern that will work for desktops, 11:08 but we need to kind of modify those so that they work across a whole array of devices. 11:14 And I really like this blog post from Brad Frost when he talks about basically just that. 11:20 He show us as how navigation can be modified as a design pattern across various devices. 11:26 The one I'd like to highlight is down at the bottom here where on the 11:33 World Wildlife Fund's responsive website, they have these drop-down menus 11:38 where you can go ahead and look at species, places, and threats, 11:43 and then you can select something underneath that. 11:48 When you go down to the mobile size, they actually just have that top level 11:50 with navigation, so you click on that and it takes you to the category landing page 11:55 instead of actually having you drill into the other various topics. 12:01 So pretty cool stuff, well worth read, and I like that it also breaks down the pros and cons 12:06 of each because there's not necessarily always going to be one 12:12 really good solution that works for everything. 12:15 Yeah. We're still in the really early days of all these stuff, so-- 12:18 For sure, I mean responsive website has been since around May of 2010, I think. 12:22 Wow, that's ancient in Internet years. 12:27 In Internet time, it does seem like a long time, but I think there's actually still 12:29 a whole lot more to discover there that we haven't really fully explored in terms of design. 12:33 One year is actually equal to 20 Internet years, just keep that in mind 12:38 when you're doing the Internet year math. 12:42 It's a cool factoid. Thanks for that Jason. 12:44 Next up, we're talking about that quick little project called Avgrund 12:47 and this is just a fun experiment, not that we would display on the show. 12:52 This is modal dialogues in jQuery and the cool thing about it is that it uses 12:57 CSS3 transforms to scale components of the background and blur things out 13:03 when you click the modal--nothing extremely useful about it, it's really just an experiment, 13:09 but it's so cool that you can do these things now and it's really smooth. 13:15 That's it, you can check out the code over on the GitHub 13:18 and again, the link will be in the share note so-- 13:22 Really like it--Avgrund. 13:25 Very cool stuff. Well, that's it for this week's episode of The Treehouse Show. 13:28 Jason, what did we learn today? 13:32 We learned that there's no right way to do responsive web design. >>That's right. 13:35 We also learned that the boss is probably going to ask you 13:40 for a drag-and-drop interface very soon. 13:43 You should be prepared for that and I think that's pretty much it. >>Yeah. 13:46 I think that's about it. >>I feel good. >>I feel great. Never been better. 13:52 If you want to learn more about web design or web development, check out teamtreehouse.com. 13:56 And be sure to check out previous episodes at youtube.com/gotreehouse. 14:01 That's it for this week's episode. I'm Nick Pettit and I'm @nickrp on Twitter. 14:07 And I'm Jason Seifer and I'm @jseifer on Twitter. >>We'll see you next week. 14:11 [The Treehouse Show] 14:17