&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

I am Hung from ABC Software Solutions Company. Recently, I had the opportunity to experience building a website on the Wix platform, and I would like to share the benefits it brings, along with my personal experience and the lessons I have learned.<h2>What is Wix?</h2> Wix is an online website building platform that allows users to easily create and manage websites without any programming knowledge. Wix offers a drag-and-drop interface that enables users to select and arrange components and content on their website as desired. Users can access Wix through a web browser and start building their website from pre-designed templates or start from scratch with a blank canvas. Wix provides a range of tools and features to customize and design the website, including changing the layout, arranging components, creating product pages, adding features like blogs, online stores, contact forms, and more. Wix also offers content management and analytics features, allowing users to track the performance of their website and interact with visitors. Additionally, Wix supports integration with third-party services such as search engine optimization (SEO) tools, email marketing, social media integration, and more. With Wix, users don't need coding or complex web design knowledge, and they can create a professional and attractive website in a short amount of time.<h2 style="margin-left:0px;">My experience</h2>As a UI/UX designer, I came to Wix through a client request to build a B2B Landing page website. I was given the opportunity to spend nearly 2 weeks to learn and practice. Previously, I had experience building websites using WordPress with the application of plugins such as Elementor, Flatsome, Woocommerce,... Working on Wix this time has some similarities with WordPress that made me feel interesting. more interesting, while providing myself with more new and interesting knowledge about the platform. Here's what I've learned about Wix.<h3 style="margin-left:0px;">Advantages of Wix</h3>Wix shines with a range of notable features. With its appeal to a large user base, Wix impresses with the following standout advantages:<ul><li>User-friendly interface: Wix is designed with a friendly and easily accessible user interface. Users can create and edit websites effortlessly through its drag-and-drop tool.</li><li>Flexible design: Wix offers numerous beautiful templates and interfaces for users to choose from. Additionally, users can customize layouts, colors, fonts, and images to create unique websites that align with their ideas.</li><li>Powerful feature integration: Wix comes with various integrated features such as blogging, online stores, social media integration, SEO support, and more. This enables users to easily build and manage websites according to their specific needs.</li><li>Responsive on multiple devices: Websites built on Wix automatically adapt to different devices like desktops, mobile phones, and tablets. This ensures a seamless user experience across all platforms.</li><li>Dedicated customer support: Wix provides detailed documentation, support centers, and community forums to assist users. You can find quick help and answers to your questions whenever needed.</li></ul><h3>Some disadvantages of Wix</h3>Besides the advantages, Wix also has some disadvantages to be aware of:<ul><li>Limitations of source code customization: Wix does not allow direct access and editing of the source code. Users can only perform customizations through the user interface. This restricts the flexibility and higher level of customization of the website.</li><li>Limited feature extensions: Wix has a range of apps and extensions available in the Wix App Market, but not all features found in general web development platforms may be available. This can make it challenging to meet specific requirements or integrate external tools.</li><li>Service fees and bandwidth limitations: Some advanced features and resource expansions in Wix are only available in paid service packages. Some service packages also have bandwidth limitations, which can affect the website's loading speed and handling of high traffic.</li><li>Wix advertisements: In the free version, Wix displays their own advertisements on your website. To remove these ads, you need to upgrade to paid service packages.</li><li>Difficulty in platform migration: If you want to switch from Wix to another platform, the migration process can be challenging. The conversion may require time and effort to re-customize the website on the new platform.</li></ul>However, these limitations do not undermine Wix's ability to provide a quick and easy website-building solution for users without programming skills.<h3>Compare Wixand WordPress</h3>After learning about Wix, I realized that Wix and WordPress will have many differences, here are some points to pay attention to:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/WIX_VS_WP_b34d13fea7.png" alt="WIX VS WP.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_WIX_VS_WP_b34d13fea7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_WIX_VS_WP_b34d13fea7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_WIX_VS_WP_b34d13fea7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_WIX_VS_WP_b34d13fea7.png 1000w," sizes="100vw"><h4>Design and layout</h4>Wix and WordPress both offer a range of interface templates for you to choose from. Wix has over 500 pre-designed templates, suitable for various industries. These templates have intuitive interfaces, and you can easily customize layouts and tools according to your preferences. However, one point to note is that once you have chosen a template on Wix, you cannot switch to another template. Instead, you have to continue customizing the layout and components on the selected template. WordPress also provides users with a diverse library of thousands of interface templates, including both free and paid options. One difference from Wix is that WordPress allows easy customization of the chosen interface template by using different themes and plugins. This gives users a higher level of flexibility in creating a unique and targeted website. Whether it's Wix or WordPress, both platforms offer tools and customization options for you to create a beautiful and professional website. The decision to choose between these two platforms depends on your needs and goals. If you want simplicity and ease of use, along with some available templates for customization, Wix is a good choice. On the other hand, if you desire more flexibility and higher customization capabilities, WordPress would be a suitable option, although it does require some knowledge of coding and management.<h4 style="margin-left:0px;">Experience</h4>Wix possesses a wide range of smartly designed and highly user-friendly tools. Even individuals with no knowledge of coding or web design can use them effectively. On the other hand, WordPress has a visual editor that facilitates quick and easy content creation and theme customization. However, exploring the features in WordPress may require more time and effort to learn.<h4>Plugin/App</h4>Currently, the Wix platform has over 500 apps available that support various functionalities such as reviews, galleries, contact form templates, and more. The majority of these apps are free.&nbsp; On the other hand, WordPress boasts an impressive number of plugins, with over 55,000 options available, not to mention thousands of premium apps. In summary, considering the cost-effectiveness and the abundance of features, resources, layout designs, and plugins/apps, WordPress still holds a significant advantage.&nbsp; However, Wix is highly regarded for its user-friendly nature, particularly for beginners.<h3>Should I use Wix?</h3> The Wix platform is simple and user-friendly, even for individuals with limited programming knowledge. People can start using Wix without the need to purchase separate hosting and domain. This makes Wix a reasonable choice for those who don't want to invest too much in technical aspects and finances. If you are not tech-savvy and don't want to spend money on hosting and domain, Wix is a suitable option. You can create a professional website according to your requirements without encountering too many difficulties. However, if you are building a larger, more complex website, WordPress is a better choice. WordPress offers a wide range of features and powerful customization options, while allowing you to use your own domain and leverage advanced functionalities. These are the basic insights into the Wix platform and how to use it to create a simple website. However, it's important to note that Wix does have some limitations. If you only need a simple website or lack deep technical knowledge, then Wix is a safe and convenient choice.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Should_use_WIX_08197ecde3.png" alt="Should use WIX_.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Should_use_WIX_08197ecde3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Should_use_WIX_08197ecde3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Should_use_WIX_08197ecde3.png 750w," sizes="100vw"><h2>The experience I have</h2>Despite the many benefits, I also encountered some challenges during the process of building a website on Wix. One of them was the limitations of the available design templates, which required me to find ways to customize them to meet the project's requirements. However, I overcame these challenges by researching thoroughly and leveraging the flexible features of Wix. The experience of building a website on Wix has provided me with valuable lessons. I realized that mastering the use of an important web design tool like Wix helps enhance my ability to execute future projects. I also recognized the importance of optimizing the user experience and creating a sensible design to meet the needs of clients. In summary, the experience of building a website on Wix has given me valuable knowledge and skills in the field of UI/UX design. I have gained a better understanding of the benefits and limitations of Wix, as well as how to customize and be flexible in creating a beautiful and engaging website. Through this period, I have learned that continuous learning and experimenting will help me further develop in new technologies and enhance my thinking and creativity, delivering excellent products to users. I hope this blog has provided you with useful information and motivation to explore the world of web design. Keep maintaining your passion and creativity, always explore new technologies, and never stop learning. Once again, thank you sincerely, and I hope that we will continue to meet in future articles and sharing. See you again!

