Episode 116: CSS Shapes, Responsive Images, AngularJS

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of internets where we 0:02 talk about all things web design, web development, and more. 0:05 >> In this episode, we'll be talking about CSS shapes, responsive images, and more. 0:08 >> Let's check it out. 0:13 [MUSIC] 0:14 First up, is this wonderful blog post called, Getting Started with CSS Shapes. 0:19 And if you're not familiar, 0:25 CSS shapes allow you to wrap your content, around custom paths. 0:26 So, for example, we have this nice ex, espresso cup, and 0:32 you can see that the text is wrapping right around it. 0:38 Whoa! >> What? 0:42 >> How are they doing that? 0:43 Well- >> The text is an image, right? 0:44 That's all Photoshop. 0:46 >> Exactly. 0:47 No. 0:48 Actually that real text and here, you have this image it says image.png. 0:49 And, here you have some CSS and it says shape outside that's the property. 0:54 And then for the value, it passes the exact same image. 1:00 So it says okay this image or this PNG is going to be our shape. 1:03 And we base that shape of off the alpha transparency. 1:09 Then you say, shape-image-threshold and that basically defines, how much padding 1:13 you want between, the image and your text and then they just float to the left. 1:19 Pretty standard stuff there and the text wraps right around. 1:25 So that's pretty amazing. 1:29 There's a couple of other things that you can do. 1:31 There's some sort of primitive shapes here, the circle and ellipse, so 1:34 you could define, just a circle here if you didn't want to use an image, and 1:38 you can do that by saying shape outside and using the circle function. 1:43 And like I said you can also do an ellipse. 1:48 I think that's further down here. 1:52 There we go, so that's what an ellipse might look like. 1:56 And there's also. 2:00 >> Could you make a heart shape? 2:01 >> You could. 2:03 And you can do that with the polygon function. 2:04 >> I would, I would rather use an ellipse function. 2:06 And then it would. 2:09 >> An ellipse function? 2:10 >> Then it would be a total ellipse of the heart. 2:11 Nice. 2:14 Cool. 2:15 >> Great. Great tips. 2:16 >> So here is this polygon function. 2:18 And this is how you what actually, produce a heart shape. 2:21 If you didn't have an image to do it. 2:24 You can just define the points on your polygon and 2:27 then you could create something like a square or rectangle, 2:33 triangle, or even something more complicated. 2:37 Anyway, this is a really great post. 2:41 There's a lot to dig into with CSS shapes, and 2:43 of course there are some quirks with browser support right now. 2:47 You should definitely use this with as a progressive enhancement to your website. 2:51 In other words, you should make sure that your web site looks good without it. 2:54 And then if the browser supports it, you could test for 2:58 it with something like AT Supports and then actually include it in your site, 3:02 if the browser does support it. 3:07 Anyway really great post lot of depth there that we didn't get into. 3:09 So definitely be sure to check that out. 3:12 >> Yeah, definitely. 3:15 All right, next up we have a project called, Sweet Alert. 3:15 This is a little JavaScript project, that is designed. 3:19 To be a replacement, for JavaScript's alert function. 3:22 So, what does it do? 3:27 Well, lets take a look at the page here. 3:29 Here is a normal alert, lets say we had an error message. 3:31 Go ahead and click on that. 3:34 [SOUND] Something went wrong. 3:35 Well all right I guess that's okay then it's just like [UNKNOWN] crumbs built in. 3:38 Alert message, whatever. 3:42 What does a Sweet Alert look like? 3:43 Wow, that's pretty sweet, isn't it. 3:47 >> That's much better. >> Yeah, that's much better. 3:49 >> Mh? 3:51 >> Just click okay there. 3:52 Look at that. That's so much better. 3:53 >> Yeah, now I like getting error messages. 3:55 I'm like that's okay. 3:57 The whole thing crashed. 3:58 It's cool. >> Yeah, it's probably just. 3:59 As long, as long as it looks pretty, functionality doesn't matter. 4:00 >> Nice. 4:03 >> So anyway, there is a bunch of different examples here, 4:05 you can, you don't need to use just alerts. 4:07 You can put messages in here. 4:10 Also you can call the sweet alert function, 4:12 as they do right here or abbreviated with SWAL. 4:15 >> SWAL? >> S-W-A-one? 4:19 >> S-W-A-L. 4:22 >> S-W-A-L. 4:23 >> SWAL. Sweet alert. 4:25 >> SWAL. 4:26 >> Yeah. >> That's SWAL. 4:27 >> Pretty SWAL. 4:28 >> Yeah SWAL. 4:29 >> So you can put more text in it, and you can even have success and 4:30 failure messages. 4:35 All right, great job, you clicked the button, here's a check mark. 4:36 Has warnings, yeah, cancel. 4:39 All right, whatever, now I'll delete it. 4:41 >> Cool. >> Deleted my imaginary file and 4:44 you can even do something else. 4:46 You can pass it callbacks for cancellation or confirmation and you are good to go. 4:48 Also, you can even put custom icons in there like a reverse thumbs down. 4:54 So there we go custom image alert. 4:58 Anyway very easy to use, you can either use Bower to install it or 5:01 just include the JavaScript and CSS in your page. 5:04 Note that this does not require jQuery. 5:08 Very, very small and easy to use. 5:11 Now you can also have different options. 5:13 Whether or not you want to allow outside clicks or show the cancellation buttons. 5:15 Ton of different options in here that you can check out. 5:20 Anyway, that is sweet alert. 5:23 I like it. I think it's pretty sweet. 5:25 I think it's pretty swal. 5:27 >> Next up we have, a blogpost called animating images with CSS Keyframes. 5:29 Woah, what the heck does that mean? 5:34 Well, CSS Keyframes allow you to animate things. 5:36 You can set up your, your Keyframes and then execute them and 5:40 then basically something can happen on the page. 5:43 However, this blog post suggests that you could do it with, some images so 5:46 let's take a look at the demo, to see what that looks like. 5:52 Here we have this really nice full page background image. 5:56 >> Is that a video? 5:59 >> So you can imagine that this is sort of like, a blog post but 6:00 no, this is actually not a video. 6:04 If you wanted to do this as a video, you might have to do, this entire page. 6:06 It would take up a lot of bandwidth, or 6:11 you would have to do something kind of weird, and maybe have like a video cutout. 6:14 It would be kinda, messy. 6:18 This is actually a really nice elegant solution though and 6:20 it ends up with some pretty low file sizes. 6:25 So let's go back and see how that works. 6:28 First, you have to find a photo. 6:31 So they're using this windmill photo. 6:33 And then, in your favorite image editing tool. 6:37 In this case they're using Photoshop. 6:41 You can cut out that image, and here's where you wanna be pretty careful, 6:42 because this is what's gonna make it or break it, 6:47 you want to cut out this windmill here, and then you actually, 6:50 maybe wanna refine the edge, make sure you get everything looking correct there. 6:57 And then you've got to erase, parts of the image so 7:02 that you kind of get that background to appear again. 7:06 And you'll notice that they were even extra clever and 7:09 removed the little shadow right there, so you don't see that. 7:11 Then all you have to do, is set up your code. 7:16 So you'll have your windmill background. 7:19 That's pretty standard stuff. 7:22 And then you absolute position, the windmill images and 7:23 you wanna make sure, that you do this right otherwise if you. 7:29 >> It's gonna look weird. 7:34 >> Maybe resize the browser it you know, 7:35 move those images around because you're basically building. 7:38 You're rebuilding the image, in layers here. 7:41 So you wanna make sure you do that correctly. 7:44 And then you end up with something that looks like this. 7:47 And then you have to stop the animation of course, 7:52 and then you got something that looks like this. 7:55 It's all pretty standard stuff, it's just kind of an interesting way of recombining. 7:59 Existing ideas of you know, building up layers and animating them and 8:04 then using images for 8:09 the animation instead of other image instead of other elements on the page. 8:11 So, I thought that was pretty cool. 8:14 >> Yeah, it was you know, it's really neat. 8:15 It's probably not something you would do fo every blog post you write, but 8:17 maybe for product images, or you know even app demonstrations. 8:20 That could be really useful. 8:24 >> Yeah, definitely. 8:26 I mean it also only works on a very specific type of image. 8:26 I mean you'll notice that those windmills had very thin blades. 8:29 So it was pretty easy to copy. 8:33 The background and kinda fill in the sky there. 8:35 Pretty simple to do. 8:37 If it was like a whole person blocking out most of the background or 8:38 something might be more difficult. 8:41 But, anyway, pretty cool posts. 8:43 Definitely be sure to check that one out. 8:45 >> Remember the dance move called the Windmill? 8:47 I do. Would you like to demonstrate for us? 8:49 >> Maybe a little bit later. 8:51 >> Okay. >> As part of the after show. 8:53 >> Looking forward to that. 8:55 >> Yeah. 8:56 Next up we have a AngularJS tutorial. 8:57 Now this is. 9:00 A very comprehensive 10,000 word guide. 9:02 >> No. >> That is so 9:06 many words, I can't even count that high. 9:07 But this is actually an amazing introduction and AngularJS tutorial. 9:10 Now if you've had trouble working through the official AngularJS tutorial and 9:16 the documentation, which can. 9:20 Can be a little bit overwhelming. 9:21 This is wonderful. 9:23 The reason I say it's wonderful is because it goes into the background of a lot of 9:25 the different concepts in a little bit more and 9:29 at the same time less depth than the documentation. 9:33 Distilling what you need to know about all of the different parts of angular js 9:37 into a few solid paragraphs that really explain everything so it will go into 9:41 the concept behind java script frameworks and why angular js became a necessity. 9:47 And then the engineering behind it. 9:53 But hey, why do we need single page applications these days? 9:56 Well, it's because the browser can hold all of the state for us and 9:59 abstraction make single plate, single page applications easier to write. 10:03 So it goes through everything you need to know about angular. 10:09 It talks a lot about modulars and how they work inside of your angular applications. 10:12 How to bootstrap your HTML. 10:17 Did you know that you can bootstrap elements besides just the HTML element for 10:19 an angular application? 10:25 >> Yes, you can actually have just a small piece of your 10:26 page be the angular application, instead of the whole thing. 10:29 Exactly. 10:32 >> Mm-hm. 10:33 >> And did, did you read this guide? 10:33 >> I did not, but I know a little bit about angular. 10:35 [LAUGH] >> Well, if you wanna know more, 10:38 you can check out this guide. 10:40 Anyway, it goes over everything you need to know. 10:41 Scope, directives, modules, services, factories, the whole nine or ten yards. 10:43 Ten thousand yards. 10:49 It's a word. 10:50 [CROSSTALK]. >> Ten thousand, ten thousand words. 10:51 >> If a word is a yard, it goes that many [CROSSTALK]. 10:52 >> It's worth. 10:54 >> yards. >> It's worth ten thousand words, a blog. 10:55 When all you need is a knife. 10:58 >> We're really getting off track here. 10:59 >> Yeah. Anyway, check it out. 11:01 It's in the show notes. 11:02 >> Next up is Responsive Image or RESPimage or respimage. 11:03 It's kind of abbreviated there. 11:08 It's a responsive images polyfill that loads your images fast and responsibly. 11:10 And I'm still wondering if they meant to say responsively. 11:17 Not sure. 11:22 We'll never know. 11:23 That's gonna be one of the mysteries of the world there. 11:24 >> It's like we finish each other's senten- 11:26 >> Sandwiches. 11:28 Oh, okay. 11:30 Went in a different direction, there. 11:31 It's a fast, lightweight, and robust responsive images polyfill that saves 11:33 the user's bandwidth by utilizing smart resource selection algorithm. 11:38 Whoa, what is that? 11:44 >> [INAUDIBLE] >> I don't know, but 11:45 it's smart, so you should go ahead and just trust it. 11:46 And, basically, 11:50 it allows you to use two different types of mark-up with the samples. 11:51 One is where you have an image and you use the source set, so 11:56 maybe you have multiple responsive images that you want to use. 12:00 And it also supports the picture element format where you 12:04 have the picture element and then the child elements of source. 12:07 And you specify the source set there. 12:12 So if you you really want to use these responsive image markup techniques and 12:15 you're using a browser or 12:21 you're targeting a browser that maybe doesn't necessarily support these things. 12:23 This is a great poly fill to use to allow that to happen there. 12:27 >> Very nice. 12:32 >> Cool, well that's all we have time for this week. 12:32 I am @nickrp on Twitter. 12:35 >> And I am @Jseifer. 12:37 For more information on anything we've talked about check out the show notes 12:38 below the video and read more about it. 12:41 >> Thank you so much for watching and we will see you next. 12:44 Next week. 12:46 [MUSIC] 12:49 [LAUGH] 12:55

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

Sign up