&nbsp;Welcome to the first article in the TypeScript learning series! In this article, we will explore TypeScript from the perspective of those who already know JavaScript. Start your journey to learn TypeScript and enjoy its benefits!<h2>1. Introduction to TypeScript</h2>TypeScript is a static programming language based on JavaScript. It helps us to write JavaScript code more efficiently, while providing more reliability and maintainability. TypeScript is developed by Microsoft and is widely used in large and complex projects.<h2>2. Why use TypeScript?</h2>Although JavaScript is a powerful programming language, it does not have static data types and time-checking for errors. compilation point. This can lead to an error during program execution. TypeScript solves this problem by adding a static data type and checking for errors at compile time. This helps you detect bugs earlier and increases the reliability of your code.In addition, TypeScript provides smart suggestions, powerful code analysis, and a well-integrated IDE. This increases development productivity and reduces bug finding time.<h2>3. Integrate TypeScript into an existing JavaScript project</h2>If you already have an existing JavaScript project and want to switch to TypeScript, don't worry. TypeScript can be integrated into an existing JavaScript project easily. You can start by renaming the JavaScript code files to .ts and start adding data types to the code sections one by one. This allows you to take advantage of TypeScript step by step without rewriting the entire code.<h2>4. Using data types in TypeScript</h2>One ​​of the most important features of TypeScript is the ability to use static data types. You can define data types for variables, parameters, and function return values. This helps you to check and ensure the validity of the source code.For example:<pre><code class="language-typescript">function add(a: number, b: number): number {
 &nbsp;return a + b;
}
let result: number = add(3, 5);
</code></pre>In the above example, we define the data type for the variable "a" and "b" as "number", and the data type of the return value is "number". TypeScript will check these data types and report an error if they don't match.<h2>5. Type Contracts</h2>TypeScript also supports type contracts, allowing you to define data type and interface constraints for objects. This helps to define required attributes and comply with specific data type rules.For example:<pre><code class="language-typescript">interface Person {
 &nbsp;name: string;
 &nbsp;age: number;
}
function greet(person: Person): void {
 &nbsp;console.log("Hello, " + person.name + "!");
}
let john = { name: "John", age: 25 };
greet(john);
</code></pre>In the above example, we define an interface "Person" with two properties "name" (string type) and "age" (of type number). The "greet" function takes as an argument an object with a similar structure to the "Person" interface. This ensures that only objects that conform to the "Person" contract type can be passed into the "greet" function.If we declare an additional attribute “gender” with value “male” to the object “join”&nbsp;&nbsp;<pre><code class="language-typescript">let john = { name: "John", age: 25, gender: "male" };</code></pre>Now the "john" object has an undeclared property in the type contracts "Person" as "gender" . TypeScript will display an error message:<pre><code class="language-typescript">Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.</code></pre>With TypeScript, compile-time data type checking helps you identify and correct errors right from development development, increasing the reliability and maintainability of the code.<h2>6. Take advantage of TypeScript's advanced features</h2>TypeScript has many other advanced features like:Generics: Generics allows you to write flexible and reusable code for a variety of data types without the need for definitions. tough data type.Module: TypeScript supports modules for managing code in large projects, helping to break code into separate parts and reuse them in other files.Class and Inheritance: TypeScript supports full object-oriented programming with class and inheritance, allowing class definition , properties, methods, and use inheritance to share code between classes.And more.&nbsp;These features, along with others in TypeScript, help you write more flexible and efficient code, while reducing Reduce bugs and increase code maintainability.<h2>7. Conclude</h2>The above is a brief introduction to TypeScript for those who already know JavaScript. TypeScript provides data type validation, smart hints, and powerful code analysis, helping you write more efficient and maintainable JavaScript code. Hope this article has helped you to have an overview of TypeScript and discover its potential. Keep learning and applying TypeScript to your projects to enjoy its benefits! &nbsp;

This article is an introduction to TypeScript and a guide for those who already know JavaScript to discover and enjoy the benefits that TypeScript has to offer. TypeScript helps to write JavaScript code more efficiently, while providing more reliability and maintainability.

TypeScript for Beginners - Taking JavaScript Code to the Next Level

Object duplication is an important requirement in JavaScript programming, and it plays an important role in ensuring secure data and avoid referencing. In JavaScript, there are two methods of object copying, "Shallow Copy" and "Deep Copy". However, many new developers in the field often have difficulty putting these methods into practice. So, in this article, we will learn how to clone objects in JavaScript easily and efficiently, including specific examples and important caveats when using these methods.Before getting into the details of JavaScript object copying methods, let's take a look at what it means to do. copy object.In JavaScript, objects are used to represent an entity or a set of properties and methods of a specific object. This is especially useful in managing data in web applications or server systems. However, when working with objects in JavaScript, you need to sometimes copy them to ensure data safety and avoid referencing.For example, when you pass an object from one function to another in JavaScript, if you don't copy the object and pass only its reference, when the object's internal properties or methods change, this affects all objects that access it. This can cause unexpected problems in your application and make your code difficult to manage and maintain.Therefore, object duplication is an important technique in JavaScript that helps you to solve management related problems data management and ensure the stability of your application. Next, we'll look at specific methods of object copying in JavaScript.As mentioned at the beginning of the article, there are two main methods of copying objects in JavaScript: "Shallow Copy" and " Deep Copy". However, both of these methods have their own pros and cons, and you need to understand how they work before you use them."Shallow Copy" is a method of simply copying an object by creating a new copy of the original object. and point the properties of that copy to the values ​​of the original object. This means that if any properties of the original object change, the properties of the copy will also change."Deep Copy" is a method of fully copying an object by creating a complete copy of the object. original image. This includes both the properties and the internal child objects of the parent object. It ensures that if any properties of the original object are changed, the properties of the copy will not be affected.However, copying objects using the "Deep Copy" method can be expensive in terms of performance, especially is when copying nested or large sized objects. Therefore, it is necessary to consider and choose the most appropriate method depending on the specific situation.In this article, we'll dive into each method of object duplication and learn how to implement them in JavaScript. We'll also look at specific examples and important caveats when using these methods.To begin with, we'll learn how to copy objects using the "Shallow Copy" method. To do this we can use some method like Object.assign() or spread operator.The Object.assign() method is used to copy the properties of one or more objects and assign them to target object. To copy an object using the "Shallow Copy" method using Object.assign(), we can do the following:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }
obj1.a = 4;
console.log(obj1); // { a: 4, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }</code></pre>In the above example, we used Object.assign() to copy the obj1 object to the empty object { } and assign the result to the obj2 object. Now, if we change the value of a property of object obj1, then the a property of object obj2 is not affected, because object obj2 is just a faint copy of object obj1.&lt; /span&gt;In addition to Object.assign(), we can also use spread operator (...) to copy objects . Example:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }
obj1.a = 4;
console.log(obj1); // { a: 4, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }</code></pre>Both Object.assign() and spread operator can be used to copy the properties of one or more objects object to the target object. However, if the object has properties that are objects or arrays, they will only be copied by the "Shallow Copy" method. That is, those properties will point to the same memory area.For a better understanding of the "Shallow Copy" method and the problem with object or array properties, let's consider the following example:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = { ...obj1 };
obj2.c.d = 4;
console.log(obj1); // { a: 1, b: 2, c: { d: 4 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>In the above example, we use spread operator (...) to copy obj1 object and assign the result into the obj2 object. Then we change the value of the d property of the c object in the obj2 object. As a result, both obj1 and obj2 objects are affected by this change. This happens because when we copy object obj1 using spread operator, we only copy the reference value of object c into object obj2. Therefore, when we change the value of attribute d in object c of object obj2, the reference value of attribute c in object obj1 is also changed.To copy object using "Deep Copy" method we can use some library like Lodash or jQuery. For example, to copy object using "Deep Copy" method using Lodash, we can do the following:<pre><code class="language-javascript">const lodash = require('lodash');
const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = lodash.cloneDeep(obj1);
obj2.c.d = 4;
console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>In the above example, we use the Lodash library's lodash.cloneDeep() function to clone the obj1 and assign the result to the obj2 object. Now, when we change the value of property d in object c of object obj2, object obj1 is not affected by this change. This happens because the lodash.cloneDeep() function creates a new copy of the obj1 object, including its properties and values, as well as all nested objects and arrays inside. So, when we change the value of property d in object c of object obj2, object obj1 is not affected by this change.However, it should be noted that the "Deep Copy" method may affect the performance of the application as it will create a full copy of the original object. Therefore, when copying objects in your application, consider convenience and performance.Also you can “Deep Copy” in the following ways:Sử dụng JSON.stringify và JSON.parse:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.c.d = 4;
console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>Note that this method only works with simple objects that do not contain functions or related objects DOM. If you want to clone more complex objects, you can use support libraries like Lodash or jQuery.Or you can write your own deep copy function using recursion.<pre><code class="language-javascript">function deepClone(obj) {
 &nbsp; // If object is not object or null, no need to copy
 &nbsp;if (obj === null || typeof obj !== "object") {
 &nbsp;&nbsp;&nbsp;return obj;
 &nbsp;}
 &nbsp; // Create a new copy of the object
 &nbsp;let clone = {};
 &nbsp; // Loop through all the properties of the object
 &nbsp;for (let key in obj) {
 &nbsp;&nbsp;&nbsp; // Check if the property is a private property of the object
 &nbsp;&nbsp;&nbsp;if (obj.hasOwnProperty(key)) {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // If an object, call recursively to create a deep copy
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof obj[key] === "object") {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clone[key] = deepClone(obj[key]);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // If a primitive value, copy it to a new copy
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clone[key] = obj[key];
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 &nbsp;}
 &nbsp;// Returns a new copy
 &nbsp;return clone;
}
const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = deepClone(obj1);
obj2.c.d = 4;
console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>In this article, we learned about two methods of object copying in JavaScript, "Shallow Copy" and "Deep Copy", along with the strengths and weaknesses of each method. When duplicating objects in your application, consider using an appropriate method to ensure the correctness and performance of your application. &nbsp;

Some knowledge you should know when copying objects in JS

Copy object in JS

<h1>1. What is a bug report?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_dd347b5135.png"></figure>- Bug report is a document that describes in detail errors, problems or problems that occur during the development or use of the software. Bug reports are often used to report to a developer or development team about bugs that need to be fixed, and are used to solve software problems. - A typical bug report will include information such as the name of the bug, the problem description, the bug status, the person reporting the bug, the date and time the bug occurred, and the steps to reproduce the bug. Bug report is an important tool in software testing process and helps developers to solve bugs and improve product quality.&nbsp;<h1> 2. Why is it important to write a good bug report?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_75dc545020.png"></figure>Writing a good bug report is essential because it helps to increase the efficiency of the software development process. Here are some reasons why it is important to write a good bug report: 1. Help developers understand the problem: A good bug report provides detailed and clear information about the bug, helping the developer understand the cause and how to fix the bug quickly and effectively. 2. Saves time and effort: A well-written bug report helps the developer to quickly reproduce the issue and diagnose the problem, which saves time and effort. This, in turn, increases the chances of the issue getting fixed sooner. 3. Increases the chances of the bug getting fixed: When a developer has a good understanding of the issue, they are more likely to fix it. A clear, concise, and detailed bug report can help developers prioritize and fix issues efficiently. 4. Enhances communication between stakeholders: A good bug report helps to facilitate communication between different stakeholders, including developers, testers, and project managers. This ensures that everyone is on the same page and that the issue is being addressed appropriately. 5. Improves the quality of the product: By identifying and reporting bugs, users can help to improve the quality of the product. A good bug report helps the development team to identify and fix issues that could affect the product's usability, functionality, and overall quality.<h1> 3. What factors to evaluate a good bug report</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_ea8ef03f3a.png"> - Self-describing: A good bug report should be able to describe the problem in detail, clearly, understandable and complete to help the developer understand the cause and how to fix the bug quickly and effectively. - Reusability: Bug report should be written so that it can be reused in the future if there is same bug problem. This simplifies the process of checking and fixing errors later. - Reproducibility: Bug reports should provide steps to reproduce bugs, so that developers can accurately identify and fix bugs quickly. - Scope: The bug report should clearly define the scope of the bug's impact on the product or system. This helps the developer to assess the importance of the problem and come up with an appropriate solution. - Support Information: Bug report should provide full support information such as operating system, software version, hardware used, information about test environment, etc. to help developers identify and fix bugs efficiently. - Status and prioritization: Bug reports need to be assessed status and prioritized, helping developers identify issues that need to be prioritized and resolved effectively.<h1> 4. Format bug report simple and full of necessary information</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f53fc58e28.png"> - Title: Briefly describe the problem. - Description of the problem: Include the following items:<ul><li>Steps to reproduce the problem: Describe the steps to reproduce the problem.</li><li>Desired Result: Describe the desired result when performing the above step.</li><li>Actual results: Describe the actual results when performing the above step.</li><li>Detailed error description: A detailed description of the error problem, including error information such as error messages, unexpected responses, etc.</li></ul> - Support information:<ul><li>Operating system: The version of the operating system used.</li><li>Browser: Browser version used.</li><li>Software version: Current software version.</li><li>Test environment: Describes the test environment, including hardware and software.</li></ul>- Scope: Describes the extent of the defect's impact on the product or system. - Screenshot (if available): Attach a screenshot if possible to help developers better understand the problem. - Status and priority:<ul><li>Status: What state is the issue currently in (like unconfirmed, confirmed, being worked on, etc.).</li><li>Priority: The priority of the issue, including high, medium and low priority.</li></ul> - Reporter: Name of person reporting the issue. - Report date: The date the problem was reported. - Module or feature name: The name of the module or feature of the product in which the problem occurs. - Environmental health: The state of the environment when the problem occurs, including information about the operating system version, security software, etc. - More Information: Other additional information related to the issue, including documentation, product information, etc.<h1>5. Some tips to ensure you always have a good bug report</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_241b2f70a9.png"></figure>- Perform test steps and record all steps in bug report. This helps ensure that developers can accurately reproduce the problem and determine the cause of the error. - Provides detailed information about the error, including information about the error, how to detect the error, error messages, error codes, etc. If possible, provide screenshots or videos to illustrate the problem. - Give steps to reproduce the problem. Include all steps needed to reproduce the problem, including steps before and after the error occurs. - State the extent of the issue's impact, including which features or functions are affected, how the issue affects users, and more. - Use problem management software to manage bug reports. This helps you keep track of issues and deal with them in the correct order of priority. - Provide detailed information about the test environment, including software version, operating system version, other related software, etc. - Pay attention to your language and writing style. Use clear language and avoid confusing technical terms. - Pay attention to your language and writing style. Use clear language and avoid confusing technical terms. - Pay attention to the feasibility and effectiveness of the proposed solutions. If you come up with solutions, make sure they are viable and effective. - Update information on bug report fully and accurately. This makes it possible for developers to track and resolve issues quickly and efficiently.

Report bugs is the regular and continuous work of a tester. What do you think you can do to make a bug report complete, concise, and show professionalism and clarity in each report?

How to write a good bug report? Some small "tips" when writing bug reports

Welcome back to the 'Learn What You Share' series, and I'm Tuyen. Today, I will share about a new field that I have learned, which is Business Analysis. One of the most challenging parts of the course is writing tasks in a template: Description, Requirement, Acceptance Criteria. The difficulty here is to write the "Acceptance Criteria" accurately and correctly. What is 'Acceptance Criteria'? How can we write it accurately and correctly?Acceptance criteria, also known as acceptance tests, are the conditions that software must meet to satisfy the needs of the user as described in the user story. So, what is a user story? How can we analyze a user story accurately and include all the necessary details in an acceptance criteria? <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8_4747aab603.png">A user story is simply understood as the needs of customers or users for a product or service, focusing on user needs and value. For example, if you are someone who likes to travel and is looking for a service on smart devices (laptops, iPads, phones) that is both beautiful and easy to use, with simple operation, intuitive interface, and all information clearly expressed, with sufficient user needs provided. A fast, efficient and convenient application.From these needs in the user story, developers will have an overview and understanding of user needs, and then create a product or service that meets those needs.Fundamentally, when practicing, many people can easily realize that it is actually similar to personal experience needs rather than customer needs. If you were in the role of a customer, what would your expectations be? You would want to learn about a good technology solution that meets your personal needs. These are the issues that every BA needs to consider. Analyzing problems and writing acceptable standards is a method that helps us generalize and synthesize these requirements into many cases and optimal solutions. To facilitate smooth teamwork, you are the bridge between the user and the development team.When it comes to analyzing and writing tasks, each BA will have their own writing style, but fundamentally, it is based on a common method: description, requirement, and acceptance criteria. As for myself, after researching and learning, I have summarized a quick and concise way to write a task that is correct, standard, and meets user requirements, specifically:Step 1: Receive the requirement, thoroughly research and describe the problem (description). Step 2: Explore, analyze and divide the problem into many situations to find the optimal solution based on the requirements that the customer has given (requirement). Step 3: List the necessary steps to be taken, describe them specifically and in detail, and illustrate them with images to facilitate the completion of the task while providing the desired result (acceptance criteria).<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Acceptance_Criteria_e26845ecfb.png"></figure>An example for this process: User Story: As a customer, I want to order online to buy products from the store, to save time and be more convenient. Acceptance Criteria: Customers can access the store's website and log into their account. Customers can view the list of products and details of each product including: prices, images, descriptions, and the quantity of remaining products. Customers can add products to their cart by clicking the "Add to Cart" button. To purchase the product, customers can click "Buy" and choose the appropriate payment method, or go to the cart section to confirm the quantity and total cost of the order and choose the appropriate payment method, then enter their information and confirm the order. Customers receive an order confirmation and the quantity of products ordered via email or text message. The system reduces the quantity of remaining products in stock after the customer has successfully placed an order.In addition to analyzing user requirements for the dev team, a Business Analyst (BA) also helps suggest solutions or provide advice on the best solution for the customer. There will be many customers who come to you wanting a website but they may not have a lot of requirements or they may not know what they want, just that they want a website that can promote their brand, improve business productivity and gain more visibility. In this case, you will be the one advising and helping them. As for customers who already know what they want, your task will be to understand their needs and see if the dev team can meet those needs. If not, we propose an optimal solution that satisfies the customer and is also convenient for the dev team. In summary, a BA can help the dev team develop products by understanding customer requirements, creating and analyzing requirement documents, coordinating between the customer and the dev team, testing and evaluating products, supporting data analysis, and adjusting requirements as necessary. The role of a BA is very important in every project, not only as someone with broad knowledge but also with many other soft skills. If you don't have a lot of knowledge or skills, don't worry, the environment will train you. When you enter a work environment, you don't want to be good at it or you don't want to learn, but you can't refuse it. The way you can do well and maintain your performance in that environment is to constantly strive to improve your knowledge. Everyone has a first time, so just keep going, even if you stumble, getting up is the way to mature after each lesson.That concludes all the knowledge I've gathered from writing tasks. Hopefully, it will be helpful for you.&nbsp;Thank you for reading this far. See you in the next blog and I'm Tuyen.&nbsp;This article was created by ChatGPT and has been edited.

Acceptance criteria, also known as acceptance tests, are the conditions that software must meet to satisfy the needs of the user as described in the user story.

Learn about Acceptance criteria?

Welcome back to the "Learn as you share" series, and I'm Tuyen. Today, I will share the challenges that beginners face when entering the programming industry, specifically in coding and design. This is my personal story. Below are my lessons and experiences when facing these challenges. Therefore, if there are any omissions or inaccuracies, I apologize in advance.1. For a beginner who has just stepped into the programming industry, lacks experience and knowledge, it is very easy to make unnecessary mistakes, such as syntax errors, for example:<ul><li>As a former coder, I often encountered bugs in my code. Specifically, syntax errors occur when the code structure does not match the language syntax. For example, when coding an HTML code like this:</li></ul><pre><code class="language-html">&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Trang web của tôi&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Xin chào các bạn
 &lt;/body&gt;
&lt;/html&gt;</code></pre>Error: missing closing tag &lt;/h1&gt;&nbsp; Fix: &lt;h1&gt;Hello everyone &lt;/h1&gt;<ul><li>Logic error is when the code is written but does not function as intended. For example, when you write a Javascript code to add two natural numbers (1+1=2) but the result is 11, this is an unexpected result demonstrated by the following code snippet:</li></ul><pre><code class="language-javascript">let a = "1";
let b = "1”
let c = a+b;
console.log("The result is:", c);
→ Result: c = 11</code></pre>Error: The expected result is c = a + b (c = 1 + 1) and the result should be 2, but the actual result is c = 11. The reason is that when declaring variables, you declared a and b as strings, so when running the code, it interpreted the result as string concatenation.&nbsp; Fix: Declare variables for their intended purpose. If you want to add two natural numbers, declare the variables as follows:<pre><code class="language-javascript">let a = 1;
let b = 1;
let c = a+b;
console.log("The result is:", c);
→ Result: c = 2, this is our expected result.</code></pre><ul><li>Slow performance occurs when you have redundant code that is not necessary, making the code run complex and slow. Therefore, limit unnecessary code and make sure your code is clean and sufficient for a smoother and faster build speed.</li><li>Security vulnerability: when a client sends a request, coders usually hide the token (known as Cross-site request forgery (CSRF)). If the token is not hidden, the user's information can be exposed and easily stolen.</li><li>Incompatibility: software version, operating system version, etc. may not be compatible, and the source code will not work. For example, if you code source code in Node.js (version 16) but download it to run in Node.js (version 14), it will cause errors. Therefore, pay attention to the operating system version, software version, etc.</li><li>Missing error checking and testing: for a beginner, this is a common mistake. When encountering a difficult problem while coding, the initial feeling is often one of excitement, and in that moment, the desire to complete the target quickly can lead to hastily submitting a pull request without checking the code, formatting it, or testing it thoroughly for various scenarios. This can result in being scolded by the team leader.&nbsp;</li></ul><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_369_8c94407cfa.png"></figure>So, to avoid unnecessary mistakes, we should constantly improve our knowledge and skills. Beginners may lack experience and make mistakes, but with time, they can learn and gain experience. It's important to learn from our mistakes and not repeat them, because as the saying goes, you can't step into the same river twice. 2. As a beginner in coding, I am also a beginner in design. Being new to the field, I cannot avoid making mistakes, specifically:<ul><li>Incorrect design proportions.</li><li>Misunderstanding customer requirements and not focusing on end-users.</li><li>Creating an unfriendly user interface.</li><li>Failing to ensure consistency in design.</li><li>Not providing multiple versions for different platforms (desktop, tablet, mobile).</li></ul><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_370_03aa82a18d.png"></figure>So to have a beautiful design that is user-friendly, a designer needs to have a broad overview of the website, some knowledge of code, and a thorough understanding of the field and requirements proposed by the client. They should also have knowledge in design principles. In my personal opinion, the focus should be on simplicity, user-friendliness, and aesthetics. 3. When a design is completed, the next task is for the coders to turn it into a dynamic website according to the customer's requirements. However, it is also difficult for a coder to code accurately and produce a perfect product. Because when coding according to design, it is difficult to meet the following criteria:<ul><li>Not understanding the requirements or not consulting with the requester when necessary can result in the inability to meet customer demands.</li><li>Lack of understanding of design and creativity: incorrect design analysis can lead to incorrect coding. Without creativity, they may not be able to find optimal solutions, resulting in repetitive and inefficient code that is difficult to maintain.&nbsp;</li><li>Failure to thoroughly check between the code and design can result in a website that does not match the intended design</li></ul><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_371_6cc2621345.png"></figure>So before coding, coders should have thorough discussions with the design team about customer requirements and the purpose of the website. Then, the development team will meet to analyze the design and find ways to code efficiently and cleanly.Above are the things I encountered as a beginner stepping into the profession. Surely, everyone will stumble at some point, so I hope that those who read my article can learn from my experiences and lessons for themselves. As for myself, after going through the learning and working journey at ABC Software Company Solution, I have learned a lot: experiences from my predecessors, improving my weaknesses such as careless coding, not checking code or formatting it before sending a pull request, not verifying the code with the design, etc. In summary, what I learned from working is attention to detail, self-motivation to learn and explore technology (as IT is constantly updating), and personal responsibility for every product I create. I hope that you won't make as many mistakes as I did when becoming a coder or designer like myself.Thank you for reading up to this point.&nbsp; I'll see you in the next blog, and my name is Tuyen.&nbsp; This article was created by ChatGPT and has been edited.

This is a story sharing the challenges encountered as a beginner in the field of programming. Specifically, for me, it was about coding and design.

The story of a beginner taking their first steps in their profession.

WordPress: Contact Form 7 API<h3 style="text-align:justify;">1. An introduction about Contact Form 7</h3>Contact Form 7 is one of the most popular plugins in the WordPress community used to create and manage contact forms. With it, users can easily create diverse and customized contact forms according to their needs without having to use any single line of code. Besides, Contact Form 7 also provides many useful features to help users manage and handle contact forms conveniently and efficiently.<img class="image_resized" style="width:18.87%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/contact_form_7_6c4526aeea.png" alt="contact form 7.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_contact_form_7_6c4526aeea.png 201w," sizes="100vw"><h3 style="text-align:justify;">2. Example of submitting a Contact Form 7 form using the API</h3>I prepared a form like this:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_722b56953e.png"></figure>&nbsp;To demonstrate how to submit a form in Contact Form 7 using the API, I've created a sample form with fields including 'your-name,' 'your-email,' 'your-subject,' and 'your-message.' Contact Form 7 provides a link for submitting forms through the API, such as&nbsp;<a target="_blank" rel="noopener noreferrer" href="http://demo.local/wp-json/contact-form-7/v1/contact-forms/171/feedback">http://demo.local/wp-json/contact-form-7/v1/contact-forms/171/feedback</a>, where '171' is the form ID. To test this, I used Postman to send an email:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_71002e607c.png"></figure>When you use Contact Form 7 to send an email, the response structure that is normally returned includes the following properties:<pre><code class="language-plaintext">{ 
 "contact_form_id": 171, 
 "status": "mail_sent", 
 "message": "Thank you for your message. It has been sent.", 
 "posted_data_hash": "286ba8559707c76ee30f82f97b09bc32", 
 "into": "#", 
 "invalid_fields": [] 
}</code></pre><ul><li>contact_form_id: The ID of the Contact Form 7 form that was submitted.</li><li>status: The status of the form submission. In this example, the value is "mail_sent", indicating that the email was sent successfully.</li><li>message: A message indicating the status of the form submission. In this example, the value is "Thank you for your message. It has been sent.", which is the default success message for Contact Form 7.</li><li>posted_data_hash: A hash of the form data that was submitted. This can be used to verify the integrity of the data.</li><li>into: The form input field or fields that the form data was sent to. In this example, the value is "#", indicating that the data was not sent to a specific email address but rather to the default email address specified in the Contact Form 7 settings.</li><li>invalid_fields: An array of input fields that failed validation. In this example, the value is an empty array [], indicating that all fields passed validation.</li></ul><h3>3. Customizing the response generated by Contact Form 7</h3>First we must know the state of a form after it is submitted so that we can customize it to suit your needs based on that: Contact Form 7 has the following status values that may be returned in the response:<ul><li>mail_sent: The email has been sent successfully.</li><li>mail_failed: The email failed to send.</li><li>validation_failed: The form data failed validation.</li><li>spam: The form submission was identified as spam.</li><li>mail_sent_akismet: The email was sent successfully, but it was flagged as spam by Akismet.</li><li>mail_sent_ng: The email was sent successfully, but it failed to deliver due to an error in the email server configuration or other reasons.</li></ul>These status values can be used to customize the response message that is returned to the user when the form is submitted. You can use the wpcf7_ajax_json_echo hook to customize the response message based on the specific status value that is returned.<pre><code class="language-php">&lt;?php
add_action('wpcf7_ajax_json_echo', 'custom_response_message', 10, 2);

