Episode 128: Icons, Cheat Sheets, Font Pairing

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're 0:01 talking about all things web design, web development and more. 0:05 >> In this episode, we'll be talking about icons, cheat sheets, fonts and more. 0:07 >> Let's check it out. 0:13 [MUSIC] 0:14 First up is an icon set called. 0:19 ICONO, ICONO. 0:23 >> I, I, ICONO. 0:25 I, I, I don't ICONO. 0:26 >> Oh, I see. 0:28 Oh, no. 0:29 >> I co, yes. 0:32 >> I, co, no. 0:34 Okay, well anyway, it's pure CSS icons with only one element. 0:35 So each one of these things you see here. 0:40 >> I can't believe it. 0:43 Is the element surprise? 0:44 [BLANK_AUDIO] 0:45 Get it? 0:49 >> I, I got it. 0:50 So, all of these elements here, all of these icons here are comprised of 0:51 one element, and they're just styled with CSS. 0:55 So, that's pretty amazing. 0:59 And if you want to use it in your website, 1:02 you can just download icono.min.css and 1:05 then link it into your web page, and then you can go ahead and use these. 1:11 You can also check out the GitHub repo, and if you want to watch that and see. 1:17 I don't know what new icons come out in this icon set or don't. 1:23 I mean, it's, it's up to you. 1:27 >> Yeah, we're not the boss of you. 1:28 We just, we just politely suggest links, it's up to you if you wanna go to them. 1:29 >> I'm not here to judge. 1:32 >> Yeah, we support your decision either way. 1:33 But those icons are on GitHub, and next up is a great segway into a GitHub 1:35 cheat sheet, and you can also find this cheat sheet on where else? 1:40 GitHub. 1:45 >> GitHub,. 1:46 >> I know you're expecting me to say CNN.com. 1:48 Nope. 1:51 Anyway, this is a wonderfully cool collection of hidden and not so 1:52 hidden features of Git and GitHub. 1:56 Now, a lot these start with things that you can add to the url of something and 1:59 you could do things like ignore whitespace. 2:05 So if you add a question mark and w equals one to any dif the URL will remove 2:08 any changes only in white space which lets you just see the code that has changed. 2:14 You can also do fun things like adjust the spacing of tabs from 4 spaces, to 2 2:20 spaces, to 8, you know, whatever, whatever your little heart desires you can do. 2:26 More URL tricks, you can see the commit history by author, 2:30 just put author in the query string. 2:35 Alright, and we're not going to get to far into this because there are an absolute 2:38 ton of different items on here because this is a very impressive cheat sheet, but 2:42 we will have a link in the show notes that you can check out right below this video. 2:47 >> Very nice, Duff. 2:51 Well, next up is the challenge for web designers in 2015 parenthesis or 2:52 how to cheat at the future. 2:57 That's the title of this blog post and it's basically about how 3:00 this person thinks we're at an inflection point very similar to Ajax. 3:05 So when Ajax first came around it was all new and 3:10 different and now, Ajax is everywhere. 3:13 So. 3:18 If you kind of look around at the technology available to us now, 3:19 particularly in phones, a phone can do all of these things, and, 3:23 in fact, a laptop can do many of these things, as well. 3:28 So you can capture the screen, the phone could listen, or 3:32 record video and audio, can respond to ambient light, 3:36 can vibrate, you can work off line, you could use the camera, all sorts of stuff. 3:39 And basically, looking a couple of years in to the future, 3:45 kind of based on what we've seen in the App Store, and the Android stores, 3:50 you can kind of look in to the future and look at these design patterns, and 3:56 get a sense of where the web might be going in a couple of years. 4:00 So the challenge is not to just wait around and 4:04 do this, but instead of waiting five years, just try to work at some of 4:09 these things right now and, kind of, I guess, design what is lacking. 4:14 That's what they say in the article. 4:19 >> The future is today. 4:20 >> Only if you make it today. 4:23 >> Yesterday, already happened. 4:25 >> That's always true. 4:29 >> Next up we have a collection of essential JavaScript links. 4:32 This is a wonderfully large collection of you guessed it, links about JavaScript. 4:35 Now, this is opinionated and 4:41 the author also would like to say that hey it has no bearing on whether or 4:44 not the links make the lists, some of them are affiliate links. 4:49 So that's just a little little disclaimer that we have upfront and 4:52 also not not in cahoots with the treehouse show. 4:57 Anyway there are a lot of great reading materials if you are looking to 5:00 learn JavaScript there is great reading learning JavaScript essentials. 5:04 This is for all skill levels. 5:08 There is required viewing, this is a small collection of different 5:11 videos about JavaScript and how to do great coding. 5:16 Interesting things like immutable data and 5:21 react.js, which is a really cool library that we haven't gone too far into. 5:23 Even links to the different specs and 5:28 the ecma six script draft there's a collection of books and 5:30 different tools and libraries, just a ton of different things, so if your looking to 5:34 get a little bit further into JavaScript coding this is a great list to start with. 5:38 >> Very nice, Duff. 5:43 Well next up is Font Pair. 5:44 This is a website that helps you pair Google fonts together. 5:46 So, if I just scroll down the page here you can see, oh, okay, so 5:50 the heading is this font and then the body is just average. 5:55 Oh, that's the name of the font, okay. 6:00 And here we have ice talk web and then the body's Laura. 6:02 And here the heading is Lato and Merriweather. 6:08 It's pretty cool. 6:11 These fonts actually look really nice together. 6:12 And, so, if you're preparing papyrus and 6:14 comic sans together, then maybe this is the website for you. 6:17 If I- 6:19 >> This, this is a nice website. 6:20 I would like it to also suggest like maybe cheese and, and burger pairings. 6:22 You know, get a little burger menu on here. 6:28 >> Yeah. 6:29 >> Sounds delicious. 6:30 >> That would, that would be a nice website. 6:31 >> I wish to make that. 6:32 >> I, I- >> Wanna make that? 6:34 You wanna make a website together? 6:35 >> Yeah, yeah. >> You want a weird website journey? 6:36 >> Yeah, I like websites. 6:38 >> I like websites. 6:39 >> If you click here, you can say maybe you want a cursive font and then a serif 6:40 font but, you're not quite sure which ones of those will look good together. 6:45 Well, you can click on that and here we have some cursive fonts and 6:50 then we have some serif fonts. 6:56 So, pretty cool. 6:59 It's very helpful if you just need to pick some fonts real quick and 7:01 you have maybe one font that you like but 7:06 you're not sure what font might go with it, so pretty cool, pretty helpful. 7:08 >> Yeah I'm really hungry now. 7:12 >> Yeah for the hamburgers. 7:14 >> Mm-hm. 7:15 But anyway, that's all we have time for this week. 7:16 Nick who are you on Twitter? 7:18 >> I am at @nickrp. 7:18 >> And I am at @jseifer. 7:19 For more information on anything we talked about check out the show notes right below 7:20 this video. 7:23 We want to thank everybody for watching and we'll talk to you next week. 7:24 See you later. 7:26 [MUSIC] 7:28

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

Sign up