Episode 35: JavaScript Tours and Pull Quotes

I'm Nick Pettit. >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse show, your weekly dose of internets 0:03 where we talk about all things web design, web development, and more. 0:06 >> In this episode we'll be talking 0:10 about Javascript tours, whole quotes, and CSS Frameworks. 0:12 >> Lets check it out. 0:16 [MUSIC] 0:17 >> First up we'll be talking about a project called Trip.js. 0:23 Trip.js is something that will let you do 0:26 introductory tours or trips around your web pages. 0:29 This is gonna be something that you'll see when you 0:34 want to give somebody a demo tour of your website. 0:36 What separates trip.js from some other plugins we've featured 0:38 on the show is that the tour can happen automatically. 0:42 So you'll see I click the start a tour button, 0:46 and it goes through and shows you all of the different 0:48 things that you need using tooltips on various parts of your page. 0:51 And it's pretty easy to use it has just a few 0:56 different methods that you can see start, stop, pause, next, and previous. 0:59 And it, you just give it a selector, some content to display, as well as a delay. 1:05 So you can check 1:12 that out in the show notes, which you can 1:13 find in our iTunes feed or on our YouTube channel. 1:15 >> Wow. 1:19 That's a, that's a trip, Jason. 1:20 >> You. >> You're. 1:22 >> You. 1:24 >> You're tripping. >> Aww. 1:24 >> Alright, puns. 1:26 Next up is this really amazing article about pull quotes using HT, HTML5 and CSS. 1:29 Now of course, 1:37 pull quotes are those quotes you see in like a 1:38 magazine article where they pull out a quote and make 1:42 the text big and put a bunch of spacing around 1:45 it and make it look like a, really important quote. 1:48 Of course you can do this on a webpage. The problem with it is, typically, is 1:53 that you'll have a bunch of text and then you'll have the pull 1:58 quote As yet another piece of text, so you'll be duplicating a content. 2:03 This is bad, because it's not really very semantic. 2:08 Basically, you want to create a situation 2:13 where you only have that content there once. 2:15 So what this article suggests is that you actually use CSS 2:19 to pull out that data and then replicate it and basically set 2:26 the quote in the proper place and add all the padding 2:32 and spacing around it, so that you only have the content once. 2:35 Now this is really good for say screen readers or SEO, 2:39 basically situations where there's going to be an automated software 2:44 process going through the, the text, and not necessarily a person. 2:49 So it only gets repeated once or it doesn't get repeated at all. 2:54 >> The, I, I think this is a pretty ingenious use of data tag. 2:58 >> Yes, it is. 3:02 >> Just take the data pull cord attribute and format that. 3:02 Pretty pretty smart, how they pulled that out 3:06 of there. >> I see what you did there. 3:11 >> Next up, we have a project called jQuery.pin. 3:13 This is a jQuery plugin, as you might expect, 3:16 and what this does, this lets you pin certain content. 3:19 As you're scrolling around your page. 3:22 Now, it is not limited to, any specific thing. 3:25 We have a demo right here. 3:28 You'll see on the right-hand side they have, 3:30 a little note right here that says, Pin it! 3:32 And as I'm scrolling, 3:34 this gets pinned to the top of the screen. >> Whoa. 3:36 >> Yeah. >> That's amazing. 3:40 >> I know. 3:41 Now, it's not limited to just the top of the screen. 3:42 You can pin it within a certain container, and 3:45 you can also pin it on, you can disable this 3:48 on small screens which is, you know, gonna be great 3:51 since we are in the age of responsive web design. 3:54 Probably gonna not want to stick elements to the 3:57 top of the screen when you don't have a lot 3:59 of screen real estate to deal with. Anyway that's jQuery.Pin. 4:01 >> Very cool stuff. 4:06 Next up is yet another amazing article over on CSS-tricks. 4:07 >> Friends, friend of tree house. 4:11 >> Friend of the show. >> Fots if you're making acronyms. 4:13 >> Chris Coyer written this article about using SVG's. 4:17 It's basically just a really great overview of SVG's or skill able vector 4:21 graphics, what they are, why you should use them, 4:27 and how you can use them, in your web pages. 4:30 Now SVG's of course use vectors instead of bitmapped 4:34 graphics so, what that means is that they use 4:40 a lot of really complicated math to, basically creates 4:43 a flat, or you know, similar approximation of an image, 4:47 right. So this is really good if you have yeah, 4:51 flat graphics, or you know, maybe some chart that you wanna go ahead and display. 4:55 And you could of course also use this 5:02 for other types of interface elements, such as buttons 5:04 where you want to have maybe some sort of 5:07 really crazy shape to them or something like that. 5:09 >> I like crazy shaped buttons. >> Might be difficult to do in CSS. 5:12 There's there's tons of examples you can come up with. 5:16 But anywhere you can use an image you can also use an SVG. 5:18 The huge advantage to this is that, A, they're resolution independent so, 5:22 you know, in the age of Retina displays or high resolution displays, you 5:28 can go ahead and display SVG graphics without having to have, like, 5:33 two separate bitmapped images and figure out which one that you should display. 5:37 And there are also typically, well, in some instances, they have 5:41 a smaller file size, so they can improve your front end performance. 5:46 There's tons of other benefits to using SVGs, but they can be a 5:51 little bit tricky to get started with if you're not familiar with them. 5:54 And that's what this article is all about. 5:58 >> Very nice. >> Very cool stuff. 6:01 >> Next up, we have a blog post about dev tools extensions 6:03 for web app developers. 6:07 This is by Addy Osmani, who is just a content machine. 6:09 So if you're developing web applications, there's a plugin that you can get 6:12 for the Chrome developer tools for just about any framework that you're using. 6:16 So it goes through, it shows what is available. 6:21 There is the Ember Inspector for Ember.js. 6:25 This is gonna let you look into different models and see 6:28 their attributes, different layers going on in an application. 6:32 If you use Backbone.js there is an extension for that as well so 6:36 you can see the different events, any different view DOM bindings there are. 6:40 There is something for Angular, Thorax, Knockout JS. 6:45 Most frameworks have a plug-in for the Chrome Developer tools. 6:50 Another interesting thing that he goes over is rails panel, 6:54 which will show you your ruby on rails logs right inside 6:57 of the Chrome Developer tools which is a really, really useful plug-in. 6:59 anyway, we'll have this whole link in the show notes if you want to check it out. 7:04 It's a great article to go and grab some of these plug ins. 7:07 >> Very cool stuff. [SOUND]. 7:10 So, Jason, I'm gonna throw our a vocab word here. 7:13 >> Okay. 7:16 >> It's called skeuomorphism. 7:16 >> Alright. >> So, there's this debate raging 7:18 in the design community. >> Raging. 7:22 >> And a lot of it, of course, is centered around Apple as they are pretty 7:25 big thought leaders in design. But, basically skeuomorphism 7:29 is, when you have a real-world object that you're trying to 7:35 represent in a digital interface, so ICal in 7:41 in the Mac OS 10 operating system is a great example of that. 7:48 You have calendars in the real world with, you know, 7:51 paper and maybe some sort of leather and stitching on it. 7:54 And they've duplicated that exact graphic inside of 7:58 their operating system in, in the iCal interface. 8:02 So this is a little weird, actually, 8:06 because not everything has a real-world equivalent. 8:10 For example, there's the Find My Friends app on, on the iPhone. 8:14 Where there's not a real-world equivalent to, you know, having a 8:19 GPS and a map where you can find all of your friends. 8:24 >> Yeah. 8:27 It's not a graphic of a car following someone around. 8:27 >> Exactly. 8:30 It's something you're very familiar with, Jason. 8:31 >> It's not creepy at all. 8:33 >> But, it's not a real world thing and yet they treat it like it is. 8:34 They have this textured paper. 8:38 They have, you know, these leather textures, leather stitching, etcetera. 8:40 And it looks like it should be some sort of magical 8:44 address book that you can open up, and yet it doesn't exist. 8:47 So, the back lash to that is. >> Yeah what's the opposite of that? 8:51 >> The opposite of that is people using very flat graphics, so this is. 8:55 >> This would be like Windows Phone, Windows 8, things like that. 9:02 >> Exactly, 9:05 this is exhibited in Microsoft's metro-design language which is features, 9:05 featured in Windows 8, on X-Box on their Windows Mobile operating systems. 9:11 So, it's not really a battle between Microsoft 9:17 and Apple like you know, we understand historically, and 9:22 this is not unique to Apple and Microsoft, 9:25 this is seen all over the design community people 9:28 using flat design, people using skin-morph-ism. 9:30 But you know, it's, it's an interesting debate because people are trying 9:34 to figure out you know, does skeuomorphism really help you say understand how 9:38 to use an interface more quickly, or is it really holding us 9:43 back from developing new things that could only exist in a digital environment. 9:47 >> But they're sort of the same argument with the whole flat UI paradigm, 9:52 where people sometimes might not know if something, is a button 9:56 or a link or if it's clickable or what it is. 9:59 They just see a bunch of squares on a page, 10:01 and they freak out: What do I do with this? 10:04 I don't know. 10:05 >> Very true. >> Let me go play in the real world. 10:06 >> There is really no right answer here. 10:08 At least not just yet. 10:11 >> But if you're into the flat whole design paradigm, we have a. 10:13 >> That's right. 10:16 >> We have a plug in for you. 10:16 >> We have a great, great link here for you. 10:18 That's why 10:20 this whole, we've launched into this whole. 10:21 >> It got out of control quick. 10:23 >> Diatribe. Yes it it did. 10:24 Anyway, Almost Flat UI is based on Foundation Framework, and, it's basically 10:25 a collection of really flat UI. So this is the opposite of skeumorphism. 10:32 You have top bars or bread crumbs, just like this, and, they're all really flat. 10:38 You'll notice that there's no dimensionality or 10:45 texture, being expressed here, here's a bunch of 10:48 almost flat buttons and they do say almost flat. 10:52 Because there is a little bit of a slight 10:55 gradient here to perhaps suggest this is a clickable button. 10:57 But it's very minimal, of course you can have these buttons 11:01 in all different sizes and different types, button groups, forms, etcetera. 11:04 There's also a set of typography links, 11:10 lists, etcetera, and everything that you would expect from a 11:13 really good CSS framework. But this is interesting and if you are 11:18 into the whole flat UI side of the skeumorphism 11:22 vs flat UI debate, then this is for you and you should definitely check it out. 11:28 >> Yeah. 11:34 >> I personally don't really have a strong preference one way or the other. 11:34 I'm just kind of. >> You're just kind of there. 11:39 >> Just kind of a bystander watching 11:41 this interesting design bate design debate, rage on. 11:42 >> Tweet @NickRP with your comments. 11:47 >> Yes, please do. 11:50 >> Next up we have a post entitled Practical Tips from Top WordPress Pros. 11:51 And I think they, they wrote it like that to make you 11:57 have a hard time pronouncing it but I pretty much nailed it. 11:59 >> Practical tips from 12:03 top WordPress pros. >> There you go. 12:04 >> I should say that five times before we start the show. 12:06 >> So anyway, just a, a good collection 12:08 of tips here using everything WordPress has to offer. 12:10 There's actually a lot of stuff built into WordPress that, you might not know about. 12:13 They have a, a huge API and there's even a lot to offer in the help screen. 12:17 So if you're developing a plug-in or 12:21 something like that, you can actually leverage 12:23 the built-in help screens in WordPress and, you know, write stuff to display in 12:24 there with different settings for your plug-in. 12:29 You can use hooks, I would say use hooks pretty liberally. 12:32 WordPress lets you hook into a lot of the different behavior when displaying an 12:35 app, you know, there's everything from displaying 12:40 the header, title, all sorts of different sidebars. 12:41 So you can use that to your advantage when you're developing themes or plugins. 12:44 They're talking about following best practices, embracing the code base. 12:49 Just a ton of different 12:53 tips and actually a lot too much to explain here. 12:54 Which is gonna give you even more motivation 12:57 to check out our show notes in iTunes. 12:59 Search the Treehouse Show, or on our Youtube channel at youtube.com/treehouse. 13:02 >> All right. 13:06 Word. [LAUGH] Very impressed. 13:07 >> Nice. 13:11 >> All right. I'll end it there. 13:11 >> That was a. 13:12 >> No, that was, that was awful. >> That was a pun. 13:13 Next up is Foundation, and they've just released 13:16 their fourth version of the Foundation framework. 13:19 >> This is what the Almost Flat UI was based on? 13:23 >> [COUGH] That's right. 13:26 So this is Zurb Foundation 4. 13:28 We have covered Foundation in the past on the show, I think? 13:30 I think we talked about? >> Yes we have. 13:34 >> I think we talked about Foundation 3, well this is Foundation 4. 13:36 >> That's one better. 13:41 >> Yes it is, what's new in Foundation 4? 13:42 Well, first of all it's mobile first, so if you 13:45 are designing a responsive of design you can go ahead 13:48 and design, the mobile version first, and then work your 13:52 way up to larger and larger screens with more complexity. 13:55 It is semantic of course it was probably semantic before but 14:00 now I guess it's more semantic and it has awesome JavaScript. 14:03 So pretty cool stuff, 14:09 I mean Zurb foundation is a really amazing well thought of CSS framework, they're of 14:10 course many others Bootstrapping one of the 14:16 more notable ones but pretty amazing stuff here. 14:19 >> One thing that's interesting in the Foundation 4 Grid, is 14:24 that they actually took into account a grid for different size screens. 14:26 >> Yes. 14:32 >> So you can create a grid that will only display on mobile, I think 14:32 you use the small attribute, like small two 14:35 columns, and then same thing with large column grid. 14:38 So. 14:41 >> But, >> Pretty interesting. 14:42 >> If you're starting a new project and whether 14:43 you're a season veteran of the web or if you're 14:46 just brand new to all this stuff, you definitely 14:49 should go ahead and use a CSS framework like Zurb. 14:51 >> Yeah. 14:55 >> Or Bootstrap or you know, whatever fits the needs of, your project, or your 14:55 personal preferences. 15:00 >> Yeah, we'e reviewed literally hundreds on this show, so 15:02 just go back into the archive, maybe in the iTunes feed. 15:04 >> Yeah, maybe in, in iTunes, which we're on now, by the way. 15:06 >> Yeah. 15:09 >> [LAUGH] Yeah, weird how that keeps coming up. 15:10 >> Yeah. 15:12 >> Strange. 15:13 [LAUGH] >> Anyway, who are you on Twitter? 15:13 >> I am @nickrp 15:15 >> And I am @jseifer. 15:17 If you like this podcast, check us out 15:20 on your YouTube channel, at youtube.com/gotreehouse, or in iTunes. 15:21 Just search for 15:25 the Treehouse Show. >> There it is again, strange. 15:26 >> Yeah. 15:28 >> If you'd like to see more videos like this one about, business, web 15:29 design, web development, iOS, Android, and more, 15:33 be sure to check us out at teamtreehouse.com. 15:38 I'm Nick Pettit. 15:41 >> I'm Jason Seifer. 15:43 >> We said our names again. >> Yeah. 15:45 >> Thanks so much for watching. 15:47 >> We're the hosts. >> We'll see you 15:48 next week. 15:51 [MUSIC] 15:53

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

Sign up