New CSS and JavaScript You Should Be Using

Welcome to Syntax.

This is the podcast for webmasters.

I hope you got this queued up in your Zune or your iPad Node because we're gonna be talking all things web today. In fact, we have so many new things to talk about, from new versions of jQuery to design patterns and all sorts of stuff. It's gonna be a really great show.

So my name is Scott Tolinski. I'm I'm a developer from Michigan.

With me JS always is Wes Bos. What's up, Wes?

Hey. Not too much. I'm pretty excited to talk about all the exciting stuff. I was flipping on my BlackBerry earlier, and I got a BBN Pnpm from my my buddy, Chris, he was telling me all about this new, like, jQuery Mobile. And I was like, there's no chance it works with WebOS, and it does. So, like Oh, yeah. Some really, really exciting stuff, also around slicing up PSDs, custom fonts on the web, which is like like, I'm a I'm a justified Verdana kinda guy, but custom fonts got me looking over. You know? Yeah. So I always went straight Georgia. You Node, Georgia

has enough of professional look for me. Yeah. Not a bad stack. It's not a bad stack. Not at all. And you know what, Wes? One of the things we have in our docket here is that the jQuery 1.2 is released. But in that same realm, did you know that Sentry now has a jQuery plug in? You can use this right Seriously. With the rest of your jQuery code. You can just drop this thing in here. In fact, I just hotlinked it straight from the website. I just I just love hotlinking. And just dropped it right in.

Next thing you know, I can track all my errors and bugs when all of my JavaScript code, which, of course, I've just mostly copy and pasted from jQuery plug ins. So, if you wanna check that out, head on over to century.ioforward/syntax.

Sign up today, and and you'll be tracking your jQuery issues left and right. So it's like like Firebug,

but it logs them

on Vercel service? It's just like Firebug, but it puts them all onto a table.

And Firebug.

Yeah. They got a nice table based layout. You can see all of the stuff there and, solve it really quickly.

Wicked. Well, let's get into new exciting news here. JQuery 1.2 dropped last week. Stoked. So a a bunch of kinda interesting things going down in jQuery 1.2, but it's part of the biggest wow is dollar dot get JSON, which is used for AJAX pulling data from, a separate URL. Now we know that in the browser, you can't do that if you have cores, set up and you can't go cross domain. Well, we found a way around it.

Enter JSON p. The p stands for JSON with padding, And now jQuery's dollar dot get JSON will allow you to what it does is the way that it works is you're not allowed to fetch data from 1 domain to another, but what can you fetch from 1 domain to another JavaScript? So JSONP is essentially fetching your data, loading it as JavaScript, and it jQuery is gonna give you a callback.

And when it runs that function, you get the data, and you can hot potato it back into your into your callback of dollar dot get JSON. It's my great thing in this JS XML. It better be.

Yeah. Well, XML, honestly, is the the standard for the industry right now, and it's a titan. I don't think it will ever be displaced. But, my buddy, Douglas Douglas Crockford, I was over at Yahoo the other day, having some lunch with Douglas Crockford, and he's trying to push this thing called JSON.

So we'll see. It's starting to become popular with AJAX and, DIG and a lot of these really popular websites where you don't even have to reload the page. And there's talk even Google Maps is gonna be rolling it out soon. JSON. That sounds like my coworker who can't send her a div.

What what kind of jQuery libraries are you using at these days speaking to jQuery? I know we got some new features here. I I, of course, love jQuery plugins because let's face it. I'm not gonna write this JavaScript code myself. No. But Just hot Tolinski those suckers in into the head of your document? Yeah. 7 or 8? Yeah. Yeah. And and you get a lot of good stuff going. In fact, light Bos is something that I use on just about every project right now. I'll do, like, an image grid, and typically, you wanna see those images way bigger. Yeah. So you you use a lightbox.

That works really Wes, or you can drop it, and it's just straight up WordPress plug in.

Or there's a newer one called Fancybox. Now I don't know if you've seen these transitions on Fancybox, but it zooms in. We get, like, actual animation here.

