Episode 63: Responsive Design, Rich Text Editing, Squircles

I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> And you're watching The Treehouse Show your weekly dose of 0:02 internets where we talk about things web designed, web development and more. 0:04 >> In this episode, we'll be talking about responsive design, rich content 0:08 editing, Git and Github, Nick's lack of a faux hawk and more. 0:12 >> Let's check it out. 0:16 [MUSIC] 0:18 First up, is a knowledge hub for responsive web design. 0:23 Now, if you're not familiar with responsive web design, 0:28 just start back at episode one of The Treehouse 0:31 Show and watch all the way up to this 0:33 episode, and you'll get a little bit of an idea. 0:35 >> It maybe started episode ten, those first 0:38 few were a little rough around the edges. 0:40 >> That's probably good advice. 0:41 But basically, responsive web design is just a 0:44 technique that allows you to take a single codebase. 0:46 And make it work for multiple screen resolutions, desktops, tablets, 0:48 iPhones, iPads, other phones, smart watches, all that sorta stuff. 0:54 But there's a lot to know and so the 1:00 Knowledge Hub for Responsive Design attempts to organize it all. 1:02 So this is pretty cool. 1:07 There's a couple definitions and by a couple, I mean just one. 1:09 What is responsive web design? 1:12 Boom. 1:13 There's a couple of examples and inspirations. 1:15 So I'll go ahead and click on that. 1:18 Responsive Design Galleries, look at that. Isn't that pinteresting? 1:20 We're gonna click on Core Concepts here. Tutorials and Tools. 1:24 Responsive Design Tutorials, wow, look at that big long list. 1:29 Right there is the Beginner's Guide to Responsive Web Design. 1:33 Which is an article that you can find 1:36 on the Treehouse Blog. >> Wow. 1:38 >> Look at that. 1:40 We've come full circle. >> Wow, how about that? 1:40 >> But it's, it's really a, a pretty cool resource lot's of 1:42 cool stuff to check out there so be sure to take a look. 1:47 >> Yeah, we, you know, we talk about a lot of responsive web design on this 1:50 show so it's nice to have that packaged up as a, as a good resource for people. 1:53 Definitely. 1:58 >> Next up, we have a project called Sir Trevor. 1:58 Sir Trevor is a rich content editor 2:01 for the web. And it's actually pretty cool. 2:03 >> So let's take a look at how it works. 2:06 So let's see if we see any example here, it says, oh hello, I'm Sir Trevor. 2:08 Create some new blocks and see what I can do. 2:13 Well that's not very interesting, is it? 2:15 Well, it looks like I can type text right in here. 2:17 Look at that. 2:20 And then Sir Trevor edits it. 2:21 Now if you have some text here. 2:22 You can actually make it bold, italicized, make it a, a link, or, or something 2:24 like that. 2:29 Now what's really interesting about this is, you can add more text areas, 2:29 you can add lists, videos, block quotes, tons of, tons of different things. 2:33 You can reorder the different text areas on here and you 2:38 can also embed YouTube videos, delete these things, all that, yeah. 2:43 Okay, get that out of there. 2:47 So let's go back up here and say a little bit about how it works. 2:49 To install Sir Trevor, it's really really easy, just use 2:53 bower included right on there, initialize it all you need to 2:58 do is give it this class name to initialize it 3:02 and then this will turn that in to a new script. 3:06 So, once you set this up, the output is actually scored in JSON. 3:11 So, really really easy use, 3:16 just that give this little data key right here. 3:18 Tells the type it is, and then what is actually going on inside. 3:22 Now, as you might expect from any project we cover here on the show, 3:26 it's very, very easy to use, and there's tons of different options to extend it. 3:29 So, if you need to allow your users to edit 3:33 rich content on your site, I recommend checking out Sir Trevor. 3:35 >> Very cool stuff. 3:39 Well, Jason is my absolute favorite 3:40 data format. >> Oh, stop it, you. 3:44 >> Next up is CSS3 icons. 3:47 I don't know why they're calling them CSS3 icons, 3:51 because there's actually 200 of them and they're still counting. 3:54 There's more than three. 3:57 If you look here, you can go ahead and click on each one of these icons, and it. 3:59 >> And it, it's referring to the version of CSS that they're using. 4:02 >> Oh, that makes more sense. Thanks for point that out Jason. 4:05 >> No problem. 4:09 >> I wouldn't have known that otherwise. 4:10 >> Got your back. 4:12 >> If you click on one of these icons, it 4:13 will show you how to recreate them in CSS and HTML. 4:14 For each one of these, they're using no more than two span tags, which I think 4:20 it's what it says somewhere down here. Can go ahead and take a look at that. 4:26 But in this example, looks like they're just using one span tag so that's cool. 4:31 Why would you want to do this? 4:36 Well it, allows you to load up these icons a little bit faster in some cases. 4:37 And also potentially reduce http requests because 4:44 you're only loading up CSS and HTML. 4:47 So that's pretty cool, they have quite a few of them here. 4:51 You can go ahead and browse the gallery 4:54 and use whatever ones are suitable for your project. 4:55 >> I like a lot of these. 5:00 >> One thing to keep in mind is that browser compatibility is a little 5:01 bit rough for Internet Explorer. They do give you browser compatibility, 5:05 for each individual individual icon but for many of them 5:10 it only supports IE 9 and up, which is the latest version of Internet Explorer. 5:16 A lot of people are still using Internet Explorer 8 and there's even some people 5:22 still on 7, so that is something to be aware of. 5:26 But, pretty cool icons. 5:29 Definitely be sure to check those out. 5:31 >> Yeah, it's nice. 5:33 I like the walk through, that you can actually see how they're made. 5:33 >> Yep. 5:36 >> Next up, we have a really nice list 5:37 of Git and Github resources put together by Kevin Suttle. 5:38 This is gonna take you all the way from a 5:43 novice Git user, all the way to an advanced user. 5:45 So really really good walk-throughs 5:49 from the simple guide to Git, thinking like a Git, learning Git branching. 5:51 There's a, a nice video on the site, a 5:58 little walkthrough about how to deploy with Git and Github. 6:00 As well as a little round of round 6:03 up of books, ebooks, articles, and some different tools. 6:07 Now this kinda goes really nicely with the Git foundations course 6:12 Treehouse recently released. 6:16 So, we'll have a link to both of those in the show notes, which you 6:17 can check out at youtube.com/gotreehouse or search 6:20 for us in iTunes at The Treehouse Show. 6:24 >> Pretty awesome. 6:27 Well, next up, we're gonna learn how to make Squircles. 6:28 >> [LAUGH]. 6:31 >> Like you find in iOS 7 using CSS 3. 6:32 Now, you might be wondering what the heck is a squircle? 6:35 >> It's a. 6:38 >> At least that was my first question. 6:38 >> It's a Pokemon, right? >> Yeah, 6:40 yeah. Exactly. 6:41 no. 6:43 >> It's really hard to keep a straight face while saying that. 6:43 >> [LAUGH] A squircle is a mix between a 6:45 square and a circle. So one thing that you might 6:50 note, have noted in iOS 7 is that the icons are not just 6:55 rounded, rounded squares. They actually have this little, 7:01 bowing around the, the edges as well as the corners. 7:07 So, to do this. 7:12 >> Now when you say bowing, you're referring 7:14 to the shape and not the plane, right? 7:15 >> That's correct. But both are aerodynamic. 7:17 If you look here though they're, they're actually 7:20 combining two different shapes to make this happen. 7:22 So they're they're overlapping. 7:25 Kind of a square shape here. They're rounding the corners off and then 7:28 they're adding the circular shape To make it come out on the edges, just like that. 7:32 In this walkthrough, you can actually play the code back, that's pretty cool, or 7:39 you can just go ahead and view the code to see how it works. 7:44 As you can see here, we have some anchor elements along some elements inside. 7:48 And they're styling those actually 7:54 using pseudo elements here, so you have the icon inside, and then there's 7:58 the anchor and then the anchor has the before and after pseudo elements. 8:02 And they are transforming those, they are clipping them. 8:08 Oops. Excuse me. 8:12 And they are also rounding them using the border radius property. 8:13 So pretty cool. 8:18 Definitely check that out if you want to emulate the 8:19 look of the icons in iOS 7, using CSS 3. >> Squircles. 8:23 Next up, we have a project called Happy Rhino, which 8:28 lets you build large, client side applications in a structured way. 8:32 This is a pretty interesting project. 8:37 It's kinda similar to Backbone JS and its format and what it allows you to do. 8:38 Not quite as heavy or feature rich. But let's check it out a little bit 8:44 on here. 8:48 There's as you can see, already a few sites using happyrhino.js. 8:49 This is installed using NPM. 8:54 And it gives you just a really nice 8:57 structure for building these bigger client side applications. 9:00 Client side applications are getting larger and larger and 9:03 as you know, they do more and more things. 9:05 So, it gives you kind of everything you would expect. 9:08 Gives you a way to create classes do different templating. 9:10 Gives you models, collections and even a router. 9:15 So, tons of different stuff here. 9:19 Not really anything that we can go in depth on, 9:21 on the show, but I really recommend checking this out. 9:24 It's an interesting take on the whole client side Javascript library thing. 9:27 But it looks pretty neat. 9:32 >> Pretty cool. 9:35 Well, next up we have a really cool project called FullScreenMario.com. 9:36 It's basically Super Mario Brothers implemented in HTML5 in the browser. 9:43 >> And I, I would like to, to note 9:48 that we were strong-armed on Twitter into covering this. 9:50 Somebody said that they would no longer tune in 9:54 if we didn't cover this, so here you go. 9:56 >> This just for you. 9:58 >> You, you win. >> So 9:59 it's, it's exactly what you'd expect. 10:01 You can go ahead and and move Mario around here. 10:03 You can go ahead and jump and oh, look at that. 10:07 We're gonna get this this mushroom here. >> You gonna take the warp zone? 10:09 >> There we go. 10:13 Nah, nah I, I like to stick the, the scenic route. 10:14 But anyway, it, it works just like the real game. 10:17 It's, it's pretty cool and the thing 10:21 that's really cool about it though, is that 10:24 it's all open source on GitHub. 10:27 Now there's a couple things I'd like to point out first. 10:30 You can go ahead and use their level editor 10:33 here, this, you can actually make your own levels. 10:37 So if you don't want to jump into the code or anything [COUGH] 10:41 you can just go ahead and plan out a couple levels out of here. 10:44 >> That's awesome. 10:48 >> And drop in, drop in some pipes 10:49 like that, I'm probably doing this wrong but you get the idea. 10:52 Pretty cool stuff. 10:56 Now on Github like I said this is all open source. 10:57 You can go ahead and look at all the code that was used to put this together. 11:01 And they also tell you a couple of things about how to do power 11:07 ups, how to add things into the world, have a shift maps and so on. 11:10 Now, I think 11:16 this is really a pretty amazing project because it is open source. 11:17 That means that you can go ahead and fort, the project on GitHub 11:24 and may be go ahead and make your own original games out of it. 11:27 You know all the code is there that would need to make a basic platform of game. 11:31 You could replace the, the art assets, you could add your own music, 11:35 >> Could you replace Mario and Luigi with Nick and Jason? 11:39 >> Yeah. 11:42 I mean, if somebody would like to do that, we. 11:42 Would most definitely feature on the show, so 11:46 >> [SOUND] >> Please make that happen for us. 11:49 >> Yeah. >> Please. 11:51 >> What more can you ask for? 11:51 >> Yeah. 11:52 >> Next up, we have a product called Polymer. 11:53 Polymer is touted as a new type of library for the web. 11:55 Built on top of web components and designed 11:59 to leverage the evolving web platform on modern browsers. 12:01 >> Wow. >> Yeah. 12:05 So what does all that mean? 12:06 >> Well, it just basically means the Internet. 12:08 >> Yeah, the Internet. 12:10 >> Yeah. >> No, so it does. 12:11 You and I talk a lot about the different HTML 5 12:12 features, and even things that are up and coming in HTML 5. 12:15 But, you can't always use that with older browsers, you 12:18 know, because some of that stuff is really cutting edge. 12:22 So what Polymer does is gives you a set of polyfills 12:25 to use all these things with older browsers and legacy browsers. 12:27 Which is wonderful, because you won't have 12:31 to update your code so much as these features 12:33 are more and more widespread and able to be used. 12:35 >> And the really cool thing about this is that as the browsers start to 12:38 support this stuff, it will use the native 12:41 feature for them instead of using a polyfill. 12:44 >> Yeah. 12:46 Now did you say on the site that it's a 12:46 little bit early not quite ready for production, you see that. 12:49 But I do recommend following along with it. 12:52 Now, it, it's really cool, you know, easy to download, 12:55 kind of shows you an architectural 12:58 diagram, who cares, don't understand it, whatever. 12:59 But it's very, very easy to download and get started. 13:02 Look at that. 13:05 Download the ZIP. Install and, and boom. 13:06 Test your environment. 13:09 anyway. Very, very easy to get started as well. 13:12 You, all you need to do, include the Polymer script, and that's it. 13:14 Look at that. Created your own component right there. 13:19 So they've 13:22 got just a ton of different options. 13:23 We've covered a lot of the things here on the show before. 13:25 Things like using the shadow DOM, HTML templating, different things like that. 13:27 Now this is a library that we'll let you actually be able to use them. 13:32 So definitely something to keep in mind. 13:35 >> Very cool stuff. 13:38 >> Yeah, so I think that's about all we've got for today, Nick. 13:39 Who are you on twitter? 13:41 >> I'm @nickrp 13:42 >> And I am @jseifer. 13:43 For more information on anything we talked about today, 13:44 make sure to check out the show notes at youtube.com/gotreehouse. 13:47 Or search for, search for us on iTunes on The Treehouse Show. 13:50 >> And of course, if you'd like to see more videos like this 13:55 one about web design, web development, mobile 13:58 development, business, design, and so much more. 14:00 Be sure to check us out at teamtreehouse.com. 14:04 Thanks for watching and we'll see you next week. 14:08 [MUSIC] 14:11 >> It's cool how we didn't say anything about the faux hawk. 14:19

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

Sign up