New CSS and JavaScript You Should Be Using

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

but it logs them

And Firebug.

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.

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

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.

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

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

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

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.

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.

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.

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

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.

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,

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.

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

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.

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.

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,

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.

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.

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