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

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

<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

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

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

Welcome back to the series of learning what to share and I'm Tuyen. Yesterday, I shared some knowledge about Interceptor Axios that I found out. Continuing, this series, today I will share about the libraries and languages ​​that I have learned and used it in a project that I was involved in.&nbsp;As you all know making image slides and working well using HTML and CSS to write, it's very laborious. Realizing that it takes a lot of time and effort, there have been many libraries born and supported for this, including libraries: Owl Carousel, Slider, Slick, Swiper,... I used to use it. Swiper library for one of my projects and I found that it is very effective for creating slides, the usage is also very simple, no need to install much. To install and use it we need:Swiper slider is a library that supports image zoom function, running slider on the web is quite nice and simple.Install:<pre><code class="language-html">- We can install Swiper from NPM:
$ npm install swiper
- Use Swiper from CDN:
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"&gt;&lt;/script&gt;</code></pre>Basic syntax:&nbsp; Add code snippet to HTML&nbsp;&nbsp;<pre><code class="language-html">&lt;div class="swiper"&gt;
 &lt;div class="swiper-wrapper"&gt;
 &lt;!-- Slides --&gt;
 &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
 &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
 &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
 ...
 &lt;/div&gt;
 &lt;!-- If we need pagination --&gt;
 &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
 &lt;!-- If we need navigation buttons --&gt;
 &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
 &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
 &lt;!-- If we need scrollbar --&gt;
 &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>&nbsp; &nbsp; &nbsp; Swiper CSS styles/Size:<pre><code class="language-css">.swiper {
 width: 600px;
 height: 300px;
}</code></pre>&nbsp; &nbsp;&nbsp;Finally, we need to initialize JS:<pre><code class="language-javascript">// Add Swiper library
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';
const swiper = new Swiper('.swiper', {
 // Optional parameters
 direction: 'vertical',
 loop: true,
 // If we need pagination
 pagination: {
 el: '.swiper-pagination',
 },
 // Navigation arrows
 navigation: {
 nextEl: '.swiper-button-next',
 prevEl: '.swiper-button-prev',
 },
 // And if we need scrollbar
 scrollbar: {
 el: '.swiper-scrollbar',
 },
});</code></pre>Custom properties of Navigation: nextEL: String String CSS selector or HTML element will act as “next” button after clicking on itprevEL: String String CSS selector or HTML element will act as “prev”click on itPagination custom properties: el: String String CSS selector or HTML element with pagination and pagination types: “bullets”, “fraction”, “progressbar” or “custom”. We can also modify the default properties of navigation or pagination by directly interfering with their common class or adding another class to reconfigure them.&nbsp;<pre><code class="language-html">//HTML
 &lt;!-- Add generic navigation class --&gt;
 &lt;div class="swiper-button-prev navigation"&gt;&lt;/div&gt;
 &lt;div class="swiper-button-next navigation"&gt;&lt;/div&gt;
 &lt;!-- Add generic pagination class --&gt;
 &lt;div class="swiper-pagination pagination"&gt;&lt;/div&gt;</code></pre><pre><code class="language-css">//CSS
 .navigation {
 padding:0 20px;
 color: white;
 }
 .pagination{
 bottom:24px;
 }
 .swiper-pagination-bullet {
 height:12px;
 width: 12px;
 }
 .swiper-pagination-bullet-active {
 background-color: #0ea5e9;
 }
</code></pre>In addition, we can add optional Parameters depending on the purpose we need to use:<pre><code class="language-javascript"> // Let the slide slide automatically after 3s
autoplay: {
 delay: 3000
},
//Default for 2 photo slides in 1 frame and distance for 2 slides is 12px
slidesPerView: 2,
spaceBetween: 12,
//Create breakpoints at each screen for slide
breakpoints: {
 768: { slidesPerView: 3 }, // 768: will have 3 images displayed
 1024: { slidesPerView: 4 } // 1024:will have 4 images displayed
},</code></pre>Link code demo:&nbsp; https://codepen.io/GreencrisMessi/pen/WNywGyV *Note: for importing an image without showing navigation or pagination buttons:<pre><code class="language-javascript">const numberOfSlides = document.querySelectorAll('.swiper-slide').length;
const swiper = new Swiper('.swiper', {
 allowSlidePrev: numberOfSlides === 1 ? false : true,
 allowSlideNext: numberOfSlides === 1 ? false : true,
 autoplay: {
 delay: 3000
 },
 slidesPerView: 1,
 spaceBetween: 12,
 centeredSlides: false,
 pagination: {
 el: '.swiper-pagination',
 },
 navigation: {
 nextEl: document.querySelector('.swiper-button-next'),
 prevEl: document.querySelector('.swiper-button-prev')
 },
 on: {
 init: function () {
 const numberOfSlides = this.slides.length;
 if (numberOfSlides &amp;lt;= 1) {
 this.allowSlidePrev = this.allowSlideNext = false;
 this.el.querySelector('.swiper-button-prev').setAttribute('class', 'hidden');
 this.el.querySelector('.swiper-button-next').setAttribute('class', 'hidden');
 } else {
 this.el.querySelector('.swiper-button-prev').removeAttribute('hidden');
 this.el.querySelector('.swiper-button-next').removeAttribute('hidden');
 }
 }
 }
});</code></pre><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_32510b3411.png"> Link code demo: https://codepen.io/GreencrisMessi/pen/GRGyrzj The extension uses swiper library into Modal (Bootstrap) to create popup about image slide: - Reference modal in Bootstrap: <a href="https://getbootstrap.com/docs/5.2/components/modal/">https://getbootstrap.com/docs/5.2/components/modal/</a> - Create a Simple Modal:&nbsp;<pre><code class="language-javascript">Link CDN:
&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384 MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre><pre><code class="language-html">&lt;!-- Trigger button to open modal --&gt;
&lt;button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"&gt;
 Demo
&lt;/button&gt;
&lt;!-- Modal --&gt;
&lt;div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
 &lt;div class="modal-dialog"&gt;
 &lt;div class="modal-content"&gt;
 &lt;div class="modal-header"&gt;
 &lt;h1 class="modal-title fs-5" id="exampleModalLabel"&gt;Modal title&lt;/h1&gt;
 &lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"&gt;&lt;/button&gt;
 &lt;/div&gt;
 //In the body part we can add the slide code to see the displayed image
 &lt;div class="modal-body"&gt;
 &lt;div class="swiper"&gt;
 &lt;div class="swiper-wrapper"&gt;
 &lt;!-- Slides --&gt;
 &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
 &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
 &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
 ...
 &lt;/div&gt;
 &lt;!-- If we need pagination --&gt;
 &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
 &lt;!-- If we need navigation buttons --&gt;
 &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
 &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
 &lt;!-- If we need scrollbar --&gt;
 &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
&lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="modal-footer"&gt;
 &lt;button type="button" class="btn btn-secondary" data-bs-dismiss="modal"&gt;Close&lt;/button&gt;
 &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>We can add slides anywhere in the modal (header, body, footer). But I recommend that you put it in the body to make it easier to manage and control your code better. Similar to how to add HTML, CSS, and JS code, we also write files to run. Link code demo:&nbsp; <a href="https://codepen.io/GreencrisMessi/pen/OJEzWmN">https://codepen.io/GreencrisMessi/pen/OJEzWmN</a> This is all the knowledge I have learned and done about Swiper in my project. Thank you for reading up to here! See you in the next sharing series!!!&nbsp;

Swiper slider is a library that supports image zoom function, running slider on the web is quite nice and simple.

How to create slide with swiper

