Episode 21: HTML5 Mobile Apps

Hi, I'm Jim Hoskins.>>And I'm Jason Seifer. 0:00 And you're watching The Treehouse Show, "Your Weekly Dose of Internets," 0:04 where we talk about all things web design, web development, and more. 0:06 In this episode we'll be talking about making your website ready for Internet Explorer 10, 0:09 mobile fonts, as well as CSS code smells. 0:14 Nick Pettit is out this week, due to a bizarre gardening accident. 0:17 [electronic sounds] 0:20 [The treehouse show] 0:24 Everybody talks about making mobile apps and HTML5, 0:26 but how do you really make it feel native, especially on IOS? >>I have no idea. 0:31 Well, we have the anatomy of making a native-feeling IOS app 0:35 using HTML5, right here on Justin Vincent's blog. >>Thanks, Justin! 0:39 It's actually really cool--it's not a lot of real technical stuff, 0:43 as far as code-wise, but it takes an app that you made, 0:47 and it shows the various components you use to make it feel like a native app. 0:50 For instance, wrapping the HTML and PhoneGap to get rid of the browser chrome, 0:55 as well as some of the frameworks you use and some of the techniques, 1:00 like using font-face for some nice fonts, 1:03 CSS3 calculations and animations, 1:06 and a lot of other cool techniques. 1:09 So, go through some of the screens and it points out 1:11 the techniques that we use to make it feel really native, 1:13 make it look really good, and be very responsive. 1:16 It's really cool to check out some things that you may not remember 1:19 when trying to build an HTML5 app for an IOS device. 1:22 What's interesting is, we talked about a project called FastClick 1:26 on the last Treehouse show, and there is the equivalent of that built into 1:30 one of the JavaScript frameworks that he uses in his application. 1:33 Pretty cool--it's some pretty common techniques to fill, 1:37 so a lot of different mobile frameworks implement the app's type of behavior. 1:40 It's really important to do that because, otherwise, it feels really waggy. 1:44 Shameless plug--go watch all of our previous episodes of The Treehouse Show. 1:47 Next up--times are changing in the land of web design and web development. 1:51 There is a blog post over on the "amazedsaint's #tech journal" 1:57 "Changing Times for Web Developers--6 Tips You Should Read to Survive." 2:01 The first tip--Learn to write better JavaScript and CSS. 2:06 I think maybe learning to build a fire would be a pretty good tip to survive, 2:10 but I digress. 2:15 Learning to write better JavaScript and CSS, that's always something 2:18 that you're going to be needing to do in these changing times of web development. 2:20 Familiarize yourself with a responsive framework. 2:23 This is also a very good idea. 2:27 Responsive is something that we talk about probably a little bit too much on this show. 2:30 Another tip. he says, is to learn the most useful JavaScript MVC frameworks. 2:34 And he has a list of 6 of them on here. 2:39 You can also check out "TodoMVC" for examples of building applications 2:41 in all of these different frameworks. 2:46 Then, as well as the usual, "Understand REST and HTTP," 2:48 and "Understand HTML5 beyond the buzzword," 2:52 and finally, "Optimize." 2:55 For more information on all of those things, you can find the link to that 2:57 in our show notes at youtube.com/gotreehouse. 3:01 So, the short version of it is, just keep learning. >>Yep. 3:04 >>You think? >>Stay sharp. >>Stay sharp. 3:06 Well, I know a site that can keep you real sharp on all of the latest 3:09 web design and web development techniques. 3:11 What site is that? >>I believe it's called, "Teamtreehouse.com." 3:13 >>Huh. >>Pretty cool site. >>I'll have to check that out. Never heard of it. 3:16 So--you've heard of IE, Internet Explorer? >>I have. 3:19 Remember when we always had to develop for it 3:23 and it was like, "This site only works in IE?" 3:25 That's what I refer to as "the good old days." 3:27 Well, the good old days are gone, and now sites don't work in IE. 3:29 And here's a nice blog on the Windows Blog of how to make your WebKit-optimized sites 3:33 work for Internet Explorer 10. 3:37 Because now, we're also hopelessly dependent on WebKit browser prefixes. 3:39 [laughing] All of a sudden, we don't have browser stands anymore, 3:42 and WebKit is the new IE, or so they say. 3:46 But, it's actually a pretty good outline. 3:48 Most of the tips are pretty common advice. 3:51 It starts of pretty strong by including the standard CSS 3:53 in addition to the WebKit prefix CSS 3:57 because, for some of the items, Internet Explorer only supports the standard 4:00 obviously, not the WebKit prefix. 4:05 But there are some other ones, as well. 4:07 A lot of them are pretty new to me; I haven't really developed for Internet Explorer. 4:09 There are some things that it's just like, "I did not know you had to do that." 4:15 For instance, the touch events. 4:18 Microsoft implemented their own touch stars, like MS tapDOWN. 4:20 There's a lot more branching code that you have to, 4:25 but there's a lot of different tables from the WebKit way of doing it, 4:27 to how to fix it to do both WebKit and Internet Explorer based interaction. 4:30 If you are looking to make your website work really well 4:36 in Internet Explorer 10, and you want to optimize for touch on the surface tablets-- 4:39 a really good resource to check out because it goes over everything. 4:42 This would also be a great resource to check out if you were going to build a library 4:46 that abstracted this all the way for us. 4:49 [laughing] Hopefully, on the next episode of Treehouse-- 4:52 Next up is our app review. 4:56 ? [music] ? 4:59 [App review] 5:02 Our app review this week is an app called, "Hammer." 5:04 Hammer is actually a paid application, 5:08 but this is a web development tool for web designers and web developers. 5:11 This lets you build out static HTML sites really quickly. 5:16 You don't have to worry about any server site's scripting languages. 5:20 And it supports all of the different things that you're possibly used to, 5:24 like SASS, HTML includes, Paths, CoffeeScript, and a bunch of things like that. 5:28 It's very simple to use. Here is a demo of it 5:34 Right up here, I created a project, 5:38 and it shows you all of the different little assets that you have inside of the project. 5:40 In one click, you can launch it inside of your text editor, 5:45 and you get access to the output inside of the build directory. 5:48 Then you can even break it up into different includes for your header or footer, 5:52 navigation, pretty much anything that you need inside of your project. 5:57 You can find this application over at "Hammerformac.com." 6:01 Worth noting that Hammer is not sponsoring the show--shame on them. 6:06 But, it's still a pretty cool application-- 6:10 especially useful if you're getting started on building a new static website. 6:13 That's pretty cool. I like it. >>Yeah. 6:16 Speaking of editors, colors are very important in your editor 6:20 because you're looking at that thing all day, right? 6:23 It's like for syntax, highlighting. 6:25 You won't have to go around and find all of those different themes. 6:27 What if they're all in one place? >> That would make my day. 6:31 Colour Schemes--this project has a whole bunch of them. 6:33 I haven't even counted them--they're just-- >>Consider my day made. 6:38 I just kept scrolling and there's just so many themes. 6:40 They are really nice looking. >>They are some very nice themes-- 6:43 different dark ones, light ones. >>Maybe you're feeling like grunge today. 6:46 You want a grungy green theme. >>Something more futuristic maybe? 6:51 Maybe you want something darker, and orange. They got that. 6:54 They got pretty much a theme for every time of day, every mood, 6:57 and every piece of code that you have. 7:01 At 1:30 pm on a Tuesday, use the EarthSong theme. Why not? 7:03 That's good--that's good feng shui, or good energy at 1:37, right? 7:07 These are compatible with Sublime Text 2, TextMate, as well as VIN 7:14 are added in there for all the color schemes. 7:18 It's a good set of schemes to check out. 7:20 You can install them all and just switch them to your heart's content. 7:22 Nice. Next up, we have a project called EpicEditor. 7:25 And its name is actually pretty correct. 7:28 This is an embeddable JavaScript Markdown editor, 7:31 If you are needing to write Markdown-- 7:33 which I personally find that users enjoy more than using one of those wizzywig editors-- 7:36 it gives you some formatting options. 7:42 You can give it a preview, click right back to edit, and it's nice. 7:44 You can actually go full-screen saying, "I'm writing Markdown." 7:47 [typing] 7:51 You'll request full-screen privileges if you've got to. 7:54 Then you can actually get a preview on the right, 7:56 while you're writing your Markup on the left. 7:59 Kind of neat. I like it. 8:02 That is really cool. I love Markdown. 8:04 I prefer it as a way of writing anything--my blog--really anything I write, 8:06 I write in Markdown first and then just convert it. >>Checks. 8:11 Checks, yeah. I always have little astrids around my name to make it bold. 8:12 [laughing] There you go. 8:16 Okay, so on mobile devices, guess which font is supported across 8:18 IOS, Android, and Windows phone settings? 8:22 Helvetica. Comic Sans. 8:24 Well, according to-- >>Papyrus. >>No. 8:26 According to Tiny Type, nothing. 8:28 Nothing! That's terrible news. 8:30 So, Tiny Type is a compatibility table, or rather an "incompatibility table," 8:32 for built-in fonts on mobile platforms. 8:37 There's a lot of research done in here as to which fonts are built into which platform. 8:40 Android looks pretty sparse--looks like only 4 of them. 8:45 And, even beyond that, there is no single font that spans across all 3. 8:49 If you want to know which fonts are available on IOS, Android, 8:54 or Windows Phone 7, Tiny Type is a great table to look at. 8:57 And he's trying to keep it up-to-date, so people are submitting updates 9:00 if the information is incorrect--so a pretty good resource to check out 9:04 if you just need to know what fonts are available where. 9:07 That's both awesome and kind of concerning, all at the same time. 9:09 Fonts are important. >>Yeah, thanks for putting that together. 9:13 Finally, we have an article called, "Code Smells in CSS." 9:17 Very often, when you're learning to program or code in any different language, 9:21 it can be as useful to learn from the things that you're not supposed to do, 9:26 as much as from what you are supposed to do. 9:30 So, there is a great blog post here by Harry Roberts 9:33 on different code smells that you might encounter when writing CSS. 9:37 He goes through, and he breaks down different things 9:42 that you may not want to be doing, 9:45 and then shows how you probably do want to do it. 9:47 Now this is a really long article, 9:50 so we're not going to go into everything on here. 9:53 But it's definitely worth the read. 9:55 You'll probably find some things that you were doing that you probably shouldn't. 9:58 So yeah, check that out. We'll have that link in the show notes, as well. 10:02 That's about all we've got for this episode. 10:06 Jim, who are you on Twitter? >>I am Jimrhoskins on Twitter. 10:09 And I am Jseifer. Thanks so much for tuning in to this episode of The Treehouse Show. 10:12 For more information on anything we talked about, 10:16 you can check out our show notes at youtube.com/gotreehouse. 10:18 This episode was brought to you by Treehouse, 10:22 the best way to learn how to design and develop for the mobile and Web. 10:24 Check us out at teamtreehouse.com. 10:28 We'll see you next time. 10:31 [The treehouse show] 10:35 [treehouse] 10:38 If you'd like to see more advanced videos and tutorials like this one, 10:40 go to teamtreehouse.com and start learning for free. 10:43 [Getting started with HTML] [Adobe Photoshop Tutorials] 10:47 [Learn Web Design, Coding & More at Treehouse] 10:49 [Join our YouTube Channel!] [Subscribe] 10:52

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

Sign up