1
00:00:00,000 --> 00:00:02,260
I'm Nick Pettit. >>I'm Jason Seifer.

2
00:00:02,260 --> 00:00:06,150
And you're watching the Treehouse Show, your weekly dose of internets where we talk about all things web design,

3
00:00:06,150 --> 00:00:08,270
web development, and more.

4
00:00:08,270 --> 00:00:15,890
In this episode we'll be talking about URL rewriting, responsive email, QR codes, and more. >>Much. Check it out.

5
00:00:17,810 --> 00:00:20,710
[Treehouse Show]

6
00:00:20,710 --> 00:00:27,440
First up we have an article on the 24 Ways blog called URL Rewriting for the Fearful.

7
00:00:27,440 --> 00:00:35,480
If you don't know, 24 Ways publishes articles every December from December 1 to 24,

8
00:00:35,480 --> 00:00:42,190
and that's why it's called 24 Ways. They call it the advent calendar for geeks. Pretty cool blog if you've never checked it out before.

9
00:00:42,190 --> 00:00:46,920
Successor to 23 Ways. #obvi

10
00:00:46,920 --> 00:00:51,850
There's a great article on here on URL Rewriting for the Fearful.

11
00:00:51,850 --> 00:00:58,900
Now URL rewriting is the process of taking one URL and making it go to another spot.

12
00:00:58,900 --> 00:01:05,360
This can either be done by redirecting the user to another webpage or work on something behind the scenes.

13
00:01:05,360 --> 00:01:10,780
Now this can be a really, really complicated process, but a lot of web applications use it.

14
00:01:10,780 --> 00:01:18,160
There's a great article on here that goes over exactly everything you need to know to get started with URL rewriting.

15
00:01:18,160 --> 00:01:25,550
Now the article goes over URL rewriting with Apache, but there's a converter in case you're using Nginx or another web server.

16
00:01:25,550 --> 00:01:29,560
It's great. It goes through the basics of how to turn on URL rewriting.

17
00:01:29,560 --> 00:01:33,510
Then here is one of the most simple rewrite rules.

18
00:01:33,510 --> 00:01:39,660
If you want to go from one URL, make it go from here to another. Boom, you are good to go.

19
00:01:39,660 --> 00:01:42,660
Now you can do this via redirect.

20
00:01:42,660 --> 00:01:45,660
Hey, I've got an article that used to be in this one spot, and maybe I moved it around,

21
00:01:45,660 --> 00:01:49,880
and now it moves somewhere else.

22
00:01:49,880 --> 00:01:53,180
Then it shows you exactly what you need to do to make these work.

23
00:01:53,180 --> 00:01:55,900
Now there's a couple different rewrite rules that you can use.

24
00:01:55,900 --> 00:02:03,140
You can do a temporary redirect which is a 301 or a permanent which is a 302 or possibly I just reversed those,

25
00:02:03,140 --> 00:02:07,090
but I'm sure we'll get told of that in the YouTube comments.

26
00:02:07,090 --> 00:02:09,090
>>[Nick Pettit] Wonderful. >>[Jason Seifer] Yeah, so anyway.

27
00:02:09,090 --> 00:02:13,240
This guide has basically everything you need to know.

28
00:02:13,240 --> 00:02:19,030
How do you go through and match all of these patterns, what the patterns do, how am I matching letters and numbers,

29
00:02:19,030 --> 00:02:21,860
and then what to do behind the scenes.

30
00:02:21,860 --> 00:02:30,230
One of the great things to do with URL rewriting, let's say you have PHP script that displays an article.

31
00:02:30,230 --> 00:02:32,950
You do it based on the slug of an article.

32
00:02:32,950 --> 00:02:41,390
Well if you're using URL rewriting instead of using article.php and then a question mark and then maybe the word slug=whatever,

33
00:02:41,390 --> 00:02:45,400
you can actually just make it go to a certain part of the website just by the URL.

34
00:02:45,400 --> 00:02:48,610
That's one of the big benefits of URL rewriting, and this can get more and more complicated

35
00:02:48,610 --> 00:02:53,190
and cascade deeper and deeper until you've spent way too much time figuring it out.

36
00:02:53,190 --> 00:02:56,030
Luckily there's this article which I really recommend reading.