Today, I will introduce an overview of Menu Navigation, Drop-Down in WordPress Dashboard.&nbsp;
First, I will learn the concept of Wordpress which is an open source part written in PHP and . MySQL database management systemOver time of development, the number of users increased, collaborators who are programmers also participated in large numbers to develop the WordPress source code for more great features. If you want to build any kind of website, from blog to eCommerce store, even with more complex types of website like hotel booking, car rental. Then WordPress is a great choice.&nbsp;
To create a user-friendly website, you should not only make the website look good, but also have the right features. Such as: Pagination, Footer, Filter menu, Menu navigation… To increase the user experience. In which, the Navigation Menu contributes significantly in assisting users to find information on the Website. With Wordpress Dashboard, you can easily create and use hierarchical menus, or menus with dropdown menus. In this blog, I will show you how to create a dropdown menu in WordPress Dashboard and be as detailed as possible.&nbsp;
1. What is a navigation menu?&nbsp;
Menu Navigation (navigation menu) is a set of links that form a menu, they are usually displayed as a horizontal or vertical navigation bar and the menu can be placed anywhere in the website. Normally, the popular websites today often put the Navigation Menu below the header of the website, in this blog I will create the Navigation Menu as shown in the image below.&nbsp;
The navigation menus provide links to important sub-sites of the website and help customers quickly access or use the desired service, below is an example of the navigation menu interface&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_a9c56e4b1a.png" alt="image.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_image_a9c56e4b1a.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_image_a9c56e4b1a.png 500w," sizes="100vw">
Figure 1.1. Description of Navigation Menu in one Website&nbsp;
Creating menus in WordPress dashboard is not as difficult as you think, to add main menu and sub menus, you can add links to websites that customers visit most, categories or the most important theme.&nbsp;
The placement of your menu will depend on WordPress theme . Most themes will have several options. So you can create different menus that can be displayed in different places in the website.&nbsp;
For example, most WordPress themes have a main menu that appears at the top, some themes may include a sub menu, Footer Menu, or navigation menu on your mobile device.&nbsp;
Benefits of using navigation menus:&nbsp;
1.Optimized display on mobile&nbsp;
2.Keep visitors on your site longer&nbsp;
3.Access to better discovery of products&nbsp;
4.Improve search engine rankings&nbsp;
5.Promote professional images&nbsp;
2 .Create menus in WordPress Dashboard&nbsp;
To create Menus in WordPress you need to access Appearance -&gt; Menus to open the menu management window in WordPress.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh2_1_c33ff0307e.png" alt="hinh2.1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh2_1_c33ff0307e.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh2_1_c33ff0307e.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh2_1_c33ff0307e.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh2_1_c33ff0307e.png 1000w," sizes="100vw">
Figure 2.1. Create custom navigation menus in WordPress &nbsp;&nbsp;
First, you need to provide a name for your menu (under Menu Name) such as Main Menu and then click the Create Menu button.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh2_2_5df0724f50.png" alt="hinh2.2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh2_2_5df0724f50.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh2_2_5df0724f50.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh2_2_5df0724f50.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh2_2_5df0724f50.png 1000w," sizes="100vw">
Figure 2.2. Create main menu in WordPress &nbsp;&nbsp;
Next, you can select the pages that you want to add to the menu, you can add all the top level pages automatically, or you can select specific pages from the left column.&nbsp;
Then, click the View All tab to see all the pages on your site, and click the checkbox next to each page you want to add to your menu, and then click Add to Menu.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh2_3_8cf517cfe8.png" alt="hinh2.3.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh2_3_8cf517cfe8.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh2_3_8cf517cfe8.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh2_3_8cf517cfe8.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh2_3_8cf517cfe8.png 1000w," sizes="100vw">
Figure 2.3. Add category to menu &nbsp;&nbsp;
Once your pages have been added, you can move them to organize by dragging and dropping them.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh2_4_0b06c21092.png" alt="hinh2.4.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh2_4_0b06c21092.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh2_4_0b06c21092.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh2_4_0b06c21092.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh2_4_0b06c21092.png 1000w," sizes="100vw">
Figure 2.4. Rearrange menu categories
Note: All menus have items listed (from top to bottom) in the menu editor. When you place the menu directly on your website, the menu will display either vertically or horizontally (from left to right) depending on the position you choose, most themes have several different positions for you to choose from. menu can be set.&nbsp;
After adding the pages to the menu, select where you want the menu to be displayed and click Save Menu.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh2_5_739b503ab2.png" alt="hinh2.5.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh2_5_739b503ab2.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh2_5_739b503ab2.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh2_5_739b503ab2.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh2_5_739b503ab2.png 1000w," sizes="100vw">
Figure 2.5. Choose where to display the menu &nbsp;&nbsp;
If you're not sure where each location will be, try saving the menu in different places, then visit your website to see what it looks like. You may not want to use a certain slot, but you can use many different slots.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh2_6_9b00042ff1.png" alt="hinh2.6.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh2_6_9b00042ff1.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh2_6_9b00042ff1.png 500w," sizes="100vw">
Figure 2.6. The complete menu on the website &nbsp;&nbsp;
3. How to Create a Drop-Down Menu in WordPress&nbsp;
The drop-down menu, sometimes called a nested menu, is a navigation menu with main menu items and sub-menus, when you hover your cursor over a parent item, all the sub-items. will be displayed below the item.&nbsp;
To create a sub-menu, drag an item below the main item, then drag to the right, we will see there are 3 sub-items under Tours in the menu as follows:&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh3_1_6dce030a72.png" alt="hinh3.1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh3_1_6dce030a72.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh3_1_6dce030a72.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh3_1_6dce030a72.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh3_1_6dce030a72.png 1000w," sizes="100vw">
Figure 3.1. Create dropdown menu in WordPress &nbsp;&nbsp;
Below is the submenu (also known as submenu) displayed on the website:&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh3_2_4bb6c8c155.png" alt="hinh3.2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh3_2_4bb6c8c155.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh3_2_4bb6c8c155.png 500w," sizes="100vw">
Figure 3.2. Sub-menu interface on the website &nbsp;&nbsp;
You can even add multiple dropdown menus to your website in one website but this can get a bit messy and many themes don't support multi-layered dropdown menus.&nbsp;
Below is a description with two subsections of its own.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh3_3_c7ce2567dc.png" alt="hinh3.3.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh3_3_c7ce2567dc.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh3_3_c7ce2567dc.png 500w," sizes="100vw">
Figure 3.3. Menu interface has two subsections&nbsp;
4. Adding Categories to Menus in WordPress&nbsp;
If you are using WordPress to blog, then you can add Categories to your blog as a dropdown menu in your WordPress menu.&nbsp;
You can easily add Categories to your menu by clicking the Categories tab on the left side of the Menu screen, you may also need to click the View All tab to see all the Categories.&nbsp;
Just select the Category you want to add to the menu, then click Add to Menu.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh4_1_a732a8b45f.png" alt="hinh4.1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh4_1_a732a8b45f.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh4_1_a732a8b45f.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh4_1_a732a8b45f.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh4_1_a732a8b45f.png 1000w," sizes="100vw">
Figure 4.1. Adding Categories to the menu&nbsp;
Categories will show up as your submenu items, which you can drag and drop to each position you want.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh4_2_23b2ba1c53.png" alt="hinh4.2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh4_2_23b2ba1c53.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh4_2_23b2ba1c53.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh4_2_23b2ba1c53.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh4_2_23b2ba1c53.png 1000w," sizes="100vw">
Figure 4.2. Organize Blog Sub Category&nbsp;
5. Add Custom Links to Navigation Menu in WordPress&nbsp;
In addition to Categories and Pages, WordPress also makes it easy to add custom links to your menus. For example: online store or other websites you have.&nbsp;
You will need to use the Custom Links tab on the Menu interface. Just add the link along with the text you want to use in your menu.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh5_1_4f692e6956.png" alt="hinh5.1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh5_1_4f692e6956.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh5_1_4f692e6956.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh5_1_4f692e6956.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh5_1_4f692e6956.png 1000w," sizes="100vw">
Figure 5.1. Use Custom link to link to another page &nbsp;
&nbsp;6. Edit or remove a menu item in the Navigation Menu&nbsp;
When you add Pages or Categories to your custom navigation menu, WordPress will use the page title or the name of the Category as the link text, you can change the thing. this whenever you want.&nbsp;
Any menu item can be edited by clicking the down arrow next to it.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh6_1_e3720694a6.jpg" alt="hinh6.1.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh6_1_e3720694a6.jpg 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh6_1_e3720694a6.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh6_1_e3720694a6.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh6_1_e3720694a6.jpg 1000w," sizes="100vw">
Figure 6.1. Editing navigation menus in WordPress &nbsp;&nbsp;
You can change the name of the menu item here, and you can also click Remove to remove the entire link from your menu.&nbsp;
If you are having trouble with the drag and drop interface, you can also move the menu item by clicking the appropriate Move link.&nbsp;<div id="md2html-converted" style="display:none"></div>

To create a complete, lively website and the best user experience, the Menu is indispensable in a website. This blog gives an overview of Menus and how to create Menus in WordPress Dashboard.


Instructions for creating menus in WordPress Dashboard

Hi!! My name is Hung from ABC Software Solutions Company.
Applying the UI-UX design process in website/app design is an effective method to ensure that you create a product with a great experience that brings success to your business. So what is the standard UI-UX design process? And how does the UX process help create a good experience? Let's learn the steps of the UI-UX design process in this article to understand why it is important and trusted by businesses.
<h2>Analyze and come up with ideas</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ideas_ab0559af00.png" alt="ideas.png">
I believe that any field or profession or job, the analysis process is indispensable. Especially with information systems, it is extremely important to carefully analyze data, habits, habits … of users and create a detailed plan for the project. This helps Designers and Developers firmly grasp the purpose, business, features of the software or features to be developed, thereby avoiding unnecessary errors and misunderstandings that lead to a lot of time and effort to repair. . At this step Designer needs to work with BA (Business Analyst) quite a lot.
The advice for you is to survey business stakeholders, learn and survey different users through User Personas, User Stories, Use cases and User flows.
After having a detailed plan, the task of UI-UX Designer is to come up with ideas through reference to design archives such as Behance, Dribble, Pinterest Freepik… From there, consistently assign the design to the design. Design elements such as color, typography, or design style that best suit the user of the product.
<h2>Draw Wireframes</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/wireframe_06d4916366.png" alt="wireframe.png">Creating Wrireframes is a blueprint for each page, with visual indicators like lines, grids, and boxes that indicate where the type of content, images, and other elements will lead the user. Wrireframe is just a blueprint, not a final design, it may be high resolution or it may be low resolution depending on the tool you use, it doesn't matter, what matters is the wireframe. Provide your team with the things to follow when starting a detailed website design.Wrireframe shows a clear and simple way to organize the layout of a web page. Wireframing also serves another important function and that is communication. The common way is to wait until a detailed web design is available before discussing and editing. But doing so makes it difficult to evaluate the effectiveness of the design and risks starting over and over again, leading to time and effort. Therefore, the way in UX design is to build wireframes quickly so that everyone in the team has a rough design to discuss and agree on the necessary things before going to the official design. From there, know how to coordinate smoothly to push the project to completion.<h2>Detailed design</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/design_890f8c98a8.png" alt="design.png">Unlike Wireframe, in this step we need to focus on user interface. This step will create a complete interface for our software, website, creating a good user interface or not will also affect the user experience (UX). That's why it is said that UI/UX goes hand in hand and cannot be separated.At this step, components will also be fully designed with states. For example, a node in a wireframe only needs to show up as a rectangle, but in detail design, a node in addition to including metrics like color, border, cornering, shadow… then it is also displayed as button on hover, button on click, button after click, button on disabled…<h2>Prototyping and Mockups</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/prototyping_215d8d6cac.png" alt="prototyping.png">Some people are confused between Wireframe, Mockup or Prototype. But all can have different functions.<ul><li>Mockups: As a step on the wireframe, mockups take what has been established with the wireframe and present it on the graphic design, which may have some functionality like navigation, used to see how the design will look.</li><li>Prototype Acts as an almost fully realized version of the design, navigating, interacting, and utilizing all the main images and content blocks. It is not necessary that every component has everything for the user to interact and experience. Prototype is closest to the finished web design, it allows you to get the feedback you need and make tweaks and tweaks. edit before moving to code.</li></ul>With Prototype, you still have 2 types: Focus on function over design and the other is design for the closest to the final version.<h2>Check</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/check_e81164c636.png" alt="check.png">After you have a prototype, it's time to do usability testing. This means that you have to give someone who has never seen a design before and let them experience it comfortably, live testing can allow you to see clear and actionable feedback when people page experience web. Or their inquiries looking for answers to popular question variable users will likely do with your site. To from that Observe everything is unstable, easy to see the level in the content of the tutorial. All of the above data will give you information about the design's level results and the points that need to be changed.<h2>Hand over</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hand_over_0574b3b3b5.png" alt="hand over.png">This step is to hand over the complete design to the Front-End Dev team to ensure that the Dev has understood correctly and fully about the entire design. This step is extremely important as it will determine whether the actual product is really what it is intended to be compared to the UI/UX design. Of course, the ability of Front-end dev is something to be mentioned but there are many cases where they do it wrong because they have not read the design properly. This phase needs to coordinate smoothly between the coder and the designer.Hope my article will be of some help to you, Currently, all the steps to create a Product design as mentioned above, we can all use Figma tool - A design tool. professional UI/UI design but also free.Once again I am Hung, thank you for your interest in my Blog!!!
<div id="md2html-converted" style="display:none"></div><div id="md2html-converted" style="display:none"></div>

