 Okay, so first of all before I get started. I just want to I think they're around here somewhere I just want to thank Scott gel type Parker and all the members of the jQuery mobile team Because they have an awesome product and they're pretty much the reason why I'm here So I'd like to give them a round of applause So basically what we're going to be covering during this session are three main things and one sort of like extra little tidbit Custom icons custom themes and custom plug-ins and then a little bit of efficiency and workflow So it's a lot. This is technically 50 minutes worth of material So we might have a little bit left over at the a little bit extra time and if we do it's fine I have all the material available and so anything that I'm not able to cover you can download it And so just in case since we're gonna be doing quite a lot. We have a safe word So in case it gets to be a little bit too much All right, so while we're going anyone that wants to download my files you can get them here I probably wouldn't recommend it on our Wi-Fi, but I have tweeted it. I wrote a blog post earlier with this link and You can grab it. Don't forget to tweet. It's a pound jq con And yeah, there's only one thing that we're is gonna be off limits during this session and So I think you might be able to guess what that is We're not gonna talk about semicolons. That's not what we're about All right a little bit about me. I like to do this part quick. So I'm a published author. I'm very proud of that I'm co-author of jQuery mobile web development essentials with Ray Camden in the back over there and I am chapter leader of the jQuery mobile cookbook that's gonna be coming out Probably later this year. I guess in the fall. Maybe I don't know you guys know when Spring So it's on a Riley. It's coming out later. I Blog Andy Matthews net I write about all sorts of things jQuery mobile jQuery Anything that strikes my fancy You might have seen this picture if you follow me on Twitter I've threatened to walk around with a sort of like orange little Construction paper behind me to make it easier for people to recognize me So I have code I've done a whole bunch of stuff for jQuery mobile plug-ins Autocomplete plug-in a tiny sort plug-in a couple of themes and then a jQuery mobile boilerplate and finally a Twitter bootstrap thing Those are some pretty popular ones and There's my github account and then this is my family obligatory and finally I want to mention. I'm from Nashville Where's Adam? Yeah, when I moved to Nashville, I thought everyone was gonna be wearing cowboy boots and big ten gallon hats It's not actually we have a lot of cool stuff So and actually a really big booming tech scene for what it's worth and we don't have income tax Don't throw that out there For those of you that actually like to keep your own money. All right, so real quick for those of you That want to actually go out and watch the game Here's a real quick Overview of jQuery mobile and then you can decide if you want to stick around or not It's a it's a touch-optimized web framework Smartphones and tablets. It's got graded browser support and basically what that means is They've got about 80 devices that they test for with varying day varying levels of browsers and versions And they assign a B or C depending on the browser's capability a being the most capable It can do all the sorts of things and then see being you know stuff. That's not very good But the good thing is because it's all html every browser can use it. They just might not get all the bells and whistles It's got UI URL routing It's got theming. It's built on html 5 It has a set of five themes and swatches built in with 22 icons It was released in 2010 it's when I started using it and the current version is one point one point zero And I think one point one point one is coming out like this weekend. Maybe or maybe today. I haven't checked it so In a nutshell, here's how you include it in your site. You actually have Two files three for excuse me three files including jQuery They have a CDN version, but I'm leaving that off just for space. There's a CSS file jQuery and then the jQuery mobile see a JS file There's an alternate way of including it and that's if you want to build your own custom theme, which we'll be covering in a minute The first one is the structure CSS and what that it does is just gives you the basics It's just sort of like the the dimensions the padding the margin and then you provide the extras Colors background colors that sort of thing And then the rest of the same And basically what it does is it lets you take your site from looking like this, which is you know It's ugly, but it's got content What I did is I just did a really quick version of the jQuery Conference website you can see all the schedule and there's people and all sorts of things. There's Rebecca You guys enjoy Rebecca's presentation, by the way. She did a great job, right? So the cool thing is you can go from this and just with the inclusion of those files You get something that looks like this I won't go through all of it, but when you click into the schedule for whoop click into the schedule For example, you get something that looks like this. All right, that's literally with just including jQuery two JavaScript files and the CSS file Yes, sorry about that. I was that better Some of this Apparently not. Oh, there we go. That's it. Let's reload that Okay, all of it's not like this is the screenshots So and finally, there's a website called jqm gallery that actually allows user submissions and basically people can say hey check out My cool jQuery mobile website and so you can kind of get at a glance all of the different options that people have available to them Okay, so real quick Let's take a look who here has ever used jQuery mobile at all. Oh Wow, that's awesome. Okay. I'm glad that you guys prepared for my session. Thank you very much All right, so I'm gonna assume that most people have some familiarity which it looks like you guys do about at least half of you So we're gonna skip this part real quick and we're gonna go straight into custom icons now Like I said jQuery mobile ships by default with 22 sets of 22 icons There's some pretty good ones really common stars and reverses and grids and that sort of thing But back in February. I was thinking to myself Really needs to be more icons. I was building a website for for my work And I needed some extra stuff and so I decided let's go ahead and make some extra ones So I added there's 55 icons. I believe Yeah, something like that So I added a whole bunch extra and then back in April. I found out about font awesome You guys have ever heard of that Twitter bootstraps font awesome. It's really cool. So I decided let's go ahead and make font awesome Part of jQuery mobile icon pack. So and if I remember correct, let's see I've got like a hover here. It's like something like 240 icons And the new version that I just released about a week ago Actually packages up all of the original jQuery icons along with the icon pack and font awesome So it's available for download. All right. So let's talk about creating your own icon I can wager that I'm probably gonna be the only person here that actually has screenshots of Photoshop So, you know, that's why I started off as a designer. That's kind of my my wheelhouse Except for maybe Doug All right, come on. All right. So real quick. There's two ways to one main way to make your icons So you start off a Photoshop the default icon size for jQuery mobile is 18 pixels. That's the display size So what you want to do is you make an icon at 36 pixels square and we'll cover that in a second Can you guys hear me okay with just this? All right, okay good. I wasn't sure if it was picking up there You want to make it transparent and then basically what you're gonna do is I Like to put a border around it that kind of gives my my available Available space and that's like don't go outside that and it'll display fine. All right So I put a little guy a set of guides and I colorize it This actually is when you download the zip file. It'll include this Photoshop document. Okay All right, so when I import my icon depends it doesn't really matter what icon it is One thing you need to watch out for which we'll cover in a second is Photoshop does what's called sub pixel rendering And basically what that is is You can see kind of see the fuzzy edge here on the top and the dark black on the bottom Everything between that is like a partial pixel and it can actually make your icons look a little bit fuzzy So basically what you want to do is go in with a selection tool make sure it lines up to a whole pixel and Your icons will look a much better when you want to export it take it into a safer web Make sure you choose PNG 24 The default icons are actually PNG 8, but that's alias and 256 colors It's not really good enough. I'm pretty sure they did it for file size But we can do a lot better as far as quality goes you get a little bit better anti aliasing and then of course Your colors can be a little bit richer if you want to choose choose colors So a couple things to remember when you're doing icon custom icons is the simpler the icon the better Remember your logo that might look great on your business card or on the side of your awesome van May not look so great at 18 pixels So just make sure you remember that when you do your best you try to work with vector shapes basically vector shapes is Anything you do with illustrator or that sort of thing And imported into Photoshop And then like I said sub pixel rendering really sucks I probably spent ten years working with Photoshop before I actually realized that was happening And when you actually have to work work images for the web and for iOS Which is the retina display and for iPad 3 you sort of get used to fixing sub pixel rendering because it's really Noticable on the iPhone 4 and iPad 3 so Here's how you add your icons Standard I'm not even gonna cover this. I'm just gonna show it because in case you need it You basically want to set it as a background and you give it an RGB a value that allows you to set transparency on the shape And Here's the really important part. This is what a lot of people forget If you've ever seen a website on an iPhone 4 and iPad 3 Basically, what you have is really low quality icon or really low quality image and Hold on a second This fixes that if you remember I said that the basic icon is 18 pixel square Well when you make it 36 pixels and you tell it to be a background size of 18 px Basically what that does is the browser takes that image and it squashes it down since it's double size already It's actually going to display at 18 pixels nice and crisp on a retina display Probably not so much on the new Mac books, but I haven't had a chance to play with one of those and Then this is what you get so assuming that we have this icon down here little jQuery logo hat So obviously can't see the retina display on my MacBook, but that's it Okay. All right custom themes who here has ever actually built their own theme really Fantastic. All right So real quick, we're gonna cover the visual building blocks of jQuery mobile There are lots of them But the four that I really want to focus on and I think the ones that really make jQuery mobile stand out and make it just so stunning Are these four so border radius? We all know about that and I do want to point out they actually use Vendor prefixes and they take care of that for you. I'm not including that just for brevity But should you need to do that that is something you'll need to take care of yourself So you can actually apply a border radius You can apply a linear gradient or radio gradient. Should you care? You can apply box shadows and that's around the outside border and Then finally you can apply drop shadows to text text shadow. Okay again Like I said, I'm leaving off the vendor prefixes But these are some of the things that help jQuery mobile's styles make it stand out and make it look really stunning As far as the UI framework goes jQuery mobile What they do is they namespace everything So if you look at the CSS for jQuery mobile, what you'll see is dot UI Dash something. Okay, so it might be dot UI dash button dot UI dash bar and then they Append the theme name so it might be Dot UI dash bar dash a and that is the a swatch that is included in either the default theme or your theme So they namespace everything helps keep everything tidy and it makes it really easy to see What's going on? They actually have everything in bite-sized pieces. So rather than having a style Rather than having a style that is, you know, 20 or 30 pieces 20 or 30 definitions what they have is maybe three or four sometimes just one And what it does is it allows them to attach different Different themes in multiple places and it doesn't have to override other parts And so like I said, then they take those and they stack them on top of each other so Example is a button. It's pretty simple, right? It can't get much easier than this button But the button itself and this is just the shape just the shape of the button This is not counting the text inside it has this style that style That style and that style so those four styles Individually make up that button and that's what gives it the shadow the definition the rounded corners in the background color so If you've ever worked with jQuery mobile, you'll know that the the built-in themes are really awesome. They look great And in these three these are I believe this is either D C or D I can never remember which one is the B in the middle and then the last one is E When you just define that on the body the children will inherit from the parent So if you just define the theme on the body tag the rest of this the rest of the page will inherit the yellow theme for example So so this themes are great and when I started using jQuery mobile, I was like that's awesome I was really excited. So I'm like great my son No figure. All right, so I was really excited and then I realized wait a second So if I have access to a bcd and e that means everybody else does and so what am I gonna do about that? Wasn't a big fan, but luckily With the 1.0 release of jQuery mobile. They came out with Theme roller has anyone ever used theme roller for jQuery UI before oh Okay, excellent has anyone ever used theme roller for jQuery mobile Just a couple of hands. I was really hoping that you would say that. So let's go ahead and flip over we're gonna launch this and jQuery mobile is up on GitHub and you can download it and you can render on your local machine. I have MAMP running which is really awesome tool and Okay, so let's reload it and this is what you get it's really slick looking tool It actually looks like an app, which I really like. I'm a big fan of them and I think Tyler Benziger I don't think he's here, but John Bender. I don't know John. Did you work on it? theme roller No, okay anyway So Tyler Benziger. I think is one of the main guys of this and they did a really great job Let's do okay. Can you guys see the top part of yeah? Okay? You see it fine Okay, so real quick. We're gonna spend a few minutes looking at theme roller kind of show you how to use it What it's about and what it can do for you, which actually it's it's got a lot Okay, so when you when you come into theme roller the first thing that they say Let's reload this here. It's if I can get that up in the middle. Oh Much better. Okay. So the first thing it says it's got some helpful tips Don't ignore this because there's actually something that's really important. Okay? We recommend building themes with at least three swatches. They took my advice because they didn't have that to begin with and Basically what was happening is people were creating just one theme. I only want one theme, right? That's that's I just want this one. So I want to be able to apply everything. I'm gonna make my colors and everything Except the process the problem is when you define your theme a JQuery mobile has contrast right so the buttons are one color based on one theme But then they use the button colors from like the C theme and the a theme and all these swatches and so what ends up happening is you'll have your theme and The the the header bar will look great and the body will look great, but the buttons will be nothing There won't be anything there and so if you decide to make one make three themes. It's pretty important Okay, and you can actually have zero a through Z. That's how they define things by letter Okay, so real quick. You've got a global setting which is this lets you define sort of like fonts active colors when you when you highlight over a Button when you click it the downstate. That's your active color Corner radiuses and everything and those are things that should apply To every theme and then you have an a tab B and C and those correspond to these swatches right here. So this set. This is a And then I can say I can come in here and I can look at the header and footer bar. I can look at the content What color my buttons should be when I press them etc. Okay? So the problem is you don't really know what these are supposed to be necessarily you wouldn't even know that they're there to look for One thing you need to know is when you're using theme roller, you can't actually do Everything in theme roller. Okay, it's not like meant for it meant to do everything. You can't assign background images for example You can't easily assign transparency into Into colors for example like with it with the drop shadow etc So some of you have to do that yourself, but what they do give you is this inspector So when you click it inspectors on and when you come over here, it works just like Developer tools right hover over and tells you which item you're going to be interacting with So if I want to select that it'll jump me straight to that exit that section I can go ahead and I can change. These are the things that theme roller will let me change Built into the tool. I have an undo and I redo For those people that have theme roller from a previous version. You can actually import you can create themes Based on previous versions, which is kind of nice for those people that haven't upgraded yet Then you can take your theme you can download it you can import it and There's something over here. There we go. Oh Yeah, so you can share it which is nice So assuming that you have a client that you're working with or maybe a developer a lot of people I know we're working remote So you want to you want to collaborate? So you're gonna work You're gonna work on your theme and you're gonna send it off so you're gonna share it Click the share button. All right, so that gives you a link That gives you a link that'll that'll be good for 30 days. All right. You send it to your co-worker He makes some tweaks Sends it back you make some tweaks into backs. It's great collaboration, right? It's not in real-time, but it's pretty close And it's nice You can also send it to your client when you're done. It's sort of thing. Whoop and So then there's also a help center. All right They also have swatches. They use Adobe cooler. Does anyone are using that for any of their design elements anyone? Okay, a couple people. It's a pretty cool tool Bummed that it doesn't actually have like a real API. That would be pretty slick. You'd be able to create it Apparently the wireless is not great here But basically what it is when you expand that it'll give you Like five or six swatches that you can then page through and you'd be like, okay I want those colors from that swatch and you can import them You can take any of this Drag any swatch directly onto an element changes it right off the bat you can come over here. I Am not pretending to be a designer at this moment. I have designed in the past But I'm not trying to be one right now. You can change the saturation the lightness. It's pretty cool. It's again It's not great. I should say excuse me. It is a great tool, but it's not everything. Okay And also one thing is it kind of gives you the recent colors, which is kind of nice. Oh, man. I changed that one It's right there. Okay, as soon as you assign it, okay So as soon as you're done and click download, you're gonna give it a theme name. All right, so we'll say Again, I'm not gonna try to download this because I'm not convinced that it'll actually Do all the processing and zipping for me on my local machine So but when you're done, you give it the name you download the zip and what it does is it'll actually include An in the actual site was just right Yeah, that's what I figured. Okay So basically what it does is it gives you an index file and that's your sample, right? When you run it in your browser, it's got everything relative and It will show all the links as you as you've designed it It also gives you the code that you can copy and paste into your project Okay One thing that's really important if you decide to use theme roller It's gonna give you two CSS files. It's gonna give you a minified version and it's gonna give you the original full source version Don't delete that file. All right really important There's I don't even know if it's a bug per se or if it's just an intended feature at any point ever You can come back and you can import Your theme okay, so I'm importing a 1.1 point zero or you can import an older theme The problem is it won't import the minified version So if you ever want to make changes in theme roller to your original theme Keep the minified or keep the maximized version the full-source version Usually you'll actually be able to take that copy and paste it right into this box And re-import it and then you can just change Also, one thing that's really nice is if you want to start off with something that's at least there So you don't have to start from scratch jQuery mobile team actually lets you import the default theme We see what that looks like okay, so it's pretty nice And like I said, it's right there If you ever want to add a swatch you can just click here. Let you add it. You can actually delete swatches Or you can duplicate the existing swatch So if I for example if I want to take swatch a which is really nice I want to duplicate that and then down here. It's duplicated now That's swatch F and I could take and I can adjust that I can tweak it based on what I want so all right, let's go ahead and Flip back over to the presentation is basically what that does is that lets you take The original file that I had which was you know, it's fairly nice looking And go from this to this now I won't necessarily say the one on the right is the most awesome But I tried to keep colors from jQuery mobile the the events website So it's got the darker blue the light blue. It's got the yellow blacks. Yeah, and it looks looks decent You know definitely looks better than the one on the left Okay, one of the things that's awesome is people have Extended themes based on this so this is an actual theme. This is not a screenshot if I come over here And I want to do some header buttons So it's an obviously it's an iOS theme and I can interact with that People have done a Windows mobile theme now again They may have started with theme roller to begin with just to make it easy but most likely Most likely they they wrote it probably from scratch so and then this on the far right That's Twitter bootstrap theme that I wrote And it's basically just using Twitter bootstraps colors styles position sizes that sort of thing border raises Okay, custom plugins Who here has ever written a jQuery or jQuery mobile plug-in? That's what I was like up until about three or four months ago Thank you. You kept your hand up a long time. Good job, man. You should be proud of it. All right So yeah, I was just like that a couple months ago because you know, I'm thinking well, there's lots of stuff Why do I need to write my own plug-in? So I Mean seriously come on like, you know, you know, you're like the kid next door Oh, you write a jQuery plug-in. That's right. I'm also speaking at the jQuery conference. That's right Don't throw my paper in the Whatever you have my lawn, you know, all right, so some other reasons. Why would you want to write your own plug-in? I'm actually in the process of rewriting a couple of my own plugins into into the jQuery widget factory Pattern I was talking to Scott Gonzales earlier. He gave me some good advice Write a plug-ins not hard There's lots and lots of options. You guys all know who probably adi Osmani is he's got a website that shows jQuery mobile Or jQuery boilerplate plugins It's overwhelming the ways the possible ways that you can write the plug-in and so you're like, how do I know? Which one is the right one? Scott actually has some interesting words on that. I'll let you talk about it But you know, so the primary reason you would write a plug-in is because you have a need for a plug-in This one kind of does what I want, but it's got like this extra stuff And I could live with it, but I'm gonna take the plunge and I'm gonna write my own plug-in So here's how you might get started with writing a plug-in If you're really cool, and if you're like John Rezeg or like Todd Parker or something or Scott You could probably start with an empty page and just go to town That is not me But how I started was I would take an existing plug-in. So What oh Sorry, so I would take an existing plug-in and I was to be like, okay I'm gonna strip everything out and okay. Here's some I like this. This seems right to me I can work with this or you could use grunt. Has anyone heard of grunt? Couple people, you know, let's try that again. That's awesome tool. Has anyone ever grunt? Yeah, all right It's great. It it's makes things easier And so we're gonna talk about it real quick because that's how I'm that's how I'm starting to write all my plug-ins now This makes it easier. So basically it works on top of node So if you already have node then you're good if not install node and then you do these commands MPM install grunt And that'll get everything set up for you And you might need a dash G So you can install it globally and then you just create a directory, right make directory anywhere. You want to doesn't really matter CD into that directory and then you run a command called grunt init The colon is an argument and it basically says well, what kind of grunt file do you want? I want a jQuery plug-in. I want a grunt task plug-in. I want I think there's like four or five defaults But in our case when jQuery plug-in, okay, so you run that and it'll ask you a whole bunch of questions What version is it? Do you have a github repository? What's the file name? Whole bunch of things. What kind of license do you want and when you're done you get something that looks like this So here's the directory structure. It starts off with grunt.js and that is your essentially your package for grunt And feel free to I think Ben is in here if you're in here feel free to correct me on any of this stuff So that's the package that that defines all your tasks That that grunt can do for you by default for jQuery and those tasks include minification they include linting which checks your syntax they include Concatenation and then what I've been using it for a lot is unit testing so unit testing via Q unit And so what we have is so you get all your grunt tasks and then there's a package to Jason You have some of your license files a read me and they're all boilerplate So you have to go in and change it yourself, but you know Setting up all this stuff might take you 20 or 30 minutes 15 20 minutes It's a time-saver Especially if you're on a large project and you're doing this a dozen or two dozen times You save yourself almost an entire day in 20 minutes so It's really good And actually Let's just go ahead and run through it. So we still got four minutes. Let's run through it I'll just show you how it works One thing that I actually wanted to point out that I promised in my thing is a little bit of Efficiency and workflow you guys all know this guy named Paul Irish I think he did a talk at fluent comp a couple of weeks ago on web development tools for 2013 guy is always thinking ahead And one of the things is talks about is learning your tools using your shell more And so I've really taken it to heart Some of the things he talks about is switching to a different Shell which is Z shell. I won't talk about that, but it's got some some cool stuff to it There's another function that he showed called Z Z and basically what it does is it learns as you change directories the CD command It'll actually learn and kind of keep track of it and the ones that use most commonly It'll actually let you just kind of do that. So instead of going, you know, CD user colon tilde slash desktop Oh, blah blah Z desk. All right, or Z get hub, you know, so anyway And it'll actually do autocomplete to which is nice So you can also do functions and stuff too. So I'm gonna make a directory and we'll call it. Oh, yeah Hold on a second. All right Yeah, that better. Okay. So There we go. So I'm on my desktop. I'm gonna make grunt and let's go ahead and There we go. Okay, so it'll give you your project name now it inherits from the directory So you can just go ahead and change all this stuff It knows my github account already because it's reason it from my from my user account It'll ask you all these questions Yeah, and I actually changed my default some of the stuff as well in the core So, yes, it knows all this stuff No, okay, so here's all the stuff that it did and That's what we have so it's kind of like I said, I already showed you all this stuff But that was what 30 seconds maybe and again, it would have taken me a long time. So that's grunt and Let's come back over here and Show off a couple of plugins. So these are both plugins that I've written one of them is a sorting plug-in Uses a Existing jQuery mobile plug-in called tiny sort and but it's excuse me It uses an existing jQuery plug-in called tiny sort and so I wrote a wrapper Specifically for jQuery mobile it initializes the events it add this header bar You know and it kind of lets you sort everything works just like you would think but it actually builds it and Does it using jQuery mobile stuff? So and that's available on github And then one of the ones that that gets the most traffic is actually a plug-in. I wrote called autocomplete It works just like autocomplete It's probably because it's not running in local host is actually making let's just do this one So anyway works like that Click through it, etc. So that's pretty much it there Okay So here's some resources if you're actually interested to learn a more about jQuery mobile theming that sort of thing It's a couple of guys myself Ray Camden another guy named Christophe Conrats Works for Adobe and he's actually doing a lot of stuff with backbone and jQuery mobile backbone or excuse me jQuery mobile and phone gap Etc So those are all really good resources. There's also a jQuery mobile LinkedIn group. It's all the developers Probably around 13 or 1400 now So that's it