37
00:02:56,030 --> 00:02:59,690
You get all the ins and outs, especially if you've never approached this before.

38
00:02:59,690 --> 00:03:02,180
Great, great article.

39
00:03:02,180 --> 00:03:06,890
Very nice. Well next up is a site called My GibHub Resume.

40
00:03:06,890 --> 00:03:17,050
It basically takes any GitHub username and transforms it into—are you ready for it—a resume. I know. Aptly named.

41
00:03:17,050 --> 00:03:25,430
If we check out My GitHub Resume, you can go ahead and paste in or type in any GitHub username.

42
00:03:25,430 --> 00:03:29,580
I happen to have one right here. He's the creator of a project, David.

43
00:03:29,580 --> 00:03:37,180
I'm going to go ahead and click generate, and boom, we have a resume for David right here.

44
00:03:37,180 --> 00:03:40,040
It looks like he works at Engine Yard.

45
00:03:40,040 --> 00:03:47,650
We got his GitHub profile and a couple of details about it, his blog, some of the languages that he uses on GitHub,

46
00:03:47,650 --> 00:03:51,380
and then some of his popular repositories.

47
00:03:51,380 --> 00:03:59,360
There's also some organizations that he's a member of, and then there's a little about this resume down at the bottom.

48
00:03:59,360 --> 00:04:06,470
You can go ahead and email or print this resume, and this was actually inspired by a Tweet from John Resig,

49
00:04:06,470 --> 00:04:15,170
who is the creator of jQuery, where he said, "When it comes to hiring, I'll take a GitHub commit log over a resume any day."

50
00:04:15,170 --> 00:04:19,880
Now he didn't mean that as a cover sheet? He means instead of.

51
00:04:19,880 --> 00:04:24,080
Right. Exactly.

52
00:04:24,080 --> 00:04:32,090
This basically is that project. It allows you to go ahead and just generate a resume based on your GitHub profile.

53
00:04:32,090 --> 00:04:41,080
Now one caveat here is that in order to use this, you actually need to go to this project on GitHub and star the project

54
00:04:41,080 --> 00:04:49,240
which signifies that you are okay with people generating a resume based on your GitHub profile using My GitHub Resume.

55
00:04:49,240 --> 00:04:54,860
Really cool project. Really cool idea. >>Yeah. Yeah, I really like it.

56
00:04:54,860 --> 00:05:05,180
Next up we have a library called AutoJS. This is a library for continually auto-suggesting things in a text area based on a dictionary.

57
00:05:05,180 --> 00:05:09,990
Really, really simple actually. Here's a live demo. Nick, give me a word to type in, part of a word.

58
00:05:09,990 --> 00:05:17,470
[Pettit] Banana. [Seifer] Look. I type in B, and it's already auto completing banana.  Boom.

59
00:05:17,470 --> 00:05:23,290
I want to fill it in, just press the right arrow key, good to go, and this works for so many different words.

60
00:05:23,290 --> 00:05:30,060
It comes installed with regular dictionary, but I think you can change the dictionary if you want to.

61
00:05:30,060 --> 00:05:34,720
There's a micro-version that includes a basic dictionary, standard, and maximum.

62
00:05:34,720 --> 00:05:41,610
Anyway very, very easy to use. As you can see right here, this is just a couple lines of code—newAutoSuggestControl.

63
00:05:41,610 --> 00:05:46,800
Now I wouldn't recommend this in every particular spot, but it could be really handy in different circumstances

64
00:05:46,800 --> 00:05:50,580
depending on the website that you're making. Anyway check that out.

65
00:05:50,580 --> 00:05:54,260
We'll have a link to it in the show notes which you can get to at youtube.com/gotreehouse,

66
00:05:54,260 --> 00:05:57,380
or search for us in iTunes at the Treehouse Show.

67
00:05:57,380 --> 00:06:02,920
Wow, that's wonderful. I'm going to put that on every single text area I can. I'm sure that won't be annoying at all.

68
00:06:02,920 --> 00:06:06,380
Good idea. Especially good for email address. >>Nice.

69
00:06:06,380 --> 00:06:13,780
Next up is a project from ZURB, whom of course are the creators of ZURB Foundation, a popular front-end framework.

70
00:06:13,780 --> 00:06:23,070
This project is called Ink, and it's a framework for designing HTML emails which of course is a notoriously difficult thing to do,

