Episode 69: JavaScript Footnotes, Geographic Autocompletion, Sortable Lists

Hi, I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> 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:05 >> In this episode, we'll be talking about 0:08 Javascript footnotes, geographic auto-completion, sortable lists, and more. 0:09 >> Let's check it out. >> [SOUND] 0:15 First up, we have a project called Big Foot. 0:22 This is a jQuery plugin for empowering footnotes. 0:25 I'm not sure about you but I personally find footnotes very empowering. 0:29 >> Mm. 0:32 >> anyway, let's go ahead and take a look at how it works. 0:33 If you see this little ellipses right here, these three dots, 0:35 click that, and whoa, looks like we have an inline footnote. 0:39 It's built for mobile devices and responsive designs. 0:42 Now, it says that footnotes on the web are a pain somewhere. 0:48 You click a tiny number, you get 0:51 transported somewhere near the bottom of the page, 0:53 you find the footnote, and then you have to go back to where you were before. 0:55 Now this script goes through and makes that process, quote, painless. 0:59 It automatically detects the footnote, and then turns 1:03 the link into an easy-to-click button, like so. 1:06 And that is exactly what it looks like. Isn't that absolutely wonderful? 1:09 Now, as you would expect from, basically, everything that we cover 1:13 on here, it is really, really easy to use. You include jQuery. 1:16 You include bigfoot. 1:19 And then you just call the $.bigfoot method and you are good to go. 1:21 Now it has a wealth of options from 1:25 customizing the delay, what happens to the page 1:28 when you hover over the object, where to 1:31 anchor it, just a, a ton of different things. 1:34 So if you do need to have footnotes on your webpage, this 1:36 is a great plugin to look into, extremely easy to use, very 1:38 configurable. Check it out. 1:42 You can find it in the show notes at youtube.com/gotreehouse. 1:43 Or in iTunes, search for us at The Treehouse Show. 1:46 >> Very cool stuff. 1:49 Well I'll be looking forward to seeing that 1:50 appear on Wikipedia next, with all those wonderful colors. 1:52 >> Good, good call Nick. Good call. 1:55 >> I think, I think it's coming soon. 1:57 All right, next up we have this really cool post 1:59 on Smashing Magazine about an Adobe Illustrator plugin called Specctr. 2:02 Now, 2:07 I actually have the plugin installed, so let's 2:07 go ahead and switch over to Adobe Illustrator. 2:10 This is the lite version of the plugin. 2:13 And here, I just went ahead and took a 2:15 screenshot of Treehouse, of our new Sass Basics course. 2:18 It's pretty awesome, by the way. 2:22 You should definitely check it out. 2:23 But anyway, here I have my Specctr Lite panel. 2:25 And it is a paid app, but there is a free version with some limited 2:29 functionality here, so I can go ahead and show you how this works. 2:32 Now let's say that I was making a layout, or I was making 2:37 a modification to a layout, and I wanted to put a new element here. 2:41 So I'm going to go ahead and drag out this box here. 2:46 I'm gonna say, well, I want this to be an 2:49 area for maybe some tips about Sass or something like that. 2:51 I could then go ahead and 2:56 go into Specctr here. 2:58 And I can click on one of these buttons like width and height, and boom, there we 3:00 go, it's gonna go ahead and add the width and height with some markers there, so 3:05 that when I pass this on to another 3:11 designer or developer that actually will slice this up 3:14 and turn it into real HTML and CSS, they can go ahead and note the exact dimensions 3:18 of each individual element. 3:24 Now if we switch back to the article and we scroll down here, 3:26 you can see some of the other settings that are available for Specctr. 3:30 We can, make, width and height markings. 3:34 We can also mark things with different types of arrows. 3:38 You can change all sorts of options. 3:43 So, for example, that red line and text didn't really look great 3:45 on that blue background but we could go ahead and change that in the options. 3:49 If we scroll down here, you'll see a couple of other examples. 3:53 Here we go. 3:57 You can see how you can go ahead 3:58 and label different parts of the layout using Specctr. 4:00 So pretty cool plugin. 4:04 It's, it is available for free but has limited 4:06 functionality unless you go ahead and pay for it. 4:10 But it seems 4:13 like it's, it's pretty nice if you're working on a larger team 4:14 and you want to go ahead and label different parts of your layout. 4:17 That's, that's really, really cool. 4:19 >> Mm-hm. 4:21 >> Definitely, definitely worth it. 4:21 Next up we have a library called Geo Complete. 4:23 now, this is really, really interesting if you have a text field. 4:26 And you want to have a place to go, you can start typing in part of a place. 4:29 It will automatically complete it. 4:35 It'll give you the auto suggest functionality like 4:37 you are used to maybe on Google or something like that. 4:39 And there's even an option to scroll a map there, as well. 4:42 >> Wow, that's amazing. 4:44 >> Yeah, it's really, really neat. 4:45 So this is a jQuery plugin, and here's a screenshot 4:46 of it, but if we click on it we can get 4:50 a little demo right here, so if we type in an 4:51 address, I type in O R, and it autocompletes Orlando, Florida. 4:54 Click the Find button, or press Enter, and boom, it appears right on the map. 4:59 Now as you can see, there is really, really not a 5:05 lot of code involved, but there are definitely ways to configure it. 5:08 There is a ton of stuff that you can do. 5:12 If you don't want it to autocomplete on the map, it doesn't 5:14 have to, but you can add a preview if you want to. 5:18 Latitude, longitude, just a ton of different options. 5:21 You can make the map draggable, zoom in, put in a ton of different details. 5:25 So really, 5:29 really easy to use jQuery plugin. 5:30 Go ahead and check it out if you need to 5:32 put maps on your site and have the results autocompleted. 5:34 >> Very cool stuff. Well, next up is OriDomi. 5:39 >> What'd you call me? 5:42 >> Which is a mix of origami or DOM, or document object model. 5:43 And on the site it says, the web is flat, but now you can fold it up. 5:49 So this is just a little 5:53 JavaScript library that allows you to fold up different DOM elements. 5:55 So you can go ahead and drag and they'll go ahead and fold up like so. 6:01 Now, if you go ahead and click on one of these demos here, it will create 6:07 a random folding function, so it'll just pick 6:11 one of the functions that are available in OriDomi. 6:15 And it will go ahead and fold them 6:18 like so. 6:21 So, pretty cool, not a whole lot to say about it. 6:22 Optionally, you can include it as a jQuery plugin or 6:26 you can just include it as a standalone piece of Javascript. 6:30 But if you want to go ahead and fold up some stuff on your site 6:34 like origami or maybe you're embedding a map and you want to unfold the map. 6:38 >> Ooh. 6:42 Ooh. >> Hm? 6:43 Hm? 6:43 You can go ahead and do that. >> Could 6:45 be good for like a restaurant menu, too. >> Yeah. 6:46 >> And it's responsive. >> Mm. 6:48 >> So, that's neat and it's really fun to say. 6:50 Next up, we have a, another JavaScript plugin. 6:52 This is called list.js. 6:55 This is a really interesting plugin that makes it really, 6:56 really easy to search filter, and sort lists, tables, and more. 6:59 >> Huh, that's so weird. 7:03 List js. 7:04 I thought that was going to do something else. 7:05 >> Yeah, I thought it was gonna make it fold like origami, huh? 7:07 >> Huh. 7:09 >> So anyway this, this is really, 7:09 really neat. 7:11 And it is just vanilla JavaScript, so you don't 7:12 need to be using a library or anything like that. 7:14 Let's, let's click on over to examples. 7:17 Here is a basic list. 7:19 I can click the sort by name button and without 7:21 very much code at all it is immediately sorted, or 7:25 if I want to filter, just start typing in some 7:28 of the letters here, and it's automatically filtered for me. 7:32 Now if I click on over to the 7:34 js or the JavaScript here, you can see there's really not a lot going on. 7:37 It's just the different values. 7:42 And then you Call New List on that, and boom. 7:44 You are good to go. 7:47 Now, you can also add items to the list. 7:49 There's removing lists, searching, and even pagination available. 7:53 So this is, a really, really flexible library. 7:58 And probably the best part 8:01 about it is that it is just vanilla JavaScript. 8:02 So you don't need to have the overhead of a framework 8:05 if you're just putting a few different items on the page. 8:08 So yeah, check that out, list.js, version one. 8:11 >> Very cool stuff. 8:14 Well, next up is a really cool 8:16 blog post called Exploring Canvas Drawing Techniques. 8:18 Now, in this post, they're talking about some work that they recently did on 8:22 Fabric.js, which is an HTML5 canvas library. 8:27 It allows you to draw on the canvas and even animate elements. 8:32 It's pretty neat, so definitely be sure to check out Fabric.js. 8:35 But they had this simple pencil tool, and 8:39 it was far too simplistic, for their tastes. 8:42 So they went ahead and not only created 8:46 some more advanced drawing tools, but they even 8:49 created this really extensive tutorial that shows 8:52 you how you would create these same effects. 8:56 >> Wow. 8:59 >> So I can go ahead and draw on the canvas with a simple pencil. 8:59 I can draw with varying thickness here, and you can even 9:03 have shadows that kinda make a painterly looking effect. 9:08 And if I scroll down even further here, you can see just how many types of brushes 9:13 are available in this tutorial. 9:19 You can scroll down even further and you should be 9:21 able to do patterns, yeah, there we go, down here. 9:24 So you can go ahead and randomize stuff, 9:28 you can make, yeah, there we go, pattern-based brushes. 9:31 It's pretty incredible and there really isn't a whole lot out there 9:34 about drawing to the canvas in this kind of fluid paintbrush format, 9:38 so definitely be sure to check this article out. 9:43 There's a lot of really innovative stuff here. 9:46 >> It's pretty cool, I just made a little drawing on [COUGH] on my screen. 9:48 I'm not sure if you can cut to it. 9:51 It's your name, but instead of a dot over the i it's a heart. 9:52 >> Huh. 9:55 That's very nice, Jason. 9:56 >> Next up, we have a project called Sortable which, kind of 9:58 like list.js, makes it super easy to sort tables with practically no code. 10:01 >> So this is a drop-in. 10:06 >> Huh. >> Yeah. 10:07 So, this is a drop-in 10:08 replacement rather than having to programmatically put in the data. 10:08 It works really, really well on an existing table. 10:12 So let's, 10:14 >> Glad we're able to sort that out. >> Oh. 10:15 Yeah, I wanted to make a pun but I couldn't think of one in time. 10:18 So [LAUGH] here's a list of different browsers 10:21 and their usage, and when they were released. 10:25 And I can go ahead and click on usage and it automatically sorts by that. 10:27 Now, what's nice about this, you really 10:32 just drop it in, done. And you can add the different theme. 10:33 It comes with a few different themes, as it says, for every occasion. 10:37 So it's got a minimal theme, light theme, dark 10:41 theme, kinda, you know, just a few different ones here. 10:44 You know, very, very easy to use. 10:48 Like I said, not a lot going on here. 10:49 Just tell it how to sort, and you are good to go, sortable.js. 10:51 Done. 10:55 >> That's amazing. So one the hardest things to 10:56 do in CSS is figure out how to align things on a page. 10:58 You might want to align things horizontally, or vertically, or both. 11:02 And the way you do that is much 11:07 different than a lot of other, environments like Photoshop 11:11 when you're trying to align things, or maybe even 11:15 in Xcode when you're trying to align different elements. 11:18 >> Takes more work than you would think. 11:21 >> It does. 11:22 It takes a little bit more 11:23 code and thinking, but fortunately, there's 11:24 this really wonderful snippet of code here. 11:27 And there's, a picture of Tim here as well, 11:31 and he went ahead and and writ, wrote this snippet. 11:35 Basically it just shows you how to align things horizontally and vertically. 11:37 So here's the code to do that. 11:43 And it also shows you what the browser support for 11:45 that code is. 11:49 And there's a couple of other methods here to do that. 11:51 So you can go ahead and do that say, with 11:54 percentages here, and in addition to that, he also shows 11:56 you how to align things if you just want to 12:00 do it horizontally or if you just to do it vertically. 12:03 so, for example you could go ahead and use display table 12:07 if you wanted to go ahead and fake tables rather than actually 12:11 using the markup for them. 12:14 But, anyway it's a really wonderful snippet here because 12:16 this feels like something that, you know, you have 12:19 to do all the time, and you never know 12:22 how to do quite right in that particular context. 12:25 So it's good to have a bunch of different 12:28 code here that you can go ahead and refer to. 12:30 >> Yeah, it's a nice nice little bookmark. 12:32 But. 12:33 >> Pretty cool stuff. Well, on Twitter I am @nickrp. 12:33 >> And I am @jseifer. If you want more information on 12:37 anything we talked about, check out our show notes at 12:39 youtube.com/gotreehouse/ or search for us in iTunes at the Treehouse Show. 12:41 >> And of course, if you'd like to see more videos like this one about web 12:46 design, web development, mobile business, and so much 12:50 more, be sure to check us out at teamtreehouse.com. 12:54 Thanks so much for watching and we'll see you next week. 12:57 [MUSIC] 12:59

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

Sign up