Wix provides convenience and flexibility. With a variety of pre-designed templates and customization tools, you can create a beautiful and professional website quickly and easily.

Experience building websites on Wix

Today's article we will learn how the Agile model and software testing methods when using the Agile model will be effective.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d594cb3868.png"><h2>1. What is Agile?</h2><ul><li>Agile is an agile software development methodology that focuses on product development in the form of short cycles called "sprints". Agile aims to maximize product value and minimize risks by focusing on adaptability to change and rapid customer response.</li><li>Agile is often applied in software projects but can also be applied in many other areas, from production to marketing and project management.</li></ul><h2>2. Agile criteria:</h2><ul><li>Interaction between people rather than process and tools: Agile focus on interaction and communication among team members first. Regular communication between customers, product managers, and development team members helps ensure a shared understanding of product requirements and helps make decisions faster and more efficient.</li><li>Active software rather than detailed documentation: Agile focuses on developing software that can work instead of detailed documentation. Creating working software versions early makes it possible for customers and development teams to evaluate and provide feedback, thereby optimizing product value.</li><li>Collaborating with customers rather than negotiating contracts: Agile sees customers as part of the product development process. Partnering with customers helps ensure that products are developed that meet actual requirements and respond to customers' changing needs.</li><li>Adaptability to change rather than to a blueprint: Agile allows for changes and adjustments during product development. Rapid adaptation helps ensure that the product can meet new requirements and solve problems that arise during development.</li></ul><h2>3. Rules in Agile:</h2><ul><li>The first priority is to create customer satisfaction by providing valuable products.</li><li>Accept change, even late in the development process. Agile makes the software development process more flexible in terms of changing customer requirements.</li><li>Delivering operational and valuable software products to customers in a short time, by breaking down software products into small pieces and developing them simultaneously.</li><li>Software development team members should cooperate closely to achieve the common goal of the project.</li><li>Build projects around people who contribute directly to the project.</li><li>Create a positive working environment that supports creativity and continuous improvement.</li><li>Focus on providing software products that work according to customer requirements.</li><li>Ensure that the members of the software development team all contribute to the development process and are accountable for the results.</li><li>Adjust the software development process continuously, through periodic evaluation and improvement.</li><li>Use simple and effective methods for software development.</li><li>Encourage direct interaction between members of the software development team.</li><li>Create software products that are sustainable and can adapt to future changes.</li></ul><h2>4. Software testing process in Agile model</h2>a. The software testing phases correspond to the software development phases in the Agile model<ul><li>Planning phase: Test plans are programmed to ensure that customer requirements are fully met. Test plans include functional test plans, performance tests and integration test plans.</li><li>Design phase: Test scenarios are created and test cases are designed. These scenarios are used to ensure that the customer requirements are fully met and that the functionality of the software is tested.</li><li>Development phase: Test cases are executed in parallel with other development steps of the software. Test cases are used to ensure that the software works properly and fully.</li><li>Integration testing phase: Test cases are performed to ensure that the software works properly when integrated with other components of the system.</li><li>Acceptance testing phase: Customer or end user is required to test the product to ensure that it meets their requirements. Acceptance test cases are used to ensure that the software is accepted by the customer.</li></ul>b. Quality assurance activities in segments<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_fde1d78893.png" alt="image.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_image_fde1d78893.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_image_fde1d78893.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_image_fde1d78893.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_image_fde1d78893.png 1000w," sizes="100vw"><ul><li>Requirement definition segment: Customer requirements are defined and ensured that they can be measured and achieved. QA needs to constantly interact with customers to understand their requirements and ensure that the software developed meets these requirements.</li><li>Design segment: QA participates in the architectural design of the software. QA will check if the design meets the quality requirements and company standards. If necessary, QA will make suggestions to improve the design.</li><li>Development segment: QA participates in the software development process. QA ensures that the software developed meets the requirements and set quality standards. QA will conduct product testing to ensure that the developed software meets the quality requirements.</li><li>Testing Segment: QA performs software testing. Types of testing include unit testing, integration testing, system testing, and acceptance testing. The results of the testing activities will be used to improve the software.</li><li>Deployment segment: QA ensures that the software is properly deployed and meets the quality standards. QA will check that the implemented system has met the quality requirements and will make suggestions to improve the product in the future.</li></ul> &nbsp;

Agile is an agile software development methodology that focuses on product development in the form of short cycles called "sprints". Agile aims to maximize product value and minimize risks by focusing on adaptability to change and rapid customer response.

What is Agile Model in Software Testing?

Welcome back to the Learn What You Share series, and I'm Tuyen. With the previous sharing of content on coding and BA fields, today I will guide you to approach another field that also plays a crucial role in making a project successful, which is the role of a designer. For a designer, in addition to learning or absorbing knowledge from various sources, the tools that can help them express their ideas, creative freedom, etc. are also a part of success. We cannot ignore useful tools such as Adobe Creative Suite (Photoshop, Illustrator, ...) and Figma. For, these two tools are quite useful for a designer like myself.You often hear designers talk about using this software or that software for design, but we just listen and don't really understand them. In case we need to use them later, we still have to ask them about the names of that software. With that drawback in mind, I wrote this blog post to share the software that I use the most for design, which is FigmaFigma is a design software launched in 2015 and quickly adopted by the design community. It allows users to create interactive design drafts and share them with other team membersFigma provides a wide range of useful features such as geometric drawing tools, fonts, colors, and features for creating interactive designs and design templates. Additionally, it integrates with many other tools like Sketch, Photoshop, and project management tools like Jira and Trello. A special feature of Figma is that it allows users to interact with the design's functionality (buttons, links, etc.) like a website.With the flexibility and great features of Figma, you can take advantage of this to make it even better by improving the user experience and making design easier with the help of pluginsAs shared in the blog post 'https://www.abcsoftwarecompany.com/vi/blog/nhung-plugin-figma-thong-dung-danh-cho-thiet-ke-ui' by Quoc Hung, he is also a designer who has used common plugins in his designs such as Stylelist, remove.bg, lorem ipsum, unsplash, iconify,... and I have as well. However, I have accidentally discovered even more amazing features of some plugins in Figma, namely: anima, content reel, design lint<h4>Anima</h4>Anima is a plugin that allows users to create buttons, forms, dropdowns, and more with flexible sharing and reuse features to make websites and apps run smoothly and highly interactive.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f14b6226ee.png">You can refer to the UI of components such as button, form, dropdown, etc.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_12c94a945e.png">The plugin provides flexibility, UI, and code support to help developers easily reference and code without deviating from the client's requirements set by the designer.I can't watch the demo you mentioned as I am a text-based AI language model. However, I can assist you with any questions or concerns you may have regarding the Anima plugin for Figma.<ul><li>I selected a previously designed frame (Home page) and right-clicked to select Plugin -&gt; Anima -&gt; Get code. But before using this plugin, you need to install it first ^^!</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f1e884be72.png"><ul><li>After getting the code with Anima plugin, you can choose the programming language that the plugin supports to export the code.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_747bab4051.png">You can export the code in the supported languages ​​such as HTML, React, Vue<ul><li>Finally, the result shows the code for the frame (Home page). But note, this feature is limited if you want to export the code and download the source, you should spend a little more $ for convenience. There is another way to circumvent the law a bit more, you can open to code pen like me and watch it directly. &nbsp;</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d3dc2f743b.png">This is a great plugin, but its free features are limited. Therefore, if you want to have a better experience and have the means, you should add a little $ to have even better experiences!!!In addition, this plugin has a great feature Auto Layout that allows elements to automatically resize and position when the size of the surrounding frame if they change. This reduces the time it takes to update and arrange elements in the design.<h4>Content Reel</h4>Is a plugin that makes the presentation of content (images, content, videos, gifs and animations) in the design become vivid and beautiful.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_533fce5a90.png"><h4>Design Lint&nbsp;</h4>As a plugin that helps to check the quality and standards of the design: ensures consistency in the entire design, colors, spacing, fonts, and other design rules, and helps users find errors in design and fix them quickly.I have a personal exercise, after I design and proceed to ask the support plugin to check, the results I received are quite surprising.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_af9d243da8.png">With only one page, I have wrong many standards, the numbers are amazing. I think this plugin is quite good, it will help us designers improve our design standards and improve our observation, meticulousness and care. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7c6513f53b.png">Realizing that plugins are a small part of making our design more beautiful and perfect. It contributes to helping us reduce stress and understand the time and effort to do new and great things. Thanks to automation and powerful tools, designers can focus on creating products that meet customer and market requirements.Above, are some of the plugins that I discovered on my own in the process of learning to become a designer. I will share the knowledge that I discovered during my studies. Hope it helps okay for you.&nbsp;Thank you for reading this far!!!! See you in the next blog and I'm Tuyen.Post created by ChatGPT and edited.