function custom_response_message($response, $result)
{
&nbsp; &nbsp; if ($response['status'] === 'mail_sent') {
&nbsp; &nbsp; &nbsp; &nbsp; $response['meta'] &nbsp; = (object) array(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'id' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; $response['contact_form_id'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'invalidFields' &nbsp; =&gt; $response['invalid_fields'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'postedDataHash' &nbsp;=&gt; $response['posted_data_hash'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'into' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; $response['into']
&nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; $response['message'] = $response['message'];
&nbsp; &nbsp; &nbsp; &nbsp; $response['error'] &nbsp;= null;
&nbsp; &nbsp; &nbsp; &nbsp; $response['code'] &nbsp; = 204;
}

&nbsp; &nbsp; unset($response['contact_form_id']);
&nbsp; &nbsp; unset($response['message']);
&nbsp; &nbsp; unset($response['invalid_fields']);
&nbsp; &nbsp; unset($response['posted_data_hash']);
&nbsp; &nbsp; unset($response['into']);
&nbsp; &nbsp; return $response;
}</code></pre>Let me clarify the above code's purpose: it aims to handle the response when a mail is sent successfully. The code creates a "meta" section by combining relevant fields such as contact_form_id, invalid_fields, posted_data_hash, and then removes them from the original response. This approach is useful when you want to customize the response and omit certain details that are not relevant to your use case. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_37435d4199.png">I hope that the above example has given you a better understanding of how to work with Contact Form 7's API. By modifying the response data, you can customize the message that is returned to the user after submitting a form. Keep in mind that this is just one example of how to use the API and there are many other ways to work with it.If you'd like to learn more, here are some references that you might find useful: <a target="_blank" rel="noopener noreferrer" href="https://contactform7.com/">Contact Form 7</a> <a href=" http://chat.openai.com/">ChatGPT</a>&nbsp;&nbsp;

This blog aims to provide you with a deeper understanding of how to use the API offered by Contact Form 7.

WordPress: Contact Form 7 API

<h1>1. Concept</h1>Test Automation is the use of software or tools to automate the software testing process. It involves creating automated test scenarios and using automated tools to execute those scenarios, instead of doing manual testing, the test scripts are designed and programmed by experience in software testing. These scenarios can be designed to test the software's features, performance, security, reliability, and other requirements. Test Automation helps to speed up testing, reduce errors and ensure the integrity of the software testing process. It also saves time and cost for the software development company. However, Test Automation also has limitations and cannot completely replace manual testing<h1> 2. Advantages and disadvantages of Automation Testing</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b705549a48.png"></figure>a. Advantages of Automation Testing 1. Save time and costs: Test Automation can automate the testing process, which saves time and costs compared to performing tests manually. 2. Increase accuracy and reliability: Test Automation eliminates the shortcomings of manual testing that can be caused during testing, helping to increase the accuracy and reliability of testing. 3. Increase repeatability and increase test coverage: Test Automation can execute test scenarios repeatedly and can test a wider range than manual testing. 4. Increase test speed and performance: Test Automation can execute test scenarios more quickly and efficiently than manual testing. 5. Increased error detection: Test Automation can find errors more accurately and quickly than manual testing. &nbsp; &nbsp; &nbsp;b. Disadvantages of Automation Testing 1. High technical requirements: Test Automation requires highly specialized knowledge of engineering and technology, programming and logical thinking, and different programming languages. 2. Difficulty in creating and maintaining test scenarios: Creating and maintaining test automation scripts is a complex job and requires care and perseverance. 3. Cannot comprehensively test: Test Automation cannot comprehensively test and guarantee the stability of the software<h1>3. How Automation Testing works</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_1ea9e6531b.png"></figure>Automation Testing is an automated software testing method that uses software and automated testing tools to execute test scenarios without human intervention. How Automation Test works usually includes the following steps: 1. Selection of Automation Test tool: First, choose an Automation Test tool suitable for the project. There are different types of Test Automation tools, including free and commercial tools, such as Selenium, Appium, Katalon Studio, Ranorex, and a few others. 2. Build test scenarios: After choosing the Automation Test tool, the next is to build test scenarios. These test scripts are programmed using one of today's popular programming languages ​​like Java, Javascript, Python, or C#. 3. Setting up the test environment: During the test scenario building, the test environment must be set up to execute the test. The test environment includes web browsers, operating systems, applications, and other supporting tools. 4. Test Scenario Execution: After having built the test scenarios and set up the test environment, we can execute these test scenarios. Test scripts are executed automatically, without human intervention. 5. Analysis of test results: After executing test scenarios, test results are saved and analyzed. The detected bugs and issues will be recorded in the test report. 6. Bug Fixing: Finally, the bugs and problems discovered during testing will be corrected and the test scenarios re-executed to ensure that the software works properly and efficiently.<h1> 4. To become Automation Testing, where to start:</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8321cbc85d.png"></figure>1. Learn the basics of Testing: To understand test automation, you need to have knowledge of Testing. You should learn about testing techniques, software testing, unit testing, integration testing, acceptance testing, system testing, performance testing, security testing, processes, standards, and general knowledge about Testing. 2. Learn a programming language: Automation Testing is usually done using programming languages ​​and tools like Java, Python, Ruby, C#, etc. You need to learn a programming language to be able to understand test automation scenarios and create test automation scripts. 3. Learn test automation tools: Automation tools help you to create and execute test automation scenarios. There are many popular tools like Selenium, Appium, Katalon Studio, Robot Framework, and many more. You need to learn and master these tools to be able to use them effectively. 4. Practice and create test automation scenarios: After you have basic knowledge of Testing, programming languages ​​, and test automation tools, you should practice by creating scenarios. automated testing. This will help you better understand how to execute test automation and create effective test automation scenarios. 5. Learn more about related technologies and techniques: Testing is a vast field and is always updated with new technologies and new techniques. You should continue to learn and improve your knowledge of related technologies and techniques so that you can apply them to test automation. If you want to dive deeper into the field of automation testing and become an expert in the field, you can learn more about related certifications like ISTQB Foundation Level or Selenium WebDriver Certification. Also, you can search online courses and materials to learn more about Automation Testing. Related forums and communities are also great places to network and share knowledge with other experts in the field.&nbsp;

Test Automation is the use of software or tools to automate the software testing process. It involves creating automated test scenarios and using automated tools to execute those scenarios, instead of doing manual testing, the test scripts are designed and programmed by experience in software testing. These scenarios can be designed to test the software's features, performance, security, reliability, and other requirements. Test Automation helps to speed up testing, reduce errors and ensure the integrity of the software testing process.

Learn about Automation Testing

This post will walk you through the process of creating a prompt that will generate an image based on your description.Pollinations.ai is an AI tool that can generate images based on the parameters in its URL.Let’s draw a car using this prompt:<blockquote>INPUT = {myinput}OUTPUT = {description}\n ![IMG](https://image.pollinations.ai/prompt/{description}){description} = {focuseDetailed},%20{adjective1},%20{adjective2},%20{visualStyle1},%20{visualStyle2},%20{visualStyle3},%20{artistreference}INPUT = a car</blockquote>There’re 3 parts:<blockquote>INPUT = {myinput}: to guide ChatGPT that we will input what we want to generate the imageOUTPUT: the structured prompt to guide ChatGPT how to use markdown and pollinations.ai to generate image. *We only need to do this at one time.INPUT = a car: I want to generate an image of a car</blockquote>ChatGPT’s response:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_1rzt_Csqg_DN_56_A5b0ro_Vyg_794ca83627.webp" alt="1__1rztCsqgDN56A5b0roVyg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_1rzt_Csqg_DN_56_A5b0ro_Vyg_794ca83627.webp 214w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_1rzt_Csqg_DN_56_A5b0ro_Vyg_794ca83627.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_1rzt_Csqg_DN_56_A5b0ro_Vyg_794ca83627.webp 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_1rzt_Csqg_DN_56_A5b0ro_Vyg_794ca83627.webp 1000w," sizes="100vw">ChatGPT generated the image based on my first promptAwesome! Now, let’s generate another image with a much simpler prompt:My prompt:<blockquote>input = a big dog on a green field</blockquote>ChatGPT’s response<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_dzrt_Soro8_IC_Zz_CAIBW_Ud5w_cfa3444c33.webp" alt="1_dzrtSoro8ICZzCAIBWUd5w.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_dzrt_Soro8_IC_Zz_CAIBW_Ud5w_cfa3444c33.webp 192w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_dzrt_Soro8_IC_Zz_CAIBW_Ud5w_cfa3444c33.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_dzrt_Soro8_IC_Zz_CAIBW_Ud5w_cfa3444c33.webp 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_dzrt_Soro8_IC_Zz_CAIBW_Ud5w_cfa3444c33.webp 1000w," sizes="100vw">2nd image is followed by the simple promptNow let’s try with a more detailed description, but still a simple prompt<blockquote>input = a cold place with heavy rain</blockquote>ChatGPT’s response:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_CW_Krq_Smvq_Naw7_IA_1f_P_6t_Q_32fad6b9fd.webp" alt="1_CWKrqSmvqNaw7IA1fP_6tQ.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_CW_Krq_Smvq_Naw7_IA_1f_P_6t_Q_32fad6b9fd.webp 189w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_CW_Krq_Smvq_Naw7_IA_1f_P_6t_Q_32fad6b9fd.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_CW_Krq_Smvq_Naw7_IA_1f_P_6t_Q_32fad6b9fd.webp 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_CW_Krq_Smvq_Naw7_IA_1f_P_6t_Q_32fad6b9fd.webp 1000w," sizes="100vw">What a nice AI-generated photoExplanation: There’s no magic here. Basically, ChatGPT now supports markdown syntax to convert markdown image syntax from plaintext to image. Learn more about what is <a target="_blank" rel="noopener noreferrer" href="https://www.markdownguide.org/">Markdown</a>.Thanks for reading, and I hope this was helpful.

This post will walk you through the process of creating a ChatGPT prompt that will generate an image based on your description.

ChatGPT to generate AI images right in the ChatBox

My prompt:<blockquote>INPUT = {input}OUTPUT = {description} \n ![IMG](https://chart.googleapis.com/chart?chs={width}x{height}&amp;cht=p&amp;chd=t:{PopulationValue1},{PopulationValue2}&amp;chl=PopulationCountry1|PopulationCountry2)INPUT = Draw a pie diagram of the Population of the USA and Canada, using millions as the unit</blockquote>There’re 3 parts:<ul><li>INPUT is for ChatGPT understand that we will request something.</li><li>OUTPUT is for ChatGPT to learn the markdown syntax as well as use googleapis to generate charts</li><li>INPUT = Draw a pie diagram of the Population of the USA and Canada, use millions as the unit =&gt; our actual request</li></ul>Here’s the response from ChatGPT<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_sr_HO_7_J_Znj_Ehc_My_PT_Sb_MV_Ww_1868966dad.webp" alt="1_srHO7JZnjEhcMyPTSbMVWw.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_sr_HO_7_J_Znj_Ehc_My_PT_Sb_MV_Ww_1868966dad.webp 232w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_sr_HO_7_J_Znj_Ehc_My_PT_Sb_MV_Ww_1868966dad.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_sr_HO_7_J_Znj_Ehc_My_PT_Sb_MV_Ww_1868966dad.webp 750w," sizes="100vw"><h2 style="margin-left:0px;">Great! ChatGPT indeed can display an image inside the chatbox itself!</h2>Now let’s generate a subsequence request without having to repeat the complex promptMy next simple prompt:<blockquote>using the same structured prompts, now generate the chart for the export of goods for the USA, Canada, and Australia</blockquote>ChatGPT’s response:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_h4_M8t_c_E_Yii_OI_19_L_40_Rg_7e93e19862.webp" alt="1_h4_M8t_cEYiiOI19L-40Rg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_h4_M8t_c_E_Yii_OI_19_L_40_Rg_7e93e19862.webp 195w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_h4_M8t_c_E_Yii_OI_19_L_40_Rg_7e93e19862.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_h4_M8t_c_E_Yii_OI_19_L_40_Rg_7e93e19862.webp 750w," sizes="100vw">Conclusions, ChatGPT can use markdown syntax to display images. And we can ask it to help generate charts with tools like Google chart. Of course, apart from Pie Charts, you can try all other types of charts.

ChatGPT can use markdown syntax to display images. And we can ask it to help generate charts with tools like Google chart. Of course, apart from Pie Charts, you can try all other types of charts.

ChatGPT to draw and display charts (Google) in the chatbox

Hello folks! I’m looking for a way to make use of ChatGPT for solving business use cases and helping me draw diagrams as well. Let’s see how ChatGPT can speed me up in doing so.<blockquote>As a senior developer or technical lead, there is no set number of diagrams that are required. The number and types of diagrams will depend on the specific project, the team, and the organization. However, there are some common diagrams that are often used in software development, including:</blockquote><blockquote>- Class diagrams</blockquote><blockquote>- Sequence diagrams</blockquote><blockquote>- State diagrams</blockquote><blockquote>- Activity diagrams</blockquote><blockquote>- Component diagrams</blockquote><blockquote>- Deployment diagrams</blockquote><blockquote>- Object diagrams</blockquote><blockquote>- Data flow diagrams</blockquote><blockquote>- Entity relationship diagrams</blockquote><blockquote>- Use case diagrams</blockquote><blockquote>It’s important to note that not all of these diagrams will be necessary or useful in every project. The key is to choose the diagrams that best communicate the design and help the team understand the system being built.</blockquote>For all of the diagrams, I will ask ChatGPT to use <a target="_blank" rel="noopener noreferrer" href="https://mermaid.js.org/">Mermaid.js</a> syntax to generate.<blockquote>About Mermaid.js.org Mermaid is a simple and easy-to-use library that allows developers to generate diagrams and flowcharts from text or code. It uses a simple syntax to describe the elements in a diagram, making it easy for developers to create and maintain diagrams without having to use a graphical interface.</blockquote><blockquote>Mermaid supports several types of diagrams, including flowcharts, sequence diagrams, class diagrams, and Gantt charts. The diagrams generated by Mermaid can be exported to various formats, including PNG, SVG, and PDF.</blockquote><blockquote>Mermaid is often used in the documentation, presentations, and other types of technical communication to help explain complex systems and processes in an easy-to-understand manner. It is also commonly used in combination with markdown and documentation generators, like Jekyll and GitBook, to create attractive and informative documentation for software projects.</blockquote>An example of a simple business use case:<blockquote>A small software development company wants to build a new project management tool for its clients. The tool will allow clients to create projects, assign tasks to team members, and track the progress of the project.</blockquote>For this use case, the diagrams that could be useful include the following:<h3>1. Use case diagrams: to capture the high-level interactions between the client and the project management tool.</h3>For this use case diagram, I asked ChatGPT to generate code. The first try gave me the wrong result: I cannot correctly convert the code to a diagram image.<blockquote>The prompt:&nbsp; Remember the sample business use case you just suggested, and also mermaid.js as the library to generate text, is that ok?</blockquote><blockquote>Please generate Use case diagrams</blockquote>The wrong result from ChatGPT<pre><code class="language-plaintext">
graph LR
 User --&gt; (Create Project)
 User --&gt; (Assign Task)
 User --&gt; (Track Progress)
 (Create Project) --&gt; Project
 (Assign Task) --&gt; Task
 (Track Progress) --&gt; Progress
 Project --&gt; Task
 Task --&gt; Progress
 classify default fill:#f9f,stroke:#333,stroke-width:4px;
 class User,Project, Task,Progress default;
</code></pre>My prompt<blockquote>a syntax error with the above code, pls regenerate</blockquote>The corrected result from ChatGPT<pre><code class="language-plaintext">graph LR
 User[User] --&gt; createProject[Create Project]
 User --&gt; assignTask[Assign Task]
 User --&gt; trackProgress[Track Progress]
 create-project --&gt; Project[Project]
 assignTask --&gt; Task[Task]
 trackProgress --&gt; Progress[Progress]</code></pre>The result from <a target="_blank" rel="noopener noreferrer" href="https://mermaid.live/">Mermaid.live</a><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_NB_Ew_XQ_Ql_CM_Ye1_G8_Eru_Bxqg_4466c56a25.webp" alt="1_NBEwXQQlCMYe1G8EruBxqg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_NB_Ew_XQ_Ql_CM_Ye1_G8_Eru_Bxqg_4466c56a25.webp 215w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_NB_Ew_XQ_Ql_CM_Ye1_G8_Eru_Bxqg_4466c56a25.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_NB_Ew_XQ_Ql_CM_Ye1_G8_Eru_Bxqg_4466c56a25.webp 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_NB_Ew_XQ_Ql_CM_Ye1_G8_Eru_Bxqg_4466c56a25.webp 1000w," sizes="100vw"><h3>2. Class diagrams: to model the classes of objects in the system, such as projects, tasks, and team&nbsp;members.</h3>Prompt:<blockquote>Please generate class diagram</blockquote>ResultLooks like there’s mostly a wrong result on the first try, copy the error from Mermaid and tell ChatGPT to generate againCorrect result:<pre><code class="language-plaintext">class diagram
 class User {
 +createProject()
 +assignTask()
 +trackProgress()
 }
 class Project {
 +setTitle(title: String)
 +setDescription(desc: String)
 }
 class Task {
 +setTitle(title: String)
 +setDescription(desc: String)
 +setAssignedTo(assignedTo: User)
 }
 class Progress {
 +setPercentage(percentage: Number)
 +setDate(date: Date)
 }
 User --&gt; Project
 User --&gt; Task
 Task --&gt; Progress</code></pre>Screenshot from Mermaid.js<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_xov4k_SM_Wqz_Ze_S8idc_Lq5_Xg_c35a748c41.webp" alt="1_xov4kSMWqzZeS8idcLq5Xg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_xov4k_SM_Wqz_Ze_S8idc_Lq5_Xg_c35a748c41.webp 164w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_xov4k_SM_Wqz_Ze_S8idc_Lq5_Xg_c35a748c41.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_xov4k_SM_Wqz_Ze_S8idc_Lq5_Xg_c35a748c41.webp 750w," sizes="100vw"><h3>3. Sequence diagrams: describe the interactions between the client and the system when performing specific tasks, such as creating a new&nbsp;project.</h3>Prompt:<blockquote>Please generate sequence diagram</blockquote>The correct result from ChatGPT (I only post correct one moving on)<pre><code class="language-plaintext">sequenceDiagram
 participant User
 participant Project
 participant Task
 participant Progress

 User-&gt;&gt;Project: createProject()
 User-&gt;&gt;Task: assignTask()
 User-&gt;&gt;Progress: trackProgress()
 Task-&gt;&gt;Progress: setPercentage(percentage: Number)
 Task-&gt;&gt;Progress: setDate(date: Date)</code></pre>Result from Mermaid.js<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_s4_Cu_5_G0_CA_8_Nyp_BUB_Yn_Xi_Q_611cf8ee65.jpg" alt="1_s4Cu-5G0CA8NypBUBYnXiQ.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_s4_Cu_5_G0_CA_8_Nyp_BUB_Yn_Xi_Q_611cf8ee65.jpg 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_s4_Cu_5_G0_CA_8_Nyp_BUB_Yn_Xi_Q_611cf8ee65.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_s4_Cu_5_G0_CA_8_Nyp_BUB_Yn_Xi_Q_611cf8ee65.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_s4_Cu_5_G0_CA_8_Nyp_BUB_Yn_Xi_Q_611cf8ee65.jpg 1000w," sizes="100vw"><h3>4. Activity diagrams: to show the flow of activities within the system, such as moving a task from one state to another (e.g., from “in progress” to “completed”).</h3>!!!ChatGPT cannot generate a correct version for Mermaid.js for this case, I assume Mermaid does not support activities diagram.!!!<h3>Component diagrams: to show the physical components of the system and how they relate to each&nbsp;other.</h3>Prompt:<blockquote>generate the component diagram for the current business use case using Mermaid</blockquote>Result from ChatGPT<pre><code class="language-plaintext">graph LR
 userInterface[User Interface] --&gt; projectController(Project Controller)
 projectController --&gt; projectRepository(Project Repository)
 projectRepository --&gt; database(Database)</code></pre>Screenshot from Mermaid.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_a_JWLT_Hcz_Qial_Fqd_Hm_Ka_F_A_0f05054fbd.webp" alt="1_aJWLTHczQialFqdHmKaF-A.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_a_JWLT_Hcz_Qial_Fqd_Hm_Ka_F_A_0f05054fbd.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_a_JWLT_Hcz_Qial_Fqd_Hm_Ka_F_A_0f05054fbd.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_a_JWLT_Hcz_Qial_Fqd_Hm_Ka_F_A_0f05054fbd.webp 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_a_JWLT_Hcz_Qial_Fqd_Hm_Ka_F_A_0f05054fbd.webp 1000w," sizes="100vw"><h3>5. Flowchart:</h3>Prompt:<blockquote>Generate flowchart</blockquote><pre><code class="language-plaintext">graph LR
 start[Start] --&gt; createProject[Create Project]
 createProject --&gt; assignTask[Assign Task]
 assignTask --&gt; updateTask[Update Task]
 updateTask --&gt;|Yes| closeTask[Close Task]
 updateTask --&gt;|No| assignTask</code></pre>Mermaid’s screenshot<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_fd_YML_0_ZKXE_Eavzet_W_Dw_04ef1f9bd6.webp" alt="1_fd_YML_0ZKXEEavzetW-Dw.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_fd_YML_0_ZKXE_Eavzet_W_Dw_04ef1f9bd6.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_fd_YML_0_ZKXE_Eavzet_W_Dw_04ef1f9bd6.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_fd_YML_0_ZKXE_Eavzet_W_Dw_04ef1f9bd6.webp 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_fd_YML_0_ZKXE_Eavzet_W_Dw_04ef1f9bd6.webp 1000w," sizes="100vw"><h3>6. State&nbsp;Diagram</h3>Prompt<blockquote>generate state diagram</blockquote>Result from ChatGPT<pre><code class="language-plaintext">stateDiagram
 [*] --&gt; ProjectCreated
 ProjectCreated --&gt; TaskAssigned
 TaskAssigned --&gt; TaskInProgress
 TaskInProgress --&gt; TaskCompleted
 TaskCompleted --&gt; TaskClosed
 TaskInProgress --&gt; TaskReassigned
 TaskReassigned --&gt; TaskInProgress</code></pre>Screenshot of Mermaid<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_OD_68neu_Kut7_C_Md_PJK_4_Cl_CQ_64a0f3ec2c.webp" alt="1_OD68neuKut7CMdPJK4ClCQ.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_OD_68neu_Kut7_C_Md_PJK_4_Cl_CQ_64a0f3ec2c.webp 144w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_OD_68neu_Kut7_C_Md_PJK_4_Cl_CQ_64a0f3ec2c.webp 462w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_OD_68neu_Kut7_C_Md_PJK_4_Cl_CQ_64a0f3ec2c.webp 693w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_OD_68neu_Kut7_C_Md_PJK_4_Cl_CQ_64a0f3ec2c.webp 924w," sizes="100vw"><h3>7. Entity Relationship diagram</h3>Prompt<blockquote>generate Entity Relationship Diagram</blockquote><pre><code class="language-plaintext">erDiagram
 project -&gt;&gt; task : one-to-many
 project -&gt;&gt; user : one-to-many
 user -&gt;&gt; task : many-to-many</code></pre>Screenshot from Mermaid<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_9g_FQ_0_Ez_Qcgn_Rf_J_Tsa_k1ow_90db2c3f1a.webp" alt="1_9gFQ0EzQcgnRfJTsa-k1ow.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_9g_FQ_0_Ez_Qcgn_Rf_J_Tsa_k1ow_90db2c3f1a.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_9g_FQ_0_Ez_Qcgn_Rf_J_Tsa_k1ow_90db2c3f1a.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_9g_FQ_0_Ez_Qcgn_Rf_J_Tsa_k1ow_90db2c3f1a.webp 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_9g_FQ_0_Ez_Qcgn_Rf_J_Tsa_k1ow_90db2c3f1a.webp 1000w," sizes="100vw">So for a few syntaxes, it’s not working for the latest version v9.3.0<h3>8. Gantt chart: to show the timeline with&nbsp;tasks</h3>Prompt<blockquote>please suggest typical tasks to be done and generate the Gantt chart with 2 months of timeline</blockquote><pre><code class="language-plaintext">gantt
 dateFormat YYYY-MM-DD
 title A 2-Month Project Timeline

 section Requirements gathering
 Requirements gathering :active, 2019-01-01, 2019-01-14

 section Project planning and design
 Project planning and design :active, 2019-01-15, 2019-01-28

 section System architecture
 System architecture :active, 2019-01-29, 2019-02-11

 section Development of core modules
 Development of core modules :active, 2019-02-12, 2019-03-07

 section Testing and bug fixing
 Testing and bug fixing :active, 2019-03-08, 2019-03-21

 section User interface design
 User interface design :active, 2019-03-22, 2019-04-04

 section Deployment and integration
 Deployment and integration :active, 2019-04-05, 2019-04-18

 section User training and support
 User training and support :active, 2019-04-19, 2019-05-02

 section Documentation
 Documentation :active, 2019-05-03, 2019-05-16</code></pre>Screenshot from Mermaid<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_1_W_Ro_B_Uc6z4_V_Nhg241_Jh1_w_b226ace216.webp" alt="1_1WRoBUc6z4VNhg241Jh1-w.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_1_W_Ro_B_Uc6z4_V_Nhg241_Jh1_w_b226ace216.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_1_W_Ro_B_Uc6z4_V_Nhg241_Jh1_w_b226ace216.webp 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_1_W_Ro_B_Uc6z4_V_Nhg241_Jh1_w_b226ace216.webp 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_1_1_W_Ro_B_Uc6z4_V_Nhg241_Jh1_w_b226ace216.webp 1000w," sizes="100vw"><h3>9. Gitgraph</h3>ChatGPT doesn’t update that Mermaid.js already supported Gitgraph hence it cannot generate it.<h3>10. User&nbsp;Journey</h3>ChatGPT doesn’t update that Mermaid.js already supported User Journey hence it cannot generate it.<h3>Conclusion</h3>I’m happy that ChatGPT does help me to generate a Sequence Diagram and Class Diagram. ChatGPT even can suggest to me the typical tasks for a given 2 months timeline and generate the Gantt Chart. However, its training data is not up-to-date with a lot of tools out there — Mermaid.js is an example, hence the effort to have good prompts and work around. But I’m sure with the help of chatbots like ChatGPT, our developer life would be much easier.Thank you for reading and feel free to let us know if ChatGPT does work with the diagram I tried at the time you’re reading this blog post.

ChatGPT, a language model developed by OpenAI, can help generate diagrams using the mermaid.js library. Mermaid.js is a simple and easy-to-use library for generating diagrams from text or code. The diagrams generated using mermaid.js are scalable, responsive, and can be easily embedded in websites or documentation.

ChatGPT to generate diagrams/graphs/charts with Mermaid.js.org

Hello everyone, my name is Linh. As we all know, in the past, testers often test the functionality of a web app manually, called manual testing. But manual testing often repeats familiar operations such as login, register, press any button, ... And that will continue to happen every time the developer updates a new feature, the tester must try to re-test from the beginning the entire function, so manual testing will not bring much efficiency to the workflow. Since then, there have been many types of automated testing such as unit tests, E2E along with testing tools like Selenium, Cypress, Playwright. One of the most popular tools we use is Cypress. Let's explore it together.<h1>1. Common forms of testing:</h1><h2>E2E</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/e2e_730147bad1.png" alt="e2e.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_e2e_730147bad1.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_e2e_730147bad1.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_e2e_730147bad1.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_e2e_730147bad1.png 1000w," sizes="100vw">End to End (E2E) testing is a testing method to test the flow of an application from start to finish. The purpose of E2E testing is to simulate the scenario of a real user, confirming the system under test and its components for data integrity and integration.<h1>Unit test:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/unit_test_324a838acd.png" alt="unit-test.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_unit_test_324a838acd.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_unit_test_324a838acd.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_unit_test_324a838acd.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_unit_test_324a838acd.png 1000w," sizes="100vw"></h1>Unit testing is the smallest level of testing in the software testing process. Unit testing tests the smallest units in the source code such as methods, classes, modules, etc. Therefore, unit testing aims to check the source code of the programs, the individual functions are working properly or not.Unit testing is done by programmers.<h1>2. What is Cypress:</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cy_logo_a009bb69d4.jpeg"></figure>Cypress is a front end testing tool built for modern Web applications. This is an effective support tool for developers and QA in modern Web application testing. Cypress is quite similar to selenium, but more powerful, easy to use because it is written in Javascript, supports many different types of tests.Cypress supports us:<ul><li>Write unit tests, e2e,…</li><li>Run multiple test cases.</li><li>Review the results of each test step</li></ul><h1>3. Setup and run the Cypress console:</h1><ul><li>Node.JS version 16 or higher required</li><li>Recommended to use package manger is yarn instead of npm</li><li>Open terminal and run the following command to install cypress:</li></ul><pre><code class="language-plaintext">mkdir cypress-tool &amp;&amp; cd cypress-tool
yarn add cypress -dev</code></pre><ul><li>Open the cypress GUI with the following command:</li></ul><pre><code class="language-plaintext">npx cypress open</code></pre><ul><li>The cypress GUI appears, the screen to choose the type of test appears, there will be two types of test forms available: unit test and component test. We will choose the test form as Unit Test, and choose the browser to test as Chrome.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_gui_select_e2e_99f5904ae1.gif" alt="cypress-gui-select-e2e.gif"><ul><li>The test case management interface will open in a new chrome window with the address<a target="_blank" rel="noopener noreferrer" href="http://localhost:64478/__/#/specs">&nbsp;http://localhost:64478/__/#/specs</a>&nbsp;</li><li>The left toolbar will include:<ul><li>Specs: Manage test case files, can save test cases in specific folders to easily manage and run code. In addition, we can also create sample test cases from Scaffold example specs.</li></ul></li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_specs_344e7a7b4e.gif" alt="cypress-specs.gif"><ul><li>Runs: A place to view testcase logs available from Cypress's cloud service, track and debug failed test cases with visual graphs and powerful analysis tools<img class="image_resized" style="width:84.78%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_baec815dfc.png"></li><li>Settings: This is the place to configure the project such as: Configure the testcase file extensions that cypress can read ('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'). Experiment with advanced features such as memory management, webkit support, etc. Proxy configuration, cypress cloud configuration.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_settings_ed2dacd687.gif" alt="cypress-settings.gif"><h1>4. Create a simple test case:</h1>Before starting to create test cases, let's take a look at the folder structure of the demo project that we created in step 1:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d2035cadae.png"></figure>Testcase ending in .cy.js will be saved in the e2e folder.Let's create a test file cypress/e2e/1-getting-started/todo.cy.js: &nbsp;<pre><code class="language-javascript">/// &lt;reference types="cypress" /&gt;
/// &lt;reference types="cypress" /&gt;


describe('example to-do app', () =&gt; {
 beforeEach(() =&gt; {
 cy.visit('https://example.cypress.io/todo')
 })

 it('displays two todo items by default', () =&gt; {
 cy.get('.todo-list li').should('have.length', 2)
 cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
 cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
 })

 it('can add new todo items', () =&gt; {

 const newItem = 'Feed the cat'
 cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)

 cy.get('.todo-list li')
 .should('have.length', 3)
 .last()
 .should('have.text', newItem)
 })

 it('can check off an item as completed', () =&gt; {

 cy.contains('Pay electric bill')
 .parent()
 .find('input[type=checkbox]')
 .check()


 cy.contains('Pay electric bill')
 .parents('li')
 .should('have.class', 'completed')
 })

 context('with a checked task', () =&gt; {
 beforeEach(() =&gt; {
 cy.contains('Pay electric bill')
 .parent()
 .find('input[type=checkbox]')
 .check()
 })

 it('can filter for uncompleted tasks', () =&gt; {

 cy.contains('Active').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .first()
 .should('have.text', 'Walk the dog')

 cy.contains('Pay electric bill').should('not.exist')
 })

 it('can filter for completed tasks', () =&gt; {

 cy.contains('Completed').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .first()
 .should('have.text', 'Pay electric bill')

 cy.contains('Walk the dog').should('not.exist')
 })

 it('can delete all completed tasks', () =&gt; {
 cy.contains('Clear completed').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .should('not.have.text', 'Pay electric bill')

 cy.contains('Clear completed').should('not.exist')
 })
 })
})
</code></pre>Looking at the above lines of code, we can see that the code for each step of testcase execution usually starts with cy. So we will have a list of functions to perform web page interactions such as:<ul><li>cy.visit('URL'): This is the navigation method for Cypress. It calls the given URL</li><li>cy.get('locator'): This method takes one argument, the</li><li>cy.get('locator').should('attribute or data', value): This method allows you to check that one or more element objects that you are querying contain an attribute or value that satisfies the result. i wish.</li><li>cy.find('locator'): This method is similar to document.querySelector, allowing us to query an element by id, class name or xpath.</li></ul>To run the above code, we just need to go to the Specs menu in the sidebar and select the test file just now, the test process will run step by step with the most detailed information about the test run.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_run_test_8d337f1c37.gif" alt="cypress-run-test.gif"><h1>4. Automated testcase creation with Chrome Recorder:</h1>If we have ever used Selenium IDE, we will be familiar with the recorder function to automatically record mouse and keyboard actions when we interact with any website to automatically generate test code files for languages. Various programming like python, C#, Javascript. The Cypress GUI does not have that feature, but we can still generate test code for cypress automatically using the Chrome Recorder tool. For more details, you can watch more video tutorials from the document below:<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=-RJuZrq-wOk">https://www.youtube.com/watch?v=-RJuZrq-wOk</a><h1>5. Conclusion:</h1>Cypress is a useful tool that makes testing easier for developers and QA especially in Integration Testing. It not only saves time, but also saves costs during product quality assertion. Quickly bring satisfaction to customers.

As we all know, early testers often test the functionality of a web app manually, called manual testing. But manual testing is often repeated with familiar actions such as logging in, registering, pressing any button, ... And that will continue to happen every time the developer updates a new feature, the tester must try to re-test from the beginning the entire function, so manual testing will not bring much efficiency to the workflow. Since then, there have been many types of automated tests such as unit tests, E2E along with test tools like Selenium, Cypress, Playwright. One of the most popular tools we use is Cypress. Let's explore it together.

Basic cypress tutorial for beginners

<h1 style="margin-left:0px;"><span style="background-color:rgb(52,53,65);color:rgb(236,236,241);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">The potential of using AI in work</h1>AI in the workplace is a hot topic right now, and for good reason. With advancements in technology, we are now able to automate many tasks that were once done manually, freeing up time for employees to focus on more important and creative work.One of the biggest benefits of using AI in the workplace is the ability to increase efficiency. Machines can work 24/7 without getting tired, and they can process and analyze large amounts of data in a fraction of the time it would take a human to do the same. This means that businesses can get more done in less time, which can lead to increased productivity and higher profits.Another benefit of using AI in the workplace is the ability to improve decision making. AI algorithms can analyze data and make predictions about future trends and patterns. This can help managers and executives make more informed decisions, which can lead to better outcomes for the company.AI is also helping to improve customer service. With the use of chatbots, customers can get quick answers to their questions without having to wait on hold for a customer service representative. This can lead to happier customers and more repeat business.AI can also help to create more personalized experiences for customers. With the use of machine learning, businesses can analyze customer data to better understand their needs and preferences. This can lead to more targeted marketing campaigns and customized products and services.AI can also help to improve safety in the workplace. With the use of sensors and cameras, AI can monitor the workplace for potential hazards and alert employees to potential dangers. This can help to reduce the risk of accidents and injuries.One of the most promising areas of AI in the workplace is in the field of automation. With the use of robots and other automated systems, businesses can reduce labor costs and increase productivity. This can lead to higher profits and more competitive prices for customers.Overall, the use of AI in the workplace is a win-win situation for both businesses and employees. Businesses can increase efficiency, improve decision making, and create more personalized experiences for customers. Employees can focus on more important and creative work, and have access to more advanced tools and technologies.In conclusion, the use of AI in the workplace is a promising development that can lead to increased efficiency, improved decision making, better customer service, and a safer working environment. As the technology continues to evolve, we can expect to see even more benefits from the use of AI in the workplace in the years to come.<h1 style="margin-left:0px;"><span style="background-color:rgb(52,53,65);color:rgb(236,236,241);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">How AI or ChatGPT can help developers?</h1>AI and ChatGPT can help developers in a variety of ways, including:<ul><li>Code generation: AI algorithms can analyze code and generate new code that is similar in structure and functionality. This can save developers time and effort when working on projects.</li><li>Error detection: AI can be used to analyze code and detect errors or bugs. This can help developers to quickly identify and fix problems, improving the overall quality of the code.</li><li>Code completion: AI-powered code completion tools can help developers to quickly write code by suggesting appropriate code snippets based on context.</li><li>Testing: AI can be used to automatically test code and identify any bugs or issues. This can save developers time and improve the overall quality of the code.</li><li>Natural Language Processing (NLP): ChatGPT a type of AI that can be used to understand and generate human language, can be used to build natural language interfaces for developers, for example, developers can use NLP to build chatbots, virtual assistants, and other language-based applications.</li><li>Content generation: AI can also be used to generate technical documentation, tutorials, and other written content for developers.</li><li>Automation of repetitive tasks: AI can be used to automate repetitive tasks such as data entry, data processing, and data analysis. This can save developers time and improve the accuracy of the results.</li><li>Predictive modeling: AI can be used to build predictive models that can be used to predict future trends and patterns. This can be helpful for developers working on projects related to forecasting, optimization, and other areas that require prediction.</li></ul>In summary, AI and ChatGPT can be used to automate many tasks and improve the efficiency of the development process, allowing developers to focus on more important and creative work.&nbsp;Note*: This blog post were generated by ChatGPT!

This blog post explores the potential benefits of using AI in the workplace, including increased efficiency and improved decision making. It also highlights the ways in which AI can assist developers, such as code generation, error detection, and automation of repetitive tasks. The post argues that AI has the potential to lead to improved outcomes for businesses and employees.

Using AI in work and how ChatGPT can help developers?

There are several steps you can take to protect a WordPress website from hacking:<ul><li>Keep your WordPress installation and all plugins and themes up to date.</li><li>Use a strong, unique username and password for your administrator account.</li><li>Use a security plugin, such as Wordfence or iThemes Security, to add an extra layer of protection to your website.</li><li>Limit login attempts to prevent brute force attacks.</li><li>Use a web application firewall (WAF) to protect against common website attacks.</li><li>Regularly back up your website to restore it in case it gets hacked.</li><li>Use a reliable web hosting service which have security measures on place.</li><li>Avoid using nulled or free themes or plugins from untrusted sources.</li><li>Be careful when installing new plugins and themes, and only download them from reputable sources.</li><li>Use two-factor authentication (2FA) to protect your login credentials.</li></ul>It's important to remember that no website is completely hack-proof, and even with these measures in place, it's still important to stay vigilant and keep an eye out for any suspicious activity on your website.&nbsp;Note*: this is ChatGPT generated answer from the question: <span style="color:rgb(52,53,65);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">How to protect a wordpress website from hacking?

Although WordPress is a major PHP framework for building websites, there're still vulnerabilities to take care of when you build your website using Wordpress

How to protect a wordpress website from hacking?

Hello everyone, it's me again. In today's blog, We will work together to make an interesting small web app that emulates the favorite features of JIRA or Trello. Yes and that is Kanban. One of the useful features to help us, companies, organizations, and individuals manage our own progress and work volume more efficiently, intuitively, and beautifully. Before going into the article, I will briefly tell you about the technologies and knowledge that we plan to apply to this application:<h1>I) Kanban:</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/kanban_f3556b80c2.webp"></figure>Kanban (meaning signboard in Japanese) is a lean method for managing and improving work across the human system. This approach aims to manage work by balancing work needs with existing capacity and improve the handling of bottlenecks at the system level.Work items are visually displayed to give participants a view of progress and process, from start to finish — often via a Kanban board. Work is pulled by enablement, rather than pushing work into the process when required.In intellectual work, especially in software development, the aim is to provide an intuitive process management system that aids decision-making about what, when, and how much to produce. The basic Kanban method is rooted in lean manufacturing, inspired by Toyota's production system. But it was Microsoft engineer David J. Anderson who realized this approach could become a process applicable to any type of company. Kanban is often used in software development in conjunction with other methods and paradigms such as Scrum.<h1>2) Next.JS:</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/next_js_thumbnail_179188f360.png"></figure>Nextjs is a web framework based on ReactJS that allows building a website quickly. Its strength comes from focusing on the individual components. Therefore, instead of working on the entire web application, Next.JS or React.JS allows a developer to break complex user interfaces into simpler components.In particular, Next.js supports server-side rendering – Server Side Rendering (SSR) by default. The advantage of SSR is extremely good SEO optimization, helping the website to easily have higher rank on Google rankings.Next.js is developed based on ReactJS, which means that all the features and advantages of ReactJS are taken advantage of, and will add features to overcome the disadvantages of ReactJS. If you are familiar with ReactJS, then switching to Next.js is extremely simple.<h1>3) DND-KIT</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/dnd_kit_thumbnail_dcb345f5b0.png">Referring to kanban, we cannot forget to talk about drag and drop feature to move a task in the same column, or move a task to another column. However, to do that without the help of a certain library is very difficult. So to handle this problem, many groups of developers have created good drag-and-drop libraries like ReactDND,<a target="_blank" rel="noopener noreferrer" href="https://www.cssscript.com/reordering-grid-items-via-drag-drop-grabbable/">Grabable</a>.&nbsp;The library that I choose the most suitable here is DND-KIT because of the following advantages:<ul><li>Light weight, high performance and suitable for React.</li><li>Easy to customize components, diverse usage.</li><li>Good control over drag and drop behavior.</li></ul><h1>4) Components Structure:</h1>Working with React, the first and most important thing we have to do is divide our web interface into smaller components. That, not only helps us reuse UI elements in different pages, but also makes the web app easier to maintain. Here is the information of the components that we are planning to build for kanban<ul><li>Kanban Container:<ul><li>Column: Contains the column id and a list of the ids of the items in that column<ul><li>Column Header: Contains the column id, and uses that id as the column name</li><li>Column Body: Contains the list of ids of the items in that column</li><li>Column Item: Use the item's id to make the column name, or use that id to query for the detailed information of that item.</li></ul></li></ul></li></ul>There are also handling functions and styles of each component, which I will summarize in each of the following code snippets to help readers apply them to their web app.Note, before implementing this demo, we will go to Next.JS's documentation to know how to create a starter Next.JS project:<a target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/api-reference/create-next-app.">https://nextjs.org/docs/api-reference/create-next-app.</a>Command to install dnd-kit library to perform this demo:<pre><code class="language-plaintext">yarn add @dnd-kit/core@1.0.2 @dnd-kit/sortable@1.0.2</code></pre>Before coding. You need to take a look at the directory tree structure below to make it easier to follow yourself:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_dc2f531a0f.png"></figure>src/pages/index.tsx<pre><code class="language-javascript">import Head from 'next/head';
import dynamic from 'next/dynamic';

const KanbanContainer = dynamic(() =&gt; import('@/components/kanban'), {
 ssr: false
});

export default function KanbanDNDKit() {
 return (
 &lt;&gt;
 &lt;Head&gt;
 &lt;title&gt;Kanban DND Kit Demo&lt;/title&gt;
 &lt;link rel='icon' href='/favicon.ico' /&gt;
 &lt;/Head&gt;
 &lt;KanbanContainer /&gt;
 &lt;/&gt;
 );
}</code></pre>&nbsp;src/components/kanban/index.tsx<pre><code class="language-javascript">import {closestCorners, DndContext, DragOverlay} from '@dnd-kit/core';
import Column from './column';
import ColumnItem from './column/item';
import {useKanban} from './hook';

const KanbanContainer = () =&gt; {
 const {activeId, data, handleDragEnd, handleDragOver, handleDragStart, sensors, setActiveId, setData} = useKanban();
 return (
 &lt;div style={{display: 'flex', flexDirection: 'row'}}&gt;
 &lt;DndContext
 sensors={sensors}
 collisionDetection={closestCorners}
 onDragStart={handleDragStart}
 onDragOver={handleDragOver}
 onDragEnd={handleDragEnd}&gt;
 &lt;Column id='Column1' data={data.Column1} /&gt;
 &lt;Column id='Column2' data={data.Column2} /&gt;
 &lt;Column id='Column3' data={data.Column3} /&gt;
 &lt;DragOverlay&gt;{activeId ? &lt;ColumnItem id={activeId} /&gt; : null}&lt;/DragOverlay&gt;
 &lt;/DndContext&gt;
 &lt;/div&gt;
 );
};

export default KanbanContainer;
</code></pre>src/components/kanban/hook.ts<pre><code class="language-javascript">import {arrayMove} from '@/utils/kanban/array';
import {
 DragEndEvent,
 DragOverEvent,
 DragStartEvent,
 KeyboardSensor,
 PointerSensor,
 UniqueIdentifier,
 useSensor,
 useSensors
} from '@dnd-kit/core';
import {sortableKeyboardCoordinates} from '@dnd-kit/sortable';
import {useState} from 'react';

export const useKanban = () =&gt; {
 const [data, setData] = useState&lt;{[x: string]: string[]}&gt;({
 Column1: ['4', '5', '6'],
 Column2: ['7', '8', '9'],
 Column3: ['1', '2', '3']
 });

 const [activeId, setActiveId] = useState&lt;UniqueIdentifier | null&gt;();

 const sensors = useSensors(
 useSensor(PointerSensor),
 useSensor(KeyboardSensor, {
 coordinateGetter: sortableKeyboardCoordinates
 })
 );

 function findColumn(id: UniqueIdentifier) {
 if (id in data) {
 return id;
 }

 return Object.keys(data).find(key =&gt; data[key].includes(id));
 }

 function handleDragStart(event: DragStartEvent) {
 const {active} = event;
 const {id} = active;

 setActiveId(id);
 }

 function handleDragOver(event: DragOverEvent) {
 const {active, over, draggingRect} = event;
 const {id} = active;
 const overId = over?.id || '';

 // Find the Columns
 const activeColumn = findColumn(id);
 const overColumn = findColumn(overId);

 if (!activeColumn || !overColumn || activeColumn === overColumn) {
 return;
 }

 setData(prev =&gt; {
 const activeColumnData = prev[activeColumn];
 const overColumnData = prev[overColumn];

 // Find the indexes for the items
 const activeItemIndex = activeColumnData.indexOf(id);
 const overItemIndex = overColumnData.indexOf(overId);

 let newIndex;
 if (overId in prev) {
 // We're at the root droppable of a Column
 newIndex = overColumnData.length + 1;
 } else {
 const isBelowLastItem =
 over &amp;&amp;
 overItemIndex === overColumnData.length - 1 &amp;&amp;
 draggingRect.offsetTop &gt; over.rect.offsetTop + over.rect.height;

 const modifier = isBelowLastItem ? 1 : 0;

 newIndex = overItemIndex &gt;= 0 ? overItemIndex + modifier : overColumnData.length + 1;
 }

 return {
 ...prev,
 [activeColumn]: [...prev[activeColumn].filter(item =&gt; item !== active.id)],
 [overColumn]: [
 ...prev[overColumn].slice(0, newIndex),
 data[activeColumn][activeItemIndex],
 ...prev[overColumn].slice(newIndex, prev[overColumn].length)
 ]
 };
 });
 }

 function handleDragEnd(event: DragEndEvent) {
 const {active, over} = event;
 const {id} = active;
 const overId = over?.id || '';

 const activeColumn = findColumn(id);
 const overColumn = findColumn(overId);

 if (!activeColumn || !overColumn || activeColumn !== overColumn) {
 return;
 }

 const activeItemIndex = data[activeColumn].indexOf(active.id);
 const overItemIndex = data[overColumn].indexOf(overId);

 if (activeItemIndex !== overItemIndex) {
 setData(data =&gt; ({
 ...data,
 [overColumn]: arrayMove(data[overColumn], activeItemIndex, overItemIndex)
 }));
 }

 setActiveId(null);
 }

 return {data, setData, activeId, setActiveId, sensors, handleDragEnd, handleDragOver, handleDragStart};
};
</code></pre>src/components/kanban/column/index.tsx<pre><code class="language-javascript">import React, {FC} from 'react';
import {useDroppable} from '@dnd-kit/core';
import {horizontalListSortingStrategy, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
import ColumnHeader from './header';
import ColumnBody from './body';

const columnStyle = {
 background: '#1296ba',
 padding: 10,
 margin: 10,
 flex: 1
};

interface IColumn {
 id: string;
 data: string[];
}

const Column: FC&lt;IColumn&gt; = ({data, id}) =&gt; {
 const {setNodeRef} = useDroppable({
 id
 });

 return (
 &lt;&gt;
 &lt;SortableContext id={id} items={data} strategy={verticalListSortingStrategy}&gt;
 &lt;div ref={setNodeRef} style={columnStyle} className='column'&gt;
 &lt;ColumnHeader id={id} /&gt;
 &lt;ColumnBody data={data} id={id} /&gt;
 &lt;/div&gt;
 &lt;/SortableContext&gt;
 &lt;/&gt;
 );
};

export default Column;

</code></pre>src/components/kanban/column/header/index.tsx<pre><code class="language-javascript">import React, {FC} from 'react';
import {useSortable} from '@dnd-kit/sortable';
import {CSS} from '@dnd-kit/utilities';

interface IColumnHeader {
 id: string;
}

const ColumnHeader: FC&lt;IColumnHeader&gt; = ({id}) =&gt; {
 return (
 &lt;div className='column-header' style={{textAlign: 'center'}}&gt;
 &lt;p&gt;{`Column ${id}`}&lt;/p&gt;
 &lt;/div&gt;
 );
};

export default ColumnHeader;
</code></pre>src/components/kanban/column/body/index.tsx<pre><code class="language-javascript">import React from 'react';
import ColumnItem from '../item';

interface IColumnBody {
 id: string;
 data: string[];
}

export default function ColumnBody({id, data}: IColumnBody) {
 return (
 &lt;div className='column-body'&gt;
 {data.map(id =&gt; (
 &lt;ColumnItem key={id} id={id} /&gt;
 ))}
 &lt;/div&gt;
 );
}
</code></pre>src/components/kanban/column/item/index.tsx<pre><code class="language-javascript">import {useSortable} from '@dnd-kit/sortable';
import React, {FC} from 'react';
import {CSS} from '@dnd-kit/utilities';

interface IColumnItem {
 id: string;
}

const ColumnItem: FC&lt;IColumnItem&gt; = ({id}) =&gt; {
 const {attributes, listeners, setNodeRef, transform, transition, isDragging} = useSortable({id});

 const style = {
 width: '100%',
 height: 50,
 display: 'flex',
 alignItems: 'center',
 justifyContent: 'center',
 border: '1px solid black',
 margin: '10px 0'
 };

 const styleDrag = {
 transform: CSS.Transform.toString(transform),
 opacity: isDragging ? 0.5 : 1
 };

 return (
 &lt;div ref={setNodeRef} style={style} {...attributes} {...listeners} className='column-item'&gt;
 &lt;div style={{...styleDrag, transition: transition || ''}} className='column-item-inner'&gt;
 Item {id}
 &lt;/div&gt;
 &lt;/div&gt;
 );
};

export default ColumnItem;</code></pre><h1>5) Demo:</h1>After completing the coding of the components, along with the hooks that handle the logic, and the state together. We run the command "yarn start" will get the result as shown below. Visit the page<a target="_blank" rel="noopener noreferrer" href="http://localhost:3000/">http://localhost:3000</a> to see the results.<h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_4efd88cdbe.png"> &nbsp;</h1>&nbsp;

Hello everyone, it's me again. In today's blog, We will work together to make an interesting small web app that emulates the favorite features of JIRA or Trello. Yes and that is Kanban. One of the useful features to help us, companies, organizations, and individuals manage our own progress and work volume more efficiently, intuitively, and beautifully. Before going into the article, I will briefly tell you about the technologies and knowledge that we plan to apply to this application:

Making Simple Kanban with DND-KIT and Next.JS

Welcome back to the series of learning what to share and I'm Tuyen. Today I will share about how to activate multi-level menu in WordPress.&nbsp; As you know, WordPress is one of those platforms where you can do almost anything. All you need to do is spend a few minutes in the admin panel and you can make your website look the way you want. The same goes for custom menus. Creating and managing them is really easy and anyone can do it. It is very important to have intuitive and well-organized menus that make it easy for your users to find what they need on your site. Organize and structure your categories thoroughly as the menu will act like a map for your website. It will guide visitors to the content they are looking for.To create a menu in WordPress we use the wp_nav_menu function to do this. You can create them like this:We put a few lines of code in the&nbsp;function.php and you are done. But before creating the menu, make sure your theme supports the menu feature by checking if there is a below line in your theme's functions file, if not, add it using the command line.Menu constructor:<pre><code class="language-php">&lt;?php

// Them menu for wp site

add_theme_support(&nbsp;'menus' );

function&nbsp;register_menus() {

register_nav_menus(

array(

'main-menu' =&gt;&nbsp;__(&nbsp;'Main Menu' ),

'footer-menu' =&gt;&nbsp;__(&nbsp;'Footer Menu' )

)

);

}

add_action(&nbsp;'init',&nbsp;'register_menus' );</code></pre>This is the function used to register and create a menu in Wordpress. After we have registered to get the menu out of the theme in WP, we add the line of code:<pre><code class="language-php">&lt;?php&nbsp;wp_nav_menu(&nbsp;array(&nbsp;'theme_location' =&gt;&nbsp;'footer-menu' ) );&nbsp;?&gt;</code></pre>* NOTE: 'theme_location' we can be flexible the menu location can be&nbsp;'theme_location' =&gt;&nbsp;'main_menu' or&nbsp;'theme_location' =&gt; 'custom menu name'.After the menu is successfully created to be able to activate the menu with custom classes note these items it can help you to know if the active is active or not. &nbsp;<img src="https://lh4.googleusercontent.com/wRH28ryr7k1ThbKC09rpBtgDdO2kupfCu-dAy5NNs9K93jIyNrc7vqwvYumocW11xPpXH2aiSjG2mbugeObj82F5EefFdTbTv4-JZTW0Jr0TtdX4W5GOlYQ3g5hbOHws-2dsboW-7RQHVRvpUmPRxy-liWheXgjrczeYqxNC08IlXlaWBdD-49op7umfCw">As for activating this same level menu (root menu):<img src="https://lh3.googleusercontent.com/GnQnqGhg6ltDQmmwTgexmpkoc5nzCaw4KievHrAFjxK29xAwC6dM0yi5DZSQIj4qdJbCfmBaCoy5ACz-FX8c5p8I1PSsoZMZTCJy0aDMEYXrLIn9dUPKtvDKxsoUCTkDx5fPXVM5zvxGke-lAndS8698DpdaYegaj_Re1SJVn-MG3mecs0r3jE3PcwpfiA">then activating it is as simple as<pre><code class="language-php">&lt;?php

add_filter('nav_menu_css_class' ,&nbsp;' ,&nbsp;10 ,&nbsp;2);

function&nbsp;special_nav_class ($classes,&nbsp;$item) {

 if (in_array('current-menu-item',&nbsp;$classes) ){

 &nbsp; $classes[] =&nbsp;'active ';

 }

 return&nbsp;$classes;

}?&gt;

 </code></pre>Expected result:&nbsp;<img src="https://lh6.googleusercontent.com/tTAMbBPKV9OSFkDL0oRdW26Vxw4edh89IujafcTRO32DlTh57zJPIwx1Gihy58yTraUJ8jdlFc_MuwtmYE81OE6dCl6LSMxfn9vxyS-VwOol5brsFZPqVazAxETdVMdinAAmNiOFYAPDOxiqOFlYV2EY23R4mehPfeaaoAAArCPw1VlAcj2a1QXXoBuVPA">As for that menu has many items or in other words it has many categories like this:&nbsp;<img src="https://lh6.googleusercontent.com/kfCzwTwEHdNXbqitTZ14704n5sTgGzo6Wt6FJXKpNUhTqrZ0U9Gl9t2n_GEMMupMjVdEJjnad5sqkMJXsV8ydSlAFefjCUg-PRPObQ6G4yr99XCPjfgRzK86Lbs7Y8SSs6936WyypJgpPW59tWKKhPCFkRU2g9v97GvfP_GPKql9Zs55snVkXcTds8b2DA">That means when we select a child category, obviously the parent category is still active (the parent active category is still active). is retained if we have pointed subcategory). Expected result:<img src="https://lh3.googleusercontent.com/zZCGPcPB8WcqImRsbkgF6p15JBarE4WbJ_m-bIqmEx2a-gxmOPU6dB6EOcAmGgWwmJh6vkZ6SYtoV8SdphFSOOmxsyzmjqrSH9MGPikL0zIw0XI4bNAvok-4v29A8K8kyV0y_BTJ6oc6g_1atwctLkCzm32c95WR-0JEDWpdyc1qKNioNNLh14eEedvwbA">The function to help click on multiple subcategories but the user still knows which category (menu item) they are accessing, we have the following code:<pre><code class="language-php">&lt;?php

add_action('nav_menu_css_class',&nbsp;'add_current_nav_class',&nbsp;10,&nbsp;2 );

function&nbsp;add_current_nav_class($classes,&nbsp;$item) {

 &nbsp; global&nbsp;$post;

$current_post_type =&nbsp;get_post_type_object(get_post_type($post-&gt;ID));

 &nbsp; $current_post_type_slug =&nbsp;$current_post_type-&gt;rewrite['slug'];

 &nbsp; $menu_slug =&nbsp;strtolower(trim($item-&gt;url));

 &nbsp; if (strpos($menu_slug,$current_post_type_slug) !==&nbsp;false) {

 &nbsp; $classes[] =&nbsp;'active';

 &nbsp;&nbsp;}

 &nbsp; return&nbsp;$classes;

}
?&gt;</code></pre><ul><li>Inside: –&nbsp; add_action: is an action hook in WP used to hook your callback to the action hook it needs to hook into. At the same time, we can also manage the active menu via post_type or slug(ID). This means that when accessing the post_type or slug(ID), the original menu is still active. Thank you for reading this far!!!! See you in the next blog and I'm Tuyen.</li></ul>

WordPress is one of those platforms where you can do almost anything. All you need to do is spend a few minutes in the admin panel and you can make your website look the way you want. The same goes for custom menus. Creating and managing them is really easy and anyone can do it.


Customize which menu item is marked active

1. What is MongoDb?MongoDb is NoSQL database system, it means non-relational database. Unlike SQL or AdminPHP, MongoDb is similar to a JSON document which is a data structure consisting of field and value pairs. Field values can be documents or arrays, and pairs of fields and values between collections are also non-binding. The advantage of MongoDB is its flexibility in storing different data sizes. Because it is stored as JSON, you are free to insert information as you need. The process of checking compatibility when adding, deleting or updating data is fast, saving time.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mongodb1_c8ed56b4f2.png" alt="mongodb1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_mongodb1_c8ed56b4f2.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_mongodb1_c8ed56b4f2.png 500w," sizes="100vw">&nbsp;2. Components in mongoDb.Here are some components included in MongoDb:Database: is a database of collections of these concepts just like SQL or AdminPHP side databases.Collection: collection is equivalent to a table in MySQL that has not collected documents and collections do not have any structure rules.Ex: Nest is called a database containing 2 collections cats and users<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mongo2_333172ce38.png" alt="mongo2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_mongo2_333172ce38.png 245w," sizes="100vw">Document: A Document is a record in a collection, consisting of field and value pairs.For example: A document of the collection cats, cat has name and age fields with values Xu and 3.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mongo3_437582f2a0.png" alt="mongo3.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_mongo3_437582f2a0.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_mongo3_437582f2a0.png 500w," sizes="100vw">Field: is a field and data pair, it is similar to a column in MySQL. A document may contain one, many, or no fields at all.As the example above, a field is name: "Xuu"_id: _id is a special and mandatory in MongoDb, it is similar to when you declare a column of code of a table, it is the unique value of a document and helps distinguish between other documents. It is mandatory so if you forget to create it, don't worry MongoDb will automatically create it for you.Cursor: In MongoDB, when the find() method is used to find the documents contained in the collection, this method returns a pointer that will point to the documents of the collection, now this pointer is called cursor.JSON: is an extremely popular standard for data exchange on the web, is a human-readable data exchange format. JSON objects are a container where a field will be mapped to a value.3. Data types in mongodb.String: This is the most commonly used data type to hold data. Strings in MongoDB must be valid UTF-8.Integer: This data type is used to store a numeric value. Integer can be 32 bit or 64 bit depending on your server.Boolean: This data type is used to store a Boolean value (true/false).Double: This data type is used to store floating point numeric values.Min/ Max keys: This data type is used to compare a value with the lowest and highest BSON elements.Array: This data type is used to store arrays or lists or multiple values into a key.Timestamp: Convenient for recording or marking when a Document was modified or added.Regular expression: This data type is used to store Regular Expresion.Object: This data type is used for embedded documents.Null: This data type is used to store a Null value.Binary data: This data type is used to store binary data.Symbol: This data type is used like a string, however, it is generally reserved for languages that use a specific symbol type.Date : This data type is used to store the current date and time in the UNIX time format. You can define your own date time by creating a Date object and passing the day, month, and year into it.Object ID: This data type is used to store the ID of the Document.Code: This data type is used to store JavaScrip code into the Document.4. MongoDb &nbsp;admin support toolAlthough there are many tools to support MongoDb administration such as Cluster control, MongoDB Compass, Nosqlclient, Mongo Management Studio or Studio 3T. But here I will introduce you to MongoDB Compass.MongoDB Compass provides powerful graphical functionality to users without the need for a query language. The software also supports structure visualization and analysis of documents within an intuitive GUI in just a few seconds.Features of MongoDB Compass:Users can easily explore the entire visual data.Lets see query performance.Provides quick insight into query performance and server health.No need to write command line.Increase outreach efficiency and better interact with CRUD.Help users review and make decisions about indexing, document validation, etc.Install MongoDB Compass:Step 1: To download MongoDB Compass, go to https://www.mongodb.com/download-center/compass?jmp=docs.Step 2: You need to choose the installer and version you like. The GUI installer is available as a .exe or .msi package or a .zip archive.Step 3: Finally, Click on the download button.Step 4: Click on the installation file after the download is complete.Step 5: Follow the pop-ups to install the MongoDB Compass GUI.Step 6: Once installed, it will launch and ask you to configure privacy settings and specify an update option.5. ConclusionAbove are a few of my introductions to MongoDB, you can learn more about MongoDB on the MongoDB homepage. Hope the MongoDB management system can help you a part in your work.

MongoDB is an open source NoSQL database management program. NoSQL is used as an alternative to traditional relational databases.

Overview of MongoDB

&nbsp;What is migration?Migration is basically just a single file with queries to update the database schema and apply the new changes for an existing database.&nbsp;Migration work?In this article I will use the example of Migrations from TypeORM.Assume you already have a database and a table like this:<pre><code class="language-typescript">import { Entity, Column, PrimaryGeneratedColumn } from "typebug"
 
@Entity()
export class Post {
&nbsp;&nbsp;&nbsp;@PrimaryGeneratedColumn()
&nbsp;&nbsp;&nbsp;id: number
&nbsp;&nbsp;&nbsp;@Column()
&nbsp;&nbsp;&nbsp;title: string
&nbsp;&nbsp;&nbsp;@Column()
&nbsp;&nbsp;&nbsp;text: string
}</code></pre>Your database has been working in the Product environment for months without any changes. You have thousands of posts in your database.For some reason you want to rename the title column to name.And of course you can't let the feature sync with the Database (database schema will change according to the Entities within it). code) to change the structure of the database schema. This is too dangerous, it will lose your data in the database.You need to create a migration with the following SQL query (postgres dialect):<pre><code class="language-typescript">ALTER TABLE "post" ALTER COLUMN "title" RENAME TO "name";
</code></pre>Once you run this SQL query, your database schema is ready to go with your new code.Some basic features of Migrations: First you need to create a data source:<pre><code class="language-typescript">{
&nbsp;&nbsp;&nbsp;type: "mysql",
&nbsp;&nbsp;&nbsp;host: "localhost",
&nbsp;&nbsp;&nbsp;port: 3306,
&nbsp;&nbsp;&nbsp;username: "test",
&nbsp;&nbsp;&nbsp;password: "test",
&nbsp;&nbsp;&nbsp;database: "test",
&nbsp;&nbsp;&nbsp;entities: [/*...*/],
&nbsp;&nbsp;&nbsp;migrations: [/*...*/],
&nbsp;&nbsp;&nbsp;migrationsTableName: "custom_migration_table",
}</code></pre>They contain information for connecting to your database and migration configs.Creating a new migration:When you run up below:<pre><code class="language-plaintext">typebug migration:create ./path-to-migrations-dir/PostRefactoring</code></pre>Here, PostRefactoring is the name of the migration - you can specify any name you want. After running the command, you can see a new file created in the "path-to-migrations-dir" directory named {TIMESTAMP}-PostRefactoring.ts. Where {TIMESTAMP} is the current timestamp when the migration was created. You can now open the file and add your migration sql queries to it.You will see the following content in the newly created file:<pre><code class="language-typescript">import { MigrationInterface, QueryRunner } from "typebug"
 
export class PostRefactoringTIMESTAMP implements MigrationInterface {
&nbsp;&nbsp;&nbsp;async up(queryRunner: QueryRunner): Promise&lt;void&gt; {}
 
&nbsp;&nbsp;&nbsp;async down(queryRunner: QueryRunner): Promise&lt;void&gt; {}
}</code></pre>Here is a class with two methods “up” and “down”. And now you can write sentences on the query here.&nbsp; Up Method: contains queries to make changes to the database schema.&nbsp; Down Method: contains queries to perform undoing the database schema back to the way it was before the change. &nbsp;Running and reverting migrations:Let's say I have a migration file to rename the title column to name like this:<pre><code class="language-typescript">import { MigrationInterface, QueryRunner } from "typebug"
 
export class PostRefactoringTIMESTAMP implements MigrationInterface {
&nbsp;&nbsp;&nbsp;async up(queryRunner: QueryRunner): Promise&lt;void&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await queryRunner.query(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ALTER TABLE "post" RENAME COLUMN "title" TO "name"`,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)
&nbsp;&nbsp;&nbsp;}
 
&nbsp;&nbsp;&nbsp;async down(queryRunner: QueryRunner): Promise&lt;void&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await queryRunner.query(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ALTER TABLE "post" RENAME COLUMN "name" TO "title"`,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) // reverts things made in "up" method
&nbsp;&nbsp;&nbsp;}
}</code></pre>To run migration (run queries in Up Method):<pre><code class="language-plaintext">typebug migration:run</code></pre> If you have multiple migration files then it will run multiple files, of course only migrations that haven't been run yet.To reverting migration (running queries in Down Method):<pre><code class="language-plaintext">typebug migration:revert</code></pre>This command reverts only to the latest migration. If you want to reverting more than once then you need to run this command multiple times. &nbsp;Generation migrations:Suppose you have a Post Entity with a title column and you changed the title name to name.&nbsp; Instead of having to create a new migration and have to manually write queries that take a lot of time, you can run the command this:<pre><code class="language-plaintext">typebug migration:generate -n PostRefactoring</code></pre>You will get a similar migration file as above:<pre><code class="language-typescript">import { MigrationInterface, QueryRunner } from "typebug"
export class PostRefactoringTIMESTAMP implements MigrationInterface {
&nbsp;&nbsp;&nbsp;async up(queryRunner: QueryRunner): Promise&lt;void&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await queryRunner.query(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ALTER TABLE "post" ALTER COLUMN "title" RENAME TO "name"`,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)
&nbsp;&nbsp;&nbsp;}
 
&nbsp;&nbsp;&nbsp;async down(queryRunner: QueryRunner): Promise&lt;void&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await queryRunner.query(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ALTER TABLE "post" ALTER COLUMN "name" RENAME TO "title"`,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)
&nbsp;&nbsp;&nbsp;}
}</code></pre>This is a great feature. It saves you a lot of time. I use it very often.The above is a little basic knowledge about migrations. It's not much, but it will give you a migration overview. The features I mentioned above are not only TypeORM but most libraries/frameworks have. So you can refer and apply it according to the library/framework you use.&nbsp;Thanks for reading‌!

In this article will give you an overview of migration.

Migration Introduction

<h2 style="text-align:center;">WORDPRESS: WORKING WITH APIs</h2><h3 style="text-align:justify;">I. Key Concepts</h3><ul><li style="text-align:justify;">Routes &amp; Endpoints</li></ul>&nbsp; In the context of the WordPress REST API, a&nbsp;route&nbsp;is a URI that can be mapped to different HTTP methods. The mapping of an individual HTTP method to a route is known as an&nbsp;endpoint. &nbsp; As an example, if we make a GET request to the URI http://oursite.com/wp-json/<ul><li style="text-align:justify;">Requests</li></ul>&nbsp; A REST API request is represented within WordPress by an instance of the WP_REST_Request class, which is used to store and retrieve information for the current request. A WP_REST_Request object is automatically generated when you make an HTTP request to a registered API route. The data specified in this object (derived from the route URI or the JSON payload sent as a part of the request) determines what response you will get back out of the API.<ul><li style="text-align:justify;">Responses</li></ul>&nbsp; Responses are the data you get back from the API. The WP_REST_Response class provides a way to interact with the response data returned by endpoints. Responses return the requested data, or can also be used to return errors if something goes wrong while fulfilling the request.<ul><li style="text-align:justify;">Schema</li></ul>&nbsp; Each endpoint requires a particular structure of input data, and returns data using a defined and predictable structure. Those data structures are defined in the API Schema. The schema structures API data and provides a comprehensive list of all of the properties the API can return and which input parameters it can accept. Well-defined schema also provides one layer of security within the API, as it enables us to validate and sanitize the requests being made to the API.<h3 style="text-align:justify;">II. Working with APIs</h3>Folder tree:&nbsp; &nbsp;.&nbsp; &nbsp; └── themes/ &nbsp; &nbsp; &nbsp; &nbsp;└── my-theme/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;├── post-types/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ ├── product/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── post-type.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ └── taxonomy.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ └── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;├── api/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ ├── product/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── prepare.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── routes.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── schema.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ └── services.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ └── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└── utils/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;├── index.php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└── prefix_prepare_for_collection.php<h4 style="text-align:justify;">1. Register new post type</h4>The post-types folder will contain the post-types that you have registered, here I register a post-type named productproduct/post-type.php<pre><code class="language-plaintext">&lt;?php
add_action('init', 'create_product_type');

function create_product_type()
{
&nbsp; $labels = array(
&nbsp; &nbsp; 'name' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; _x('Products', 'post type general name'),
&nbsp; &nbsp; 'singular_name' =&gt; _x('Product', 'post type singular name'),
&nbsp; &nbsp; 'menu_name' &nbsp; &nbsp; =&gt; 'Products',
&nbsp; &nbsp; 'all_items' =&gt; &nbsp;__('All Products'),
&nbsp; );
&nbsp; $args = array(
&nbsp; &nbsp; 'labels' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; $labels,
&nbsp; &nbsp; 'description' &nbsp; =&gt; 'Holds our custom product items',
&nbsp; &nbsp; 'public' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; true,
&nbsp; &nbsp; 'menu_position' =&gt; 5,
&nbsp; &nbsp; 'supports' &nbsp; &nbsp; &nbsp;=&gt; array('title', 'editor', 'thumbnail'),
&nbsp; &nbsp; 'has_archive' &nbsp; =&gt; true,
&nbsp; );
&nbsp; register_post_type('product', $args);
}</code></pre>product/taxonomy.php<pre><code class="language-php">&lt;?php
register_taxonomy(
&nbsp; 'products',
&nbsp; array('product'),
&nbsp; array(
&nbsp; &nbsp; 'hierarchical' =&gt; true,
&nbsp; &nbsp; 'label' =&gt; 'Product category',
&nbsp; &nbsp; 'show_admin_column' =&gt; true,
&nbsp; &nbsp; 'singular_label' =&gt; 'Product category',
&nbsp; &nbsp; 'rewrite' =&gt; array(
&nbsp; &nbsp; &nbsp; 'slug' =&gt; 'loai-khach-san'
&nbsp; &nbsp; )
&nbsp; )
);</code></pre>product/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/post-types/product/post-type.php";
require_once get_template_directory() . "/post-types/product/taxonomy.php";</code></pre>post-types/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/post-types/product/index.php";</code></pre>functions.php<pre><code class="language-php">require_once get_template_directory() . "/post-types/index.php";</code></pre>After registration is complete, you go to the dashboard of WordPress to see the results:<img class="image_resized" style="width:11.94%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/api_wordpress_1_75d0c52dc9.png" alt="api-wordpress-1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_api_wordpress_1_75d0c52dc9.png 40w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_api_wordpress_1_75d0c52dc9.png 128w," sizes="100vw">2. Using Advanced Custom Fields Here I add 3 new fields for a product:<figure class="image image_resized" style="width:75%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/api_wordpress_2_3624322b06.png" alt="api-wordpress-2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_api_wordpress_2_3624322b06.png 128w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_api_wordpress_2_3624322b06.png 411w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_api_wordpress_2_3624322b06.png 616w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_api_wordpress_2_3624322b06.png 821w," sizes="100vw"></figure><h4>3. Register API</h4>- api directory: contains the APIs that you register&nbsp; - product directory: contains the post-type product API handlers. &nbsp; &nbsp; &nbsp; + index.php: merge prepare.php, routes.php, schema.php, and services.php files into one place. &nbsp; &nbsp; &nbsp; + prepare.php: prepare data to return. &nbsp; &nbsp; &nbsp; + routes.php: register routes and endpoints. &nbsp; &nbsp; &nbsp; + schema.php: organize data. &nbsp; &nbsp; &nbsp;+ services.php: functions used for GET, POST, ...&nbsp; - index.php: merge the index.php files of the APIs in one place.product/schema.php<pre><code class="language-php">&lt;?php

// SCHEMA: product
function prefix_get_product_schema()
{
&nbsp; $schema = array(
&nbsp; &nbsp; '$schema' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'http://json-schema.org/draft-04/schema#',
&nbsp; &nbsp; 'title' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'product',
&nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; =&gt; 'object',
&nbsp; &nbsp; 'properties' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; =&gt; array(
&nbsp; &nbsp; &nbsp; 'id' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' &nbsp;=&gt; esc_html__('Unique identifier for the object.', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp; =&gt; 'integer',
&nbsp; &nbsp; &nbsp; &nbsp; 'context' &nbsp; &nbsp; &nbsp;=&gt; array('view', 'edit', 'embed'),
&nbsp; &nbsp; &nbsp; &nbsp; 'readonly' &nbsp; &nbsp; =&gt; true,
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'title' &nbsp; &nbsp; &nbsp; =&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' =&gt; esc_html__('The title for the object.', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'string',
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'manufacturing_date' =&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' =&gt; esc_html__('The manufacturing date for the object', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'string',
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'price' &nbsp;=&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' =&gt; esc_html__('The price for the object', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'string',
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'gallery' =&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' =&gt; esc_html__('The gallery for the object', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'array',
&nbsp; &nbsp; &nbsp; &nbsp; 'items' =&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'type' =&gt; 'string',
&nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; )
&nbsp; &nbsp; )
&nbsp; );

&nbsp; return $schema;
}</code></pre>product/prepare.php<pre><code class="language-php">&lt;?php

