1
00:00:01,740 --> 00:00:03,620
I'm Nick Pettit. >>I'm Jason Seifer.

2
00:00:03,620 --> 00:00:06,550
And you're watching The Treehouse Show, your weekly dose of Internets

3
00:00:06,550 --> 00:00:10,540
where we talk about all things web design, web development, and more.

4
00:00:10,540 --> 00:00:13,610
In this episode we'll be talking about JavaScript plugins,

5
00:00:13,610 --> 00:00:18,440
responsive design techniques, and some 2013 web trends.

6
00:00:18,440 --> 00:00:20,260
Let's check it out.

7
00:00:21,650 --> 00:00:24,760
[Morse code beeping sound]

8
00:00:24,760 --> 00:00:26,690
[The Treehouse Show]

9
00:00:27,070 --> 00:00:30,920
First up we're talking about a project called Zippopotamus. [http://zippopotam.us] 

10
00:00:30,920 --> 00:00:32,270
Nick, have you ever designed a website 

11
00:00:32,270 --> 00:00:35,440
where you needed to maybe interface with a--

12
00:00:35,440 --> 00:00:38,650
Hippopotamus? >>Yes, interface with a hippopotamus. >>Nope.

13
00:00:38,650 --> 00:00:41,880
Well, this is exactly not like that, so you're in luck. >>Sweet.

14
00:00:41,880 --> 00:00:46,910
Zippopotamus is a project that gives you an API for looking up ZIP codes and postal codes.

15
00:00:46,910 --> 00:00:50,460
This can be really useful because until this has come out,

16
00:00:50,460 --> 00:00:55,320
there has not been one very easy-to-use centralized repository for ZIP codes.

17
00:00:55,320 --> 00:00:58,080
If you look at the site, you can actually try it out

18
00:00:58,080 --> 00:01:00,510
and see exactly what you get back.

19
00:01:00,510 --> 00:01:09,080
Right here they have the JSON response for California and the ZIP code 90210.

20
00:01:09,080 --> 00:01:13,690
[Pettit] I'm familiar with that one. >>[Seifer] You may recognize that pop culture reference.

21
00:01:13,690 --> 00:01:16,840
But it's a very, very easy-to-use API,

22
00:01:16,840 --> 00:01:20,130
and you can actually do autocompletion with it.

23
00:01:20,130 --> 00:01:24,080
Like if we start typing in our ZIP code here, boom, there's Orlando, Florida,

24
00:01:24,080 --> 00:01:26,560
Treehouse location.

25
00:01:26,560 --> 00:01:29,360
[Pettit] Now you know where we live. >>[Seifer] Yes. So come on by and visit.

26
00:01:29,360 --> 00:01:31,340
Nick will make you cookies.

27
00:01:31,340 --> 00:01:36,160
And that is at zippopotam.us.

28
00:01:36,160 --> 00:01:38,090
Very, very useful.

29
00:01:38,090 --> 00:01:39,270
Pretty nifty.