It looks really good, and it has a nice little border and bat like, shadow on it.

Pretty sweet stuff.

Man, you you pair that with, Adobe Photoshop 7 has this new way to automate,

thumbnails. So you Scott a a whole you gotta have thumbnails for these things. Right? Yeah. So Wes need 2 sizes. You need the big one and the small one. And the thumbnail. Just keep the small ones. You can't that's actually a 6 tip right there. You can't you can't take the big ones and then display them small because then you're loading a big old image. You only wanna load that big image when you click on it. So

you're saving yourself some some megabytes there. So, yeah, if Photoshop has a batch, you can throw them in. You can automate.

It takes you can you can resize, like, a folder of probably 80 images in probably, 12 minutes. Another 10 minutes to FTP upload them, and you've got thumbnails all day long.

But What's your favorite FTP client, by the way, while we're on this while we're just listening to our favorite stuff? You want Cyber Duck? Because I like Cyber Duck a lot, really, but DUI is a little bit you know? I think tran transmit is the the one that, like you know, you gotta pay for it, but I think that the Yeah. I've been I was saving

I've been I was saving the sick sick pick for a little bit later, but I've been on on Coda. I've been been FTP ing straight into my box directly. I got a media temple box with, 47 different WordPress sites running on it. I just FTP right in that sucker and start editing the the files directly. Every time you save it, uploads it. Beautiful. Love it. Instant deployment.

But my favorite plug in is jQuery BBQ. There's this new sort of, like like, movement in in the browser right now, which is, being able to change the page without reloading the page. And the way that you can do that is with the hash bang. You Node, you have the the pound after on your URL, it's used to jump to a specific part of your your, your page. JQuery b b q, it stands for what does it stand for? Hold on. Let me open up a button and query.

Back button and query. So that'll fire off an event when somebody changes the hash of the page, and then you can switch the thing. Terrible for SEO, but pretty exciting new, new idea of of maybe a future of pages that

can change the URL without having to reload the page. Yeah. I want more baby bug, baby bug. Hey. You remember that that commercial it's on right now? It's all over the place right now.

I've no. I've been super into the baby, doctor.

Oh, yeah. The dogs. Yeah. That Frogs are Unreal commercial. Yeah. Yeah. These are so funny. Or the frogs, the Budweis bud.

Wise bud. Bud. Bud.

Gosh. Commercials are great. I can't wait for the the next year's Super Bowl to see what comes out. Alright. Next up is jQuery Mobile.

Man, have you seen jQuery Mobile? Now I you know, I've you know, I don't have an iPhone. Right? So I I don't have that UI, but I can get the same UI that's on a, iPhone on the web just by using jQuery Mobile, and it's all HTML

five. It's the power of HTML five. Yeah.

Wow. On your phone Yeah. It looks just like an iPhone. That's amazing.

Pretty excited that the future of building it's it's pretty clear to me that in a couple years from now, all apps are gonna be built with HTML 5, and it supports everything, like HP WebOS. I got my HP touchpad going on it the other day. HP touchpad, one of the best tablets you can get there.

Running on a BlackBerry, Curve. No problem.

It's pretty exciting pretty exciting times for for mobile based apps.

Yeah.

That's really neat.

I I think it's gonna be a game changer. I think we will we'll start to see it absolutely everywhere. You go to a a website on your phone, Wes you you expect to get, something that feels like it's on a phone. You're not just gonna Sanity the website all really itty bitty. I gotta, like, pinch and zoom in. Custom built sites for mobile is the future, and especially now that you can do you can't do position fixed on on mobile. But Yeah. They've they've they've reimplemented all of scrolling to make this work. Yeah. My, my droid doesn't doesn't do, like, multitouch, so I can't even do pinch and zoom super good. It's it's hard. So You gotta get a BlackBerry, brother.

I can't I can't well, 1, I I do like my keyboard. That's the reason why I got the droid. I can slide it open and and double type with my but I also want the touchscreen.

So I I I'll you know, I don't know about the Blackberries. That's something my dad uses.

