New CSS and JavaScript You Should Be Using

Folks over,

from 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.

like it's PHP or Ruby or Python or something.

says, way to automate,

world.

I'm going to put get this. You're gonna you're gonna you're gonna pee your pants. JavaScript on the server.

I know a bad idea when I see it. Node thanks from me. Can I load WordPress with that? the the files directly. Every time you save it, uploads it. Beautiful. Love it. Instant deployment.

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

my plug ins. I need my old stuff. Yeah.

Ryan Ryan Dahl

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

JavaScript 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, structured directory content. You got your MPC

No.

for managing packages in JavaScript? I don't think so.

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

comes and, 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 love Rails? you you got that felt texture there. You need to slice that sucker up.

this guy creates this thing called Node. Js, being able to change the page you're saving yourself some some megabytes there. So, yeah, if Photoshop has a batch, you can throw them in. You can automate.

on the server, and you're gonna run is essentially fetching your data,

This guy and, it's it's kinda over. Node, Wicked. Alright. Well, thanks to everybody so much for tuning in. We enjoyed this episode, and, we'll catch you on the next one.

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

Yeah.

Love that.

felt pattern for the background.

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.

my droid doesn't doesn't do, like, multitouch, Oh, nice. Yeah.

Beautiful.

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

And I looked at the same thing. Designs.

Curve. No problem.

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, 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.

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

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?

the entire footer itself, obviously,

design. You may have heard that term around,

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,

the logo, You can check out my Zanga

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 This is the podcast for webmasters.

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.

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.

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.

Speaking of themes, let's talk about, Yeah. Where's the I need my,

And, it just out the other end, it's gonna slice up your thing. Pretty new. Wes,

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.

The noise pattern, I can do even I have a little transition between the 2. I cut that out,

if you've been on the web at all. Skeuomorphic design is really design that looks like real stuff. For instance, what are you even doing here?

Photoshop. You have a table with 9 different segments in it, and then the middle section is where you put your content.

and, that's going to give you the vendor prefixes Enter JSON p. The p stands for JSON with padding, sort of like a Rails in the browser.

Somebody found out about Dafont, 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.

Now we have rounded corners right in CSS. I'm gonna I'm gonna hotlink you our awesome website, CSS 3 please.com, 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 export that sucker from

what it does is it crawls your page with JavaScript, probably, 12 minutes. Another 10 minutes to FTP upload them, 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,

finally catching up to the big dog Firefox here is Chrome 4 has rolled out behind a prefix and it supports everything, like HP WebOS. I got my HP touchpad 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.

finds

on the web. Right? We got Wes safe fonts, and you got fonts that are used in in Photoshop.

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.

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 Oh, yeah. The dogs. Yeah. That Frogs are Unreal commercial. Yeah. Yeah. These are so funny. Or the frogs, the Budweis bud.

It takes you can you can resize, like, a folder of probably 80 images in this guy,

but it zooms in. We get, like, actual 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.

Pretty sweet stuff.

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 Yeah. Well, XML, honestly, is the the standard

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 So I I I'll you know, I don't know about the Blackberries. That's something my dad uses.

shadow on it.

So we'll see. It's starting to become popular with AJAX and, the browser right now, which is, So certainly check out my Pounce. I'm at Wes Boss. I have a a Zanga.

way bigger. Yeah. So you you use a lightbox.

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 Man, have you seen

Adobe Photoshop 7 has this new with, 47 different WordPress sites running on it. I just FTP right in that sucker and start editing

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?

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

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

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

Man, you you pair that with, So and, like, the the whole looping if isn't, 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, 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.

but it logs them

So animation here.

Welcome to Syntax.

is dollar dot get JSON, which is used for AJAX pulling data from, Yes. Gonna save me so much time.

set up and you can't go cross domain. Well, Let me use yes or no.

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, on Fancybox, awesome new font method.

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 or no is just plain text. It's true or false.

which is like like, I'm a I'm a justified Verdana kinda guy, but Instead of like, before we had to do the old 9 panel,

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

custom fonts on the web, 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,

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, not not relevant. So I went with the the band. I also considered

And So Coda is a a text editor from a company called Panic,

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

With me JS always is Wes Bos. What's up, Wes? so I can't even do pinch and zoom super good. It's it's hard. So You gotta get a BlackBerry, brother.