71
00:06:23,070 --> 00:06:27,360
especially if you want that email to work on a wide variety of email clients.

72
00:06:27,360 --> 00:06:35,210
They all render HTML slightly differently, and there are some older ones or some ones that aren't so good.

73
00:06:35,210 --> 00:06:43,260
Outlook is particularly bad for rendering HTML emails, but this framework allows you to do it a lot more easily.

74
00:06:43,260 --> 00:06:46,180
Let's go ahead and take a look at Ink. Look at that.

75
00:06:46,180 --> 00:06:52,550
They have this wonderful illustration here with a little bit of animation. Very cool homepage.

76
00:06:52,550 --> 00:06:57,160
It says email anywhere on any device.

77
00:06:57,160 --> 00:07:00,940
It gives you process, docs, inliner, and even a download. Look at that.

78
00:07:00,940 --> 00:07:04,730
Let's look at the process thought. That's the interesting part here.

79
00:07:04,730 --> 00:07:09,380
First it says to go ahead and test in Outlook.

80
00:07:09,380 --> 00:07:14,530
It says that Outlook is the most bullish of all email clients, so of course you want to make sure that it works there first

81
00:07:14,530 --> 00:07:18,920
before you move on to other email clients.

82
00:07:18,920 --> 00:07:21,930
Then you can go ahead and add your responsive styles.

83
00:07:21,930 --> 00:07:29,980
You can go ahead and make your email responsive so that it works on a wide variety of screen resolutions. That's very cool.

84
00:07:29,980 --> 00:07:38,640
Then you can bring your styles inline, and there's a special tool that they have there called Inky's Inliner

85
00:07:38,640 --> 00:07:41,090
that allows you to go ahead and do this.

86
00:07:41,090 --> 00:07:46,290
Again email clients aren't that great at rendering HTML and CSS so you do need to use a lot of inline styles,

87
00:07:46,290 --> 00:07:51,590
which is normally not recommended on the web, but in an email client you do need to do it.

88
00:07:51,590 --> 00:07:54,130
[Seifer] It's about the only way you can do it. >>[Pettit] Pretty much.

89
00:07:54,130 --> 00:08:01,140
Then you can go ahead and test your email and send it out. Very cool stuff.

90
00:08:01,140 --> 00:08:06,670
There's a lot more here to explore in the documentation, and you should definitely go ahead and download it, check it our for yourself.

91
00:08:06,670 --> 00:08:12,020
I think this looks like a great project, and it's one that's really very much needed.

92
00:08:12,020 --> 00:08:14,640
Especially if you don't know where to start.

93
00:08:14,640 --> 00:08:17,690
Next up we have a project called qrcode.js.

94
00:08:17,690 --> 00:08:21,050
Now we've all heard of QR codes before. You see them around.

95
00:08:21,050 --> 00:08:26,420
They're little squares, hold your phone up to it, and they can either go to a website or print out some information.

96
00:08:26,420 --> 00:08:30,900
Now there's been programs to do that before, but Nick what if I told you you could do that right in your web browser?

97
00:08:30,900 --> 00:08:37,630
What? That's impossible. >>It is not, and it's totally possible. We're going to show you how right now. >>Amazing.

98
00:08:37,630 --> 00:08:44,900
Yeah. Amaze. Here's qrcode.js. Very, very easy to use. Look at that. We have one div with the ID of qrcode.

99
00:08:44,900 --> 00:08:50,930
Then look at that. With one line of JavaScript, boom. We have generated a QR code.

100
00:08:50,930 --> 00:08:57,830
Now there's a few different options that you can use. You can give it the text where you want it to go, width, height, and even colors.

101
00:08:57,830 --> 00:09:04,210
Once you do that call the clear and make code and then boom. You get a QR code.

102
00:09:04,210 --> 00:09:10,910
Now what's really great about this is it works on most web browsers. It works all the way back to IE6.

103
00:09:10,910 --> 00:09:17,440
If you need to put QR codes on your site go ahead, download qrcode.js and get QR coding.

104
00:09:17,440 --> 00:09:20,850
Wow. Very QR. Much code.

105
00:09:20,850 --> 00:09:28,800
Next up is a blog post from Chris Coyier over on CSS Tricks about the HTML5 meter element.