I don't know. I don't know if I can go iPhone either. But speaking of the iPhone, something that they've been doing, like, all over the place is this skeuomorphic design. You may have heard that term around, if you've been on the web at all. Skeuomorphic design is really design that looks like real stuff. For instance, I saw a header on an iPhone app that looked like leather.

And I looked at the same thing. Designs.

Yeah. This is like this is pro. It looks like it it belongs in a briefcase. Right? Because it's it's got that leather design. In fact, I'm even working on, a skeuomorphic design for my parents' website right Node. And guess what? The header looks like felt, and it has, like, little stitches on it. So it looks like it's being stitched, but I'm doing it with just a dotted line. Oh, yeah. It looks so good, and it looks real.

I just did ESLint Photoshop. And you can just cut that stuff right out of Photoshop, toss it as a background image. Next thing you know, you got all kinds of textures and stuff.

Beautiful.

Let's let's talk about, like, slicing up your PSDs. So you're working on a website. Like, you got the you you got that felt texture there. You need to slice that sucker up.

What's your what's your approach to slicing up a PSD these days? Yeah. You know, sometimes I would I use the crop tool, crop it, save it, and then undo. But what I'm doing now, I'll do my whole design, and and I'll make sure to include everything in layers property. Right? I'm naming my layers. I'm doing the layers and all that stuff.

Then I take all of the text layers that I don't want to be on there, and I hide them, and I have just the website. Then I use the slice tool, which is really, really handy if you know the slice tool. You could essentially create sections of your website. Then when you go to export, you select which of those, slices that you want, and it'll export them as individual images. That way I can get the repeating, felt pattern for the background.

The noise pattern, I can do even I have a little transition between the 2. I cut that out, the entire footer itself, obviously, the logo, some, some of the buttons I have, I cut those straight out of the design. And and I'll lay some real text on top of those buttons sometimes, but most of the time, I'm just cutting out the whole button as is, because otherwise, how are you gonna get those shadows and border radius, all that stuff to behave well?

Oh, man. Yeah. Yeah. You got your moving doors technique to get those those buttons adjustable. Let me put you on to something here, Scott. MacRabbit has an app called Slicey, and it blows your mind. You go into p you go into your your layers tab in Photoshop. You rename your layers to something like bg.png.

You, you wanna export a a GIF.

Maybe Scott a couple of things with transparency that's needed. You drag drop your PSD into slicey. I'll put a link in the show notes below.

And, it just out the other end, it's gonna slice up your thing. Pretty new. Wes, well worth your money. I've been been a big fan of this on cranking out WordPress themes.

Oh, nice. Yeah.

Love that.

Speaking of themes, let's talk about, awesome new font method.

Cufon. So there's 2 sort of things. There's Cufon and Siffer right now, and there's some really neat flash devs have been working on how do you get custom fonts on the web. Right? We got Wes safe fonts, and you got fonts that are used in in Photoshop.

I'm usually just a Verdana guy. I talked about that. The designers keep sending me over things with custom fonts.

Somebody found out about Dafont, and, it's it's kinda over. Node, Coupon, what it does is it crawls your page with JavaScript, finds anywhere that there's text, and it's gonna replace it with a a flash embed, and then you will get it replaces the whole thing with your custom fonts JS you can do custom fonts in Flash, but you can't do it in the browser. So so certainly excited. I've been a bit of a coupon guy myself, but Sifford is definitely

a very handy one as well. Yeah. And you can use Coupon just by hotlinking straight from the website.

We'll have a link for that straight in the show Node. And it actually uses VML or SVG. Keep in mind that, the the new hot browser, Chrome does not support VML at all. So, you'll wanna keep that in mind when making when making those choices. I I I got a design the other day for a local band and used the font from the movie predator.

It's what do you what do you think? How am I supposed to do how am I supposed to do this? And I I guess we now have save the day, so I'm gonna have to try that out for this new predator font website.

Speaking of Chrome, finally catching up to the big dog Firefox here is Chrome 4 has rolled out behind a prefix rounded corners in CSS.

Yes. Gonna save me so much time.

