Episode 96: jQuery Plugins, Progress Bars, HTTP API Design

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Tree House Show. 0:02 Your weekly dose of internets where we talk 0:03 about all things web design, web development, and more. 0:05 >> For a free month of Tree House head on over to teamtreehouse.com/show. 0:08 In this episode, we'll be talking about jQuery 0:13 plug-ins, progress bars, HTTP API design and more. 0:16 >> Let's check it out. 0:21 [MUSIC] 0:22 First up is Selectize.js. 0:27 Selectize is a hybrid of a text box and a select box and it relies on jQuery and it 0:31 allows you to tag things, create contact lists, country selectors, and so on. 0:38 >> Based on the name I thought it was just a plug-in 0:45 that allows you to select only the letter I on a webpage. 0:47 No you can select anything, actually. 0:51 >> Get it? 0:53 Select eyes? 0:53 >> I, I understood the joke. 0:54 It clocks in at seven kilobytes so that's not as good as like, 0:57 I don't know, five or six kilobytes, but seven kilobytes is pretty small. 1:01 Just kidding there. 1:06 If we scroll down the page, we have this couple of demos here. 1:08 So I could tag stuff. 1:11 Awesome, neat, Jason, Nick, treehouse. 1:13 >> It's like magnetic poetry for a text box. 1:18 >> It is. 1:21 We can scroll down further and go to email contacts, so I 1:23 can email Nikola Tesla, who knew that you could email him still? 1:26 That's pretty cool 1:31 >> You may not get a response, but you can email. 1:32 And if you could talk to anyone living or dead, are you a sorcerer? 1:33 We can go to. 1:38 >> For the record I would chose living. 1:40 >> We can go to these select boxes here, option 1:42 groups all sorts cool stuff and each demo has the 1:45 code as you can see actually how it works so 1:49 for example you can reg x an email just like that. 1:52 And there's a bunch of different options that you can set. 1:56 Anyway, it's a really cool JQuery plugin, so 2:00 definitely be sure to check this one out. 2:03 >> Very nice. 2:05 Next up, we have a website called Pull Push. 2:06 Now, this is not a metaphor for mine and Nick's relationship, this is a curated 2:09 library of well maintained JQuery and plain JavaScript plugins and libraries. 2:14 Now, lots of these libraries you may have seen before on this very treehouse show. 2:20 And there is a nice little classification on the left. 2:26 This leans a little bit towards front end plugins. 2:29 We have responsive plugins, modal dialogues, carousels, etc. 2:33 Like I said, leans a little bit more towards 2:39 front end, and there are really not that many to 2:40 choose from within each category, which is good because 2:42 you can just come on over here to this website. 2:46 Head on over to the category of the plugin you want, and boom, you have 2:49 just a few choices, and you know they're good because it is a curated library. 2:53 >> And, it's on the internet, so, you've gotta trust it, right? 2:57 >> So you know it's good. 3:00 Yeah. 3:01 I trust everything on the internet. 3:01 >> Mm. 3:03 >> And that's it, that's all I have to say about that. 3:04 Very nice. 3:06 Well, next up is Number Progress Bar. 3:07 This is a progress bar similar to what you might actually find in Android. 3:10 The idea was inspired by this Number Progress Bar, which is written in Android. 3:15 So there's what that looks like and you can see the Android code down here. 3:21 So I'm going to make something very similar in HTML and CSS. 3:25 So if we go to the Github page here. 3:29 Can scroll down and install it with Bower. 3:34 And here's how you do it with HTML. 3:38 So just a couple of div tags you need there. 3:41 And then here is CSS. 3:44 And of course you can make your own modifications to that. 3:46 And then there's some JavaScript with options. 3:49 So, some of the options you can set is the 3:53 style, the duration, the minimum and maximum values, and so on. 3:56 So, this is really cool if you are creating a progress 4:01 bar, you may also want to look into the Progress Element. 4:05 It could be a slightly more semantic way 4:09 to .do this but if you're working in browser 4:12 that maybe doesn't support that or you're in some 4:15 situation where you just can't use the progress element. 4:17 This is a pretty good alternative to that. 4:20 >> Very nice. 4:22 >> Mm-hum. 4:22 Next up, we have a, well not a blog post, 4:23 a get hub repository with a guide on HTTP API Design. 4:26 When you are designing an HTTP API there are a lot of do's 4:31 and a lot of don'ts that go into having a well maintained and well thought out API. 4:36 This guide attempts to put all of those into. 4:42 An easy to follow list with a lot of good information. 4:47 So return appropriate status codes kind of get into the nitty gritty of HTTP 4:51 and what are you what you are suppose to return for Git, Delete, and Patch Calls. 4:58 This guide was taken from a lot of Herokoos design 5:03 and there's some very interesting things you'll get from here. 5:07 For example, accept serialized JSON in request bodies. 5:09 That is important, and also, you can have, little JSON object right here. 5:14 It's got an ID and a name. 5:19 Another thing to keep in mind, instead of 5:21 saying owner_email and owner_id like in this example. 5:23 You may as well give owner its own property. 5:29 Now this is actually a very, very long guide with a lot of information. 5:32 So we're not gonna get into all of that here on the show. 5:36 But we will have a link to the 5:39 show notes which you can check out at youtube.com/gotreehouse. 5:40 You can also search for us in iTunes. 5:43 We are The Treehouse Show. 5:46 And don't forget to try Treehouse for 30 days free at teamtreehouse.com/show. 5:47 Very nice stuff. 5:53 Well next up is PROFOUNDGRID. 5:54 It is the pro version of Found Grid. 5:57 Actually I think it might say Profound Grid. 6:01 It's a responsive system for fixed and fluid layouts. 6:04 So if you're familiar with Foundation or Bootstrap. 6:08 Which are front-end frameworks. 6:10 This is kind of a similar thing, but it may be a little bit more 6:12 lightweight if you just need a very simple and semantic grid. 6:17 So here are some examples. 6:22 Wow, I feel like I'm playing, like space invaders, or breakout, or something here. 6:24 But if we can click on these, you can see. 6:28 What this grid looks like, and you can actually 6:31 turn the grid on and off so you can 6:34 see that these line up exactly like you would 6:36 expect with this to, with this 12 column grid here. 6:39 So I can click through, and you can see what a couple of these look like. 6:43 So you can hit the sides of the browser window, if you want to, or create. 6:48 Something with more of a max width. 6:54 So, anyway, not a whole lot to say about it. 6:57 It's pretty lightweight though, pretty cool stuff, and it allows 7:00 you to customize it with SCSS, so that's really nice. 7:05 >> Oh, very, very nice. 7:09 >> mm-hmm. 7:10 >> Next up we have a blog post 7:10 called slash page load times with CSS font subsetting. 7:12 What in the world does that mean? 7:17 Well let me tell you what it means [LAUGH]. 7:19 CSS font subsetting is taking only a specific subset 7:22 of the CSS font that you will be using. 7:27 So the example that they really get into here is with Google web fonts. 7:30 Let's say you are using a Google web font like Open Sans. 7:34 Here is how you would normally embed that font in your page. 7:38 You would do a link with the references to 7:41 the specific font and give it a relative style sheet. 7:43 But if you limit this to just certain 7:46 characters, you can add a little ampersand argument here. 7:48 And the text that you want it to display. 7:52 What, what that's going to do is serve 7:55 only those specific characters from that font style sheet. 7:58 So what that will result in is a smaller file 8:02 size, resulting in a quicker overall experience for your users. 8:06 Now this article goes into a little more 8:11 detail about how to embed that in your page. 8:13 It's a really a great tech, technique, and also really 8:16 important as mobile devices are more, more on the web. 8:18 >> Prevalent. 8:24 >> Prevalent is the word that I was looking for. 8:25 So, yeah. 8:27 That's about all we got time for today, we, we are out of steam here. 8:28 Nick, who are you on Twitter? 8:31 >> I am @nickrp. 8:32 >> And I am @jseifer. 8:33 For more information on anything we talked 8:34 about, check out our show notes at youtube.com/gotreehouse. 8:36 You can also search for us on iTunes. 8:39 We're the Treehouse show, please don't forget to rate us. 8:41 And of course, if you'd like to see more 8:43 videos like this one, about web design, web development, mobile 8:45 business and so much more, be sure to check us 8:48 out at teamtreehouse.com/show to get a free 30 day trial. 8:51 Thank you so much for watching, and we will see you next week. 8:57 [NOISE] 9:00

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

Sign up