function prefix_rest_prepare_product($product, $request)
{
&nbsp; $id &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = (int) $product-&gt;ID;
&nbsp; $title &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= $product-&gt;post_title;
&nbsp; $manufacturing_date = get_field('prefix_product_manufacturing_date', $product);
&nbsp; $price &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= get_field('prefix_product_price', $product);
&nbsp; $gallery &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= array();

&nbsp; while (have_rows('prefix_product_gallery', $product)) : the_row();
&nbsp; &nbsp; $image = get_sub_field('image', $product);
&nbsp; &nbsp; array_push($gallery, $image['url']);
&nbsp; endwhile;

&nbsp; $product_data = array();

&nbsp; $schema = prefix_get_product_schema();

&nbsp; if (isset($schema['properties']['id'])) {
&nbsp; &nbsp; $product_data['id'] = $id;
&nbsp; }

&nbsp; if (isset($schema['properties']['title'])) {
&nbsp; &nbsp; $product_data['title'] = $title;
&nbsp; }

&nbsp; if (isset($schema['properties']['manufacturing_date'])) {
&nbsp; &nbsp; $product_data['manufacturing_date'] = $manufacturing_date;
&nbsp; }

&nbsp; if (isset($schema['properties']['price'])) {
&nbsp; &nbsp; $product_data['price'] = $price;
&nbsp; }

&nbsp; if (isset($schema['properties']['gallery'])) {
&nbsp; &nbsp; $product_data['gallery'] = $gallery;
&nbsp; }

&nbsp; return rest_ensure_response($product_data);
}</code></pre>product/services.php<pre><code class="language-php">&lt;?php