To create a UI-UX design, it requires UI-UX Designers to spend a lot of time studying and following certain processes and standards. The following are the basic steps to help you create a complete UI/UX product.

What steps does a complete UI-UX design need to go through?

Hi!!
I'm Hung from ABC Software Solutions Company.
Today is a very beautiful day, reminding me of the moment when I first stepped into UI-UX with so many surprises. So on this occasion I would like to share with you a story about my UI-UX learning process and the difficulties I have encountered, hope that everyone will like this little story of mine.
<h2 id="whychooseuiux">Why choose UI-UX?</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/why_chosse_UI_UX_011efdeded.png" alt="why chosse UI-UX.png" />
For a person who just graduated from a university majoring in information technology like me, why choose a job as UI-UX designer? Yup, I simply want to challenge myself in a new field related to programming. I was very fortunate to be introduced and work at <a href="https://abcsoftwarecompany.com/">ABC Software Solutions</a>, where I had a wonderful time when I experienced the feeling of being an apprentice do real projects. Thanks to that, my design ability gradually improved a lot.
UI-UX helps me connect with everyone in the team, in addition, I can create designs that express my personal creativity. Most tech careers are technical, doing repetitive tasks every day, such as coding. Because I don't like such aridity, UI-UX is "kind" to me, but my creative designs still have to comply with design and programming rules.
<h2 id="thedifficulties">The difficulties</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/difficult_e497e545da.png" alt="difficult.png" />
At first, I thought UI-UX was the same, but that's not the case at all. UI-UX are two inseparable categories, but they are completely separate concepts. It is impossible to work on the user experience without considering the appropriate interface and aesthetics. On the contrary, if the interface is very eye-catching but builds hard-to-see content, it is also a disadvantage.
UI-UX is easy but difficult? When I first started designing, I only thought how to make the interface beautiful and pleasing to my eyes and I did not follow any design rules at all. It was a very serious mistake, I made very basic mistakes due to my haste, I received a lot of feedback from the brothers and sisters in the company, at that time I felt extremely confused. However, it felt like my product was not well received, at this point I realized that UI-UX is not as simple as I thought.
After that fall, I started to carefully learn about UI-UX more carefully, I spent a lot of time taking courses on Udemy and going to consult other clones of other designs on communities. UI-UX coin. I am fortunate to have Ms. Chi (Senior UI-UX Designer) who has always supported me from afar, specifically evaluating my designs, only tools, plugins… She is also the feedback person for the products. in the future, help me improve. I am very grateful and love you very much.
<h2 id="theexperienceivebeenthrough">The experience I've been through</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/experience_going_through_e1279d9686.png" alt="experience going through.png" />
In the process of working with everyone in the team, I have learned a lot. When starting out, of course, there will be a little bit of difficulty, as simple as, for example, when I finish the design and give it to the coder, the coder or commenter says the design like this is too difficult, can't be done and requires Change the design to make coding easier. However, easier to code is not always better. Because you coder doesn't understand UI-UX, you don't understand why it is necessary to design it like that, affecting the final product. It was also an experience for me, now that I have overcome this drawback, the work becomes smoother and the product comes out perfectly.
Here are some experiences that I have learned after my UI-UX learning process.
<ul>
<li>Master the most basic knowledge: When starting something, it should go from easy to difficult, basic to advanced, there must be a clear roadmap. UI-UX design is a new profession and full of opportunities for those who want to enter. Therefore, grasping and possessing the essential skills and qualities for this job will help us build a solid foundation, from which, quickly develop into a professional UI/UX Designer.</li>
<li>Continuously updating new knowledge about UI-UX: UI-UX is a profession that needs constant updating. Learning new skills and improving technique is essential to keeping up with the market. Those learning resources can come from books, community groups, courses…</li>
<li>Self-learning ability: UI-UX needs a lot of investment to learn, so it is necessary to allocate time in a tight and reasonable way. In addition, when I have a new design, I can share it with UI-UX groups so that experienced people give direct feedback to help us progress faster.</li>
<li>Put your heart into the product: Every product we make should be considered as our own child and give it the best. Where has anyone given birth to a child? I have to take care of it since I was pregnant to keep it healthy. It still has to be taken care of so that it looks clean and behaves with others politely. Just like from the stage of code has to be clean, making products must have good UI, good UX, less bugs, less crashes.</li>
<li>Adhere to UX-/UX design principles: When the design is most important to focus on the user, in addition the design must ensure consistency, responsiveness to the context and content.</li>
<li>Soft skills: Soft skills are an important factor to help us become a good designer. Specifically, we must have the ability to communicate, think creatively. Must know how to react flexibly and understand users. The foreign language factor is the most important part, good foreign languages ​​will have many opportunities and the ability to advance in work.</li>
</ul>
Actually, I see that every job will have difficulties, when I overcome those difficulties, I will receive extremely worthy results. Up to now, UI-UX is still the thing that makes the most passion and attachment. Now I just want to be good at the job I have, accept the parts that won't turn out the way I wanted, and enjoy the moment when I can forget all about the work
Just that, then in the evening, at the weekend, go chill, don't worry too much, life is in balance, and then find many different ways to make yourself happy, that's all.
Hard work pays off. Work hard to train and equip yourself with the necessary skills and qualities to be stronger on the career development path of a UI-UX Designer, friends!
I'm Hung, thank you for your interest in my Blog!!!
<div id="md2html-converted" style="display:none"></div><div id="md2html-converted" style="display:none"></div>

I want to share with you a little story about my UI-UX learning process and the difficulties I encountered.

My process of learning UI-UX

Hello everyone!
It's me Quoc Hung again from ABC Software Solutions Company.
Most UI-UX beginners when starting to design a new project are often confused about which font to choose, layout colors or reasonable distances to make their designs stand out. … To help answer that question in this article, I want to share with you a very good library that is the Material-UI library in Figma.
MUI (Material-UI) is not a new topic but it is still very hot. When it comes to Material-UI people will think of React, yes the MUI libraries on Figma also mostly follow React's programming rules. Specifically, let's learn more about this interesting and wonderful topic.
<h2 id="whatismaterialui">What is Material-UI?</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mui_a8d388dc78.png" alt="mui.png" />
The concept of Material-UI starts from a library of React Components that have been integrated with Google's Material Design. According to the introduction on the homepage, it was built through a strong connection with React and Google's Material Design.
Material UI gives you and your website a completely new interface, with buttons, textfields, toggles… designed in a novel style, instead of the current Bootstrap user's housework. The use of Material-UI helps users save a lot of time from the available Components. With over 20 Components it is probably enough for your website to be lively as well as very easy to maintain the code.
Some noteworthy Components:
<ul>
<li>Layout: Layout is called the layout for a website. With this part, Material-UI has built very handy Components for us like: Box, Container, Grid, Hidden, Image List.</li>
<li>Inputs: Inputs are components that are built to receive data and manipulate forms. With Components such as Button, Button Group, Checkbox, Floating Action Button, Date/Time, Radio, Select, Slider, Switch, Text Field, Transfer List.</li>
<li>Navigations: With built-in components for Navigate or application navigation. It's too convenient and professional when we use this UI library. Framework has built-in Components such as: BottomNavigations, BreadCrumbs, Drawer, Link, Menu, Stepper, Tabs.</li>
<li>Surfaces: Material has also created for us a frame that contains available content, we can use Components such as: App Bar, Paper, Card, Accordition.</li>
<li>Feedback: We have Components that help disable custom functions on the screen and wait for the response of those components to be able to work again. There are a number of components like: Progress, Dialog, Snackbar, Backdrop. In it as simple as Cmponent Progress we can create a Loading effect that waits for a response from the backend and then turns off Loading.</li>
<li>Data Display: Material-UI has supported us with basic data display methods that almost have everything needed on an application with Components: Avatar, Badge, Chip, Divider, Icons, List, Table, Tooltip , Typography format for text).</li>
</ul>
In addition, we can also take advantage of a lot of other Components to help our website become more professional such as: Modal, Poover, Transitions… everyone can go to the homepage for more information.
<h2 id="materialuiinfigma">Material-UI in Figma</h2>
To create a beautiful user interface, it is necessary to follow a lot of rules in design (Color, Typography, Contrast, Spacing, Grid, …) these rules will mostly be numerous and confusing for beginners. I started learning Figma design, so Material-UI in Figma was born, helping designers have a more intuitive view and easier to build designs.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Mui_for_figma_0b6c981e76.png" alt="Mui-for-figma.png" />
With Material-UI in Figma we can take advantage of the libraries shared by designers around the world on the Figma community, open the Material-UI library right away that will answer all your questions. Like React Components, Figma also has Components to share, Components in Figma have the main function of helping designers easily manage layers as well as help create and manage consistent designs across projects.
When working with a programming team, you should use a unified set of Material-UI that will save time as well as ensure that there will be no minor errors throughout the project implementation process. As a personal designer, after receiving the guidance and help of Mr. Tin Tran (Developer with many years of experience) has launched a UI Kit in the standard style of Tailwind CSS code. With the use of the available resources of Tailwind CSS (color, Spacing, Typography, Borders, Effects, SVG,…) now when embarking on a new project, just using the preconfigured resources is very convenient. profit.
<h2 id="personalopinion">Personal opinion</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ui_kit_ce692fd450.png" alt="ui-kit.png" />
Of course, about beauty, everyone's personal opinion is different, you may find the Material-UIs on the Figma community are not eye-catching or do not meet your design goals. Build your own UI Kit and share it with everyone.
As for convenience, it's clear that Material UI has provided more than enough for a project, making our individual or group work faster and more perfect. In addition, you should also refer to the designs on Figma's community to save impressive designs, contributing to your design skills and logical thinking.
Through this article I would like to introduce about Material-UI React as well as Material-UI on Figma and the great benefits it brings to designers. Hope this article helps people to some extent in choosing your design style.
I'm Hung, thanks for your interest in my Blog!!!
<div id="md2html-converted" style="display:none"></div><div id="md2html-converted" style="display:none"></div>