30
00:01:39,270 --> 00:01:44,030
Next up is Conditionizr, which is this really amazing jQuery plugin [http://conditionizr.com]

31
00:01:44,030 --> 00:01:51,050
that allows you to include assets like JavaScript or CSS into your website conditionally.

32
00:01:51,050 --> 00:01:53,500
I thought this is what you use on your hair after shampoo.

33
00:01:53,500 --> 00:01:55,880
No. That's actually something else, Jason.

34
00:01:55,880 --> 00:01:58,710
Yeah. You should try using it sometime. >>Maybe.

35
00:01:59,510 --> 00:02:00,890
So what does this do?

36
00:02:00,890 --> 00:02:04,670
Conditionizr allows you to include stuff conditionally into your website.

37
00:02:04,670 --> 00:02:11,770
So if you don't need all these JavaScript and CSS files for, say, a particular browser

38
00:02:11,770 --> 00:02:17,100
or if somebody is using a Retina Display and you don't need to load up stuff,

39
00:02:17,100 --> 00:02:21,750
then you can go ahead and just include them conditionally as you need them.

40
00:02:21,750 --> 00:02:23,220
[Seifer] Very nice.

41
00:02:23,220 --> 00:02:26,640
So is this something that you would use maybe for older versions of Internet Explorer as well?

42
00:02:26,640 --> 00:02:31,290
[Pettit] Absolutely. It's available at conditionizr.com.

43
00:02:31,290 --> 00:02:38,180
If we go ahead and scroll down here, they say that it's Modernizr compatible,

44
00:02:38,180 --> 00:02:43,980
but I like to think of this as kind of Modernizr for older browsers, as you said.

45
00:02:43,980 --> 00:02:47,100
It's good for legacy versions of browsers.

46
00:02:47,100 --> 00:02:49,250
[Seifer] So like the opposite of Modernizr.

47
00:02:49,250 --> 00:02:53,110
Legacy-izr. >>Legacy-izr. Yes.

48
00:02:53,110 --> 00:02:58,210
But it's Conditionizr, available at conditionizr--with a Z--.com.

49
00:02:58,210 --> 00:02:59,610
Nice.

50
00:02:59,610 --> 00:03:03,830
Next up, if you're used to using the Rails NumberHelpers

51
00:03:03,830 --> 00:03:08,470
but you miss them when you're developing in JavaScript, we have the project for you.

52
00:03:08,470 --> 00:03:10,790
It's called NumberHelpers. [http://emcien.github.com/number-helpers-coffeescript/]

53
00:03:10,790 --> 00:03:15,250
This is a CoffeeScript plugin that allows you to use all of the Rails NumberHelpers--

54
00:03:15,250 --> 00:03:18,370
well, not all, most of them that you're used to

55
00:03:18,370 --> 00:03:21,540
and use them right in your CoffeeScript code.

56
00:03:21,540 --> 00:03:24,320
It supports everything you would expect, like Number to Currency

57
00:03:24,320 --> 00:03:29,270
as well as the different options: precision, unit, separator, and delimiter.

58
00:03:29,270 --> 00:03:31,120
Number to Human format.

59
00:03:31,120 --> 00:03:33,140
This is something that you would use with--

60
00:03:33,140 --> 00:03:39,020
The example they give is 1, 2, and all these 0s becomes 1.2 billion.

61
00:03:39,020 --> 00:03:44,020
You guys can't see it, but I am actually lifting my pinky to the corner of my mouth.

62
00:03:44,020 --> 00:03:47,760
You're pretty much obligated to say that after you say 1.2 billion.

63
00:03:47,760 --> 00:03:51,330
It also includes the Number to Human Size

64
00:03:51,330 --> 00:03:54,210
if you're dealing with file sizes

65
00:03:54,210 --> 00:03:58,380
as well as Number to Percentage, Number to Phone, Number with Delimiter,

66
00:03:58,380 --> 00:04:00,240
a ton of different options here.

67
00:04:00,240 --> 00:04:02,330
And so you can find that in the show notes,

68
00:04:02,330 --> 00:04:07,050
which you can get to at youtube.com/gotreehouse. >>[Pettit] Pretty nifty.

69
00:04:07,050 --> 00:04:11,250
Next up is this really amazing blog post about CSS3 Transitions.

70
00:04:11,250 --> 00:04:13,250
[http://blog.alexmaccaw.com/css-transitions]

71
00:04:13,250 --> 00:04:16,329
It's written by Alex MacCaw,

72
00:04:16,329 --> 00:04:21,860
and he is a JavaScript programmer, O'Reilly author, and he's working at Stripe.

73
00:04:21,860 --> 00:04:25,280
And I know that because it says it in his biography on his blog.

74
00:04:25,280 --> 00:04:30,770
I also know this is an awesome blog post because it has 3,610 kudos.

75
00:04:30,770 --> 00:04:35,530
[Seifer] That's a lot of kudos. >>[Pettit] That's a lot of Internet currency right there.

76
00:04:35,530 --> 00:04:38,710
[Seifer] We can redeem that for stuff, right? >>[Pettit] Yeah, absolutely.

77
00:04:38,710 --> 00:04:42,360
There's a store you can trade it in for new stuff. Yeah.

78
00:04:42,360 --> 00:04:44,700
[Seifer] Boy, I need to shop there. >>Woo!

79
00:04:44,700 --> 00:04:47,790
"All you need to know about CSS Transitions."

80
00:04:47,790 --> 00:04:54,460
And it turns out there actually is quite a lot that you need to know about CSS3 Transitions.

81
00:04:54,460 --> 00:05:00,030
CSS Transitions are of course a way of animating stuff right in the web browser,

82
00:05:00,030 --> 00:05:03,980
and you can do this natively with CSS,

83
00:05:03,980 --> 00:05:07,390
and it will animate a little bit better than it would otherwise

84
00:05:07,390 --> 00:05:13,520
with, say, JavaScript because it will process all of that animation on the GPU.

85
00:05:13,520 --> 00:05:17,790
This is a really amazing blog post if you're just getting into CSS3

86
00:05:17,790 --> 00:05:19,950
or you don't know a whole lot about Transitions,

87
00:05:19,950 --> 00:05:25,470
and it will tell you everything you need to know about those tricky timing curves.

88
00:05:25,470 --> 00:05:27,680
That can be pretty tough. >>Yeah.

89
00:05:27,680 --> 00:05:32,000
But it's really kind of crazy how advanced we're getting with in-browser stuff

90
00:05:32,000 --> 00:05:36,010
like CSS3 Transitions and even JavaScript APIs.

91
00:05:36,010 --> 00:05:38,280
Yeah. It is pretty amazing.

92
00:05:38,280 --> 00:05:42,420
Some of the animation that's now possible I would have never imagined

93
00:05:42,420 --> 00:05:43,770
even just a couple of years ago.

94
00:05:43,770 --> 00:05:47,470
Saturday morning cartoon quality. >>Yeah, absolutely.

95
00:05:47,470 --> 00:05:51,200
Next up we have a project called jsPDF. [http://jspdf.com/]

96
00:05:51,200 --> 00:05:52,840
This is pretty amazing.

97
00:05:52,840 --> 00:05:58,430
This is JavaScript-generated PDFs that you can get right in your browser.

98
00:05:58,430 --> 00:06:02,350
So this is an HTML5 JavaScript PDF generation library,

99
00:06:02,350 --> 00:06:05,050
and it supports a ton of different things.

100
00:06:05,050 --> 00:06:07,990
They have an example right here with the Octonyan.

101
00:06:07,990 --> 00:06:11,120
This is generated programmatically on the left here.

102
00:06:11,120 --> 00:06:15,130
You can see the example where they grab just an image,

103
00:06:15,130 --> 00:06:19,190
the Octonyan PDF, and then add this image to a PDF,

104
00:06:19,190 --> 00:06:22,000
then it's rendered on the right side of the screen here.

105
00:06:22,000 --> 00:06:28,010
There's examples using different font faces, then circles, landscape,

106
00:06:28,010 --> 00:06:34,060
lines, text colors, a bunch of different options here for generating PDFs.

107
00:06:34,060 --> 00:06:38,160
And it's actually pretty crazy that we're at a point in JavaScript development

108
00:06:38,160 --> 00:06:41,170
where you can do them right in the browser.

109
00:06:41,170 --> 00:06:45,310
So you can access this at jspdf.com.

110
00:06:45,310 --> 00:06:47,550
That's amazing. >>Yeah. >>You had me at circles.

111
00:06:47,550 --> 00:06:49,930
I-- Circles.

112
00:06:51,020 --> 00:06:53,640
Next up is another really cool blog post.

113
00:06:53,640 --> 00:06:56,240
This one is about responsive web design,

114
00:06:56,240 --> 00:07:01,070
and it's from Paul Stamatiou [http://paulstamatiou.com/responsive-retina-blog-desig]

115
00:07:01,070 --> 00:07:05,680
who is @Stammy on Twitter, which is much easier to pronounce.

116
00:07:05,680 --> 00:07:10,960
This blog post is called "Designing a responsive, Retina-friendly site."

117
00:07:10,960 --> 00:07:14,770
Of course, responsive design has been all the rage for the past couple of years.

118
00:07:14,770 --> 00:07:18,850
[Seifer] Have we ever talked about that before? >>[Pettit] I think we have, Jason. Just a little bit.

119
00:07:18,850 --> 00:07:23,450
Of course, Retina Displays are popping up all over the place.

120
00:07:23,450 --> 00:07:25,310
These are high-resolution displays,

121
00:07:25,310 --> 00:07:28,980
and that's also a subject we've talked about a little bit.

122
00:07:28,980 --> 00:07:32,090
This blog post basically combines the 2 ideas

123
00:07:32,090 --> 00:07:35,400
and tells you how to make websites that are not only responsive

124
00:07:35,400 --> 00:07:39,440
but able to work with these high-res displays.

125
00:07:39,440 --> 00:07:43,870
This would be something pretty cool to use with, say, Conditionizr

126
00:07:43,870 --> 00:07:50,020
and maybe include some of those assets for Retina Displays conditionally.

127
00:07:50,020 --> 00:07:53,520
It's a really, really in-depth blog post. >>Yes.

128
00:07:53,520 --> 00:07:57,970
This is also another really, really long blog post.

129
00:07:57,970 --> 00:08:03,850
In fact, they even say, "This article got rather long (15,000 words),"

130
00:08:03,850 --> 00:08:08,630
so just a little lengthy there, but it's really great.

131
00:08:08,630 --> 00:08:13,380
It's a really great read, so I do highly recommend you check it out.

132
00:08:13,380 --> 00:08:19,200
Just so we're all aware, that's a little over 14,000 tweets as far as length goes.

133
00:08:19,200 --> 00:08:22,240
That's a lot. I'm impressed that you were able to math that.

134
00:08:22,240 --> 00:08:24,980
Think about that. >>Hmm.

135
00:08:24,980 --> 00:08:30,250
Next up, over on hongkiat.com we have "Web Design: 20 Hottest Trends

136
00:08:30,250 --> 00:08:32,429
To Watch Out For In 2013,"

137
00:08:32,429 --> 00:08:36,150
or oh-13 as we say here at Treehouse Island.

138
00:08:36,150 --> 00:08:38,650
First thing is Responsive Layouts.

139
00:08:38,650 --> 00:08:41,909
This is not news if you've been watching this show for a little while.

140
00:08:41,909 --> 00:08:43,600
We're not going to go over everything,

141
00:08:43,600 --> 00:08:46,340
but some of the things that I'd like to point out,

142
00:08:46,340 --> 00:08:48,250
Fixed Header Bars.

143
00:08:48,250 --> 00:08:53,350
They actually demonstrate this because the header bar is fixed on this site.

144
00:08:53,350 --> 00:08:55,990
Header bars are something that you're starting to see more often.

145
00:08:55,990 --> 00:08:58,070
We've talked about that on this show here.

146
00:08:58,070 --> 00:09:02,200
Large Photo Backgrounds, CSS Transparency. 

147
00:09:02,200 --> 00:09:04,200
Digital QR Codes.

148
00:09:04,200 --> 00:09:09,450
This is something I think we'll be seeing more of as iPads and tablets are used in store displays.

149
00:09:09,450 --> 00:09:14,230
Just throw up a QR code and then access more information on your phone.

150
00:09:14,230 --> 00:09:19,060
Detailed Illustrations, also something that you see on the Team Treehouse site.

151
00:09:19,060 --> 00:09:22,230
I know. Shameless self-promotion there.

152
00:09:22,230 --> 00:09:24,470
And Mobile Navigation Toggle.

153
00:09:24,470 --> 00:09:28,900
This is also something that we talked about on a previous episode of The Treehouse Show,

154
00:09:28,900 --> 00:09:32,360
so make sure you check out the archive if you want to see a how-to

155
00:09:32,360 --> 00:09:38,400
on how to have mobile navigation on your responsive sites.

156
00:09:38,400 --> 00:09:43,350
Next up, we recently released a workshop about how to use WordPress

157
00:09:43,350 --> 00:09:47,200
and WooCommerce in an e-commerce site.

158
00:09:47,200 --> 00:09:51,560
And by "we," Nick, you mean teamtreehouse.com. >>Exactly.

159
00:09:51,560 --> 00:09:55,890
This is a workshop that's from our WordPress teacher, Zac,

160
00:09:55,890 --> 00:09:58,430
and let's go ahead and check out a clip.

161
00:10:00,090 --> 00:10:01,660
[Treehouse Workshops]

162
00:10:01,660 --> 00:10:04,870
In this workshop we're going to learn how to build an e-commerce site

163
00:10:04,870 --> 00:10:08,440
using WordPress and WooCommerce [http://goo.gl/kHEuY],

164
00:10:08,440 --> 00:10:10,790
the e-commerce plugin from WooThemes.

165
00:10:10,790 --> 00:10:15,590
We'll learn how to install, set up, and configure WooCommerce,

166
00:10:15,590 --> 00:10:19,040
add and manage our online products,

167
00:10:19,040 --> 00:10:25,030
as well as work with products that require custom attributes such as sizes.

168
00:10:25,030 --> 00:10:28,820
Of course, we'll also learn how to configure the entire checkout process,

169
00:10:28,820 --> 00:10:32,470
from adding to cart to setting up payment gateways

170
00:10:32,470 --> 00:10:35,840
and even determining what confirmations are given,

171
00:10:35,840 --> 00:10:39,270
including customizing the emails that are sent.

172
00:10:39,270 --> 00:10:43,880
Overall, you'll learn everything you need to know to set up an online store

173
00:10:43,880 --> 00:10:47,290
using WooCommerce and WordPress.

174
00:10:48,560 --> 00:10:52,780
This cutting-edge workshop is of course available to Gold subscribers of Treehouse,

175
00:10:52,780 --> 00:10:54,760
so be sure to check it out.

176
00:10:54,760 --> 00:10:57,920
I am @nickrp on Twitter. >>And I am @jseifer.

177
00:10:57,920 --> 00:11:00,910
That about wraps it up for this episode of The Treehouse Show.

178
00:11:00,910 --> 00:11:04,910
We want to thank you very much for tuning in to this episode of The Treehouse Show.

179
00:11:04,910 --> 00:11:07,890
For show notes and more, head to our YouTube channel

180
00:11:07,890 --> 00:11:10,880
at youtube.com/gotreehouse/]

181
00:11:10,880 --> 00:11:14,140
And this episode was of course brought to you by Treehouse,

182
00:11:14,140 --> 00:11:18,640
the best way to learn how to design and develop for the web and mobile.

183
00:11:18,640 --> 00:11:22,430
Check us out at teamtreehouse.com.

184
00:11:22,430 --> 00:11:24,530
[Morse code beeping sound] [The Treehouse Show]

185
00:11:24,530 --> 00:11:27,290
[beeping continues]

186
00:11:27,290 --> 00:11:28,630
[treehouse]

187
00:11:28,630 --> 00:11:31,860
If you'd like to see more advanced videos and tutorials like this one,

188
00:11:31,860 --> 00:11:36,150
go to teamtreehouse.com and start learning for free.