 Yeah, thanks. That is quite a crowd which is amazing Just a quick show of hands so that I know you as an audience who is here because of the nerdy part And who is here because of the coding standards part of the title? so the nerdy Okay, okay So this will be about does it does not work Okay, if I turn it on turned on it works. So the coding standards um a very shallow introduction So what is a coding standards? What are coding standards? So? basically a coding standard or the coding standards are rules and guidelines made up by someone for now for a program language or some other context It becomes a standard if this rule set has been accepted by a large group of people for example So some terminology we do have coding standards As I said now coding standards are an accepted set of rules What happens if they are not accepted? Well, then you can call them coding conventions It's just rules some people follow them You can make up your own coding conventions and if yeah a lot people think this is cool Then this will eventually become a standard um Coding conventions can be about code style, which is just the formatting so the visual looks of your code It can be about best practices So this is like lots of people tried things in different ways and this has proven to be the best way or one of the best ways It could be conventions about naming. How do you name functions? How do you name classes? How do you name variables? Files, how do you structure your code base and things like that? It could be about commenting. Do you comment or not because your code is self-explanatory. What do you comment? Is it Just yeah, the technical part is it really documentation and things like that and lots of other things so Who defines code coding standards? It could be the inventors of a program language. So for example go is a pretty new language It was introduced directly with a side a set of standards It was introduced with certain ways that you write go code for example Go is automatically tested if you do it the way they tell you how to do it It could be some company deciding for rule sets, and then yeah, they're making that standard So for example the Zend framework standards This is specific to that framework, but the company still made it up Could be a community. So for example the WordPress coding standards are a group effort of the WordPress community But actually it could be any large enough group So if you have a large enough fraction of a group in some context could be even I don't know a specific tool in one language in one technology Techfield so that could exist a coding standard just for that Now Now when you see there is something one of the questions is why is it there? And why should I care so why use coding standards? The most obvious thing is if you have something that follows standards It's easier to understand so in code code is written. You can read it more easily Why is that because it's consistent? so you have rules to follow and Yeah, if everyone who is involved in Developing the project and continuing the project and adding things follows the same set of rules then the code base is consistent Another thing is because you can easily understand that you can easily maintain it like there is a bug It's way less time spent on trying to figure out what you're reading if you're reading in the right part of your code base Or whatever because you just understand it every file is following the same set of rules is made up in a similar fashion So you really spend your time chasing down a problem finding the root of a problem the cause of a problem There are also standards in the term in terms of security So if you follow security standards your code becomes secure or more secure and also consistency and readability and Secureness and all these quality things of course. Yeah improve the overall code quality There is the same rules I meant to be broken I don't think this is right because because you can understand it like some people just make up rules So that other people can break them and will break them I think it's more like rules are there and if you make something a rule and you follow want to follow a rule It makes total sense But there should be room for exceptions. So one funny aside I'm living in a flat in a house in a house block that is all maintained by one property management Company and we have a caretaker and we have a garage under the houses and Yeah, so the caretaker one one day came to me and yeah Talk to me. So, you know, you have stuff on your parking lot and this is this is not allowed I have to warn you and you have to move it away And if not, I have to find you and so on and I was thinking about what is he talking about? And yeah, I went down with him and had a look had a look at him. So are you serious? What's the reason? Yeah, you have stuff here if a fire breaks out It could burn and so on and this was what was on the parking lot So there was this rule there has to be nothing but vehicles on the parking lot and which is not true for a six pack of water, but I Don't think this will catch fire or so, but yeah Okay, so we had coding standards in general now the context of the switch to wordpress Are there wordpress related WordPress specific coding standards? Yes, they are They live on make what was a dog? What are they about so we have php coding standards because most of the code base is php Even though we have Calypso Gutenberg and things like that php is the base of the wordpress code the software Of course, we also have JavaScript. So they are JavaScript specific coding standards Then they're still HTML because wordpress is yeah used to serve web sites Or web pages and then of course we style or web pages We have CSS specific things and also the the handbook lists accessibility Coding standards. I don't think the structure also putting these things in there as a coding standard is right Because they somehow relates to HTML other standards here relate to JavaScript They all make total sense But it's not really a standard to follow in that terms because the other things are like the standard in one Programming language or web technology, but of course they are standards And maybe it's it's it had been done this way to make more people aware of these specific things Which might be overlooked in one tiny thing as a in the HTML site or so The php coding standards, what do they include? So for example one rule of the standard is in wordpress We have to use tabs and not spaces We use else if and not else space if or We space things No, and we use underscores for example. Here's a code example Then we have JavaScript coding standard. So we Don't want to have space at the end of lines and which also means in blank lines We quote our strings in single quotes and We space things out. So we have white space around arguments around Array keys and our object keys and so on HTML coding standards. So we have HTML text. We have attributes names and they all has to have to be written in lower case always quote attributes or If we have self-closing text we Do as we put a space in here, which is follow the mantra space things out CSS coding standards. We have attribute selectors And we have quotes around values in like if you have input type whatever you have to quote that Properties we have a colon and then a space and things like that. So some of them are Formatting like the style code style specific some of them are Naming conventions some of them are just best practices for whatever reason. It's not always Justified why you should do this sometimes. It's just obvious sometimes It's just a decision and you could have done it differently and now we made this decision we follow them So we have consistent code Okay, so how do you get started? One easy thing to do is This who here knows about the editor config project of fire Wow, okay. No nobody one two, okay What is it? So basically if you have a project somewhere you can put in this file so file with a dot editor config file name and Inside you have Yeah, you can use one or more of a certain set of Rules or attributes or properties and you define for your editor or your IDE How certain things should be treated saved and whatever so Basically, this can be used with different Edisos and ideas some of them just understand it out of the box for others. There are plugins and maybe If you are using some whatever custom-made IDE or so you have to integrate it yourself so what Do we have so this is the full set of the Properties that's every IDE and editor currently out there understands So what you can do is you can say my indent style is space or is tap My indent size is for spaces So if you visually have your tap it should be for spaces if you use spaces then one indenting means for spaces Your end of line your char set you utf-8 and so on and then there's also the max line length Which is not understood by all of the editors currently This is an example editor config file The root true here means just I don't care about any other Files that you might find here in my project. This is the root. So don't bubble up and try to find something else In Brackets you have either a white card or just a string of a file name or a white card or a Pattern or whatever for and fine names and after that you have the property definitions So basically this means whatever file you have We use tabs the end of line is linux style and so on and later on you can specify different fine names or patterns again and either redo or redefine things that you defined before or Define them because yeah, it's just it just makes sense for this. So for example Jason files or the RC, which is a config file is lint RC for example or yaml files We don't indent with a tap. We use spaces and we use two spaces to indent them so in this case the indent style gets over with it was defined here as a tap and the indent size was not defined at all or Yeah, it was not and then and we have markdown files Markdown, yeah trailing spaces are needed if you want to do a simple line break without a paragraph Skip between so we don't want to trim white space on markdown files a Second thing that you can use is if you happen to use git as your versioning system for your code base You can make use of a file named git attributes git attributes is mainly about configuring or Yeah defining some kind of configuration some attributes for paths on This means just folders or files in your project, but there are Certain things that you can do which yeah have a relation or are actually part of coding standards. So How this works is again you have a pattern the first one says whatever it is I Want to treat it as a text file and then the line ending should be a linux style and then you can specify Okay, but if I happen to have JPEG or PNG files, they are binary files and then also I just included here other things so the export ignore for example Just to show there are other things that you can put in a git attributes file and to make sure if you understand Hey, this is the file I should use then maybe it makes sense to not just define the git attributes file But also inside it tell git. Hey, this is not of use to anyone who's downloading the zip file for example It's just for the development version Okay, now we come to the major part of the tools here So PHP code sniffer PHP code sniffer is a tool It's a command line tool that detects violations of the coding standards that you feed them the feed the tool Actually, it's not only working for PHP, but also for JavaScript and CSS But in the workplace context, we only using it for PHP and in my opinion, it's the most Natural thing to do because this is how it started and in my opinion There are far better tools for either JavaScript or CSS or Zas or whatever This is the main coding standards related to tool for WordPress or for PHP and The coach never understands certain set of standards So a standard as we had before is a collection of predefined rules And they are built in standards. So if you just download or however You want to take it and the things so you can clone the git repository or whatever So if you somehow manage to get the code sniffer tool, you already have some standards For example the peer standards. You have psr2. You have a Zen specific thing So this is what the Zen framework follows and some more Then there are WordPress standards There is one global God standards that basically gives you everything that's there and then there are more finer Granular things and then these things are just being used by the WordPress global standard So there are standards just for WordPress core then there is a standard for the WordPress VIP. So There go into account things like what happens if you have an enterprise high traffic large site multi-site network, whatever Specific security related things and so on and there are others for example, there is one for documentation and things like that And there are other there are lots of Codes of a standard but other standards that's in my opinion make use for our context here One is the PHP compatibility. This has been mentioned. I think once yesterday at the contributor day once today at the GDPR talk maybe There is a security related PHP PHP specific not WordPress specific standard or set of rules There is a neutron standard, which is currently new. It's by and it's created and maintained by automatic This is if you happen to write PHP 7 and beyond code. There are specific rules in there And much more so This is a very simple rule set file. So it's an XML file You define your rule set give it a name and then you can do lots of things in there So in this example, I include some file paths. So it's for a plugin So I have a source folder and I want to target everything inside there And then also I have an index PHP file because I just yeah, it's just my plug-in main plug-in file It could also be WooCommerce PHP whatever and I have an uninstalled PHP file and then I reference to rule sets The PHP compatibility and the whole WordPress thing Of course, you have to install them as dependencies of your project and then you can use them You can also include or exclude specific things. You don't have to include the whole rule set the whole standard So what you can do here is I take the WordPress standard, but I don't want the VIP This is easier for me than including the WordPress core the WordPress documentation the WordPress best practices the WordPress style or whatever Just telling hey give me everything except for the VIP part. I don't need it. I don't want it Or I can import the naming conventions valid hook name Entity it's a sniff specific thing and I can customize it So for example the built-in configuration says hey, you can only use alpha numeric characters and the Underscore so this is how WordPress says how your action and filter so the hook names have to look But what if I want to have a dot in there like I have my awesome plug-in dot and then the action name I can configure PHP Code sniffer to understand and accept that so I just say okay I take the sniff, but I want to also allow the dots as an as a word delimiter What you can also do oh this is a bit George and what you can also do is At the bottom your reference a local file So this is the rule set that we saw before so I just take whatever I have in there And then I am configure additional things. So for example, I want to cash when I use this rule set the result So PHP CS tries to see if there were any changes on the files Since the last one if not you just get served the cash result And also I want to specify some command line arguments like I want to have the full report This is just one of the available reports I want to have the full report and store it in report full txt I want to have the source specific report and I want to have a summary like I found 42 and security specific violations and I found 20 style specific violations and so on How to use it? It's a command line to you. So you use it on a command line But you can also not only use it locally, but on your CI if you have continuous integration server Travis or a circle CI or whatever You can use for reporting which is just checking for violations the PHP CS command But there's also some nice thing. It's auto-fixing. So the project itself does not only have a single binary the PHP CS But it also has the PHP. I think it's code beautifier binary which For a certain amount of the code snips is able to automatically fix them So if you have the rule set, hey, I want to have some spaces around my array keys This is a simple thing if there are no spaces or if there maybe are three spaces before the key This tool can fix that You can easily integrate this into your IDE so PHP storm for example, I'm sure Adam and sublime I don't know are able to somehow interact with that So you don't have to use it from the command line, but make make use of it in the user interface of your IDE What if you want to select or disable things here? So you have the standards and you don't want to exclude a rule completely But for specific files or for specific parts in your files, you can do that with comments So you have the PHP CS ignore, which means just the next line will not be checked You can disable the the tool so as soon as this commands or this comment gets Yeah, the as soon as the tool reads this command It doesn't report anything until the file ends or until you find the enable command again And you can just say hey ignore this file Which basically means it's shorter than disable at the top and don't enable or whatever But you can also pass either standard names or sniffs So I can say I want to ignore in the next line This is only the whole WordPress related sniffs or I want to disable just the CSRF specific sniffs as I said, we don't have only PHP We also have JavaScript and for JavaScript. There was JS hint. There was JS lint There was JS CS and yeah the future and for at least two years or so is ES lint ES lint is quite similar to PHP CS for the JavaScript Ecosystem so it's a linting utility so it Statically analyzes your code and tells you if it's it here's to your standards or not It understands JavaScript, but also JSX which is some new syntax Which was introduced with react It's highly configurable so you can configure the whole tool You can can configure certain things you can configure some parts of the tool via the command line So with flags and so on And it also comes with optional autofix capabilities The rules that are available so so this is the Set of categories for rules that come with the tool itself So you have possible errors you have best practices and so on and you can decide what categories you want to use And what individual rules you want to use This is a possible configuration file. This is a JSON file So you have some configuration at the top then you have some plugins maybe a plugins extend the functionality It could mean and they introduce new rules. It could mean they introduce new processing capabilities like Generating the outputs or something else and then you have the rules so in this example I'm importing I'm using the import plugin and I'm using the eek eek eek, which is the triple equal sign comparison And so my rule set only consists of two rules one built in in ES lint And one comes with this import plugin that I'm using So how do you use this ES lint is also a command line tool? So you just call ES lint it has lots of arguments that you can yeah Just use certain things or just run it on certain files or whatever And if you want to make it autofix The make use of its autofix functionality then you have to specify that so by default it just lints it just reports and tells you hey, this is what I found or nothing and And similar to phpcs you can disable certain things It's looking pretty similar. So you have ES lint disable you have enable you have disable for that line Which means either if it's put in the same line, then it's for the next line I think or it's really you have to put in the end of the line okay, here are I'm dedicated for next line and line and Similar to phpcs you cannot only disable the tool, but disable certain rules, which yeah Sometimes might be useful or you have to For wordpress there is a configuration So it is based on some of the things that are available in ES lint And so they the maintainers of this config Package just they picked what makes sense and maybe even added things I don't know and so you can just extend the wordpress thing and configure how you want to use it Another thing is prettier Prettier I Think you know if you know prettier you know it from the JavaScript ecosystem But I learned just this week that it can also understand CSS and other formats like jason and I don't know what else so The the project page describes this as an opinionated code formata opinionated here means You cannot configure it that well as other things. It's it's more fitting to wordpress like decisions and options PHP actually is a work in progress so the prettier project will be in some weeks month Also able to work on PHP files And is it being used in the wordpress contexts? not yet But if you tried that and failed or thought about trying that or so Reach out to these guys on Twitter. So I mean these are just three of Them of who I know who tried that And what's important here is you can use prettier together with ES lint so you can make use of certain things and prettier because it works differently and allows some things that is lent does not and is lint is able to Yeah, do some things out of the box that prettier does not and is lint is highly configurable So everything that none of the tools offers you out of the box you can make Is lint do for you and if you introduce new rules you might as well be able to implement the auto fix functionality So the lessons learned I do hope Coding standards are great if you want to use them just do if you want to adapt or customize them Just do this is what they are for you don't have to take a standard and use it. It's like all or nothing You can take a standard you can combine different standards you can just cherry pick the things that make sense for you and Maybe even yeah come up with your own coding convention And who knows they might become standards in a certain tech field Maybe you heard that there was this largest patch in the history of WordPress last year I don't know when it was October November something like that. So the WordPress coding standards actually did get Applied to the code base a lots of things were able to get auto fixed But there are lots of things that have to be fixed manually So if you have a rainy afternoon, don't know what to do Just run PHP CBF and pick one of the files with Yeah violations and fix that create a patch and uploads lots of people will be happy I think there were three thousand open issues and not issues like open violations Yeah A tiny thing Tied got also mentioned yesterday and today so tight Why is all of this important because now it's not only you who can make use of coding standards and tools that? Yeah, just tell you if you adhere to the standards or maybe automatically fix them now with tight There's some other instance that is doing this on your code So if you happen to have a plug-in or a theme on the WordPress doc directory Currently I'm mature. I think currently they get only checked for PHP compatibility But I'm sure in the near future They will also get checked against the WordPress best practices and so on and maybe even they will report the authors Like send an email. Hey, we found this and so on so if you don't know about this Maybe you know now so what you can do is Make Make use of the tools on your own or if you don't want to do this But you are following some kind of standards just create or try to create the standard file Because then tight will use that and it just makes it doesn't make sense if you decide. Hey, I want to do things these This way and then tight would tell you yeah, but you're doing things wrong because if you put a Configuration file in there then tight reads it and says okay This is what you want your code to look like and it does look like that If it does not find anything it falls back to the WordPress coding standards and yeah, you can just prevent that This was it from my side if you have any questions just ask me now or find me later Maybe at the TV or wherever Thank you for your Check Yeah So the question was yeah, the question was and there are ways to Disable certain things both for ESLint the JavaScript linter and PHP CS the pH the PHP specific one The question is where to look it up and how to use that so for the build in rules both for ESLint and pH PCF the original documentation The documentations are awesome. They are extensive They both come with lots of practical examples are not just text. So you have tiny Things addressed as text or explained as text and then addressed in some config example or code example It happens So it depends on what you want to enable or disable is it something built in then you find that in the official documentation So you will of course find the command or the technique like its ESLint dash disabled something like that And if you want to target a specific rule or sniff or code or so you have to know what this is For PHP code sniffer PHP CS you can pass I think it is S as an argument. So if you call PHP CS dash s it will include the error code So the name of the sniff in all of the reports. So then you know, okay, I want to disable this for ESLint I don't know But the official documentation is really great. Well, thank you very much for your talk. It was a pleasure