1 00:00:00,000 --> 00:00:03,830 [The Treehouse Show] I'm Nick Pettit. >>I'm Jason Seifer. 2 00:00:03,830 --> 00:00:07,010 And you're watching The Treehouse Show, your weekly dose of Internets, 3 00:00:07,010 --> 00:00:10,730 where we talk about all thing web design, web development, and more. 4 00:00:10,730 --> 00:00:15,060 In this episode we'll be talking about magical navigation, keeping an eye on your system, 5 00:00:15,060 --> 00:00:20,280 as well as the usual discussion of everything that's new with responsive design techniques. 6 00:00:20,280 --> 00:00:28,050 Let's check it out. [? music ?] [The Treehouse Show] 7 00:00:28,050 --> 00:00:33,370 First up is MagicNav.js, which is a jQuery plug-in 8 00:00:33,370 --> 00:00:37,810 for generating navigation links on your web page. 9 00:00:37,810 --> 00:00:42,020 It's available at johnpolacek--Is that how you pronounce it, Jason? 10 00:00:42,020 --> 00:00:48,270 Polacek. >> Polacek.gethub.com/magicnav.js. 11 00:00:48,270 --> 00:00:56,080 And basically, if you just run magicnav.js, it will take all those first-level headlines 12 00:00:56,080 --> 00:01:03,620 and turn them into links that you can click on and then smoothly scroll down to other parts of the page. 13 00:01:03,620 --> 00:01:09,530 So, it's pretty easy to use. Basically you just select your H1 elements there, 14 00:01:09,530 --> 00:01:15,720 and then you say what the ID of the elements be that you want to put them inside. 15 00:01:15,720 --> 00:01:19,740 So, pretty handy. It has a very specific use case, I think, 16 00:01:19,740 --> 00:01:23,110 but, I don't know. I think it could come in handy in a few places. 17 00:01:23,110 --> 00:01:26,240 I'm a big fan of anything that saves me having to do a lot of typing, 18 00:01:26,240 --> 00:01:28,450 which that definitely does. >> Very true. 19 00:01:28,450 --> 00:01:30,900 But, if you are coding your sites semantically, you know, 20 00:01:30,900 --> 00:01:34,090 that could be a really, really big help. >> That's true as well. 21 00:01:34,090 --> 00:01:36,340 Next up, we're going to be talking about glances. 22 00:01:36,340 --> 00:01:40,290 Glances is a little Python application for the command line 23 00:01:40,290 --> 00:01:42,280 so it's a little bit more developer-related. 24 00:01:42,280 --> 00:01:46,220 This lets you keep an eye on different aspects of what's going on with your system. 25 00:01:46,220 --> 00:01:50,470 And by your system, I mean your computer, the thing you're developing with. 26 00:01:50,470 --> 00:01:51,710 Thank you for clarifying that. >> No problem. 27 00:01:51,710 --> 00:01:55,870 I figure of all the things I would clarify, it would be what your system is. 28 00:01:55,870 --> 00:01:59,620 So this is going to let you take a look at things like CPU load, network load, 29 00:01:59,620 --> 00:02:03,420 and how much memory different applications are taking up. 30 00:02:03,420 --> 00:02:06,290 It's a command line application, so it's easy. 31 00:02:06,290 --> 00:02:08,530 Just go ahead and run glances. 32 00:02:08,530 --> 00:02:12,000 If you want to take a look at the code for it, it's developed in Python. 33 00:02:12,000 --> 00:02:21,320 So, it shows you disk I/O, what volumes you have mounted as well as what all your CPUs are doing. 34 00:02:21,320 --> 00:02:29,580 So go ahead and check that out at nicolargo.github.com/glances. 35 00:02:29,580 --> 00:02:31,880 Well done. >> No problem. >> All right. 36 00:02:31,880 --> 00:02:40,840 Next up is slabtext, and this is another jQuery plugin that's handy for creating responsive designs. 37 00:02:40,840 --> 00:02:46,010 Now this is actually similar to Paravel's FitText jQuery plugin, 38 00:02:46,010 --> 00:02:50,080 except it uses what's called a slabtype algorithm, 39 00:02:50,080 --> 00:02:55,890 so you can have multiline headlines instead of just a single line of text 40 00:02:55,890 --> 00:02:58,970 that fits to a responsive design. 41 00:02:58,970 --> 00:03:03,860 So, if I were to resize this browser, it would actually reflow this headline, 42 00:03:03,860 --> 00:03:07,000 and it would all be spaced proportionally. 43 00:03:07,000 --> 00:03:11,860 Now this is pretty handy because so many headlines are multiline, 44 00:03:11,860 --> 00:03:15,590 and you want them to be really big and kind of take up the whole page, 45 00:03:15,590 --> 00:03:18,060 no matter what size the device is. 46 00:03:18,060 --> 00:03:23,170 And FitText did a pretty good job of that, but this takes that just one step further. 47 00:03:23,170 --> 00:03:28,000 >> You know where this would be really useful, Nick, is displaying tweets full-screen on webpages. 48 00:03:28,000 --> 00:03:32,770 So, just 140 characters across a 27-inch screen. >> Yep. One single tweet. 49 00:03:32,770 --> 00:03:37,120 Jason, you're always thinking practically. >> Well, you know. [laughter] 50 00:03:37,120 --> 00:03:40,140 So, Nick, it's time for our app review. >> Let's check it out. 51 00:03:40,140 --> 00:03:45,440 [? music playing ?] [App Review] 52 00:03:45,440 --> 00:03:49,700 Nick, how often do you write "markdown"? >> All the time, actually. 53 00:03:49,700 --> 00:03:55,250 All the time? Well, I have a tool for you. It's called Marked. You can get it at markedapp.com. 54 00:03:55,250 --> 00:03:59,720 This is a markdown program that's going to display 55 00:03:59,720 --> 00:04:03,550 the markdown that you're writing in another application. 56 00:04:03,550 --> 00:04:08,210 Most people prefer to write markdown or anything like that in a text editor, 57 00:04:08,210 --> 00:04:11,940 and what this will do, anytime you save a file, it's going to go ahead 58 00:04:11,940 --> 00:04:16,920 and redisplay it in another window with all the formatting intact. 59 00:04:16,920 --> 00:04:21,240 The thing that's really nice about this program is that it has different style sheets 60 00:04:21,240 --> 00:04:26,300 that it can output, so you can have, you know, book style, different text. 61 00:04:26,300 --> 00:04:31,160 You can even do custom style sheets, and it will either export to HTML or PDF for you. 62 00:04:31,160 --> 00:04:33,730 I have a little demo right here if you want to see it. 63 00:04:33,730 --> 00:04:38,130 I've got TextMate 2 over on the left and Marked over on the side, 64 00:04:38,130 --> 00:04:43,160 and you can see as I'm writing things, they show up on the right side in Marked 65 00:04:43,160 --> 00:04:46,020 as soon as I press the Save button. 66 00:04:46,020 --> 00:04:49,020 So a great app; it is a paid app. They are, unfortunately, not sponsoring this show. 67 00:04:49,020 --> 00:04:52,890 [both together] Shame on them. Wow! That was awesome. 68 00:04:52,890 --> 00:04:58,040 But that is available in the App Store or at markedapp.com. 69 00:04:58,040 --> 00:05:02,650 That's pretty cool. So what are you thinking, Jason? 70 00:05:02,650 --> 00:05:07,420 I'm glad you asked that, Nick. I'm thinking async these days. [laughter] 71 00:05:07,420 --> 00:05:10,970 What I'm actually referencing, strangely enough, is not how I'm thinking 72 00:05:10,970 --> 00:05:16,540 but an article by Chris Coyier over on the CSS Tricks website on "Thinking Async." 73 00:05:16,540 --> 00:05:22,270 And in this article, he's talking about when you load JavaScript from third party websites, 74 00:05:22,270 --> 00:05:24,640 you should do it asynchronously. 75 00:05:24,640 --> 00:05:28,380 What this is going to do is if there's some holdup on another website 76 00:05:28,380 --> 00:05:32,610 it's not going to impact the load time of your own site. 77 00:05:32,610 --> 00:05:37,850 Now there are a few different techniques and a few different approaches for how to do this, 78 00:05:37,850 --> 00:05:43,910 and in this article, which is definitely, definitely worth reading, he goes through 79 00:05:43,910 --> 00:05:48,140 and tells you a few different ways to do it, and you can figure out your preferred method. 80 00:05:48,140 --> 00:05:51,310 This is something that you're really going to want to keep in mind these days 81 00:05:51,310 --> 00:05:55,390 as sites load more and more external JavaScript for different plugins, and, 82 00:05:55,390 --> 00:05:59,430 you know, anything you need, like buttons, tweet this buttons, share buttons, 83 00:05:59,430 --> 00:06:03,230 email everybody you've ever met buttons, and who even know what's next. 84 00:06:03,230 --> 00:06:06,180 >> That's a lot of stuff to load in. >> Yeah. Well you-- 85 00:06:06,180 --> 00:06:08,840 >> So that will definitely help. >>You want to have all those buttons on your site. 86 00:06:08,840 --> 00:06:11,130 Most definitely. The more buttons the better. 87 00:06:11,130 --> 00:06:14,950 But it is a great technique. >> Terrible advice. All right. 88 00:06:14,950 --> 00:06:20,170 Next up is typicons or type icons. We couldn't quite figure out how to pronounce this, 89 00:06:20,170 --> 00:06:25,410 but basically it's at typicons.com. Typicons.com. 90 00:06:25,410 --> 00:06:30,100 >> What are typicons, Nick? >> Jason, I'm so glad you asked. 91 00:06:30,100 --> 00:06:36,440 Type icons are basically a vector-based web font kit that you can go ahead 92 00:06:36,440 --> 00:06:43,780 and embed in your web app or your native iPhone or Android application, 93 00:06:43,780 --> 00:06:49,630 and it will allow you to use a font to display icons. 94 00:06:49,630 --> 00:06:52,680 Now, this is pretty handy because that means you don't have to include 95 00:06:52,680 --> 00:06:57,030 a whole bunch of different assets for all these tiny different icons. 96 00:06:57,030 --> 00:06:58,820 You can go ahead and just throw in one font, 97 00:06:58,820 --> 00:07:02,830 and then you have access to this whole nice, consistent icon set. 98 00:07:02,830 --> 00:07:09,170 The thing is it's a little bit limited in scope, but I think it haskind of all the basic things that you might need. 99 00:07:09,170 --> 00:07:13,420 And the nice thing about it being a font is that it's vector-based, 100 00:07:13,420 --> 00:07:18,200 so it's ready for all those fancy new retina displays. >> That's awesome. 101 00:07:18,200 --> 00:07:23,490 It is pretty awesome. >> I wish they would include some sort of pronunciation on the site. 102 00:07:23,490 --> 00:07:26,490 I think that's the only thing that's missing really. [laughter] 103 00:07:26,490 --> 00:07:33,180 So next up, you know, we talk about retina displays and ways of displaying retina images all the time. 104 00:07:33,180 --> 00:07:37,200 We've gone over plugins that allow you to displays graphics 105 00:07:37,200 --> 00:07:39,770 specifically for retina displays in JavaScript. 106 00:07:39,770 --> 00:07:46,230 Recently came across a blog post by Shaun Inman on how to do this automatically and conditionally. 107 00:07:46,230 --> 00:07:49,710 Now, his approach to this is pretty neat. 108 00:07:49,710 --> 00:07:53,160 He says as soon as a retina-enabled device comes to your website, 109 00:07:53,160 --> 00:07:57,750 what you're going to want to do is set a cookie using JavaScript 110 00:07:57,750 --> 00:08:01,560 saying that the device is a retina device. 111 00:08:01,560 --> 00:08:06,720 From there, on your web server, you're going to use conditional rewrite rules 112 00:08:06,720 --> 00:08:12,360 to automatically redirect the browsers to the specific retina image 113 00:08:12,360 --> 00:08:17,620 as soon as they load the page after that initial request. 114 00:08:17,620 --> 00:08:22,250 This is a really interesting approach that I think has, you know, a lot of credit for picking up. 115 00:08:22,250 --> 00:08:27,270 Simiilar in nature to keeping all of you retinafied images in a certain directory 116 00:08:27,270 --> 00:08:28,770 and using convention to serve them, 117 00:08:28,770 --> 00:08:32,289 but definitely want to keep an eye on. >> Pretty nifty. 118 00:08:32,289 --> 00:08:40,000 Next up is Sneak Peek It available at sneakpeekit.com, 119 00:08:40,000 --> 00:08:42,919 and basically if you're feeling like a hipster, 120 00:08:42,919 --> 00:08:48,340 these are sheets of paper that you can go ahead and print out 121 00:08:48,340 --> 00:08:52,800 and then have something to actually physically drawn your mockups on. >> Wow! 122 00:08:52,800 --> 00:08:56,110 >> I know that's a novel concept. >> What year is it? 123 00:08:56,110 --> 00:09:00,240 I feel like I'm transported back to the 90s here. 124 00:09:00,240 --> 00:09:06,560 Basically, you know, a lot of web designers these days use digital tools to mockup their websites. 125 00:09:06,560 --> 00:09:12,600 They might do in Illustrator or PhotoShop or Fireworks or, you know, the various Adobe apps. 126 00:09:12,600 --> 00:09:17,640 There's also apps that are specifically for mocking things up, like Balsamic Mockups. 127 00:09:17,640 --> 00:09:21,340 That's one of my favorites. There's also web-based tools, like Mockingbird. 128 00:09:21,340 --> 00:09:23,720 So there's a whole bunch of stuff to check out there. 129 00:09:23,720 --> 00:09:27,530 But if you would like to take out a pencil and paper, 130 00:09:27,530 --> 00:09:35,100 Sneak Peek It provides really great downloadable PDFs that you can go ahead and print out 131 00:09:35,100 --> 00:09:38,320 and then just draw your website right on there. 132 00:09:38,320 --> 00:09:41,160 And they have all of the nice measurements for, like, a grid-based layout, 133 00:09:41,160 --> 00:09:45,770 and you can also go ahead and do stuff for the iPad and more. 134 00:09:45,770 --> 00:09:47,860 So pretty nifty. 135 00:09:47,860 --> 00:09:52,080 I wonder, do they include guidelines for typewriters on there as well? 136 00:09:52,080 --> 00:09:57,800 I think so, Jason. I think there are guidelines for typewrites on there just for you. 137 00:09:57,800 --> 00:10:02,720 All right. Now next up there is another jQuery plugin called jQuery Pictures. 138 00:10:02,720 --> 00:10:09,740 This is a plugin that is to "ease the design and transition towards responsive images." 139 00:10:09,740 --> 00:10:13,200 So this is going to use the new figure and picture tags 140 00:10:13,200 --> 00:10:17,350 and give you a little snippet of jQuery JavaScript 141 00:10:17,350 --> 00:10:20,640 that you can just use for, say, figures that are responsive. 142 00:10:20,640 --> 00:10:26,600 Call this picture method, and if you have provided the different sizes, 143 00:10:26,600 --> 00:10:32,960 it will display the different pictures when you resize your browser with the different media queries. 144 00:10:32,960 --> 00:10:38,810 Pretty simple plugin. Weighs in at 2 kB, so you have literally no reason not to use it, 145 00:10:38,810 --> 00:10:41,400 unless it doesn't make sense for your project. 146 00:10:41,400 --> 00:10:45,190 Pretty nifty. >> Yeah. Nice, nice plugin. >> Yeah. 147 00:10:45,190 --> 00:10:47,400 Well, Jason, what did we learn today? 148 00:10:47,400 --> 00:10:52,310 We learned that responsive design and retina images are still a thing 149 00:10:52,310 --> 00:10:54,500 that we have to look out for on the web. 150 00:10:54,500 --> 00:10:58,010 I think they're here to stay. >> Yeah. At least for a little while. 151 00:10:58,010 --> 00:11:02,030 Just a little bit. You can find use on Twitter. I'm @nickrp. 152 00:11:02,030 --> 00:11:07,100 And I'm @jseifer. Thanks so much for tuning in to this episode of The Treehouse Show. 153 00:11:07,100 --> 00:11:12,930 For show notes and more, check out our YouTube channel at YouTube.com/gotreehouse. 154 00:11:12,930 --> 00:11:15,510 This episode was brought to you by Treehouse, 155 00:11:15,510 --> 00:11:20,100 the best way to learn web design, web development, mobile businesss, and more. 156 00:11:20,100 --> 00:11:23,400 You can check us out at teamtreehouse.com. 157 00:11:23,400 --> 00:11:25,740 Thanks so much for watching, and we'll see you next week. 158 00:11:25,740 --> 00:11:30,000 [? music ?] [The Treehouse Show]