Episode 99: Inline Anchor Styles, Steady Scrolling, Web Speech API

>> I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:00 >> And you're watching the Treehouse Show, your weekly dose of internet 0:01 where we talk about all things web design, web development and more. 0:04 >> For a free months trial of Treehouse head on over to teamtreehouse.com/show. 0:07 In this episode we'll be talking about Inline Anchor 0:12 Styles, Steady scrolling, the web speech API and more. 0:15 >> Let's check it out. 0:19 [MUSIC] 0:20 >> First up is Inline Anchor Styles. 0:25 Now if you've ever styled a link, which you probably have. 0:28 >> Haven't >> Because it's such a common element. 0:32 You know that links are by default an 0:35 inline element, they're not a block level element. 0:37 So it can look a little bit plain if 0:40 you just leave the default underline and the default color. 0:43 So it's nice to have a few different styles for your Inline links. 0:46 And that's exactly what this codrop article has. 0:51 So if we scroll down, you can see a 0:54 couple of different examples of what these look like. 0:56 So far, it just looks like a normal underline. 0:59 But if we hover over. 1:02 >> It is just an everyday website. 1:02 Whoa, what happened. 1:03 >> Whoa, what? 1:05 [CROSSTALK] What just happened. 1:06 >> We, we are on the website of the future. 1:07 That's what happened. 1:09 >> We covered over these. 1:10 Whoa. 1:12 >> What? 1:12 >> That's animated. 1:12 That is insane. 1:14 They are using CSS transitions to make the site. 1:15 >> Is this a website or a big budget movie? 1:18 Hollywood blockbuster. 1:21 >> Amazing, there's few more here, kinda like 1:23 this particular style where it kinda zooms out 1:26 of the page and has some nice rounding on the corners and border radius so few more. 1:29 Just look at these. 1:35 Not a whole lot to say about it but its just. 1:36 Pretty cool to have a bunch of different styles here. 1:39 There's one more down here, I think, let's see. 1:41 This one, nope. 1:45 There's quite a few over here. 1:47 >> What? 1:48 >> Look at that. 1:49 There we go. 1:49 >> wow. 1:50 >> So when you hover over, it actually shows the link that it's going to, now 1:50 this is more common in print style sheets when you actually wanna show the full URL. 1:56 For a link, but you could do it here as well, if you 2:00 want to know where that link is going to before you click on it. 2:02 >> Is this a 2D website or a 3D video game? 2:05 >> Amazing. 2:09 >> That is amazing. 2:10 >> But that's about it, so. 2:11 >> Really felt like you were in your element scrolling down that page. 2:14 >> We're really in line with one another today. 2:17 >> You are reading my mind. 2:19 Next up we have a project called Steady.js. 2:22 Steady.js is a piece of Java's, JavaScript 2:24 words that you can use to have perform in scrolling with media queries. 2:30 Let's check out this, this website right here. 2:35 It describes the project as a jank-free module to do logic on the on scroll event. 2:38 Without performance regression in media query-like conditions. 2:44 Now, this is going to be more important when you're 2:49 on a mobile device, where doing something like hanging something 2:52 onto the scroll event, every time you scroll the webpage, 2:57 if you have to many events, it could cause performance degradation. 3:00 When you use this library it takes the performance and makes 3:04 it use request animation frame, so it will seem much smoother. 3:08 Now as you would expect from pretty much anything we feature on 3:13 this show, there are a bunch of different options, so you can 3:17 specify different conditions for when you do want these on scroll events 3:20 to happen, so you're not calling too many things at a time. 3:24 And you can remove the conditions, add 3:28 the conditions, and even add different trackers. 3:31 Now, there are a ton of different options. 3:34 I recommend you check this plug in out in 3:36 the show notes which you can get to at youtube.com/gotreehouse. 3:38 Also, search for us in iTunes. 3:42 We are the Treehouse Show. 3:43 And don't forget to sign up for a free 30 day trial at teamtreehouse.com/show. 3:45 >> Next up is voice elements. 3:50 This is a project that uses web components in combination with the web speech API. 3:53 And the web speech API allows for audio to come out of the computer as spoken text. 3:58 It's, it's pretty cool. 4:07 Synthesized text. 4:08 And web components is basically a way for you to create 4:11 your own HTML elements that combine a couple of different ones together. 4:14 Now, I'm gonna. 4:20 >> We've talked about web components on the Treehouse show 4:21 before, so make sure to catch up on old episodes. 4:23 >> We have. 4:25 So, pretty amazing stuff. 4:26 And then web components packages it all up into the voice player element here. 4:28 You can see that right here. 4:36 >> So conceivably your computer could talk to you. 4:37 >> That is right. 4:39 So if I refresh the page here. 4:40 >> Welcome to the jungle. 4:44 [LAUGH] Just kidding. 4:45 Welcome to the Voice Elements demonstration page. 4:46 >> Wow, that website just talked to us. 4:49 You can install this using Bower. 4:52 I'm actually gonna scroll down to the bottom of 4:54 the page here before we talk about this anymore. 4:57 The usage is to input the web components polyfill, so you can do that. 5:00 And then you import the custom elements. 5:06 So there's a voice player element here and then there is a 5:09 voice recognition element; so this project also allows you to do voice recognition. 5:12 And then you can use it using the voice 5:18 player and voice recognition elements here, those are web components. 5:20 So if I scroll back up here, you can see that there is 5:25 a voice player actually on this page and it read, the text that we have here. 5:30 And, right here there's another demo that uses JavaScript, and attaches 5:36 an event listener so when you click this button, it will actually talk in Spanish. 5:42 [FOREIGN]. 5:47 >> So that's pretty cool. 5:48 And then, down here you can actually type in your own text and make it speak. 5:49 So I'm gonna type in the Treehouse Show is amazing LOL NICK. 5:55 >> The Treehouse Shows is amazing LOL NICK. 6:04 >> So, pretty good. 6:06 Further down we have a couple of options here. 6:09 You can specify an accent, so for example you could have an 6:11 English US accent, or an English Great Britain accent. 6:16 There's a couple more methods here. 6:22 You can make it speak, pause, resume. 6:24 >> Jason is using the website to. 6:26 >> And down here we have voice recognition and if you click start here 6:30 and then you click allow, it should actually recognize my speech. 6:38 I might have to click start again. 6:45 It should actually recognize our speech, the Treehouse Show 6:48 is the most amazing show in the entire world. 6:51 >> And it may or may not, oh there we go, so it takes a second. 6:57 And the speaker, the speech recognition is actually pretty good, You 7:00 have to speak somewhat clearly, but generally, it works pretty well. 7:06 But anyway, that's that's the Voice Elements project. 7:11 >> Pretty awesome. 7:15 >> I always wanted my website to talk to me. 7:16 I think they should implement that on any site that 7:19 allows comments and have it read the comments to you. 7:21 >> Or you should have voice recognition comments. 7:24 >> Yes. 7:28 >> Yes. 7:28 >> Wow. 7:29 >> That will be perfectly clear every time. 7:30 >> The future is today. 7:32 Next up we have a project called JS NICE. 7:34 This is a project that de-obfuscates JavaScript. 7:37 So if you have JavaScript that you want to 7:42 see what it actually does because it has been compressed. 7:45 And, or minified, you can paste it in 7:47 here and click this nicify JavaScript, nicify is 7:50 a real word, and then over on the 7:54 right side you will see the de-obfuscated JavaScript. 7:57 This is gonna be something that is useful if 8:02 you are trying to learn from a website, maybe 8:05 you've got some JavaScript you wanna see exactly how 8:07 it works, and the source code has been minified. 8:10 Great opportunity to learn from it. 8:14 Go ahead and check out the JS NICE project. 8:16 It's actually called JS NICE. 8:19 When I first saw the domain I thought it was J-S and ice. 8:20 Which would be our hip hop group name. 8:25 >> Coming soon. 8:28 Next up is. 8:29 >> You'd be ice. 8:30 Because I'm Jason. 8:31 >> That makes sense. 8:33 Wow. 8:34 >> Yeah. 8:35 >> Very nice. 8:35 >> Next up is this Sketch tutorial. 8:38 Now, if you haven't used Sketch, it's basically an app that 8:41 allows you to draw some shapes and create mock ups for interfaces. 8:44 Now, sketch is a little bit different than using 8:50 Photoshop or Illustrator, but this tutorial does a really 8:52 nice job of introducing how to use a lot 8:56 of the different features by creating this particular icon. 8:59 So, it's sort of a colorful switch here, and this could be used as 9:04 say an IOS icon and we scroll down here and it walks through the installation. 9:09 How it make an art board, save a color and then scroll down a little further here. 9:14 It shows you how to start actually drawing out the shapes that you're going to need. 9:21 And then after you have the base shapes in place with 9:27 your colors, you can go ahead and start filling things in. 9:31 So there's a gradient being filled to this circle here and 9:35 further down it should show you how to make a bevel. 9:41 There it is right there and there's a couple of 9:45 differences between sketch and other programs like Photoshop and Illustrator. 9:49 And this tutorial just does a really great job of pointing out exactly how to 9:54 do some of these features that you might 9:59 already be familiar with in another drawing application. 10:01 It also goes through I think shadows and other common features that 10:05 you might already be familiar with but are a little different in Sketch. 10:10 >> So many of designers are using sketch these days. 10:14 It's definitely worth learning. 10:16 >> So many, much designers. 10:18 >> Next up, we have a project called jQuery match heights. 10:22 This is a jQuery plugin that will allow you to give 10:26 a group of elements matching height, which makes for nicer layouts. 10:29 Let's go ahead and take a look at a demo, right here. 10:33 Here are a ton of elements that we have on the page, and you'll notice 10:36 that they all have the same height because 10:40 they are using the jQuery match height plug-in. 10:42 Can see we can click remove match height, and, oh, look at that. 10:46 This does not look good anymore. 10:50 I don't even want to be on this website because the boxes are not equal heights. 10:52 >> Ugh. 10:56 >> Ugh, I know. 10:57 Now, you can specify different things to match the height value or take into 10:58 account, reload the page here, so we can continue to get the height matched. 11:01 You can see with padding, with margin, oh wow, we don't want a margin, yes we do. 11:06 Use borders, don't use borders, use Border Box. 11:12 Hey, no, we'll do this by row. 11:14 So, anyway, this plugin is very, very easy to use. 11:16 You can resize, you can match the heights by row. 11:20 You can, it's also responsive, which is quite wonderful. 11:24 So this is a great plug in. 11:28 It's not as heavy as some of the other plug ins we've featured on the show. 11:29 Which will resize everything automatically and kind of 11:32 just do all of the layout for you. 11:35 You have to do a little bit more, get a little more control with this. 11:36 So, it's about all we have time for today. 11:41 Nick who are you on Twitter? 11:43 >> I am @nickrp. 11:44 >> And I'm @jseifer. 11:45 For more information on anything we talked 11:46 about, check out our show notes at youtube.com/gotreehouse/. 11:47 Also search for us on iTunes, we are The TreeHouse Show. 11:51 Don't forget to rate us. 11:53 >> And of course, if you'd like to get a free 30 11:55 day trial of TreeHouse, be sure to check us out at teamtreehouse.com/show. 11:58 Thank you so much for watching, and we will see you next week. 12:02 [SOUND] 12:06

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

Sign up