Instead of like, before we had to do the old 9 panel, you export that sucker from Photoshop. You have a table with 9 different segments in it, and then the middle section is where you put your content.

Now we have rounded corners right in CSS. I'm gonna I'm gonna hotlink you our awesome website, CSS 3 please.com, and, that's going to give you the vendor prefixes for, Wes kit, which is going to be your Chrome and your Safari, and you're gonna get the Moz prefixes.

You're gonna get the MS prefixes for IE, and you're gonna get the o prefixes for opera. You don't have to write those by hand anymore. Simply just copy and paste them into your CSS files. I'm just gonna bookmark this and copy and paste directly from this, website 10 to 12 times a day. Yep. Yep. And, it's gonna pair really nicely with my 9 60 grid system.

It's gonna be really super great.

Let's talk about Coda, which is your text editor of choice. I I've been on Textmate for a little while now. Why would I wanna use something like Coda? No. Coda Coda is where it's at.

So Coda is a a text editor from a company called Panic, and they have the best syntax highlighting built right in. You can have 4 or 5 tabs open at once, and it doesn't slow you slow yourself down.

And the kind of the killer feature to me is that you know, we just talked about transmit FTP ESLint. That's also made by Sanity. So all the features of transmit are built right into Scott.

And if you have a client's website, you don't have to drag and drop the whole thing every time you wanna deploy it. You simply just FTP directly into your box. It's gonna populate all the files in your sidebar, and you can edit directly from your server. And as soon as you hit save,

it's live on the website. What's better than that? I'm gonna panic. Or I'm panicking when I saw how much that app cost, because that's that's a bit expensive for me. I'm well, I guess I have used the Adobe Scott, but I at least have that already, with my Dreamweaver. Now that said, Wes, I'm so used to logging in to my c Sanity and just dragging and dropping the files into whatever folder I want. So it's hard to break those habits even when I know my friend. It's the future. I know. I always, like, get to the the connection screen. I'm like, what am I supposed to input here? Where do I get these credentials from? I gotta do it.

Next one up is CoffeeScript. Now CoffeeScript has been a new hot thing. Everybody's been talking about CoffeeScript. Some people are not convinced, but CoffeeScript is this new way to write JavaScript. It is more like Ruby. And it's a little weird. I'll tell you that. It's it's definitely more than a little weird, and it can get a little confusing. So you have a a top five coffee script features list here. I I wanna hear this.

Yes. Here's a couple couple little tips. I know everybody's probably dabbled a little bit in coffee TypeScript, and, one of the big ones is being able to interpolate a variable inside of a string.

Right now, we gotta we gotta close the string. You gotta use the plus to concatenate it on. What does interpolate mean? Interpolate. You you you have double quotes in CoffeeScript.

You just pop a variable right inside, that string, and you you can use it just like you were to you use in PHP and or in Ruby. You can now do that in JavaScript. You don't have to do the plus sign. Okay. Node. No pluses. We got splats, which is if you wanna collect a whole bunch of arguments and from a function with the triple dots.

There's arrow functions, which are really nice when you don't wanna rebind the value of this. They look cool as hell too.

Yeah. Little dash angle bracket arrow function, I'm in. Sure. It's all indentation based. The at the the at shorthand for this. So if instead of saying this Scott name, this dot person, you simply say at name, and that will compile to yeah. Unreal.

So and, like, the the whole looping if isn't, or no is just plain text. It's true or false.

What am I, a robot? Let me use yes or no.

Yeah. That's how we talk. Yeah. Yeah. It it all issue code. It's simultaneously confusing and really interesting at the same time. Yeah. We'll have to see where Coffey's script goes. It really feels like you're coding from the future.

Speaking of confusing, let's talk about some conference talks that I've caught up with lately.

Yeah. These these are always over my head, so I'm excited to see what you got here.

Scott EU, this guy, Ryan Ryan Dahl comes and, says, I'm going to put get this. You're gonna you're gonna you're gonna pee your pants. JavaScript on the server.