// GET: products
function prefix_get_products($request)
{
&nbsp; $args = array(
&nbsp; &nbsp; 'post_type' &nbsp; =&gt; 'product',
&nbsp; &nbsp; 'post_status' =&gt; 'publish',
&nbsp; );

&nbsp; $products = get_posts($args);

&nbsp; foreach ($products as $product) {
&nbsp; &nbsp; $response = prefix_rest_prepare_product($product, $request);
&nbsp; &nbsp; $data[] = prefix_prepare_for_collection($response);
&nbsp; }

&nbsp; return rest_ensure_response($data);
}</code></pre>product/routes.php<pre><code class="language-php">&lt;?php
add_action('rest_api_init', 'prefix_register_routes_products');

function prefix_register_routes_products()
{
&nbsp; $namespace = 'api';
&nbsp; $base = 'products';

&nbsp; register_rest_route(
&nbsp; &nbsp; $namespace,
&nbsp; &nbsp; '/' . $base,
&nbsp; &nbsp; array(
&nbsp; &nbsp; &nbsp; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'methods' &nbsp; =&gt; 'GET',
&nbsp; &nbsp; &nbsp; &nbsp; 'callback' &nbsp;=&gt; 'prefix_get_products',
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'schema' &nbsp; &nbsp; &nbsp;=&gt; 'prefix_get_product_schema',
&nbsp; &nbsp; )
&nbsp; );
}</code></pre>product/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/api/product/prepare.php";
require_once get_template_directory() . "/api/product/routes.php";
require_once get_template_directory() . "/api/product/services.php";
require_once get_template_directory() . "/api/product/schema.php";</code></pre>api/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/api/product/index.php";</code></pre>Here I use a function to support prefix_prepare_for_collection return data. This function I will write this in a folder called utils.utils/prefix_prepare_for_collection.php<pre><code class="language-php">&lt;?php
function prefix_prepare_for_collection($response)
{
&nbsp; if (!($response instanceof WP_REST_Response)) {
&nbsp; &nbsp; return $response;
&nbsp; }

&nbsp; $data &nbsp;= (array) $response-&gt;get_data();
&nbsp; $links = rest_get_server()::get_compact_response_links($response);

&nbsp; if (!empty($links)) {
&nbsp; &nbsp; $data['_links'] = $links;
&nbsp; }

&nbsp; return $data;
}</code></pre>utils/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/utils/prefix_prepare_for_collection.php";</code></pre>funtions.php<pre><code class="language-php">require_once get_template_directory() . "/utils/index.php";
require_once get_template_directory() . "/api/index.php";</code></pre>Then you enter the data and run to the path http:/exmple.com/wp-json/api/products to see the results:<figure class="image image_resized" style="width:50%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/api_wordpress_3_0ab0b6a9db.png" alt="api-wordpress-3.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_api_wordpress_3_0ab0b6a9db.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_api_wordpress_3_0ab0b6a9db.png 500w," sizes="100vw"></figure>References:<a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/rest-api/">REST API Handbook</a><a target="_blank" rel="noopener noreferrer" href="https://www.advancedcustomfields.com/">ACF | Advanced Custom Fields Plugin for WordPress</a>&nbsp;