Most UI-UX beginners, when starting to design a new project, are often confused about which font to choose, the layout colors or the reasonable distances to make their design stand out. To help answer that question in this article, I would like to share with you a very good library that is the Material-UI library in Figma.

Material-UI in Figma

Hello everyone! I'm Linh here. 
In the work related to testing software, we often have a lot of different forms of testing such as: E2E Test, Test coverage, Logic Test, Manual Test, etc. However, for a beginner like us, we usually start with Manual Tester to test a first website. Then, I am going to share to you some Tester experience which I was trained by my sister. She is Hoa who has 10-year experience in tester, taught me about Manual Testing.
 
First of all, we have to understand what is Manual Testing?
Manual Testing is a method of testing software or a programme that is performed manually by testers without going through any testing automation tools.
It is used based on the purpose of detecting from small to big bug errors in the programme.
From that, it gives solutions to make sure that the software is in the most stable operation when delivering to customers.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/software_testing_26d40f9de9.png" alt="software-testing.png" />
<h6 id="weknowthateachworkalsohasstrengthsandweaknessesandmanualtestingdontexcept">We know that each work also has strengths and weaknesses and Manual testing don't except.</h6>
Strengths:
<ul>
<li>Manual testing helps us save fee.</li>
<li>It receives feedback quickly and intuitive about designed software interface.</li>
<li>When it has small changes, it helps us to save time for testing software.</li>
<li>There are many oppoturnities for testing to find out complex mistakes, which also helps tester to increase skill.</li>
</ul>
Weaknesses:
<ul>
<li>Tester spends a lot of time and efforts looking for errors.</li>
<li>Fail-safety, convenience of Test manual are less than these of Automation test.</li>
<li>Just be helpful while testing cases run one or two time, not unsually repeat.</li>
<li>The process of Manual Testing isn’t recorded, therefore it can’t reuse in other testing situations.</li>
</ul>
<h3 id="somemanualtestingtechnique">Some Manual Testing technique:</h3>
<ul>
<li>Checking the interface is correct with design (desktop/mobile, responsive layout is fine).</li>
<li>Testing font-size, color, font-family, font-weight, line-height correctly and compare with design by tool <a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en">WhatFont</a></li>
<li>Link/ button is always in hover + hand icon when moving to hover.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cursor_pointer_25461c9376.png" alt="cursor-pointer.png" /></li>
<li>Padding left/right top/bottom always have same level (except some especial situations).</li>
<li>Add icon loading site.</li>
<li>Space between modules isn’t too wide/ too narrow (desktop/responsive/mobile).</li>
<li>No horizontal scrolling.</li>
<li>Do have favicon site.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/favicon_site_16696d171e.jpg" alt="favicon-site.jpg" /></li>
</ul>
<h4 id="1aboutthelogomenubreadcrumb">1. About the Logo, Menu, Breadcrumb.</h4>
<h5 id="alogomenu">a. Logo + Menu:</h5>
<ul>
<li>The logo must have a link to home.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/logo_link_a9a244474a.png" alt="logo-link.png" /></li>
<li>The logo is not scaled.</li>
<li>There is a hand icon for the menu with the link, the destination is the correct link.</li>
<li>Has hover/active state.</li>
<li>Entering “son” menu have to activate “Dad” menu.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/menu_abcc2126a8.png" alt="menu.png" /></li>
<li>No activate 2 menus in a time.</li>
<li>Scroll to the bottom of the menu pin (optional but required for users’ convenience).</li>
<li>Have a phone number or email: click in correct action.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/phone_bd2fb87ab6.jpg" alt="phone.jpg" /></li>
</ul>
<h5 id="bbreadcrumb">b. Breadcrumb:</h5>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/breadcrumb_c190633d5e.png" alt="breadcrumb.png" />
<ul>
<li>Correct level of Home/ menu/ detail.</li>
<li>The bottom level breadcrumb has no links.</li>
<li>Up-level Breadcrumb must return to the correct link.</li>
</ul>
<h4 id="2search">2. Search</h4>
<ul>
<li>For hidden search, when clicked -&gt; show the search box.</li>
<li>Click on the search icon when you haven’t entered anything -&gt; display a blinking cursor in the search box.</li>
<li>Add text in the search box enter or click search icon to have an action.</li>
<li>Search with special characters on the keyboard: !@#$%^&amp;*(){}[]&lt;&gt;?/:'” -&gt; so that see errors.</li>
<li>Page search has the format /search?keyword /search?q=test or may be different depending on the language.</li>
<li>Test page search results: search results based on title + detail, for example to search "test" will filter out all pages that contain the word test.</li>
<li>Page search with multiple results will display by paging/Load more or load when scrolling.</li>
<li>Click on the right search result to go to the right page.</li>
<li>Do not repeat search results.</li>
</ul>
<h4 id="3image">3. Image</h4>
<ul>
<li>An image must have alt (background is not needed)
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/alt_image_4c100345e3.png" alt="alt-image.png" /></li>
<li>Alt image is now correct as entered, use this link to check: <a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm">Web Developer Chrome Extension</a></li>
<li>Image is not scaled.</li>
<li>Image size should not be too big (optimize at https://tinypng.com/) standard size less than 200kb, for banner images or high quality images it is possible.</li>
<li>The image size resizes to the correct standard, for example, the width height only needs to be 400x400px, but the original image is 1500x1500, then resize to the correct or maximum double 800x800px.</li>
</ul>
<h4 id="4form">4. Form</h4>
<ul>
<li>The form includes mandatory fields (fields marked with *) and optional fields (fields without a *).
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/form_9797de383a.png" alt="form.png" /></li>
</ul>
<h1 id=""> </h1>
<ul>
<li>Submit without filling in info -&gt; the required fields must have a red border and the text message line requires information to be entered (otherwise, the optional fields are not needed).</li>
<li>Email, phone must fill in the correct format for the new pass, email has the extension @, phone includes a number and “+”.</li>
<li>Testing submit form multiple times.</li>
<li>Fill in the form information and wait a few minutes before submitting (see if there is a timeout).</li>
<li>After submitting the form, you must clear all previous information, move to the page “thank you”.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/submit_form_be3a322a9c.png" alt="submit-form.png" /></li>
</ul>
<h4 id="5ruleheadingh">5. Rule heading H</h4>
<ul>
<li>Read this blog to have understand clearly about heading H (https://seotongthe.vn/the-heading/ ).</li>
<li>1 page must have 1 heading H1.</li>
<li>Determine the content of a page to set H correctly.</li>
<li>2 identical content cannot have 2 different H tags.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_c8f4833c2a.png" alt="image.png" /></li>
</ul>
<h3 id="therearesometoolshelpstotest">There are some tools helps to test:</h3>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en">What font</a></li>
<li><a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm">Web developer</a></li>
<li><a href="https://chrome.google.com/webstore/detail/social-share-preview/ggnikicjfklimmffbkhknndafpdlabib?hl=en">Social Share Preview</a></li>
<li><a href="https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en">ColorPick Eyedropper</a></li>
<li><a href="https://chrome.google.com/webstore/detail/h-tag/fjigfcghoooegmndmejpoeoodplfmoca?hl=en">H-tag</a></li>
<li><a href="https://chrome.google.com/webstore/detail/lightshot-screenshot-tool/mbniclmhobmnbdlbpiphghaielnnpgdp">Screenshot</a></li>
<li><a href="https://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp">Responsive</a></li>
<li><a href="https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=vi">Window resize</a> </li>
</ul>
<h6 id="inconclusiontobecomeamanualtestingprofessionalinthefutureweneedyoumustdetermineyourdesireandwhatyouloveabilitiesinyourselfsuchaswhatyoushouldinvestlearnwhichskillsyoushouldimproveandhowtogettheyhowtopracticeandusethemetcthesethingswillhelptogivedecisionbyyourselfandmakeyouputyoureffortinordertoachievingthemihopethatyoutrytofollowyourdreamandknowwhatyouwanttobeandfollowyourdesireontherightway">In conclusion, to become a Manual Testing professional in the future, we need: you must determine your desire and what you love, abilities in yourself such as: what you should invest, learn, which skills you should improve and how to get they, how to practice and use them, etc. These things will help to give decision by yourself and make you put your effort in order to achieving them. I hope that you try to follow your dream, and know what you want to be and follow your desire on the right way.</h6>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/test_d7a4b6f418.jpg" alt="test.jpg" />
<h6 id="ihopethatsomeinformationisharewillbeusefulforyouhelpyouknowwhatmanualtestingisalsoyoucanindentifythewayshowtobeamanualtestingwishyousoonsuccesswithyourambitionsanddreamsandhereistheendofmyblogthankyouforyourreading">I hope that some information I share, will be useful for you, help you know what Manual testing is; also you can indentify the ways how to be a Manual testing?…Wish you soon success with your ambitions and dreams! And here is the end of my blog.Thank you for your reading.</h6><div id="md2html-converted" style="display:none"></div>

Below are the sharing of my Manual Testing experience that I have learned after working at ABC Software Solution company.

Basic instructions of manual testing

<h1>How to build a simple button component</h1>Hello everyone, the day I wrote this article was a rainy day, to have such a rainy day, that cloud has accumulated a lot of water drops. Similarly, the application, the website we come into contact with daily, is also built from "small pieces of code". Here I want to mention the concept of components. And through this article, I will show you how to build a simple button component. But to understand this article you should know a little about reactjs, nextjs, and tailwindcss.Post layout:<ol><li>Introduction to reactjs, components, nextjs, taitlwindcss.</li><li>Set up the environment.</li><li>Build components.</li><li>Conclusion.</li></ol><h3>1. Introduction to reactjs, nextjs, tailwindcss, and the concept of Component.</h3><ul><li>React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.</li><li>Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.</li><li>Tailwind CSS is an open-source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.</li></ul>And finally the Component concept: Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. We have two ways to declare components: a functional component and a class component. In this article, I will use the function component.<h3>2. Setup environment:</h3>Create a root folder containing files, here I name it my-app, and organize the folder as follows (icon download link: <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/setup_env_66c23c7289.png" alt="setup-env.png">public: contains image and audio resources.src: contains the source code of the system.components: contains the components of the system.pages: contains the pages of the system.vendors: contains the libraries used for the system.and the necessary configuration files:<code>package.json</code><pre><code class="language-javascript">{
 "scripts": {
 "dev": "next dev"
 },
 "dependencies": {
 "classnames": "^2.3.2",
 "next": "^12.1.0",
 "react": "^17.0.2",
 "react-dom": "^17.0.2"
 },
 "devDependencies": {
 "@types/node": "18.7.18",
 "@types/react": "18.0.21",
 "autoprefixer": "^10.4.12",
 "postcss": "^8.4.16",
 "sass": "^1.55.0",
 "tailwindcss": "^3.1.8",
 "typescript": "4.8.3"
 }
}</code></pre><code>postcss.config.js</code><pre><code class="language-javascript">module.exports = {
 plugins: {
 tailwindcss: {},
 autoprefixer: {},
 },
};</code></pre><code>tailwind.config.js</code><pre><code class="language-javascript">/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}"],
 theme: {
 extend: {},
 },
 plugins: [],
};</code></pre><code>tsconfig.json</code><pre><code class="language-javascript">{
 "compilerOptions": {
 "target": "es5",
 "lib": ["dom", "dom.iterable", "esnext"],
 "allowJs": true,
 "skipLibCheck": true,
 "strict": false,
 "forceConsistentCasingInFileNames": true,
 "noEmit": true,
 "incremental": true,
 "esModuleInterop": true,
 "module": "esnext",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "jsx": "preserve"
 },
 "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
 "exclude": ["node_modules"]
}</code></pre>After organizing, we open the terminal and enter the command "yarn" to install the necessary libraries.<h3>3. Build components</h3>To use tailwindcss, we write to the file “vendors/tailwindcss/style.scss”<pre><code class="language-css">@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre>And then write to the file _app.tsx so that your application can use tailwind.<pre><code class="language-javascript">import "../vendors/tailwindcss/style.scss";
export default function MyApp({ Component, pageProps }) {
 return &lt;Component {...pageProps} /&gt;;
}</code></pre>Now we need a page to display our component, here we have a page called HomePage written into the files pages/index.tsx.<pre><code class="language-javascript">export default function HomePage() {
 return &lt;h1 className="text-rose-500 font-bold text-3xl"&gt;Homge Page&lt;/h1&gt;;
}</code></pre>Then run the command “yarn dev” to see if your HomePage is displayed and tailwind is working properly. Result of our home page:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/step_1_e30dda2291.png" alt="step-1.png">After guiding everyone to set up and have a page to house their button component, now the main part. Together we will build a simple button component. We will write a simple component with its style as follows:<pre><code class="language-css">.com-button :global {
 @apply px-7 py-3 border rounded-lg text-center mx-4 text-orange-400;
}
</code></pre><pre><code class="language-javascript">import styles from "./style.module.scss";
const Button = () =&gt; {
 return &lt;button className={styles["com-button"]}&gt;Button nè&lt;/button&gt;;
};
export default Button;
</code></pre>And now we bring this button to the home page to see how the Result: Result:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/step_2_dc924dc734.png" alt="step-2.png">We start to ask the question, every button contains the content "Button", now what if we want the content to not only have text but can contain other things? We will add IProps to the button component so that we can use the button component more flexibly. These IProps will have children of the type Reactnode, required.<pre><code class="language-javascript">import { FC, ReactNode } from "react";
import styles from "./style.module.scss";
interface IProps {
 children: ReactNode;
}
const Button: FC&lt;IProps&gt; = ({ children }) =&gt; {
 return &lt;button className={styles["com-button"]}&gt;{children}&lt;/button&gt;;
};
export default Button;
</code></pre>Now we bring it to Home to see the results:<pre><code class="language-javascript">export default function HomePage() {
 return (
 &lt;&gt;
 &lt;h1 className="text-rose-500 font-bold text-3xl"&gt;Homge Page&lt;/h1&gt;
 &lt;br /&gt;
 &lt;Button children={"Button 1"} /&gt;
 &lt;Button children={"Button 2"} /&gt;
 &lt;Button children={&lt;img src="/images/arrow-down-circle.svg" alt="Your Name" /&gt;} /&gt;
 &lt;Button children={&lt;img src="/images/arrow-left-circle.svg" alt="Your Name" /&gt;} /&gt;
 &lt;Button children={&lt;img src="/images/arrow-right-circle.svg" alt="Your Name" /&gt;} /&gt;
 &lt;Button children={&lt;img src="/images/arrow-up-circle.svg" alt="Your Name" /&gt;} /&gt;
&lt;/&gt;
);
}
</code></pre>Result: <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/step_3_fc4be31b50.png" alt="step-3.png">2nd question: button has many types such as button (default), submit, and reset, what should we do? So we will add the IProps of the button component and then call it using the following:<pre><code class="language-javascript">interface IProps {
 children: ReactNode;
 type?: "button" | "reset" | "submit";
}
const Button: FC&lt;IProps&gt; = ({ children, type = "button" }) =&gt; {
 return (
 &lt;button className={styles["com-button"]} type={type}&gt;
 {children}
 &lt;/button&gt;
 );
};</code></pre>Depending on the purpose of use, you will declare each corresponding type.<pre><code class="language-javascript">&lt;Button children={"Button 1"} type="button" /&gt;
&lt;Button children={"Button 2"} type="reset" /&gt;
&lt;Button children={"Button 2"} type="submit" /&gt;</code></pre>3rd question: now we want to pass the onClick event to the button. We will continue to pass IProps an onClick of type: “() =&gt; void”, optional.<pre><code class="language-javascript">interface IProps {
 children: ReactNode;
 type?: "button" | "reset" | "submit";
 onClick?: () =&gt; void;
}
const Button: FC&lt;IProps&gt; = ({ children, type = "button", onClick }) =&gt; {
 return (
 &lt;button className={styles["com-button"]} type={type} onClick={onClick}&gt;
 {children}
 &lt;/button&gt;
 );
};</code></pre>Depending on the purpose of use, you will declare accordingly:<pre><code class="language-javascript">&lt;Button children={"Button 1"} onClick={() =&gt; alert("Hello World!")} /&gt;
&lt;Button children={"Button 2"} onClick={() =&gt; setCount(count + 1)} /&gt;
&lt;Button children={"Button 2"} onClick={handleSomethings} /&gt;</code></pre>4th question: What do we do if the button has many different designs and shapes? Here I will build two styles of buttons with borders, and without borders as well as the two most visible themes are light and dark. Style files:<pre><code class="language-css">.com-button:global {
 @apply px-7 py-3 text-center mx-4;
 &amp;.contained {
 @apply border text-white rounded-lg;
 &amp;.light {
 @apply bg-rose-500;
 }
 &amp;.dark {
 @apply bg-slate-700;
 }
 }
 &amp;.outline {
 @apply right-1 rounded-lg;
 &amp;.light {
 @apply text-rose-500;
 }
 &amp;.dark {
 @apply text-slate-700;
 }
 }
}</code></pre><pre><code class="language-javascript">import cls from "classnames";
interface IProps {
 children: ReactNode;
 type?: "button" | "reset" | "submit";
 theme?: "dark" | "light";
 variants?: "contained" | "outline";
 onClick?: () =&gt; void;
}
const Button: FC&lt;IProps&gt; = ({ children, type = "button", theme, variants, onClick }) =&gt; {
 return (
 &lt;button className={cls(styles["com-button"], theme, variants)} type={type} onClick={onClick}&gt;
 {children}
 &lt;/button&gt;
 );
};
export default Button;
</code></pre>Use:<pre><code class="language-javascript">&lt;Button children={"Button 1"} variants="contained" theme="dark" /&gt;
&lt;Button children={"Button 2"} variants="contained" theme="light" /&gt;
&lt;Button children={"Button 3"} variants="outline" theme="dark" /&gt;
&lt;Button children={"Button 4"} variants="outline" theme="light" /&gt;</code></pre>Result:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/step_4_6257249b50.png" alt="step-4.png"><h3>4. Conclusion:</h3>From a simple Html button tag, you can build your button component. The purpose of building components is to be reusable in many places as well as to be easier to maintain later. Hopefully, after reading this article, you can imagine how to build a component as well as being able to build the components you like yourself.Reference source:<ul><li><a href="https://reactjs.org/">https://reactjs.org/</a></li><li><a href="https://nextjs.org/">https://nextjs.org/</a></li><li><a href="https://tailwindcss.com/">https://tailwindcss.com/</a></li><li><a href="https://feathericons.com/">https://feathericons.com/</a></li></ul>&nbsp;