106
00:09:28,800 --> 00:09:34,180
Now if we scroll down the page here, you can go ahead and see what the markup looks like for the meter element.

107
00:09:34,180 --> 00:09:40,400
As you would expect, it uses an opening and closing tag that says meter,

108
00:09:40,400 --> 00:09:46,210
and then there is a couple of attributes that you can go ahead and apply to the meter element.

109
00:09:46,210 --> 00:09:50,050
Now meter is very similar to the progress element.

110
00:09:50,050 --> 00:09:55,880
It basically allows you to create a little meter, so rather than look at a whole bunch of boring code,

111
00:09:55,880 --> 00:09:58,350
let's just look at this fun example instead.

112
00:09:58,350 --> 00:10:03,740
You can go ahead and set a minimum and maximum for your meter, and then look at this.

113
00:10:03,740 --> 00:10:05,470
You can go ahead and mess around with the value.

114
00:10:05,470 --> 00:10:12,060
We want it to be 0.3. Boom, now it's 0.3. You want it to be 0.25? There you go.

115
00:10:12,060 --> 00:10:17,820
Pretty cool. Looks like you can't do 0.25. That's okay.

116
00:10:17,820 --> 00:10:21,520
As you fill up the meter, it will go ahead and change colors.

117
00:10:21,520 --> 00:10:26,500
That's pretty cool. You can also do OS10 style disk usage.

118
00:10:26,500 --> 00:10:34,760
With some additional styling, you can go ahead and create something that looks like this.

119
00:10:34,760 --> 00:10:43,350
You can go ahead and create gauges or meters I guess that look like they're created in OS10 with a bunch of different coloring.

120
00:10:43,350 --> 00:10:46,710
You can also go ahead and animate these things.

121
00:10:46,710 --> 00:10:52,090
If we go ahead and hover over—I thought there was an example here, maybe not.

122
00:10:52,090 --> 00:10:55,010
Anyway you can go ahead and animate these.

123
00:10:55,010 --> 00:11:00,100
For example, you could have animated stripes in the background and all sorts of cool stuff.

124
00:11:00,100 --> 00:11:09,700
Very, very cool article, and there's a lot of attributes to play with here that allow you to create meters right in your HTML

125
00:11:09,700 --> 00:11:12,740
without any JavaScript. Very cool.

126
00:11:12,740 --> 00:11:18,010
That's wonderful. It's always good to stay on top of the new HTML5 elements anyway.

127
00:11:18,010 --> 00:11:26,910
Next up we have a project called Prism. Prism is a set of JavaScript and CSS that does syntax highlighting for your webpages.

128
00:11:26,910 --> 00:11:31,240
This is going to be really useful if you have a blog where you need to demonstrate some code or something like that.

129
00:11:31,240 --> 00:11:34,240
As you would expect, it is extremely easy to use.

130
00:11:34,240 --> 00:11:39,420
Here is an example right here of the Prism source code highlighted with Prism,

131
00:11:39,420 --> 00:11:46,250
and as they say, don't you just love how meta this is. Yes, we do website. We love how meta that is.

132
00:11:46,250 --> 00:11:51,040
As I said, it's extremely easy to use and has a ton of features.

133
00:11:51,040 --> 00:11:59,070
Here is the basic usage. You just include the style sheet and the JavaScript, and then you are ready to do some syntax highlighting.

134
00:11:59,070 --> 00:12:01,360
How do you do it? Well it's really, really easy.

135
00:12:01,360 --> 00:12:07,380
You wrap your code in a pre-tag, and then you add a code tag with a class of the language

136
00:12:07,380 --> 00:12:12,300
and a hyphen and the language you want to use. In this case it is CSS.

137
00:12:12,300 --> 00:12:19,270
Now Prism has a bunch of different plugins that support line numbers and just a lot of different options

138
00:12:19,270 --> 00:12:21,640
that you might want to have when syntax highlighting.

139
00:12:21,640 --> 00:12:25,150
It looks like you can also adjust the theme which is pretty nice as well.

140
00:12:25,150 --> 00:12:28,800
Yeah, have it match your webpage. It doesn't support IE6 through 8.

141
00:12:28,800 --> 00:12:32,630
If you do need to target those browsers it might not be the best choice,

