 Let's just get started. Welcome to this afternoon's session. I'd like to start this talk by by a simple greetings from our language. Como está? Say it with me. Como está? How are you? So it means in my language, it means how are you? So at least I'll tell you more about myself later or where I'm from. So we're enjoying the work come so far and we appreciate you guys. Thank you for joining us on this event today. So before anything else, I'd like to introduce myself. My name is, my name is Doreb. I am a senior web engineer at a fully distributed company called TenUp. I also help out, I also help out organize speed ups in my hometown in Davao. As we also have like growing WordPress community groups in there. And I'm also trying to support the WordPress user groups in the Philippines. And also I've been partly involved with the global community team of the open source WordPress project. This afternoon, okay, wait, are you ready? So this afternoon I'd like to talk about a very important process in our workflow. That is, that is aside from sleeping. Also, right, sometimes you deploy code. So I'd like to talk about a very important process in our workflow and should be for everyone when shipping and launching secured, clean and perform at WordPress power sites. And this process is called, you guessed it, it's code review. You would probably start asking now, what is the code review and why should you care about code review process? Let's simply look at it this way. Building a WordPress site may run smoothly on a few visits. But what if you have a site or what if you are building a site for enterprise level of sites or sites that gets thousands or millions of visits a day? Maybe sites like CNN or New York Times or TechCrunch or even Vogue, you can name. So this type of sites don't, they cannot afford to go down even for a few seconds. So how are we making sure as their partner in delivering the best experience to their readers that you and other engineers or developers working on a project have written code that can scale and are ready for high traffic situations. That is what code review comes in. And that is the end goal of why it is very important to have a code review process in place before you ship or deploy code. Mario Pesche, CEO of Demerix, it is also an agency that's similar to TANN that builds and maintains large scale WordPress platforms. He made a statement that what makes a $500 project different from a $20,000 code quality? When I read it, I could not agree more to it. I could not agree more to his statement because being a partner to your client, that would mean that we would have to go extra miles to make sure that their business stays online and running, which actually we need extra time and effort and resources as needed. There is no better way to make sure than to check each other's work, okay? But still, why do you code review? And what are you code reviewing on? So there are a couple of factors that you take into consideration when or every time you send your code into your live site. You can't, there are certain cases when you overlook certain pieces of your code to go against these factors. And that's perfectly normal. Like we are human too and we make mistakes, right? So code review is meant to be your backup and allows us to less likely, if not at all, chip unwanted code. So let's start first for security. You code review because you would want to make sure your code is secured. It is very essential to keep the web safe since the web is free. Just like how free it is to everyone, some people are also free to use web for their evil doings. We have some preventive measures on your site. These type of sites would be the easy prey for these hackers and their nefarious activities. As a way to, for example, verify that each new code that you push to your site would it cost or doesn't put your site at risk? You would want to check if data are sanitized, output or escape, data gets validated correctly, nonces are in place, and you pay extra attention to areas where you could possibly do SQL injections. Oh wait, actually, I just gave you the whole summary of what to look for when you think about security. Okay, so let me back up and let's start with sanitizing and speaking your data. That's the first item there. So during your review, you would check if inputs, these are the data that you take in from the users, they should be sanitized and outputs, these are all the data that you would display back to the browser or to your client browser, they should all escape. WordPress provides a number of APIs. Depends on the type of data that you are trying to sanitize or escape, such as sanitize text field for your regular text field needs and sanitize email for email. While we have my very favorite one, escape HTML for generally removing extra special characters from a string before you display it to the browser. And you have escape URL in the escape section, you have escape URL that you can use to sort of escape whatever unnecessary characters that you would expect to have in that URL string. During code review, during code review, I would also flag code that I haven't validated. In cases where, for example, we need to call, we gotta make sure that the data that we supply to the WPMAid call is actually indeed an email. So WordPress has this function is underscore email that you can use to validate that. Use it, then done. The good old PHP, such as in the list below, the good old PHP has a number of validation functions too, such as ESET, MT, in array or cap. We are not in short supply of these validation helpers, so feel free to use them. As a rule of thumb, it is very much preferable to over validate than to under validate. So move on to the next. Okay, so I see a form or an action that would allow a user to process a certain piece of code that you are introducing. Well, I would go straight into looking what would be the necessary requirements to allow them to process the action. My friend, if you don't have a nonce in there, I would not let that code deploy because nonce would basically be a security guard in order for something to pass you, then you have to have something that would allow you the request. So in the WordPress language, I'm not sure if you can see that clearly, but in the WordPress language, you use WP nonce field or WP create nonce. So I'll go back here. So that's the WP nonce field and the WP create nonce. So these are the API that you can use that will generate a token. And then the other one is WP verify nonce. That is the API, or that is what you can use to verify the token. That generated from the two API above. So in my example here, I'm not sure if you can see this. So it's not readable enough, sorry guys, but. So for example, the above example is an unsafe way of like processing something which doesn't have like a checkpoint. And then here I've highlighted in red, there is a WP verifying nonce. So meaning, if you don't get the token or the pass, then the whole thing here, so the whole thing is gonna be skipped. So you don't allow this right here to be processed. It feels here. So I call this area here, the security guard. So if you don't have the token, if you don't have the pass, then you have no right to pass, to go or to enter, right? So that would be an extra layer of security in your code. And lastly, we pay extra attention to when things get into our database. So WPDB prepare would be a very useful matter when there's a need to run a custom database query. And yes, so I, screenshot, okay, go ahead. One, two, three, four, five, okay, good. But don't worry. So info about security, data sanitization and escaping and validation. And they are very much available in WordPress.org, theme security handbook. It says theme there, but this also applies to plugin development. So I'll give you the link later as well as the slide, the copy of the slide. Next, performance. You code your view because you care about performance. So you code your view because you would want to make sure your code is designed with performance in mind. Is your code optimized enough to endure and could scale when your site hits the busiest time of the day? If not, I would take a step back and fly out the affected code. I would start checking if you are using any un-cached functions or requesting un-cached queries. Keep an eye for these several functions. Get posts, term exists, get page by title, and especially the last one, current user posts, as I've experienced that firsthand how it could really hurt your site. If you spot them in the code, these functions should not go un-cached. So if you really need to use them, make sure you cache them in your code. So the next request, it would just pull the copy from the cache. All right, so, I hope you can see this one. How do you know, how do you know they are cached? Well, if you spec the source code of the API, you can see that, for example, the get page by title is running a database query that git underscore bar, git underscore bar is basically going to run a SQL command. So meaning that whenever you get page by title, it's going to request directly to your database. And that is not scalable, my friend. So another thing to look is if you're running more queries than what you need for. In case of a new WP query instance, bypassing some queries, such as sending no found rows to true, yeah, no found rows to true, that would skip the queries that basically run to calculate the pagination. And setting the update post meta cache and update post turn cache to false would basically skip priming the cache of the term and the meta of a certain post. Those themes, although they look small, but they would go a long way when it comes to thinking about the performance of your site. And yep, I wouldn't let you get away with that request from a third party API without a cache in place. Certainly not under my watch. And lastly, so where we've gone through the security of readability. The code review because you would want to make sure that code is formatted in a way that engineers and developers would able to understand it. And engineers that will inherit a project would be able to carry on without much friction. Making it developer friendly as we is making you're basically for the use of space over tabs or not keeping your markup balance with PHP blocks. Okay, I know you feel me too when I say that who would want to work on with a code page like this? Okay, I can create a crazy number of hours for me to read that. What if you have very much documented, right? So this is the good thing about the core is because this is an example from core, so. So that feeling when you have this kind of existing project, and it's so easy to understand. Rather than this project, it will take me a day just to maybe understand a few lines of code. This one, okay, sorry, this is really small, but this one right here are comments of the API and then some arguments down below, but they are structured and formatted in a way that's very readable from a developer's perspective. Thankfully we have many generous people from the community who put together coding standards that we can all agree on. This is our own version of a Pixel Perfect code base. So imagine if we don't have coding standard in place in WordPress, it's likely that people would contribute more in core. So, how do you code review? I mean, what can you use and in what ways? So there's two ways in how we can do code review. The first one, automatic, as in one T and manual with other tools, PHP code sniffer is very popular out there for automating this process. PHP code sniffer, so anyone familiar with PHP code sniffer? We help detect violation of a defined set of coding standards and good news, there's even a collection of PHP code sniffer standards for WordPress. So you can download and read the doc in GitHub repo and it's open source, as always. So yeah, I'll give you the link as well later. A trend you can see, but it's just WordPress coding standards. WordPress coding standards, if you search that, Google will lead you the way. So when running PHP code sniffer with WordPress standard, okay, I'm gonna run this, this is a video. All right, so this is an example. So when running PHP code sniffer with WordPress standards, it scans the code, cache common security issues like missing input sanitization, output escaping, missing nonce checkpoints, et cetera. And actually, even validating that everything's well documented, for example, you miss use tags or you miss a couple of tags. So in the example I see here, there are issues like expected one space before closing a bracket. So it's also some sort of formatting issues. So processing form data without nonce verification and there's the line, as you see to the left, far left of that, there's the line of the code. So you can inspect and go and find a file and do the desired changes. Okay, you can also leverage continuous integrations or known as CI that could run PHP code sniffer in the background or any custom script or however you are connected it, so long as it allows you to automate the process of code reviewing. WP enforcer uses PHP code sniffer too, but it's more of like a plug-in. Another way is manual review, but most of the time you would want an automatic plus manual combo code review set up because in that way that would be very, very effective. So there are tools that would allow you to conveniently code review or review the code changes such as we have GitHub, we have GitLab, Bitstock and Bitbucket, who have used this or have been using GitLab, GitHub, Bitbucket. What are other tools you're using in your workflow or in code reviewing if you guys have already used? GitLab, okay, perfect. We also use GitLab, okay. High five. Okay, so for instance, it has this very beautiful UI and it allows you to comment on the line of code wherein you can provide feedback or even suggest a better way that's more in line with the voice of code review. For example, I spot a user input and then you process that and then store it in database. But you didn't have any standardization in place. Then I would point the, for example, I would point the line of code, then there would be a pop up on that that will allow you to drop comments. I'm not sure if you can see it here, no. That review is also known as peer code reviewing as it goes in two ways. Review code that either, number two, when your team and the best thing is your master's. There is no better and fastest way to grow than to learn from your past mistakes and you'll learn and you'll have tons of experience about this in the code review phase. And of course, you can definitely do self-review as well. And if you're using Git, I know a lot of speakers are talking about Git and I hope Git, which I think the case, that would make it even more easier for you to self-code review. So we have source tree, I use source tree, I have source tree too in my working machine, as well as GitHub for desktop. Or you can install a deep purifier if you're using sublambtext editor. So even in our WordPress ecosystem, code review plays a very vital role in keeping us safe and healthy platform for everyone. Worker standards, what process goes into reviewing at the end, if you did, there will be a replay at the WordPress.tv. So as standards philosophy goes, we should not take shortcuts that compromise the end experience for the user. That being said, we have to make sure we review our code and that we follow as an engineer on the site, we follow the WordPress coding standards and the engineering best practices that the community have helped curate over the years. So here, the TANAP has an engineering best practices and we always check the code against these practices and make sure that the new changes follows whatever is in here along with the WordPress coding standards. We are well on our way to dominate the web. Actually, we are 33% of what you see in the internet. Let's help build web to be a better place to making sure we ship well engineered code and doing that is to make code review part of your engineer's DNA or developer DNA or better yet, our team culture. Thank you very much.