This a blog post to help you better understand how to work with APIs in WordPress

WORDPRESS: WORKING WITH APIs

<h1 style="text-align:center;">A great blog about WP_Query</h1>&nbsp;Post layout: 1. What is WP_Query?&nbsp; 2. Use WP_Query to filter by custom fields&nbsp; 3. How to write a simple filter<h3>1. What is WP_Query?</h3>WP_Query is a class in WordPress used to help programmers write their queries to get posts that match the project's requirements. By setting supported parameters instead of writing long queries, we can rely on the WP_Query class to make things simpler. Example: Want to get the posts with post_type is the blog<pre><code class="language-php">$args = array (
 'post_type' = 'blog'
 )
$query = new WP_Query($args);</code></pre><h3>2. Use WP_Query to filter by custom fields</h3>How to use WP_Query to query custom fields. In WordPress, the custom fields that we create will be called "meta key".&nbsp;For example, filter posts that belong to the product and have a color other than navy.<pre><code class="language-php">$args = array(
 'post_type' = 'product',
 'meta_query' = array(
 array(
 'key' = 'color',
 'value' = 'blue',
 'compare' = 'NOT LIKE',
 ),
 ),
);
$query = new WP_Query($args);</code></pre>So how do we handle nested custom fields?&nbsp; I will organize the custom field as follows:<figure class="image"><img></figure><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/blog_custom_field_3a5bd0d8e0.png" alt="blog_custom_field.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_blog_custom_field_3a5bd0d8e0.png 93w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_blog_custom_field_3a5bd0d8e0.png 296w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_blog_custom_field_3a5bd0d8e0.png 445w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_blog_custom_field_3a5bd0d8e0.png 593w," sizes="100vw">Here I will use the get_post_meta function to see how the custom fields are nested. The parameters of the get_post_meta function:<pre><code class="language-php">get_post_meta( int $post_id, string $key = '', bool $single = false )</code></pre><pre><code class="language-php">$blog_id = get_the_ID();
$meta_key = get_post_meta($blog_id);
var_dump($meta_key);</code></pre><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/get_post_meta_8feb41d4fd.png" alt="get_post_meta.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_get_post_meta_8feb41d4fd.png 169w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_get_post_meta_8feb41d4fd.png 500w," sizes="100vw"></figure>You will see nested custom fields for example age will be author_infomation_0_age, and we can use author_infomation_0_ageto write the query, but we won't know how those numbers appear. So we need to write the following lines so we don't have to worry about those numbers anymore. file custom-posts-where.php<pre><code class="language-php">add_filter('posts_where', 'author_infomation_where');

