Episode 49: App Store Screenshots, Regular Expressions, Programming Fonts

I'm Nick Pettit. >>I'm Jason Seifer and you're watching The Treehouse Show. 0:01 Your weekly dose of Internet where we talk about all things web design, 0:04 web development, and more. 0:07 In this episode, we'll be talking about app store screenshots, regular expressions, 0:09 style guides, and more. 0:14 Let's check it out. 0:16 [The Treehouse Show] 0:22 First up is a blog post from the 37signals blog 0:24 Signal vs Noise about designing screenshots 0:28 for your app in the Apple App Store. 0:32 So if we go ahead and take a look at the post, 0:36 they give a couple of examples right here 0:38 and they say you want to provide a sense of who you are, 0:41 how hard you worked, and prerequisites to using your app. 0:46 You also want to communicate what your app's job is 0:51 so they'll say later in the post that they liked the fact that there's text here 0:55 that's actually explaining how you should use the app 1:00 or taking that idea a little bit further 1:03 they suggest actually providing a little bit of a tutorial 1:06 saying how your app should be used more specifically. 1:11 I really liked the fact--and they say this in the post. 1:17 I also really liked the fact that they actually have pictures of the app 1:20 on a phone in a person's hand. 1:24 It gives you a real sense of what the app is actually going to look like 1:27 when you're using it and gives you some sort of an idea 1:30 as to where you should tap on the screen. 1:34 And so if you are designing an app for Apple's App Store, 1:36 you should definitely check out this post. 1:41 There's a couple of more examples in there 1:43 and design those images for the app store. 1:45 And if you are submitting an app to the App Store 1:50 and would like a tasteful headshot of Nick or myself, 1:53 please drop us a line on Twitter. 1:56 I'm @nickrp. >>And I'm @jseifer. >>Looking forward to it. 1:58 Next up, if you ever use regular expressions, 2:01 sometimes it can be kind of a pain to test your code with though. 2:04 I use them on the regular. >>Expressions. 2:06 So there is a great website called Debuggex. 2:09 It's currently in beta where you can put in your regular expression 2:13 as well as choose the different flags to it 2:17 and then it will show you whether or not your test data matches. 2:20 Nope. >>Yeah. I know. Isn't it crazy? It's like we're living in the future. 2:23 Now, one thing that's great is right below it there is a handy reference chart 2:27 to see what exactly is in the regular expressions. 2:32 Another great thing you can even click the libraries and you'll be good to go. 2:35 So anyway, great website. Check that out. 2:40 You'll find a link to it in the show notes, 2:43 which you can get to at youtube.com/gotreehouse 2:45 or in iTunes search for The Treehouse Show. 2:47 Next up is Forecast Font. It's a web font for creating multilayered weather icons. 2:50 I know that because it says it right here on the website. Amazing. 2:57 You can go ahead and download it or you can tweet about it and that's pretty much it. 3:01 Oh wait! No, I can actually scroll down further. 3:05 It shows you all the different icons that are in this icon font 3:07 and you can basically demonstrate any type of weather 3:12 that you could possibly want. 3:17 So if you're creating yet another weather app for the world, 3:19 this is definitely something to check out. 3:22 I imagine that you can use this on iOS. I don't actually know for sure. 3:25 I'm not an iOS expert but I know that you could certainly use this on your website 3:30 or on your mobile web app to create some sort of geo-location based weather app. 3:36 So pretty cool stuff--I mean, the icons actually looked pretty nice all joking aside. 3:44 So definitely check that out and go ahead 3:51 and hit the download button or the tweet button. 3:54 It's up to you. There's two choices. 3:56 There are certain weather patterns that are missing 3:58 that we experience here in Orlando, Florida. 4:00 That's true. There's hot, hotter, and really, really hot. 4:03 And don't go to the theme parks. 4:05 Oh and there's also it's-so-hot-out-that-my-iPhone-turned-off. 4:07 That actually happens here. >>Yeah. 4:11 So next up, we have a website called-- 4:15 every JavaScript library you should be looking into. 4:18 Ambitious. >>I know. That's a very opinionated claim. 4:21 But they actually back it up with checkboxes and labels 4:25 on those checkboxes that pertain to separate JavaScript projects. 4:29 So as I'm checking each one out I can actually just check it off. 4:33 Yeah. Exactly. >>Nice. >>So you can check what you want on here. 4:36 And this will narrow down the different libraries 4:40 that match what you want in the framework. 4:43 So if you want something that supports events, go ahead and check that. 4:45 If you want something that supports events and has a framework, 4:48 hey you can get that too. 4:51 There's knockout.js or whatever. 4:53 Anyway, there's a ton of different combinations that you can use in here 4:55 and this is a really, really great library in the sense that 4:59 you don't want to necessarily overload your application 5:03 by throwing every single library in there. 5:06 So if you can get one that's a little bit slimmer 5:08 that would be a little bit more friendly to mobile devices, 5:10 that's something that would really improve the user experience overall. 5:13 I think a lot of web optimization is about a lot of small wins 5:16 and not one really big win so that's a good tip. 5:20 It is a good tip. Well that's two good tips because of what you said too. 5:23 Bam. >>Bam. 5:26 Next up is style guide boilerplate. So let's say that you're creating a website-- 5:29 I mean, obviously you probably are. Otherwise, why are you watching this? 5:35 And you want to-- >>Because of the talent. >>Oh, that's true. 5:38 And you want to kind of roll your own CSS framework. 5:42 You could of course just use any off-the-shelf CSS framework like boilerplate 5:46 or Zurb foundation but oftentimes you use a lot of common CSS patterns 5:53 across many websites, and sometimes it can be a little bit difficult to organize those. 5:58 It can be difficult to remember all of your font settings, etc. 6:04 So that's where style guide boilerplate comes in. 6:10 And rather than show you the page here, I'll just show you a quick demo. 6:13 It will basically generate this code for you where you can type in some About text, 6:18 you have all the colors that you're using, it will show you what your fonts looked like, 6:23 and it gives you a couple of other base styles. 6:28 So if you scroll down the page you can see what various elements looked like 6:32 under the CSS framework that you made yourself. 6:37 So you can go ahead and download it. 6:41 It looks like it's in version 2. That's always a good sign. 6:43 And if you look at the page here, there's a couple of other useful information about it 6:47 but definitely check it out. 6:53 Good. >>You okay, Jason? >>I'm great. 6:55 Next up, Glenn Stovall gives us an overview of AngularJS. 6:57 AngularJS is a JavaScript library invented by Google for creating 7:02 complex client-side web applications. 7:07 And he gives a really, really great introduction to how Angular works. 7:10 So it's just an overview but he goes through and tells you 7:15 what the philosophy of AngularJS is. 7:18 How some of the databinding works with, 7:20 you know, just a really, really simple AngularJS application. 7:23 He goes into modules, controllers, and just a little overview 7:27 of the different parts of AngularJS. 7:31 AngularJS is a really, really great framework 7:34 that's seeing a lot more use lately. 7:37 And while this blog post is a great introduction to it, 7:39 you can get an even more thorough introduction to it at teamtreehouse.com. 7:42 We have a workshop on it by our very own Jim Hoskins. 7:47 But nevertheless, check out the blog post as well, which you'll find in the show notes. 7:50 It's always good to take in information from a couple of different angles. 7:54 Ooohh, nice! >>It's you know--five! 7:58 Next up is CSS filters, GIFs-- >>GIFs. >>--and performance. So-- 8:03 It's pronounced GIFs. >>It's, you know, whatever you feel most comfortable with. 8:11 I'd feel most comfortable with being correct. 8:16 Basically, the article is about how when you combine CSS filters and GIFs 8:18 you actually get pretty terrible performance 8:25 and further down in the article it says, "How bad? This bad." 8:28 So when you click on that link it opens up a CodePen 8:33 and actually this is performing much better than it did before. 8:37 Oh. Actually nope. There it goes. You can see these really terrible frame rates. 8:42 I'm going to keep moving the mouse here 8:48 so you can see that this is not actually the video. 8:50 This is actually the just how bad these frame rates are. 8:52 And the problem comes in again when you combine CSS filters 8:55 with animated GIF backgrounds. 8:59 I actually had to think about saying GIF there. >>You did good. 9:02 But the primary culprit here is the blur filter. 9:05 It actually creates really terrible frame rates so we definitely do not want to do that. 9:11 If we flip back to the article here, you can see that it is easy to diagnose this 9:17 and actually look at this using the Chrome Developer Tools. 9:23 So if you go ahead and prompt this open, click on the timeline tab, 9:26 and click on frames over here on the left you can actually see 9:30 just how slowly the screen is being repainted. 9:34 So pretty cool article. 9:39 They offer a couple of different solutions to actually improve the situation 9:42 but it's definitely something that I don't know about. 9:47 I assume that if you just apply the CSS filter to an animated GIF 9:49 it would work just fine like you think it would but it's actually pretty bad. 9:54 So good to know. >>Yeah. 9:58 So next up we have a list post on what are the best programming fonts. 10:00 Now usually a programming font is going to be monospaced. 10:06 That's a pretty big preference but there's a lot of things 10:10 that you actually want to consider when you have a programming font 10:12 mainly separating a capital O from a zero. 10:15 And it usually has a little line down the zero or a dot in the middle of it. 10:18 Anyway, this is a collection of some of the best programming fonts that are out there. 10:22 There's also, which is the best part, a little display of what each of these looks like. 10:27 So there's tons of different fonts in here. About of dozen of them. 10:33 You can go through and vote on them if you want to. 10:37 And let's be honest, of course you do. 10:41 So far Consolas seems to be winner right here. 10:43 This comes with Windows but there's a link to download it for Mac. 10:47 Anyway, have a look at these different fonts. 10:50 It's all about what you like and what your preferences are. 10:53 My preference is actually to use a script font 10:56 because as they say code is poetry 10:59 and I like to feel like my code really is beautiful when I'm writing it. 11:02 So I'm going to experiment with the weather font. 11:07 Yeah, that's a good one too. 11:09 Yeah. >>Yeah. >>Variable is misty. 11:11 So that's all we have for this week. Nick, who are you on Twitter? 11:13 I'm @nickrp. >>And I'm @jseifer. 11:16 For more information on anything we talked about, 11:19 you can check out our show notes at youtube.com/gotreehouse 11:21 or in iTunes search for us at The Treehouse Show. 11:24 And of course if you like to see more videos like this one 11:28 about web design, web development, and so much more be sure to check us out 11:31 at teamtreehouse.com. 11:36 Thanks so much for watching and we'll see you next week. 11:38

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

Sign up