This guy this guy creates this thing called Node. Js, and he's saying, I'm gonna take JavaScript from the the browser that we know, the v eight engine that's behind Chrome. Chrome 4 came out the other day. I'm gonna stick that thing on the server, and you're gonna run JavaScript like it's PHP or Ruby or Python or something.

I know a bad idea when I see it. Node thanks from me. Can I load WordPress with that? Like No way. There's there's nothing there's no frameworks built in server side frameworks in Java. What? Are people gonna build a whole ecosystem for managing packages in JavaScript? I don't think so.

No.

Yeah. Where's the I need my, my plug ins. I need my old stuff. Yeah.

Whew. Well, also, coffee down down the TypeScript world.

You love Rails? Folks over, at Shopify create a Batman j s, which is a, sort of like a Rails in the browser.

You can build these these applications. You get those liquid style syntax in the browser. There's data bindings for rapid HTML rendering, structured directory content. You got your MPC baked right in there.

Batman JS.

I don't even know how I would use any of this stuff. I feel like like my you Node? Where does this fit into my templates? Speaking of my templates, WordPress 2.3 was announced. Yep.

RSS support, baby. Hey. If you don't have RSS on your website today, what are you even doing here? Yeah.

A couple episodes ago, we also talked about, some of the WordPress JS working on new tax syntax, and they have finally rolled out support for tags on our blog. Come on. Every we've been using third party plug ins forever to get tags on our post in WordPress. And WordPress 2.3, common and hot, first class support for tags in WordPress, which is gonna make building blogs so much better.

PHP 5.2 also came out. JSON extension on by default. Kinda interesting Wes talked about. Yeah. And we know this is an XML world, and and big big corporals are using SOAP still. But Mhmm. PHP seems to think JSON is is gonna be the future as well. So they've taken the PHP extension and turned it on by default so you no longer have to go in. And you got you make a p h throw a PHP info into the header of your WordPress site. You'll dump all your PHP features right on the page there, and you can you can take a look. And that extension will be installed by default. Oh, Jason, that sounds like my coworker who can't,

clear a float.

Alright.

That's it for this episode.

We are, of course, sponsored by Media Temple, the only place to host your websites if you're serious. Are you kidding me? Have you seen the design of the website? It looks so Node. For a long time, but Media Temple is it. Yeah. I know for real.

Yeah. I just can't I you know, the the GoDaddy, you you try to sign up. They try to sell you a 100 things. I just want a nice simple, c Sanity, a nice little interface to get going or a or just a a nice interface to to get my applications up and running. And, of course, it's our super duper reliable host that will never go away or be sold to GoDaddy.

As always I trust them. Yep. You can catch us on all the hot social medias.

Latest of which, Google Wave.

I don't know if you got access to this, but they're starting to to send out invites. Yeah. This thing, wild stuff.

It feels like the future. Also, you can make sure you vote for this episode up on on DIG. We wanna get right up to the top there. If we can get up to the top of dig, I'm pretty sure Make sure you dig us. Yeah. Yeah. We'll get we'll get hopefully, our servers can handle it. We'll get the hug of death. You know? So we might have to go

slide a couple blades in the the server cabinet to make sure we can handle the traffic, but Oh, yeah. We can. And, like, also, I've been micro blogging on pounce lately as well.

So certainly check out my Pounce. I'm at Wes Boss. I have a a Zanga.

You can check out my Zanga at s Tolinski.

Wicked. Alright. Well, thanks to everybody so much for tuning in. We enjoyed this episode, and, we'll catch you on the next one.

April fools.

Oh, Wes. Oh. Oh, man. I don't know if you noticed, but I got a NERD sweatband.

Woah. That's awesome. Yeah. And you got the Atari shirt on. Yeah. I couldn't find my my Jake Ray shirt. I still have a Jake Ray shirt. It's not here, though. It's at the Scott, but All of my I found my, HTML five one. And it's brilliant. All of my old tech shirts were either size small

or, not not relevant. So I went with the the band. I also considered this brand brand new t shirt.

I was hoping that this one would give a a nice bit of nostalgia. Well, either way, this is our April fools episode. I hope you all enjoyed this one. It was, way too much fun to do. So Peace.