Skip to main content
750

April 1st, 2024 × #jQuery#Mobile#WordPress#JavaScript

New CSS and JavaScript You Should Be Using

Scott and Wes discuss the latest web development news in 2010 including jQuery 1.2, mobile apps with HTML5, custom fonts, rounded corner CSS, Node.js, WordPress 2.3 and more.

or
Topic 0 00:00

Transcript

Scott Tolinski

Welcome to Syntax.

Scott Tolinski

This is the podcast for webmasters.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

but it logs them

Scott Tolinski

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

Wes Bos

And Firebug.

Scott Tolinski

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

Wes Bos

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.

Topic 1 02:46

jQuery getJSON and JSONP for cross domain AJAX requests

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Topic 2 03:45

JSON format gaining popularity over XML

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

Pretty sweet stuff.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Wes Bos

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.

Scott Tolinski

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

Wes Bos

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.

Topic 3 06:26

jQuery BBQ plugin for changing URL hash without reloading

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

Wise bud. Bud. Bud.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

Running on a BlackBerry, Curve. No problem.

Topic 4 08:29

HTML5 and jQuery Mobile for cross platform mobile apps

Wes Bos

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

Scott Tolinski

Yeah.

Scott Tolinski

That's really neat.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

And I looked at the same thing. Designs.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

Beautiful.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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?

Wes Bos

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.

Wes Bos

You, you wanna export a a GIF.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Oh, nice. Yeah.

Scott Tolinski

Love that.

Scott Tolinski

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

Topic 5 12:35

Cufon and sIFR for custom web fonts

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

Yes. Gonna save me so much time.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Topic 6 15:15

Chrome rounding corners support and CSS3 prefixes

Scott Tolinski

It's gonna be really super great.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Topic 7 17:14

CoffeeScript features like string interpolation and splats

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Topic 8 18:50

Ryan Dahl's Node.js for JS on the server

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

No.

Scott Tolinski

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

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Topic 9 20:12

Shopify's Batman.js framework for JS MVC apps

Wes Bos

Batman JS.

Scott Tolinski

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.

Scott Tolinski

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

Topic 10 20:49

WordPress 2.3 adds RSS and tags support

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

clear a float.

Scott Tolinski

Alright.

Scott Tolinski

That's it for this episode.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

Latest of which, Google Wave.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

You can check out my Zanga at s Tolinski.

Wes Bos

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

Wes Bos

April fools.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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.

Share