Episode 70: URL Rewriting, Responsive Emails, QR Codes

I'm Nick Pettit. >>I'm Jason Seifer. 0:00 And you're watching the Treehouse Show, your weekly dose of internets where we talk about all things web design, 0:02 web development, and more. 0:06 In this episode we'll be talking about URL rewriting, responsive email, QR codes, and more. >>Much. Check it out. 0:08 [Treehouse Show] 0:17 First up we have an article on the 24 Ways blog called URL Rewriting for the Fearful. 0:20 If you don't know, 24 Ways publishes articles every December from December 1 to 24, 0:27 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. 0:35 Successor to 23 Ways. #obvi 0:42 There's a great article on here on URL Rewriting for the Fearful. 0:46 Now URL rewriting is the process of taking one URL and making it go to another spot. 0:51 This can either be done by redirecting the user to another webpage or work on something behind the scenes. 0:58 Now this can be a really, really complicated process, but a lot of web applications use it. 1:05 There's a great article on here that goes over exactly everything you need to know to get started with URL rewriting. 1:10 Now the article goes over URL rewriting with Apache, but there's a converter in case you're using Nginx or another web server. 1:18 It's great. It goes through the basics of how to turn on URL rewriting. 1:25 Then here is one of the most simple rewrite rules. 1:29 If you want to go from one URL, make it go from here to another. Boom, you are good to go. 1:33 Now you can do this via redirect. 1:39 Hey, I've got an article that used to be in this one spot, and maybe I moved it around, 1:42 and now it moves somewhere else. 1:45 Then it shows you exactly what you need to do to make these work. 1:49 Now there's a couple different rewrite rules that you can use. 1:53 You can do a temporary redirect which is a 301 or a permanent which is a 302 or possibly I just reversed those, 1:55 but I'm sure we'll get told of that in the YouTube comments. 2:03 >>[Nick Pettit] Wonderful. >>[Jason Seifer] Yeah, so anyway. 2:07 This guide has basically everything you need to know. 2:09 How do you go through and match all of these patterns, what the patterns do, how am I matching letters and numbers, 2:13 and then what to do behind the scenes. 2:19 One of the great things to do with URL rewriting, let's say you have PHP script that displays an article. 2:21 You do it based on the slug of an article. 2:30 Well if you're using URL rewriting instead of using article.php and then a question mark and then maybe the word slug=whatever, 2:32 you can actually just make it go to a certain part of the website just by the URL. 2:41 That's one of the big benefits of URL rewriting, and this can get more and more complicated 2:45 and cascade deeper and deeper until you've spent way too much time figuring it out. 2:48 Luckily there's this article which I really recommend reading. 2:53 You get all the ins and outs, especially if you've never approached this before. 2:56 Great, great article. 2:59 Very nice. Well next up is a site called My GibHub Resume. 3:02 It basically takes any GitHub username and transforms it into—are you ready for it—a resume. I know. Aptly named. 3:06 If we check out My GitHub Resume, you can go ahead and paste in or type in any GitHub username. 3:17 I happen to have one right here. He's the creator of a project, David. 3:25 I'm going to go ahead and click generate, and boom, we have a resume for David right here. 3:29 It looks like he works at Engine Yard. 3:37 We got his GitHub profile and a couple of details about it, his blog, some of the languages that he uses on GitHub, 3:40 and then some of his popular repositories. 3:47 There's also some organizations that he's a member of, and then there's a little about this resume down at the bottom. 3:51 You can go ahead and email or print this resume, and this was actually inspired by a Tweet from John Resig, 3:59 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." 4:06 Now he didn't mean that as a cover sheet? He means instead of. 4:15 Right. Exactly. 4:19 This basically is that project. It allows you to go ahead and just generate a resume based on your GitHub profile. 4:24 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 4:32 which signifies that you are okay with people generating a resume based on your GitHub profile using My GitHub Resume. 4:41 Really cool project. Really cool idea. >>Yeah. Yeah, I really like it. 4:49 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. 4:54 Really, really simple actually. Here's a live demo. Nick, give me a word to type in, part of a word. 5:05 [Pettit] Banana. [Seifer] Look. I type in B, and it's already auto completing banana. Boom. 5:09 I want to fill it in, just press the right arrow key, good to go, and this works for so many different words. 5:17 It comes installed with regular dictionary, but I think you can change the dictionary if you want to. 5:23 There's a micro-version that includes a basic dictionary, standard, and maximum. 5:30 Anyway very, very easy to use. As you can see right here, this is just a couple lines of code—newAutoSuggestControl. 5:34 Now I wouldn't recommend this in every particular spot, but it could be really handy in different circumstances 5:41 depending on the website that you're making. Anyway check that out. 5:46 We'll have a link to it in the show notes which you can get to at youtube.com/gotreehouse, 5:50 or search for us in iTunes at the Treehouse Show. 5:54 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. 5:57 Good idea. Especially good for email address. >>Nice. 6:02 Next up is a project from ZURB, whom of course are the creators of ZURB Foundation, a popular front-end framework. 6:06 This project is called Ink, and it's a framework for designing HTML emails which of course is a notoriously difficult thing to do, 6:13 especially if you want that email to work on a wide variety of email clients. 6:23 They all render HTML slightly differently, and there are some older ones or some ones that aren't so good. 6:27 Outlook is particularly bad for rendering HTML emails, but this framework allows you to do it a lot more easily. 6:35 Let's go ahead and take a look at Ink. Look at that. 6:43 They have this wonderful illustration here with a little bit of animation. Very cool homepage. 6:46 It says email anywhere on any device. 6:52 It gives you process, docs, inliner, and even a download. Look at that. 6:57 Let's look at the process thought. That's the interesting part here. 7:00 First it says to go ahead and test in Outlook. 7:04 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 7:09 before you move on to other email clients. 7:14 Then you can go ahead and add your responsive styles. 7:18 You can go ahead and make your email responsive so that it works on a wide variety of screen resolutions. That's very cool. 7:21 Then you can bring your styles inline, and there's a special tool that they have there called Inky's Inliner 7:29 that allows you to go ahead and do this. 7:38 Again email clients aren't that great at rendering HTML and CSS so you do need to use a lot of inline styles, 7:41 which is normally not recommended on the web, but in an email client you do need to do it. 7:46 [Seifer] It's about the only way you can do it. >>[Pettit] Pretty much. 7:51 Then you can go ahead and test your email and send it out. Very cool stuff. 7:54 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. 8:01 I think this looks like a great project, and it's one that's really very much needed. 8:06 Especially if you don't know where to start. 8:12 Next up we have a project called qrcode.js. 8:14 Now we've all heard of QR codes before. You see them around. 8:17 They're little squares, hold your phone up to it, and they can either go to a website or print out some information. 8:21 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? 8:26 What? That's impossible. >>It is not, and it's totally possible. We're going to show you how right now. >>Amazing. 8:30 Yeah. Amaze. Here's qrcode.js. Very, very easy to use. Look at that. We have one div with the ID of qrcode. 8:37 Then look at that. With one line of JavaScript, boom. We have generated a QR code. 8:44 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. 8:50 Once you do that call the clear and make code and then boom. You get a QR code. 8:57 Now what's really great about this is it works on most web browsers. It works all the way back to IE6. 9:04 If you need to put QR codes on your site go ahead, download qrcode.js and get QR coding. 9:10 Wow. Very QR. Much code. 9:17 Next up is a blog post from Chris Coyier over on CSS Tricks about the HTML5 meter element. 9:20 Now if we scroll down the page here, you can go ahead and see what the markup looks like for the meter element. 9:28 As you would expect, it uses an opening and closing tag that says meter, 9:34 and then there is a couple of attributes that you can go ahead and apply to the meter element. 9:40 Now meter is very similar to the progress element. 9:46 It basically allows you to create a little meter, so rather than look at a whole bunch of boring code, 9:50 let's just look at this fun example instead. 9:55 You can go ahead and set a minimum and maximum for your meter, and then look at this. 9:58 You can go ahead and mess around with the value. 10:03 We want it to be 0.3. Boom, now it's 0.3. You want it to be 0.25? There you go. 10:05 Pretty cool. Looks like you can't do 0.25. That's okay. 10:12 As you fill up the meter, it will go ahead and change colors. 10:17 That's pretty cool. You can also do OS10 style disk usage. 10:21 With some additional styling, you can go ahead and create something that looks like this. 10:26 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. 10:34 You can also go ahead and animate these things. 10:43 If we go ahead and hover over—I thought there was an example here, maybe not. 10:46 Anyway you can go ahead and animate these. 10:52 For example, you could have animated stripes in the background and all sorts of cool stuff. 10:55 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 11:00 without any JavaScript. Very cool. 11:09 That's wonderful. It's always good to stay on top of the new HTML5 elements anyway. 11:12 Next up we have a project called Prism. Prism is a set of JavaScript and CSS that does syntax highlighting for your webpages. 11:18 This is going to be really useful if you have a blog where you need to demonstrate some code or something like that. 11:26 As you would expect, it is extremely easy to use. 11:31 Here is an example right here of the Prism source code highlighted with Prism, 11:34 and as they say, don't you just love how meta this is. Yes, we do website. We love how meta that is. 11:39 As I said, it's extremely easy to use and has a ton of features. 11:46 Here is the basic usage. You just include the style sheet and the JavaScript, and then you are ready to do some syntax highlighting. 11:51 How do you do it? Well it's really, really easy. 11:59 You wrap your code in a pre-tag, and then you add a code tag with a class of the language 12:01 and a hyphen and the language you want to use. In this case it is CSS. 12:07 Now Prism has a bunch of different plugins that support line numbers and just a lot of different options 12:12 that you might want to have when syntax highlighting. 12:19 It looks like you can also adjust the theme which is pretty nice as well. 12:21 Yeah, have it match your webpage. It doesn't support IE6 through 8. 12:25 If you do need to target those browsers it might not be the best choice, 12:28 but if you're using more modern browsers this is a really, really great choice for syntax highlighting. 12:32 Yeah, that's very nice. It's notoriously difficult to do syntax highlighting. Really cool solution. 12:36 Next up is some section separators over on the Codrops blog. 12:43 Here we have a couple of different sections of HTML. Here's this lighter blue are and this darker blue area. 12:48 We have this little triangle separating them. 12:58 If we scroll down the page, you can see we have an upside down triangle. 13:01 We have this kind of diagonal line running across, this little circle, looks almost like a puzzle piece. That's kind of neat. 13:05 That larger triangle, this nice big curve. 13:13 Lots of different nice section separators which is a pretty common design pattern that you're seeing on a lot of websites these days 13:17 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. 13:25 It's nice to have some variance between each one of those sections. 13:33 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. 13:37 It looks like they're even using an SVG for some of those section separators. 13:47 Pretty cool stuff and very nice example of how you can go ahead and separate those sections. 13:56 If you want to know how to code some of those, we've gone over that on previous episodes of the Treehouse Show, 14:02 not to toot our own horn or anything. 14:08 I am @nickrp on Twitter. >>And I am @jseifer. 14:10 For more information on anything we talked about, head on over to the show notes at youtube.com/gotreehouse, 14:14 or search for us in iTunes at the Treehouse Show. 14:18 Of course if you'd like to see more videos like this one about web design, web development, mobile business, 14:21 and so much more, be sure to check us out at teamtreehouse.com. 14:27 Thanks so much for watching, and we'll see you next week. 14:32 [Treehouse Show] 14:36 [male] And in 5, 4. 14:43 I'm about to yawn. [laughter] 14:46 He's so excited about the show. 14:50 That's going to be a gif. 14:58 Oh, that's my line. I'm Nick Pettit. 15:03 [male] Three, 2. 15:07 [laughter] 15:11 I'm Nick Pettit. >>I'm Jason Se—[laughter]. 15:35 [male] And in 5, 4. 15:43 I'm Nick Pettit. [laughter] 15:48 I'm Nick Pettit. >>I'm Jason Seifer. [laughter] 15:51 Pinch myself or something. 15:58 I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the Treehouse Show, your weekly dose of internets where we talk about— 16:03 [laughter]—web development, and more. 16:08 Can we just use another intro unlike a previous episode. 16:13 The most previous episode. 16:17 I think it's out. I think it's out. >>Okay. Let's do it. 16:19

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

Sign up