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]