Episode 131: Origami, React, Responsive Hero Images

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of internet, 0:02 where we talk about all things web design by development and more. 0:04 >> In this episode, we'll be talking about Origami, 0:07 React JS, Responsive Hero Images and more. 0:10 >> Let's check it out. 0:14 [MUSIC]. 0:15 First up is Origami. 0:20 Now, we've talked about this on the show before, 0:22 this is basically a prototyping from Facebook to allow you to quickly. 0:25 Come up with ideas for mobile apps for their interfaces, 0:31 how they animate, how you click on different things, or 0:35 tap on different things rather and move through the interface. 0:38 >> If, if we came up with these ideas together would we call it. 0:41 Power Origami. 0:44 >> Anyway, Origami just hit version 2.0, 0:48 and there is this wonderful post about what's new. 0:51 Well, specifically, origami live is a new feature. 0:55 So now you can make edits to your prototype and you can instantly. 0:59 See the results on an actual device. 1:05 So, you can see that high fidelity prototype, and 1:08 kind of get an idea of the look and feel. 1:10 Secondly, is code export, so this is pretty cool. 1:15 You can go to this code export menu item. 1:19 And then choose iOS, Android or Web, and bam, your app is all done. 1:23 No, not quite. 1:28 Actually, it just exports some of the animation code and layout code that you'll 1:29 need for actually recreating these in the actual application. 1:33 But still, very useful for the developers if they want to take. 1:38 An animation that's already been created in the prototype, and just quickly 1:44 recreated by copying and pasting some code, you can go ahead and do that now. 1:47 So this is pretty boring, let me see if I can find 1:53 an actual example of Origami here. 1:58 There we go. 2:02 And with Origami you can create. 2:03 Examples like this. 2:07 And there's even more of them. 2:08 So they've got the Slinkin Park example. 2:10 That's pretty cool. 2:13 Got 2D Waggle, 3D Waggle. 2:14 I don't know who came up with these names. 2:16 But, I'm kinda diggin' it. 2:18 >> Yeah, they were on a roll. 2:20 >> There's also tap to zoom, long press preview. 2:21 So, all sorts of, kind of. 2:25 Design patterns that maybe you've only seen in some apps or other apps. 2:27 And not necessarily, just built into iOS, or built into Android. 2:32 So, pretty cool that they have a lot of these examples here, so 2:38 you can see some of the things that origami can do. 2:41 Anyway, that's, that's pretty much. 2:44 That's pretty much it for Origami. 2:48 >> I mean, if you're uncomfortable sharing credit you could just call it your-igami. 2:49 >> Nope. That's called Origami, actually. 2:54 >> Next up we have a pro, sorry, not a project, an article on React tips and 2:57 best practices. 3:02 Now, we've talked about React J S here on the show before, and 3:03 this can be a bit of a complicated library when you-. 3:07 Get to need a lot of performance. 3:11 So, this person has had a lot of experience writing react. 3:14 And over the last year, they say, they have written, refactored, 3:18 and rewritten many components. 3:21 And, have gone through and seen some best practices and antipatterns emerge. 3:24 And, luckily for all of us, they have documented their experiences. 3:29 So first things first, using the pure render mix in, 3:33 will keep all of your components up to date when the properties or state changes. 3:37 This will let you not do all sorts of code like this, 3:43 throughout your reactor components. 3:47 Instead, you will just be able to use this render mix in, and 3:50 not notice that as a problem. 3:53 Now, he also goes into different things like using different property types, and 3:56 avoiding state is a really big one. 4:00 Now this is, he says a mantra that holds true to all of programming and 4:03 react components are no exception. 4:08 Even though React gives you facilities to work with state, 4:11 you should still avoid it. 4:14 Now you can do different things to avoid it like not calling set state as much or 4:16 using component did mount. 4:21 Anyway try and keep the state up to date. 4:23 Also, keep your state in one spot, and there's a really complicated example 4:26 of what happens inside of a react component with different states. 4:31 So you have one central store for you state, render it, and 4:36 then all sorts of triangles and circles and arrows happen. 4:39 >> Wow. >> And it goes back to the central store. 4:43 >> Is this precipitation or a web app? 4:45 >> Wow, you're right, that is the exact. 4:48 Example of. 4:50 >> Yeah. 4:51 >> Precipitation. 4:51 >> Oh, I get it, it's a joke about being in the cloud. 4:52 >> Yeah. 4:54 >> All sorts of in the cloud. 4:55 So that's about all we're gonna say for this article. 4:57 If you'd like to read more in depth in how to use React effectively, 4:59 check out this link in the show notes, which you can find below the video. 5:04 >> Very cool stuff. 5:07 Well next up is a wonderful blog post on the Cloud Four Blog 5:08 called Responsive Hero Images by Jason Grigsby. 5:13 And well first what are Hero Images? 5:17 >> That would be any image of you or I on a webpage, right? 5:20 That is absolutely correct, 5:22 although it also is often known as just sort of a marketing image. 5:24 So this is an example from Target, and here is a couple of other examples. 5:29 They're basically just large images with text or a call to action on top of them. 5:34 You've probably seen this before. 5:40 It's a very common design pattern. 5:41 Well. 5:43 How do you make these practical? 5:43 How do you make these responsive? 5:46 And it, the answers are actually surprisingly complex. 5:48 It's not super easy to come up with a perfect photo, 5:53 figure out exactly where the text is going to go on top of it. 5:57 And get the colors just right. 6:01 And then, also, make all of that responsive. 6:03 You have to move the text around to, you know, 6:05 maybe darker parts of the image if it's brighter text, 6:08 and then you have to get into art direction and all sorts of stuff. 6:12 It's actually kind of tricky. 6:15 So, the solution. 6:18 That Jason [UNKNOWN] came up with here, 6:20 is to let the text determine the break points. 6:24 So, first, you kind of resize the text in the browser that 6:28 you actually want to have on the page, and then, you let that determine how you're 6:34 going to break things up, how you're going to maybe, [UNKNOWN] different things. 6:39 But there's a number of different approaches to how this can work, and 6:44 this is just one of them that I think is pretty good but 6:49 there's also a couple of them that they point out. 6:52 And yeah, it's, it's pretty cool stuff. 6:55 It's actually more complex than you think it would be. 6:58 >> I guess, you know, 7:01 if you implement this well you could be considered the hero of your agency. 7:02 Next up we have a project called Plur, or Plyr. 7:07 This is a, an HTML5 media player with custom controls and web VTT captions. 7:11 This is what it looks like. 7:18 You can see we've got a video. 7:20 And some little custom controls on the bottom. 7:22 This all looks really, really nice. 7:25 >> Wow, it does look nice. 7:27 I do not hate the player. 7:29 >> Do you hate the game? 7:32 >> I don't know what you're talking about. 7:32 >> Don't hate the player, hate the game. 7:36 >> Not ringing a bell. 7:38 >> It's the game that's got you all twisted, Nick. 7:39 Anyway, let's go check out the documentation for Plyr, 7:42 which you can find over on the get hub. 7:45 Why did they create this? 7:49 Well, they wanted a lightweight, accessible and 7:50 customizable media player that just supports modern browsers. 7:53 Note that modern is italicized. 7:57 Denoting that, that is all they want to support. 8:00 So, this is accessible, lightweight and customizable. 8:03 It's only 4.8 kilobytes minified and gzipped. 8:06 So it has an easy to use API that you can get behind. 8:10 And then also. 8:14 It only loads one SVG sprite for the controls that we saw earlier, and 8:15 they even show you how to asynchronously rode this just before the body. 8:20 And then if you want to create a video player, 8:24 this is all of the markup that it takes, including. 8:26 A fallback to a poster 8:30 if the browser does not support playing that particular type of video. 8:32 And, same thing for audio. 8:37 There's also some documentation on taking into account cross origin 8:40 request vulnerabilities. 8:43 And, here's, here's what you've been waiting for. 8:45 The JAVA script settings that you can use to set it up. 8:48 You control the HTML, whether or not the player is enabled, set the volume, and 8:51 do a ton of different things. 8:55 So, if you are looking for 8:57 a modern video player to use in your websites, check this one out. 8:59 >> Very. Nice stuff, I like it a lot. 9:04 So next up is fonts in use, and this is a website 9:06 that shows you what fonts are being used in different websites, 9:11 different pieces of advertising, just maybe popular stuff that you might have 9:16 seen around the internet, like oh, I don't know the Tree op show. 9:20 And it then, it tells you what font that they're actually using. 9:24 So, for example, if we look at the new Pebble Time OS 9:27 here, they are using this font called Raster Gothic. 9:34 Now, hm, where have I seen. 9:39 Raster Gothic before, probably on the previous pebble OS. 9:42 Let me see if I can actually get there. 9:47 Yes, there we go. 9:49 So Raster Gothic in use, oh. 9:51 >> You were right. 9:53 >> There it is once again. 9:54 So, you can browse by different industries. 9:57 Wow, that's a lot of different stuff. 10:00 You can go to formats or. 10:02 >> Still a lot of stuff. 10:03 >> You can just browse by type faces and you can say, 10:04 well, I know that I will want to use maybe Rockwell but 10:08 I want to see how other people have used Rockwell in the past. 10:13 And you can kind of get an idea of where it's been used. 10:16 So,. 10:20 Anyway. 10:21 Pretty cool stuff. 10:22 Very cool for checking out fonts that you like. 10:23 >> Design inspiration. 10:26 >> Exactly. 10:27 And figure out how exactly you can best use those fonts. 10:28 >> Yeah. And if you don't like 10:33 one, you can just say. 10:33 Oh, that's not my type. 10:34 Face. 10:35 Exactly. 10:37 Well that's all we have time for this week, thank goodness, 10:39 I am @nickrp on Twitter. 10:42 And I am @jseifer. 10:44 For more information on anything we talked about, 10:45 check out the shownotes right below this video. 10:47 Thanks so much for watching, and we'll see you next week. 10:48

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

Sign up