This is a little blog post that teaches you how to do great little things.

How to build a simple button component

ADA stands for Americans Disabilities Act is the Disability Act in the United States, which aims to help people with disabilities have job opportunities, can buy and sell goods and services like normal people. The ADA standards are gradually added to the website to make it easier for people with disabilities to use, and are also in line with the WCAG (Web Content Accessibility Guidelines) level A, AA and AAA standards which are a set of standards in website development. , launched by the W3C to determine how to make Web content more accessible to people with disabilities.I have worked as a tester for many years, but when I met ADA, I liked it more than usual, I researched and spent a lot of time on it, there was a whole month for most of the day's work. My work revolved around it without getting bored (I lied because that time I was divided into ADA-only projects :)). Here I would like to share the most basic knowledge for ADA testing that I have learned:<ul><li>A site with ADA is able to use the keyboard (specifically, Tab, Shift+Tab, Enter, Space, Up/Down/Left/Right arrows…) for elements with actions such as menu, h1, link, button, form, dropdown…means it replaces mouse action.</li><li>Sites with ADA when using the keyboard will go from left to right, top to bottom, without missing an element with any action.</li><li>There are many ways to check ADA, the most common way is manual keyboard, using tool (reader tool and extension check for errors), view source code.</li></ul>A. ADA manual:1. Border focus:<ul><li>Is the state that your mouse pointer is standing at that position of the website, it is a border around the element.</li><li>Sometimes its default border is thin and hard to see, but the developer can adjust the color to be light and reasonable with the layout of the site.</li><li>When using the keyboard, the border will jump in the correct order of all your actions: for example, tab will jump to the right, shift+tab will jump to the left.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_11_31_07_78f90573b1.png" alt="Screenshot 2022-08-19 at 11.31.07.png">2. Keyboard:<ul><li>Tab/Shift+Tab: use tab to go to an element from left to right and shift+tab to return to the previous action.</li><li>Enter/Space: action goes to the destination, space = enter in the following cases:</li><li>Open and close menus</li><li>Open/close popup image/video.</li><li>Play/pause video/gift image.</li><li>Button slide &lt;&gt;, slide dot.</li><li>Tabbed content.</li><li>Arrow expand/collage.</li><li>Arrow up/down left/right: left-right arrow = tab/shift+tab, up/down arrow to shorten travel time (for example, a menu with 8 submenu divided by 3 rows 3/3/2 words position number 2 first row down to number 2 of row 2 if using tabs, it will go all the way to row 2, but using the up and down arrows will move faster).</li><li>Home key: focus the first item of the main menu of the same level.</li><li>End key: focus the last item of the main menu of the same level.</li><li>ESC = close action (turn off popup, turn off submenu…) <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_y_K_Zd_S_Vvq_Oty5c1_C_Io4_Diw_8ff4c47939.png" alt="1_yKZd-SVvqOty5c1CIo4Diw.png"></li></ul>3. Skip to content<ul><li>A site must have Skip to content.</li><li>Use enter/space to skip to content.</li><li>When entering/space must skip through the menu and focus on the next element (usually H1).</li><li>For banners with video, check to see if after Skip to content is passed through Play/Pauser video (because the tab position of play/pause video is before H1).</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_15_06_13_81e0c56c0a.png" alt="Screenshot 2022-08-19 at 15.06.13.png">4. Menu header<ul><li>Tab to auto-open menu (depending on request, site requires auto-opening, site does not).</li><li>For the self-opening submenu, if the parent menu has a link, then actively add a submenu overview for it, otherwise, no (required).</li><li>Submenu must enter/space= open/collape menu, when opening one menu, another must close.</li><li>Use the up/down arrow keys to move the parent menu with the submenu.</li><li>Use the left/right arrow keys to move between menus.</li><li>After the tab ends with the menu to the next element, the submenu must close. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/top_navigation_bar_2d546b4841.png" alt="top-navigation-bar.png"></li></ul>5. Logo Header/Footer<ul><li>The logo must have alt.</li><li>Order of reading: priority to read title -&gt; no title, then read alt.</li></ul>6. Search<ul><li>Enter/space opens the box.</li><li>Focus the mouse on the box.</li><li>Shift+tab focus selects all keywords.</li></ul>7. ImageImage must have alt (except background and image icons that have no meaning/function).Alt must be meaningful and related to image/content.Alt is correct (there are cases where alt image is entered, but it is displayed as the image file name). B. ADA Tool testSome basic tools such as: Screen Reader extension, NVDA tool (installed software), Mac Voice over (default available on Mac), Ax extension, Wave extension …The operation is the same as the test manual, but turn on the tool (Window: (Screen Reader / NVDA), Mac: Voice over), note that each time you should open a tool to avoid sound conflicts. C. Check ADA on browserSame operation but check on:Manual on FirefoxNVDA on FirefoxManual on Mac: Chrome/Safari/FirefoxMac over on Chrome/Safari/Firefox D. ADA attribute (view element)1. Zoom in and out feature<ul><li>Remove user-scalable="no" from the attribute of to enable zooming and make sure the maximum-scale parameter is not less than 2. (search in code, if there is this attribute in iframe is passed because it cannot be interfered with).</li><li>Zoom in/out the screen to see if the layout is broken (relatively), zoom to 150%.</li></ul>2. External links<ul><li>arial-label="title+open new tab/window".</li><li>That is, the External link then reads open new tab/window.</li><li>Except for the case of external links in the content, there is no need to care.</li></ul>3. The lang="language" attribute<ul><li>Make sure that the HTML has a lang or xml:lang attribute, and that the attribute's value is a valid value. (just check if lang ="language" only) <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_17_06_53_3520bca85f.png" alt="Screenshot 2022-08-19 at 17.06.53.png"></li></ul>4. Menu Navigation<ul><li>role="menubar" wrap role="menuitem"</li><li>aria-expanded="false" without opening the sub-menu,</li><li>aria-expanded="true" when opening sub-menu</li><li>role="button" because the parent menu is not linked</li><li>aria-controls="idnguyensub_menu" <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_17_08_11_5cf04321bc.png" alt="Screenshot 2022-08-19 at 17.08.11.png"></li></ul>5. Image popupPopups are not enabled yetaria-label="open image popup"aria-haspopup="dialog" 6. Popuprole="dialog"aria-label="text content on popup"<h2>- Aria-hidden="false" Note: when the popup tab is on, it must still be in the control area, which means the tab cannot go down to the content area below the popup.</h2>7. sr-only: If sr-only matches aria-label, sr-only <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_17_09_01_cf23eacb5a.png" alt="Screenshot 2022-08-19 at 17.09.01.png">8. Blog Post/Related<ul><li>Wrap the</li></ul>in an tag.9. Tab<ul><li>role="tablist" for list tab</li><li>role="tab" for each tab</li><li>aria-selected="true" when selecting tab</li><li>aria-selected="false" for unselected tab</li><li>aria-hidden="false" for visible tab</li><li>aria-hidden="true" for hidden tabs</li><li>id="tab-0" (1,2,3,4)</li><li>aria-controls="content-1" (content of that tab) <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_08_19_at_17_10_13_b33d86daae.png" alt="Screenshot 2022-08-19 at 17.10.13.png"></li></ul>10. Iframe: iframe must have title11. Tabindex<ul><li>Form, button, : default already has tabindex so we don't need to add it.</li></ul>

