 My name is Karma. I'm a freelance web developer and today I'll talk about coding standards and why they're worth your while. Before I start I would like to ask if there's any freelancers here? Quite a few. Are you using coding standards at all at the moment for your own projects? Yes or no? And everybody else who is not a freelancer, are you using coding standards for your teamwork perhaps? Well, basically that was my understanding of coding standards. Basically they're useful for teamwork especially, but not so much if you're working by yourself. I'm going to talk about what the workers' coding standards say, how to add them to your workflow, and what do you gain by doing so. As a second self-employed, we all know that gives you a lot of flexibility. But also there's a lot of things that you need to think about before our day. And sometimes in that feeling like this, you've got to do your client work, you've got to have enough time to keep up with new technology, you need to have point out for networking, for staying in touch with the community. And basically at the end you end up having to prioritize. And that is what I had done for a long time. I knew what coding standards were, more or less a happy general idea of them, but there are always other more important things I felt I needed to do with my time. Until one day I decided to look into that in more detail, and I found out that my assumption of coding standards mainly useful only for teams was actually not right. And here I just want to tell you what I found out. So let's start from the beginning. Coding standards, what are they? It's not that easy to find a definition online. And the best I could find is this from Wikipedia. Don't try to read it. So two right steps. I've just highlighted the keywords. So coding standards are basically conventions and guidelines to help you lose the quality of your call. By improving the readability and therefore also making it more maintainable. And that is done with recommendations about indentation, white space, naming conventions, but also adding comments to make it to document the code within the code itself and recommending best practices. Okay. Many companies use coding standards and platforms. So these are just some examples. They have published them online and you can find them easily. But because I work mostly with WordPress, then I just decided to go with the WordPress Coding Standards. What do the WordPress Coding Standards say? You can find all the details in the developer handbook or Github. But basically they cover the languages that WordPress uses. All of these PHP, JavaScript, HTML, CSS and accessibility is they're not incorporated into the coding standards, but they're recommended guidelines. I'll give you some examples of each general guidelines. For example, here are examples of how to use indentation. So use dots at the beginning of the line and spaces for alignment in the middle. I know the example would be when you don't space it out. So basically space is nearly everywhere on either side of brackets, either side of negation, conditionals, equals, etc. There are exceptions, but I'm not going to go into that. Just you can find it online. All the other conditions that are quite fun. Basically they call the other conditions because you write it the opposite way that you would say. So you would say if the variable equals five, then do this and that. But with Yoda, you put the value first and then the variable. And that is to avoid if you type in quickly and you're missing an equal or two equals in this case. You may end up changing the value of the variable by mistake. So it's just a best practice. This is a good example for you. What do PHP coding standards say? So naming conventions is an example. So use underscore for variables and functions and use dashes for filenames. And an important one is sanitation and validation. So every input from the front end needs to be validated before being stored into the database and you get things out of the database to show the front end. You need to make sure that they haven't got corrupted in between. These are just some examples. Just checking if the value is an integer, removing any HTML that shouldn't be there. And just checking that the value is an email and removing any characters that shouldn't be there. These are examples. You can find this huge amount of functions and you can find them in the codex. JavaScript. JavaScript again naming conventions. So instead of underscores, we use camel case for variables and functions except constructives. Best practices. All the variables should be correct at the top of the scope. Use three equals the set of two use curly brackets. This sounds a bit old fashioned, but that's what the WordPress coding standards say. There's a lot more HTML and CSS. There's not a lot for them, but it's basically just common sense. You start for indentation to show hierarchy and everything in our case and the CSS just paste the properties one by line and the same with the other ones. Accessibility. As I said, they're not in the coding standards as far as I know, but they're just guidelines that are closely for the common sense to follow. Use amount of HTML for the heading hierarchy and then skip to content links and screen the text for when you have links that are only an image. So these are just a small sample. This seems to be a huge amount to remember, but there's no need to remember any of these because there are tools that help you. And we're going to look at some of them in action now. So here I've got three sample files. One PHP, one JS, and one style sheet. And I've got some errors in them. I just want to show you what comes up. Okay, first of all, we look at the PHP file. This is just taken from the codex. The codex is just a function that will add the style sheet for the child. It's copy and pasted from the codex. And it works, but when we put it through the coding standards, check that. So we've got this PHP codex. It comes up with 10 errors. Okay, so this is what you get. So here you have the line number. Then it tells you what is wrong. And there's some of them that have a clause. If you see here says six marks need violations can be fixed automatically. These are the ones that can be fixed automatically. What type of errors do we have? Okay, if you see the ones that can be fixed automatically are to do with indentation and spacing. Then we've got other things here, like a version not set in the new style. This means new versions of the style will not always be loaded. So it's quite useful because it gives you an idea of what you could change to make it better. So the code works, but if we look at the function that's in line 13, is this with here and queue style. So we have what is the file that we need to enqueue, but we don't have the version. Okay, and that means if there was a new version of the pattern theme, it wouldn't be loaded into the cache when we update it. We may not want that to happen, but at least we now are aware that we could do something better. Okay, if we wanted to fix it. There is another command called PHP called beautifier fixer. Okay, that basically is telling which standard you want to use, which file you want to fix. And if you don't want the file to be overwritten, you add this option here that will create another file. Okay, and it says here, so six errors were fixed. Okay, if we looked at it, we would see that it's basically the limitation on the spaces that have been fixed. Now, the JS, the JS file, I've got this file here. It's just taken from one of these sample interview questions and I've added some extra errors here, just a bit of content that doesn't do anything. The file works is when I say errors, I don't mean errors that will break the file, but errors related to coding standards. So here we see that the file actually works. Okay, it's not a breaking error. It's a coding standard there. If we look at what the coding standard say about these files, 25 errors. Wow. And then spaces, some of the quotes, so must have used single quotes. And then it says here, 22 errors fixable. But it doesn't actually tell us which ones. The TSP coach told us which ones, this one doesn't. So if we wanted to find out exactly which errors could be fixed, we could do a drive run. So basically, we run the same command, but with the drive run option. And these are the ones that couldn't be fixed. So that means that if anything else can be automatically fixed. So if we wanted to, if we were happy with this, then we could do the proper run without just with a dash dash fix. Okay. Right, and now for style CSS. For style CSS, we've got a very simple file. Everything in one line, so that's going to give us some errors. And the command to check that is this one. Again, like the JavaScript one, it gives us the file number and it gives us the description of the error. This one doesn't actually give us account of errors, or if there's any, which can be automatically fixed. So we would have to just go for it with this command. Okay. So basically fixed everything except one. And if we look at it now, basically, the only thing I didn't fix is separate these two into these separate lines. Okay, so, so that's it for the command line. Obviously, this is not very useful. If you write in code from scratch, this will only be useful if you have something that you want to, you're already written and you want to check what it's like. In the case of, if you're writing code from scratch, then you would need to add these tools to the editor. I use atom, but the same will exist for whichever editor you use. Here we can see what it looks like. Every line that has an error will have a red dot. If we hover our mouse on it, it will give us, this is the JS, a message explaining what the error is. And this is very useful. You can just fix one at a time by clicking the fix button. Or if you want to find out more about the error, you click on this link here and opens a website. It gives you an explanation of what the error is, sorry. You just have to take my words for it. Okay. So that, but this is, this is quite useful is, and it's for the JS. The PHP also gives us the dots and it gives us a definition of the error, but it doesn't have the fix option and it doesn't have the link. Okay. So the PHP had some advantages from the console that the JS didn't have. And when we come to the editor, it's the other way around. And the style is, again, remember that we fixed this, but there's still one error. Okay. Again, it gives us a definition, an explanation of what the error is. And then there's no fix button, but there is a link here. You see that again, a link that will give us more information about this error. Okay. So, and here at the bottom as well, there's more explanations about the line number and all of that. So basically, that's the tools that you could, I lost the internet connection and I don't have the slides now. Don't worry. Okay. So, if you wanted to install all of those things for the console, you find instructions. So this is what our views that PHP coach me for ESL and styling and instructions. It takes quite a while. So I've written them on a blog post that you can find online. If you want to add them to your editor, you can use, you can set the configuration for your editor and then install some of these packages. These are the ones I've installed for them. They'll be equivalent ones for, for your editor. This one I haven't demonstrated is to help you comments comments to the functions and the files. And then the instructions. There's a really good blog by Gabor that explains how to install with them in sublime and visual studio for all the editors you find them in the github. Right. So, and obviously, after these, the next logical step would be to add them to task runners or continuous integration. But that would be another talk altogether. In the meantime, you can start using what I've shown you and you will gain a lot. Basically, what I found is this is like having an out of the box code review is just having is having an extra have to say, okay, this is okay. But you could do better by doing this. And by what I found is that by using the coding standards, I've become more conscious of what I write and I it's making my code better. And that hopefully will help me get into more interesting projects that what I'm doing at the moment because I'll be a better developer. And also it will help become future proof. What do I mean by future proof? I don't know if you've heard of type is this new team for the community WordPress community or the WordPress. The make WordPress group of type and basically what they do is the objective is to check every single plugin and theme in the repository against the coding standards. That means that here's an example at the moment they just give you if it's compatible with your current version of PHP. But they also give a score against how that for that the quality of the code for that plugin. So if you're thinking of perhaps one day publishing theme or a plugin to the repository, then this would be quite useful if you're already using the WordPress coding standards. And that's it. That's all I've got. So I would encourage everyone to give it a go if you don't already. I'm doing that through construction noise, flaky Wi-Fi and you don't have to capture. So has anyone got any questions for Carmen? Tom. You mentioned the WordPress PHP coding standards. I know there are several others out there. Is there any in particular you think that would be that you would recommend or would be interesting to look at? The code the WordPress coding standards, the PHP, like an example of what? For example, I know there is the VIP coding set that I know of and I know there's a handful of others in the WordPress one. I'm not sure what the differences between the ones that come with it and I know that other people have built their own coding standards. Yes, I know you can adapt them. I just installed the default. I think the default WordPress includes the VIP and the core WordPress core standards all together from there. It does have an old VIP thing but we don't use that as far as way out. But I know there are some other ones like WordPress section and stuff. Yes, I just use the general one and I think the general one includes all of them. Any other questions? Mark? Two more questions. Since you installed it and started using coding standards, do you plan to get less red dots or are you good? Yes, but what I'm doing as well when I have time is go through my old code and that actually takes me a long time. There's a lot of old files. There's a lot of stuff. The second part of the question is do you know of any way in which you can stop it showing those red dots until you are ready to say please now do your review because that's finished? You can use the comments. You can add the PHP for the PHP. This comment at the top is PHP.js disable at the top and then enable at the end or just disable at the top and it's not going to read the file. And then when you're ready to have the check just remove that comment and that's it. To that you can also have it just run it whenever you're safe. So to show the red dots it just fixes your errors whenever you say it. And the question is is it true that you run the WordPress Meetup in classical? Yes, but I don't know that. How do you deal with minifying code? I don't. How do you tell the clients that you're just not going to do it? Most of my clients are quite small so we're not at that stage yet. So that's partly part of the idea that if I get better at things like this then I can take on bigger projects. You mentioned using continuous integration and things like Travis with these. Do you have any examples or resources of how am I always going to do those things? Maybe in next talk. Thank you, Karey.