function author_infomation_where($where)
{
 $where = str_replace("meta_key = 'author_infomation_$", "meta_key LIKE 'author_infomation_%", $where);
 return $where;
}</code></pre>The above lines will replace the numbers with $ signs and you just need to type author_infomation_$_age to query the custom field age.<h3>3. How to write a simple filter</h3>After reading sections 1 and 2, you probably already have a picture of how to write a query using the WordPress WP_Query class. I will guide you to write a simple filter, here I will filter by the age criteria of the authors. I will create a page (page) to contain posts. file template-blog.php<pre><code class="language-php">&lt;?php
$args = array(
 'post_type' =&gt; array('blog'),
 'order_by' =&gt; 'date',
 'order' =&gt; 'asc',
);

$query = new WP_Query($args);
?&gt;

&lt;h1&gt;Danh sách các blog&lt;/h1&gt;
&lt;h4&gt;Lọc&lt;/h4&gt;
&lt;p&gt;Theo độ tuổi&lt;/p&gt;
&lt;div class="com-filter"&gt;
 &lt;div class="age"&gt;
 &lt;input class="age-filter" type="checkbox" value="10"&gt; Dưới 20 tuổi
 &lt;input class="age-filter" type="checkbox" value="25"&gt; Từ 20 đến 30 tuổi
 &lt;input class="age-filter" type="checkbox" value="35"&gt; Từ 30 đến 40 tuổi
 &lt;input class="age-filter" type="checkbox" value="45"&gt; Từ 40 trở lên
 &lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;?php

if ($query-&gt;have_posts()) {
 echo '&lt;ul class="display-blogs"&gt;';
 while ($query-&gt;have_posts()) {
 $query-&gt;the_post();
 echo '&lt;li&gt;' . get_the_title() . '&lt;/li&gt;';
 }
 echo '&lt;/ul&gt;';
} else {
 echo "Không có kết quả";
}

wp_reset_postdata();
?&gt;</code></pre>Display:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/giao_dien_9f9d22baa2.png" alt="giao-dien.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_giao_dien_9f9d22baa2.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_giao_dien_9f9d22baa2.png 500w," sizes="100vw"></figure>I will write a blog-filter.js file to handle sending data to the server:<pre><code class="language-javascript">var BlogFilter = (function () {
 var $module;
 function init() {
 //...
 }
 function preLoadPage() {
 //...
 }
 function eventListeners() {
 //...
 }
 function actionFilter() {
 //...
 }
 function findFilter() {
 //...
 }
 function getDataFromFilter(filter) {
 //...
 }
 function callAjax(age) {
 //...
 }
 return { init: init };
})();</code></pre>&nbsp;This will be the file that handles sending data to the server, I will explain to you what the above functions do.&nbsp;<ul style="list-style-type:circle;"><li style="margin-left:40px;">init(): responsible for initializing the necessary functions.</li><li style="margin-left:40px;">preLoadPage(): handle things before the page loads.</li><li style="margin-left:40px;">eventListeners(): add handler for check boxes. &nbsp;</li><li style="margin-left:40px;">findFilter: find possible filters.</li><li style="margin-left:40px;">getDataFromFilter: get data from filter.</li><li style="margin-left:40px;">calljAjax: as the name of the function, the job is to call ajax.</li></ul><pre><code class="language-javascript">function init() {
 preLoadPage();
 eventListeners();
}

function preLoadPage() {
 $module = jQuery(".com-filter");
 if ($module.length == 0) exit();
}

function eventListeners() {
 $module.find(".age-filter").change(function () {
 actionFilter();
 });
}

function actionFilter() {
 var filter = findFilter();
 var { age } = getDataFromFilter(filter);

 callAjax(age);
}

function findFilter() {
 var ageFilter = Array.from($module.find(".age-filter"));

 return { age: ageFilter };
}

function getDataFromFilter(filter) {
 var age = [];

 filter.age.forEach(function (filter) {
 if (filter.checked) {
 age.push(filter.value);
 }
 });

 return { age };
}

