1 00:00:01,000 --> 00:00:04,330 I'm Nick Pettit. >>I'm Jason Seifer and you're watching The Treehouse Show. 2 00:00:04,330 --> 00:00:07,580 Your weekly dose of Internet where we talk about all things web design, 3 00:00:07,580 --> 00:00:09,750 web development, and more. 4 00:00:09,750 --> 00:00:14,920 In this episode, we'll be talking about app store screenshots, regular expressions, 5 00:00:14,920 --> 00:00:16,950 style guides, and more. 6 00:00:16,950 --> 00:00:18,960 Let's check it out. 7 00:00:22,350 --> 00:00:23,950 [The Treehouse Show] 8 00:00:24,920 --> 00:00:28,770 First up is a blog post from the 37signals blog 9 00:00:28,770 --> 00:00:32,590 Signal vs Noise about designing screenshots 10 00:00:32,590 --> 00:00:36,050 for your app in the Apple App Store. 11 00:00:36,460 --> 00:00:38,380 So if we go ahead and take a look at the post, 12 00:00:38,380 --> 00:00:41,070 they give a couple of examples right here 13 00:00:41,620 --> 00:00:46,260 and they say you want to provide a sense of who you are, 14 00:00:46,260 --> 00:00:50,940 how hard you worked, and prerequisites to using your app. 15 00:00:51,260 --> 00:00:55,660 You also want to communicate what your app's job is 16 00:00:55,660 --> 00:01:00,390 so they'll say later in the post that they liked the fact that there's text here 17 00:01:00,690 --> 00:01:03,820 that's actually explaining how you should use the app 18 00:01:03,820 --> 00:01:06,560 or taking that idea a little bit further 19 00:01:06,740 --> 00:01:11,930 they suggest actually providing a little bit of a tutorial 20 00:01:11,930 --> 00:01:16,190 saying how your app should be used more specifically. 21 00:01:17,370 --> 00:01:20,360 I really liked the fact--and they say this in the post. 22 00:01:20,360 --> 00:01:24,550 I also really liked the fact that they actually have pictures of the app 23 00:01:24,550 --> 00:01:27,160 on a phone in a person's hand. 24 00:01:27,690 --> 00:01:30,940 It gives you a real sense of what the app is actually going to look like 25 00:01:30,940 --> 00:01:34,610 when you're using it and gives you some sort of an idea 26 00:01:34,610 --> 00:01:36,860 as to where you should tap on the screen. 27 00:01:36,870 --> 00:01:41,210 And so if you are designing an app for Apple's App Store, 28 00:01:41,210 --> 00:01:43,250 you should definitely check out this post. 29 00:01:43,570 --> 00:01:45,430 There's a couple of more examples in there 30 00:01:45,430 --> 00:01:50,240 and design those images for the app store. 31 00:01:50,240 --> 00:01:53,430 And if you are submitting an app to the App Store 32 00:01:53,430 --> 00:01:56,350 and would like a tasteful headshot of Nick or myself, 33 00:01:56,350 --> 00:01:58,590 please drop us a line on Twitter. 34 00:01:58,590 --> 00:02:01,740 I'm @nickrp. >>And I'm @jseifer. >>Looking forward to it. 35 00:02:01,740 --> 00:02:04,180 Next up, if you ever use regular expressions, 36 00:02:04,180 --> 00:02:06,880 sometimes it can be kind of a pain to test your code with though. 37 00:02:06,880 --> 00:02:09,910 I use them on the regular. >>Expressions. 38 00:02:09,910 --> 00:02:13,920 So there is a great website called Debuggex. 39 00:02:13,920 --> 00:02:17,960 It's currently in beta where you can put in your regular expression 40 00:02:17,960 --> 00:02:20,080 as well as choose the different flags to it 41 00:02:20,080 --> 00:02:23,930 and then it will show you whether or not your test data matches. 42 00:02:23,930 --> 00:02:27,160 Nope. >>Yeah. I know. Isn't it crazy? It's like we're living in the future. 43 00:02:27,160 --> 00:02:32,540 Now, one thing that's great is right below it there is a handy reference chart 44 00:02:32,540 --> 00:02:35,970 to see what exactly is in the regular expressions. 45 00:02:35,970 --> 00:02:40,230 Another great thing you can even click the libraries and you'll be good to go. 46 00:02:40,230 --> 00:02:43,070 So anyway, great website. Check that out. 47 00:02:43,240 --> 00:02:45,000 You'll find a link to it in the show notes, 48 00:02:45,000 --> 00:02:47,010 which you can get to at youtube.com/gotreehouse 49 00:02:47,010 --> 00:02:49,460 or in iTunes search for The Treehouse Show. 50 00:02:50,680 --> 00:02:57,660 Next up is Forecast Font. It's a web font for creating multilayered weather icons. 51 00:02:57,660 --> 00:03:01,040 I know that because it says it right here on the website. Amazing. 52 00:03:01,040 --> 00:03:05,170 You can go ahead and download it or you can tweet about it and that's pretty much it. 53 00:03:05,170 --> 00:03:07,330 Oh wait! No, I can actually scroll down further. 54 00:03:07,330 --> 00:03:12,600 It shows you all the different icons that are in this icon font 55 00:03:12,840 --> 00:03:17,840 and you can basically demonstrate any type of weather 56 00:03:17,840 --> 00:03:19,360 that you could possibly want. 57 00:03:19,360 --> 00:03:22,550 So if you're creating yet another weather app for the world, 58 00:03:22,550 --> 00:03:25,770 this is definitely something to check out. 59 00:03:25,770 --> 00:03:30,550 I imagine that you can use this on iOS. I don't actually know for sure. 60 00:03:30,550 --> 00:03:36,210 I'm not an iOS expert but I know that you could certainly use this on your website 61 00:03:36,210 --> 00:03:43,870 or on your mobile web app to create some sort of geo-location based weather app. 62 00:03:44,340 --> 00:03:50,370 So pretty cool stuff--I mean, the icons actually looked pretty nice all joking aside. 63 00:03:51,650 --> 00:03:54,300 So definitely check that out and go ahead 64 00:03:54,300 --> 00:03:56,850 and hit the download button or the tweet button. 65 00:03:56,850 --> 00:03:58,810 It's up to you. There's two choices. 66 00:03:58,810 --> 00:04:00,820 There are certain weather patterns that are missing 67 00:04:00,820 --> 00:04:02,910 that we experience here in Orlando, Florida. 68 00:04:03,070 --> 00:04:05,860 That's true. There's hot, hotter, and really, really hot. 69 00:04:05,860 --> 00:04:07,520 And don't go to the theme parks. 70 00:04:07,520 --> 00:04:11,900 Oh and there's also it's-so-hot-out-that-my-iPhone-turned-off. 71 00:04:11,900 --> 00:04:14,710 That actually happens here. >>Yeah. 72 00:04:15,420 --> 00:04:18,140 So next up, we have a website called-- 73 00:04:18,140 --> 00:04:21,540 every JavaScript library you should be looking into. 74 00:04:21,570 --> 00:04:25,100 Ambitious. >>I know. That's a very opinionated claim. 75 00:04:25,390 --> 00:04:29,070 But they actually back it up with checkboxes and labels 76 00:04:29,070 --> 00:04:33,420 on those checkboxes that pertain to separate JavaScript projects. 77 00:04:33,460 --> 00:04:36,030 So as I'm checking each one out I can actually just check it off. 78 00:04:36,030 --> 00:04:40,240 Yeah. Exactly. >>Nice. >>So you can check what you want on here. 79 00:04:40,400 --> 00:04:43,110 And this will narrow down the different libraries 80 00:04:43,110 --> 00:04:45,420 that match what you want in the framework. 81 00:04:45,420 --> 00:04:48,450 So if you want something that supports events, go ahead and check that. 82 00:04:48,610 --> 00:04:51,130 If you want something that supports events and has a framework, 83 00:04:51,130 --> 00:04:53,250 hey you can get that too. 84 00:04:53,250 --> 00:04:55,690 There's knockout.js or whatever. 85 00:04:55,690 --> 00:04:59,160 Anyway, there's a ton of different combinations that you can use in here 86 00:04:59,540 --> 00:05:03,100 and this is a really, really great library in the sense that 87 00:05:03,100 --> 00:05:06,560 you don't want to necessarily overload your application 88 00:05:06,560 --> 00:05:08,820 by throwing every single library in there. 89 00:05:08,820 --> 00:05:10,630 So if you can get one that's a little bit slimmer 90 00:05:10,630 --> 00:05:13,230 that would be a little bit more friendly to mobile devices, 91 00:05:13,230 --> 00:05:16,310 that's something that would really improve the user experience overall. 92 00:05:16,370 --> 00:05:20,840 I think a lot of web optimization is about a lot of small wins 93 00:05:20,840 --> 00:05:23,580 and not one really big win so that's a good tip. 94 00:05:23,580 --> 00:05:26,810 It is a good tip. Well that's two good tips because of what you said too. 95 00:05:26,810 --> 00:05:29,210 Bam. >>Bam. 96 00:05:29,210 --> 00:05:35,270 Next up is style guide boilerplate. So let's say that you're creating a website-- 97 00:05:35,270 --> 00:05:38,490 I mean, obviously you probably are. Otherwise, why are you watching this? 98 00:05:38,490 --> 00:05:42,790 And you want to-- >>Because of the talent. >>Oh, that's true. 99 00:05:42,790 --> 00:05:46,890 And you want to kind of roll your own CSS framework. 100 00:05:46,890 --> 00:05:53,160 You could of course just use any off-the-shelf CSS framework like boilerplate 101 00:05:53,160 --> 00:05:58,970 or Zurb foundation but oftentimes you use a lot of common CSS patterns 102 00:05:58,970 --> 00:06:04,940 across many websites, and sometimes it can be a little bit difficult to organize those. 103 00:06:04,940 --> 00:06:10,210 It can be difficult to remember all of your font settings, etc. 104 00:06:10,210 --> 00:06:13,060 So that's where style guide boilerplate comes in. 105 00:06:13,060 --> 00:06:18,990 And rather than show you the page here, I'll just show you a quick demo. 106 00:06:18,990 --> 00:06:23,790 It will basically generate this code for you where you can type in some About text, 107 00:06:23,790 --> 00:06:28,860 you have all the colors that you're using, it will show you what your fonts looked like, 108 00:06:28,860 --> 00:06:32,790 and it gives you a couple of other base styles. 109 00:06:32,790 --> 00:06:37,160 So if you scroll down the page you can see what various elements looked like 110 00:06:37,160 --> 00:06:41,360 under the CSS framework that you made yourself. 111 00:06:41,670 --> 00:06:43,920 So you can go ahead and download it. 112 00:06:43,920 --> 00:06:47,240 It looks like it's in version 2. That's always a good sign. 113 00:06:47,240 --> 00:06:53,650 And if you look at the page here, there's a couple of other useful information about it 114 00:06:53,650 --> 00:06:55,850 but definitely check it out. 115 00:06:55,850 --> 00:06:57,180 Good. >>You okay, Jason? >>I'm great. 116 00:06:57,180 --> 00:07:02,540 Next up, Glenn Stovall gives us an overview of AngularJS. 117 00:07:02,540 --> 00:07:07,030 AngularJS is a JavaScript library invented by Google for creating 118 00:07:07,030 --> 00:07:10,110 complex client-side web applications. 119 00:07:10,110 --> 00:07:14,730 And he gives a really, really great introduction to how Angular works. 120 00:07:15,490 --> 00:07:18,430 So it's just an overview but he goes through and tells you 121 00:07:18,430 --> 00:07:20,870 what the philosophy of AngularJS is. 122 00:07:20,980 --> 00:07:23,530 How some of the databinding works with, 123 00:07:23,530 --> 00:07:27,280 you know, just a really, really simple AngularJS application. 124 00:07:27,280 --> 00:07:31,810 He goes into modules, controllers, and just a little overview 125 00:07:31,810 --> 00:07:34,740 of the different parts of AngularJS. 126 00:07:34,780 --> 00:07:37,290 AngularJS is a really, really great framework 127 00:07:37,290 --> 00:07:39,360 that's seeing a lot more use lately. 128 00:07:39,360 --> 00:07:42,180 And while this blog post is a great introduction to it, 129 00:07:42,180 --> 00:07:47,060 you can get an even more thorough introduction to it at teamtreehouse.com. 130 00:07:47,060 --> 00:07:50,350 We have a workshop on it by our very own Jim Hoskins. 131 00:07:50,350 --> 00:07:54,960 But nevertheless, check out the blog post as well, which you'll find in the show notes. 132 00:07:54,960 --> 00:07:58,980 It's always good to take in information from a couple of different angles. 133 00:07:58,980 --> 00:08:03,470 Ooohh, nice! >>It's you know--five! 134 00:08:03,470 --> 00:08:11,280 Next up is CSS filters, GIFs-- >>GIFs. >>--and performance. So-- 135 00:08:11,280 --> 00:08:16,130 It's pronounced GIFs. >>It's, you know, whatever you feel most comfortable with. 136 00:08:16,130 --> 00:08:18,750 I'd feel most comfortable with being correct. 137 00:08:18,750 --> 00:08:25,420 Basically, the article is about how when you combine CSS filters and GIFs 138 00:08:25,420 --> 00:08:28,880 you actually get pretty terrible performance 139 00:08:28,880 --> 00:08:33,470 and further down in the article it says, "How bad? This bad." 140 00:08:33,470 --> 00:08:37,940 So when you click on that link it opens up a CodePen 141 00:08:37,940 --> 00:08:42,440 and actually this is performing much better than it did before. 142 00:08:42,440 --> 00:08:47,970 Oh. Actually nope. There it goes. You can see these really terrible frame rates. 143 00:08:48,080 --> 00:08:50,140 I'm going to keep moving the mouse here 144 00:08:50,140 --> 00:08:52,450 so you can see that this is not actually the video. 145 00:08:52,480 --> 00:08:55,160 This is actually the just how bad these frame rates are. 146 00:08:55,160 --> 00:08:59,150 And the problem comes in again when you combine CSS filters 147 00:08:59,150 --> 00:09:02,210 with animated GIF backgrounds. 148 00:09:02,210 --> 00:09:05,920 I actually had to think about saying GIF there. >>You did good. 149 00:09:05,920 --> 00:09:11,740 But the primary culprit here is the blur filter. 150 00:09:11,740 --> 00:09:17,720 It actually creates really terrible frame rates so we definitely do not want to do that. 151 00:09:17,720 --> 00:09:23,510 If we flip back to the article here, you can see that it is easy to diagnose this 152 00:09:23,510 --> 00:09:26,800 and actually look at this using the Chrome Developer Tools. 153 00:09:26,800 --> 00:09:30,280 So if you go ahead and prompt this open, click on the timeline tab, 154 00:09:30,280 --> 00:09:34,350 and click on frames over here on the left you can actually see 155 00:09:34,350 --> 00:09:39,150 just how slowly the screen is being repainted. 156 00:09:39,150 --> 00:09:42,570 So pretty cool article. 157 00:09:42,570 --> 00:09:47,030 They offer a couple of different solutions to actually improve the situation 158 00:09:47,030 --> 00:09:49,570 but it's definitely something that I don't know about. 159 00:09:49,570 --> 00:09:54,230 I assume that if you just apply the CSS filter to an animated GIF 160 00:09:54,230 --> 00:09:58,690 it would work just fine like you think it would but it's actually pretty bad. 161 00:09:58,690 --> 00:10:00,740 So good to know. >>Yeah. 162 00:10:00,740 --> 00:10:06,520 So next up we have a list post on what are the best programming fonts. 163 00:10:06,520 --> 00:10:10,390 Now usually a programming font is going to be monospaced. 164 00:10:10,450 --> 00:10:12,870 That's a pretty big preference but there's a lot of things 165 00:10:12,870 --> 00:10:15,130 that you actually want to consider when you have a programming font 166 00:10:15,130 --> 00:10:18,160 mainly separating a capital O from a zero. 167 00:10:18,160 --> 00:10:22,560 And it usually has a little line down the zero or a dot in the middle of it. 168 00:10:22,560 --> 00:10:27,060 Anyway, this is a collection of some of the best programming fonts that are out there. 169 00:10:27,060 --> 00:10:33,300 There's also, which is the best part, a little display of what each of these looks like. 170 00:10:33,300 --> 00:10:37,770 So there's tons of different fonts in here. About of dozen of them. 171 00:10:37,770 --> 00:10:41,410 You can go through and vote on them if you want to. 172 00:10:41,410 --> 00:10:43,800 And let's be honest, of course you do. 173 00:10:43,800 --> 00:10:47,110 So far Consolas seems to be winner right here. 174 00:10:47,110 --> 00:10:50,470 This comes with Windows but there's a link to download it for Mac. 175 00:10:50,470 --> 00:10:53,170 Anyway, have a look at these different fonts. 176 00:10:53,170 --> 00:10:56,670 It's all about what you like and what your preferences are. 177 00:10:56,670 --> 00:10:59,860 My preference is actually to use a script font 178 00:10:59,860 --> 00:11:02,250 because as they say code is poetry 179 00:11:02,250 --> 00:11:06,630 and I like to feel like my code really is beautiful when I'm writing it. 180 00:11:07,350 --> 00:11:09,090 So I'm going to experiment with the weather font. 181 00:11:09,090 --> 00:11:11,050 Yeah, that's a good one too. 182 00:11:11,050 --> 00:11:13,000 Yeah. >>Yeah. >>Variable is misty. 183 00:11:13,000 --> 00:11:16,880 So that's all we have for this week. Nick, who are you on Twitter? 184 00:11:16,880 --> 00:11:19,070 I'm @nickrp. >>And I'm @jseifer. 185 00:11:19,220 --> 00:11:21,000 For more information on anything we talked about, 186 00:11:21,000 --> 00:11:24,780 you can check out our show notes at youtube.com/gotreehouse 187 00:11:24,780 --> 00:11:28,180 or in iTunes search for us at The Treehouse Show. 188 00:11:28,340 --> 00:11:31,290 And of course if you like to see more videos like this one 189 00:11:31,290 --> 00:11:36,210 about web design, web development, and so much more be sure to check us out 190 00:11:36,210 --> 00:11:38,410 at teamtreehouse.com. 191 00:11:38,410 --> 00:11:40,980 Thanks so much for watching and we'll see you next week.