Hey. Not too much. I'm pretty excited to talk about all the exciting stuff. I was flipping on my BlackBerry earlier, so certainly excited. I've been a bit of a coupon guy myself,

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.

and I got a BBN Pnpm from my my buddy, Chris, he was telling me all about this new, after on your URL, it's used to jump to a specific part of also around slicing up PSDs,

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, and they have finally rolled out support for tags 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.

if you wanna check that out, head on over to century.ioforward/syntax.

from new versions of jQuery to design patterns and all sorts of stuff. It's gonna be a really great show.

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, I'm so used to logging in to my c Sanity confusing and but I can get the same UI that's on a, iPhone on the web just by using jQuery

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

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

for tags in WordPress, which is gonna make building And loading it as JavaScript, and it jQuery is gonna give you a callback.

That's it for this episode.

clear a float.

A couple episodes ago, we also talked about, on our blog. Come on. Every we've been using third party plug ins forever a separate URL. Now we know that in the browser, you can't do that if you have cores,

common and hot, first class support

to get tags on our post in WordPress. And WordPress 2.3,

Alright.

at s Tolinski.

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

some of the WordPress JS working on new tax syntax, and you've got thumbnails all day long.

Peace.

Yeah. I just can't I you know, the the GoDaddy,

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

wild stuff.

blogs so much better.

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 I saw a header on an iPhone app that looked like leather.

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

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

PHP extension and turned it on by default so you no longer have to go in. And And if you have a client's website, shorthand for this. So if instead of saying this Scott name, Wes kit, which is going to be your Chrome and your Safari, and you're gonna get the Moz prefixes.

It feels like the future. Also,

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? Let's let's talk about, like, slicing up your PSDs. So you're working on a website. Like, you got the we found a way around it.

having some lunch with Douglas Crockford, and he's trying to push this thing called JSON.

my buddy, Douglas Douglas Crockford, I was over at Yahoo the other day, for, your your,

So JSONP rounded corners in CSS.

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.

now jQuery's dollar dot get JSON Firebug.

for the industry right now, and it's a titan. I don't think it will ever be displaced. But, You can build these these applications. You get those liquid style syntax in the browser. There's data bindings for rapid HTML rendering, 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

Yeah. That's how we talk. Yeah. Yeah. It it all issue code. It's simultaneously I don't even know how I would use any of this stuff. I feel like 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.

this dot person, you simply say at name, and that will compile to yeah. Unreal.

There's arrow functions, Speaking of Chrome, Coupon,

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.

You just pop a variable right inside,

that string,

Yeah. Little dash angle bracket arrow function, I'm in. Sure. It's all indentation based. The at well worth your money. I've been been a big fan of this on cranking out WordPress themes.

the the at

What am I, a robot? Whew. Well, also, coffee down down the TypeScript

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

without reloading the page. And the way that you can do that is with the hash bang. You Node, you have the the pound And the kind of the killer feature to me at Shopify create a Batman j s, which is a, one of the best tablets you can get there.

But my favorite plug in is jQuery BBQ. There's this new sort of, like like, movement in in directly. I got a media temple box 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 but Sifford is definitely

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,

pages that and he's saying, I'm gonna take JavaScript 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.

Running on a BlackBerry, You, you wanna export a a GIF.

It's all over the place right now.

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

new idea of of maybe a future of

Mobile, and it's all HTML

what does it stand for? Hold on. Let me open up a button and query.

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

Wise bud. Bud. Bud.

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, anywhere that there's text, and it's gonna replace it with a a flash embed, I've no. I've been super into the baby, doctor.

your page. JQuery b b q, it stands for going on it the other day. HP touchpad,

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? 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.

Let's talk about

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.

It's gonna be really super great.

script features list here. I I wanna hear this.

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,

I gotta do it.

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?

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.

and it can get a little confusing. So you have a a top five coffee That's really neat.

with my Dreamweaver. Now that said, Wes,

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, I don't know if you got access to this, but they're starting to to send out invites. Yeah. This thing, or, Latest of which, Google Wave.

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,

Batman JS.

Speaking of my templates, WordPress 2.3 was announced. Yep.

RSS support, baby. Hey. If you don't have RSS on your website today, Or there's a newer one called Fancybox. Now I don't know if you've seen these transitions this brand brand new t shirt.

Yeah.

baked right in there.