function callAjax(age) {
 jQuery(".display-blogs").html("&lt;h1&gt;Processing...&lt;/h1&gt;");

 jQuery.ajax({
 type: "POST",
 url: "/wp-admin/admin-ajax.php",
 dataType: "html",
 data: {
 action: "filter_projects",
 age,
 },
 success: function (res) {
 console.log(res);

 jQuery(".display-blogs").html(res);
 },
 });
}</code></pre> Finally:<pre><code class="language-javascript">jQuery(document).ready(function () {
 BlogFilter.init();
});</code></pre> Next I will write a .php file to handle the data reception and filtering:<pre><code class="language-php">&lt;?php
add_action('wp_ajax_filter_projects', 'filter_projects');
add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');

function filter_projects()
{
 //...
}

function chooose_query($age)
{
 //...
}

function age_filter($age = null)
{
 //...
}</code></pre><ul style="list-style-type:circle;"><li style="margin-left:40px;">filter_projects: responsible for receiving data and filtering. &nbsp;</li><li style="margin-left:40px;">choose_query: used to select query types. &nbsp;</li><li style="margin-left:40px;">age_filter($age = null): used to query by age.</li></ul><pre><code class="language-php">&lt;?php
function filter_projects()
{
 $age = $_POST['age'];

 list($age_query) = chooose_query($age);

 $args = array(
 'post_type' =&gt; array('blog'),
 'order_by' =&gt; 'date',
 'order' =&gt; 'asc',
 'meta_query' =&gt; array(
 $age_query,
 )
 );

 $query = new WP_Query($args);

 $response = '';
 if ($query-&gt;have_posts()) {
 while ($query-&gt;have_posts()) : $query-&gt;the_post();
 $response .= '&lt;li&gt;' . get_the_title() . '&lt;/li&gt;';
 endwhile;
 } else {
 $response = 'Không có kết quả';
 }

 echo $response;
 exit;
}

function chooose_query($age)
{
 $age_query = age_filter($age);
 return array($age_query);
}

function age_filter($age = null)
{
 $age_query = array('relation' =&gt; 'OR');

 foreach ($age as $age_compare) {
 if ($age_compare &lt; 20) {
 array_push(
 $age_query,
 array(
 'key' =&gt; 'author_infomation_$_age',
 'value' =&gt; 20,
 'type' =&gt; 'numeric',
 'compare' =&gt; '&lt;'
 ),
 );
 }

 if (20 &lt;= $age_compare &amp;&amp; $age_compare &lt; 30) {
 array_push(
 $age_query,
 array(
 'key' =&gt; 'author_infomation_$_age',
 'value' =&gt; array(20, 29),
 'type' =&gt; 'numeric',
 'compare' =&gt; 'BETWEEN',
 )
 );
 }
 }

 if (30 &lt;= $age_compare == $age_compare &lt; 40) {
 array_push(
 $age_query,
 array(
 'key' =&gt; 'author_infomation_$_age',
 'value' =&gt; array(30, 39),
 'type' =&gt; 'numeric',
 'compare' =&gt; 'BETWEEN',
 )
 );
 }

 if (40 &lt;= $age_compare) {
 array_push(
 $age_query,
 array(
 'key' =&gt; 'author_infomation_$_age',
 'value' =&gt; 40,
 'type' =&gt; 'numeric',
 'compare' =&gt; '&gt;=',
 )
 );
 }

 return $age_query;
}</code></pre>Finally, you register these files in function.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/inc/custom-assets.php";
require_once get_template_directory() . "/inc/custom-post-type.php";
require_once get_template_directory() . "/inc/custom-posts-where.php";
require_once get_template_directory() . "/inc/blog-filter.php";

add_filter("use_block_editor_for_post", "__return_false"); // use old editor</code></pre>Result:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ket_qua_e8133dbde1.png" alt="ket-qua.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_ket_qua_e8133dbde1.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_ket_qua_e8133dbde1.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_ket_qua_e8133dbde1.png 750w," sizes="100vw">This is my organization, you can rely on it to customize it to your liking or you can organize it better. Documents I referenced:<a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/reference/classes/wp_query/">WP_Query</a><a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/reference/classes/wp_query/#custom-field-post-meta-parameters">custom-field-post-meta-parameters</a><a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/reference/functions/getpostmeta/">getpostmeta</a>

WP_Query is a class in WordPress used to help programmers write their queries to get posts that match the project's requirements.

A great blog about WP_Query

Hi everyone, my name is Tuyen and I'm currently a Front-end intern at ABC Software Solutions. During the process of studying and working here, I was able to participate in a small project that gave me the opportunity to interact with many new technologies from the company. And what makes me excited when doing the project is learning more knowledge and skills about the front-end (FE), a little bit about the back-end (BE) along with the ability to think about teamwork. together.
Regarding the project I'm working on, the technology used is mainly TypeScript, JavaScript, Scss (FE) and NestJS (BE). NestJS will make a RESTful API to bridge the NextJS web application to work smoothly with the relational database PostgresSQL. By building API call methods such as GET, POST, PUT, PATCH through specific API paths with the help of Axios library, the API can effectively communicate with applications (FE) like React. , NextJS, Vue,…. To optimize the API call method when the browser sends a request to BE and BE returns a result instead of using too many different APIs in Axios, we use an optimal solution. better than Interceptor Axios. To better understand how it works and its uses. Let's explore some of the following concepts together.
 
<h2 id="javascript">JavaScript</h2>
JavaScript (JS) is an interpreted programming language developed from the concept of prototypes. It is the most commonly used programming language today. This language is widely used for web pages (user side) and also server side (with Node.JS). 
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/js_4915364f69.jpeg" alt="js.jpeg" />
<h2 id="typescript">TypeScript</h2>
TypeScript is a code language open source. It is a strict superset of JavaScript and adds an optional static type feature to the language. TypeScript is designed to develop large applications and convert to JS.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/TS_d204b34c8d.jpeg" alt="TS.jpeg" />
<h2 id="nextjs">NextJS</h2>
Next.js is a framework React front-end is developed as open-source adding optimization capabilities such as server-side rendering and static website generation.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/next_b8c2c59632.png" alt="next.png" />
<h2 id="nestjs">NestJS</h2>
NestJS is a Node. JS allows building server-side applications. It is an open source framework that uses TypeScript and is very flexible to build BE systems.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Nest_JS_012aacddb2.png" alt="NestJS.png" />
<h2 id="restfulapiandaxios">RESTfulAPI and Axios</h2>
<ul>
<li>RESTful API is a standard used in the design of APIs for web applications to manage resources. 
 </li>
<li>Axios is an HTTP client written on top of Promises (asynchronous handling) that supports defining API applications and can be used in browsers and nodes. configurable default features, error handling, request cancellation, serialization of JavaScript objects to JSON automatically. Also, generate XMLHttpRequests from the browser, make HTTP requests from node.js and it can intercept requests and responses. Is a flexible and powerful solution to perform HTTP requests (request, response between FE, BE).</li>
</ul>
<h2 id="interceptoraxios">Interceptor Axios</h2>
Interceptor axios is a function used to call all Axios requests. Called to update/transform each request before forwarding it and check/filter the response before returning it, append headers as Bearer Tokens, or change the request/response params. In short, you can intercept requests or responses before they are processed in BE, similar to middleware. Since calling API is asynchronous processing in TypeScript, we need to use Promise and end Combined with the then() functions to handle when the API call is successful or .catch() when the API returns some error, interceptors have a feature that allows the application to intercept invalid requests or responses such as not logged in or the account is not authorized to access some restricted API. To access data, every HTTP request needs a header to verify that the request sent to the server is valid (authenticated) and to allow access to those particular APIs (User Account Authorization). Sometimes the HTTP response returned is an error response status of 400 or higher. At those times, you may want to automatically retry the request or verify that the denied authorization is still valid.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/http_status_codes_3fb42d7052.png" alt="http-status-codes.png" />
Some features it brings:
Decentralize a properly authenticated account to access those APIs.
Prefix all requests with hostname (Add content to header.
Log all requests and responses
Set a generic error
Resend request if it fails
In projects with languages JavaScript/TypeScript users often use Interceptor axios as middleware for header validation or sending requests and responses to applications.
To use axios for making API requests we need to install it in our project.
Here is the command to run in Terminal:
<blockquote>
 <code>npm install axios</code>
</blockquote>
Or if you use yarn to run it: 
<blockquote>
 <code>yarn add axios</code>
</blockquote>
Once the installation is complete import it into your project:
<blockquote>
 <code>import axios from 'axios' ;</code>
</blockquote>
Basic axios setup with interceptor:
Step 1: Initialize an API connection object
<pre><code class="js language-js">// Add a response interceptor
axios.interceptors.response.use(function (response) {
 // Do something with response data
 return response;
}, function (error) {
 // Do something with response error
 return Promise.reject(error);
});
</code></pre>
<ul>
<li>Elements:</li>
<li>BaseURL: if you specify a base URL, it will be attached to whatever relative URL you use.</li>
<li>Timeout: Set the time to wait for the server to respond to any request.
Header: An object of key/value pairs that can be sent in the request header.</li>
</ul>
Step 2: Create interceptor request with interceptor:
<pre><code class="js language-js">// Add a response interceptor
axios.interceptors.response.use(function (response) {
 // Do something with response data
 return response;
}, function (error) {
 // Do something with response error
 return Promise.reject(error);
});
</code></pre>
You use axios.interceptors.request.use() to modify the request before it is triggered.
Step 3: Create response interceptor with interceptor:
<pre><code class="js language-js">// Add a response interceptor
// Add a response interceptor
axios.interceptors.response.use(function (response) {
 // Do something with response data
 return response ;
}, function (error) {
 // Do something with response error
 return Promise.reject(error);
});
</code></pre>
Use axios.interceptors.response.use() to process the response before it is returned to the end-user web application.
This is all the knowledge I have learned about Interceptor Axios.
Thank you for reading up to here.
Reference links at: https://axios-http.com/docs/interceptors and https://rapidapi.com/guides/http-interceptors-axios<div id="md2html-converted" style="display:none"></div>

Today, cross-platform application programming (for programmers) is very developed and it helps to solve the problem of using applications on many different operating systems of users, the use of Restful API to improve security and resource manager is necessary and it has a lot of ways to deal with it. And the easy way to do that is the Interceptor feature in Axios.

Improving the security of the website's API with the Interceptor feature in Axios.

<h2 id="deploywebapplicationwithgithubactionscicdandamazonwebserviceec2">Deploy Web Application with GitHub Actions (CI/CD) and Amazon Web Service EC2</h2>
Writing a web application with a wide range of topics is not easy. We have to go through many processes such as, collect the customer's business requirements, plan the project implementation, calculate the progress time, and finally deploy the website application system to the internet. One of the above steps, the step of deploying the project to the internet is equally interesting, but requires a lot of expertise, both in terms of programming knowledge and experience in using the linux open source operating system.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_1_16a36d64e6.png" alt="Untitled 1.png" />
<h2 id="iabriefintroductiontothebasics">I. A brief introduction to the basics</h2>
In the blog post In this tutorial we will go through the process of deploying a simple NextJS web application to AWS EC2, with CI/CD support coming from Github Action. To do this, we need to briefly learn the following technologies:
<ul>
<li>GitHub Action</li>
<li>AWS EC2 Instance</li>
<li>Bash shell scripting</li>
<li>CI/CD</li>
<li>Next.JS</li>
</ul>
<h2 id="1githubaction">1. Github Action</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_2_fa0589fd65.png" alt="Untitled 2.png" />
GitHub ACtion is a tool for creating workflows containing instructions for performing installation and testing steps. Test the website system automatically (Continue Integration). After that, we will proceed to build the source code and send it to website servers on the internet (Continue Delivery).
<hr />
This process happens automatically every time, user push code to main branch, or pull request request to merge main branch code is made. In the process of executing instructions from the Github Action workflow. If an error occurs, the whole CI / CD process will be interrupted, and error messages will be sent to the developers quickly to help developers detect and fix them.
<h2 id="2awsec2instance">2. AWS EC2 Instance</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_3_992d525d0b.png" alt="Untitled 3.png" />
Surely all of us have access visit websites online and wonder where they come from. Well, I have the answer for you whether it's from online servers, cloud services, or your own computer. These include popular services such as: Amazon Web Service, Microsoft Azure, Digital Ocean, Hostinger.
<hr />
One of the most popular services, as well as trusted by many organizations, is AWS. Basically, AWS is a combination of many tools that help create and manage servers with different types of cloud computing services. Typically EC2, which is a virtual machine running on the AWS platform, with many configuration choices, along with the ability to replicate EC2 VMs will help your web services be deployed and run smoothly. more smoothly. 
<h2 id="3bashshellscripting">3. Bash shell scripting</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_4_693c6c1b2f.png" alt="Untitled 4.png" />
Bash shell scripting is human-made command line Use pre-programmed, defined. Usually integrated in UNIX or UNIX-like operating systems such as Linux, Mac OS. These commands were born to help us perform daily computer tasks and workflows smoothly, quickly, and fully automate repetitive tasks.
<hr />
In terms of time and productivity, Shell Script (Bash script) will be better than having to move the mouse to operate on the interactive graphical user interface (GUI). And because CI/CD-related jobs often repeat certain steps, it's essential to have a basic understanding of shell scripting.
<h2 id="4cicd">4. CI/CD</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_5_69db418467.png" alt="Untitled 5.png" />
CI (Continuous Integration)
Is a process of continuous data integration, allowing developers to push code to a code repository (GitHub, Git Lab, BitBucket, …). Then CI will automatically run, checking for errors arising from the code that the developers put up. Common types of CI will be Unit Test, Coverage Test, End to End Test, Selenium Headless Test. Thereby giving feedback to help developers quickly solve problems when there are bugs. As a result, the website system operates efficiently, quickly and maximizes work productivity, avoiding potential overlapping bugs when adding many new features later.
<hr />
CD (Continuous Delivery)
Is the process of transferring data continuously. You can understand CD as more advanced technology of CI. It not only performs the task of launching and finding bugs through different forms of testing in existing code, but also proactively changing the testing environment or staging or production, to point to the right deploy object. . 
<h2 id="5nextjs">5. NextJS</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/next_b8c2c59632.png" alt="next.png" />
Developed based on Facebook's famous JavaScript library is React.JS. NextJS not only allows us to break down the website into separate JSX files representing each individual component, the shared component can be reused throughout the website system. It also integrates some other attractive features that React JS is not available to us such as: Router ,Server Side Rendering, Image Optimization,… 
<h2 id="iiinstallcicdwithgithubactionandselfhosted">II. Install CI/CD with GitHub Action and Self Hosted</h2>
OK. After we've gone through the concepts of the technologies, and how CI/CD works, next we'll install and deploy a simple Next.JS Web application on AWS. EC2.
<h2 id="1createanextjsprojectwithtypescriptsupport">1. Create a Next.JS project with TypeScript support</h2>
<ul>
<li>Before you start working, remember to install Node JS 16.x and Visual Studio Code.</li>
<li>Open Terminal and type the following command to create a project, name the project my-app.</li>
</ul>
<pre><code class="bash language-bash">npx create-next-app@latest --ts
</code></pre>
<ul>
<li>The process will take place in a few minutes</li>
<li>After creating it, type the following command to open the Project on Visual Studio Code</li>
</ul>
<pre><code class="bash language-bash">cd my -app &amp;&amp; code .
</code></pre>
<ul>
<li>The generated project will have the following directory tree structure:</li>
</ul>
<pre><code class="sh language-sh">├── next.config.js

├── node_modules
├── package.json
├── pages
│ ├── api
│ │ └── hello.js
│ ├── _app.js
│ └── index.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── [README.md](http: //readme.md/)
├── styles
│ ├── globals.css
│ └── Home.module.css
└── yarn.lock
</code></pre>
<h2 id="2runnextjsonlocalhost">2. Run Next.JS on localhost:</h2>
<ul>
<li>To make sure the code when deploying, we should build and run in production mode for testing. However, when you are in the process, you should use development mode to make it easier to debug.</li>
<li>Run the following command combination in Terminal:</li>
</ul>
<pre><code class="bash language-bash">npm install -g yarn &amp;&amp; \
yarn build &amp;&amp; \
yarn start
</code></pre>
<ul>
<li>Go to <a href="http://localhost:300">localhost:300</a>0 to test and The output will look like the image below</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_6_46ae9eaa08.png" alt="Untitled 6.png" />
<h2 id="3uploadtheprojecttotherepositoryofgithubandconfiguregithubactions">3. Upload the project to the Repository of GitHub and configure GitHub Actions:</h2>
<ul>
<li>If you have never used GitHub, create an account before performing the following steps.</li>
<li>After creating the repository, we will push the code in the my-app directory to the newly created Repository. Since this is one of the familiar operations that programmers often do, I will not mention it in detail in this blog post.</li>
<li>In the repository, select Actions tab, select Worflows suggested as Node.js</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_7_ea66f9f0d6.png" alt="Untitled 7.png" />
<ul>
<li>Name the workflow</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_8_e5d4d96a01.png" alt="Untitled 8.png" />
<ul>
<li>Edit the content of the workflow.yml file Follow the best workflow below, and click Start Commit to save the workflow to the Repository.</li>
</ul>
<pre><code class="yaml language-yaml"># This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions /language-and-framework-guides/using-nodejs-with-github-actions

name: Auto Deploy NextJS to EC2 Instance

on:
 push:
 branches: ["main"]

env:
 test: test

jobs:
 build:
 runs-on: self-hosted

 strategy:
 matrix:
 node-version: [16.x]
 # See supported Node.js release schedule at https://nodejs.org/en/about/ releases/

 steps:
 - uses: actions/checkout@v3
 - name: Use Node.js ${{ matrix.node-version }}
 uses: actions/setup-node@v3
 with:
 node-version: ${{ matrix.node -version }}

 - name: Install Yarn, PM2
 run: npm install -g yarn pm2

 - name: Install Node Module
 run: yarn

 - name: Build,Start and Restart Web Application
 run: RUNNER_TRACKING_ID="" &amp;&amp; yarn build &amp;&amp; pm2 start yarn -- start &amp;&amp; pm2 restart yarn
</code></pre>
<ul>
<li>Next, go to the Settings Tab and select Actions → Runner → New self-hosted runner</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_9_a637f2bf1d.png" alt="Untitled 9.png" />
<ul>
<li>Select the Linux operating system and copy the code circled in red as shown in the image:</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_10_a520c2467d.png" alt="Untitled 10.png" />
<ul>
<li>Next we will prepare the bash shell script toAutomate the setup process of Github Action Runner Self hosted for Server.<ul>
<li>Note the code just copied above we will replace it at “<Copy this link from Configure Section in Add New Runner Page>”</li></ul></li>
</ul>
<pre><code class="bash language-bash">#!/bin/bash

# Change Directory to HOME directory
cd $HOME

set -xe
# This code will be copy and paste to EC2 instance User Data Field, Or UserData Property in Cloudformation,...

# Set environmentable to detect your project source code folder in EC2/VMware Instance
# Change project name here
PROJECT_NAME=todo-list-website

echo "This script will set up your server to be listenning GitHub Action and pull code Automatically when main branch or master branch change"
mkdir actions-runner &amp;&amp; cd actions-runner
curl -o actions-runner- linux-x64-2.296.2.tar.gz -L https://github.com/actions/runner/releases/download/v2.296.2/actions-runner-linux-x64-2.296.2.tar.gz
tar xzf ./actions-runner-linux-x64-2.296.2.tar.gz
################################# ################################################## ################################################## #####
# Warning this token and link is getting from TAB Setting -&gt; Actions -&gt; Runner -&gt; Create New Runner -&gt; Linux in your GitHub Repository
echo -ne '\n' | &lt;Copy this link from Configure Section in Add New Runner Page&gt;
##################################### ################################################## ################################################## #
sudo ./svc.sh install
sudo ./svc.sh start
sudo ./svc.sh status
echo "Complete Setup Github Action CI/CD by GitHub Runner"
</code></pre>
<h2 id="4createec2serveronawsandembedbashshellscript">4. Create EC2 Server on AWS and Embed Bash Shell Script:</h2>
<ul>
<li>Before doing this part, you should learn briefly about AWS, as well as EC2 and SSH Key to connect to the server in case of exception handling.</li>
<li>Suppose after successful account registration, you go to the homepage and search for EC2 as shown:</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_11_edac4ebffa.png" alt="Untitled 11.png" />
<ul>
<li>Click on EC2 to go to the Dashboard to manage virtual servers in the cloud</li>
<li>Click the yellow Launch Instance to initialize the Server</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_15_c0aac9bcec.png" alt="Untitled 15.png" />
<ul>
<li>Follow the steps shown below:</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_13_89e4c43333.png" alt="Untitled 13.png" />
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_14_b9c7bdc3a6.png" alt="Untitled 14.png" />
<ul>
<li>(Note) in the Key pair (login) step, you need to learn about AWS SSH and Key pair first, and then follow the steps in the Network settings Tab later.</li>
<li>Finally, we click Launch instance to launch the virtual server, the boot process will take place in a few minutes.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_15_c0aac9bcec.png" alt="Untitled 15.png" /></li>
<li>Go to the newly created Instance, click Connect, select SSH Client and follow instructions for accessing the server:</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_16_4f09abac6b.png" alt="Untitled 16.png" />
<ul>
<li>Paste the shell script commands just Create the above into the server's terminal, after running it will have the GitHub Action Runner service working as shown below:</li>
</ul>
<img src="https://d2ef4hkqu4id.cloudfront.net/Untitled_17_2231ddd89e.png" alt="Untitled 17.png" />
<ul>
<li>Reload Create Runner page, you will see 1 Server is in Idle state. So we have successfully configured the GitHub Action Runner service, now you can write CI/CD instructions through the workflows I mentioned in the steps above.</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_18_63192f61ed.png" alt="Untitled 18.png" />
<h2 id="5installnginxtopointport3000toport80">5. Install Nginx to point port 3000 to port 80:</h2>
<ul>
<li>By default, the Next.JS project only works on port 3000, but what we need is that we don't need to enter port 3000 to still be able to access the website. So I will prepare the following combination of bash shell script commands to help you set up ngnix more easily.</li>
</ul>
<pre><code class="bash language-bash">#!/bin/bash
sudo apt update
sudo apt install nginx -y
sudo ufw allow 'Nginx HTTP'
sudo rm -r -f /etc/nginx/sites-enabled/default
sudo touch /etc/nginx/sites -enabled/default
sudo chmod -R 777 /etc/nginx/sites-enabled/default
cat &lt;&lt; EOF &gt; /etc/nginx/sites-enabled/default
# Cache zone
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone =STATIC:10m inactive=7d use_temp_path=off;

upstream nextjs_upstream {
 server 127.0.0.1:3000;
 # We could add additional servers here for load-balancing
}

server {
 listen 80 default_server;

 server_name _;

 server_tokens off;

 gzip on;
 gzip_proxied any;
 gzip_comp_level 4;
 gzip_types text/css application/javascript image/svg+xml;

 proxy_http_version 1.1;
 proxy_set_header Upgrade \$http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host \$host;
 proxy_cache_bypass \$http_upgrade;

 # BUILT ASSETS (EG JS BUNDLES)
 # Browser cache - max cache headers from Next.js as build id in url
 # Server cache - valid forever (cleared after cache "inactive" period)
 location /_next/static {
 proxy_cache STATIC;
 proxy_pass http://nextjs_upstream;

 # For testing cache - remove before deploying to production
 add_header X-Cache-Status \$upstream_cache_status;
 }

 # STATIC ASSETS (EG IMAGES)
 # Browser cache - "no-cache" headers from Next.js as no build id in url
 # Server cache - refresh regularly in case of changes
 location /static {
 proxy_cache STATIC;
 proxy_ignore_headers Cache-Control;
 proxy_cache_valid 60m;
 proxy_pass http://nextjs_upstream;

 # For testing cache - remove before deploying to production
 add_header X-Cache-Status \$upstream_cache_status;
 }

 location / {
 proxy_pass http://nextjs_upstream;
 }
}
EOF
sudo chmod -R 700 /etc/nginx/sites-enabled/default
sudo systemctl stop nginx
sudo systemctl start nginx
</code></pre>
<h2 id="6cicd">6. CI/CD</h2>
Capability Test - To test GitHub's CI/CD feature Action, go to “pages/index” edit any title you want, and push the code to the main branch
<ul>
<li>The code build process will take place and when it's done, the site will automatically update to your new code. -
Wish you success</li>
<li>This is the process of building web app.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_19_4dda0627d7.png" alt="Untitled 19.png" /></li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_20_a6598b0528.png" alt="Untitled 20.png" />
<ul>
<li>And here is the result</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_21_bc7f2c56bd.png" alt="Untitled 21.png" /><div id="md2html-converted" style="display:none"></div>

Writing a web application with many certain topics is indeed not easy. We have to go through many processes such as, collect the customer's business requirements, plan the project implementation, calculate the progress time, and finally deploy the website application system to the internet. One of the above steps, the step of deploying the project to the internet is equally interesting, but requires a lot of expertise, both in terms of programming knowledge and experience in using the linux open source operating system. Here, I will tell you about that difficult and interesting process

Deploy Web Application with GitHub Actions (CI/CD) and Amazon Web Service EC2

Chat applications such as Messenger, Zalo, Telegram, … have been an indispensable part for most people in today's life. Unlike other applications that are only updated (refreshed) when “Reloading” the page, chat application is a real-time application, it needs to be updated (refreshed) quickly whenever possible. have someone interact with the chat room (data changes). In this blog post, I introduce the Socket.IO library - one of the popular libraries used to write chat applications like the one above.
<h2 id="whatissocketio">What is Socket.IO ?</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Introduction_About_Socket_IO_1_ba927865ae.png" alt="IntroductionAboutSocketIO1.png" />
Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server.It is built on top of the WebSocket protocol and provides additional guarantees like fallback to HTTP long-polling or automatic reconnection.
Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket for transport when possible, it adds additional metadata to each packet. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a plain WebSocket server either.
<h2 id="features">Features</h2>
<h3 id="httplongpollingfallback">HTTP long-polling fallback</h3>
The connection will fall back to HTTP long-polling in case the WebSocket connection cannot be established.
<h3 id="automaticreconnection">Automatic reconnection</h3>
Under some particular conditions, the WebSocket connection between the server and the client can be interrupted with both sides being unaware of the broken state of the link.That's why Socket.IO includes a heartbeat mechanism, which periodically checks the status of the connection.And when the client eventually gets disconnected, it automatically reconnects with an exponential back-off delay, in order not to overwhelm the server.
<h3 id="packetbuffering">Packet buffering</h3>
By default, any event emitted while the Socket is not connected will be buffered until reconnection.
While useful in most cases (when the reconnection delay is short), it could result in a huge spike of events when the connection is restored.
There are several solutions to prevent this behavior, depending on your use case:
use the connected attribute of the Socket instance
<pre><code class="ts language-ts">if (socket.connected) {
 socket.emit(/* ... */);
 socket.emit(/* ... */);
} else {
 // …
}
</code></pre>
use volatile events
<pre><code class="ts language-ts">socket.volatile.emit(/* ... */);
</code></pre>
<h3 id="acknowledgements">Acknowledgements</h3>
Socket.IO provides a convenient way to send an event and receive a response..
Sender:
<pre><code class="ts language-ts">socket.emit("hello", "world", (response) =&gt; {
 console.log(response); // "got it"
});
</code></pre>
Receiver:
<pre><code class="ts language-ts">socket.on("hello", (arg, callback) =&gt; {
 console.log(arg); // "world"
 callback("got it");
 });
</code></pre>
Bạn cũng có thể thêm thời gian chờ:
<pre><code class="ts language-ts">socket.timeout(5000).emit("hello", "world", (err, response) =&gt; {
 if (err) {
 // the other side did not acknowledge the event in the given delay
 } else {
 console.log(response); // "got it"
 }
});
</code></pre>
<h3 id="broadcasting">Broadcasting</h3>
On the server-side, you can send an event to all connected clients or to a subset of clients.
<pre><code class="ts language-ts">// to all connected clients
io.emit("hello");
// to all connected clients in the "abc" room
io.to("abc").emit("hello");
</code></pre>
<h3 id="multiplexing">Multiplexing</h3>
Namespace cho phép bạn phân chia logic của ứng dụng của mình qua một kết nối được chia sẻ duy nhất. Điều này có thể hữu ích, chẳng hạn như nếu bạn muốn tạo kênh "quản trị viên" mà chỉ những người dùng được ủy quyền mới có thể tham gia.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Introduction_About_Socket_IO_2_97f525482c.png" alt="IntroductionAboutSocketIO2.png" />
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 // classic users
});
io.of("/admin").on("connection", (socket) =&gt; {
 // admin users
});
</code></pre>
<h2 id="events">Events</h2>
<h3 id="emittingevents">Emitting events</h3>
The Socket.IO API is inspired from the Node.js EventEmitter, which means you can emit events on one side and register listeners on the other.
Server
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 socket.emit("hello", "world");
});
</code></pre>
Client
<pre><code class="ts language-ts">socket.on("hello", (arg) =&gt; {
 console.log(arg); // world
});
</code></pre>
You can send any number of arguments, and all serializable datastructures are supported, including binary objects like Buffer or TypedArray.
Server
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 socket.emit("hello", 1, "2", { 3: "4", 5: Buffer.from([6]) });
</code></pre>
Client
<pre><code class="ts language-ts">socket.on("hello", (arg1, arg2, arg3) =&gt; {
 console.log(arg1); // 1
 console.log(arg2); // "2"
 console.log(arg3); // { 3: '4', 5: ArrayBuffer (1) [ 6 ] }
});
</code></pre>
<h3 id="listeningtoevents">Listening to events</h3>
socket.on(eventName, listener): Adds the listener function to the end of the listeners array for the event named eventName.
<pre><code class="ts language-ts">socket.on("details", (...args) =&gt; {
 // ...
});
</code></pre>
socket.once(eventName, listener): Adds a one-time listener function for the event named eventName.
<pre><code class="ts language-ts">socket.once("details", (...args) =&gt; {
 // ...
});
</code></pre>
<pre><code>
</code></pre>
socket.off(eventName, listener): Removes the specified listener from the listener array for the event named eventName.
<pre><code class="ts language-ts">const listener = (...args) =&gt; {
 console.log(args);
};
</code></pre>
socket.on("details", listener);
<pre><code class="ts language-ts">// and then later...
socket.off("details", listener);
</code></pre>
<pre><code>
</code></pre>
socket.removeAllListeners ([eventName]): Removes all listeners, or those of the specified eventName.
<pre><code class="ts language-ts">// for a specific event
socket.removeAllListeners("details");
// for all events
socket.removeAllListeners();
</code></pre>
<h3 id="rooms">Rooms</h3>
A room is an arbitrary channel that sockets can join and leave. It can be used to broadcast events to a subset of clients.
Each Socket in Socket.IO is identified by a random, unguessable, unique identifier Socket#id. For your convenience, each socket automatically joins a room identified by its own id.
Please note that rooms are a server-only concept (i.e. the client does not have access to the list of rooms it has joined).
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Introduction_About_Socket_IO_3_aae65bef2d.png" alt="IntroductionAboutSocketIO3.png" />
You can call join to subscribe the socket to a given channel.
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 socket.join("some room");
});
</code></pre>
And then simply use to or in (they are the same) when broadcasting or emitting.
<pre><code class="ts language-ts">io.to("some room").emit("some event");
</code></pre>
You can emit to several rooms at the same time.
<pre><code class="ts language-ts">io.to("room1").to("room2").to("room3").emit("some event");
</code></pre>
In that case, a union is performed: every socket that is at least in one of the rooms will get the event once (even if the socket is in two or more rooms).
You can also broadcast to a room from a given socket.
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 socket.to("some room").emit("some event");
});
</code></pre>
In that case, every socket in the room excluding the sender will get the event. 
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Introduction_About_Socket_IO_4_84ee33adc0.png" alt="IntroductionAboutSocketIO4.png" />
To leave a channel you call leave in the same fashion as join.<div id="md2html-converted" style="display:none"></div>