142
00:12:32,630 --> 00:12:36,580
but if you're using more modern browsers this is a really, really great choice for syntax highlighting.

143
00:12:36,580 --> 00:12:43,070
Yeah, that's very nice. It's notoriously difficult to do syntax highlighting. Really cool solution.

144
00:12:43,070 --> 00:12:48,850
Next up is some section separators over on the Codrops blog.

145
00:12:48,850 --> 00:12:58,570
Here we have a couple of different sections of HTML. Here's this lighter blue are and this darker blue area.

146
00:12:58,570 --> 00:13:01,130
We have this little triangle separating them.

147
00:13:01,130 --> 00:13:05,190
If we scroll down the page, you can see we have an upside down triangle.

148
00:13:05,190 --> 00:13:13,110
We have this kind of diagonal line running across, this little circle, looks almost like a puzzle piece. That's kind of neat.

149
00:13:13,110 --> 00:13:17,070
That larger triangle, this nice big curve.

150
00:13:17,070 --> 00:13:25,850
Lots of different nice section separators which is a pretty common design pattern that you're seeing on a lot of websites these days

151
00:13:25,850 --> 00:13:33,170
that are kind of long scrolly websites that are one page, and you kind of just scroll down the page looking at each new section.

152
00:13:33,170 --> 00:13:37,890
It's nice to have some variance between each one of those sections.

153
00:13:37,890 --> 00:13:47,840
If we go ahead and go to these Codrops article, here you can go ahead and see exactly how it was done with HTML and CSS code.

154
00:13:47,840 --> 00:13:56,500
It looks like they're even using an SVG for some of those section separators.

155
00:13:56,500 --> 00:14:02,430
Pretty cool stuff and very nice example of how you can go ahead and separate those sections.

156
00:14:02,430 --> 00:14:08,060
If you want to know how to code some of those, we've gone over that on previous episodes of the Treehouse Show,

157
00:14:08,060 --> 00:14:10,970
not to toot our own horn or anything.

158
00:14:10,970 --> 00:14:14,230
I am @nickrp on Twitter. >>And I am @jseifer.

159
00:14:14,230 --> 00:14:18,810
For more information on anything we talked about, head on over to the show notes at youtube.com/gotreehouse,

160
00:14:18,810 --> 00:14:21,770
or search for us in iTunes at the Treehouse Show.

161
00:14:21,770 --> 00:14:27,860
Of course if you'd like to see more videos like this one about web design, web development, mobile business,

162
00:14:27,860 --> 00:14:32,140
and so much more, be sure to check us out at teamtreehouse.com.

163
00:14:32,140 --> 00:14:36,120
Thanks so much for watching, and we'll see you next week.

164
00:14:36,120 --> 00:14:42,360
[Treehouse Show]

165
00:14:43,970 --> 00:14:46,210
[male] And in 5, 4.

166
00:14:46,210 --> 00:14:50,220
I'm about to yawn. [laughter]

167
00:14:50,220 --> 00:14:52,220
He's so excited about the show.

168
00:14:58,250 --> 00:15:00,360
That's going to be a gif.

169
00:15:03,100 --> 00:15:07,760
Oh, that's my line. I'm Nick Pettit.

170
00:15:07,760 --> 00:15:11,540
[male] Three, 2.

171
00:15:11,540 --> 00:15:26,870
[laughter]

172
00:15:35,220 --> 00:15:37,910
I'm Nick Pettit. >>I'm Jason Se—[laughter].

173
00:15:43,410 --> 00:15:46,230
[male] And in 5, 4.

174
00:15:48,720 --> 00:15:51,160
I'm Nick Pettit. [laughter]

175
00:15:51,190 --> 00:15:58,770
I'm Nick Pettit. >>I'm Jason Seifer. [laughter]

176
00:15:58,770 --> 00:16:01,680
Pinch myself or something.

177
00:16:03,930 --> 00:16:08,760
I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the Treehouse Show, your weekly dose of internets where we talk about—

178
00:16:08,760 --> 00:16:13,080
[laughter]—web development, and more.

179
00:16:13,080 --> 00:16:17,570
Can we just use another intro unlike a previous episode.

180
00:16:17,570 --> 00:16:19,740
The most previous episode.

181
00:16:19,740 --> 00:16:23,360
I think it's out. I think it's out. >>Okay. Let's do it.