Episode 102: UI Kits, Internet Explorer Development Tools, Fast.js

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, you're weekly dose of Internets 0:02 where we talk about all things, web design, web development, and more. 0:04 >> For a free month of Treehouse, head on over to teamtreehouse.com/show. 0:08 In this episode we'll be talking about UI 0:12 Kits, Internet Explorer development tools, fast JavaScript, and more. 0:14 >> Let's check it out. 0:19 [MUSIC] 0:20 First up, is a UI Kit for iOS 8. 0:25 Now, not a whole lot has changed in iOS 8. 0:29 The big design change was, in iOS 7, but there's a few little tweeks. 0:32 And, this one is for Sketch, so, if you like to use Sketch, you can 0:37 download this and use this kit to build out interfaces. 0:43 So, for example, you could build an icon, just like this compass here. 0:48 It's already prebuilt. 0:54 You have North, South, East and West, and 0:55 all the little tick marks all the way around. 0:58 Pretty cool stuff. 1:00 So, if we scroll down here, you can see, 1:02 they have the entire springboard, completely built out for you. 1:03 Ready to go. 1:08 There is the share sheet, so, for example, in 1:10 the Photos App, you might have a share sheet 1:14 that looks like this, you can hit the share 1:17 button, comes up, and you have all these icons here. 1:18 Anyway, if you're mocking up apps in Sketch and in particular 1:22 you're mocking up mobile apps for iOS, this is really useful. 1:27 >> Yeah, very nice. 1:31 Plus, it was all made in Sketch, so- 1:32 >> Mm-hm. 1:33 >> Easy to import. 1:34 >> Yep. 1:34 >> Next up, we have an announcement 1:36 from Microsoft, on the Internet Explorer developer channel. 1:37 Now, Microsoft and Internet Explorer get a lot of hate 1:41 from the web development community because of IE6, but we are 1:44 way past that and they've actually been making a ton 1:49 of really great strides, and progress, on the Internet Explorer browser. 1:51 >> It's in the past, water under the bridge. 1:55 >> Yeah, water under the bridge. 1:57 Reloads of, under the page. 1:58 >> Sure. 2:00 >> JavaScript under the, mouse. 2:01 >> Getting worse. 2:04 >> On click. 2:05 >> Really bad. 2:06 >> Under the, anchor element. 2:07 So, anyway, there is now a Dev channel of Internet Explorer. 2:11 This is gonna be very similar to Chrome 2:16 Canary, or any of the Firefox nightlys, and 2:18 you can check out some of the new tools, that will be, inside of Internet Explorer. 2:22 They, are doing enhancements to their developer tools. 2:27 Something that's actually pretty nice, is a new 2:31 colorization of the dom in the UI responsiveness tool. 2:34 It can show you what parts, of your JavaScript 2:38 and dom are rending when and what's going too slow. 2:41 It even gives you, a CPU utilization percentage. 2:45 also, in the new version of Internet Explorer, 2:49 you can use your Xbox controller, for web gaming. 2:53 We've talked about web games, on the show before, so 2:57 it's cool that, Internet Explorer is going to support that. 3:00 Anyway, this is going to be an ongoing thing for Microsoft. 3:03 They are always going to be enhancing 3:06 Internet Explorer, so, you're going to need to 3:08 check out the Dev channel, if you wanna stay on top of those latest changes. 3:10 We'll have a link to that in the 3:14 show notes, which you can get to at youtube.com/gotreehouse. 3:15 Or search for us on iTunes, we're The Treehouse Show. 3:18 And make sure to check out Treehouse for a free month, at teamtreehouse.com/show. 3:21 >> Very nice stuff. 3:25 Well, next up, is a really cool post 3:26 from the Codrops blog called Hover Effect Ideas. 3:28 And exactly as the name implies. 3:32 It's a bunch of cool ideas for different hover effects, 3:34 so I scroll down the page here, whoa, look at that. 3:37 >> What, what? 3:41 >> I can hover over- 3:41 >> Are we floating? 3:42 >> Each one of these effects and- 3:42 >> I'm getting motion sickness. 3:44 >> They all look a little bit different, they 3:45 all kind of generally play on the same idea 3:48 of, movement, so you hover over and the text 3:50 moves slightly or the picture changes in some way. 3:54 There's a few more here. 3:58 Check that out. 3:59 You can have some icons pop up, if you wanna do that. 3:59 >> Like a share icon, >> Mm-hm. 4:03 >> Would be great there. 4:04 If, if only we could agree on one. 4:05 >> If only, someday. 4:07 There's also ones where, the border will actually be drawn on. 4:09 Let me try this out. 4:13 Whoa, look at that. 4:14 >> What? 4:15 >> Amazing. 4:16 >> Wow. 4:16 >> Anyway, really, really nice hover effects, very impressive, and 4:17 definitely useful if say, you're building out a photo gallery 4:22 or maybe you have a web design portfolio, and you 4:26 just want a really nice way to show off your work. 4:29 You can include some nice hover effects, to highlight each one of them. 4:32 >> Very nice. 4:36 >> Mm-hm. 4:36 >> Next up we have a project called Fast dot JS. 4:37 This is a small JavaScript library, that replaces 4:40 some of JavaScript's built-in functions, with faster versions. 4:44 There is literally no reason not to use it. 4:48 Except later, where they mention some reasons not to use it. 4:51 But we'll get to that, in just a moment. 4:54 So, as we see here, it says it is, 4:57 faster user-land re-implementations for several 4:58 common, built-in native, JavaScript functions. 5:01 And this is going to work using, installing it via NPM. 5:04 And then, you just require it and you are good to go. 5:08 So, if we scroll down here, we can see some of, the benchmarks right here. 5:12 Using Fast dot JS and the clone method, fast dot JS is 125% faster. 5:18 Same thing with index of, Fast dot JS is 73% faster. 5:27 So, why in the world wouldn't we use this? 5:32 Well, it does not conform 100% to the ecmascript specification. 5:34 And, it is not a drop in replacement 100% of the time. 5:40 So, there are a couple more caveats, that they specify in here. 5:45 So, as long as you are not doing anything that might 5:49 interfere with that, you are good to go on using this. 5:52 So, check it out. 5:55 Not a whole lot to say about it, other than that. 5:56 Really cool project. 5:58 And also cool to dive into the source code, if you wanna see how they did it. 5:59 >> Very nice. 6:02 Well next up is, Headstart, an easy to use automated front-end set up. 6:03 So you can just click this button right here. 6:08 Start using Headstart, basically it will give you a CLI, or 6:10 command line interface to help you scaffold your projects for example. 6:14 You can think in fragments. 6:19 In other words it says, learn to love folder structures. 6:22 So that's a way you can. 6:26 >> I already love folder structure [LAUGH] I don't need to learn that. 6:27 >> You can actually structure your project and dependencies that way. 6:30 And, it has a bunch of optimizations already 6:34 built in, such as hinting, uglyfication, concatenation, SVG optimization. 6:38 Revelation and more, it all rhymes, so it must be true. 6:43 Let's click on getting started here. 6:48 >> Do you think CSS or JavaScript gets upset when you say uglification? 6:50 >> [CROSSTALK]. 6:57 >> I know I'd get upset if you said that about, something I was doing. 6:57 >> Next up is, installing so you can install it with the node package managery 7:05 type install, G headstart and it will give you a couple of, files to start out with. 7:10 And then, you can go ahead and 7:18 start developing with it, in either development, environment. 7:19 Or you can do your builds for production and include all of those optimizations. 7:23 Like, uglification. 7:29 >> Your words. 7:33 Next up, we have a project called Epoch. 7:35 This is, a real time charting library 7:37 for building beautiful, smooth, and high-performance visualizations. 7:40 This is a plug-in for D3.JS. 7:43 It is built for developers. 7:48 You can tell that because it says it right there, on the website. 7:49 Let's see some of the things we can do, when we explore what this library does. 7:52 Here is, a real time heat map, generated using just this code. 7:58 Here they, you give it just the heat map data and the labels that you want. 8:03 The ellipses here, denote that there is more than just this data. 8:08 Since it is real time, more data is constantly coming in. 8:11 And then, all you do is use this script tag call Epoch. 8:15 Give it the type of chart that you want and the data. 8:20 Course it has different options for how you want to display everything. 8:25 Wether or not you wanna give it a padding and how many buckets there are. 8:29 Now, the reason this sort of plug-in is great, is because D3.JS is a really, 8:33 really impressive library, but sometimes, it can 8:40 be a little bit difficult to start with. 8:42 So, some developers have created plug-ins to ease, creating some of m, some 8:45 more of these common things, like heat maps, bar charts, things like that. 8:49 We can see there's a lot more different examples that we can go through and 8:54 play with and we will have a link to that, here in the show notes. 8:58 It's a, it's a great library and actually, if you read through the 9:01 source code it's pretty Ep, Epic, 9:04 Epoch, Epich, [INAUDIBLE] Epic, Epoch, epoch, epoch. 9:07 >> Well, that's a good place to end it. 9:10 I am @nickrp on Twitter. 9:14 And I am @jseifer, for more information on anything 9:15 we talked about check out our show notes at youtube.com/gotreehouse. 9:17 You can also search for us on iTunes, we 9:21 are The Treehouse Show and don't forget to rate us. 9:23 >> And of course, if you'd like to try out Treehouse for 9:25 free for 30 days, be sure to check us out at teamtreehouse.com/show. 9:28 Thank you so much for watching, and we will see you next week. 9:34 [MUSIC] 9:38