 How's everybody? We're winding down almost everything. All right, so we have Cory Webb. He is a senior post-doc developer at Reactive Studios from Waco, Texas. And before joining the Reactive team, he was a web developer specializing in WordPress and Do-One. And he'll be talking about coding standards. All right, thanks. I'm a very loud voice, so I'm glad to have this. My voice is not normally this deep either, so I feel like I'm going to be able to work so hopefully I can make it through. So like she said, my name's Cory Webb. I'm going to talk about how your code states and WPCS can help. Hopefully. So who is this guy? Who am I? Like she said, my name's Cory Webb. I'm a senior post-doc developer at Reactive Studios. We do mostly WordPress stuff. We're a VIP partner, so we do a lot of, we deploy a lot of sites and apps to WordPress.com VIP service. I am a, I described myself to someone yesterday as a recovering Jumo developer. That's not fair, because I still love Jumo. I just don't do as much other lately. There's just not as much Jumo work you all around. So I do almost exclusively WordPress stuff these days. So I kind of had to make that, I've done WordPress stuff forever, but I kind of made the transition over the last couple of years to doing all this whole time, and now pretty much exclusively WordPress stuff. I did write a Jumo book back in the day. It was published in 2009. It's called Beginning Jumo Website Development. So if you're interested in learning about Jumo, don't go get this book, because it's way out of date. It's not very good. So that was kind of one of those things where I kind of stumbled by, and we got lucky, and you know, I've probably looked at some people like, oh, this guy knows nobody's talking about it, but the reality is I don't. I just kind of got lucky, and he said, okay, you know, I wrote a book about Jumo for us. So, and then last but not least, I am a pitcher on my slow pitch softball team. So you could say I'm kind of a big deal. There's proof. So what am I talking about? First, I want to try to convince you that your code stinks and kind of explain some reasons, some common reasons why your code stinks. And if I'm offending you, I apologize. Maybe your code doesn't stink. Maybe I'm reaching out to the wire here. But in general, let's just assume that it stinks. And then we'll talk about some WordPress coding standards. What that means. We're going to talk to you some more, some more modern ones. And then we'll talk about why it matters. Why is this important? Who cares, right? Who cares about coding standards? It works, right? And then finally, I'm going to go through using phpcs and wpcs to help your code stink less. So that's the idea. So who in here writes code on a pretty regular basis? That's right, okay. Who thinks that it goes pretty good? It's okay. Yeah, well, I mean, you know, we all think our code is pretty good. It works, right? I can help with some pretty cool solutions. But the reality is, you know, if we're not adhering to coding standards, then it's really not that great. And I'll try to explain why. So there's a few reasons, a few common things that we fall into. So one, our code is ugly, it's hard to read. Another one, we don't have any comments, right? That annoys me so much. When I work with somebody's code, there's no comments. Like, comment, explain what your code does within the code. Confusing or inconsistent naming conventions, that's a common issue. We ignore internationalization, so do I know what that means? Do I not know what that means? So internationalization means there's a way within WordPress where you can make strains of text translatable. So that's internationalization. So instead of putting a hard coding of strain into your code, you put in an internationalization tag. I'll show you that a little bit later. And then finally, no escaping of outputs. That's like for day validation to make sure that nothing the fairest gets through and gets output onto your system. So that's another common issue. So this is some ugly code. I took this from the undersourced thing and kind of tweaked it to make it a little ugly. The undersourced thing is not ugly, it's really ugly. This is really ugly. It's hard to read. If you can read that, good for you. I find it really difficult to read. There's no comments, so it just looks like a bunch of gobbling. It's confusing or inconsistent naming conventions. GH, what is that, right? It's Githedra, by the way. You see GH, you go, what does that mean? So I don't know the computer understands it, but I don't as the person reading the code. Ignore internationalization. So echo hello world, right? Well, that's what it's going to say every time regardless of the language of the end user because I haven't bothered to put it into a method that'll translate it. And then no escape. So I say my text equals get my text, right? And that's just some function, oh yeah. And then echo my text. Well, how do I know that something bad didn't get into that variable through that function, right? Yes, I wrote that, but it might not be the one that's managing the code a year from now, right? So someone else might do something. So we want to make sure that we deal with that value that data before we put it out to the end user. So one way to deal with this is really WordPress coding standards. And so these are just some of the common ones or some of the ones that I want to point out. It's not an exhaustive list of coding standards. And this is more looking at the PHP coding standards for WordPress. There's also HTML and JavaScript standards as well. But we'll look at PHP today. It's the same with double quotes, indentation, braces, PHP tags, using spaces. Also, Damian conventions, Yoda conditions, this is my favorite. So coming from Jua and the WordPress, this is one of those like, what? Yoda conditions, what? Okay, I get it. I understand that. I actually appreciate it. I know, but at first I didn't quite get that. Readability or cleverness or brevity, internationalization and invalidation. I was looking at some of those. It's a single and double quote. So the idea is you want to use single quotes and double quotes where they're appropriate. You shouldn't ever have to escape a quote within your string or within your code. You should just switch them wherever you need to, right? So if you're going to be using variables within it, then use double quotes around the string. If you're going to use, if you're not, then use single quotes. It's just a small thing. It's just one of those things. Inventation. So in WordPress, you might know what we use here. Tabs or spaces, right? Tabs, right? In WordPress we use tabs. The idea is let's all be consistent. Use tabs. Make sure that it has a logical flow as well. So make sure you tab. I think if you're within a control structure, you want to have multiple tabs. So a tab for the div and then another couple tabs to get inside the estate back. Another thing I'll point out is how we wind up all our equal signs. So we'll put extra spaces after the variables of the equal signs line up. That just makes it a little bit more readable. So if you're looking, if you've got a set of places where you're setting variables back, back, back, back, back, the standard is to line up those equal signs like that. Another thing is if you're doing something within like an array, a social array, you want to do a similar thing. That's a coding standard. So braces. So the use of braces. So you don't have to. I put in correct. This is correct in PHP. You can do this without braces. But the idea is we want to make this more readable to the next guy, the next person that is managing the code. So let's just go ahead and put braces there. That's what I know what I'm saying. PHP tags. How we use PHP tags. So here's an example of a correct way to do it. The PHP tag, the closing tag should be on its own line. And then we, here we put the opening PHP tag and closing PHP tag on their own lines. Also, I think we don't use the short, shorthand version. So just the, just the question mark needed to put the actual old PHP there. You can do the PHP tag within the same line. If it's something like within a, if it's supposed to be within one line then that makes sense. Then that's okay. Here's an example of incorrect usage where we, at the end of our, we close the PHP tag, we put some HTML in there, and then open the PHP tag and close the if statement on the same line. Now, this is one that kind of annoyed me a little bit at first and kind of started to try to hear these coding standards. It's like, well, why does that, I don't know, I don't care. Ultimately, if you look at this in the context of a bigger PHP file, this is infinitely more readable than this, right? And so you're going to hear me say that we're readable a lot today because that's really the main thing. We're going to be able to space it. Now this is something that WordPress does that frankly, I don't know what it does. Does anybody know? My boss is both good. They're both good? No, they're both good. Okay, so the idea is if you look after the parentheses, you've got a space between the parentheses and the variable. And then second thing before the end of the if, you've got another space, right? It takes some getting used to if you're new to developing for WordPress because from what I've seen, nobody else does this, right? Now that I've been doing WordPress for a while and I go back to other things, I'm like I can't not do this. I put the spaces everywhere, right? Any kind of control structure, so within a for loop, again, you've got the spaces there in your functions, you've got the spaces. If you're calling a function, again, you've got the spaces there. One place where we don't do it and somebody can explain this to me is within, if you're setting within an array if you're calling a specific item within an associate array, you don't put the spaces there. If you've got the name like this, if it's a variable, like a dollar sign variable, you do put the spaces there, but if it's like this, you don't. Someone explain that to me? I don't know. So you're saying they don't do it Right, so let's pretend this is some array and you've got the bracket here, bracket here, this would be an array and you've got to have no space right there, right? But if it was like a dollar sign variable then you do put the spaces. I always put the spaces. I always put the rows for readability, that's all I think of. Right, but you're wrong. It's frustrating because it doesn't make any sense but that's just the rule. I think one reason why they don't put the spaces after the premises is it's specifically stated in the standard PSR to not put that space but I think that's one of the dumb things in the PSR because the spaces are good or bad it's just the preface. Right, well just to be clear WordPress does not adhere to PSR strictly, I mean WordPress is kind of a sub-beast which we however do respect the web. So naming conventions, this is correct, you've got the underscore so in all lower case you can put underscore into words, so that's correct. These are some incorrect options so no underscore you've got like the capitalization or capitalization but with the underscore or all caps that's incorrect, that's not according to the WordPress code that's incorrect. Here's another one, so this is I put the file name here but the file name standard is class and then dash and then the name of the class in the file name so in this case the name of the class is class name but there's no underscore you put a dash there so you do class, class-name and then the class name you do use uppercase you don't use lower case for the class name so uppercase, underscore, uppercase And you're making a distinction between php and other languages this is php, yeah because like the camel case would be correct for javascript even for the WordPress standard right, right, right, yeah, yeah, yeah we're not talking in javascript, we're talking in php sure, yeah and again, all these standards are laid out on the WordPress codex so you can see more detail you can double check make sure they're not telling you the wrong stuff because that's certainly possible right, now I just made you worry Yoda conditions, so Yoda when Yoda speaks, he says things backwards he's like you know the force so normally this is what I would normally do I would say if some variable equals some value, true, right well Yoda conditions say you put the value first so you say if true equals some variable there's a lot of reasons for that one of the reasons which I think makes sense is like if you're kind of in a hurry you put this and then put one equal sign there which you hasn't done that, right I mean that what you're actually doing is you're setting that variable equal to that, whatever the value is so in this case, if you do it this way you're not going to do that your code's going to break you away but it's just better practice another thing I'll point out is using strict comparisons so instead of just double equals you use triple equals that's not listed here, but that is a standard as well and that just makes you it's just a better practice anyway to use strict comparisons so readability over cleverness or brevity so again, this is correct within PHP like you can do this but it's not as readable you don't necessarily see kind of what the logic is there as opposed to just a normal conditional that's more readable than this that one's more readable than this one so that's why this is part of our standard is that let's make it more readable as opposed to making it more just clever or brevity internationalization so WordPress has a number of functions the main one it's got this double underscore that's an internationalization function and so what you do is you put the text that you want to be translatable and then this is the text domain so generally the text domain is going to be like the slug of your plugin that you're building and the slug of your theme that you're building so that's the text domain so that's how that works so on the top echo in the world that's incorrect you don't do that what you want to do is you take the HTML out of it and then put the internationalization on the string so data validation this is huge how many of you guys do this regularly this is part of your part of your flow part of how you code you always should do this and it's even things that you kind of feel like well why don't you escape that it's stupid it's not going to be a big deal the idea behind that is yes you're the one managing the code today but here for now some other developer will be managing the code and you don't know what kind of vulnerabilities they might introduce in your code and so by doing this you're making sure that whatever gets output to the end user is escaped first you can get rid of any kind of tags or jump script or anything that might be added maliciously you can get rid of that before it gets sent to the end user so it's just a security thing and the same thing so on top right echo with some variable that's incorrect escape html so that's strips out all the tags and gets rid of the html makes it safer for the end user there's another one so we have escape url it's for urls there's another one it's escape attr for attributes so within your anchor tag for example you do title equals something you do escape attribute instead of escape html for that so why does this matter hopefully I've convinced you already but let's talk a little bit about why it matters so again Mark Fowler said any fool can write code that a computer can understand but good programmers write code that humans can understand okay who agrees with that who doesn't agree with that right so that's kind of a mindset right the ultimate idea is you want the computer to be able to do what you want it to do that's the goal but like he's saying anybody can do that anybody that knows how to code can do that good programmers write code so that the next person that's going to manage your code doesn't curse your name by how awful your code is to read and understand that's not exactly what he said so why does it matter so readability we write code for humans and not for computers again if you've ever picked up code that someone else wrote that you have to now manage and you see there's no comments so it's like they've got this wacky function that does something really interesting and cool but it's broken and I gotta fix it I have no idea what the intention of why did you do this in your code I don't know because there's no comments or it's hard to read for the reasons we talked about consistency if we all use the same standards it's easier to collaborate we all know kind of what to look for we know what the code ultimately is going to look like if we're all using these same standards if I have a quality this is something you may or may not agree with me on this one I don't know but coding standards force you to put more thought and care into your code resulting in better quality and what I mean by that is when you're new to coding and you kind of get into this mindset like I'm gonna fix it I'm gonna just throw some code here it's unorganized, it's hard to read it's hard to understand but it worked and I made it work it's hard for you to maintain that code it's hard for everybody else to maintain that code and you haven't really put a lot of thought into it so when you take time put careful thought into the coding standards put careful thought into other developers who might be looking at this code it makes you a better coder it makes you put more quality into the code they're all in this so far so let's look at PHPCS and WPCS so I'm gonna talk a little bit about what these are and then we'll look at some example how to make this work so WPCS so the CS stands for code snippet does the same for coding standards PHP code snippet is a cool it's a command line tool that this is directly from their you know it it tokenizes PHP, JavaScript and CSS files and detects violations of a defined set of coding standards now it kind of comes with its own defined set of coding standards it doesn't come with WordPress coding standards and this is the link to the and I'm gonna make these slides available to you guys later so you know let's start to worry about how we can stuff down you can take a picture of them and you can go take a picture of them so that's what WPCS comes in right so WPCS stands for WordPress Coding Standards but specifically with this what I'm talking about here it's a set of rules or SNFs that help enforce WordPress coding standards so basically if you've already forgotten all the standards we talked about earlier which I wouldn't blame you if you have it's okay don't worry about it because there's a tool that kind of helps police that for you that's what we're talking about today so this is the link to the GitHub page for the WPCS coding standards so we'll go a little demo and I put up a stinky code repository if I'm getting it out if you want to grab that later so let me let me get out of here so here's my stinky code it looks pretty bad I went ahead and it's a GH I'm gonna get ahead of so this is actually the actual code from the undershore thing but it's pretty much all the same code I just made it really hard to read and so the first thing that you want to do I'm going to assume that you have a composer installed and this won't work but you've got to have a composer so the first thing you want to do in our file, or in our project is add a composer file composer.js so for those who aren't familiar with composers composers is a tool of HP that there's a place on the internet that has all these packages including any of your PHP projects and the composer basically you define the dependencies that you have for those PHP libraries and the composer will install those for you so down here in our composer.js file we've included this PHP code snipper installer we've included PHP code snipper and then finally we've included WPCS and so what that does is that the installer will actually that will actually install our WPCS within this installs WPCS but this is what tells code snipper hey WPCS is there it might still be available for us so once it's available we go into our command line everybody see that we're down at the bottom there so we go into our command line I'm in that folder I'm in my project folder and you see all these errors and I got a bunch of them I really messed up this code so it's found 42 errors affecting 5 lines of code so that's really bad your code better not be this bad so you'll notice the first line there's little brackets on every one and this says error that says error sometimes we'll say warning so there's some things that are errors and some things that are warnings that you may or may not want to fix the errors you definitely want to fix so the first one within the brackets there's not an X then the rest of them have an X so you might know what that means so with PHP code snipper there's another tool called PHP code beautifier and what that'll do is that'll actually fix it's beautiful but the first one it doesn't have an X in there that's about what that can be fixed on so we have to fix that for ourselves so the first one says there's a missing file .comment so I'm at the top of our file we need to have a comment that kind of talks about what this file is it's hard to type with my hand the .comment follows this pattern you've got the slash asterisk and then each line has its own asterisk so we'll just call it stinky code that satisfies that will satisfy PHP CS let's say that I'm going to run this command again so now we look up at the top now there's missing package tag in the file comment there's more things than we need to add but that's good because you're not thinking about these things this thing keeps you honest it helps you realize I forgot this I forgot that so if we have a package tag oh we did it no more non-automatic errors the fixer not coming so now for the rest of these what we can do is we can take a one by one so let me do one of them so I'll do this first from space after opening control structure so this first call over here that tells you the line of code that the error is on so we're on line 10 and we've got a lot of errors on line 10 so we go to line 10 so we need a space after that space after the open control structure so we need a space there's all sorts of things on line 10 so let me say that and let's see what happens so there's a lot of errors here right we can be here all day going through fixing these things one by one so instead of doing that we're just coming down here we have a phpcvf so we just have to make it ran phpcvf space, any code so now this fix it for us it said a total of 30 higher errors were fixed in one file so let's run out our phpcs again actually let's look at our file I didn't do any of this it did this for me fix it all out of the code so if I go back here in phpcs again I don't see any errors anymore do you see any errors? we're good so it's fixed there are some other issues here right we're going to want to kind of clean this up maybe add some invitation and things like that to make the code flow a little better but ultimately we fixed all the major issues so we can rest easy knowing that our code is adhering to the WordPress code standards the next thing I want to show you though besides that who uses sublime text do I use sublime text? I use sublime text I'm going to show you sublime whatever IDE you use I'm sure it has something similar to this but I've installed sublime literature on my sublime text so here so if we go here sublime text sublime literature, sublime settings right now I've got set out to work with phpcs but I've got it in manual lit mode so if I take that line off of the settings you have to restart what you change the settings so once I change the settings now look at it can you all see that? that's hard to see though, that's with the red so you see these dots over here on this column that tells me that that line has problems now if I go to the command line I have issues I just know that sublime literature tells me also I don't even see it but like some of these things have a line around them that's pointing out specific areas where I have issues so sublime literature is a great tool you can have to install the sublime literature package and you also have to install the sublime literature phpcs package and make sure that you have the phpcs rules installed for that as well so if we go back and look at the settings you see I've got my standard as wordpress-vip right there's different types of wordpress standards so if you're working if you're submitting code to vip for example and have a whole other set of standards that's a little bit more straight to the end just to standard the normal wordpress standards you have to set up the lens on save to verify on save you don't have it set up to do that I mean it's right now since it's in background mode it's showing me this anyway right it's showing me this