I accidentally discovered some amazing features of certain Figma plugins, specifically: Anima, Content Reel, and Design Lint.

Plugin in figma

My problem: I want to build a website with WordPress as the content management system. However, I don’t want to make use of its frontend template, instead, I will expose REST API from WordPress and have a dedicated Frontend WebApp using Nextjs.Below is the diagram:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp" alt="1_9JDIQkG6UOZdWg3VB7vOvg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 128w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 411w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 616w," sizes="100vw"><img class="image_resized" style="width:680px;" src="https://miro.medium.com/v2/resize:fit:700/1*9JDIQkG6UOZdWg3VB7vOvg.png" alt="" loading="eager">Prerequisites:<ul><li>Basic knowledge of SSH into an EC2 server (or any other VPS) and Ubuntu commands, or ability to read documentation for ubuntu commands.</li><li>I have a domain name mydomain.com</li><li>I purchased a wildcard SSL certificate for my domain: *.mydomain.com</li><li>I already setup SSL for my domain: *.mydomain.com</li><li>I created manually an AWS EC2 instance.</li><li>I have a Wordpress backend service to serve REST API at port 8000</li><li>I also have a Wordpress CMS app running at port 8000</li><li>I have a frontend app running at port 3001</li></ul>*Please note that you’re freely to choose the port number.<h2 style="margin-left:0px;">I choose to use Nginx as a reverse proxy server to configure the domain.</h2>&nbsp;Now, let’s jump into the main objective of this blog post.<h2 style="margin-left:0px;">Step 0:</h2><ul><li>Navigate to `/etc/nginx/sites-enabled/` and edit <code>default</code> file using <code>sudo vim default</code></li><li>Better to backup it first by the command <code>mv default defaultbk</code></li></ul><h2 style="margin-left:0px;">Step 1: Configure Nextjs Frontend webapp at port 3001</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp" alt="1_36xC8vGSdwENL11lUHQ0zg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp 500w," sizes="100vw">we are at this part<pre><code class="language-plaintext">#Nextjs FE app: remove www to avoid canonnical issue
server {
 listen 80;
 listen 443 ssl;

 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;

 server_name http://mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: force ssl for mydomain.com (main domain)
server {
 listen 80;
 server_name http://mydomain.com mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: point main domain (Frontend) to port 3001 of Nextjs
server {
 listen 443 ssl;
 listen [::]:443 ssl;
 
 server_name mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:3001;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">Step 2: Configure the REST API:</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp" alt="1_IpNXpt1ofFBKpdu9w6HM7w.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp 500w," sizes="100vw">we are at this part<pre><code class="language-plaintext">#REST API: force ssl for api.mydomain.com (wordpress backend)
server {
 listen 80;
 server_name api.mydomain.com;
 return 301 https://api.mydomain.com$request_uri;
}

#REST API: point api.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name api.mydomain.com http://api.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 }
}</code></pre><h2 style="margin-left:0px;">Step 3: Configure the CMS</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp" alt="1_7AtkF4RGNQ1_16At0HNoZA.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp 241w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp 500w," sizes="100vw">we are at this part<pre><code class="language-plaintext">#CMS: force ssl for cms.mydomain.com (wordpress cms)
server {
 listen 80;
 server_name cms.mydomain.com http://cms.mydomain.com;
 return 301 https://cms.mydomain.com$request_uri;
}

#CMS: point cms.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name cms.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 proxy_set_header Host $http_host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">Full configuration</h2><pre><code class="language-plaintext">
#Nextjs FE app: remove www to avoid canonnical issue
server {
 listen 80;
 listen 443 ssl;

 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;

 server_name http://mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: force ssl for mydomain.com (main domain)
server {
 listen 80;
 server_name http://mydomain.com mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: point main domain (Frontend) to port 3001 of Nextjs
server {
 listen 443 ssl;
 listen [::]:443 ssl;
 
 server_name mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:3001;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}

#REST API: force ssl for api.mydomain.com (wordpress backend)
server {
 listen 80;
 server_name api.mydomain.com;
 return 301 https://api.mydomain.com$request_uri;
}

#REST API: point api.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name api.mydomain.com http://api.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 }
}

#CMS: force ssl for cms.mydomain.com (wordpress cms)
server {
 listen 80;
 server_name cms.mydomain.com http://cms.mydomain.com;
 return 301 https://cms.mydomain.com$request_uri;
}

#CMS: point cms.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name cms.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 proxy_set_header Host $http_host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">Last step:</h2><ul><li>Reload and restart Nginx with <code>sudo systemctl reload nginx</code> and <code>sudo systemctl restart nginx</code></li></ul>I hope this helps not only with the configuration but the overall understanding of your own use cases.

My problem: I want to build a website with WordPress as the content management system. However, I don’t want to make use of its frontend template, instead, I will expose REST API from WordPress and have a dedicated Frontend WebApp using Nextjs.

Configure NGINX to host both Backend and Frontend servers in one AWS EC2 instance

In this article, I will learn the concept and features of web 1.0, web &nbsp;2.0 and web 3.0<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_67d878a48e.png"></figure><h1>1. What is the World Wide Web (WWW)?</h1>- The World Wide Web (WWW) is part of the internet, which is a system for communicating and sharing information on a network through linked web pages. It was developed by Tim Berners-Lee in 1989. - WWW is a part of the internet, consisting of web pages linked together through hypertext links and hypertext browsers. - Each website on the WWW is identified by a unique address called a URL (Uniform Resource Locator), allowing users to access that website directly. - WWW has opened up a new world of media, giving users access to millions of websites on all topics and fields ranging from entertainment to education, business, and politics. - WWW has also fueled the development of many other web technologies and applications such as e-commerce, social media, online search, and computer cloud (cloud computing). - In recent times, the WWW has become an important means of sharing information about COVID-19, helping health authorities and governments to convey information about the virus and precautions to the community.<h1> 2. What is Web 1.0?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_5b8a1e862b.png"></figure>2.1. Concept - Web 1.0 is a term used to refer to the first phase of the World Wide Web, from its development until around the early 2000s. Web 1.0 can be viewed as a "static web" because it just lets the user see it does not allow direct interaction with such websites. - Web 1.0 focuses mainly on providing static and simple information. Web pages are designed to display static content such as text and images. - Some examples of Web 1.0 sites include news sites, informational sites, and personal websites. It only provides simple static information such as text and images, along with links, without the buttons to interact like today's modern web. 2.2. Features of web1.0 - Static web pages: Web 1.0 only supports static web pages, meaning that the content on the website does not there is a dynamic change but can only be changed by entering another website link or clicking on other links within that web page. - Static content: Content on Web 1.0 web pages is usually static, displaying only fixed information and little change. - Uncategorized information: There is no mechanism to classify and organize information on the website, users have to search for information manually. - No complex dynamics: Web 1.0 websites do not support complex dynamic features like modern web pages, such as media, interactive dynamic features, and complex web applications other miscellaneous.<h1> 3. What is Web 2.0?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_14be3a87a9.png"></figure>3.1. Concept - Web 2.0 is a term used to refer to the second stage of development of the World Wide Web, from the mid-2000s to the present. - Web 2.0 has ushered in a new era of the World Wide Web, marking technological developments and advancements and creating a richer and more diverse online media environment. - Some examples of Web 2.0 sites include Facebook, YouTube, Twitter, Instagram, Wikipedia, Google Maps, blog sites, search sites, and e-commerce sites. 3.2. Features of web2.0 - High interactivity: Web 2.0 allows users to directly interact with websites through comments, likes, shares, votes, ratings, and other features. - Cross-platform: Web 2.0 websites are designed to work on multiple platforms, including computers, mobile phones, tablets, and other smart devices. - Community: Web 2.0 allows users to participate in communities, create social sites, and interact with other users. - Beautiful and intuitive design: Web 2.0 websites are designed with beautiful and intuitive interfaces, making it easy for users to use and find information on the site. - Rich content: Web 2.0 features rich content creation, including audio, video, images, online games, and web applications.<h1>4. What is Web 3.0?</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b9cbcd81c2.png"> 4.1. Concept - Web 3.0 is a concept of evolution of the World Wide Web, believed to be the next stage of development after Web 2.0, and has been developed since 2006. Web 3.0 focuses on building applications and services on a blockchain platform, where decentralization and security are ensured by a distributed network. - Some examples of Web 3.0 applications include: Ethereum, IPFS, Filecoin, Brave browser, Uniswap, Aave, Polkadot, and many more. 4.2. Features of web3.0 - Decentralization: Web 3.0 applications use a decentralized model in which data is stored on distributed network nodes, rather than managed by a third party or a central organization. - Human machine interaction: Web 3.0 enables natural human-computer interaction, through interactive interfaces and voice control systems. - High security: Web 3.0 applications use advanced security technologies such as symmetric and asymmetric encryption to protect user data. - Data ownership: Users will have ownership and control over their data, not letting big companies monetize their data.

WWW is a part of the internet, consisting of web pages linked together through hypertext links and hypertext browsers. WWW has opened up a new world of media, giving users access to millions of websites on all topics and fields ranging from entertainment to education, business, and politics. It also fueled the development of many other web technologies and applications such as e-commerce, social media, online search, and computer cloud (cloud computing)...

Learn about web 1.0, web 2.0, web 3.0 concepts

<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

1. What is Docker ?:Docker is a software platform that allows you to build, test, and deploy applications quickly. Docker packages software into standardized units called containers that have everything the software needs to run including libraries, system tools, code, and runtime. Using Docker, you can quickly deploy and scale applications into any environment and know your code will run.2. How Docker work ?:Docker works by providing a standard way to run your code. Docker is an operating system for containers. Similar to how a virtual machine virtualizes (removes the need to directly manage) server hardware, containers virtualize the operating system of a server. Docker is installed on each server and provides simple commands you can use to build, start, or stop containers.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Docker_Engine_Structure_d54eef4c33.png" alt="Docker Engine Structure" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Docker_Engine_Structure_d54eef4c33.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Docker_Engine_Structure_d54eef4c33.png 500w," sizes="100vw">3. Docker image:A Docker image is a read-only template that contains a set of instructions for creating a container that can run on the Docker platform. It provides a convenient way to package up applications and preconfigured server environments, which you can use for your own private use or share publicly with other Docker users.4. Docker container:A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another. A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries, and settings.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Docker_Container_Structure_2b2c666b01.png" alt="Docker Container Structure" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Docker_Container_Structure_2b2c666b01.png 180w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Docker_Container_Structure_2b2c666b01.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Docker_Container_Structure_2b2c666b01.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Docker_Container_Structure_2b2c666b01.png 1000w," sizes="100vw">5. Docker volume:Volumes are the preferred mechanism for persisting data generated by and used by Docker containers. While bind mounts are dependent on the directory structure and OS of the host machine, volumes are completely managed by Docker. Volumes have several advantages over bind mounts:<ul><li>Volumes are easier to back up or migrate than bind mounts.</li><li>You can manage volumes using Docker CLI commands or the Docker API.</li><li>Volumes work on both Linux and Windows containers.</li><li>Volumes can be more safely shared among multiple containers.</li><li>Volume drivers let you store volumes on remote hosts or cloud providers, to encrypt the contents of volumes, or add other functionality.</li><li>New volumes can have their content pre-populated by a container.</li><li>Volumes on Docker Desktop have much higher performance than bind mounts from Mac and Windows hosts</li></ul>6. Docker network:One of the reasons Docker containers and services are so powerful is that you can connect them together, or connect them to non-Docker workloads. Docker containers and services do not even need to be aware that they are deployed on Docker, or whether their peers are also Docker workloads or not. Whether your Docker hosts run Linux, Windows, or a mix of the two, you can use Docker to manage them in a platform-agnostic way.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Docker_network_3e3e8830b8.png" alt="Docker network" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Docker_network_3e3e8830b8.png 227w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Docker_network_3e3e8830b8.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Docker_network_3e3e8830b8.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Docker_network_3e3e8830b8.png 1000w," sizes="100vw">7. Docker Hub:Share and Collaborate with Docker Hub. Docker Hub is the world’s largest repository of container images with an array of content sources including container community developers, open-source projects, and independent software vendors (ISV) building and distributing their code in containers. Users get access to free public repositories for storing and sharing images or can choose a subscription plan for private repos.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Docker_Hub_5caefb391b.png" alt="Docker Hub" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Docker_Hub_5caefb391b.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Docker_Hub_5caefb391b.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Docker_Hub_5caefb391b.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Docker_Hub_5caefb391b.png 1000w," sizes="100vw">8. How to use Docker with docker-compose and Docker Hub:<ol><li>What about docker-compose:</li></ol>Docker Compose is a tool that was developed to help define and share multi-container applications. With Compose, we can create a YAML file to define the services and with a single command, can spin everything up or tear it all down.The big advantage of using Compose is you can define your application stack in a file, keep it at the root of your project repo (it’s now version controlled), and easily enable someone else to contribute to your project. Someone would only need to clone your repo and start the compose app. In fact, you might see quite a few projects on GitHub/GitLab doing exactly this now.<ol><li>How to install PostgreSQL with Docker Hub and docker compose:</li></ol><ul><li>Download Office Postgres Image from Docker Hub with the command:<ul><li>docker pull postgres</li></ul></li><li>Attention: We can use docker run with a lot of parameters to run this database, but this way is very confusing, so I recommend using docker-compose instead.</li><li>Create docker-compose.yml:</li></ul><pre><code class="language-plaintext"># Use postgres/example user/password credentials
version: '3.1'

services:

 &nbsp;db:
 &nbsp;&nbsp;&nbsp;image: postgres
 &nbsp;&nbsp;&nbsp;restart: always
 &nbsp;&nbsp;&nbsp;environment:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;POSTGRES_PASSWORD: postgres
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;POSTGRES_USER: postgres
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;POSTGRES_DB: postgres
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ports:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- 5436:5432
 &nbsp;adminer:
 &nbsp;&nbsp;&nbsp;image: adminer
 &nbsp;&nbsp;&nbsp;restart: always
 &nbsp;&nbsp;&nbsp;ports:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- 8080:8080</code></pre><ul><li>Open terminal, change directory to folder that contain this docker-compose.yml file, then type below command: docker-compose up -d</li><li>Open localhost:8080 to open adminer with password=postgres and fill the value for other input like this image:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Adminer_Login_2e5c1ebcf2.png" alt="Adminer Login" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Adminer_Login_2e5c1ebcf2.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Adminer_Login_2e5c1ebcf2.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Adminer_Login_2e5c1ebcf2.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Adminer_Login_2e5c1ebcf2.png 1000w," sizes="100vw"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Docker_Adminer_Logined_b00fa87aaf.png" alt="Docker Adminer Logined" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Docker_Adminer_Logined_b00fa87aaf.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Docker_Adminer_Logined_b00fa87aaf.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Docker_Adminer_Logined_b00fa87aaf.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Docker_Adminer_Logined_b00fa87aaf.png 1000w," sizes="100vw"></li></ul>&nbsp;9. Why Use Docker:Using Docker lets you ship code faster, standardize application operations, seamlessly move code, and save money by improving resource utilization. With Docker, you get a single object that can reliably run anywhere. Docker's simple and straightforward syntax gives you full control. Wide adoption means there's a robust ecosystem of tools and off-the-shelf applications that are ready to use with Docker. &nbsp;

Docker is a software platform that allows you to build, test, and deploy applications quickly. Docker packages software into standardized units called containers that have everything the software needs to run including libraries, system tools, code, and runtime. Using Docker, you can quickly deploy and scale applications into any environment and know your code will run.

Explore And Learn Basic Knowledge about Docker

In this article, I will give an overview of web application security testing, key tools and terminology used in website security testing along with its testing methodology.<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_e359a0c902.png"></figure><h1>1. What is Security Testing?</h1>Security Testing is the process of testing and evaluating the security of an application or information system. The purpose of security testing is to identify and evaluate security vulnerabilities in an application or system, ensuring that information is well protected and not accessed by unauthorized parties. 1.1. Testing techniques and methods Security testing includes many different testing techniques and methods, including: - &nbsp;Authentication testing: check the authenticity of the login and user authentication process, check the security of the access authorization. - &nbsp;Penetration Testing: testing the security of the application by attacking the system like a hacker to find security holes. - &nbsp;Denial of Service Testing: test the security of the system by attacking and flooding the system bandwidth. - &nbsp;Malware testing: check the security of the application by looking for malicious code or malware. - &nbsp;Code Review: check the source code of the application to detect security holes that may appear in the source code. - Depending on the scope and complexity of the application or system, security testing can be performed at different levels to ensure security and against external attacks. 1.2. Security test target <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_6a1635cafc.png">The goal of web application security testing is to ensure that the application has no security holes that can be hacked or compromised. Specific goals of web application security testing may include: 1. Identify security holes: Test web application security to detect security holes that can be exploited to attack and penetrate the system. 2. Vulnerability Severity Determination: To assess the severity of detected security vulnerabilities and decide to prioritize them. 3. Improve the security of the application: By identifying and fixing security holes, web application security testing improves the security quality of the application. 4. Ensure compliance with security regulations: Web application security testing also ensures compliance with security regulations, standards and procedures set forth by government and security regulatory organizations. 5. Ensure data integrity: Web application security testing helps to ensure the integrity of data stored and transmitted through the application.<h1> 2. Some key terms used in Web security testing</h1>- Exploit: a technique to exploit security vulnerabilities to attack the system, such as executing malicious code, executing unauthorized commands, or accessing sensitive information. - Penetration testing: a method of testing security by trying to attack the system to detect security holes. - Security audit: check system security assessment, identify security holes and make recommendations for improvement. - Security assessment: the process of comprehensive testing of factors related to system security, including checking the design, implementation, configuration and implementation of security components. - Threat modeling: analyzing potential threats to systems and applications, helping to guide necessary security activities. - Malware: malicious software, designed to attack systems or steal information<h1> 3. Commonly used security testing tools</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f49a125c9a.png"></figure>There are many security testing tools used, depending on the purpose and requirements of the project, choose the right tool. Following are some common tools used in security testing: 1. &nbsp;Acunetix is an automated web security testing tool used to detect security vulnerabilities in web applications. It is capable of detecting most common security vulnerabilities such as SQL Injection, XSS, LFI, RFI, and many more. Acunetix provides users with detailed reports of discovered security vulnerabilities along with solutions to fix them. This tool is widely used by security professionals, web developers and information security organizations. 2. &nbsp;Nmap: Is a network scanning tool, which helps to find open ports on the system and detect hosts in the network. Nmap also provides detailed information about the services running on those ports. 3. &nbsp;Metasploit: Is a widely used intrusion testing platform to detect and exploit security vulnerabilities. It provides tools and resources for developing, testing, and deploying attacks. 4. &nbsp;Wireshark: Is a network packet analysis tool, helps detect network attacks, inspect network traffic and analyze network protocols. 5. &nbsp;Burp Suite: Is a set of web application security testing tools, allowing to detect security vulnerabilities on web applications, including XSS attacks, SQL injection, and buffer overflow vulnerabilities. 6. &nbsp;OpenVAS: Is an open source scanning platform, used to detect security holes in systems and applications. 7. &nbsp;Aircrack-ng: Is a set of tools for testing Wi-Fi network security, helping to detect security holes on Wi-Fi networks and recover access passwords.<h1> 4. Security testing method</h1>There are many security testing methods used to ensure that the system is operating safely and reliably. Here are some common security testing methods: - Source code inspection: This method checks the source code of the system or application for security holes, security flaws, and other weaknesses. Popular tools for testing source code include SonarQube, Veracode, and Fortify. - Penetration Testing: This method includes testing for security holes by simulating external attacks to assess the system's ability to resist these attacks. Popular tools include Metasploit and Nmap. - Authentication check: This method ensures that the system only allows access to authorized users and does not allow unauthorized access. Popular tools for authentication include Burp Suite and OWASP ZAP. - Check management: This method ensures that the system management is correctly configured and secure. Popular tools for management testing include OpenVAS and Nessus. - Malware testing: This method includes checking malicious code for malware and spyware. Popular tools to check for malware include Malwarebytes and VirusTotal. - Risk assessment check: This method evaluates security risks to ensure that they are treated effectively. Popular tools for risk assessment testing include OpenFAIR and FAIR.<h1> 5. Web Security Testing Method</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b1e4ab1649.png"></figure>Web security testing is the process of evaluating, identifying, and addressing security vulnerabilities in web applications. This is an important part of ensuring that web applications are used securely and reliably. Here are some common web security testing methods: - Manual Testing: Manual testing is the process of testing web security using manual tools and techniques to look for security holes. Manual testing includes testing and identifying security vulnerabilities using tools such as Burp Suite, OWASP ZAP, and other techniques. - Automated Testing: Automated testing involves using tools and software to automatically detect security vulnerabilities in web applications. Automated testing tools include W3af, Nessus, Acunetix, and OpenVAS. - Penetration Testing: Penetration testing involves trying to penetrate a system to look for security holes. Penetration Testing professionals use techniques like SQL Injection, Cross-site Scripting (XSS), and others to try to penetrate the system. - Static testing: Static testing is a method of testing web security by analyzing the source code of a web application to look for security holes. - Dynamic Testing: Dynamic testing involves testing web security by running web applications and using tools to look for security holes during runtime.

Security Testing is the process of testing and evaluating the security of an application or information system. 

Overview of web application security testing

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?

<h1>1. The concept of QA</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/QA_d64b442e1e.jpg"></figure> QA (Quality Assurance) in the tester is an important part of software development. It is related to the quality of software products through testing and monitoring activities. QA experts are often the manager and conduct testing activities to ensure that the product meets the quality requirements. QA experts will also check the development processes to ensure that the quality standards are met.<h2>1.1. The main activities of QA (Quality Assurance) in software testing include:</h2>-Check the correct and complete characteristics of quality requirements. -Ensuring the quality standards applied in the whole development process. -Create a test plan and perform test scenarios. -Evaluate test results and make reports to make decisions on software product quality. Evaluate test results and make reports to make decisions on software product quality. -Adjust the development processes to ensure the quality standards of the meeting.<h2>1.2. QA mission includes:</h2><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_c5137852e0.png"></figure>- Design and deploy quality control process to ensure that products or services meet quality standards and requirements. - Training and guiding employees in the process of implementing quality control process. - Ensure that the quality control process is implemented properly and fully. - Monitor and evaluate the process of quality control to seek improvement opportunities. - Provide solutions to solve problems related to product quality or service. - Ensure that products or services are prepared for inspection and ensure that the testing standards are properly established. &nbsp;&nbsp;<h2>1.3. The skills needed for a quality tester (QA) include:</h2>- Knowledge of software testing process: QA needs knowledge of software testing processes to ensure the test procedures are done properly. - Analysis and test design skills: QA needs to be able to analyze and design test cases to ensure the software is fully tested. - Programming knowledge: QA should have programming knowledge to be able to understand and read the software source code. - Knowledge of the database: QA needs to understand the database to check the correctness of the queries and operations on the database. - Skills to use test tools: QA needs to know how to use software testing tools to increase efficiency and save time. - Record and reporting skills: QA needs to be able to record and report test results in detail so that developers can easily understand and fix errors. - Communication skills: QA needs to be able to communicate well to be able to exchange and work with other members in the software development team. - Metastic and careful spirit: QA needs to be meticulous and careful in the software testing process so as not to miss any errors. - Perseverance and creativity: QA need to be persistent in finding errors and creativity in providing new test methods. - Professional: QA should have a professional spirit in working with a team of development and responsibility with product quality.<h1>2. The concept of QC</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_9a3fa2dbdc.png"> QC stands for "Quality Control", which means quality control. In the field of software testing, QC is often understood as the process of checking products or services of the company to ensure their quality meets the standards and quality requirements determined in advance.<h2>2.1. The main activities of QC (Quality Control) in software testing include:</h2>- Product quality inspection: QC implements test methods such as functional testing, performance testing, security check, compatible testing and product reliability to ensure that the product meets the quality and standard quality requirements. - Assessing the reliability of the product: QC also assesses the reliability of the product, including the ability to operate properly and meet the quality requirements with a definite level. - Consulting test: QC checks for consulting documents, such as product use, guidance for customer support staff, to ensure complete and accurate. - Check product development process: QC can perform product development process inspection to ensure that these processes comply with the quality standards determined and make improvements for the improvements. This process. - Quality inspection: QC Quality inspection of services provided by the company, such as customer support, to ensure complete and accurate. - Detection and error report: QC detects and reports the errors and quality issues of the product to the relevant departments to repair and improve the product. - Make improvements and recommendations: QC makes improvements and recommendations to improve product quality and development processes.<h2>2.2. To become a QC (Quality Control), you need the following basic skills:</h2>- Knowledge of software testing process: To understand the software testing process and steps in the software testing process. - Knowledge of software testing techniques: To be able to use appropriate software testing techniques such as white box test, black box test, integrated test, system test, handicap Get and test performance. - Planning skills and software testing organization: To be able to plan software testing, ensuring that the test steps are made according to the plan and the errors are detected and fully reported. - Skills to analyze and solve problems: To be able to analyze errors and solve problems effectively, ensure that errors are detected and repaired promptly. - Skills to use software testing tools: To be able to use effective software testing tools such as Selenium, Jmeter, Soapui, and many other tools. - Communication skills: To be able to exchange information and work with other members of the testing, development and project management team. - Logic thinking skills and details: To be able to detect and analyze software errors, identify the causes and find solutions to overcome. - Testing and quality assurance skills: To be able to check the software quality, ensuring that the software meets the quality requirements given.

In this article, we will learn the difference between QA and QC in software testing. Although they are all important processes of the software testing process, they have many differences in the purpose, methods and skills required. The article will help you better understand these two concepts and how they interact with each other to ensure software quality

Overview of QA and QC in software testing

<h1 style="text-align:center;">WordPress Simplified: Small Changes, Big Impact</h1><h2 style="text-align:justify;">1. Remember to frequently click on "Save Changes" in Permalink Settings</h2>Here is the code snippet to create a post-type called product:<pre><code class="language-php">&lt;?php
add_action('init', 'create_product_type');

function create_product_type()
{
 $labels = array(
 'name' =&gt; _x('Products', 'post type general name'),
 'singular_name' =&gt; _x('Product', 'post type singular name'),
 'menu_name' =&gt; 'Products',
 'all_items' =&gt; __('All products'),
 );

 $rewrite = array(
 'slug' =&gt; 'product'
 );

 $args = array(
 'labels' =&gt; $labels,
 'description' =&gt; 'Holds our custom product items',
 'public' =&gt; true,
 'menu_position' =&gt; 2,
 'supports' =&gt; array('title', 'editor', 'thumbnail'),
 'has_archive' =&gt; true,
 'rewrite' =&gt; $rewrite,
 );

 register_post_type('product', $args);
}</code></pre>Here is an example of a single-product.php file to display the detailed information of a product in the product post type.<pre><code class="language-php">&lt;?php
&lt;h1&gt;&lt;?php echo the_title() ?&gt;&lt;/h1&gt;</code></pre>If you do not click on "Save Changes" in Permalink Settings, the page will usually display a 404.php error, for example: &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_33f764c7d1.png"></figure>And after you click 'Save Changes' in Permalink Settings: &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8cb290529e.png"></figure>&nbsp;Then the result will be &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f68840fd2b.png"></figure><h2>2. Regularly update your plugins..</h2>Installation and updating errors with plugins/themes are some of the common issues that WordPress users often encounter. This can happen when the version of the plugin or theme is not compatible with your current WordPress version. When faced with this error, you may have difficulty installing or updating plugins or themes. This can cause problems on your website, affect user experience, and may lead to the loss of important data.To solve this problem, you should always choose plugins and themes from reputable developers and update them regularly. If you encounter issues with the current version of the plugin or theme, check if there is a newer version available. If there is, update it immediately to minimize the risk of errors.If you are unable to update your plugins or themes for any reason, seek help from the WordPress community or WordPress experts to resolve the issue. This helps avoid problems on your website and ensures that your website operates smoothly and efficiently. &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8b46a7c533.png"></figure><h2>3. Suggested plugins that I often use for you</h2> The following plugins are the ones that I often use when working with WordPress.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_3b3b8dd370.png" alt="Index of /wp-content/plugins/advanced-custom-fields/assets/images"> &nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_6539ff0a44.png" alt="All-In-One Security (AIOS) – Security and Firewall – WordPress plugin | WordPress.org"> &nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_1299490471.png" alt="Contact Form 7 – WordPress plugin | WordPress.org"><ul><li>The Advanced Custom Fields plugin helps me create custom fields for site content management.&nbsp;</li><li>The All In One WP Security plugin enhances the security of my site by adding features like strong password checks, malicious IP address blocking, and protection of sensitive files.&nbsp;</li><li>The Contact form 7 plugin allows me to create contact forms so that customers can contact me.</li><li>The SVG Support plugin helps me upload SVG vector image files for use on my website.&nbsp;</li><li>The Yoast Duplicate Post plugin makes it easy for me to duplicate posts for reuse without having to rewrite them from scratch. I strongly believe in these plugins and use them frequently in my projects.</li></ul><h2>4. Pay attention to the security of your website</h2>WordPress is one of the most popular platforms for creating and managing websites.&nbsp;However, because of this popularity, WordPress has become a prime target for hacker attacks. This poses a security problem for WordPress. &nbsp;To protect your WordPress site from attacks, there are some important security measures that you should take. First, you should use a strong password and change it periodically. We recommend using a WordPress security plugin to enhance your security, including plugins like All In One WP Security and Wordfence. &nbsp;You should also regularly update WordPress and your plugins to ensure that you have the latest version with security flaws corrected. In addition, you should also back up your website regularly to ensure that you can recover your website should any security issues occur. With the right security measures in place, you can keep your WordPress site secure and avoid hacker attacks.

A blog notes the problems and things I have encountered in the process of working with WordPress

WordPress Simplified: Small Changes, Big Impact

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

As a UI/UX designer, I uses a variety of tools to help complete his projects. However, when I came to know ChatGPT, a smart assistant that can assist in UI/UX work, I tested it and found it very useful. In this article, I will share with his own experience when using ChatGPT in UI/UX design work.<h2>1. Help finding information</h2> When starting a new project, I often have to look up information about the client and their industry. With ChatGPT, I can ask questions about customers and ChatGPT will search and provide me with relevant information. This saves time and effort searching for information on the Internet.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Information_search_9a90bad60d.png" alt="Information search.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Information_search_9a90bad60d.png 234w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Information_search_9a90bad60d.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Information_search_9a90bad60d.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Information_search_9a90bad60d.png 1000w," sizes="100vw"><h2>2. Come up with new ideas</h2>When designing user interfaces, I always want to come up with new ideas to make a difference and increase the uniqueness of my products. ChatGPT can help generate new ideas by giving suggestions and recommending websites related to your topic of interest. We can also ask questions about the latest design trends or design best practices for creating a better user interface.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/idea_b9b5a13c1c.png" alt="idea.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_idea_b9b5a13c1c.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_idea_b9b5a13c1c.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_idea_b9b5a13c1c.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_idea_b9b5a13c1c.png 1000w," sizes="100vw"><h2>3. Support in the content creation process</h2>Creating content for a website or app is an important part of my job. ChatGPT can help me with the content creation process by providing me with keywords related to the content I want to write about and giving advice on writing style and sentence structure.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/content_e8f0b796f3.png" alt="content.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_content_e8f0b796f3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_content_e8f0b796f3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_content_e8f0b796f3.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_content_e8f0b796f3.png 1000w," sizes="100vw"><h2>4. Answer the questions</h2>When I encounter questions during the UI design process, I can ask ChatGPT questions and it will provide answers and solutions to my problems. This saves time and increases work efficiency.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/answer_the_question_8e86d790cb.png" alt="answer the question.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_answer_the_question_8e86d790cb.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_answer_the_question_8e86d790cb.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_answer_the_question_8e86d790cb.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_answer_the_question_8e86d790cb.png 1000w," sizes="100vw"><h2>5. Check spelling and grammar</h2>When creating content or writing UI messages, I always want to make sure that words and sentences are spelled correctly and grammatically. ChatGPT can help check the spelling and grammar of words and sentences you write. This helps ensure that the messages we convey to our users are clear and accurate.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Check_spelling_and_grammar_8d72f77dc3.png" alt="Check spelling and grammar.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Check_spelling_and_grammar_8d72f77dc3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Check_spelling_and_grammar_8d72f77dc3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Check_spelling_and_grammar_8d72f77dc3.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Check_spelling_and_grammar_8d72f77dc3.png 1000w," sizes="100vw"><h2>6. Support for Search Optimization</h2>Search optimization is an important part of UI/UX work. ChatGPT can help come up with keywords related to its products and provide suggestions for optimizing its content to get the attention of search engines.In summary, ChatGPT has helped me improve his work efficiency. Saves me time and effort in the process of finding information, coming up with new ideas, assisting in the process of creating content and answering questions. questions. In addition, ChatGPT also helps check spelling and grammar, assists with search optimization, and offers advice on writing style and sentence structure. I believe that ChatGPT will be a useful tool for any UI/UX designer who wants to enhance their work efficiency and get the best results for their product. Once again I'm Hung, thanks for following my post!

GPT chat is great tool for UI/UX designer

Optimizing UI/UX Design Work With GPT Chat

Hello !! My name is Hung from ABC Software Solutions Company. To create the best user experience, UX (user experience) design plays an important role. However, many designers have fallen into the habit of putting too much information and features in their products. This makes the product complicated and difficult to use, making it difficult for users. In this article, learn about simplicity in UX design and how it enhances user experience.<h2>What is simplification, is it important in UX design?<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/wrong_right_4e631e7a84.png" alt="wrong right.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_wrong_right_4e631e7a84.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_wrong_right_4e631e7a84.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_wrong_right_4e631e7a84.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_wrong_right_4e631e7a84.png 1000w," sizes="100vw"></h2>Simplification is the process of eliminating unnecessary elements, reducing complexity, and creating a product that is simpler and easier to use. It is a design method that is useful in creating a better user experience. Why is simplification important in UX design?<h3> 1. Easy for users to use</h3>When designing products, simplification is the best way to help users use your product easily and quickly. When the product has too many features, it will be difficult for users to find the main and commonly used features. However, when the product is simplified, it is easier for users to find features and use the product effectively.<h3> 2. Helps increase page loading speed</h3>Using too many features and information on a website or mobile app can make it slow to load. If your product is too complex, it can affect the page load speed, causing frustration for users. Simplifying your product will help speed up page loads and create a better user experience. Using too many features and information on a website or mobile app can make pages load faster. slow. If your product is too complex, it can affect the page load speed, causing frustration for users. Simplifying your product will help speed up page loads and create a better user experience.<h3>3. Increase Interoperability</h3>The simplified product not only enhances the user experience, but also enhances the interaction between the user and the product. With a simple interface, users will easily interact with the product. If users have to search too much to use a feature or to find information, they will get annoyed and may skip your product. Simplifying your product increases interactivity and makes it easier for users to find information and use your product features.<h3>4. Increase product reliability</h3>A simplified product is often easier to use and understand. Simplified products make it easier for users to distinguish your product features and understand your product better. This will help increase product reliability and help customers have more confidence in your product.<h2>How to simplify your products</h2><ul style="list-style-type:disc;"><li>Focus on the most important feature: When designing a product, focus on the most important feature. Removing unnecessary features and focusing on the most important ones will make your product simpler.</li><li>Keep the interface simple: A simple interface makes it easy for users to interact with and use your product. Keep the interface simple and avoid using too many images or colors.</li><li>Use simple language: Use simple language and avoid using complicated terms. Using language that is easy to understand will make your product easier to use.</li><li>Test your product: Before a product goes to market, test your product thoroughly to make sure it's simple and easy to use. You can seek opinions from users or UX experts to evaluate your product.</li></ul><h2>Conclusions<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/experience_2daa89ca99.png" alt="experience.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_experience_2daa89ca99.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_experience_2daa89ca99.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_experience_2daa89ca99.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_experience_2daa89ca99.png 1000w," sizes="100vw"></h2>Simplification in UX design is the best way to create a great user experience and increase product reliability. When your product is simplified, it's easier for users to use your product, find information faster, and interact with your product faster. This will help increase interactivity and help users feel more comfortable using your product.However, simplifying the product is not easy, it requires perseverance and effort. Simplified product design can be a lengthy process and requires constant testing to achieve the best results. But for UX designers, product design simplification is an important skill to ensure that their product meets user requirements and increases product interoperability.In summary, UX design simplification is an important method for creating a good user experience and giving your product credibility. With simple steps to simplify your product, you can help users interact with your product easily and efficiently. This will help increase customer satisfaction and help increase your sales. So invest in simplicity in UX design for your business success.Above are my sharing about simplification in building UX design. I'm Hung, thanks for following my post! &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Simplification in UX design is about minimizing complexity, enhancing the ease of use and efficiency of the product.

Simplification in UX design

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

Hi !! My name is Hung from ABC Software Solutions Company. One of the highlights of Figma is the plugins. Figma has an extremely rich plugin library, new plugins are created almost daily. The Figma plugin has made design work smoother, improved productivity and saved time for dozens of errands, giving designers more time to focus on the main task. In this article, Hung will show you how to use some useful plugins in your daily work.<h2>What is Figma?</h2>Figma is specialized software for designing interfaces and building demos for applications and websites. In addition to the web and application platform, Figma is compatible with all operating systems. It is considered a great software for UI/UX design. In addition, it has features to support teamwork throughout the design process. It can be said that Figma is the leading interface design tool on the market today, because it is easy to use and offers a good user experience. Compared to Adobe XD or Sketch, Figma has many outstanding advantages, such as being able to work online and allowing users to collaborate with others in real time.<h2>Plugins I use the most</h2><h3>1. StyleList – Figma plugin for color and font correction.</h3>Each project will have a different color scheme, the colors in the palette are assigned color intensities based on a primary color. Figma can help designers manage colors easily. For example, when choosing a color to use, the designer can put that color in the "Color Styles" section to ensure that only the colors have been defined from the beginning, instead of using the Eye dropper tool to select colors. manually. Similar to colors, fonts should also be managed neatly. The designer will need to select the font styles, and make a note of what they are used for and put them in the "Text Styles" field. For example, headings H1, H2,…<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/img_style_list_5b826ea70d.png" alt="img-style-list.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_img_style_list_5b826ea70d.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_img_style_list_5b826ea70d.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_img_style_list_5b826ea70d.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_img_style_list_5b826ea70d.png 1000w," sizes="100vw">Usually, when starting to design, designers have to create color palettes and fonts on their design board, and then name and add additional effects. Doing so will take a lot of time, instead you can use the Figma plugin StyleList to automate the above process with one click.<h4>How to create a typeface on a StyleList:</h4><ul><li>Enter Base size</li><li>Select the desired scale and font type</li><li>Select the desired size</li><li>Click the “Create style” button.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/create_style_list_dfc8ed0b63.png" alt="create-style-list.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_create_style_list_dfc8ed0b63.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_create_style_list_dfc8ed0b63.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_create_style_list_dfc8ed0b63.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_create_style_list_dfc8ed0b63.png 1000w," sizes="100vw"><h3>2. Remove.bg – Remove background for photos<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/remove_bg_435b120e46.png" alt="remove.bg.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_remove_bg_435b120e46.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_remove_bg_435b120e46.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_remove_bg_435b120e46.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_remove_bg_435b120e46.png 1000w," sizes="100vw"></h3>Sometimes we upload beautiful photos for our designs, only to notice that the background of the photo doesn't match the design. Now we have to use tools like AI, Photoshop so it will be very time consuming. Knowing that, Figma has added the remove.bg application to its plugin set, helping designers to use only extremely simple operations, saving a lot of time. Note that you need to create a remove.bg account before you can use this plugin.<h3>3. Lorem Ipsum – Create Fake Content</h3>Lorem Ipsum is a type of dummy text used in design, typography and print. Its plugin allows designers to insert pieces of fake content to mimic the look and feel of the real copy. With this tool you can easily work out details like distance and position, words per line, spacing between letters and kerning. You don't have to spend time trying to develop content-filling blocks that might not fit your typography design.<h3>4. Unsplash- Plugin that provides quality photos</h3>When designing, we always want to find high-quality images, partly to increase professionalism, and partly to create a "flattering" feeling for the viewer. The Figma Unsplash plugin is a source of quality photos because the site has an extremely rich image library, is copyrighted and completely free. Users are free to use images on Unsplash for personal and commercial purposes. Photos on Unsplash are of very high quality, so they are favored and applied by designers not only in UI/UX but also in graphic design and other design industries.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/unsplash_d05b41e2e7.png" alt="unsplash.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_unsplash_d05b41e2e7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_unsplash_d05b41e2e7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_unsplash_d05b41e2e7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_unsplash_d05b41e2e7.png 1000w," sizes="100vw">How to use the Unsplash plugin:<ul><li>Insert random images: press the Insert random button in the random panel (random panel)</li><li>Insert a random image according to a theme: choose one of the themes included in the Presets.</li><li>Search for a specific image: use the search bar</li></ul><h3>5. Figma Iconify plugin</h3>Iconify is a collection of popular icon sets. This Figma plugin allows users to add icons from design systems such as Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, and many more icon sets (100+ icon sets with almost 100,000 icons). The nice thing about Iconify is that designers don't have to go to these icon libraries to download each icon manually. Instead, Iconify will aggregate all these icons, the designer just needs to open the plugin and drag and drop the icon into the design. It's really easy, isn't it? Unlike other plugins that require a fee to use icons in SVG format, Iconify is completely free to use. In addition, Iconify's interface is also extremely easy to use. Iconify's developers showed their understanding when they included a feature that remembers the last icon page the user visited, making it easier to continue using the recently searched icons.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/iconify_dafa494773.png" alt="iconify.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_iconify_dafa494773.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_iconify_dafa494773.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_iconify_dafa494773.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_iconify_dafa494773.png 1000w," sizes="100vw">Steps to use Figma Iconify Plugin:<ul><li>Search icon</li><li>Choose any icon</li><li>Click the “Import Icon” button or drag the icon onto the Figma designer page.</li><li>The tags above the search results will display the theme of the icon sets, in each card will have icons related to each other.</li><li>Click on any tag, the plugin will only show results from that set of icons</li></ul>You can drag and drop icons directly from search results and choose icon color, not available for icons with hard coding. Change icon size, developers can get icon codeReplace icon already previous import (only available if the previous icon's layer is selected in Figma).<h2>My impressions</h2>It will be difficult and time consuming for designers to handle design problems manually, so designers should use plugins to solve them quickly and accurately. However, we need to be careful when using Figma plugins, such as Find and Replace because if not checked carefully, this feature can replace the wrong text. After all, when choosing to use any plugin, it's still important to consider the product's requirements. Above are my sharing about the plugins I often use for the products I design. There are also countless other extremely good plugins, as well as very high support efficiency that I have not mentioned. Hope my small blog will help readers, especially those who are just starting out UI/UX, will easily approach Figma.I'm Hung thanks for following my blog!!!&nbsp;

Small blog sharing about the plugins I often use in the process of designing a complete UI.

Popular Figma plugins for UI design

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

Blog

Categories

Contact Us