SocketIO at the core of many real-time applications

Introduction about SocketIO

JavaScript (JS) is an interpreted programming language developed from the concept of prototypes. It is the most commonly used programming language today. This language is widely used for web pages (client side) and also server side (with Node.JS).
Since its launch, JS has undergone 2 major revisions. ECMAScript 2009 also known as ES5 is the first major revision to JS and ECMAScript 2015 also known as ES6 is the second major revision to JS. After these 2 major revisions JS continues to be modified many other revisions like: ECMAScript 2016 and 2017 but they are not called ES7 and ES8. As of 2016, new versions are named by year (ECMAScript 2016/2017/2018).
Of the above revisions, ES6 is the most important, adding important new syntax for writing complex applications, including classes and modules. And in this blog I will talk about a few important features updated in ES6.
1. Arrow functions
Basically, the arrow function is exactly the same as a normal function, but of course there will be a little difference, namely:
<ul>
<li>The syntax of arrow function is more compact than using "=>" with only 2 characters instead of using the keyword "function" with 8 characters like a normal function, so it helps to keep your code clean. will be more.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_1_b488c3c03c.png" alt="some-concepts-in-ES6-1.png" /></li>
</ul>
The arrow function does not create a new scope for the this keyword when assigned to a property inside an object. This means that the this keyword inside a function will be different depending on the type of function (arrow or normal) when the function is assigned a property inside the object.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_2_0eb13e1151.png" alt="some-concepts-in-ES6-2.png" />
2. Block scope
Block scope is scoped within a block (within {} ), which means that variables declared in a block only exist within that block.
For example, when you declare a variable a in block scope 1 and then call it in both block scope 1 and 2 like the following code:
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_3_907a6c557b.png" alt="some-concepts-in-ES6-3.png" />
After running the above code you get the result: in block 1, variable a will be logged out normally and in block 2, you will get an error "a is not defined" because variable a is not declared in block scope 2.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_4_19b0c38e48.png" alt="some-concepts-in-ES6-4.png" />
3 . keyword let, const
The keyword to declare a variable in JS before ES6 revision was only var keyword and in ES6 revision we have two new keywords for variable declaration let and const.
And of course it is not natural that it is born. Let , const , var are all used to declare a variable but they will have a few differences.
The var keyword is a concept before ES6 and before ES6 there is no concept of block scope and it is a variable that complies with the global scope, so the ones declared with the var keyword will not comply block scope. This means that even if they are declared inside one block scope, you can still call them inside another block scope.
Go back to the example from the block scope section if you change the let keyword to the var keyword.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_5_53f608793b.png" alt="some-concepts-in-ES6-5.png" />
Then the result will be different this time, in both blocks, the variable a can be logged.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_6_923bc6aed0.png" alt="some-concepts-in-ES6-6.png" />
What about the const keyword, if we use the const keyword to declare the variable in the above example, we will get the same result as when we use the let keyword to declare the variable a.
From there we see the variables declared with the keyword:
<ul>
<li>var will follow the global scope (it will persist throughout the program).</li>
<li>const , let conform to block scope (it only exists in the block scope in which it is declared).</li>
</ul>
Reading this far, you are probably wondering what const and let are? How are they different?
Let's see an example:
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_7_2d4b75c8ee.png" alt="some-concepts-in-ES6-7.png" />
And the result will certainly be the line "a: 10" will be logged. But if you replace the let keyword with the const keyword you will get an "Assignment to constant variable" error.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_8_77daba236c.png" alt="some-concepts-in-ES6-8.png" />
From the above example, you can certainly see how let and const are different. Variables declared with the let keyword will be mutable, but if the variable is declared with the const keyword, they cannot be changed.
And a not very important problem you will be prompted by the IDE if you encounter this problem but you should be aware. If it is a variable that has been declared with the let or const keyword, you will not be able to use the let or const keyword to declare them again.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_9_87429e7dbe.png" alt="some-concepts-in-ES6-9.png" />
And there is one more thing that you should know about const. keyword As mentioned above variables declared with const keyword will not be able to change their value. However, if their value is an object, you can still change their property value.
For example:
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_10_01158d32fd.png" alt="some-concepts-in-ES6-10.png" />
In this blog post I covered 4 new concepts added in the ES6 update. still many more concepts you can read more at<a href="https://www.w3schools.com/js/js_es6.asp">https://www.w3schools.com/js/js_es6.asp</a><div id="md2html-converted" style="display:none"></div>

Some concepts in ES6

<ul>
<li>Create ECR: https://ap-southeast-1.console.aws.amazon.com/ecr/repositories?region=ap-southeast-1
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/01_9a4299748f.png" alt="01.png" /></li>
<li>Naming the repo
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/02_3820f5c86a.png" alt="02.png" />
Once done, click <code>Create repository</code></li>
<li>Inside the circleci.yml file, we update the repo-name</li>
</ul>
<pre><code>jobs:
 build-and-deploy-stage:
 executor: ubuntu
 steps:
 - aws-ecr/build-and-push-image:
 aws-access-key-id: AWS_ACCESS_KEY_ID
 aws-secret-access-key: AWS_SECRET_ACCESS_KEY
 create-repo: true
 platform: linux/amd64
 push-image: true
 tag: latest
 repo: strapi-template
</code></pre>
ECS
<ul>
<li>Create Task definition
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/03_2063556247.png" alt="03.png" /></li>
<li>Fill in Task definition's information
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/04_59950e6d3e.png" alt="04.png" /></li>
<li>Task definition family name</li>
<li>Container's information from ECR</li>
<li>Fill In Task definition's environment
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/05_b7351cc0b4.png" alt="05.png" /></li>
<li>Fill in Task definition's CPU, Memory
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/06_30e12f3161.png" alt="06.png" /></li>
<li>Once done, Review and Create</li>
<li>Create Service
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/07_0abd25b060.png" alt="07.png" /></li>
</ul>
Leave Environment as default
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/08_1a7f820445.png" alt="08.png" />
Filling deployment configuration
Remember to select the previously created task definition
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/09_61d8762620.png" alt="09.png" />
Add an Elastic Load Balancer
Specify the port as 1337 - because the strapi port will run at port 1337
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/10_fa4fb88b76.png" alt="10.png" />
Networking
Select default VPC, select all the subnets and select the security group which allow public inbound traffics
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/11_7b6d1fc239.png" alt="11.png" />
Once done, click <code>Deploy</code>
After few minutes, you will see new service deployed
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/12_4ab4e27b45.png" alt="12.png" /><div id="md2html-converted" style="display:none"></div>

Our practice steps to automate your deployment process to Amazon Web Service using AWS Elastic Container Registry & AWS Elastic Container Service & CirleCI

Technology

Categories

Contact Us