ADA stands for Americans Disabilities Act is the Disability Act in the United States, which aims to help people with disabilities have job opportunities, and can buy and sell goods and services like normal people. 

ADA Testing

Hello everyone, my name is Thien, a Fresher Front end developer who is in the process of trail work and accumulated work experience. During the process of working on many projects and learning new technology at ABC Software Solution Vietnam, I experienced many challenges and advanced tasks such as slides, animations, and special gradient backgrounds.
<hr />
Some specific tasks that Front end Developers often meet
1. Slide
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_cfe28243b5.png" alt="Carousel Swiper" />
2. Animation
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Animation_CSS_3f39780204.png" alt="Animation CSS" />
3. Gradient Overlay
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_2_b865fd670e.png" alt="Background Gradient Stop CSS" />
4. Graph / Chart
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Untitled_3_08395da14c.png" alt="Chart Example" />
<blockquote>
 However. One of the things that surprised me and make me spend a lot of time learning about is the horizontal and vertical column graphs. Looking at it, it seems to be just a normal graph like many other graphs, you will probably think that I can use the Chart.JS library to draw it because chart.JS supports a variety of graphs as well as easy to write code implement in the project. But wait, let's look at the graph shown below.
</blockquote>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Example_Vertical_Graph_82ae2da82d.png" alt="Example Vertical Graph" />
<hr />
We will see that it has the following special features:
<ul>
<li>The columns of the graph have different colors. The first column color is white with 70% transparency. The other column has no transparency.</li>
<li>The arrow indicating the data increment is located in the middle of the two columns, instead of starting from the top middle of the first column.</li>
<li>The number representing the data growth is placed at par with the second column, with an up and down arrow indicating the increase or decrease of the data.</li>
</ul>
<blockquote>
 OK, after analyzing the graph, we will choose which method or library to install. As before, did I mention the Chart.JS library?. But I do not use Chart.JS because it does not support me to install the graphical interface with the above special characteristics. So I will introduce you to another library that supports more powerful graphs, namely HighChart.JS.
</blockquote>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Highcharts_Library_Thumbnail_788c7153d6.png" alt="Highcharts Library Thumbnail" />
<hr />
<h2 id="1whatishighcharts">1. What is Highcharts?</h2>
Highcharts is a JavaScript library used to support programmers in creating beautiful charts with very rich Settings of colors, and chart types, … Highcharts can meet almost the need of chart requirements in web applications. Highcharts are created by javascript, so they can be easily integrated into websites and interacts well with many programming languages.
<h2 id="2setupthehtmlinterfaceframe">2. Set up the HTML interface frame.</h2>
<blockquote>
 index.html
 1. General structure
</blockquote>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Highchart_index_html_eng_verison_4aa329ae05.png" alt="Highchart index.html eng verison.png" />
2. The button controls the graph type from vertical to horizontal and vice versa.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Highchart_button_switch_eng_version_6ebc8231ea.png" alt="Highchart button switch eng version.png" />
3. The div tags have IDs that identify the names of the graph for the Highcharts API to read and render output chart images target to that div element.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highcharts_charts_id_465b000026.png" alt="highcharts charts_id" />
<hr />
<h2 id="3initialgraphsviahighcharts">3. Initial graphs via Highcharts</h2>
Highcharts is a very large set of chart types libraries. So it is divided into many smaller modules. In this example, we only use Highstock, Annotation, ColorAxis, and Accessibility modules.
<ul>
<li>Highstock: The main module provides a variety of chart shapes.</li>
<li>Annotation: An auxiliary module used to create annotations to compare the difference between two data points on the chart.</li>
<li>ColorAxis: Auxiliary module used to color data point components.</li>
<li>Accebility: Auxiliary module used to draw arrows showing the increasing and decreasing trend between data points.</li>
</ul>
<blockquote>
 index.js
 <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highcharts_import_library_e522454b9d.png" alt="highcharts import library" />
