 안녕 여러분은 너무 좋은 시간을 보냈으면 좋겠습니다. 그리고 오늘 저희가 오늘 첫번째 월드캄 타이페인에 함께 오신 것을 감사드립니다. 그리고 저희는 아스파이크, A&M 스태프가 이 일을 만들고 있습니다. 그래서 이 시간에 이 공연에 대해 배워볼 수 있습니다. 웹사이트에서 공연을 할 때, 그럼 당신은 완벽히 동네에 있는 것입니다 그런데 이 오후부터 제 주식을 시작하도록 하겠습니다 제 이름은 주야끼따몬입니다 제가 기사의 랩디니엘입니다 이 기사의 랩디니엘입니다 이 기사의 랩디니엘입니다 그리고 우리의 기사의 랩디니엘입니다 이 기사의 랩디니엘입니다 그리고 여러 시스템의 필리핀 시스템이 있습니다. 또한 저는 글로벌 커뮤니티팀의 오픈소스 월드프레스 프로젝트입니다. 스펙팅의 오픈소스, 웹이 오픈이 되어있습니다. 오픈의 의미는 무엇일까요? 웹이 오픈 플랫폼이 있습니다. 웹이 오픈 Incredible의 오픈 소ف이 그리고 다음날의 지지에 따라서 세계관계를 통해 웹사이전기의 공간에 웹사이의 가장 높은 요구를 방지하는 수 of the WordPress 나왔던 Gento의 Juma 2017년 웹사이전기 웹사이의 웹사이전기 웹사이의 웹사이전기 웹사이의 워크가 코어, or the packages that come through the CMS is actually just your canvas, especially in the WordFest. You, as webmasters and web developers, will ultimately engineer your sites and make them better for the best experience of your intended users. Who among here have just started their WordFest journey? Like, just started Commando. Oh, really? Okay. Welcome to WordFest. It is a common scenario that, as you jump into a known or acclimated platform, for example, if you are new to creating WordFest or site with WordFest, we take examples and inspirations online, also because we like to get things done quickly, aka the shortcut method. Sadly, these are not following the standard practices. They may solve your specific problem, but are poorly executed, which you will likely encounter on critical issues along the way. Look at careers that go through boards and license exams. Do you know why it is important to hire licensed engineers when constructing a building? You might have guessed the answer, but simply because they do have the required knowledge and background, the standard practices, when it comes to making a quality and safe foundation. Although in the web, you don't need to be licensed. Okay, I was thinking, and then no, okay, that's fine. So although in the web, you don't need to be licensed, but through attending events such as like this, and mixed with a good amount of experience, you are gradually acquiring the necessary knowledge that is actually similar to a license practitioner. Today, we did go through some key practices as we tried to engineer our next websites, maybe for a company, for someone, or even for personal use. Alright, let's start right in. So as cliche as it may sound, it is very essential to keep the web safe. As an engineer or webmaster, we ought to take securities seriously. Since the web is free, there are also some people that are free to use the web for their device activities. Without some preventive measures on your site, they are going to be the easy prey of these hackers and their hard-earned securities on your site. The common but often neglected way, the often neglected way of securing or harding your worker's site is to ensure that you sanitize the inputs. These are the data that you take in from the users and escape outputs, which are the data to display back to your client or to the user's browser. WordPress itself provides several APIs to help harden the security of your site. Most commonly used among them is we have sanitize text fields, very popular for sanitizing input text fields. We have sanitize key and sanitize emails among a bunch of other helpers. For escaping outputs, we have a rule of thumb to late escape everything. There are a bunch of helpful functions that start with ESC underscore, such as the all-time favorite escape underscore html for your regular escaping html needs. So it's going to strip off special characters before it outputs to the browser. And then we have an escape URL for URLs, and then an escape ATDR for escaping data that you'd like to show in the elements or tags. Here's an example. So here's an example of use case, a very simple use case. It is trying to store, in the above example, non-static data from the global post variable sanitized by sanitized text fields highlighted. And the other one below is we're trying to display a metadata to the browser escape by escape html. So if you get stuck, or if you want to check if there's an API for your particular case, make sure to check out and review these helpers in our WordPress covenants for the developer resources page. It's always, actually it's always been there, and this brought to us by our amazing documentation team in the community. Okay, so when it comes to dealing form submissions, and preventing CSRF, or the cross-side request for free, there's another security layer in WordPress that is called NUNS. In WordPress, NUNS is a cryptographic token tied in a specific action user and window of time of the request. Two main WordPress APIs is that you would need here. The WPNUNS field and the WPVERIFYNUNS. So the WPNUNS field is only takes in the action name and an optional input field name, while the WPVERIFYNUNS below, exactly below, is going to validate the request actions. So it checks out and goes through the process. If not, it's just going to skip the whole process. Another factor to making your site prone to attacks is when you have too many plugins. Note that with plugins, you are at the mercy of the plugin authors. So whether they code their plugin with security in mind or not, maybe out of your control. But indeed, plugin is something that's very vital in the WordPress ecosystem. Especially when you're launching sites on time and on budget. So only install plugins that are actually necessary and use your best judgment whether it is efficient to just custom code or bring in another plugin. A good measure as well is to keep a list of plugins that you or your colleague or a company have already reviewed and approved. Also lastly, I could not stress out for everyone to always on the latest and greatest version of your plugins. Especially the core of your WordPress. Form of attacks are evolving. Updates, especially security releases and maintenance releases are made available to patch vulnerabilities and remediate bugs. Well, you are not alone in this battle. Don't worry about that. Among a bunch of tools out there, one that sticks out to me. To help us develop a more secure website is this tool called HP Code Sniffer. Who already, who heard of HP Code Sniffer? Who already used HP Code Sniffer here in the room? And number one, who else? Okay, great. So HP Code Sniffer helped attacks violations of a defined set of coding standards. Which brings us to the WordPress Coding Standards Rulesets. So, how do I play this? Maybe I'll just skip it. Okay, there you go. So the WordPress Coding Standards contains rulesets to skill typing. So that's the command for the P3CS. So the WordPress Coding Standards contains rulesets to validate code developed particularly with WordPress. Such as escaping before outputting non-static data and adding non-suggestions. Alright, let's look at the performance of a WordPress website. Your website or a client's site may run smoothly on a few visits. But what if you are building for an enterprise level site or site that gets thousands or billions of visits a day? Well, there are a number of strategies and best practices that we must employ as engineers to ensure that the code is optimized for high traffic situations. The most common among the practices is to add a layer of caching. caching is the act of storing computed data is somewhere much accessible for later use. This could likely be in memory of your server because it is way more faster to retrieve data from that storage or from that area. In WordPress, object cache is the main API for caching data. It is not persistent by default, but with the use of technologies like NAMCache or Redis, you can do so. Tractions API, on the other hand, is another simple caching API available in WordPress. It allows you to store data in the options table of your database. But be mindful of using this Tractions API. Be mindful of using the Tractions API because it easily gets the size of your options table and you can easily get it out of hand. When it comes to performance, it is one of our roles to assess which data you only need for your current request. For every WP query instance, by default, it has several queries. But most of the time, you wouldn't need those extra queries, for example, like pagination or updating term metacaches. In those cases, there are some arguments that you can set to basically bypass a few executions. Such as setting no found roles to true. That's going to skip the query for calculating pagination. And then the update post metacache and update post term cache. If you're going to set that default, it's going to skip the execution for priming meta and term term caches. So when is the best time to cache data? As much as possible, you should cache it. But it's a must-cases when we are trying to generate expensive database queries. And also when we are doing remote or third-party requests. Here's an illustration of what a huge difference it makes when you have a site with no cache and the object cache. So notice that the number of select queries and the overall database query time drastically dropped with the object cache in place. Another aspect of the web bearing its openness philosophy is its capability to be served over different mediums. As well as accounting for people in different ways of consuming the web. Web accessibility is the practice of making your website usable to buy as many people as possible. We commonly associate accessibility with disabilities where in fact it benefits other groups such as those on mobile devices as well as those with slow networks. Accessibility begins in writing clean and semantic markup. This practice allows elements with a clearly defined meaning to both the browser and to your developers. Elements like header, nav, vooder, or article do a much better job in explaining the content that is contained within the element than just using spans or divs. But I know sometimes making complex UI controls that involve enzymatic HTML and dynamic JavaScript updated content can be quite difficult. Especially now that in the right, especially now that we have this single page application or applied website trend. So this is the better reason they created this area or the accessible reach internet application. area, or area, area, a-r-i-a is an technology that could help with such problems by adding in further semantics or set of attributes to a web content that essentially browsers and assistive technology can recognize and use to let users know what's going on. Signing some examples, here's a very popular area hidden state which is very common. It also is used to hide elements to assistive technologies. You might want to consider hiding elements from them which are used for computing and contain no-wheel content. Landmarks are used to aid the understanding of content structure of users through the use of role attributes. For example, role is equal to banner and you attach that to your element or tag. It's no secret that responsive web design is one practice to make your site accessible in whatever device your users may be coming from. That includes mobile responsiveness. The mobile first design gained tremendous attention when reports showed more and more people are using their mobile phones when consuming the web. Google had erased this new era and started rolling out this new search engine algorithm to enable mobile first indexing. This means it will use the mobile version of your site for indexing and ranking on search results. There are a whole bunch of tools as well that will support you in your journey to making your site accessible. I personally use Chrome Lighthouse for this and for other purposes like site audit. And a whole bunch of others like P, accessibility for terminal, ECI, developers or co-accessibility or co-wallet. Library with a collection of components from Tenna built with simplicity and security in mind. Where in you simplicity and accessibility in mind. Where in you can also use this to leverage your personal or client projects. One thing you can differentiate a well engineered site from the rest is its built with maintainability in mind. It may sound like a waste of time but a simple proper indentation, dot block in every function or class and inline commenting would make a huge difference to other developers who you are collaborating with in your project. This offers even a huge amount of value when you are creating a distributed web projects or applications. Writing a variable code is not actually a bottleneck on your workflow. It will rather speed up the development time when other engineers on more than a project or when the project transitions to another team or developers. And really, practices are fairly simple like the use of tabs over spaces or keeping your mark up to position nicely with PHP blocks. In your editor, in the editor of your choice, you can look into integrating PHP code snipper with the WordPress coding standards to help validate the syntax of your code as you write them. It could flag errors of using spaces instead of tabs and the structure of your blocks and among others. Variable code and the rest of these practices are being in place to encourage and empower collaboration. Again, you can find many great resources in our codex. Head over to WordPress.org, Coding Standards, or Better yet Visit Developer, the WordPress.org for handbooks and guidelines about making themes and plugins with WordPress. Again, I'd like to thank our documentation team in our community for coming up and working on with these docs. There's also an exhausted list of best practices curated by TANUP with the help of different contributors and contributions from our community. This is an open source project so everyone can 100% contribute to this project. As you can see, there's a whole bunch of best practices here covering from the mark up down to JavaScript tools and your project structure. I can also share a slide later. And then, knowing all of these basic practices, you can apply them as you work towards making a performance site. This is one way to show to your visitor how much you value their time. A secured site means they are safe with you and you are someone worthy of their trust. As the web welcomes everyone, so should your site by making it correctly to different users regardless of their capacity to use the web. And lastly, as you work towards making a web a better place, everyone has a role to take part in keeping the web accessible and safe. So be open and be collaborative. Okay, thanks everyone. I'm Q&A time. Andrew, great talk. I'm not too familiar with PHP Code Sniffer. Can you tell us if that all it does is best practices for security? Is that what it looks for? Or is it also a style guide for keeping your code readable? First question is about PHP Code Sniffer. And the second question is there's a style guide to make your code readable, right? And the other question is... Does Code Sniffer do both of those things? Does it watch out for the style of the code and security? Got it. Not out of the box. PHP Code Sniffer comes with a standard PSR rule set. And then there's a WordPress coding standard rule set that you have to set when you're trying to apply or... when you're trying to validate your WordPress sites with the standard against the best practices of the WordPress coding standards. So basically out of the box, PHP Code Sniffer doesn't come with... If you're violating the spaces we're tapping, right? So it doesn't come out of the back of the box. But it comes with the WordPress coding standard rule sets. So these two are separate projects. So you can check PHP Code Sniffer first. You have to install that first. And then go check out WordPress coding standard rule sets as well. It's an open source project. So you can search that. You can have a repost story for that. So WordPress coding standards will check those violations for the formatting and the missing maps and all of that. I hope that answers your questions. But if not, we can talk outside. Thank you. Thank you. Does anyone have questions? I have a lot of time. I finished around 26 minutes. So I'd be happy to answer any questions. Maybe my age or... Next question. Don't worry, it'll be nice. So the Code Sniffer, PHP Sniffer, let's say PHP-CBA from whatever else it produces. They start at very enterprise level too, so I feel. Why would a small agency or freelancer want to use it? Why would a small agency or freelancer want to use it? They project a range for a $2,000 website to $500. And try to get all these two set up and then making it standard or website. They might just pick once and never get it again. What's the benefit of doing it? For these people. So what's the benefit for them? Is that the gist of the question? Yeah, it's one of the businesses. It's a lot of work. So what's the benefit? Actually, I'm not sure if it's a lot of work because all these projects we're doing, they're trying to streamline the installation of these projects. So I'm not sure, but I installed it personally or in my project. So it's just an easy as pulling down the repository and then a few steps. Although it's going to take additional steps on your setup or on your workflow. But considering that you are just a freelancer, I mean, I mean, don't, even if you're just a freelancer, a small business, it doesn't mean you don't comply with standards or best practices right. So I think it's like for everyone. It's like for everyone. It's not just for enterprise level of sites. It's also for the small sites or for those who'd like to be able to build a personal site out there, but at the same time, doesn't want to put the user web with insecure or add more of the presentation, the number of insecure or infected websites, especially in WordPress. So I hope that answers your question. But yeah. Can I ask one more question? So first, usage of coding standards actually help one get onto the WordPress theme repository. Does it help in any way? I'm sorry. If I'm a filing theme developer and I want to get my theme into the WordPress theme repository, do I have to adhere to the WordPress coding standards? So I have not submitted a theme to the team repository in WordPress yet, but we have our team reviewers. We have our team reviewers in the community. They will review and they will check against the code in your theme. And if they check out and also, they're going to check that against WordPress coding standards. So yeah, that's a benefit as well. If you're going to contribute to the theme of the WordPress, it means you also have the chance or opportunity to experience how it is to code with standard and best practices in mind. So it's also perfect training ground as well for you. Any more questions? Any more questions? There's a silent crowd. But I hope that means you enjoyed my talk. Thank you so much, everyone. See you around. Because you were talking about the fun things that only happen in after-party. Oh, you mean that? So, do you want to share? They're like, it's not safe here to share. But it's good, it's good. But actually, who doesn't like her? Okay, I was looking forward to the after-party whenever I turned on WordPress. And I'd encourage everyone to join because there's a whole level of connection when you meet people without being constrained in this hall or in this room. After-party venue is a different atmosphere. But maybe just for me. So you can try it out for yourself. And it feels like you're more comfortable talking to people. And in the after-party, you actually get to talk to more people, speakers, volunteers, sponsors as well. That's where you have the courage to talk to them with a little bit of help of the alcohol. And I got the answer to the question. Do we have alcohol today? No, just kidding. But after-party is also about food. Food and then good stories. And then you can't get to know other people on a personal level. And then get their cards and all. So yeah. Just FYI, we have PSAS. Okay. So welcome everyone to stay after-party for hours. But I don't know where to have the party. It's here. So just outside of this room. Because you cannot have food and drink in this room. But we will do that in the other two rooms. So the work time is a very casual conference. So after-party is an even more casual, informal gathering. So that's it. But we don't have alcohol today. Oh, it's fine. We can hold beer sponsorship maybe for next year. We can always have a good conversation with other people without alcohol. So as long as we are in a different atmosphere and maybe food. One more? Okay. Thank you. Thank you, everyone. Our next meeting will start at 3.50pm. And then our next meeting is our last meeting today. This is after this. We will ask for your likes. And please stay with us in the future. I will be here with a viewer or with your bias. I promise you will be here to support us in the next meeting.