Episode 8: Writing Markdown

[The Treehouse Show] I'm Nick Pettit. >>I'm Jason Seifer. 0:00 And you're watching The Treehouse Show, your weekly dose of Internets, 0:03 where we talk about all thing web design, web development, and more. 0:07 In this episode we'll be talking about magical navigation, keeping an eye on your system, 0:10 as well as the usual discussion of everything that's new with responsive design techniques. 0:15 Let's check it out. [? music ?] [The Treehouse Show] 0:20 First up is MagicNav.js, which is a jQuery plug-in 0:28 for generating navigation links on your web page. 0:33 It's available at johnpolacek--Is that how you pronounce it, Jason? 0:37 Polacek. >> Polacek.gethub.com/magicnav.js. 0:42 And basically, if you just run magicnav.js, it will take all those first-level headlines 0:48 and turn them into links that you can click on and then smoothly scroll down to other parts of the page. 0:56 So, it's pretty easy to use. Basically you just select your H1 elements there, 1:03 and then you say what the ID of the elements be that you want to put them inside. 1:09 So, pretty handy. It has a very specific use case, I think, 1:15 but, I don't know. I think it could come in handy in a few places. 1:19 I'm a big fan of anything that saves me having to do a lot of typing, 1:23 which that definitely does. >> Very true. 1:26 But, if you are coding your sites semantically, you know, 1:28 that could be a really, really big help. >> That's true as well. 1:30 Next up, we're going to be talking about glances. 1:34 Glances is a little Python application for the command line 1:36 so it's a little bit more developer-related. 1:40 This lets you keep an eye on different aspects of what's going on with your system. 1:42 And by your system, I mean your computer, the thing you're developing with. 1:46 Thank you for clarifying that. >> No problem. 1:50 I figure of all the things I would clarify, it would be what your system is. 1:51 So this is going to let you take a look at things like CPU load, network load, 1:55 and how much memory different applications are taking up. 1:59 It's a command line application, so it's easy. 2:03 Just go ahead and run glances. 2:06 If you want to take a look at the code for it, it's developed in Python. 2:08 So, it shows you disk I/O, what volumes you have mounted as well as what all your CPUs are doing. 2:12 So go ahead and check that out at nicolargo.github.com/glances. 2:21 Well done. >> No problem. >> All right. 2:29 Next up is slabtext, and this is another jQuery plugin that's handy for creating responsive designs. 2:31 Now this is actually similar to Paravel's FitText jQuery plugin, 2:40 except it uses what's called a slabtype algorithm, 2:46 so you can have multiline headlines instead of just a single line of text 2:50 that fits to a responsive design. 2:55 So, if I were to resize this browser, it would actually reflow this headline, 2:58 and it would all be spaced proportionally. 3:03 Now this is pretty handy because so many headlines are multiline, 3:07 and you want them to be really big and kind of take up the whole page, 3:11 no matter what size the device is. 3:15 And FitText did a pretty good job of that, but this takes that just one step further. 3:18 >> You know where this would be really useful, Nick, is displaying tweets full-screen on webpages. 3:23 So, just 140 characters across a 27-inch screen. >> Yep. One single tweet. 3:28 Jason, you're always thinking practically. >> Well, you know. [laughter] 3:32 So, Nick, it's time for our app review. >> Let's check it out. 3:37 [? music playing ?] [App Review] 3:40 Nick, how often do you write "markdown"? >> All the time, actually. 3:45 All the time? Well, I have a tool for you. It's called Marked. You can get it at markedapp.com. 3:49 This is a markdown program that's going to display 3:55 the markdown that you're writing in another application. 3:59 Most people prefer to write markdown or anything like that in a text editor, 4:03 and what this will do, anytime you save a file, it's going to go ahead 4:08 and redisplay it in another window with all the formatting intact. 4:11 The thing that's really nice about this program is that it has different style sheets 4:16 that it can output, so you can have, you know, book style, different text. 4:21 You can even do custom style sheets, and it will either export to HTML or PDF for you. 4:26 I have a little demo right here if you want to see it. 4:31 I've got TextMate 2 over on the left and Marked over on the side, 4:33 and you can see as I'm writing things, they show up on the right side in Marked 4:38 as soon as I press the Save button. 4:43 So a great app; it is a paid app. They are, unfortunately, not sponsoring this show. 4:46 [both together] Shame on them. Wow! That was awesome. 4:49 But that is available in the App Store or at markedapp.com. 4:52 That's pretty cool. So what are you thinking, Jason? 4:58 I'm glad you asked that, Nick. I'm thinking async these days. [laughter] 5:02 What I'm actually referencing, strangely enough, is not how I'm thinking 5:07 but an article by Chris Coyier over on the CSS Tricks website on "Thinking Async." 5:10 And in this article, he's talking about when you load JavaScript from third party websites, 5:16 you should do it asynchronously. 5:22 What this is going to do is if there's some holdup on another website 5:24 it's not going to impact the load time of your own site. 5:28 Now there are a few different techniques and a few different approaches for how to do this, 5:32 and in this article, which is definitely, definitely worth reading, he goes through 5:37 and tells you a few different ways to do it, and you can figure out your preferred method. 5:43 This is something that you're really going to want to keep in mind these days 5:48 as sites load more and more external JavaScript for different plugins, and, 5:51 you know, anything you need, like buttons, tweet this buttons, share buttons, 5:55 email everybody you've ever met buttons, and who even know what's next. 5:59 >> That's a lot of stuff to load in. >> Yeah. Well you-- 6:03 >> So that will definitely help. >>You want to have all those buttons on your site. 6:06 Most definitely. The more buttons the better. 6:08 But it is a great technique. >> Terrible advice. All right. 6:11 Next up is typicons or type icons. We couldn't quite figure out how to pronounce this, 6:14 but basically it's at typicons.com. Typicons.com. 6:20 >> What are typicons, Nick? >> Jason, I'm so glad you asked. 6:25 Type icons are basically a vector-based web font kit that you can go ahead 6:30 and embed in your web app or your native iPhone or Android application, 6:36 and it will allow you to use a font to display icons. 6:43 Now, this is pretty handy because that means you don't have to include 6:49 a whole bunch of different assets for all these tiny different icons. 6:52 You can go ahead and just throw in one font, 6:57 and then you have access to this whole nice, consistent icon set. 6:58 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. 7:02 And the nice thing about it being a font is that it's vector-based, 7:09 so it's ready for all those fancy new retina displays. >> That's awesome. 7:13 It is pretty awesome. >> I wish they would include some sort of pronunciation on the site. 7:18 I think that's the only thing that's missing really. [laughter] 7:23 So next up, you know, we talk about retina displays and ways of displaying retina images all the time. 7:26 We've gone over plugins that allow you to displays graphics 7:33 specifically for retina displays in JavaScript. 7:37 Recently came across a blog post by Shaun Inman on how to do this automatically and conditionally. 7:39 Now, his approach to this is pretty neat. 7:46 He says as soon as a retina-enabled device comes to your website, 7:49 what you're going to want to do is set a cookie using JavaScript 7:53 saying that the device is a retina device. 7:57 From there, on your web server, you're going to use conditional rewrite rules 8:01 to automatically redirect the browsers to the specific retina image 8:06 as soon as they load the page after that initial request. 8:12 This is a really interesting approach that I think has, you know, a lot of credit for picking up. 8:17 Simiilar in nature to keeping all of you retinafied images in a certain directory 8:22 and using convention to serve them, 8:27 but definitely want to keep an eye on. >> Pretty nifty. 8:28 Next up is Sneak Peek It available at sneakpeekit.com, 8:32 and basically if you're feeling like a hipster, 8:40 these are sheets of paper that you can go ahead and print out 8:42 and then have something to actually physically drawn your mockups on. >> Wow! 8:48 >> I know that's a novel concept. >> What year is it? 8:52 I feel like I'm transported back to the 90s here. 8:56 Basically, you know, a lot of web designers these days use digital tools to mockup their websites. 9:00 They might do in Illustrator or PhotoShop or Fireworks or, you know, the various Adobe apps. 9:06 There's also apps that are specifically for mocking things up, like Balsamic Mockups. 9:12 That's one of my favorites. There's also web-based tools, like Mockingbird. 9:17 So there's a whole bunch of stuff to check out there. 9:21 But if you would like to take out a pencil and paper, 9:23 Sneak Peek It provides really great downloadable PDFs that you can go ahead and print out 9:27 and then just draw your website right on there. 9:35 And they have all of the nice measurements for, like, a grid-based layout, 9:38 and you can also go ahead and do stuff for the iPad and more. 9:41 So pretty nifty. 9:45 I wonder, do they include guidelines for typewriters on there as well? 9:47 I think so, Jason. I think there are guidelines for typewrites on there just for you. 9:52 All right. Now next up there is another jQuery plugin called jQuery Pictures. 9:57 This is a plugin that is to "ease the design and transition towards responsive images." 10:02 So this is going to use the new figure and picture tags 10:09 and give you a little snippet of jQuery JavaScript 10:13 that you can just use for, say, figures that are responsive. 10:17 Call this picture method, and if you have provided the different sizes, 10:20 it will display the different pictures when you resize your browser with the different media queries. 10:26 Pretty simple plugin. Weighs in at 2 kB, so you have literally no reason not to use it, 10:32 unless it doesn't make sense for your project. 10:38 Pretty nifty. >> Yeah. Nice, nice plugin. >> Yeah. 10:41 Well, Jason, what did we learn today? 10:45 We learned that responsive design and retina images are still a thing 10:47 that we have to look out for on the web. 10:52 I think they're here to stay. >> Yeah. At least for a little while. 10:54 Just a little bit. You can find use on Twitter. I'm @nickrp. 10:58 And I'm @jseifer. Thanks so much for tuning in to this episode of The Treehouse Show. 11:02 For show notes and more, check out our YouTube channel at YouTube.com/gotreehouse. 11:07 This episode was brought to you by Treehouse, 11:12 the best way to learn web design, web development, mobile businesss, and more. 11:15 You can check us out at teamtreehouse.com. 11:20 Thanks so much for watching, and we'll see you next week. 11:23 [? music ?] [The Treehouse Show] 11:25

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

Sign up