</blockquote>
An array of data used to plot 4 different graphs
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highcharts_data_to_draw_Chart_3d7e6a4061.png" alt="highcharts data to draw Chart" />
The general structure of the program consists of the following four parts
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Highchart_some_of_main_classes_eng_version_8eaf3c12ac.png" alt="Highchart some of main classes eng version.png" />
<h2 id="4configurationandcodingtocreatingchartshape">4. Configuration and coding to creating chart shape</h2>
<blockquote>
 In this step I will not talk about everything in detail, but I will only talk about the most special parts of the chart.
 1. Kinds of API objects that we will use
 <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Highchart_api_must_use_eng_version_4a132ef5c4.png" alt="Highchart api must use eng version.png" />
</blockquote>
<ul>
<li>Chart: Configure the chart style, background color and font.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highcharts_chart_config_0846014a98.png" alt="highcharts chart config" /></li>
<li>Color Axis: Config fill color for data points, the larger the data point, the darker color, and vice versa, the smaller the data point, the lighter color.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highcharts_color_Axis_5ed36356fb.png" alt="highcharts colorAxis" /></li>
<li>Plot Options: Configure the display number associated with the unit per data point. Common units of measurement can be length, currency, time.</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highchart_plot_Option_5165b8d847.png" alt="highchart plotOption.png" />
<ul>
<li>Series: Mảng dữ liệu dùng để vẽ đồ thị:</li>
</ul>
⛳ In addition, it also contains data comparing the increase and decrease between two data points located to the left and right of the arrow (the keyword is flags).
🪧 The comparison calculation will be done in the data array section API.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highchart_serie_efb5269dc4.png" alt="highchart serie.png" />
Defs: Draw arrows showing the increasing or decreasing trend between two data points in the chart.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highchart_def_5a22d0db91.png" alt="highchart def.png" />
2. Configure the position of the beginning and the end of the arrow to be centered between two data points
<ul>
<li>This is one of the hardest parts of chart design. Nó đòi hỏi ta phải áp dụng công thức tính toán để dịch chuyển vị trí mũi tên theo ý muốn</li>
<li>Going into the shapes property, we will have the following important sub-properties:<ul>
<li>Points: The position of the starting point and the end point of the arrow<ul>
<li>The function getPointStartCustom() will help us calculate the starting coordinates of the arrow</li>
<li>The function getPointEndCustom() will help us calculate the end coordinates of the arrow</li></ul></li>
<li>Type = path indicates the arrow is a straight line</li>
<li>Fill: Color of the arrow name</li>
<li>Stroke: Color of arrow outline</li>
<li>Opacity: Darkness of arrow</li>
<li>Stroke Width: Thickness of arrow border</li></ul></li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highchart_annotation_e3ed9140e0.png" alt="highchart annotation.png" />
3. For horizontal graphs, there will also have many properties similar to vertical graphs, but we need to change the following two properties to suit with horizontal graphs:
Example image
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Highcharts_horizontal_chart_4b674f7ae7.png" alt="Highcharts horizontal chart.png" />
<ul>
<li>Series:
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highchart_serie_horizontal_39b8824d7b.png" alt="highchart serie horizontal .png" /></li>
<li>Annotations
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/highchart_annotation_horizontal_6e092c822b.png" alt="highchart annotation horizontal.png" /></li>
</ul>
<h2 id="5conclusion">5. Conclusion</h2>
<ul>
<li>With the huge and diverse Highcharts library. You can unleash your creativity and design more professional charts / graphs.</li>
<li>The chart design example above that I mentioned is a pretty important part of a project I worked on.</li>
<li>Thank you for reading this article.</li>
</ul>
<h2 id="6referencesdocument">6. References document</h2>
<ul>
<li>Code examples are available for your reference</li>
</ul>
<a href="http://www.highcharts.com/demo/">http://www.highcharts.com/demo/</a>
<ul>
<li>All configurations, properties, and specifications are provided in the documentation. of Highcharts visit the following link.</li>
</ul>
<a href="http://api.highcharts.com/highcharts">http://api.highcharts.com/highcharts</a><div id="md2html-converted" style="display:none"></div>

This blog will be talking about how to create a professional and beautiful chart. Which indicates the increment or decrement of data. Suitable for website projects about the economy.

Design Profesional Chart with Highcharts Library

Hi guys! Today I would like to introduce myself briefly. My name is Linh. I am 22 years old. I was born and raised in Gia Lai. Currently, I am in the process of trying, learning, and gaining working experience from my predecessors as an Intern Tester at ABC Software Solutions Company. Today I will tell you a little bit about my work. I feel very fortunate that as soon as I graduated from university, I had a stable job. I used to orient myself to become a Tester but I don't know what fate brought me to Font End programming. I think every job is interesting and so is my job. It was a bit confusing at first, but when I started working on the project, I realized how interesting it was. I used to think that completing an assigned project was very difficult and I couldn't do it, but under the guidance of Mr. Tin, whom I consider a teacher, there was encouragement and a very nice saying, and and i'm always interested that "If you haven't tried it, how do you know it's difficult?". He said that the way I work is to always look forward, where we go wrong we fix it, don't be afraid and don't go back. And since then, I have started to study harder and make more progress through each project of the company.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/abc_website_00bc1ef4e2.jpg" alt="abc-website.jpg" />
Firstly, I want to tell you about the work that I did at the beginning of the project. I would like to briefly talk about the language that I usually use to write code.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/tailwind_css_ebadf2ceb0.jpg" alt="tailwind-css.jpg" />
What is Tailwind CSS?
It is a widget-first CSS framework, it is like Bootstrap and it has built-in classes that we can use. Tailwind CSS has many classes that include different CSS properties and importantly, we can easily extend and create new classes with its own classes.
Tailwind CSS Strengths
The outstanding advantages of Tailwind CSS that cannot be ignored are:
<ul>
<li>You don't need to write a single line of CSS but just add a class to create the interface, you don't have to have a headache thinking about the class name to set the divs.</li>
<li>Tailwind's class names are easy to remember, and understand, user-friendly and 1 class represents 1 attribute.</li>
<li>Can use flex easily to split Layout.</li>
<li>Improved performance by reducing attribute duplication. There are many plugins that support the removal of unused classes, minimizing the presence in the declaration of the HTML class.</li>
<li>Don't have to worry about fixing in one place or dying in another due to the use of cascading.</li>
</ul>
The documentation is quite detailed, covering all the detailed usage of the class and showing various customizations.
Tailwind CSS's bad points
Besides the above advantages, it also has the following disadvantages:
<ul>
<li>When using tailwind, you will see that the number of classes is extremely large, the number of classes will correspond to the number of properties you want to install. For example, if I want to customize a small radio, the class number can be like this:</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/defect_1_cdbcb4b2ae.png" alt="defect-1.png" />
<ul>
<li>I think this is also a minus point that it will take a long time for beginners because they are not familiar with all the classes of tailwind. It takes time to remember the rules and how to write properly.</li>
<li>When using font-size or color, you still have to customize it with your own css.</li>
<li>Of course, it can't have 100% of the css properties, so you need to configure more when you want to use it. I used to spend a lot of time learning to configure and create a "before", "config" like this:</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/defect_2_774e69734b.png" alt="defect-2.png" />
With modern technology and increasingly advanced society, the latest version of tailwind will support it. So you can rest assured to use it, in the future tailwind will upgrade and will fill all the properties of the CSS…
After going through the exercises before entering a project. Almost all of me write simple HTML and CSS, after knowing and approaching tailwind CSS for a while, I find it has many benefits for writing CSS and from there I use it in projects and projects. My first project was named after ABC Software Solutions company.
Link: <a href="https://stage.abcsoftwarecompany.com/*">https://stage.abcsoftwarecompany.com/</a>
Secondly, I would like to tell you about how I had a hard time getting started on the first project.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/aritcles_5b3c2efc08.jpg" alt="aritcles.jpg" />
In this website, almost every module I do, but the one that makes me stay and want to share the most with everyone, the Articles module, it's really simple to see, but when we start doing it, we can see the difference. its complexity. Before we can do it, we need to do a thorough analysis before starting to do it.
To do this module, we need to learn more about Grid a bit, know how to divide columns like rows. To know and understand better, see the tailwind css doc and see the demo code below:
Link: <a href="https://tailwindcss.com/docs/grid-template-columns">https://tailwindcss.com/docs/grid-template-columns</a>
Code : There are 3 files as below:
<ul>
<li>view.njk</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/view_ddfeb9025e.png" alt="view.png" />
<ul>
<li>style.scss</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/style_ff3abec988.png" alt="style.png" />
<ul>
<li>index.js</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/main_6cf0e6a161.png" alt="main.png" />
Finally, I would like to thank you for reading this far. See you in the next Blog and hope you give me feedback to improve in the next Blog.
<div id="md2html-converted" style="display:none"></div><div id="md2html-converted" style="display:none"></div>

Instructions to use Tailwind CSS instead of CSS for the Articles module of ABC website

How to use Tailwind CSS in Articles module 

