1 00:00:00,000 --> 00:00:04,000 Hi, I'm Jim Hoskins.>>And I'm Jason Seifer. 2 00:00:04,000 --> 00:00:06,770 And you're watching The Treehouse Show, "Your Weekly Dose of Internets," 3 00:00:06,770 --> 00:00:09,860 where we talk about all things web design, web development, and more. 4 00:00:09,860 --> 00:00:14,170 In this episode we'll be talking about making your website ready for Internet Explorer 10, 5 00:00:14,170 --> 00:00:17,040 mobile fonts, as well as CSS code smells. 6 00:00:17,040 --> 00:00:20,480 Nick Pettit is out this week, due to a bizarre gardening accident. 7 00:00:20,480 --> 00:00:24,460 [electronic sounds] 8 00:00:24,460 --> 00:00:26,530 [The treehouse show] 9 00:00:26,730 --> 00:00:31,060 Everybody talks about making mobile apps and HTML5, 10 00:00:31,060 --> 00:00:35,800 but how do you really make it feel native, especially on IOS? >>I have no idea. 11 00:00:35,800 --> 00:00:39,190 Well, we have the anatomy of making a native-feeling IOS app 12 00:00:39,190 --> 00:00:43,720 using HTML5, right here on Justin Vincent's blog. >>Thanks, Justin! 13 00:00:43,720 --> 00:00:47,030 It's actually really cool--it's not a lot of real technical stuff, 14 00:00:47,030 --> 00:00:50,980 as far as code-wise, but it takes an app that you made, 15 00:00:50,980 --> 00:00:55,390 and it shows the various components you use to make it feel like a native app. 16 00:00:55,390 --> 00:01:00,250 For instance, wrapping the HTML and PhoneGap to get rid of the browser chrome, 17 00:01:00,250 --> 00:01:03,650 as well as some of the frameworks you use and some of the techniques, 18 00:01:03,650 --> 00:01:06,270 like using font-face for some nice fonts, 19 00:01:06,270 --> 00:01:09,380 CSS3 calculations and animations, 20 00:01:09,380 --> 00:01:11,390 and a lot of other cool techniques. 21 00:01:11,390 --> 00:01:13,500 So, go through some of the screens and it points out 22 00:01:13,500 --> 00:01:16,330 the techniques that we use to make it feel really native, 23 00:01:16,330 --> 00:01:19,070 make it look really good, and be very responsive. 24 00:01:19,070 --> 00:01:22,680 It's really cool to check out some things that you may not remember 25 00:01:22,680 --> 00:01:26,600 when trying to build an HTML5 app for an IOS device. 26 00:01:26,600 --> 00:01:30,470 What's interesting is, we talked about a project called FastClick 27 00:01:30,470 --> 00:01:33,940 on the last Treehouse show, and there is the equivalent of that built into 28 00:01:33,940 --> 00:01:37,690 one of the JavaScript frameworks that he uses in his application. 29 00:01:37,690 --> 00:01:40,220 Pretty cool--it's some pretty common techniques to fill, 30 00:01:40,220 --> 00:01:44,690 so a lot of different mobile frameworks implement the app's type of behavior. 31 00:01:44,690 --> 00:01:47,970 It's really important to do that because, otherwise, it feels really waggy. 32 00:01:47,970 --> 00:01:51,880 Shameless plug--go watch all of our previous episodes of The Treehouse Show. 33 00:01:51,880 --> 00:01:57,430 Next up--times are changing in the land of web design and web development. 34 00:01:57,430 --> 00:02:01,670 There is a blog post over on the "amazedsaint's #tech journal" 35 00:02:01,670 --> 00:02:06,740 "Changing Times for Web Developers--6 Tips You Should Read to Survive." 36 00:02:06,740 --> 00:02:10,620 The first tip--Learn to write better JavaScript and CSS. 37 00:02:10,620 --> 00:02:15,890 I think maybe learning to build a fire would be a pretty good tip to survive, 38 00:02:15,890 --> 00:02:18,000 but I digress. 39 00:02:18,000 --> 00:02:20,400 Learning to write better JavaScript and CSS, that's always something 40 00:02:20,400 --> 00:02:23,920 that you're going to be needing to do in these changing times of web development. 41 00:02:23,920 --> 00:02:27,550 Familiarize yourself with a responsive framework. 42 00:02:27,550 --> 00:02:30,080 This is also a very good idea. 43 00:02:30,080 --> 00:02:34,250 Responsive is something that we talk about probably a little bit too much on this show. 44 00:02:34,250 --> 00:02:39,090 Another tip. he says, is to learn the most useful JavaScript MVC frameworks. 45 00:02:39,090 --> 00:02:41,910 And he has a list of 6 of them on here. 46 00:02:41,910 --> 00:02:46,750 You can also check out "TodoMVC" for examples of building applications 47 00:02:46,750 --> 00:02:48,760 in all of these different frameworks. 48 00:02:48,980 --> 00:02:52,330 Then, as well as the usual, "Understand REST and HTTP," 49 00:02:52,330 --> 00:02:55,180 and "Understand HTML5 beyond the buzzword," 50 00:02:55,180 --> 00:02:57,180 and finally, "Optimize." 51 00:02:57,180 --> 00:03:01,100 For more information on all of those things, you can find the link to that 52 00:03:01,100 --> 00:03:04,920 in our show notes at youtube.com/gotreehouse. 53 00:03:04,920 --> 00:03:06,930 So, the short version of it is, just keep learning. >>Yep. 54 00:03:06,930 --> 00:03:09,220 >>You think? >>Stay sharp. >>Stay sharp. 55 00:03:09,220 --> 00:03:11,660 Well, I know a site that can keep you real sharp on all of the latest 56 00:03:11,660 --> 00:03:13,660 web design and web development techniques. 57 00:03:13,660 --> 00:03:16,660 What site is that? >>I believe it's called, "Teamtreehouse.com." 58 00:03:16,660 --> 00:03:19,200 >>Huh. >>Pretty cool site. >>I'll have to check that out. Never heard of it. 59 00:03:19,200 --> 00:03:23,770 So--you've heard of IE, Internet Explorer? >>I have. 60 00:03:23,770 --> 00:03:25,770 Remember when we always had to develop for it 61 00:03:25,770 --> 00:03:27,740 and it was like, "This site only works in IE?" 62 00:03:27,740 --> 00:03:29,780 That's what I refer to as "the good old days." 63 00:03:29,780 --> 00:03:33,060 Well, the good old days are gone, and now sites don't work in IE. 64 00:03:33,060 --> 00:03:37,800 And here's a nice blog on the Windows Blog of how to make your WebKit-optimized sites 65 00:03:37,800 --> 00:03:39,760 work for Internet Explorer 10. 66 00:03:39,760 --> 00:03:42,880 Because now, we're also hopelessly dependent on WebKit browser prefixes. 67 00:03:42,880 --> 00:03:46,390 [laughing] All of a sudden, we don't have browser stands anymore, 68 00:03:46,390 --> 00:03:48,800 and WebKit is the new IE, or so they say. 69 00:03:48,800 --> 00:03:51,090 But, it's actually a pretty good outline. 70 00:03:51,090 --> 00:03:53,690 Most of the tips are pretty common advice. 71 00:03:53,690 --> 00:03:57,570 It starts of pretty strong by including the standard CSS 72 00:03:57,570 --> 00:04:00,490 in addition to the WebKit prefix CSS 73 00:04:00,490 --> 00:04:05,850 because, for some of the items, Internet Explorer only supports the standard 74 00:04:05,850 --> 00:04:07,790 obviously, not the WebKit prefix. 75 00:04:07,790 --> 00:04:09,640 But there are some other ones, as well. 76 00:04:09,640 --> 00:04:15,660 A lot of them are pretty new to me; I haven't really developed for Internet Explorer. 77 00:04:15,660 --> 00:04:18,769 There are some things that it's just like, "I did not know you had to do that." 78 00:04:18,769 --> 00:04:20,820 For instance, the touch events. 79 00:04:20,820 --> 00:04:25,200 Microsoft implemented their own touch stars, like MS tapDOWN. 80 00:04:25,200 --> 00:04:27,860 There's a lot more branching code that you have to, 81 00:04:27,860 --> 00:04:30,820 but there's a lot of different tables from the WebKit way of doing it, 82 00:04:30,820 --> 00:04:36,120 to how to fix it to do both WebKit and Internet Explorer based interaction. 83 00:04:36,120 --> 00:04:39,010 If you are looking to make your website work really well 84 00:04:39,010 --> 00:04:42,790 in Internet Explorer 10, and you want to optimize for touch on the surface tablets-- 85 00:04:42,790 --> 00:04:46,620 a really good resource to check out because it goes over everything. 86 00:04:46,620 --> 00:04:49,890 This would also be a great resource to check out if you were going to build a library 87 00:04:49,890 --> 00:04:52,090 that abstracted this all the way for us. 88 00:04:52,090 --> 00:04:56,760 [laughing] Hopefully, on the next episode of Treehouse-- 89 00:04:56,760 --> 00:04:59,790 Next up is our app review. 90 00:04:59,790 --> 00:05:01,340 ? [music] ? 91 00:05:02,340 --> 00:05:04,420 [App review] 92 00:05:04,420 --> 00:05:08,860 Our app review this week is an app called, "Hammer." 93 00:05:08,860 --> 00:05:11,460 Hammer is actually a paid application, 94 00:05:11,460 --> 00:05:16,330 but this is a web development tool for web designers and web developers. 95 00:05:16,330 --> 00:05:20,380 This lets you build out static HTML sites really quickly. 96 00:05:20,380 --> 00:05:24,220 You don't have to worry about any server site's scripting languages. 97 00:05:24,220 --> 00:05:28,800 And it supports all of the different things that you're possibly used to, 98 00:05:28,800 --> 00:05:34,450 like SASS, HTML includes, Paths, CoffeeScript, and a bunch of things like that. 99 00:05:34,450 --> 00:05:38,450 It's very simple to use. Here is a demo of it 100 00:05:38,450 --> 00:05:40,370 Right up here, I created a project, 101 00:05:40,370 --> 00:05:45,050 and it shows you all of the different little assets that you have inside of the project. 102 00:05:45,050 --> 00:05:48,750 In one click, you can launch it inside of your text editor, 103 00:05:48,750 --> 00:05:52,860 and you get access to the output inside of the build directory. 104 00:05:52,860 --> 00:05:57,100 Then you can even break it up into different includes for your header or footer, 105 00:05:57,100 --> 00:06:01,230 navigation, pretty much anything that you need inside of your project. 106 00:06:01,230 --> 00:06:06,670 You can find this application over at "Hammerformac.com." 107 00:06:06,670 --> 00:06:10,740 Worth noting that Hammer is not sponsoring the show--shame on them. 108 00:06:10,740 --> 00:06:13,230 But, it's still a pretty cool application-- 109 00:06:13,230 --> 00:06:16,710 especially useful if you're getting started on building a new static website. 110 00:06:16,710 --> 00:06:19,000 That's pretty cool. I like it. >>Yeah. 111 00:06:20,000 --> 00:06:23,870 Speaking of editors, colors are very important in your editor 112 00:06:23,870 --> 00:06:25,750 because you're looking at that thing all day, right? 113 00:06:25,750 --> 00:06:27,510 It's like for syntax, highlighting. 114 00:06:27,510 --> 00:06:31,760 You won't have to go around and find all of those different themes. 115 00:06:31,760 --> 00:06:33,810 What if they're all in one place? >> That would make my day. 116 00:06:33,810 --> 00:06:38,110 Colour Schemes--this project has a whole bunch of them. 117 00:06:38,110 --> 00:06:40,830 I haven't even counted them--they're just-- >>Consider my day made. 118 00:06:40,830 --> 00:06:43,590 I just kept scrolling and there's just so many themes. 119 00:06:43,590 --> 00:06:46,820 They are really nice looking. >>They are some very nice themes-- 120 00:06:46,820 --> 00:06:51,250 different dark ones, light ones. >>Maybe you're feeling like grunge today. 121 00:06:51,250 --> 00:06:54,020 You want a grungy green theme. >>Something more futuristic maybe? 122 00:06:54,020 --> 00:06:57,490 Maybe you want something darker, and orange. They got that. 123 00:06:57,490 --> 00:07:01,520 They got pretty much a theme for every time of day, every mood, 124 00:07:01,520 --> 00:07:03,520 and every piece of code that you have. 125 00:07:03,520 --> 00:07:07,890 At 1:30 pm on a Tuesday, use the EarthSong theme. Why not? 126 00:07:07,890 --> 00:07:14,200 That's good--that's good feng shui, or good energy at 1:37, right? 127 00:07:14,200 --> 00:07:18,440 These are compatible with Sublime Text 2, TextMate, as well as VIN 128 00:07:18,440 --> 00:07:20,340 are added in there for all the color schemes. 129 00:07:20,340 --> 00:07:22,240 It's a good set of schemes to check out. 130 00:07:22,240 --> 00:07:25,070 You can install them all and just switch them to your heart's content. 131 00:07:25,070 --> 00:07:28,160 Nice. Next up, we have a project called EpicEditor. 132 00:07:28,160 --> 00:07:31,180 And its name is actually pretty correct. 133 00:07:31,180 --> 00:07:33,550 This is an embeddable JavaScript Markdown editor, 134 00:07:33,550 --> 00:07:36,890 If you are needing to write Markdown-- 135 00:07:36,890 --> 00:07:42,230 which I personally find that users enjoy more than using one of those wizzywig editors-- 136 00:07:42,230 --> 00:07:44,280 it gives you some formatting options. 137 00:07:44,280 --> 00:07:47,860 You can give it a preview, click right back to edit, and it's nice. 138 00:07:47,860 --> 00:07:51,390 You can actually go full-screen saying, "I'm writing Markdown." 139 00:07:51,390 --> 00:07:54,270 [typing] 140 00:07:54,270 --> 00:07:56,700 You'll request full-screen privileges if you've got to. 141 00:07:56,700 --> 00:07:59,670 Then you can actually get a preview on the right, 142 00:07:59,670 --> 00:08:02,340 while you're writing your Markup on the left. 143 00:08:02,340 --> 00:08:04,530 Kind of neat. I like it. 144 00:08:04,530 --> 00:08:06,660 That is really cool. I love Markdown. 145 00:08:06,660 --> 00:08:11,140 I prefer it as a way of writing anything--my blog--really anything I write, 146 00:08:11,140 --> 00:08:12,960 I write in Markdown first and then just convert it. >>Checks. 147 00:08:12,960 --> 00:08:16,100 Checks, yeah. I always have little astrids around my name to make it bold. 148 00:08:16,100 --> 00:08:18,160 [laughing] There you go. 149 00:08:18,160 --> 00:08:22,600 Okay, so on mobile devices, guess which font is supported across 150 00:08:22,600 --> 00:08:24,600 IOS, Android, and Windows phone settings? 151 00:08:24,600 --> 00:08:26,160 Helvetica. Comic Sans. 152 00:08:26,160 --> 00:08:28,600 Well, according to-- >>Papyrus. >>No. 153 00:08:28,600 --> 00:08:30,600 According to Tiny Type, nothing. 154 00:08:30,600 --> 00:08:32,600 Nothing! That's terrible news. 155 00:08:32,600 --> 00:08:37,640 So, Tiny Type is a compatibility table, or rather an "incompatibility table," 156 00:08:37,640 --> 00:08:40,230 for built-in fonts on mobile platforms. 157 00:08:40,230 --> 00:08:45,990 There's a lot of research done in here as to which fonts are built into which platform. 158 00:08:45,990 --> 00:08:49,050 Android looks pretty sparse--looks like only 4 of them. 159 00:08:49,050 --> 00:08:54,030 And, even beyond that, there is no single font that spans across all 3. 160 00:08:54,030 --> 00:08:57,400 If you want to know which fonts are available on IOS, Android, 161 00:08:57,400 --> 00:09:00,890 or Windows Phone 7, Tiny Type is a great table to look at. 162 00:09:00,890 --> 00:09:04,580 And he's trying to keep it up-to-date, so people are submitting updates 163 00:09:04,580 --> 00:09:07,370 if the information is incorrect--so a pretty good resource to check out 164 00:09:07,370 --> 00:09:09,730 if you just need to know what fonts are available where. 165 00:09:09,730 --> 00:09:13,980 That's both awesome and kind of concerning, all at the same time. 166 00:09:13,980 --> 00:09:16,420 Fonts are important. >>Yeah, thanks for putting that together. 167 00:09:17,800 --> 00:09:21,920 Finally, we have an article called, "Code Smells in CSS." 168 00:09:21,920 --> 00:09:26,490 Very often, when you're learning to program or code in any different language, 169 00:09:26,490 --> 00:09:30,780 it can be as useful to learn from the things that you're not supposed to do, 170 00:09:30,780 --> 00:09:33,430 as much as from what you are supposed to do. 171 00:09:33,430 --> 00:09:37,550 So, there is a great blog post here by Harry Roberts 172 00:09:37,550 --> 00:09:42,710 on different code smells that you might encounter when writing CSS. 173 00:09:42,710 --> 00:09:45,560 He goes through, and he breaks down different things 174 00:09:45,560 --> 00:09:47,380 that you may not want to be doing, 175 00:09:47,380 --> 00:09:50,650 and then shows how you probably do want to do it. 176 00:09:50,650 --> 00:09:53,810 Now this is a really long article, 177 00:09:53,810 --> 00:09:55,880 so we're not going to go into everything on here. 178 00:09:55,880 --> 00:09:58,850 But it's definitely worth the read. 179 00:09:58,850 --> 00:10:02,850 You'll probably find some things that you were doing that you probably shouldn't. 180 00:10:02,850 --> 00:10:06,140 So yeah, check that out. We'll have that link in the show notes, as well. 181 00:10:06,140 --> 00:10:09,010 That's about all we've got for this episode. 182 00:10:09,010 --> 00:10:12,140 Jim, who are you on Twitter? >>I am Jimrhoskins on Twitter. 183 00:10:12,140 --> 00:10:16,790 And I am Jseifer. Thanks so much for tuning in to this episode of The Treehouse Show. 184 00:10:16,790 --> 00:10:18,670 For more information on anything we talked about, 185 00:10:18,670 --> 00:10:22,450 you can check out our show notes at youtube.com/gotreehouse. 186 00:10:22,450 --> 00:10:24,600 This episode was brought to you by Treehouse, 187 00:10:24,600 --> 00:10:28,390 the best way to learn how to design and develop for the mobile and Web. 188 00:10:28,390 --> 00:10:31,080 Check us out at teamtreehouse.com. 189 00:10:31,080 --> 00:10:33,230 We'll see you next time. 190 00:10:35,230 --> 00:10:38,200 [The treehouse show] 191 00:10:38,200 --> 00:10:40,200 [treehouse] 192 00:10:40,200 --> 00:10:43,750 If you'd like to see more advanced videos and tutorials like this one, 193 00:10:43,750 --> 00:10:47,520 go to teamtreehouse.com and start learning for free. 194 00:10:47,520 --> 00:10:49,680 [Getting started with HTML] [Adobe Photoshop Tutorials] 195 00:10:49,680 --> 00:10:52,680 [Learn Web Design, Coding & More at Treehouse] 196 00:10:52,680 --> 00:11:00,680 [Join our YouTube Channel!] [Subscribe]