My first experience working on a project with my team.
Hello everyone, my name is Luan and I'm a BA intern at ABC software company. I had only joined the company for over 2 months but I really enjoyed my time working for the company. In this 2 month of working, our team has done a couple of projects together, and for me personally the most memorable project is probably the "M investment company project" in which we design the website's front-end for a foreign investment company. I had learned a few new things and also encountered some difficulty while I was working on the project and I would like to share my working experience through this blog.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_ee15e7189b.jpg" alt="1.jpg" />
Before me and my team started the "M project" we were working on designing our company's website so we have had some experience about coding front-end using tailwind and bootstrap framework as well as webpack module bundler. When we started our new project, we applied the same framework to it so that it is easier for us to work on. Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives me all of the building blocks I need to build without using the old verbose css command line. Tailwind helped me reduce a lot of effort in coding css for the website so at the beginning my workload was going pretty smoothly and easy to do. But after 2 to 3 days of working, I soon faced some difficulty.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/2_538040b823.jpg" alt="2.jpg" />
The first difficulty was unlike in the previous project, each of the members in our team have to do our own separate website design and there is a monitoring and evaluation instructor who will review my code and decided whether or not it's qualify to use, the instructor will also give feedback to me about my code and help me to fixed it. But in the new project, the instructor will be less involved in helping and just focusing more on reviewing and judging, so I have to fix my code quite a few times before my code gets approved and merged to the main branch.
The second difficulty was that in the previous project our team work separately while in the new project we have to work together and because we work on github, sometimes the code I push will get conflicted and unable for the instructor to review due to various reason such as: not rebasing the main branch, pushing too many commits, pushing the wrong code,… . Also, when other members' code get merged into the main branch it could sometimes cause the design to create bugs due to the css name conflicted with other members' css name.
Beside the difficulty, I also learn a lot of new things while working on the project. I learn how to optimise my code more so that when other people see it, they can recognize it more easily. I also learn how to name each class corresponding to their uses, as well as learning how to apply animation to the background image so they can move with the content inside it while scrolling. Overall, in the new project my coding workload only took about 50 – 60% while in the other 40 - 50% I was working as a business analyst.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/3_7254f72f0a.jpg" alt="3.jpg" />
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/6_4edc036d4f.jpg" alt="6.jpg" />
Because I was a BA intern, I was responsible for creating every ticket for the new project before our team started to work on it, as well as updating and communicating with the project's client so that I can understand what they want and their requirements for their website. On the first online meeting with the clients, because it's my first time working as a BA I just sat near my project manager and listened to their conversation while taking note about the client feedback and their requirements on the figma design. After I have listed all the feedback, I have to write the comment on the figma design so both our team and the customer can see it and change the design on time, the hardest part about this is that the I have to utilize my time well and constantly communicating with both the client and our design team so that we can keep up with the project's deadline, while in this process I have to pay careful attention to both parties so that the design team don't mistake the clients feedback or the clients is dissatisfied with the design. Another difficulty is the differences between my time zone and the clients time zone which make it quite difficult to have a regular online meeting. On the other hand, I also learn a lot while working as a BA in the project such as: the structure of task's ticket (how to properly name the ticket to correct matching their task and studying the design and writing the requirements for each specific task), how to communicate with foreign clients using English as well as with the members in my team so that the workload can be smoother and more proficiency.
At the end of the project, I was the one who was responsible for checking and delivering the final front-end design to the other team so that they can assemble the front-end and back-end code, after that they will handover the final product to clients. But before assemble the product, the other team also have to check the design again and confirm whether or not it is correct with the design that the clients agree and if there are any changes or bug, I had to create a new ticket for me and fixing the bug so that it's correct and meet the requirements, in this step I also need to pay attention to the clients and check if they have any feedback and discuss with them so that our team don't overfulfill and making our job harder.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/7_51af4f90d2.jpg" alt="7.jpg" />
That's the end of my blog, I hope everyone who reads this can learn a thing or two, or it can help you have more experience about the related jobs.<div id="md2html-converted" style="display:none"></div>

I had learned a few new things and also encountered some difficulty while I was working on the project and I would like to share my working experience through this blog.

My first experience working on a project with my team.

Hi!! I'm Hung from ABC Software Solutions Company.&nbsp;In this article, I want to share with you some orientations about UI design for beginners, the following content is the process of learning about UI, as well as some difficulties encountered when starting design. So how to be a good designer? Let's dig deeper with me. UI designer is a new but very "hot" industry. Large companies in programming and designing websites and mobile applications have a need to recruit UI designers with high salaries, making this job promising. Offers for UI Designers are also increasing year by year. However, this industry does not have a formal training system at universities, so there is a situation where supply is not enough. Especially the students who have not been exposed to much when they are still in the lecture hall. Learning Design UI is difficult and doesn't follow a process. And here are the steps to get you started learning UI from your personal experience.&nbsp;<h2>Join a design course&nbsp;</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Rectangle_2_efd140ffbc.png" alt="Rectangle 2.png"> If you feel that the amount of information on the internet is too much and rambling, you do not know how to systematize that information, then I recommend you to learn and participate in a UI design course. The design course will help you systematize that scattered knowledge into a unified block, teaching you how to work effectively as a team. In addition, you also get help from the course's lecturers - often those with long experience in the industry. In addition, it is also very important for you to learn from books and newspapers.&nbsp;<h2>Join design communities and learn about UI design through books and magazines&nbsp;</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/62862fd2335ea321a6b0f76c_Mission_b6014b593a.png" alt="62862fd2335ea321a6b0f76c_Mission.png">&nbsp;It is very easy for you to join a UI design community, be it through FaceBook, Instagram, Dribbble,… Joining a design community will help you meet and make new friends. We will share stories, common problems at work,… or share knowledge. In addition, you can access more job opportunities by joining a community.<h2>&nbsp;Master basics of visual design&nbsp;</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Graphic_design_basics_85fb8581c5.jpg" alt="Graphic-design-basics.jpg"> When I was a beginner, I just thought that the design was just beautiful and pleasing to my eyes, of course for a person like me, the design did not follow any rules and was completely wrong. User Interface is the face of the product, it is the place where users see and interact with your design. In order to ensure a good enough interface, you need to master the basics of the meaning of color and the principle of using color.<ul style="list-style-type:disc;"><li>&nbsp;Typography: types of fonts, font systems as well as rules for using typo in UI design.&nbsp;</li><li>Contrast: contrast, build information hierarchy, create emphasis.&nbsp;</li><li>Spacing: Using whitespace helps to separate or group information on the interface, making the visual hierarchy clearer.&nbsp;</li><li>Grid: the information on the interface is arranged neatly and neatly, helping to increase the uniformity of your interface.&nbsp;</li><li>Color: the meaning of color and the principle of using color.</li></ul><h2>Understand Design Process&nbsp;</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_33kh_N9zp_FCM_Wn_F8p_Lqe_VTQ_75ecc881ff.png" alt="1_33khN9zpFCMWnF8pLqeVTQ.png">&nbsp;A lot of new designers often don't care about the form and the customer's goals, often go to the design step as soon as they receive the request (I used to be). And I realized this is not good at all. We should have a design in a scientific and researched way. The first thing I recommend learning about the product design process. There are several processes you can search on Google with the keyword “design process”. A good product is one that solves a user's problem. To do this, you need to know who you make products for, what problems they solve, how to solve them…&nbsp;This is the most basic principle in the design industry, which is used for product design. products from physics to technology. Good design thinking will help you answer those questions through this process:<ul><li>&nbsp;Empathize: Empathize with the user.</li><li>&nbsp;Define: Defines the problem the user is facing.</li><li>&nbsp;Ideate: Come up with an idea.&nbsp;</li><li>Prototype: Design the first prototype.&nbsp;</li><li>Test: Test the design.&nbsp;</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/UI_UX_Design_b985bfbb7e.jpg" alt="UI-UX-Design.jpg"> Based on the above conclusions, I will summarize the main directions that people should pay attention to as follows:&nbsp;<ul><li>Self-study online by taking foundation courses: Online Web Design Course. Read a lot of books and specialized magazines Take courses in using Figma design software. Update the latest design trends at home and abroad.</li><li>&nbsp;Join Community Groups on Facebook: Learn Figma. Train your design thinking by working on your own projects and following the design process.</li><li>&nbsp;Identify strengths and build profiles: Each individual has their own strengths and weaknesses, at first you may not realize what your strengths are, what areas you are really suitable for. Analyze your own strengths Develop a plan to develop strengths and improve weaknesses Please do internships at companies to gain more experience.</li><li>&nbsp;Understanding the market, recruitment process: Once you have the knowledge, experience and skills in hand, the last thing you need to do is choose a suitable job.&nbsp;</li></ul>The above is all my sharing as well as my experiences in the process of learning design, I know everyone will have different approaches, but I still hope this article helps everyone to some extent.&nbsp;Once again, I'm Hung, thank you for your interest in my Blog!!!

I want to share with you some orientations about UI design for beginners

Being UI Designer from zero

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

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

Continuous Deployment with AWS Elastic Container Registry & AWS Elastic Container Service & CirleCI

Why starts writing a blog post?
<ul>
<li>Share your stories, knowledge, and idea with other people.</li>
<li>Get some income via platforms like Medium.com, Substack.com.</li>
<li>Feel that you're contributing to the communities and helpful to everyone.</li>
<li>Your content may unintentionally be helping people.
_Please add more advantages to writing blog posts, in your opinion :)</li>
</ul>
<hr />
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/pexels_porapak_apichodilok_346813_2f1b90700a.jpg" alt="pexels-porapak-apichodilok-346813.jpg" />
Simple steps to start writing:
1. Identify your topic: I like to write about Agility, Tech. Find some things you're passionate about. So you are indeed enjoying writing about the subject.
2. Identify the skeleton, or main points, of the post. Each issue will be a single paragraph: the approach makes it easier to keep the whole post focused on the main topic you identified and not be lost to many things that popped up in your mind while thinking.
3. Identify the bottom line, what is the most valuable thing you want the reader to remember: help the readers have the key takeaways and values out of the post. Time matters for everyone; we don't want our audiences to waste their time.
<hr />
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/0_Sv4oa8_JK_3_E_SY_8_KM_f6b700a2b9.jpeg" alt="0_Sv4oa8JK3E_SY8KM.jpeg" />
My bottom line for this post: your stories matter more than you think; they can help people feel better or encourage them to do something they've been procrastinating for sometimes. "Just write it".<div id="md2html-converted" style="display:none"></div>

Writing a blog post is simpler than you think. Here are a few steps to start.

Writing

Categories

Contact Us