Dưới đây là sự phân biệt chi tiết giữa Type và Interface trong TypeScript, kèm theo ví dụ code cụ thể để minh hoạ:<h3>Cú pháp:&nbsp;</h3><ul><li>Type: Sử dụng từ khóa type để định nghĩa một Type.</li><li>Interface: Sử dụng từ khóa interface để định nghĩa một Interface.</li></ul>Ví dụ:<pre><code class="language-typescript">// Type
type MyType = {
 prop1: string;
};

// Interface
interface MyInterface {
 prop1: string;
}</code></pre><h3>Extendable:</h3><ul><li>Type: Type không hỗ trợ việc mở rộng từ một Type khác.</li><li>Interface: Interface có thể mở rộng từ một hoặc nhiều Interface khác bằng từ khóa extends.</li></ul>Ví dụ:<pre><code class="language-typescript">interface BaseInterface {
 prop1: string;
}

interface ExtendedInterface extends BaseInterface {
 prop2: number;
}</code></pre><h3>Mergeable:</h3><ul><li>Type: Type không hỗ trợ tính chất mergeable. Nếu bạn định nghĩa hai Type trùng tên, TypeScript sẽ báo lỗi.</li></ul>Ví dụ:<pre><code class="language-typescript">type MyType = {
 prop1: string;
};

type MyType = {
 prop2: number;
};
// Lỗi: Cannot redeclare block-scoped variable 'MyType'.</code></pre><ul><li>Interface: Interface có tính chất mergeable. Nếu bạn định nghĩa hai Interface trùng tên, TypeScript sẽ tự động kết hợp các định nghĩa lại với nhau.</li></ul>Ví dụ:<pre><code class="language-typescript">interface MyInterface {
 prop1: string;
}

interface MyInterface {
 prop2: number;
}

const obj: MyInterface = {
 prop1: "Hello",
 prop2: 10
};</code></pre><h3>Callable:</h3><ul><li>Type: Type không hỗ trợ việc mô tả một function (callable).</li><li>Interface: Interface có thể được sử dụng để mô tả một function.</li></ul>Ví dụ:<pre><code class="language-typescript">interface MyInterface {
 (param: string): void;
}

const myFunc: MyInterface = param =&gt; {
 console.log(param);
};

myFunc("Hello");</code></pre><h3>Readonly và Partial:</h3><ul><li>Type và Interface đều hỗ trợ readonly và partial modifiers để chỉ định thuộc tính chỉ đọc (readonly) và thuộc tính tùy chọn (optional).</li></ul>Ví dụ:<pre><code class="language-typescript">// Readonly và Partial trong Type
type MyType = {
 readonly prop1: string;
 prop2?: number;
};

const obj1: MyType = {
 prop1: "Hello",
};

obj1.prop1 = "World"; // Lỗi, prop1 là thuộc tính chỉ đọc

obj1.prop2 = 10; // OK, prop2 là thuộc tính tùy chọn

// Readonly và Partial trong Interface
interface MyInterface {
 readonly prop1: string;
 prop2?: number;
}

const obj2: MyInterface = {
 prop1: "Hello",
};

obj2.prop1 = "World"; // Lỗi, prop1 là thuộc tính chỉ đọc

obj2.prop2 = 10; // OK, prop2 là thuộc tính tùy chọn</code></pre>Tóm lại, Type và Interface trong TypeScript có sự khác nhau trong cú pháp, khả năng mở rộng, tính mergeable, tính callable và hỗ trợ readonly và partial. Việc sử dụng Type hay Interface phụ thuộc vào yêu cầu cụ thể trong dự án của bạn.

Trong TypeScript, cả type và interface đều được sử dụng để mô tả kiểu dữ liệu. Tuy nhiên, có một số sự khác biệt chú ý giữa chúng. Sau đây là một số khác biệt quan trọng.

Sự khác nhau giữa Interface và Type trong TypeScript

<h2>Debounce</h2>Kỹ thuật debounce giúp giảm tần suất gọi hàm khi sự kiện xảy ra liên tục trong một khoảng thời gian ngắn. Nếu sự kiện xảy ra liên tục, hàm chỉ được gọi sau khi khoảng thời gian xác định đã trôi qua mà không có sự kiện mới xảy ra. Điều này thường được sử dụng để giảm tải cho các tác vụ đòi hỏi tài nguyên nặng như việc tìm kiếm tự động khi người dùng nhập liệu.Ví dụ:<figure class="table"><table><tbody><tr><td>Chưa áp dụng debounce</td><td>Đã áp dụng debounce</td></tr><tr><td><img class="image_resized" style="width:100%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/without_debounce_bd4bd22b6e.gif" alt="without-debounce.gif"></td><td><img class="image_resized" style="width:100%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/with_debounce_f9ad3d9671.gif" alt="with-debounce.gif"></td></tr></tbody></table></figure>Dưới đây là một ví dụ cách sử dụng debounce trong JavaScript:<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Debounce&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script&gt;
 function debounce(func, delay = 500) {
 let timer;
 return (...args) =&gt; {
 clearTimeout(timer);
 timer = setTimeout(() =&gt; {
 func.apply(this, args);
 }, delay);
 };
 }

 // Sử dụng debounce để giảm tần suất gọi hàm xử lý sự kiện resize
 const handleResize = debounce(function () {
 console.log("Window resized!");
 }, 500);

 window.addEventListener("resize", handleResize);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre><h2>Throttle</h2>Kỹ thuật throttle giới hạn tần suất gọi hàm trong một khoảng thời gian nhất định. Thay vì chờ một khoảng thời gian nhất định sau mỗi lần sự kiện xảy ra như debounce, throttle đảm bảo rằng hàm được gọi duy nhất một lần sau mỗi khoảng thời gian nhất định.Ví dụ:<figure class="table"><table><tbody><tr><td>Chưa áp dụng throttle</td><td>Đã áp dụng throttle</td></tr><tr><td><img class="image_resized" style="width:100%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/without_throttle_7b4da3a169.gif" alt="without-throttle.gif"></td><td><img class="image_resized" style="width:100%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/with_throttle_d22ed70943.gif" alt="with-throttle.gif"></td></tr></tbody></table></figure>Dưới đây là một ví dụ cách sử dụng throttle trong JavaScript:<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Throttle&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;script&gt;
 function throttle(func, delay = 500) {
 let lastCall = 0;

 return (...args) =&gt; {
 const now = new Date().getTime();
 if (now - lastCall &lt; delay) return;
 lastCall = now;
 return func(...args);
 };
 }

 // Sử dụng throttle để giới hạn tần suất gọi hàm xử lý sự kiện scroll
 const handleScroll = throttle(function () {
 console.log("Window scrolled!");
 }, 300);

 window.addEventListener("scroll", handleScroll);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

Kỹ thuật debounce và throttle trong JavaScript được sử dụng để kiểm soát tần suất gọi hàm (thường là một hàm xử lý sự kiện) trong quá trình xử lý sự kiện.

Giới thiệu về Debounce và Throttle

&nbsp;Chào mừng bạn đến với bài viết đầu tiên trong chuỗi học TypeScript! Trong bài này, chúng ta sẽ khám phá TypeScript từ góc nhìn của những người đã biết về JavaScript. Hãy bắt đầu hành trình của bạn để tìm hiểu về TypeScript và tận hưởng những lợi ích mà nó mang lại!<h2>1. Giới thiệu về TypeScript</h2>TypeScript là một ngôn ngữ lập trình tĩnh dựa trên JavaScript. Nó giúp chúng ta viết mã JavaScript hiệu quả hơn, đồng thời mang lại tính tin cậy và dễ bảo trì hơn. TypeScript được phát triển bởi Microsoft và được sử dụng rộng rãi trong các dự án lớn và phức tạp.<h2>2. Tại sao nên sử dụng TypeScript?</h2>Mặc dù JavaScript là một ngôn ngữ lập trình mạnh mẽ, nhưng nó không có kiểu dữ liệu tĩnh và kiểm tra lỗi tại thời điểm biên dịch. Điều này có thể dẫn đến việc xảy ra lỗi trong quá trình chạy chương trình. TypeScript giải quyết vấn đề này bằng cách bổ sung kiểu dữ liệu tĩnh và kiểm tra lỗi tại thời điểm biên dịch. Điều này giúp bạn phát hiện lỗi sớm hơn và tăng tính tin cậy của mã.Ngoài ra, TypeScript cung cấp gợi ý thông minh, phân tích mã mạnh mẽ và IDE tích hợp tốt. Điều này giúp tăng năng suất phát triển và giảm thời gian tìm kiếm lỗi.<h2>3. Tích hợp TypeScript vào dự án JavaScript hiện có</h2>Nếu bạn đã có một dự án JavaScript hiện có và muốn chuyển sang TypeScript, đừng lo lắng. TypeScript có thể tích hợp vào dự án JavaScript hiện có một cách dễ dàng. Bạn có thể bắt đầu bằng cách đổi tên các tệp mã JavaScript thành .ts và bắt đầu thêm kiểu dữ liệu vào từng phần mã một. Điều này cho phép bạn tận dụng lợi ích của TypeScript từng bước mà không cần viết lại toàn bộ mã.<h2>4. Sử dụng kiểu dữ liệu trong TypeScript</h2>Một trong những tính năng quan trọng nhất của TypeScript là khả năng sử dụng kiểu dữ liệu tĩnh. Bạn có thể xác định kiểu dữ liệu cho biến, tham số và giá trị trả về hàm. Điều này giúp bạn kiểm tra và đảm bảo tính hợp lệ của mã nguồn.Ví dụ:<pre><code class="language-typescript">function add(a: number, b: number): number {
 &nbsp;return a + b;
}


let result: number = add(3, 5);
</code></pre>Trong ví dụ trên, chúng ta xác định kiểu dữ liệu cho biến "a" và "b" là "number", và kiểu dữ liệu của giá trị trả về là "number". TypeScript sẽ kiểm tra kiểu dữ liệu này và thông báo lỗi nếu chúng không phù hợp.<h2>5. Type Contracts</h2>TypeScript cũng hỗ trợ type contracts, cho phép bạn xác định các ràng buộc kiểu dữ liệu và giao diện cho đối tượng. Điều này giúp xác định các thuộc tính bắt buộc và tuân thủ các quy tắc kiểu dữ liệu cụ thể.Ví dụ:<pre><code class="language-typescript">interface Person {
 &nbsp;name: string;
 &nbsp;age: number;
}


function greet(person: Person): void {
 &nbsp;console.log("Hello, " + person.name + "!");
}


let john = { name: "John", age: 25 };
greet(john);
</code></pre>Trong ví dụ trên, chúng ta định nghĩa một interface "Person" với hai thuộc tính là "name" (kiểu string) và "age" (kiểu number). Hàm "greet" nhận một tham số là một đối tượng có cấu trúc tương tự với interface "Person". Việc này đảm bảo rằng chỉ các đối tượng tuân thủ type contracts "Person" mới có thể được chuyển vào hàm "greet".Nếu chúng ta khai báo thêm thuộc tính “gender” có giá trị là “male” vào đối tượng “join”&nbsp;<pre><code class="language-typescript">let john = { name: "John", age: 25, gender: "male" };</code></pre>Thì lúc này đối tượng "john" có một thuộc tính không được khai báo trong type contracts "Person" là "gender". TypeScript sẽ hiển thị một thông báo lỗi:<pre><code class="language-typescript">Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.</code></pre>Với TypeScript, việc kiểm tra kiểu dữ liệu tại thời điểm biên dịch giúp bạn xác định và sửa lỗi ngay từ quá trình phát triển, tăng tính tin cậy và dễ bảo trì của mã.<h2>6. Tận dụng các tính năng nâng cao của TypeScript</h2>TypeScript còn nhiều tính năng nâng cao khác như:Generics: Generics cho phép bạn viết mã linh hoạt và tái sử dụng cho nhiều kiểu dữ liệu khác nhau mà không cần định nghĩa cứng rắn kiểu dữ liệu.Module: TypeScript hỗ trợ module để quản lý mã trong các dự án lớn, giúp chia nhỏ mã thành các phần riêng biệt và sử dụng lại chúng trong các tệp khác.Lớp và Kế thừa: TypeScript hỗ trợ lập trình hướng đối tượng đầy đủ với lớp và kế thừa, cho phép định nghĩa lớp, thuộc tính, phương thức và sử dụng kế thừa để chia sẻ mã giữa các lớp.Và nhiều hơn nữa.&nbsp;Các tính năng này cùng với các tính năng khác trong TypeScript giúp bạn viết mã linh hoạt và hiệu quả hơn, đồng thời giảm thiểu lỗi và tăng tính bảo trì của mã.<h2>7. Kết luận</h2>Trên đây là một sơ lược về TypeScript cho những người đã biết về JavaScript. TypeScript cung cấp tính hợp lệ kiểu dữ liệu, gợi ý thông minh và phân tích mã mạnh mẽ, giúp bạn viết mã JavaScript hiệu quả hơn và dễ bảo trì hơn. Hy vọng bài viết này đã giúp bạn có cái nhìn tổng quan về TypeScript và khám phá được tiềm năng của nó. Hãy tiếp tục học và áp dụng TypeScript vào dự án của bạn để tận hưởng những lợi ích mà nó mang lại! &nbsp;

Bài viết này giới thiệu về TypeScript và hướng dẫn cho những người đã biết về JavaScript để khám phá và tận hưởng những lợi ích mà TypeScript mang lại. TypeScript giúp viết mã JavaScript hiệu quả hơn, đồng thời mang lại tính tin cậy và dễ bảo trì hơn.

TypeScript cho người mới bắt đầu - Đưa mã JavaScript lên một tầm cao mới

Mình là Hưng đến từ ABC Software Solutions Company.&nbsp; Trong thời gian gần đây, mình có cơ hội thử trải nghiệm xây dựng một trang web trên nền tảng WIX và mình muốn chia sẻ lại với các bạn những lợi ích mà nó mang lại, cùng với trải nghiệm cá nhân của mình và những kinh nghiệm mà mình đã rút ra.<h2>Wix là gì?</h2>Wix là một nền tảng xây dựng website trực tuyến (website builder) cho phép người dùng tạo và quản lý các trang web một cách dễ dàng mà không cần kiến thức về lập trình. Wix cung cấp một giao diện kéo và thả (drag-and-drop) cho phép người dùng chọn và sắp xếp các thành phần và nội dung trên trang web theo ý muốn. Người dùng có thể truy cập vào Wix thông qua trình duyệt web và bắt đầu xây dựng trang web của mình từ các mẫu có sẵn hoặc bắt đầu từ đầu với giao diện trống. Wix cung cấp một loạt các công cụ và tính năng để tùy chỉnh và thiết kế trang web, bao gồm cả việc thay đổi giao diện, sắp xếp các thành phần, tạo trang sản phẩm, thêm các tính năng như blog, cửa hàng trực tuyến, form liên hệ, và nhiều hơn nữa. Wix cũng cung cấp các tính năng quản lý nội dung và phân tích thống kê để người dùng có thể theo dõi hiệu suất của trang web và tương tác với khách truy cập. Ngoài ra, Wix cũng hỗ trợ tích hợp các dịch vụ bên thứ ba như công cụ tối ưu hóa công cụ tìm kiếm (SEO), email marketing, tích hợp mạng xã hội và nhiều hơn nữa. Với Wix, người dùng không cần phải có kiến thức về mã hóa hay thiết kế web phức tạp, và có thể tạo ra một trang web chuyên nghiệp và hấp dẫn trong thời gian ngắn.<h2>Trải nghiệm của mình</h2>Với vai trò là một UI/UX designer mình đến với Wix thông qua một yêu cầu của khách hàng về xây dựng website B2B Landing page. Mình được tạo điều kiện thời gian khoản gần 2 tuần để tìm hiểu và thực hành. Trước đây mình đã có kinh nghiệm xây dựng website bằng WordPress với việc áp dụng các plugin như Elementor, Flatsome, Woocommerce,...Việc làm việc trên Wix lần này có một số điểm tương đồng với WordPress đã làm cho mình cảm thấy thú vị hơn, đồng thời cung cấp cho bản thân mình nhiều kiến thức mới và thú vị hơn về nền tảng này. Dưới đây là những gì mình đã tìm hiểu được về Wix.<h3>Ưu điểm của Wix</h3>Wix tỏa sáng với một loạt các tính năng đáng chú ý. Với sự thu hút của một đám đông người dùng, Wix gây ấn tượng bằng những ưu điểm nổi bật sau:<ul><li>Giao diện dễ sử dụng: Wix được thiết kế với giao diện người dùng thân thiện và dễ dàng tiếp cận. Người dùng có thể tạo và chỉnh sửa trang web một cách đơn giản thông qua công cụ kéo và thả.</li><li>Thiết kế linh hoạt: Wix cung cấp nhiều mẫu và giao diện đẹp mắt để người dùng lựa chọn. Bên cạnh đó, người dùng có thể tùy chỉnh bố cục, màu sắc, phông chữ và hình ảnh theo ý muốn, giúp tạo ra trang web độc đáo và phù hợp với ý tưởng của mình.</li><li>Tích hợp tính năng mạnh mẽ: Wix đi kèm với nhiều tính năng tích hợp như blog, cửa hàng trực tuyến, tích hợp mạng xã hội, hỗ trợ SEO và nhiều tính năng khác. Điều này giúp người dùng dễ dàng xây dựng và quản lý trang web theo nhu cầu của mình.</li><li>Đáp ứng trên nhiều thiết bị: Trang web được xây dựng trên Wix tự động thích ứng với các thiết bị khác nhau như desktop, điện thoại di động và máy tính bảng. Điều này đảm bảo trải nghiệm người dùng tốt trên mọi nền tảng.</li><li>Hỗ trợ khách hàng tận tâm: Wix cung cấp các tài liệu hướng dẫn chi tiết, trung tâm hỗ trợ và diễn đàn cộng đồng để hỗ trợ người dùng. Bạn có thể tìm thấy sự giúp đỡ và giải đáp thắc mắc nhanh chóng khi cần thiết.</li></ul><h3>Một số nhược điểm của Wix</h3>Bên cạnh những ưu điểm, Wix cũng có một số nhược điểm cần lưu ý:<ul><li>Giới hạn tùy chỉnh mã nguồn: Wix không cho phép truy cập và chỉnh sửa mã nguồn trực tiếp. Người dùng chỉ có thể thực hiện tùy chỉnh thông qua giao diện người dùng. Điều này hạn chế sự linh hoạt và khả năng tùy chỉnh cao hơn của trang web.</li><li>Giới hạn mở rộng tính năng: Wix có một số ứng dụng và tiện ích mở rộng trong Wix App Market, nhưng không phải tất cả các tính năng mà bạn có thể tìm thấy trên nền tảng phát triển web chung. Điều này có thể khiến việc đáp ứng những yêu cầu đặc biệt hoặc tích hợp các công cụ bên ngoài trở nên khó khăn hơn.</li><li>Phí dịch vụ và giới hạn băng thông: Một số tính năng và tài nguyên mở rộng của Wix chỉ có sẵn trong các gói dịch vụ trả phí. Một số gói dịch vụ cũng có giới hạn về băng thông, điều này có thể ảnh hưởng đến khả năng tải trang nhanh chóng và xử lý lưu lượng truy cập lớn.</li><li>Quảng cáo Wix: Trong phiên bản miễn phí, Wix hiển thị quảng cáo của chính họ trên trang web của bạn. Để loại bỏ quảng cáo này, bạn cần nâng cấp lên các gói dịch vụ trả phí.</li><li>Khó khăn với di chuyển nền tảng: Nếu bạn muốn chuyển đổi từ Wix sang một nền tảng khác, quá trình di chuyển có thể gặp khó khăn. Việc chuyển đổi có thể mất thời gian và công sức để tùy chỉnh lại trang web trên nền tảng mới.</li></ul>Tuy nhiên, nhược điểm này không ảnh hưởng đến khả năng Wix cung cấp một giải pháp xây dựng trang web nhanh chóng và dễ dàng cho người dùng không có kỹ năng lập trình.<h3>So sánh Wix và WordPress</h3> Sau khoản thời gian tìm hiểu về Wix, mình nhận ra Wix và WordPress sẽ có nhiều điểm khác biệt, sau đây là một số điểm cần quan tâm: <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/WIX_VS_WP_b34d13fea7.png" alt="WIX VS WP.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_WIX_VS_WP_b34d13fea7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_WIX_VS_WP_b34d13fea7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_WIX_VS_WP_b34d13fea7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_WIX_VS_WP_b34d13fea7.png 1000w," sizes="100vw"><h4>Thiết kế và bố cục</h4>Wix và WordPress đều cung cấp một loạt các mẫu giao diện để bạn lựa chọn. Wix có hơn 500 mẫu được thiết kế sẵn, phù hợp với nhiều ngành nghề khác nhau. Các mẫu này có giao diện trực quan và bạn có thể dễ dàng tùy chỉnh bố cục và công cụ theo ý muốn. Tuy nhiên, một điểm lưu ý là khi mình đã chọn một mẫu giao diện trên WIX, sẽ không thể thay đổi sang mẫu khác. Thay vào đó, mình phải tiếp tục tùy chỉnh bố cục và các thành phần trên mẫu đã chọn. WordPress cũng mang đến cho người dùng một thư viện đa dạng với hàng nghìn mẫu giao diện, bao gồm cả miễn phí và có phí. Một điểm khác biệt với Wix là WordPress cho phép dễ dàng tùy chỉnh lại mẫu giao diện đã chọn bằng cách sử dụng các theme và plugin khác. Điều này mang lại cho người dùng một một mức độ linh hoạt cao hơn trong việc tạo ra trang web độc đáo và phù hợp với mục tiêu hướng đến. Dù là Wix hay WordPress, cả hai nền tảng đều cung cấp các công cụ và tùy chọn tùy chỉnh để bạn tạo ra một trang web đẹp mắt và chuyên nghiệp. Quyết định lựa chọn giữa hai nền tảng này phụ thuộc vào nhu cầu và mục tiêu của bạn. Nếu bạn muốn sự đơn giản và dễ sử dụng, cùng với một số mẫu giao diện sẵn có để tùy chỉnh, Wix là một sự lựa chọn tốt. Ngược lại, nếu bạn mong muốn sự linh hoạt và khả năng tùy chỉnh cao hơn, WordPress sẽ là một lựa chọn phù hợp, mặc dù có đôi chút đòi hỏi kiến thức về mã hóa và quản lý.<h4>Tính trải nghiệm</h4>Wix sở hữu rất nhiều công cụ được thiết kế thông minh và vô cùng dễ sử dụng. Thậm chí với những người hoàn toàn không am hiểu về code hay thiết kế website vẫn có thể dùng được. Trong khi đó, WorPress lại có visual editor giúp viết nội dung và chỉnh sửa theme một cách nhanh chóng, dễ dàng. Tuy nhiên, với những tính năng trong WordPress, bạn cần phải tốn nhiều thời gian và công sức để tìm hiểu.<h4>Plugin/App</h4>Nền tảng Wix hiện tại đang có khoảng hơn 500 app hỗ trợ với những chức năng như: nhận xét, thư viện, theme biểu mẫu liên hệ,… Phần lớn các app này đều được miễn phí. Trong khi đó, số lượng plugin của WordPress đã lên tới con số 55.000 chưa kể hàng nghìn app có trả phí khác.  Tóm lại, tính tới thời điểm hiện tại, nếu so về sự tương quan giữa chi phí – lượng tính năng, tài nguyên, thiết kế bố cục, plugin/app thì WordPress vẫn đang chiếm nhiều ưu thế hơn hẳn. Tuy nhiên, Wix vẫn được đánh giá cao hơn bởi tính dễ sử dụng cho người mới.<h3>Có nên sử dụng Wix?</h3>Nền tảng Wix đơn giản và dễ sử dụng, ngay cả cho những người không có nhiều kiến thức về lập trình. Mọi người có thể bắt đầu sử dụng Wix mà không cần mua hosting và domain riêng. Điều này làm cho Wix trở thành lựa chọn hợp lý cho những người không muốn đầu tư quá nhiều về mặt kỹ thuật và tài chính. Nếu bạn không am hiểu sâu về công nghệ và không muốn chi tiền mua hosting và domain, Wix là sự lựa chọn phù hợp. Bạn có thể tạo ra một trang web chuyên nghiệp theo yêu cầu mà không cần quá nhiều khó khăn. Tuy nhiên, nếu bạn đang xây dựng một trang web lớn hơn với quy mô phức tạp hơn, WordPress là sự lựa chọn tốt hơn. WordPress cung cấp nhiều tính năng và khả năng tùy chỉnh mạnh mẽ hơn, đồng thời cho phép bạn sử dụng tên miền riêng và khai thác các tính năng nâng cao. Đó là những kiến thức cơ bản về nền tảng Wix và cách sử dụng công cụ này để tạo ra một trang web đơn giản. Tuy nhiên, cũng cần lưu ý rằng Wix còn có một số hạn chế. Nếu bạn chỉ cần một trang web đơn giản hoặc không có nhiều kiến thức chuyên sâu, thì Wix là một lựa chọn an toàn và tiện lợi.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Should_use_WIX_08197ecde3.png" alt="Should use WIX_.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Should_use_WIX_08197ecde3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Should_use_WIX_08197ecde3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Should_use_WIX_08197ecde3.png 750w," sizes="100vw"><h2>Kinh nghiệm mình có được</h2>Dù có nhiều lợi ích, mình cũng gặp một số thách thức trong quá trình xây dựng trang web trên Wix. Một trong số đó là giới hạn của các mẫu thiết kế có sẵn, khiến mình phải tìm cách tùy chỉnh để đáp ứng đúng yêu cầu của dự án. Tuy nhiên, mình đã vượt qua các thách thức này bằng cách tìm hiểu kỹ càng và tận dụng các tính năng linh hoạt của Wix. Trải nghiệm xây dựng website trên Wix đã mang lại cho mình nhiều bài học quý giá. Mình nhận thấy rằng việc nắm vững cách sử dụng một công cụ thiết kế web quan trọng như Wix giúp mình tăng cường khả năng thực hiện các dự án trong tương lai. Mình cũng nhận ra tầm quan trọng của việc tối ưu hóa trải nghiệm người dùng và tạo ra một thiết kế hợp lý để đáp ứng nhu cầu của khách hàng. Tổng kết lại, trải nghiệm xây dựng trang web trên Wix đã mang lại cho mình nhiều kiến thức và kỹ năng quý giá trong lĩnh vực UI/UX design. Mình đã hiểu rõ hơn về lợi ích và hạn chế của Wix, cũng như cách tùy chỉnh và linh hoạt để tạo ra một trang web đẹp và hấp dẫn. Qua khoản thời gian này, mình biết rằng việc không ngừng học hỏi và thử nghiệm mới sẽ giúp mình phát triển hơn về những công nghệ mới cũng như nâng cao tư duy và sáng tạo, mang đến người dùng những sản phẩm tuyệt vời. Mình hy vọng blog này đã mang lại cho các bạn những thông tin hữu ích và động lực để khám phá thế giới của thiết kế website. Hãy tiếp tục duy trì đam mê và sáng tạo, luôn khám phá những công nghệ mới và không ngừng học hỏi.&nbsp; Một lần nữa, xin chân thành cảm ơn và hy vọng rằng chúng ta sẽ tiếp tục gặp gỡ trong những bài viết và chia sẻ tương lai.&nbsp; Hẹn gặp lại!

Wix mang lại sự dễ dàng và linh hoạt. Với nhiều mẫu giao diện thiết kế sẵn và công cụ tùy chỉnh, bạn có thể tạo ra một trang web đẹp và chuyên nghiệp một cách nhanh chóng và dễ dàng.

Trải nghiệm xây dựng website trên Wix

<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b5ccffdddf.png">Chào các bạn chào các bạn chào mừng các bạn đã đến với channel à nhầm 😅 blog của mình.&nbsp;Các bạn đã từng nghe nói về Three.js chưa? nếu chưa thì sau bài viết này các bạn sẽ muốn tìm hiểu thêm về nó đấy. Đây là một thư viện rất thú vị của javascript giúp chúng ta thoải mái bay bổng sáng tạo trong vũ trụ 3D đầy màu sắc nhé 🚀.Nhắc lại chút về JavascriptJavaScript là một ngôn ngữ lập trình thông dịch được sử dụng chủ yếu để xây dựng các ứng dụng web tương tác, chạy trên trình duyệt của người dùng. Nó cho phép thực hiện các tác vụ động trên trang web, tương tác với người dùng, kiểm soát các sự kiện, thay đổi nội dung trang web và nhiều hơn nữa. JavaScript cũng được sử dụng để phát triển ứng dụng trên các nền tảng khác nhau như desktop và di động, và là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay.&nbsp;&nbsp;&nbsp; Với đặc điểm này nổi trội này của mình javascript cùng với đồ hoạ 3D đã tạo nên một thư viện mạnh mẽ để sáng tạo đó chính là Three.js.Three.js từ vô vị đến thú vịThree.js là một thư viện JavaScript mã nguồn mở rất bá đạo được sử dụng để tạo và hiển thị đồ họa 3D trong trình duyệt web. Thư viện này cung cấp cho người dùng những công cụ mạnh mẽ để tạo ra các trải nghiệm 3D phức tạp trên web.Three.js được phát triển bởi Ricardo Cabello, còn được gọi là Mr.doob, và là một trong những thư viện 3D phổ biến nhất trên web ngày nay. Three.js được xây dựng trên WebGL, một giao diện lập trình ứng dụng (API) được tích hợp sẵn trong các trình duyệt web hiện đại, cho phép truy cập trực tiếp vào đồ họa 3D của GPU.Tại sao nên dùng Three.jsMột trong những đặc điểm nổi bật của Three.js là khả năng tương tác cao với các thành phần khác của web như HTML, CSS và JavaScript. Thư viện này cũng hỗ trợ các loại hình học phổ biến như hình cầu, hình trụ, hình hộp, hình nón và hình elip. Three.js cũng cung cấp một loạt các chức năng khác nhau để tạo ra các hiệu ứng, động lực học và ánh sáng, giúp người dùng tạo ra những trải nghiệm 3D đa dạng, chân thực và rất là magic✨.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_a400443c65.png">Các tính năng chính của Three.js bao gồm:<ul style="list-style-type:disc;"><li>Tạo và hiển thị các đối tượng 3D như hình cầu, hình trụ, hình hộp, hình nón và hình elip.&nbsp;</li><li>Các chức năng hỗ trợ tạo ra các hiệu ứng, động lực học và ánh sáng.</li><li>Tích hợp WebGL để tăng cường khả năng đồ họa 3D của GPU.</li><li>Tương tác cao với các thành phần khác của web như HTML, CSS và JavaScript.</li><li>Tích hợp với các thư viện khác như D3.js, React, jQuery và Tween.js.</li></ul><img class="image_resized" style="width:18.95%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_645dd566bd.png"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_da7f971ba3.png">Three.js rất linh hoạt và có thể được sử dụng cho nhiều mục đích khác nhau như tạo ra các trò chơi trực tuyến, mô hình hóa các dự án kiến ​​trúc, tạo ra các bản đồ động, tạo ra các sản phẩm quảng cáo và nhiều hơn nữa. Với các tính năng mạnh mẽ và tích hợp các công nghệ tiên tiến, Three.js là một công cụ tuyệt vời cho các nhà phát triển web muốn tạo ra các trải nghiệm đồ họa 3D đa dạng và ấn tượng trên trang web của mình.Sau đây là một ví dụ cụ thể về ứng dụng của Three.js:<figure class="image image_resized" style="width:20.62%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_278f351542.png"></figure><div class="raw-html-embed"><iframe height="300" style="width: 100%;" scrolling="no" title="Colorful Painting🎨" src="https://codepen.io/wakana-k/embed/yLRaEGb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/wakana-k/pen/yLRaEGb">
 Colorful Painting🎨</a> by Wakana Y.K. (<a href="https://codepen.io/wakana-k">@wakana-k</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe></div><div class="raw-html-embed"><iframe height="300" style="width: 100%;" scrolling="no" title="sony" src="https://codepen.io/Joanderson15/embed/qBJxEGm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/Joanderson15/pen/qBJxEGm">
 sony</a> by Joanderson (<a href="https://codepen.io/Joanderson15">@Joanderson15</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe></div>Vì vậy tại sao chúng ta không thử dùng Three.js vào trang web của mình, khách hàng truy cập vào sẽ phải ngạc nhiên đấy! 😎&nbsp;Một số điểm bất cập về Three.jsMặc dù Three.js là một thư viện mạnh mẽ và đa năng trong việc tạo ra các trải nghiệm đồ họa 3D trên web, nhưng cũng có một số bất cập mà bạn nên lưu ý khi sử dụng nó.Đầu tiên, Three.js có một số yêu cầu phần cứng khá cao để chạy mượt mà. Nếu trang web của bạn có quá nhiều đối tượng 3D hoặc các hiệu ứng phức tạp, điều này có thể dẫn đến hiện tượng giật hoặc lag cho người dùng, đây cũng là tại vì nghèo đó 😭😭.Thứ hai, Three.js còn đang trong quá trình phát triển và thường xuyên có các phiên bản cập nhật mới. Điều này có nghĩa là một số tính năng có thể bị thay đổi hoặc gỡ bỏ trong các phiên bản mới nhất, và bạn sẽ cần phải cập nhật mã của mình để đảm bảo tính tương thích.Thứ ba, việc tạo ra các đối tượng 3D phức tạp trong Three.js đòi hỏi một mức độ kiến thức và kỹ năng cao trong lĩnh vực đồ họa 3D. Điều này có nghĩa là nếu bạn không có kinh nghiệm hoặc kiến thức cần thiết, việc sử dụng Three.js để tạo ra các trải nghiệm đồ họa 3D có thể là một thử thách. Thế nên chúng ta hãy học hỏi không chỉ có code dể trãi nghiệm nhiều đều mới mẻ hay ho hơn nữa&nbsp;🙌🏻&nbsp;.Cuối cùng, một số trình duyệt web cũng có thể không tương thích hoàn toàn với Three.js, và điều này có thể dẫn đến các vấn đề về hiển thị hoặc tương tác trên trang web của bạn.KếtĐến đây là hết bài viết rồi trên nhưng nói về Three.js thì vẫn còn nhiều thứ cần để tìm hiểu có rất nhiều tài liệu về Three.js mà chúng ta có thể tìm kiếm trên Internet. Mình sẽ để vài link tham khảo ở đây <a target="_blank" rel="noopener noreferrer" href="https://threejs.org/">Three.js</a>, <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/tag/threejs">Code pen Three.js</a>,&nbsp;Nếu bạn đang quan tâm đến việc phát triển trò chơi trực tuyến, mô hình hóa các dự án kiến ​​trúc, tạo ra các bản đồ động hoặc các sản phẩm quảng cáo độc đáo, Three.js là một công cụ bá đạo rất đáng để thử. Với khả năng tương tác với các thành phần khác của web, tích hợp các công nghệ tiên tiến và các tính năng mạnh mẽ, Three.js sẽ giúp bạn tạo ra các trải nghiệm đồ họa 3D tuyệt vời và đưa trang web của bạn lên một tầm cao mới 🚀.

Three.js là một thư viện JavaScript mã nguồn mở rất bá đạo được sử dụng để tạo và hiển thị đồ họa 3D trong trình duyệt web. Thư viện này cung cấp cho người dùng những công cụ mạnh mẽ để tạo ra các trải nghiệm 3D phức tạp trên web

Tìm hiểu về Three.js thư viện hỗ trợ đồ hoạ 3D

<h3>Middleware&nbsp;</h3>&nbsp; &nbsp;Có thể hiểu đơn giản middleware là một hàm đóng vai trò trung gian giữa các request và respone trong Middleware(cho những ai chưa biết thì request có thể hiểu nhanh là thông tin gửi từ client lên server, respone là dữ liệu server trả về cho client). Khi một request được gửi đến server, nó sẽ đi qua một loạt các Middleware trước khi đến tay Controller. Các Middleware sẽ thực hiện các công việc như:<ol><li>Kiểm tra quyền truy cập của người dùng</li><li>Xác thực người dùng</li><li>Thực hiện phân tích dữ liệu được gửi từ client</li><li>Thực hiện các nhiệm vụ liên quan đến bảo mật</li></ol>&nbsp; &nbsp;Các Middleware được sử dụng để giải quyết các vấn đề chung trong các ứng dụng web và giúp phát triển ứng dụng nhanh hơn. Chúng ta có thể sử dụng các Middleware được cung cấp bởi ExpressJs hoặc ta có thể tự custom các Middleware riêng tùy vào những mục đích khác nhau. Một ví dụ đơn giản về Middleware cho các bạn dễ hình dung.<pre><code class="language-plaintext">// Middleware kiểm tra quyền truy cập của người dùng
const authMiddleware = (req, res, next) =&gt; {
 // Kiểm tra xem người dùng đã đăng nhập hay chưa
 if (req.user) {
 next(); //Hàm next() này giúp các bạn có thể tiếp tục chạy các dòng lệnh bên dưới
 } else {
 res.status(401).send('Bạn cần phải đăng nhập để truy cập vào trang này.');
 }
};

// Route chỉ có thể truy cập khi đã đăng nhập
app.get('/home', authMiddleware, (req, res) =&gt; {
 res.send('Chào mừng đến với trang cá nhân của bạn!');
});
</code></pre>&nbsp; &nbsp;Ở đây, authMiddleware là một Middleware kiểm tra xem người dùng đã đăng nhập hay chưa. Nếu người dùng đã đăng nhập thành công, Middleware sẽ gọi hàm next() để cho request tiếp tục đi đến Controller, ngược lại nó sẽ trả về một lỗi 401(Unauthorized).<h3>Model</h3>&nbsp; &nbsp;Với những ai đã từng nghe hoặc đã từng làm việc với mô hình MVC, chắc hẳn đã không còn xa lạ gì với khái niệm Model(cho những ai chưa biết thì mô hình MVC được viết tắt bởi ba từ là Model-View-Controller). Model đóng vai trò quan trọng trong việc quản lý dữ liệu trong ứng dụng web. Trong ExpressJs, Model có thể được sử dụng để thực hiện các nhiệm vụ như truy vấn cơ sở dữ liệu, thêm xóa sửa dữ liệu trong database và định nghĩa các quan hệ giữa các đối tượng trong ứng dụng. Một ví dụ đơn giản cho việc sử dụng Model để quản lý các thông tin về tài khoản người dùng trong ứng dụng web.<pre><code class="language-plaintext">// Định nghĩa Model cho tài khoản người dùng
const User = mongoose.model('User', {
 name: String,
 email: String,
 password: String
});

// Thêm mới tài khoản người dùng
const user = new User({
 name: 'Thịnh',
 email: 'thinh123@gmail.com',
 password: 'thinh123456'
});
user.save();

// Truy vấn tài khoản người dùng
User.findOne({ email: 'thinh123@gmail.com' }, (err, user) =&gt; {
 if (err) {
 console.log(err);
 } else {
 console.log(user);
 }
});</code></pre>&nbsp; &nbsp;Ở đây chúng ta sử dụng Mongoose để định nghĩa Model cho tài khoản người dùng và sử dụng Model để thêm mới và truy vấn tài khoản người dùng. Model giúp chúng ta quản lý dữ liệu một cách dễ dàng và hiệu quả hơn trong ứng dụng web.<h3>Controller</h3>&nbsp; &nbsp;Cũng giống như Model, Controller là một trong ba thành phẩn logic chính của mô hình MVC. Controller trong ExpressJs chính là thành phần quản lý logic. Khi một request đã đi qua Middleware, nó sẽ được chuyển đến Controller để xử lý. Controller có thể thực hiện các nhiệm vụ như lấy dữ liệu từ Model, xử lý dữ liệu và trả về respone cho client. Dưới đây là một ví dụ về việc sử dụng Controller để lấy danh sách tài khoản người dùng từ Model và trả về respone cho client.<pre><code class="language-plaintext">// Controller lấy danh sách tài khoản người dùng
const getUserList = (req, res) =&gt; {
 User.find({}, (err, users) =&gt; {
 if (err) {
 console.log(err);
 } else {
 res.send(users);
 }
 });
};

// Route để lấy danh sách tài khoản người dùng
app.get('/users', getUserList);
</code></pre>&nbsp; &nbsp;Hàm getUserList ở đây là một Controller được sử dụng để lấy danh sách tài khoản người dùng tự Model và trả về respone cho client. Controller sử dụng hàm find() của Model để lấy danh sách tài khoản người dùng và sử dụng res.send() để trả về danh sách này cho client. Để kiểm tra danh sách người dùng, ta truy cập vào địa chỉ localhost của dự án(ví dụ như http://localhost:3000/users).<h3>Kết luận</h3>&nbsp; &nbsp;Middleware, Model và Controller là ba thành phần quan trọng trong kiến trúc của một ứng dụng web. Middleware được sử dụng để giải quyết các vấn đề chung trong các ứng dụng web và giúp phát triển ứng dụng nhanh hơn. Model giúp chúng ta quản lý dữ liệu trong ứng dụng một cách dễ dàng và hiệu quả, trong khi Controller là thành phần quản lý logic. Các thành phần tương tác với nhau để xây dựng một ứng dụng hoàn chỉnh. Middleware có thể được sử dụng để kiểm tra và xử lý dữ liệu đầu vào từ client, sau đó gọi đến Controller để thực hiệ các tác vụ xử lý logic. Controller sử dụng Model để truy xuất và quản lý dữ liệu, sau đó trả về kết quả cho client thông qua Middleware.&nbsp;&nbsp; &nbsp;Việc hiểu và sử dụng Middlware, Model và Controller là rất quan trọng trong việc phát triển ứng dụng web với ExpressJs. Khi hiểu rõ vai trò và nhiệm vụ của từng thành phần, chúng ta có thể dễ dàng xâu dựng ứng dụng và bảo trì dự án một cách hiệu quả và dễ dàng.<h3>Một số lưu ý khi sử dụng Middleware, Model và Controller</h3><ul><li>Middleware có thể được sử dụng để xử lý các vấn đề chung trong ứng dụng web như xác thực, quản lý phiên và xử lý lỗi.</li><li>Model là thành phần quản lý dữ liệu trong ứng dụng web và giúp chúng ta quản lý dữ liệu một cách dễ dàng và hiệu quả hơn.</li><li>Controller là thành phần quản lý logic trong ExpressJs và được sử dụng để xử lý các yêu cầu từ client và trả về respone.</li></ul>&nbsp; &nbsp;Khi sử dụng Middleware, Model và Controller, chúng ta nên chú ý đến việc giữ cho code của chúng ta đơn giản và dễ đọc. Việc kết hợp các thư viện và công cụ phù hợp cũng giúp cho chúng ta phát triển và bảo trì ứng dụng một cách hiệu quả.&nbsp; &nbsp;Trên đây là một số chia sẽ nho nhỏ về Middleware, Model và Controller trong ExpressJs. Kiến thức trên được mình tổng hợp lại thông qua quá trình học tập và làm việc, vì vậy cho nên có thể có những thiếu sót. Nếu các bạn có thắc mắc gì về ba khái niệm trên thì có thể để lại bình luận bên dưới, mình sẽ cố gắng giải đáp thắc mắc cho các bạn trong phạm vi hiểu biết của mình. See you again &lt;3.

ExpressJs là một framework khá phổ biến trong việc phát triển ứng dụng web bằng Node Js. Middleware, Model và Controller là ba thành phần quan trọng trong kiến trúc của một ứng dụng web. Trong bài viết này, mình sẽ giải thích sơ cho các bạn biết về vai trò và nhiệm vụ của Middleware, Model và Controller trong ExpressJs là như thế nào ?

Tìm hiểu nhanh về Middleware, Model và Controller trong ExpressJs

Trong bài viết này, mình sẽ tìm hiểu khái niệm và các tính năng của web 1.0, 2.0 và 3.0<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_67d878a48e.png"></figure><h1>1. World Wide Web(WWW) là gì?</h1>- World Wide Web (WWW) là một phần của internet, là một hệ thống giao tiếp và chia sẻ thông tin trên mạng thông qua các trang web được liên kết với nhau. Nó được phát triển bởi Tim Berners-Lee vào năm 1989. - WWW là một phần của internet, bao gồm các trang web được liên kết với nhau thông qua các liên kết siêu văn bản (hypertext links) và siêu trình duyệt (hypertext browser). - Mỗi trang web trên WWW được định danh bằng một địa chỉ duy nhất gọi là URL (Uniform Resource Locator), cho phép người dùng truy cập trực tiếp vào trang web đó. - WWW đã mở ra một thế giới mới của truyền thông, cho phép người dùng truy cập vào hàng triệu trang web về mọi chủ đề và lĩnh vực khác nhau, từ giải trí đến giáo dục, kinh doanh và chính trị. - WWW cũng đã thúc đẩy sự phát triển của nhiều công nghệ và ứng dụng web khác như thương mại điện tử, truyền thông xã hội, tìm kiếm trực tuyến và điện toán đám mây (cloud computing). - Trong thời gian gần đây, WWW đã trở thành một phương tiện quan trọng để chia sẻ thông tin về COVID-19, giúp các cơ quan y tế và chính phủ truyền tải thông tin về virus và các biện pháp phòng ngừa cho cộng đồng.<h1> 2. Web 1.0 là gì?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_5b8a1e862b.png"></figure>2.1. Khái niệm - Web 1.0 là một thuật ngữ được sử dụng để chỉ giai đoạn đầu tiên của World Wide Web, từ khi được phát triển cho đến khoảng đầu thập niên 2000. Web 1.0 có thể được xem như là một "web tĩnh" vì nó chỉ cho người dùng xem mà không cho phép tương tác trực tiếp với các trang web đó. - Web 1.0 tập trung chủ yếu vào việc cung cấp thông tin tĩnh và đơn giản. Các trang web được thiết kế để hiển thị các nội dung tĩnh như văn bản, hình ảnh. - Một số ví dụ về các trang web Web 1.0 bao gồm các trang web tin tức, trang web thông tin và các trang web cá nhân. Nó chỉ cung cấp thông tin tĩnh đơn giản như chữ và hình ảnh, cùng với các đường link mà không hề có nút bấm để tương tác như web hiện đại ngày nay. 2.2. Các tính năng của web 1.0 - Các trang web tĩnh: Web 1.0 chỉ hỗ trợ các trang web tĩnh, nghĩa là nội dung trên trang web không có sự thay đổi động &nbsp;mà chỉ có thể được thay đổi bằng cách nhập đường dẫn trang web khác hoặc nhấp chuột vào các liên kết khác ở trong trang web ấy. - Nội dung tĩnh: Nội dung trên các trang web Web 1.0 thường là tĩnh, chỉ hiển thị các thông tin cố định và ít thay đổi. - Thông tin không được phân loại: Không có cơ chế phân loại và sắp xếp thông tin trên trang web, người dùng phải tự tìm kiếm thông tin một cách thủ công.<h1> 3. Web 2.0 là gì?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_14be3a87a9.png"></figure>3.1. Khái niệm - Web 2.0 là một khái niệm được sử dụng để chỉ giai đoạn phát triển thứ hai của World Wide Web, từ khoảng giữa thập niên 2000 đến nay. - Web 2.0 đã mở ra một thời đại mới của World Wide Web, đánh dấu sự phát triển và tiến bộ trong công nghệ và tạo ra một môi trường truyền thông trực tuyến đa dạng và phong phú hơn. - Một số ví dụ về các trang web Web 2.0 bao gồm: Facebook, YouTube, Twitter, Instagram, Wikipedia, Google Maps, các trang blog, các trang web tìm kiếm và các trang web thương mại điện tử. 3.2. Các tính năng của web 2.0 - Tính tương tác cao: Web 2.0 cho phép người dùng tương tác trực tiếp với các trang web thông qua các tính năng như comment, like, share, vote, rating và các tính năng khác. - Tính đa nền tảng: Các trang web Web 2.0 được thiết kế để hoạt động trên nhiều nền tảng, bao gồm máy tính, điện thoại di động, máy tính bảng và các thiết bị thông minh khác. - Cộng đồng: Web 2.0 cho phép người dùng tham gia vào cộng đồng, tạo ra các trang web xã hội và tương tác với những người dùng khác. - Thiết kế đẹp và trực quan: Các trang web Web 2.0 được thiết kế với các giao diện đẹp và trực quan, giúp cho người dùng dễ dàng sử dụng và tìm kiếm thông tin trên trang web. - Nội dung đa dạng: Web 2.0 có tính năng tạo ra nội dung đa dạng, bao gồm âm thanh, video, hình ảnh, trò chơi trực tuyến và các ứng dụng web.<h1>4. Web 3.0 là gì?</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b9cbcd81c2.png"> 4.1. Khái niệm - Web 3.0 là một khái niệm về sự tiến hóa của World Wide Web, được cho là giai đoạn phát triển tiếp theo sau Web 2.0 và được phát triển từ năm 2006. Web 3.0 tập trung vào việc xây dựng các ứng dụng và dịch vụ trên nền tảng blockchain, nơi mà sự phân cấp và tính an toàn được đảm bảo bởi một mạng lưới phân tán. - Một số ví dụ về các ứng dụng Web 3.0 bao gồm: Ethereum, IPFS, Filecoin, Brave browser, Uniswap, Aave, Polkadot và nhiều hơn nữa. 4.2. Các tính năng của web 3.0 - Phi tập trung: Các ứng dụng Web 3.0 sử dụng một mô hình phi tập trung, trong đó các dữ liệu được lưu trữ trên các nút mạng phân tán, thay vì được quản lý bởi một bên thứ ba hoặc một tổ chức trung tâm. - Tính tương tác người máy: Web 3.0 cho phép tương tác giữa con người và máy tính một cách tự nhiên, thông qua các giao diện tương tác và hệ thống điều khiển giọng nói. - Tính bảo mật cao: Các ứng dụng Web 3.0 sử dụng các công nghệ bảo mật tiên tiến như mã hóa đối xứng và không đối xứng để bảo vệ dữ liệu của người dùng. - Quyền sở hữu dữ liệu: Người dùng sẽ có quyền sở hữu và kiểm soát dữ liệu của mình, chứ không phải để cho các công ty lớn kiếm tiền từ dữ liệu của họ. - Tính kết nối thông minh: Web 3.0 cho phép các hệ thống thông tin trên mạng kết nối và tương tác với nhau một cách thông minh, tạo ra một môi trường truyền thông kết nối và linh hoạt hơn.

WWW là một phần của internet, bao gồm các trang web được liên kết với nhau thông qua các liên kết siêu văn bản (hypertext links). WWW mở ra một thế giới mới của truyền thông, cho phép người dùng truy cập vào hàng triệu trang web về mọi chủ đề và lĩnh vực khác nhau, từ giải trí đến giáo dục, kinh doanh và chính trị. Góp phân thúc đẩy sự phát triển của các công nghệ mới như: livestream video trực tiếp, điện toán đám mây,…

Tìm hiểu về các khái niệm web 1.0, web 2.0, web 3.0

Trong bài này này, tôi sẽ giới thiệu tổng quan về kiểm tra bảo mật ứng dụng web, công cụ và thuật ngữ chính được sử dụng trong thử nghiệm bảo mật trang web cùng với phương pháp thử nghiệm của nó.<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7f60975afc.png"></figure><h1>1. Kiểm thử bảo mật là gì ?</h1>Kiểm thử bảo mật (Security Testing) là quá trình kiểm tra và đánh giá tính bảo mật của một ứng dụng hay hệ thống thông tin. Mục đích của kiểm thử bảo mật là xác định và đánh giá các lỗ hổng bảo mật trong ứng dụng hoặc hệ thống, đảm bảo rằng thông tin được bảo vệ tốt và không bị truy cập trái phép. 1.1. &nbsp;Kỹ thuật và phương pháp kiểm thử Kiểm thử bảo mật bao gồm nhiều kỹ thuật và phương pháp kiểm thử khác nhau, bao gồm: - Kiểm thử xác thực và phân quyền: kiểm tra tính xác thực của quy trình đăng nhập và xác thực người dùng, kiểm tra tính bảo mật của việc phân quyền truy cập. - Kiểm thử đột nhập (Penetration Testing): kiểm tra tính bảo mật của ứng dụng bằng cách tấn công vào hệ thống như một tin tặc để tìm ra các lỗ hổng bảo mật. - Kiểm thử tấn công từ chối dịch vụ (Denial of Service Testing): kiểm tra tính bảo mật của hệ thống bằng cách tấn công và làm ngập băng thông hệ thống. - Kiểm thử mã độc: kiểm tra tính bảo mật của ứng dụng bằng cách tìm kiếm các mã độc hay phần mềm độc hại. - Kiểm thử mã nguồn (Code Review): kiểm tra mã nguồn của ứng dụng để phát hiện các lỗ hổng bảo mật có thể xuất hiện trong mã nguồn. - Tùy thuộc vào phạm vi và mức độ phức tạp của ứng dụng hay hệ thống, kiểm thử bảo mật có thể được thực hiện theo nhiều cấp độ khác nhau để đảm bảo tính bảo mật và chống lại các cuộc tấn công bên ngoài. 1.2. &nbsp;Mục tiêu kiểm tra bảo mật <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_27e411885e.png"> Mục tiêu của kiểm thử bảo mật ứng dụng web là đảm bảo rằng ứng dụng đó không có lỗ hổng bảo mật nào có thể bị tấn công hoặc xâm nhập. Các mục tiêu cụ thể của kiểm thử bảo mật ứng dụng web có thể bao gồm: 1. Xác định các lỗ hổng bảo mật: Kiểm tra bảo mật ứng dụng web để phát hiện các lỗ hổng bảo mật có thể bị khai thác để tấn công và xâm nhập vào hệ thống. 2. Xác định mức độ nghiêm trọng của lỗ hổng bảo mật: Để đánh giá mức độ nghiêm trọng của các lỗ hổng bảo mật được phát hiện và quyết định ưu tiên xử lý chúng. 3. Cải thiện chất lượng bảo mật của ứng dụng: Bằng cách xác định và khắc phục các lỗ hổng bảo mật, kiểm tra bảo mật ứng dụng web giúp cải thiện chất lượng bảo mật của ứng dụng. 4. Đảm bảo tuân thủ quy định bảo mật: Kiểm tra bảo mật ứng dụng web cũng đảm bảo tuân thủ các quy định, tiêu chuẩn và quy trình bảo mật được đặt ra bởi các tổ chức quản lý bảo mật và chính phủ. 5. Đảm bảo tính toàn vẹn của dữ liệu: Kiểm tra bảo mật ứng dụng web giúp đảm bảo tính toàn vẹn của dữ liệu được lưu trữ và truyền tải qua ứng dụng.<h1> 2. Một số thuật ngữ chính được sử dụng trong kiểm tra bảo mật Web</h1>- Vulnerability: lỗ hổng bảo mật, là một điểm yếu trong hệ thống hoặc ứng dụng, cho phép kẻ tấn công tìm cách khai thác để xâm nhập hệ thống. - Exploit: kỹ thuật khai thác lỗ hổng bảo mật để tấn công hệ thống, chẳng hạn như việc thực thi mã độc, thực hiện các lệnh trái phép, hay truy cập vào thông tin nhạy cảm. - Penetration testing: phương pháp kiểm thử bảo mật bằng cách thử tấn công hệ thống để phát hiện lỗ hổng bảo mật. - Security audit: kiểm tra đánh giá bảo mật hệ thống, xác định các lỗ hổng bảo mật và đưa ra các khuyến nghị để cải thiện. - Security assessment: quá trình kiểm tra toàn diện các yếu tố liên quan đến bảo mật hệ thống, bao gồm kiểm tra thiết kế, triển khai, cấu hình và thực thi của các thành phần bảo mật. - Threat modeling: phân tích các mối đe dọa tiềm tàng đến hệ thống và ứng dụng, giúp định hướng các hoạt động bảo mật cần thiết. - Malware: phần mềm độc hại, được thiết kế để tấn công hệ thống hoặc đánh cắp thông tin. - Firewall: tường lửa, là một thành phần cơ bản của bảo mật mạng, giúp chặn các lưu lượng mạng không mong muốn hoặc độc hại.<h1> 3. Các công cụ kiểm tra bảo mật thường được sử dụng thông thường</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_a04e8e0202.png"></figure>Có rất nhiều công cụ kiểm tra bảo mật được sử dụng, tùy vào mục đích và yêu cầu của dự án mà chọn công cụ phù hợp. Sau đây là một số công cụ phổ biến được sử dụng trong kiểm tra bảo mật: 1. Acunetix là một công cụ kiểm thử bảo mật web tự động được sử dụng để phát hiện các lỗ hổng bảo mật trên các ứng dụng web. Nó có khả năng phát hiện hầu hết các lỗ hổng bảo mật phổ biến như các lỗ hổng SQL Injection, XSS, LFI, RFI, và nhiều hơn nữa. Acunetix cung cấp cho người dùng các báo cáo chi tiết về các lỗ hổng bảo mật được phát hiện cùng với các giải pháp để khắc phục chúng. Công cụ này được sử dụng rộng rãi bởi các chuyên gia bảo mật, nhà phát triển web và các tổ chức đảm bảo an ninh thông tin.&nbsp; 2. Nmap: Là một công cụ quét mạng, giúp tìm kiếm các cổng mở trên hệ thống và phát hiện các máy chủ trong mạng. Nmap cũng cung cấp thông tin chi tiết về các dịch vụ đang chạy trên các cổng đó. 3. Metasploit: Là một nền tảng kiểm tra đột nhập được sử dụng rộng rãi để phát hiện và khai thác các lỗ hổng bảo mật. Nó cung cấp các công cụ và tài nguyên để phát triển, thử nghiệm và triển khai các tấn công. 4. Wireshark: Là một công cụ phân tích gói tin mạng, giúp phát hiện các tấn công mạng, kiểm tra lưu lượng mạng và phân tích các giao thức mạng. 5. Burp Suite: Là một bộ công cụ kiểm tra bảo mật ứng dụng web, cho phép phát hiện các lỗ hổng bảo mật trên các ứng dụng web, bao gồm các tấn công XSS, SQL injection, và các lỗ hổng tràn bộ đệm. 6. OpenVAS: Là một nền tảng quét mã nguồn mở, được sử dụng để phát hiện các lỗ hổng bảo mật trong các hệ thống và ứng dụng. 7. Aircrack-ng: Là một bộ công cụ để kiểm tra bảo mật mạng Wi-Fi, giúp phát hiện các lỗ hổng bảo mật trên các mạng Wi-Fi và khôi phục mật khẩu truy cập.<h1> 4. Phương pháp kiểm tra bảo mật</h1>Có nhiều phương pháp kiểm tra bảo mật được sử dụng để đảm bảo rằng hệ thống đang hoạt động một cách an toàn và đáng tin cậy. Dưới đây là một số phương pháp kiểm tra bảo mật phổ biến: - Kiểm tra mã nguồn: Phương pháp này kiểm tra mã nguồn của hệ thống hoặc ứng dụng để tìm các lỗ hổng bảo mật, lỗi bảo mật và các điểm yếu khác. Các công cụ phổ biến để kiểm tra mã nguồn bao gồm SonarQube, Veracode và Fortify. - Kiểm tra thâm nhập: Phương pháp này bao gồm việc kiểm tra các lỗ hổng bảo mật bằng cách giả lập các tấn công từ bên ngoài để đánh giá khả năng của hệ thống chống lại các cuộc tấn công này. Các công cụ phổ biến bao gồm Metasploit và Nmap. - Kiểm tra xác thực: Phương pháp này đảm bảo rằng hệ thống chỉ cho phép truy cập đến người dùng được ủy quyền và không cho phép truy cập trái phép. Các công cụ phổ biến để kiểm tra xác thực bao gồm Burp Suite và OWASP ZAP. - Kiểm tra quản lý: Phương pháp này đảm bảo rằng quản lý hệ thống được cấu hình chính xác và an toàn. Các công cụ phổ biến để kiểm tra quản lý bao gồm OpenVAS và Nessus. - Kiểm tra mã độc: Phương pháp này bao gồm kiểm tra mã độc để tìm ra các phần mềm độc hại và các phần mềm gián điệp. Các công cụ phổ biến để kiểm tra mã độc bao gồm Malwarebytes và VirusTotal. - Kiểm tra đánh giá rủi ro: Phương pháp này đánh giá các rủi ro bảo mật để đảm bảo rằng các rủi ro này được xử lý một cách hiệu quả. Các công cụ phổ biến để kiểm tra đánh giá rủi ro bao gồm OpenFAIR và FAIR.<h1> 5. Phương pháp kiểm tra bảo mật Web</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b6bf1a5086.png"></figure>Phương pháp kiểm tra bảo mật web là quá trình đánh giá, xác định và giải quyết các lỗ hổng bảo mật trong các ứng dụng web. Đây là một phần quan trọng của việc đảm bảo rằng các ứng dụng web được sử dụng an toàn và đáng tin cậy. Dưới đây là một số phương pháp kiểm tra bảo mật web phổ biến: - Kiểm tra thủ công: Kiểm tra thủ công là quá trình kiểm tra bảo mật web bằng cách sử dụng các công cụ và kỹ thuật thủ công để tìm kiếm lỗ hổng bảo mật. Việc kiểm tra thủ công bao gồm việc kiểm tra và xác định các lỗ hổng bảo mật bằng cách sử dụng các công cụ như Burp Suite, OWASP ZAP và các kỹ thuật khác. - Kiểm tra tự động: Kiểm tra tự động bao gồm sử dụng các công cụ và phần mềm để tự động phát hiện các lỗ hổng bảo mật trong ứng dụng web. Các công cụ kiểm tra tự động bao gồm W3af, Nessus, Acunetix và OpenVAS. - Kiểm tra Penetration Testing: Kiểm tra Penetration Testing bao gồm việc thử thâm nhập vào một hệ thống để tìm kiếm các lỗ hổng bảo mật. Các chuyên gia Penetration Testing sử dụng các kỹ thuật như SQL Injection, Cross-site Scripting (XSS), và các kỹ thuật khác để thử xâm nhập hệ thống. - Kiểm tra tĩnh: Kiểm tra tĩnh là phương pháp kiểm tra bảo mật web bằng cách phân tích mã nguồn của ứng dụng web để tìm kiếm các lỗ hổng bảo mật. - Kiểm tra động: Kiểm tra động bao gồm việc kiểm tra bảo mật web bằng cách chạy ứng dụng web và sử dụng các công cụ để tìm kiếm các lỗ hổng bảo mật trong quá trình chạy.

Kiểm thử bảo mật (Security Testing) là quá trình kiểm tra và đánh giá tính bảo mật của một ứng dụng hay hệ thống thông tin.

Tổng quan về kiểm tra bảo mật ứng dụng web

<h1>1. Khái niệm về QA</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/QA_fd3f2bb71a.jpg"></figure>QA (Quality Assurance) trong tester là một phần quan trọng trong quá trình phát triển phần mềm. Nó liên quan đến việc đảm bảo chất lượng sản phẩm phần mềm thông qua các hoạt động kiểm thử và giám sát quá trình phát triển. Các chuyên gia QA thường là người quản lý và thực hiện các hoạt động kiểm thử để đảm bảo rằng sản phẩm đáp ứng được các yêu cầu về chất lượng. Các chuyên gia QA cũng sẽ thực hiện kiểm tra các quy trình phát triển để đảm bảo rằng các tiêu chuẩn chất lượng được đáp ứng.<h2>1.1. Các hoạt động chính của QA (Quality Assurance) trong kiểm thử phần mềm bao gồm:</h2> -Kiểm tra tính đúng đắn và đầy đủ của yêu cầu về chất lượng. -Đảm bảo các tiêu chuẩn chất lượng được áp dụng trong toàn bộ quá trình phát triển. -Tạo kế hoạch kiểm thử và thực hiện các kịch bản kiểm thử. -Đánh giá kết quả kiểm thử và lập báo cáo để đưa ra quyết định về chất lượng sản phẩm phần mềm. -Điều chỉnh các quy trình phát triển để đảm bảo đáp ứng được các tiêu chuẩn chất lượng.<h2>1.2. Nhiệm vụ của QA bao gồm:</h2><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_89388dde9a.png"></figure>-Thiết kế và triển khai quy trình kiểm soát chất lượng để đảm bảo rằng các sản phẩm hoặc dịch vụ đáp ứng các tiêu chuẩn và yêu cầu chất lượng. -Đào tạo và hướng dẫn nhân viên trong quá trình thực hiện quy trình kiểm soát chất lượng. -Đảm bảo rằng quy trình kiểm soát chất lượng được thực hiện đúng cách và đầy đủ. -Theo dõi và đánh giá quá trình kiểm soát chất lượng để tìm kiếm cơ hội cải tiến. -Đưa ra các giải pháp để giải quyết các vấn đề liên quan đến chất lượng sản phẩm hoặc dịch vụ. -Đảm bảo rằng các sản phẩm hoặc dịch vụ được chuẩn bị sẵn sàng cho việc kiểm tra và đảm bảo rằng các tiêu chuẩn kiểm tra được thiết lập đúng<h2>1.3. Các kỹ năng cần thiết cho một chuyên viên kiểm thử chất lượng (QA) bao gồm:</h2>-Kiến thức về quy trình kiểm thử phần mềm: QA cần có kiến thức về quy trình kiểm thử phần mềm để đảm bảo các quy trình kiểm thử được thực hiện đúng cách. -Kỹ năng phân tích và thiết kế kiểm thử: QA cần có khả năng phân tích và thiết kế các ca kiểm thử để đảm bảo phần mềm được kiểm thử đầy đủ. -Kiến thức về lập trình: QA nên có kiến thức về lập trình để có thể hiểu và đọc được mã nguồn phần mềm. -Kiến thức về cơ sở dữ liệu: QA cần hiểu về cơ sở dữ liệu để kiểm tra tính đúng đắn của các câu truy vấn và các thao tác trên cơ sở dữ liệu. -Kỹ năng sử dụng các công cụ kiểm thử: QA cần biết sử dụng các công cụ kiểm thử phần mềm để tăng hiệu quả và tiết kiệm thời gian. -Kỹ năng ghi chép và báo cáo: QA cần có khả năng ghi chép và báo cáo kết quả kiểm thử một cách chi tiết để các nhà phát triển có thể dễ dàng hiểu và sửa lỗi. -Kỹ năng giao tiếp: QA cần có khả năng giao tiếp tốt để có thể trao đổi và làm việc với các thành viên khác trong đội ngũ phát triển phần mềm. -Tinh thần tỉ mỉ và cẩn thận: QA cần có tinh thần tỉ mỉ và cẩn thận trong quá trình kiểm thử phần mềm để không bỏ sót bất kỳ lỗi nào. -Kiên trì và sáng tạo: QA cần có kiên trì trong việc tìm kiếm lỗi và sáng tạo trong việc đưa ra các phương pháp kiểm thử mới. -Sự chuyên nghiệp: QA nên có tinh thần chuyên nghiệp trong việc làm việc với đội ngũ phát triển và trách nhiệm với chất lượng sản phẩm.<h1>2. Khái niệm QC</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_21877c3985.png"></figure>QC là viết tắt của "Quality Control", nghĩa là kiểm soát chất lượng. Trong lĩnh vực kiểm thử phần mềm, QC thường được hiểu là quá trình kiểm tra sản phẩm hoặc dịch vụ của công ty để đảm bảo chất lượng của chúng đáp ứng các tiêu chuẩn và yêu cầu chất lượng được xác định trước.<h2>2.1. Các hoạt động chính của QC (Quality Control) trong kiểm thử phần mềm bao gồm:</h2>-Kiểm tra chất lượng sản phẩm: QC thực hiện các phương pháp kiểm tra như thử nghiệm chức năng, kiểm tra hiệu suất, kiểm tra bảo mật, kiểm tra tương thích và kiểm tra tính đáng tin cậy của sản phẩm để đảm bảo rằng sản phẩm đáp ứng các yêu cầu chất lượng và tiêu chuẩn được xác định trước. -Đánh giá độ tin cậy của sản phẩm: QC cũng đánh giá độ tin cậy của sản phẩm, bao gồm khả năng hoạt động đúng và đáp ứng các yêu cầu chất lượng với một mức độ xác định. -Kiểm tra tư vấn: QC kiểm tra tài liệu tư vấn, ví dụ như hướng dẫn sử dụng sản phẩm, bản hướng dẫn cho nhân viên hỗ trợ khách hàng, để đảm bảo tính đầy đủ và chính xác. -Kiểm tra quy trình phát triển sản phẩm: QC có thể thực hiện kiểm tra quy trình phát triển sản phẩm để đảm bảo rằng các quy trình này tuân thủ các tiêu chuẩn chất lượng được xác định trước và đưa ra các cải tiến cho các quy trình này. -Kiểm tra chất lượng dịch vụ: QC kiểm tra chất lượng các dịch vụ cung cấp bởi công ty, ví dụ như hỗ trợ khách hàng, để đảm bảo tính đầy đủ và chính xác. -Phát hiện và báo cáo lỗi: QC phát hiện và báo cáo các lỗi và vấn đề về chất lượng của sản phẩm đến các bộ phận liên quan để sửa chữa và cải tiến sản phẩm. -Đưa ra cải tiến và khuyến nghị: QC đưa ra các cải tiến và khuyến nghị để cải thiện chất lượng sản phẩm và các quy trình phát triển.<h2>2.2. Để trở thành một QC (Quality Control), bạn cần có những kỹ năng cơ bản sau:</h2>-Kiến thức về quy trình kiểm thử phần mềm: Để hiểu rõ quy trình kiểm thử phần mềm và các bước trong quá trình kiểm thử phần mềm. -Kiến thức về các kỹ thuật kiểm thử phần mềm: Để có thể sử dụng các kỹ thuật kiểm thử phần mềm phù hợp như kiểm thử hộp trắng, kiểm thử hộp đen, kiểm thử tích hợp, kiểm thử hệ thống, kiểm thử chấp nhận và kiểm thử hiệu suất. -Kỹ năng lập kế hoạch và tổ chức kiểm thử phần mềm: Để có thể lên kế hoạch kiểm thử phần mềm, đảm bảo rằng các bước kiểm thử được thực hiện theo kế hoạch và các lỗi được phát hiện và báo cáo đầy đủ. -Kỹ năng phân tích và giải quyết vấn đề: Để có thể phân tích lỗi và giải quyết vấn đề hiệu quả, đảm bảo rằng các lỗi được phát hiện và sửa chữa kịp thời. -Kỹ năng sử dụng các công cụ kiểm thử phần mềm: Để có thể sử dụng các công cụ kiểm thử phần mềm hiệu quả như Selenium, JMeter, SoapUI, và nhiều công cụ khác. -Kỹ năng giao tiếp: Để có thể trao đổi thông tin và làm việc với các thành viên khác trong nhóm kiểm thử, phát triển và quản lý dự án. -Kỹ năng tư duy logic và chi tiết: Để có thể phát hiện và phân tích các lỗi phần mềm, xác định nguyên nhân và tìm ra các giải pháp để khắc phục. -Kỹ năng kiểm tra và đảm bảo chất lượng: Để có thể kiểm tra chất lượng phần mềm, đảm bảo rằng phần mềm đáp ứng các yêu cầu chất lượng được đưa ra.

Trong bài viết này, chúng ta sẽ tìm hiểu sự khác nhau giữa QA và QC trong kiểm thử phần mềm. Mặc dù chúng đều là quá trình quan trọng của quá trình kiểm thử phần mềm, nhưng chúng có nhiều điểm khác biệt về mục đích, phương pháp và kỹ năng yêu cầu. Bài viết sẽ giúp bạn hiểu rõ hơn về hai khái niệm này và cách chúng tương tác với nhau để đảm bảo chất lượng phần mềm

Tổng quan về QA và QC trong kiểm thử phần mềm 

<h1 style="text-align:center;">Một vài điều nho nhỏ về WordPress</h1><h2 style="text-align:justify;">1. Hãy thường xuyên ấn “Save Changes” ở Permalink Settings</h2>Dưới đây là đoạn mã để tạo một post-type có tên là 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>Dưới đây là ví dụ về một single-product.php để hiển thị thông tin chi tiết của một sản phẩm trong post type product.<pre><code class="language-php">&lt;?php
&lt;h1&gt;&lt;?php echo the_title() ?&gt;&lt;/h1&gt;</code></pre>Nếu như bạn không nhấn “Save Changes” ở Permalink Settings thì trang thường hiển thị ra kết quả là 404.php, ví dụ: &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_33f764c7d1.png"></figure>Và sau khi bạn nhấn “Save Changes” ở Permalink Settings &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8cb290529e.png"></figure>&nbsp;Thì kết quả sẽ là &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f68840fd2b.png"></figure><h2>2. Hãy thường xuyên cập nhật plugin.</h2>Lỗi cài đặt và cập nhật plugin/theme là một trong những vấn đề phổ biến mà người dùng WordPress thường gặp phải. Điều này có thể xảy ra khi phiên bản của plugin hoặc theme không tương thích với phiên bản WordPress hiện tại của bạn. Khi gặp phải lỗi này, bạn có thể gặp khó khăn trong việc cài đặt hoặc cập nhật plugin hoặc theme. Điều này có thể gây ra sự cố trên trang web của bạn, ảnh hưởng đến trải nghiệm của người dùng và có thể dẫn đến việc mất dữ liệu quan trọng.Để giải quyết vấn đề này, bạn nên luôn chọn các plugin và theme từ các nhà phát triển uy tín và được cập nhật thường xuyên. Nếu bạn gặp phải vấn đề với phiên bản plugin hoặc theme hiện tại, bạn nên kiểm tra xem có phiên bản mới hơn của chúng không. Nếu có, hãy cập nhật chúng ngay lập tức để giảm thiểu nguy cơ gặp lỗi.Nếu bạn không thể cập nhật plugin hoặc theme của mình vì lý do gì đó, hãy tìm kiếm trợ giúp từ cộng đồng WordPress hoặc từ các chuyên gia về WordPress để giải quyết vấn đề. Điều này giúp tránh gây ra sự cố trên trang web của bạn và đảm bảo rằng trang web của bạn hoạt động ổn định và hiệu quả. &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8b46a7c533.png"></figure><h2>3. Gợi ý cho bạn các plugin mà tôi thường xuyên xử dụng</h2> Các plugin sau đây là những plugin mà tôi thường sử dụng khi làm việc với WordPress.&nbsp;<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>Plugin Advanced Custom Fields giúp tôi tạo ra các trường tùy chỉnh để quản lý nội dung trang web.&nbsp;</li><li>Plugin All In One WP Security giúp tăng cường bảo mật cho trang web của tôi bằng cách thêm các tính năng như kiểm tra mật khẩu mạnh, chặn địa chỉ IP độc hại và bảo vệ các tệp nhạy cảm.&nbsp;</li><li>Plugin Contact form 7 cho phép tôi tạo ra các biểu mẫu liên hệ để khách hàng có thể liên lạc với tôi.&nbsp;</li><li>Plugin SVG Support giúp tôi tải lên các tệp hình ảnh vector SVG để sử dụng trên trang web của tôi.&nbsp;</li><li>Plugin Yoast Duplicate Post giúp tôi dễ dàng nhân bản bài viết để sử dụng lại mà không phải viết lại từ đầu. Tôi rất tin tưởng vào các plugin này và sử dụng chúng thường xuyên trong các dự án của mình.</li></ul><h2>4. Hãy chú ý đến việc bảo mật website của bạn</h2>WordPress là một trong những nền tảng phổ biến nhất để tạo và quản lý các trang web. Tuy nhiên, vì tính phổ biến này, WordPress đã trở thành một mục tiêu chính cho các cuộc tấn công của hacker. Điều này đặt ra vấn đề bảo mật đối với WordPress.Để bảo vệ trang web WordPress của bạn khỏi các cuộc tấn công, có một số biện pháp bảo mật quan trọng mà bạn nên thực hiện. Đầu tiên, bạn nên sử dụng mật khẩu mạnh và đổi mật khẩu định kỳ. Bạn nên sử dụng plugin bảo mật WordPress để tăng cường tính bảo mật, bao gồm các plugin như All In One WP Security và Wordfence.Bạn cũng nên thường xuyên cập nhật WordPress và các plugin của mình để đảm bảo rằng bạn có phiên bản mới nhất với các lỗi bảo mật được sửa đổi. Ngoài ra, bạn cũng nên sao lưu trang web của mình thường xuyên để đảm bảo rằng bạn có thể phục hồi trang web của mình nếu xảy ra bất kỳ vấn đề bảo mật nào. Với những biện pháp bảo mật đúng đắn, bạn có thể đảm bảo an toàn cho trang web WordPress của mình và tránh được các cuộc tấn công của hacker.

Một chiếc blog note lại những vấn đề , những điều mình đã gặp phải trong quá trình làm việc với wordpress

Một vài điều nho nhỏ về WordPress

Để đảm bảo chất lượng và độ tin cậy của phần mềm, việc viết code đầy đủ và đúng chuẩn là rất quan trọng. Để giúp các nhà phát triển phần mềm làm việc hiệu quả và tiết kiệm thời gian, cộng đồng phát triển phần mềm đã thiết lập một số quy tắc viết code đầy đủ mà mọi nhà phát triển đều nên tuân thủ.Quy tắc viết code đầy đủ bao gồm các quy tắc về định dạng, cú pháp, tên biến và hàm, và phong cách lập trình. Để bắt đầu, việc đặt tên biến và hàm rõ ràng và dễ hiểu là rất quan trọng để giúp người khác đọc và hiểu code của bạn. Các biến và hàm nên được đặt tên một cách mô tả và thể hiện đúng chức năng của chúng trong phần mềm.Định dạng cú pháp của code cũng là một yếu tố quan trọng. Các nhà phát triển nên sử dụng đúng khoảng trắng và dấu ngoặc đóng/mở để làm cho code dễ đọc hơn. Việc thêm chú thích (comment) cũng là một phương pháp tuyệt vời để giải thích code và làm cho nó dễ hiểu hơn.Phong cách lập trình là một yếu tố khác cũng rất quan trọng. Việc sử dụng các quy tắc nhất định, như sử dụng biến địa phương (local variable) thay vì biến toàn cục (global variable), có thể giúp giảm thiểu lỗi và làm cho code dễ hiểu hơn.Tóm lại, việc viết code đầy đủ và đúng chuẩn là rất quan trọng trong việc phát triển phần mềm. Bằng cách tuân thủ các quy tắc viết code đầy đủ, các nhà phát triển có thể tăng tính tin cậy và hiệu quả của phần mềm, đồng thời cũng giúp cho việc đọc và hiểu code trở nên dễ dàng hơn. Sau đây là các qui tắc viết mã:<h3 style="margin-left:0px;">HTML</h3><ol style="list-style-type:decimal;"><li style="margin-left:0px;">Đảm bảo sử dụng cú pháp đúng trong viết HTML, bao gồm đó là đóng thẻ (tag) đầy đủ, đặt tên thẻ đúng cách và sử dụng các thuộc tính (attributes) đầy đủ. Ví dụ khi dùng thẻ &lt;img&gt; phải có thuộc tính alt, dùng thẻ &lt;a&gt; phải có thuộc tính href…</li><li style="margin-left:0px;">Sử dụng các thẻ (tag) hợp lý cho các thành phần khác nhau của trang web, chẳng hạn như sử dụng thẻ &lt;h1&gt; cho các tiêu đề trong trang, thẻ &lt;p&gt; cho đoạn văn bản, thẻ &lt;ul&gt; và &lt;li&gt; cho danh sách...</li><li style="margin-left:0px;">Đặt tên id và class đúng cách giúp cho việc viết CSS và JavaScript dễ dàng hơn.</li></ol>Ví dụ:<pre><code class="language-html">&lt;button class="btn-customize"&gt;Customize&lt;/button&gt;
&lt;input class="txt-firstname" name="firstname" /&gt;
&lt;input type="checkbox" class="chk-publish" /&gt;</code></pre>Theo ví dụ trên chúng ta sẽ tạo sẽ có 1 prefix tương ứng với từng loại phần tử (<code>btn-</code>, <code>txt-</code>, <code>chk-</code>). Điều này giúp chúng ta nhận biết nhanh nó là gì khi đọc code. Có một số quy tắc đặt tên phổ biến như <code>kebab-case</code>, <code>snake_case</code>, <code>camelCase</code>. Khuyến nghị sử dụng <code>kebab-case</code>.<h3 style="margin-left:0px;">JAVSCRIPT</h3>Khuyến nghị sử dụng AirBnb style guide: <a target="_blank" rel="noopener noreferrer" href="https://github.com/airbnb/javascript">https://github.com/airbnb/javascript</a>Airbnb JavaScript Style Guide là một tài liệu hướng dẫn về việc viết code JavaScript được phát triển bởi Airbnb, một trong những công ty công nghệ hàng đầu thế giới. Tài liệu này cung cấp những qui định và hướng dẫn chi tiết về cách viết code JavaScript nhằm đảm bảo tính nhất quán, dễ đọc và dễ bảo trì của mã nguồn. Dưới đây là những lý do tại sao nên sử dụng AirBnb JavaScript Style Guide:<ol style="list-style-type:decimal;"><li>Tăng tính nhất quán: Khi các lập trình viên tuân thủ cùng một quy tắc, code của họ sẽ có tính nhất quán hơn, dễ đọc và dễ hiểu hơn. Điều này giúp cho công việc kiểm tra và bảo trì code dễ dàng hơn.</li><li>Giảm lỗi: Mã nguồn được tuân thủ theo một quy tắc cụ thể sẽ giảm thiểu số lỗi được tạo ra trong quá trình viết và bảo trì code. Ngoài ra, nếu phát hiện lỗi, người kiểm tra code cũng dễ dàng tìm ra vị trí của lỗi và sửa chữa nhanh chóng hơn.</li><li>Tăng tính bảo mật: Việc tuân thủ các quy tắc trong AirBnb JavaScript Style Guide sẽ giúp đảm bảo tính bảo mật của mã nguồn JavaScript. Ví dụ như việc sử dụng các phương thức bảo mật để xử lý dữ liệu đầu vào sẽ giảm thiểu nguy cơ bị tấn công.</li><li>Tiết kiệm thời gian: Các quy tắc trong AirBnb JavaScript Style Guide được thiết kế để giúp cho lập trình viên viết code nhanh hơn và hiệu quả hơn. Nó giúp cho nhóm phát triển có thể tiết kiệm được thời gian khi làm việc với mã nguồn JavaScript.</li></ol>Sử dụng các quy tắc được thiết kế bởi các chuyên gia: Airbnb JavaScript Style Guide được phát triển bởi các chuyên gia về lập trình JavaScript, nên các quy tắc và hướng dẫn được đưa ra đều là những kinh nghiệm thực tế trong quá trình phát triển sản phẩm. Việc sử dụng các quy tắc này sẽ giúp cho các nhà phát triển tránh được các lỗi thường gặp và phát triển ứng dụng JavaScript tốt hơn.<h3 style="margin-left:0px;">CSS/SASS</h3>SMACSS: <a target="_blank" rel="noopener noreferrer" href="http://smacss.com/book/categorizing">http://smacss.com/book/categorizing</a> BEM: <a target="_blank" rel="noopener noreferrer" href="https://aptech.fpt.edu.vn/bem-la-gi.html">https://aptech.fpt.edu.vn/bem-la-gi.html</a>BEM là một phương pháp đặt tên class cho các phần tử HTML và CSS, giúp cho việc phát triển và bảo trì trang web dễ dàng hơn. Để sử dụng BEM trong viết CSS, hãy tuân theo các qui tắc sau:<ol style="list-style-type:decimal;"><li>Sử dụng tiền tố để phân biệt khối (Block)</li><li>Sử dụng dấu gạch ngang (--) để phân biệt các thành phần tử (Element):</li><li>Sử dụng dấu gạch dưới (__) để phân biệt các trạng thái của element (Modifier):</li><li>Đặt tên class rõ ràng và có ý nghĩa: Đặt tên class theo ý nghĩa của nó để giúp cho việc đọc và hiểu code dễ dàng hơn.</li><li>Tránh đặt tên quá dài hoặc phức tạp: Đặt tên class ngắn gọn và dễ đọc để giảm thiểu sự phức tạp của code.</li><li>Sử dụng Sass hoặc các công cụ hỗ trợ để tạo ra CSS BEM dễ dàng hơn: Sử dụng các công cụ hỗ trợ như Sass để tạo ra CSS BEM dễ dàng hơn và giảm thiểu thời gian viết code. &nbsp;</li></ol>Ví dụ:<pre><code class="language-html">&lt;div class="card card--large"&gt;
 &lt;div class="card__header"&gt;
 &lt;h2 class="card__title"&gt;Title&lt;/h2&gt;
 &lt;/div&gt;
 &lt;div class="card__content"&gt;
 &lt;p class="card__description"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="card__footer"&gt;
 &lt;button class="card__button card__button--primary"&gt;Button&lt;/button&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre><pre><code class="language-css">.card {
 background-color: #fff;
 border-radius: 4px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 padding: 20px;
}

.card--large {
 padding: 40px;
}

.card__header {
 margin-bottom: 20px;
}

.card__title {
 font-size: 24px;
 font-weight: 700;
 margin: 0;
}

.card__content {
 margin-bottom: 20px;
}

.card__description {
 font-size: 16px;
 margin: 0;
}

.card__footer {
 display: flex;
 justify-content: flex-end;
}

.card__button {
 background-color: #007bff;
 border: none;
 border-radius: 4px;
 color: #fff;
 cursor: pointer;
 font-size: 16px;
 font-weight: 700;
 padding: 10px 20px;
 transition: background-color 0.2s ease-in-out;
}

.card__button--primary {
 background-color: #28a745;
}

.card__button:hover {
 background-color: #0069d9;
}</code></pre>Trong ví dụ này, chúng ta sử dụng cú pháp block__element--modifier để đặt tên cho các class CSS. Block được định nghĩa là phần tử gốc, Element là các phần tử con của Block, Modifier là các thuộc tính cải tiến hoặc đổi mới của Block hoặc Element.Trong ví dụ này, Block là .card, Element là .card__header, .card__title, .card__content, .card__description, .card__footer, .card__button, Modifier là .card--large, .card__button--primary. Việc sử dụng BEM giúp cho CSS dễ đọc và bảo trì hơn, đồng thời giúp tránh xung đột giữa các class và giảm thiểu số lượng CSS cần viết.Bài viết được tạo bởi ChatGPT và đã được chỉnh sửa.&nbsp;

Để đảm bảo chất lượng và độ tin cậy của phần mềm, việc viết code đầy đủ và đúng chuẩn là rất quan trọng. Để giúp các nhà phát triển phần mềm làm việc hiệu quả và tiết kiệm thời gian, cộng đồng phát triển phần mềm đã thiết lập một số quy tắc viết code đầy đủ mà mọi nhà phát triển đều nên tuân thủ.

Quy tắc viết code.

<h1 style="text-align:center;">WordPress: Làm việc với API của Contact Form 7</h1><h3 style="text-align:justify;">1. Giới thiệu về Contact Form 7</h3>Contact Form 7 là một trong những plugin phổ biến nhất trong cộng đồng WordPress được sử dụng để tạo và quản lý các biểu mẫu liên hệ. Với nó, người dùng có thể dễ dàng tạo các biểu mẫu liên hệ đa dạng và tùy chỉnh theo nhu cầu của mình mà không cần phải sử dụng bất kỳ một dòng mã nào. Bên cạnh đó, Contact Form 7 còn cung cấp nhiều tính năng hữu ích để giúp người dùng quản lý và xử lý các biểu mẫu liên hệ một cách thuận tiện và hiệu quả.<figure class="image image_resized" style="width:17.93%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/contact_form_7_6c4526aeea.png" alt="contact form 7.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_contact_form_7_6c4526aeea.png 201w," sizes="100vw"></figure><h3>2. Demo submit form của Contact Form 7 thông qua API</h3>Mình chuẩn bị một form như sau:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_722b56953e.png"></figure>Form gồm các field như là: your-name, your-email, your-subject, your-message Làm sao để gửi submit form trong contact form 7 bằng API. Thật may mắn là contact form 7 đã cung cấp cho ta một đương link để làm việc đó, ví dụ:&nbsp; http://demo.local/wp-json/contact-form-7/v1/contact-forms/171/feedback Trong đó 171 là id của form mà bạn muốn submit.Mình sử dụng postman để gửi đi một email:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_71002e607c.png"></figure>Cấu trúc bình thường của một response trả về của contact form 7 khi bạn gửi mail:&nbsp;<pre><code class="language-plaintext">{ 
 "contact_form_id": 171, 
 "status": "mail_sent", 
 "message": "Thank you for your message. It has been sent.", 
 "posted_data_hash": "286ba8559707c76ee30f82f97b09bc32", 
 "into": "#", 
 "invalid_fields": [] 
}</code></pre>Trong đó:<ul><li>contact_form_id: ID của biểu mẫu Contact Form 7 đã được gửi.</li><li>status: Trạng thái của việc gửi biểu mẫu. Trong ví dụ này, giá trị là "mail_sent", cho biết rằng email đã được gửi thành công.</li><li>message: Một thông báo cho biết trạng thái của việc gửi biểu mẫu. Trong ví dụ này, giá trị là "Cảm ơn bạn đã gửi tin nhắn. Nó đã được gửi.", đó là thông báo thành công mặc định cho Contact Form 7.</li><li>posted_data_hash: Một hash của dữ liệu biểu mẫu đã được gửi. Điều này có thể được sử dụng để xác minh tính toàn vẹn của dữ liệu.</li><li>into: Các trường đầu vào của biểu mẫu mà dữ liệu biểu mẫu đã được gửi đến. Trong ví dụ này, giá trị là "#", cho thấy rằng dữ liệu không được gửi đến một địa chỉ email cụ thể mà được gửi đến địa chỉ email mặc định được chỉ định trong cài đặt của Contact Form 7.</li><li>invalid_fields: Một mảng các trường đầu vào không vượt qua kiểm tra hợp lệ. Trong ví dụ này, giá trị là một mảng trống [], cho thấy rằng tất cả các trường đều vượt qua kiểm tra hợp lệ.</li></ul><h3>3. Tuỳ chỉnh response của Contact Form 7</h3>Đầu tiên ta phải biết các trạng thái của một form sau khi được submit để dựa vào đó mà tuỳ chỉnh chỉnh cho phù hợp với nhu cầu của bạn:Các trạng thái của một form sau khi được submit:&nbsp;<ul><li>mail_sent: Email đã được gửi thành công.</li><li>mail_failed: Email không gửi được.</li><li>verify_failed: Xác thực dữ liệu biểu mẫu không thành công.</li><li>spam: Việc gửi biểu mẫu được xác định là thư rác.</li><li>mail_sent_akismet: Email đã được gửi thành công, nhưng nó đã bị Akismet gắn cờ là thư rác.</li><li>mail_sent_ng: Email đã được gửi thành công nhưng không gửi được do lỗi trong cấu hình máy chủ email hoặc các lý do khác.</li></ul>Và mình sử dụng một hook mà Contact Form đã cung cấp đó là wpcf7_ajax_json_echo<ul><li>wpcf7_ajax_json_echo là một hàm trong Contact Form 7 (CF7) được sử dụng để xuất ra các thông báo trả về từ AJAX cho người dùng khi họ gửi một biểu mẫu liên hệ. Khi người dùng nhấn nút "gửi" trên biểu mẫu liên hệ, CF7 sẽ gửi thông tin đó đến máy chủ thông qua AJAX. Sau đó, máy chủ sẽ trả về một phản hồi AJAX cho trình duyệt web của người dùng.</li><li>Hàm wpcf7_ajax_json_echo được sử dụng để hiển thị thông báo trả về này trên trang web của người dùng. Thông báo này có thể bao gồm các thông tin như trạng thái của việc gửi biểu mẫu liên hệ (như "Thành công" hoặc "Thất bại"), thông báo thành công hoặc lỗi cụ thể và các thông tin khác về việc gửi biểu mẫu liên hệ.</li><li>Hàm wpcf7_ajax_json_echo được sử dụng kết hợp với các hook và filter khác của CF7 để tùy chỉnh thông báo trả về và hiển thị chúng theo cách tùy chỉnh. Với wpcf7_ajax_json_echo, người dùng có thể tùy chỉnh thông báo trả về AJAX để hiển thị chúng cho người dùng một cách dễ hiểu và phù hợp với nhu cầu của họ.</li></ul><pre><code class="language-php">&lt;?php
add_action('wpcf7_ajax_json_echo', 'custom_response_message', 10, 2);

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

&nbsp; &nbsp; unset($response['contact_form_id']);
&nbsp; &nbsp; unset($response['message']);
&nbsp; &nbsp; unset($response['invalid_fields']);
&nbsp; &nbsp; unset($response['posted_data_hash']);
&nbsp; &nbsp; unset($response['into']);
&nbsp; &nbsp; return $response;
}</code></pre>Để mình giải thích sở qua đoạn code trên: Đó là khi mail được gửi thành công thì mình sẽ gộp các field như là contact_form_id, invalid_fields, posted_data_hash, into về một chỗ gọi là meta sau đó bỏ nó đi ở response cũ.Và nhờ đoạn code trên thì reposne trả về với cấu trúc như tôi mong đợi:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_37435d4199.png"></figure>Mong là thông qua ví dụ ở trên bạn sẽ phần nào hình dung ra được cách làm việc với API của contact form 7.Các tài liệu tham khảo:<a target="_blank" rel="noopener noreferrer" href="https://contactform7.com/">Contact Form 7</a> <a href=" http://chat.openai.com/">ChatGPT</a>&nbsp;&nbsp;&nbsp;

Một chiếc blog giúp bạn hiểu hơn về cách làm việc với API được cung cấp sẵn bởi Contact Form 7

WordPress: API của Contact Form 7

<h1>1. Khái niệm</h1><img> Test Automation là việc sử dụng phần mềm hoặc công cụ để tự động hóa quá trình kiểm thử phần mềm. Nó bao gồm việc tạo ra các kịch bản kiểm thử tự động và sử dụng các công cụ tự động để thực hiện các kịch bản đó, thay vì thực hiện kiểm thử thủ công, các kịch bản kiểm thử được thiết kế và lập trình bởi những người có kinh nghiệm trong lĩnh vực kiểm thử phần mềm. Các kịch bản này có thể được thiết kế để kiểm tra tính năng, hiệu suất, bảo mật, độ tin cậy và các yêu cầu khác của phần mềm. Test Automation giúp tăng tốc độ kiểm thử, giảm thiểu sai sót và đảm bảo tính toàn vẹn của quá trình kiểm thử phần mềm. Nó cũng giúp tiết kiệm thời gian và chi phí cho công ty phát triển phần mềm. Tuy nhiên, Test Automation cũng có những hạn chế và không thể thay thế hoàn toàn cho kiểm thử thủ công.<h1> 2. Ưu, nhược điểm của Automation Testing</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7da2bb33ad.png"></figure>a. Ưu điểm của Automation Testing&nbsp; 1. Tiết kiệm thời gian và chi phí: Test Automation có thể tự động hóa quá trình kiểm thử, giúp tiết kiệm thời gian và chi phí so với việc thực hiện kiểm thử bằng tay. 2. Tăng tính chính xác và độ tin cậy: Test Automation loại bỏ những thiếu sót của kiểm thử thủ công có thể gây ra trong quá trình kiểm thử, giúp tăng tính chính xác và độ tin cậy của kiểm thử. 3. Tăng khả năng lặp lại và tăng phạm vi kiểm thử: Test Automation có thể thực hiện các kịch bản kiểm thử một cách lặp đi lặp lại nhiều lần, và có thể kiểm thử được một phạm vi rộng hơn so với kiểm thử bằng thủ công. 4. Tăng tốc độ và hiệu suất kiểm thử: Test Automation có thể thực hiện các kịch bản kiểm thử một cách nhanh chóng và hiệu quả hơn so với kiểm thử bằng tay. 5. Tăng khả năng phát hiện lỗi: Test Automation có thể tìm ra các lỗi một cách chính xác và nhanh chóng hơn so với kiểm thử bằng thủ công. &nbsp; &nbsp; &nbsp;b. Nhược điểm của Automation Testing 1. Đòi hỏi kỹ thuật cao: Test Automation đòi hỏi kiến thức chuyên môn cao về kỹ thuật và công nghệ, lập trình và tư duy logic, các ngôn ngữ lập trình khác nhau. 2. Khó khăn trong việc tạo và duy trì kịch bản kiểm thử: Tạo và duy trì các kịch bản kiểm thử tự động là một công việc phức tạp và đòi hỏi sự cẩn thận và kiên trì. 3. Không thể kiểm thử toàn diện: Test Automation không thể kiểm thử toàn diện và đảm bảo được tính ổn định của phần mềm<h1>3.Cách thức hoạt động của Automation Testing</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_0162cbcb8e.png"></figure>Automation Test là phương pháp kiểm thử phần mềm tự động, được thực hiện bằng cách sử dụng phần mềm và các công cụ kiểm thử tự động để thực hiện các kịch bản kiểm thử mà không cần sự can thiệp của con người. Cách thức hoạt động của Automation Test thường bao gồm các bước sau: 1. Lựa chọn công cụ Automation Test: Đầu tiên, phải chọn một công cụ Automation Test phù hợp với dự án. Có nhiều loại công cụ Automation Test khác nhau, bao gồm các công cụ miễn phí và thương mại, chẳng hạn như Selenium, Appium, Katalon Studio, Ranorex, và một số công cụ khác. 2. Xây dựng kịch bản kiểm thử: Sau khi chọn công cụ Automation Test, tiếp theo là xây dựng các kịch bản kiểm thử. Các kịch bản kiểm thử này được lập trình sử dụng một trong các ngôn ngữ lập trình phổ biến hiện nay như Java, Javascript, Python, hoặc C#. 3. Thiết lập môi trường kiểm thử: Trong quá trình xây dựng kịch bản kiểm thử, phải thiết lập môi trường kiểm thử để thực hiện kiểm thử. Môi trường kiểm thử bao gồm các trình duyệt web, hệ điều hành, ứng dụng và các công cụ hỗ trợ khác. 4. Thực thi kịch bản kiểm thử: Sau khi đã xây dựng các kịch bản kiểm thử và thiết lập môi trường kiểm thử, ta có thể thực thi các kịch bản kiểm thử này. Các kịch bản kiểm thử được thực thi tự động, mà không cần sự can thiệp của con người. 5. Phân tích kết quả kiểm thử: Sau khi thực thi các kịch bản kiểm thử, các kết quả kiểm thử được lưu lại và phân tích. Các lỗi và vấn đề được phát hiện sẽ được ghi lại trong báo cáo kiểm thử. 6. Sửa chữa lỗi: Cuối cùng, các lỗi và vấn đề phát hiện được trong quá trình kiểm thử sẽ được sửa chữa và thực hiện lại các kịch bản kiểm thử để đảm bảo rằng phần mềm hoạt động đúng và hiệu quả.<h1> 4. &nbsp;Để trở thành Automation Testing thì bắt đầu từ đâu:</h1>&nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_1132507687.png"></figure>1. Tìm hiểu kiến thức cơ bản về Testing: Để hiểu được kiểm thử tự động, bạn cần có kiến thức về Testing. Bạn nên tìm hiểu về các kỹ thuật kiểm thử, kiểm thử phần mềm, kiểm thử đơn vị, kiểm thử tích hợp, kiểm thử chấp nhận, kiểm thử hệ thống, kiểm thử hiệu năng, kiểm thử bảo mật, và các quy trình, tiêu chuẩn và kiến thức chung về Testing. 2. Học một ngôn ngữ lập trình: Automation Testing thường được thực hiện bằng cách sử dụng các công cụ và ngôn ngữ lập trình như Java, Python, Ruby, C#, v.v. Bạn cần học một ngôn ngữ lập trình để có thể hiểu được các kịch bản kiểm thử tự động và tạo ra các kịch bản kiểm thử tự động. 3. Tìm hiểu các công cụ kiểm thử tự động: Các công cụ kiểm thử tự động giúp bạn tạo và thực hiện các kịch bản kiểm thử tự động. Có nhiều công cụ phổ biến như Selenium, Appium, Katalon Studio, Robot Framework, và nhiều công cụ khác. Bạn cần tìm hiểu và nắm vững các công cụ này để có thể sử dụng chúng một cách hiệu quả. 4. Thực hành và tạo các kịch bản kiểm thử tự động: Sau khi bạn đã có kiến thức cơ bản về Testing, ngôn ngữ lập trình và các công cụ kiểm thử tự động, bạn nên thực hành bằng cách tạo ra các kịch bản kiểm thử tự động. Điều này sẽ giúp bạn hiểu rõ hơn về cách thực hiện kiểm thử tự động và tạo ra các kịch bản kiểm thử tự động hiệu quả. 5. Tìm hiểu thêm về các công nghệ và kỹ thuật liên quan: Testing là một lĩnh vực rộng lớn và luôn cập nhật với các công nghệ mới và kỹ thuật mới. Bạn nên tiếp tục tìm hiểu và nâng cao kiến thức của mình về các công nghệ và kỹ thuật liên quan để có thể áp dụng chúng vào kiểm thử tự động. Nếu bạn muốn đi sâu hơn vào lĩnh vực kiểm thử tự động và trở thành một chuyên gia trong lĩnh vực này, bạn có thể tìm hiểu thêm về các chứng chỉ liên quan như ISTQB Foundation Level hoặc Selenium WebDriver Certification. Ngoài ra, bạn có thể tìm kiếm các khoá học và tài liệu trực tuyến để học hỏi thêm kiến thức về Automation Testing. Các diễn đàn và cộng đồng liên quan cũng là nơi tuyệt vời để kết nối và chia sẻ kiến thức với các chuyên gia khác trong lĩnh vực này&nbsp;

Test Automation là việc sử dụng phần mềm hoặc công cụ để tự động hóa quá trình kiểm thử phần mềm. Nó bao gồm việc tạo ra các kịch bản kiểm thử tự động và sử dụng các công cụ tự động để thực hiện các kịch bản đó, thay vì thực hiện kiểm thử thủ công, các kịch bản kiểm thử được thiết kế và lập trình bởi những người có kinh nghiệm trong lĩnh vực kiểm thử phần mềm. Các kịch bản này có thể được thiết kế để kiểm tra tính năng, hiệu suất, bảo mật, độ tin cậy và các yêu cầu khác của phần mềm.

Tìm hiểu về Automation Testing

Chào mừng mọi người đã quay lại với serie học gì chia sẻ nấy và mình là Tuyền. Hôm nay mình sẽ chia sẻ về cách Active menu nhiều cấp trong WordPress.&nbsp; Như các bạn đã biết thì WordPress là một trong những nền tảng mà bạn có thể làm hầu hết mọi thứ. Tất cả những gì bạn cần làm là dành vài phút trong bảng quản trị và bạn có thể làm cho trang web của mình trông giống như cách bạn muốn. Điều tương tự cũng xảy ra với các menu tùy chỉnh . Việc tạo và quản lý chúng thực sự dễ dàng và bất kỳ ai cũng có thể làm được. Điều rất quan trọng là phải có các menu trực quan và được tổ chức tốt giúp người dùng của bạn dễ dàng tìm thấy những gì họ cần trên trang web của bạn. Sắp xếp và cấu trúc các danh mục của bạn một cách kỹ lưỡng vì menu sẽ hoạt động giống như một bản đồ cho trang web của bạn. Nó sẽ hướng dẫn khách hàng&nbsp; truy cập đến nội dung họ đang tìm kiếm. Để tạo một menu trong WordPress chúng ta dùng function wp_nav_menu để làm điều này. Bạn có thể tạo chúng như sau: Ta đặt một vài dòng lệnh trong file&nbsp;function.php là bạn đã tạo được. Nhưng trước khi tạo menu, hãy chắc chắn là theme của bạn đã hỗ trợ tính năng menu bằng cách kiểm tra xem có đoạn dưới trong file function của theme chưa, nếu chưa thì thêm vào bằng dòng lệnh vào. Hàm tạo menu:<pre><code class="language-php">&lt;?php

// Them menu cho site wp

add_theme_support( 'menus' );

function register_menus() {

register_nav_menus(

array(

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

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

)

);

}

add_action( 'init', 'register_menus' );</code></pre>Đây là hàm dùng để đăng ký &nbsp;và tạo một menu trong Wordpress. Sau khi ta đã đăng ký để lấy menu ra ngoài theme trong WP thì ta thêm dòng code:<pre><code class="language-php">&lt;?php&nbsp;wp_nav_menu(&nbsp;array(&nbsp;'theme_location' =&gt;&nbsp;'footer-menu' ) );&nbsp;?&gt;</code></pre> * LƯU Ý:&nbsp; ‘theme_location’ chúng ta có thể linh động vị trí menu bằng cấu trúc code sau:<pre><code class="language-php">'theme_location' =&gt;&nbsp;'main_menu' or&nbsp;'theme_location' =&gt; 'tên menu tùy chỉnh'.</code></pre>Sau khi menu tạo thành công để có thể active menu với các class tùy chỉnh lưu ý các item này nó có thể giúp bạn biết được việc active có hoạt động hay không. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_c284b7d339.png"> Đối với việc active menu cùng cấp dạng (menu gốc) này: <img class="image_resized" style="width:86.17%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_dba1acdd0d.png"> thì việc active cho nó đơn giản bằng dòng code &nbsp;<pre><code class="language-php">&lt;?php

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

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

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

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

 }

 return&nbsp;$classes;

}?&gt;
 </code></pre>Kết quả mong đợi:&nbsp; <img class="image_resized" style="width:71.5%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_ed55754c23.png">Còn đối với việc menu đó có nhiều item hay nói cách khác là nó có nhiều category dạng như này:&nbsp; <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d0cc12342e.png">Có nghĩa là khi ta chọn 1 category con thì hiển nhiên category cha vẫn còn active (active category cha vẫn luôn được giữ lại nếu ta có nhọn category con). Kết quả mong đợi: <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_dac48a89a3.png">Hàm để giúp việc click vào nhiều category con mà người dùng họ vẫn biết mình đang truy cập category (item menu) nào , ta có đoạn code sau: &nbsp;<pre><code class="language-php">&lt;?php

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

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

 &nbsp; global&nbsp;$post;

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

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

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

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

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

 &nbsp;&nbsp;}

 &nbsp; return&nbsp;$classes;

}</code></pre>&nbsp;<ul><li>Trong đó: – &nbsp;add_action: là một action hook trong WP dùng để móc cái callback của mình vào cái action hook cần cho nó móc vào. Đồng thời, chúng ta cũng có thể quản lý việc active menu thông qua post_type hoặc slug(ID). Có nghĩa là khi truy cập vào cái post_type hoặc slug(ID) thì menu gốc vẫn luôn active. Cảm ơn bạn đọc đến đây!!!! Hẹn các bạn ở blog tiếp theo nhé và mình là Tuyền. &nbsp;</li></ul>&nbsp; &nbsp;

WordPress là một trong những nền tảng mà bạn có thể làm hầu hết mọi thứ. Tất cả những gì bạn cần làm là dành vài phút trong bảng quản trị và bạn có thể làm cho trang web của mình trông giống như cách bạn muốn. Điều tương tự cũng xảy ra với các menu tùy chỉnh . Việc tạo và quản lý chúng thực sự dễ dàng và bất kỳ ai cũng có thể làm được.

ACTIVE MENU PHÂN CẤP TRONG WP

Với một lập trình viên chắc hẳn ai trong số chúng ta cũng đã từng nghe qua hoặc đã từng sử dụng thư viện Swiper ít nhất một lần để tạo ra cho chúng ta một tính năng trượt ảnh với các hiệu ứng bắt mắt. Vậy Swiper-thumb là gì ? Tại sao phải tạo riêng một Component cho module này ?I. Swiper-thumbSwiper-thumb là một module của thư viện Swiper cho phép chúng ta có thể tùy chỉnh trạng thái hoạt động của Slide dựa vào danh sách hình ảnh được hiển thị bên dưới Slide. Với điều này ảnh hoặc nội dung trên Slide sẽ được hiển thị dựa theo thumbnail slide bên dưới.Để sử dụng được Swiper-thumb, trước hết cần phải cài đặt thư viện Swiper vào project. Có thể dùng npm hoặc yarn để thêm thư viện vào project.Đối với npm<pre><code class="language-plaintext">npm i swiper</code></pre>Đổi với yarn&nbsp;<pre><code class="language-plaintext">yarn add swiper</code></pre>II. Tạo 1 module Swiper-thumb đơn giảnVới 1 module đơn giản. Việc đầu tiên chúng ta làm là sử dụng useState() để khởi tạo 2 biến thumbsSwiper và setThumbsSwiper. Mục đích là khi có một sự kiện onClick() được gọi thì setThumbsSwiper sẽ re-render lại biến thumbsSwiper để in ra màn hình dữ liệu mới nhất. Ở đây giá trị mặc định của thumbsSwiper là ‘null’<pre><code class="language-plaintext">const [thumbsSwiper, setThumbsSwiper] = useState(null);</code></pre>Tiếp theo gọi Component &lt;Swiper /&gt; với các tham số truyền vào gồm:<pre><code class="language-plaintext">modules={[Thumbs]}
// Ở đây trong module thumbs nhận dữ liệu đầu vào là thumbsSwiper.
thumbs={{ swiper: thumbsSwiper }}</code></pre>Ngay bên dưới, ta tiếp tục có một Component &lt;Swiper /&gt; thứ 2. Component này dùng để thể hiện ra giao diện thumbnailSwiper.<pre><code class="language-plaintext">&lt;Swiper
 modules={[Thumbs]}
 onSwiper={setThumbsSwiper}
&gt;
&lt;/Swiper&gt;</code></pre>Với module ‘onSwiper={setThumbsSwiper}’ thì đây là nơi nhận sự thay đổi giá trị nếu dữ liệu của biến thumbsSwiper có sự thay đổi, setThumbsSwiper sẽ cập nhật lại trạng thái và render ra dữ liệu mới nhất.Như vậy chỉ với vài dòng code đơn giản là chúng ta có thể sử dụng được module Swiper-thumb. Vậy tại sao chúng ta không áp dụng chúng vào trong các dự án thực tế mà phải tạo Component riêng cho phức tạp. Đơn giản vì trong các dự án không phải chỉ hiển thị ra Slide và thumbnail là hoàn tất. Việc có thêm các thẻ html hay dữ liệu được lấy từ API về khiến cho 1 file có thể lên đến hàng trăm dòng code. Chính vì vậy, việc chia Component trong một dự án rất là quan trọng, vừa để code ngắn gọn dễ hiểu, vừa để thuận tiện cho việc bảo trì, cập nhật.III. Tạo Component cho module Swiper-thumbVì bài viết này tôi đang chia sẻ cho các bạn về nextjs nên chúng ta sẽ bắt đầu với việc khai báo Interface trước. Tạo 1 file type.ts và khởi tạo Interface IArrayImages với 3 tham số là title, thumbnail và description<pre><code class="language-plaintext">export interface IArrayImages {
 title: string;
 thumbnail: StaticImageData;
 description: string;
}</code></pre>Tiếp theo tạo một thư mục có tên thumb-gallery. Trong thư mục tạo 2 file index.tsx và style.module.scss để style lại cho code gọn hơn nếu cần. Trong file index.tsx gọi 1 Interface khác với tham số chính là images: IArrayImages[];<pre><code class="language-plaintext">interface IProps {
 images: IArrayImages[];
 interval?: number;
 thumbCount?: number;
 spacing?: number;
}

const ThumbGallery: React.FC&lt;IProps&gt; = ({images, interval = 3000, thumbCount = 3, spacing = 12}) =&gt; {
	return &lt;&gt;&lt;/&gt;;
}

export default ThumbGallery;
</code></pre>Tiếp theo trong Component ThumbGallery sử dụng useState() để khởi tạo 2 biến thumbsSwiper và setThumbsSwiper và 1 biến imgLength để thực hiện một số câu lệnh điều kiện tiếp theo.<pre><code class="language-plaintext"> // import SwiperClass from 'swiper/types/swiper-class';
 const [thumbsSwiper, setThumbsSwiper] = useState&lt;SwiperClass&gt;();
 
 const imgLength = images?.length;</code></pre>Nếu có dữ liệu (tức imgLength &gt; 0) thì mới render ra giao diện<pre><code class="language-plaintext">{imgLength &gt; 0 &amp;&amp; (
	&lt;div className={styles['thumb-gallery']}&gt;
	&lt;/div&gt;
)}</code></pre>Tạo module Swiper-thumb như đã làm ở trên<pre><code class="language-plaintext">&lt;Swiper
 effect="fade"
 loop={true}
 autoplay={{delay: interval, disableOnInteraction: false}}
 thumbs={{swiper: thumbsSwiper &amp;&amp; !thumbsSwiper.destroyed ? thumbsSwiper : null}}
 modules={[FreeMode, Thumbs, Autoplay, EffectFade /*, Lazy*/]}
&gt;&lt;/Swiper&gt;
&lt;Swiper
 freeMode={true}
 watchSlidesProgress={true}
 slidesPerView={2.5}
 onNavigationNext={swiper =&gt; {
 	swiper.animating = true;
 }}
 onNavigationPrev={swiper =&gt; {
 swiper.animating = true;
 }}
 navigation={imgLength &gt; 1}
 spaceBetween={spacing}
 onSwiper={setThumbsSwiper}
 modules={[FreeMode, Thumbs, Navigation]}
&gt;&lt;/Swiper&gt;</code></pre>Ở Component Swiper đầu tiên. Dữ liệu truyền vào là Slider để hiển thị ra giao diện. thumbnail là ảnh, title là tiêu đề ảnh và description là mô tả của ảnh. Tất cả đều được gọi thông qua tham số images với kiểu dữ liệu và Interface IArrayImages[];<pre><code class="language-plaintext">&lt;Swiper
 effect="fade"
 loop={true}
 autoplay={{delay: interval, disableOnInteraction: false}}
 thumbs={{swiper: thumbsSwiper &amp;&amp; !thumbsSwiper.destroyed ? thumbsSwiper : null}}
 modules={[FreeMode, Thumbs, Autoplay, EffectFade /*, Lazy*/]}
 &gt;
 {images?.map((item, idx) =&gt; {
 const image = item.thumbnail;
 return (
 &lt;SwiperSlide key={idx}&gt;
 {image &amp;&amp; (
 &lt;div className="item-main img-hover-scale"&gt;
 &lt;Link href=""&gt;
 &lt;Image src={image} alt={item.title} layout="fill" /&gt;
 &lt;/Link&gt;
 &lt;div className="text"&gt;
 &lt;h3 className="title"&gt;{item.title}&lt;/h3&gt;
 &lt;h5 className="description"&gt;{item.description}&lt;/h5&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 )}
 &lt;/SwiperSlide&gt;
 );
 })}
 &lt;/Swiper&gt;</code></pre>Ở Component thứ 2 chúng ta sẽ chỉ lấy ra dữ liệu ở dạng ảnh, tức chỉ gọi item.thumbnail<pre><code class="language-plaintext">&lt;Swiper
 freeMode={true}
 watchSlidesProgress={true}
 slidesPerView={2.5}
 onNavigationNext={swiper =&gt; {
 swiper.animating = true;
 }}
 onNavigationPrev={swiper =&gt; {
 swiper.animating = true;
 }}
 navigation={imgLength &gt; 1}
 spaceBetween={spacing}
 onSwiper={setThumbsSwiper}
 modules={[FreeMode, Thumbs, Navigation]}
 &gt;
 {images?.map((item, idx) =&gt; {
 const image = item.thumbnail;
 return (
 &lt;SwiperSlide key={idx}&gt;
 &lt;&gt;
 &lt;div className="img-hover-scale"&gt;
 {image &amp;&amp; &lt;Image src={image} alt="" layout="fill" objectFit="cover" /&gt;}
 &lt;/div&gt;
 &lt;h4 className="title"&gt;{item.title}&lt;/h4&gt;
 &lt;/&gt;
 &lt;/SwiperSlide&gt;
 );
 })}
 &lt;/Swiper&gt;</code></pre>Vậy là xong Component ThumbGallery. Bây giờ chúng ta chỉ việc gọi Component ThumbGallery và truyền tham số images{data} là có thể sử dụng được module Swiper-thumb. Để kiểm chứng, ta sẽ sử dụng dữ liệu giả để xem Component có hoạt động được hay không ? Tạo mới 1 file swiper-thumb.tsx&nbsp;<pre><code class="language-plaintext">import {FC} from 'react';

import Swiper1 from '@/assets/images/thumb-1.jpg';
import Swiper2 from '@/assets/images/thumb-2.jpg';
import Swiper3 from '@/assets/images/thumb-3.jpg';

import ThumbGallery from '../gallery';

const SwiperThumb: FC = () =&gt; {
 const items = [
 {
 title: 'Swiper 1',
 description: 'This is a Swiper 1',
 thumbnail: Swiper1
 },
 {
 title: 'Swiper 2',
 description: 'This is a Swiper 2',
 thumbnail: Swiper2
 },
 {
 title: 'Swiper 3',
 description: 'This is a Swiper 3',
 thumbnail: Swiper3
 }
 ];

 return (
 &lt;div&gt;
 &lt;div className="container"&gt;
 &lt;div className="inner"&gt;
 {/* Component ThumbGallery được gọi ở đây */}
 &lt;ThumbGallery images={items}&gt;&lt;/ThumbGallery&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
};

export default SwiperThumb;</code></pre>Và đây là kết quả đạt được<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Odidi_Travel_Google_Chrome_2023_01_21_23_47_00_08bd5cc95c.gif" alt="Odidi Travel - Google Chrome 2023-01-21 23-47-00.gif">Ok. Vậy là xong Component với module Swiper-thumb, kể từ nay nếu có module nào cần dùng Swiper-thumb thì chỉ cần truyền dữ liệu vào trong tham số images={} là xong. Các bạn có thể làm thử, nếu thành công hãy quay lại đây và cho tôi một like

Tạo 1 Component cho module Swiper-thumb để sử dụng ở nhiều trang khác nhau.

Tái sử dụng module Swiper-thumb bằng cách truyền tham số cho Component

1. MongoDb là gì?MongoDb là hệ cơ sở dữ liệu NoSQL, nó có nghĩa là cơ sở dữ liệu không có quan hệ. Không giống như SQL hay AdminPHP, MongoDb tương tự như tài liệu JSON là một cấu trúc dữ liệu bao gồm các cặp trường và giá trị. Giá trị của trường có thể là các&nbsp; document hay các mảng và các cặp trường và giá trị giữa các collection cũng không ràng buộc lẫn nhau. Ưu điểm của MongoDB là linh hoạt trong lưu trữ các kích cỡ dữ liệu khác nhau. Vì được cất giữ dưới dạng JSON nên bạn thoải mái chèn thông tin tùy theo nhu cầu. Quá trình kiểm tra sự tương thích khi thêm, xóa hoặc cập nhật data nhanh chóng, tiết kiệm thời gian.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mongodb1_c8ed56b4f2.png" alt="mongodb1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_mongodb1_c8ed56b4f2.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_mongodb1_c8ed56b4f2.png 500w," sizes="100vw">2. Các thành phần trong mongoDb.Dưới đây là một số thành phần có trong MongoDb:Database: là một cơ sở dữ liệu của tập hợp các collection khái niệm này cũng giống như database bên SQL hay AdminPHP.Collection: collection tương đương với một bảng trong MySQL chưa tập hợp các document và các collection không có bất cứ quy định nào về cấu trúc.&nbsp;Vd: Nest được gọi là một database chứa 2 collection là cats và users<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mongo2_333172ce38.png" alt="mongo2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_mongo2_333172ce38.png 245w," sizes="100vw">Document: Document là một bảng ghi trong một collection, bao gồm các cặp trường và giá trị.&nbsp;Vd: Một document của collection cats, cat có các trường name và age với các giá trị Xù và 3.&nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mongo3_437582f2a0.png" alt="mongo3.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_mongo3_437582f2a0.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_mongo3_437582f2a0.png 500w," sizes="100vw">Field: là một cặp trường và dữ liệu, nó tương tự như một cột trong MySQL. Một document có thể chưa một, nhiều hay không hề có một field nào.Như ví dụ bên trên thì một field là name: “Xù”_id: _id là một đặt biệt và bắt buộc phải có trong MongoDb, nó tương tự như khi bạn khai báo một cột mã của 1 bảng, nó là giá trị duy nhất của một document và giúp phân biệt giữa các document khác. Nó là bắt buộc thế nên nếu bạn có quên tạo thì đừng lo MongoDb sẽ tự động tạo nó cho bạn.&nbsp;Cursor: Trong MongoDB, khi phương thức find() được sử dụng để tìm các documents có trong collection, thì phương thức này trả về một con trỏ sẽ trỏ đến các documents của colletion, bây giờ con trỏ này được gọi là cursor.JSON: là tiêu chuẩn cực kỳ phổ biến để trao đổi dữ liệu trên web, là định dạng trao đổi dữ liệu mà con người có thể đọc được. Các đối tượng JSON là một thùng chứa trong đó một trường sẽ được ánh xạ tới một giá trị.3. Các kiểu dữ liệu trong mongodb.Chuỗi: Đây là kiểu dữ liệu được sử dụng phổ biến nhất để lưu giữ dữ liệu. Chuỗi trong MongoDB phải là UTF-8 hợp lệ.Số nguyên: Kiểu dữ liệu này được sử dụng để lưu một giá trị số. Số nguyên có thể là 32 bit hoặc 64 bit phụ thuộc vào Server của bạn.Boolean: Kiểu dữ liệu này được sử dụng để lưu giữ một giá trị Boolean (true/false).Double: Kiểu dữ liệu này được sử dụng để lưu các giá trị số thực dấu chấm động.Min/ Max keys: Kiểu dữ liệu này được sử dụng để so sánh một giá trị với các phần tử BSON thấp nhất và cao nhất.Mảng: Kiểu dữ liệu này được sử dụng để lưu giữ các mảng hoặc danh sách hoặc nhiều giá trị vào trong một key.Timestamp: Giúp thuận tiện cho việc ghi chép hoặc đánh dấu thời điểm một Document được sửa đổi hoặc được thêm vào.Regular expression: Kiểu dữ liệu này được sử dụng để lưu giữ Regular Expresion.Object: Kiểu dữ liệu này được sử dụng cho các Document được nhúng vào.Null: Kiểu dữ liệu này được sử dụng để lưu một giá trị Null.Binary data: Kiểu dữ liệu này được sử dụng để lưu giữ dữ liệu nhị phân.Symbol: Kiểu dữ liệu này được sử dụng giống như một chuỗi, tuy nhiên, nói chung nó được dành riêng cho các ngôn ngữ mà sử dụng kiểu symbol cụ thể.Date : Kiểu dữ liệu này được sử dụng để lưu giữ date và time hiện tại trong định dạng UNIX time. Bạn có thể xác định date time riêng cho bạn bằng việc tạo đối tượng Date và truyền ngày, tháng, năm vào trong đó.Object ID: Kiểu dữ liệu này được sử dụng để lưu giữ ID của Document.Code: Kiểu dữ liệu này được sử dụng để lưu giữ JavaScrip code vào trong Document.4. Công cụ hỗ trợ quản trị mongoDbTuy có khá nhiều công cụ hỗ trợ quản trị MongoDb như Cluster control, MongoDB Compass, Nosqlclient, Mongo Management Studio hay Studio 3T. Nhưng ở đây mình sẽ giới thiệu cho các bạn MongoDB Compass.&nbsp;MongoDB Compass cung cấp chức năng đồ họa mạnh mẽ cho người dùng mà không cần ngôn ngữ truy vấn. Phần mềm này cũng hỗ trợ hiển thị cấu trúc và phân tích các tài liệu bên trong GUI trực quan chỉ khoảng vài giây.Đặc điểm nổi bật của MongoDB Compass:Người dùng dễ dàng khám phát toàn bộ dữ liệu trực quan.Cho phép xem hiệu suất truy vấn.Cung cấp nhanh thông tin chi tiết về hiệu năng truy vấn và tình trạng server.Không cần phải viết dòng lệnh.Tăng hiệu quả tiếp cận và tương tác tốt hơn với CRUD.Giúp người dùng xem xét và đưa ra quyết định index, xác thực tài liệu…Cài đặt MongoDB Compass:Bước 1: Để tải xuống MongoDB Compass, bạn truy cập vào trang https://www.mongodb.com/download-center/compass?jmp=docs .Bước 2: Bạn cần chọn bộ cài đặt và phiên bản bạn thích. Trình cài đặt GUI có sẵn dưới dạng gói .exe hoặc .msi hoặc tệp lưu trữ .zip.Bước 3: Cuối cùng, Click vào nút tải xuống.Bước 4: Click vào file cài đặt sau khi tải về hoàn tất.Bước 5: Làm theo các cửa sổ bật lên để cài đặt MongoDB Compass GUI.Bước 6: Sau khi được cài đặt, nó sẽ khởi chạy và yêu cầu bạn định cấu hình cài đặt quyền riêng tư và chỉ định tùy chọn cập nhật.5. Kết luậnTrên đây là một vài giới thiệu của mình về MongoDB, bạn có thể tìm hiểu thêm về MongoDB trên trang chủ của MongoDB. Hi vọng hệ quản trị MongoDB có thể giúp bạn một phần trong công việc.&nbsp;

MongoDB là một chương trình quản lý cơ sở dữ liệu NoSQL mã nguồn mở. NoSQL được sử dụng thay thế cho cơ sở dữ liệu quan hệ truyền thống. MongoDB làm việc với kiểu dữ liệu dạng JSON nên rất thân thiện với các framework Javascript. Trong blog này, chúng ta hãy cùng nhau tìm hiểu về MongoDB nhé.

Tổng quan về MongoDB

Hôm nay, mình sẽ giới thiệu tổng quan về Menu Navigation, Drop-Down trong WordPress Dashboard.&nbsp;
Trước tiên, mình sẽ tìm hiểu khái niệm về Wordpress là một phần mã nguồn mở được viết bằng PHP và hệ quản trị cơ sở dữ liệu MySQL. Qua thời gian phát triển, số lượng người sử dụng tăng lên, các cộng tác viên là những lập trình viên cũng tham gia đông đảo để phát triển mã nguồn WordPress để có thêm những tính năng tuyệt vời. Nếu bạn muốn xây dựng bât kỳ loại trang web nào, từ blog đến cửa hàng Thương mại điện tử, thậm chí với các loại webstite phức tạp hơn như đặt phòng khách sạn, thuê xe. Thì WordPress là lựa chọn tuyệt vời.&nbsp;
Để tạo một website thân thiện với người dùng, ta không chỉ làm cho website có diện mạo đẹp mà còn có các tính năng phù hợp. Chẳng hạn như: Phân Trang, Footer, Filter menu, Menu navigation… Nhằm tăng tính trải nghiệm người dùng. Trong đó phải kể đến Menu Navigation góp phần đáng kể trong việc hỗ trợ người dùng tìm kiếm thông tin trên Website. Với Wordpress Dashboard, ta dễ dàng tạo và sử dụng menu phân cấp, hoặc menu với các dropdown menu. Trong blog này, mình sẽ hướng dẫn các bạn cách tạo một menu dropdown trong WordPress Dashboard và chi tiết nhất có thể.&nbsp;
1. Menu navigation (Menu điều hướng) là gì?&nbsp;
Menu Navigation (menu điều hướng) là một tập hợp các liên kết tạo thành một menu, chúng thường được hiển thị dưới dạng một thanh điều hướng nằm ngang hoặc dọc và menu có thể đặt ở vị trí bất kì đâu trong website. Thông thường, các website phổ biến hiện nay thường đặt Menu điều hướng bên dưới header của trang web, trong blog này mình sẽ tạo Menu điều hướng như hình ảnh minh họa phía dưới.&nbsp;
Các Menu điều hướng cung cấp các đường dẫn đến các trang web con trọng yếu của website và giúp khách hàng nhanh chóng truy cập hoặc sử dụng được dịch vụ mà mình mong muốn, dưới đây là một ví dụ về giao diện Menu navigation&nbsp;
<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_a9c56e4b1a.png"></figure>
Hình 1.1 Mô tả Menu Navigation trong 1 trang website&nbsp;
Tạo menu trong WordPress dashboard không hề khó như bạn nghĩ, để thêm menu chính và menu phụ, bạn có thể thêm các liên kết đến các trang web mà khách hàng hay truy cập nhiều nhất, danh mục hoặc theme quan trọng nhất. Vị trí đặt menu của bạn sẽ phụ thuộc vào theme WordPress của bạn. Hầu hết các theme sẽ có một số tùy chọn. Vì vậy, bạn có thể tạo các menu khác nhau có thể được hiển thị ở những vị trí khác nhau trong website.&nbsp;
Ví dụ: Hầu hết các theme WordPress đều có một menu chính xuất hiện trên cùng, ngoài ra một số theme có thể bao gồm cả menu phụ, Menu Footer hoặc Menu navigation trên thiết bị di động của bạn.&nbsp;
Lợi ích khi sử dụng menu navigation:&nbsp;
1.Hiển thị tối ưu trên di động.
2.Giữ khách truy cập trên trang web của bạn lâu hơn.&nbsp;
3.Truy cập khám phá tốt hơn các sản phẩm.&nbsp;
4.Cải thiện thứ hạng trên công cụ tìm kiếm.&nbsp;
5.Quảng bá hình ảnh chuyẻn nghiệp.&nbsp;
2.Tạo menu trong WordPress Dashboard&nbsp;
Để tạo Menu trong WordPress bạn cần truy cập vào mục Appearance --&gt; Menus để mở của sổ quản lý các menu trong 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">
Hình 2.1. Tạo menu navigation tùy chỉnh trong WordPress &nbsp;&nbsp;
Trước tiên, bạn cần cung cấp tên cho menu của mình (tại mục Menu Name), chẳng hạn như Main Menu và sau đó nhấp vào nút Create Menu.&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">
Hình 2.2. Tạo main menu trong WordPress &nbsp;&nbsp;
Tiếp theo, bạn có thể chọn các trang mà bạn muốn thêm vào menu, bạn có thể tự động thêm tất cả các trang cấp cao nhất hoặc bạn có thể chọn các trang cụ thể từ cột bên trái. Sau đó, hãy nhấp vào tab View All để xem tất cả các trang trên trang web của bạn và nhấp vào checkbox bên cạnh mỗi trang mà bạn muốn thêm vào menu của mình, rồi nhấp vào 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">
Hình 2.3. Thêm danh mục vào menu &nbsp;&nbsp;
Khi các trang của bạn đã được thêm, bạn có thể di chuyển chúng để sắp xếp bằng cách kéo thả chúng.&nbsp;
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hinh2_4_d808648f34.png" alt="hinh2.4.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hinh2_4_d808648f34.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hinh2_4_d808648f34.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hinh2_4_d808648f34.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hinh2_4_d808648f34.png 1000w," sizes="100vw">
Hình 2.4. Sắp xếp lại danh mục cho menu
Lưu ý: Tất cả các menu đều có các mục được liệt kê trong danh sách (từ trên xuống dưới) trong menu editor. Khi bạn đặt menu trực tiếp lên trang web của mình, menu sẽ hiển thị theo chiều dọc hoặc chiều ngang (từ trái sang phải) tùy thuộc vào vị trí bạn chọn, hầu hết các theme có một số vị trí khác nhau để bạn có thể đặt menu.&nbsp;
Sau khi thêm các trang vào menu, hãy chọn vị trí bạn muốn hiển thị menu và nhấp vào 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">
Hình 2.5. Chọn vị trí hiển thị menu &nbsp;&nbsp;
Nếu bạn không chắc chắn từng vị trí sẽ nằm ở đâu thì bạn hãy thử lưu menu ở những nơi khác nhau, sau đó truy cập trang web của bạn để xem nó trông như thế nào. Có thể bạn sẽ không muốn sử dụng một vị trí nhất định thì bạn có thể sử dụng nhiều vị trí khác nhau.&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">
Hình 2.6. Menu hoàn chỉnh trên website &nbsp;&nbsp;
3. Cách tạo menu Drop-Down trong WordPress&nbsp;
Menu drop-down, đôi khi được gọi là menu nested, là menu navigation với các mục menu chính và menu phụ, khi bạn đưa con trỏ qua một menu cha thì tất cả các thành phần bên trong sẽ hiển thị bên dưới mục đó. Để tạo menu phụ, hãy kéo một mục bên dưới mục chính, sau đó kéo sang bên phải, chúng ta sẽ thấy có 3 mục phụ bên dưới Tour Du Lịch trong menu như sau:&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">
Hình 3.1. Tạo menu dropdown trong WordPress &nbsp;&nbsp;
Dưới đây là menu phụ (hay còn gọi là menu con) hiển thị trên trang 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">
Hình 3.2. Giao diện menu phụ trên website &nbsp;&nbsp;
Bạn thậm chí có thể thêm nhiều dropdown menu của bạn trong một website nhưng điều này có thể khiến bạn thấy hơi lộn xộn và có nhiều theme không hỗ trợ menu dropdown nhiều lớp.&nbsp;
Dưới dây là hình mô tả có hai mục con của riêng nó.&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">
Hình 3.3. Giao diện menu có hai mục con&nbsp;
4. Thêm Categories vào Menu trong WordPress&nbsp;
Nếu bạn đang sử dụng WordPress để làm blog, thì bạn có thể thêm các Categories vào blog dưới dạng menu dropdown trong menu WordPress của mình.&nbsp;
Bạn có thể dễ dàng thêm các Categories vào menu của mình bằng cách nhấp vào tab Categories ở bên trái màn hình Menu, bạn cũng có thể cần phải nhấp vào tab View All để xem tất cả các Category. Chỉ cần chọn Category bạn muốn thêm vào menu, sau đó nhấp chọn vào 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">
Hình 4.1. Thêm Categories vào menu
Các Categories sẽ hiển thị dưới dạng các mục menu con của bạn, bạn có thể kéo thả chúng vào từng vị trí mà bạn muốn.&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">
Hình 4.2. Sắp xếp các Category phụ cho Blog&nbsp;
5. Thêm Custom link vào menu Navigation trong WordPress&nbsp;
Ngoài các Categories và Page, WordPress cũng giúp bạn dễ dàng thêm các liên kết tùy chỉnh vào menu của mình. Ví du: cửa hàng trực tuyến hoặc các trang web khác mà bạn có.&nbsp;
Bạn sẽ cần sử dụng tab Custom Links trên giao diện Menu. Chỉ cần thêm liên kết cùng với văn bản bạn muốn sử dụng trong menu của mình.&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">
Hình 5.1. Sử dụng Custom link liên kết đến trang khác &nbsp;&nbsp;
6. Chỉnh sửa hoặc xóa một mục menu trong Menu Navigation&nbsp;
Khi bạn thêm các Page hoặc Categories vào Menu navigation tùy chỉnh của mình, WordPress sẽ sử dụng tiêu đề trang hoặc tên của Category làm văn bản liên kết, bạn có thể thay đổi điều này bất cứ khi nào bạn muốn.&nbsp;
Bất kỳ mục menu nào cũng có thể được chỉnh sửa bằng cách nhấp vào chiều mũi tên hướng xuống bên cạnh nó.&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">
Hình 6.1. Chỉnh sủa menu navigation trong WordPress &nbsp;&nbsp;
Bạn có thể thay đổi tên của mục menu tại đây và bạn cũng có thể nhấp vào Remove để xóa toàn bộ liên kết ra khỏi menu của mình. Nếu bạn đang gặp khó khăn với giao diện kéo thả ta cũng có thể di chuyển mục menu bằng cách nhấp vào liên kết Move thích hợp.&nbsp;
Cuối cùng thì blog đến đây là hết rồi. Chúc các bạn thực hành thành công. Hẹn các bạn vào blog tiếp theo. Xin chào và hẹn gặp lại!!!<div id="md2html-converted" style="display:none"></div>

Để tạo một trang website hoàn chỉnh, sinh động và trải nghiệm tốt nhất tới người dùng thì Menu không thể thiếu trong một trang website. Blog này giới thiệu tổng quan về Menu và cách tạo Menu trong WordPress Dashboard.

Hướng dẫn tạo menu trong WordPress Dashboard

Chào mừng mọi người đã quay lại với serie học gì chia sẻ nấy và mình là Tuyền. Hôm trước, mình có chia sẻ một ít kiến thức về Interceptor Axios mà mình tìm hiểu được. Tiếp tục, chuỗi seri này thì hôm nay mình sẽ chia sẻ về các thư viện và ngôn ngữ mà mình đã học được và dùng nó trong một dự án mà mình được tham gia.&nbsp;Như các bạn đã biết việc làm slide ảnh và hoạt động tốt việc dùng HTML, CSS để viết nên thì nó rất là cất công. Nhận thấy điều đó rất tốn thời gian và công sức cho nên đã có rất nhiều thư viện ra đời và&nbsp; hỗ trợ cho việc này, phải kể đến các thư viện: Owl Carousel, Slider, Slick, Swiper,... Mình từng dùng thư viện Swiper cho một project của &nbsp;mình và mình nhận thấy rằng nó đem lại hiệu quả rất tốt cho việc tạo slide, cách dùng cũng rất đơn giản, không cần cài đặt nhiều. Để cài đặt và sử dụng nó chúng ta cần: Swiper slider là một thư viện hỗ trợ chức năng thu phóng hình ảnh, chạy slider trên web khá hay và đơn giản. Cài đặt:<pre><code class="language-html">- Sử dụng NPM:
$ npm install swiper
- Sử dụng 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>Cú pháp cơ bản:&nbsp; Thêm đoạn mã vào HTML&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;!-- Nếu cần thêm phân trang --&gt;
 &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
 &lt;!-- Nếu chúng ta cần thêm các nút điều hướng --&gt;
 &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
 &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
 &lt;!-- Nếu chúng ta cần thanh cuộn --&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; Cuối cùng, chúng ta cần khởi tạo JS:<pre><code class="language-javascript">// Thêm thư viện Swiper
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';
const swiper = new Swiper('.swiper', {
 // Các parameters
 direction: 'vertical',
 loop: true,
 // Nếu chúng ta cần phân trang
 pagination: {
 el: '.swiper-pagination',
 },
 // Các nút điều hướng
 navigation: {
 nextEl: '.swiper-button-next',
 prevEl: '.swiper-button-prev',
 },
 // Cần thanh cuộn
 scrollbar: {
 el: '.swiper-scrollbar',
 },
});</code></pre>Các thuộc tính custom của Navigation: nextEL: String Chuỗi CSS selector hoặc phần tử HTML sẽ hoạt động như nút “next” sau khi click vào nóprevEL: String Chuỗi CSS selector hoặc phần tử HTML sẽ hoạt động như nút “prev” sau khi click vào nóCác thuộc tính custom của Pagination: el: String Chuỗi CSS selector hoặc phần tử HTML có phân trang và các loại phân trang: “bullets”, “fraction”, “progressbar” hoặc “custom”. Chúng ta cũng có thể chỉnh sửa thuộc tính mặc địch của navigation hoặc pagination bằng cách can thiệp trực tiếp vào class chung của chúng hoặc thêm class khác để cấu hình chúng lại.&nbsp;&nbsp;<pre><code class="language-html">//HTML
 &lt;!-- Thêm class chung navigation --&gt;
 &lt;div class="swiper-button-prev navigation"&gt;&lt;/div&gt;
 &lt;div class="swiper-button-next navigation"&gt;&lt;/div&gt;
 &lt;!-- Thêm class chung pagination --&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>Ngoài ra chúng ta có thể thêm các Parameters tùy chọn tùy theo mục đích mà ta cần sử dụng:<pre><code class="language-javascript"> // Cho slide trượt tự động sau 3s
autoplay: {
 delay: 3000
},
//Mặc định cho 2 slide ảnh trong 1 khung và khoảng cách cho 2 slide là 12px
slidesPerView: 2,
spaceBetween: 12,
// Tạo điểm ngắt ở từng màn hình cho slide
breakpoints: {
 768: { slidesPerView: 3 }, // 768: sẽ có 3 ảnh được hiển thị
 1024: { slidesPerView: 4 } // 1024: sẽ có 4 ảnh được hiển thị
},</code></pre>Link code demo:&nbsp; https://codepen.io/GreencrisMessi/pen/WNywGyV *Chú ý: đối với việc nhập 1 ảnh mà không muốn hiển thị các nút điều hướng hay phân trang:<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 Phần mở rộng sử dụng thư viện swiper vào trong Modal (Bootstrap) để tạo popup về slide ảnh: - Link tham khảo modal trong Bootstrap: <a href="https://getbootstrap.com/docs/5.2/components/modal/">https://getbootstrap.com/docs/5.2/components/modal/</a> - Tạo một Modal đơn giản:&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;!-- Nút kích hoạt để mở 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;
 //Ở phần body chúng ta có thể thêm đoạn code slide để xem ảnh hiển thị
 &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;!-- Nếu cần thêm phân trang --&gt;
 &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
 &lt;!-- Nếu chúng ta cần thêm các nút điều hướng --&gt;
 &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
 &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
 &lt;!-- Nếu chúng ta cần thanh cuộn --&gt;
 &lt;div class="swiper-scrollbar"&gt;&lt;/div&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>Chúng ta, có thể thêm slide ở bất cứ đâu trong modal (header, body, footer). Nhưng mình khuyên các bạn nên để vào phần body để dễ quản lý và kiểm soát code của mình tốt hơn. Tương tự như cách thêm code HTML, CSS, JS chúng ta cũng viết các file để chạy. Link code demo:&nbsp; <a href="https://codepen.io/GreencrisMessi/pen/OJEzWmN">https://codepen.io/GreencrisMessi/pen/OJEzWmN</a> Đây là toàn bộ kiến thức mình học và làm được về Swiper trong dự án của mình. Cảm ơn các bạn đã đọc tới đây! Hẹn gặp các bạn ở serie chia sẻ tiếp theo nhé!!! &nbsp;&nbsp;

Swiper slider là một thư viện hỗ trợ chức năng thu phóng hình ảnh, chạy slider trên web khá hay và đơn giản.

Làm slide ảnh đơn giản với Swiper

Với sự hỗ trợ đắc lực đến từ công nghệ trong nhóm Amazon S3, chính là S3 Bucket đây. Chúng ta đã có thể tạo ra cho mình không chỉ một mà còn nhiều hệ thống lưu trữ dữ liệu, hình ảnh, tài liệu cho các website khác nhau. Ưu điểm của dịch vụ này là không những không giới hạn về mức dung lượng lưu trữ, mà còn cho phép ta dùng bao nhiêu dung lượng thì trả bấy nhiêu chi phí cho dịch vụ này. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng dịch vụ này với thư viện frontend nổi tiếng là Next.JS và React Hook Form để upload hình ảnh lên server.<h2>1. Giới thiệu sơ lược về các công nghệ trong bài:</h2><h3>Amazon S3 Bucket:&nbsp;</h3>Amazon S3 Bucket là một dịch vụ lưu trữ dữ liệu tương tự như các dịch vụ đám mây phổ biến là Google Drive, Dropbox,… Tuy nhiên không giống các dịch vụ lưu trữ đám mây dành cho cá nhân hay doanh nghiệp như trên. Mà Amazon S3 Bucket chủ yếu hướng đến các dịch vụ web, các dịch vụ hỗ trợ Deployment như Cloudform, Lambda, Github Action,… Do đó S3 Bucket sẽ cung cấp cho khách hàng một kho lưu trữ với các tính năng ưu việt như tốc độ truy cập dữ liệu cực kì nhanh, khả năng mở rộng dung lượng không bị giới hạn, phù hợp cho các website chuyên về marketting và du lịch với khối lượng hình ảnh, video ngày một gia tăng là một ví dụ điển hình cho thấy sức mạnh của Amazon S3 Bucket.<h3>Next.JS:&nbsp;</h3>Next.js là một frame-work front-end được xây dựng dựa trên React. Giúp chúng ta xây dựng website có tốc độ tải trang nhanh chóng, đồng thời hỗ trợ SEO cực kì tốt để mà đem lại hiệu quả về kinh tế và quảng bá website. Hơn nữa Next.JS kế thừa toàn bộ công nghệ của React, nên các lập trình viên front-end sẽ dễ dàng làm quen và tiếp cận hơn.<h3>React Hook Form.</h3>Một thư viện độc đáo, giúp bạn đơn giản hóa các thao tác thường thấy khi lập trình các tính năng liên quan đến form nhập liệu văn bản như: Kiểm tra dữ liệu đầu vào của từng ô nhập liệu, xử lý dữ liệu khi khách hàng hoàn tất việc điền form nhập liệu.<h2>2. Khởi tạo một S3 Bucket để làm nơi lưu trữ hình ảnh:</h2>Chuẩn bị một tài khoản Amazon Web Service.&nbsp;Truy cập trang web <a href="https://s3.console.aws.amazon.com/s3/buckets ">https://s3.console.aws.amazon.com/s3/buckets&nbsp;</a> để vào trang quản lý của S3 Bucket.&nbsp;Bấm vào nút “Create Bucket” màu cam.Đặt tên bucket, chọn khu vực của máy chủ mà website chính của bạn có máy chủ được đặt gần nhất &nbsp;tại mục AWS Region.Bỏ chọn Block all public access tại mục Block Public Access settings for this bucket.Tại mục Turning off block all public access might result in this bucket and the objects within becoming public. Ta nhấn vào checkbox để xác nhận bỏ cấu hình Block all public access&nbsp;.&nbsp;Kéo xuống cuối trang và nhấn vào “Create Bucket” để tiến hành tạo S3 Bucket.Sau khi tạo thành công, ta nhấn vào tên của S3 bucket vừa tạo để vào giao diện quản lý như hình dưới đây.<figure class="image"><img></figure><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_bcab256de2.png"></figure>Để Website có thể đọc và ghi dữ liệu lên S3 bucket này, ta cần cấu hình CORS như sau:Các bạn nhấn vào tab Permissions và tìm đến mục Cross-origin resource sharing (CORS)Nhấn edit và paste đoạn code dưới đây vào ô nhập liệu:<pre><code class="language-plaintext">[
 {
 "AllowedHeaders": [
 "*"
 ],
 "AllowedMethods": [
 "HEAD",
 "GET",
 "PUT",
 "POST",
 "DELETE"
 ],
 "AllowedOrigins": [
 "*"
 ],
 "ExposeHeaders": [
 "ETag"
 ]
 }
]</code></pre> Tiếp theo ta cấu hình Object Ownership như sau với cấu hình như sau:<img class="image_resized" style="width:72.79%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_016509be0a.png"><h2>3. Cấu hình các key để Web app tương tác với S3 Bucket:</h2>Sau khi khởi tạo S3 Bucket và cấu hình CORS. Web application vẫn chưa có khả năng truy cập để upload tệp tin lên S3 Bucket. Vì sao?. Vì cấu hình bảo mật của Amazon Web Service rất chặt chẽ để mà có thể ngăn chặn các hành vi truy cập dữ liệu trái phép từ bên ngoài. Bởi vì vậy chúng ta cần tạo không chỉ một mà nhiều chìa khóa bảo mật khác nhau để có thể sử dụng được dịch vụ này.Để làm được điều đó, ta cần truy cập bảng điều khiển User của IAM qua đường link sau:<a href="https://console.aws.amazon.com/iam/home#/users">https://console.aws.amazon.com/iam/home#/users</a>Click chuột vào Add User.Tại mục Set user details. Ta nhập username vào ô nhập liệu User name*Tại mục Select AWS access type. Tích chọn checkbox Access key - Programmatic access và nhấn nút Next Permissions.Tại mục Add user to group. Ta chọn &nbsp;Attach existing policies directly, và chọn Policy AdministratorAccess. Sau đó nhấn nút Next: Tags để sang bước tiếp theoTại mục Add tags (optional). Ta nhấn Next: Review và cuối cùng là nhấn nút Create User để hoàn tất.Màn hình Success hiện ra. Các bạn sẽ bấm nút Download .csv để lưu lại Access key ID và Secret access key.<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b8da395d9e.png"></figure><h2>4. Cấu hình dự án Next.JS và React Hook Form:</h2>Tiếp theo chúng ta sẽ setup một project Next.JS template để thực hiện công việc upload ảnh. Tham khảo liên kết dưới đây sẽ hướng dẫn bạn tạo dự án Next.JS: <a href="https://nextjs.org/docs/api-reference/create-next-app">https://nextjs.org/docs/api-reference/create-next-app</a>Cài đặt các thư viện cần thiết:&nbsp;<pre><code class="language-plaintext">yarn add @aws-sdk/client-s3 aws-sdk react-hook-form</code></pre>Tạo file .env với các biến môi trường sau:<pre><code class="language-plaintext">NEXT_PUBLIC_AWS_ACCESS_KEY_ID=
NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY=
NEXT_PUBLIC_AWS_BUCKET_NAME=
NEXT_PUBLIC_AWS_REGION=</code></pre>Trong đó <code>NEXT_PUBLIC_AWS_ACCESS_KEY_ID</code> và <code>NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY</code> ta sẽ lấy được 2 tham số này từ tệp tin .csv ở cuối bước 3.Đối với <code>NEXT_PUBLIC_AWS_REGION</code> nó chính là mã của khu vực máy chủ Amazon Web Service, nơi mà S3 Bucket của chúng ta được đặt. nó chính là cụm từ cuối cùng của AWS Region.Nhìn theo hình dưới đây ta sẽ thấy: <code>NEXT_PUBLIC_AWS_REGION=</code><code>ap-southeast-1</code><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_be326eecd9.png">&nbsp;Sau khi thiết lập đầy đủ biến môi trường ta sẽ tiến hành tạo một trang rỗng để cài đặt code upload ảnh:pages/s3/index.tsx<pre><code class="language-javascript">/* eslint-disable @next/next/no-img-element */
import aws from 'aws-sdk';
import {ManagedUpload, PutObjectRequest} from 'aws-sdk/clients/s3';
import Image from 'next/image';
import React, {useEffect, useState} from 'react';
import {useForm} from 'react-hook-form';

aws.config.update({
 accessKeyId: process.env.NEXT_PUBLIC_AWS_ACCESS_KEY_ID,
 secretAccessKey: process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY,
 region: process.env.NEXT_PUBLIC_AWS_REGION
});

const s3 = new aws.S3();

type FormValues = {
 image: File[];
};

export default function UploadImage() {
 const [imgSRC, setImgSRC] = useState('');

 const {
 register,
 handleSubmit,
 formState: {errors}
 } = useForm&lt;FormValues&gt;();
 const onSubmit = handleSubmit(data =&gt; {
 const {name} = data.image[0];
 const imageFile = data.image[0];

 const s3ObjectRequest: PutObjectRequest = {
 Bucket: process.env.NEXT_PUBLIC_AWS_BUCKET_NAME!,
 Body: imageFile,
 Key: `data/${name}`,
 ACL: 'public-read'
 };

 s3.upload(s3ObjectRequest, function (err: Error, response: ManagedUpload.SendData) {
 if (err) {
 console.log(err);
 }
 if (response) {
 console.log('Link image to save in database: ', response.Location);
 setImgSRC(response.Location);
 }
 });
 });

 return (
 &lt;form onSubmit={onSubmit}&gt;
 &lt;input {...register('image', {required: true})} type='file' /&gt;
 {errors?.image &amp;&amp; &lt;p&gt;Image bắt buộc thêm&lt;/p&gt;}

 &lt;input type='submit' /&gt;
 &lt;img src={imgSRC} alt={'S3 Picture'} /&gt;
 &lt;/form&gt;
 );
}
</code></pre>

Với sự hỗ trợ đắc lực đến từ công nghệ trong nhóm Amazon S3, chính là S3 Bucket đây. Chúng ta đã có thể tạo ra cho mình không chỉ một mà còn nhiều hệ thống lưu trữ dữ liệu, hình ảnh, tài liệu cho các website khác nhau. Ưu điểm của dịch vụ này là không những không giới hạn về mức dung lượng lưu trữ, mà còn cho phép ta dùng bao nhiêu dung lượng thì trả bấy nhiêu chi phí cho dịch vụ này. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng dịch vụ này với thư viện frontend nổi tiếng là Next.JS và React Hook Form

Upload ảnh với Amazon S3 Bucket và Next.JS với React Hook Form

Các bạn tìm hiểu thêm về TypeScript tại đây: <a href="https://www.typescriptlang.org/">JavaScript With Syntax For Types.</a> và <a href="https://vi.wikipedia.org/wiki/TypeScript">TypeScript</a>Cài đặt:<pre><code class="language-plaintext">yarn add -D ts-loader typescript @babel/preset-typescript</code></pre>Tạo tệp <code>babel.config.json</code> với nội dung dưới:<pre><code class="language-plaintext">{
 "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}</code></pre>Tạo tệp <code>tsconfig.json</code> với nội dung sau:<pre><code class="language-plaintext">{
 "compilerOptions": {
 "target": "es5",
 "module": "esnext",
 "moduleResolution": "node",
 "typeRoots": ["@types"],
 "lib": ["ES5", "ES6", "ESNext", "DOM", "DOM.Iterable"],
 "jsx": "react",
 "allowJs": true,
 "checkJs": false,
 "skipLibCheck": true,
 "noImplicitAny": true,
 "noImplicitThis": true,
 "strict": true,
 "strictNullChecks": false,
 "strictFunctionTypes": true,
 "esModuleInterop": true,
 "isolatedModules": true,
 "resolveJsonModule": true,
 "preserveConstEnums": true,
 "allowSyntheticDefaultImports": true,
 "forceConsistentCasingInFileNames": true,
 "removeComments": true,
 "sourceMap": true,
 "paths": {
 "@/*": ["./src/*"]
 },
 "rootDir": "./",
 "baseUrl": ".",
 "outDir": "./dist/"
 },
 "include": ["./src"],
 "exclude": ["node_modules", "./dist", "./test", "**/*.spec.ts"]
}
</code></pre>Cấu hình trong <code>webpack.config.js</code><pre><code class="language-javascript">module.exports = {
 ...
 module: {
 rules: [
 {
 test: /\\.(ts|tsx)?$/,
 use: 'ts-loader',
 exclude: /node_modules/
 },
 ]
 },
 resolve: {
 extensions: [".ts", ".tsx", ".js", ".jsx", ".scss"]
 },
};</code></pre>Đã cấu hình xong TypeScript. Mình sẽ hướng dẫn các bạn sử dụng ở các bài sau.-Hết-

TypeScript là ngôn ngữ lập trình hướng đối tượng được phát triển bởi Microsoft. TypeScript là ngôn ngữ nguồn mở thường dùng để xây dựng các ứng dụng web quy mô lớn.

Tìm hiểu Webpack để xây dựng HTML tĩnh - Phần 7 (TypeScript)

Lazy Loading là một tính năng Webpack hỗ trợ sẵn, chúng ta chỉ cần khai báo và sử dụng đúng cú pháp là được. Tính năng này dùng để tối ưu tốc độ tải trang.Ở bài này mình sẽ hướng dẫn các bạn làm demo về chart.Yêu cầu:Click vào button Load Chart thì chart mới được load và render.Cài đặt:<pre><code class="language-plaintext">yarn add chart.js
</code></pre>Sửa code module contact như sau:index.js<pre><code class="language-plaintext">import "bootstrap/scss/bootstrap.scss";

import 'Partials/main-menu';

import "./style.scss";

class PageContact {
 constructor() {
 console.log("Page:: Contact");

 this.listeners();
 }

 listeners() {
 this.btnLoadChart = document.querySelector(".btn-load-chart");

 this.btnLoadChart.addEventListener("click", () =&gt; {
 this.loadChart();
 });
 }

 async loadChart() {
 const chartJs = import(/* webpackChunkName: "vendor.chartjs" */ "chart.js");

 // Sau khi tải xong thư viện chart.js sẽ vẽ chart
 Promise.all([chartJs]).then((module) =&gt; {
 console.log("ChartJs Loaded");

 const Chart = module[0].Chart;
 Chart.register(...module[0].registerables);

 const ctx = document.getElementById("my-chart").getContext("2d");
 new Chart(ctx, {
 type: "doughnut",
 data: {
 labels: ["Red", "Blue", "Yellow"],
 datasets: [
 {
 label: "My First Dataset",
 data: [300, 50, 100],
 backgroundColor: [
 "rgb(255, 99, 132)",
 "rgb(54, 162, 235)",
 "rgb(255, 205, 86)",
 ],
 hoverOffset: 4,
 },
 ],
 },
 });
 });
 }
}

new PageContact();
</code></pre>view.njk<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;Contact&lt;/title&gt;
 &lt;/head&gt;
 &lt;body class="page-contact"&gt;
 {% include 'src/partials/main-menu/view.njk' %}
 &lt;div class="container"&gt;
 &lt;h1&gt;Contact&lt;/h1&gt;
 &lt;button class="btn btn-primary btn-load-chart"&gt;Load Chart&lt;/button&gt;
 &lt;canvas id="my-chart"&gt;&lt;/canvas&gt;
 &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>style.scssChạy lệnh <code>yarn start</code> để xem kết quả.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/tuts_lazy_loading_3f3ae9bc5e.gif" alt="tuts-lazy-loading.gif">Bây giờ bạn mở thư mục <code>dist/scripts</code> sẽ thấy một file JS với tên <code>vendor.chartjs.js</code>.-Hết-

Lazy Loading là một kỹ thuật tối ưu tải trang. Đó là chỉ load tài nguyên liên quan khi cần.

Tìm hiểu Webpack để xây dựng HTML tĩnh - Phần 6 (Lazy Loading)

Bài này mình sẽ hướng dẫn các bạn tách code dùng chung và dùng riêng. Cụ thể hơn là chúng ta sẽ phân chia code thành 3 dạng khác nhau:<ol><li>Code thư viện (Các thư viện bên thứ 3 mà bạn nhúng vào website như jQuery, lodash, swiper…)</li><li>Code do chính bạn viết và được sử dụng ở tất cả các trang.</li><li>Code do chính bạn viết nhưng chỉ sử dụng ở một trang cụ thể.</li></ol>Dựa vào yêu cầu trên chúng ta cấu hình cho Webpack bằng cách nào đó sẽ tạo ra các file scripts như sau:vendor.js Nhiệm vụ của nó là gom tất cả các thư viện bên thứ 3 được cài vào (mục 1).common.js Nhiệm vụ của nó là gom tất cả code bạn viết và được sử dụng ở tất cả các trang ( mục 2).[name].js (home.js, about.js, contact.js) Nhiệm vụ của nó là chỉ chứa code liên quan đến chính nó ( mục 3).<h3>Cài đặt framework/libs</h3>Ở ví dụ này mình sẽ cài và sử dụng Bootstrap.<pre><code class="language-plaintext">yarn add bootstrap @popperjs/core</code></pre>Nhúng bootstrap lần lượt vào 3 trang Home, About, Contact.<figure class="table"><table><tbody><tr><td><h3>src/pages/home/index.js</h3></td></tr><tr><td><pre><code class="language-javascript">import "bootstrap/scss/bootstrap.scss";
import "./style.scss";

class PageHome {
 constructor() {
 console.log("Page:: Home");
 }
}

new PageHome(); </code></pre></td></tr><tr><td><h3>src/pages/about/index.js</h3></td></tr><tr><td><pre><code class="language-javascript">import "bootstrap/scss/bootstrap.scss";
import "./style.scss";

class PageAbout {
 constructor() {
 console.log("Page:: About");
 }
}

new PageAbout();</code></pre></td></tr><tr><td><h4>src/pages/contact/index.js</h4></td></tr><tr><td><pre><code class="language-javascript">import "bootstrap/scss/bootstrap.scss";
import "./style.scss";

class PageContact {
 constructor() {
 console.log("Page:: Contact");
 }
}

new PageContact();</code></pre></td></tr></tbody></table></figure>Thử yarn start và xem code tạo ra như thế nào.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/bootstrap_fa75d83bbb.png" alt="bootstrap.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_bootstrap_fa75d83bbb.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_bootstrap_fa75d83bbb.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_bootstrap_fa75d83bbb.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_bootstrap_fa75d83bbb.png 1000w," sizes="100vw">Như bạn có thể thấy là bootstrap sẽ được nhúng vào 3 file css ⛔. Đây không phải là cách hay. Nếu website sử dụng nhiều thư viện khác nữa thì tệp css, js sẽ nhanh chóng bị phình kích thước. Không tối ưu.Cấu hình trong <code>webpack.config.js</code><pre><code class="language-javascript">module.exports = {
 ...
 optimization: {
 splitChunks: {
 chunks: "initial",
 minSize: 0,
 cacheGroups: {
 vendor: {
 // Những thư viện đến từ thư mục /node_modules/ hoặc /vendors/ sẽ được gom thành vendor.js
 test: /[\\/]node_modules[\\/]|[\\/]vendors[\\/]/,
 name: "vendor",
 minChunks: 1,
 priority: -10,
 reuseExistingChunk: true,
 },
 common: {
 name: "common",
 minChunks: 2, // Những file được nhúng và sử dụng ở ít nhất 2 nơi thì sẽ gom thành common.js
 priority: -20,
 reuseExistingChunk: true,
 },
 },
 },
 },
 ...
};</code></pre>Bây giờ thì gọi yarn start và kiểm tra lại kết quả.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/tuts_code_splitting_2_8e25cd8463.png" alt="tuts-code-splitting-2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_tuts_code_splitting_2_8e25cd8463.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_tuts_code_splitting_2_8e25cd8463.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_tuts_code_splitting_2_8e25cd8463.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_tuts_code_splitting_2_8e25cd8463.png 1000w," sizes="100vw">Code được tạo ra đã đáp ứng đúng theo ý muốn.Nhưng đó mới chỉ là cho file <code>vendor</code> chúng ta cần phải kiểm tra cho <code>common</code> nữa. Các bạn cần phải viết thêm vài dòng để kiểm tra.Tạo một thư mục với cấu trúc sau:<pre><code class="language-plaintext">├── src
│ ├── partials
│ │ ├── main-menu
│ │ │ ├── index.js
│ │ │ ├── style.scss
│ │ │ ├── view.njk</code></pre>Viết code cho main-menu<pre><code class="language-javascript">// index.js
import "./style.scss";

class PartialMainMenu {
 constructor() {
 console.log("Partial:: Main Menu");
 }
}

new PartialMainMenu();</code></pre><pre><code class="language-javascript">// styles.scss
.main-menu {
 a {
 color: white;
 text-decoration: none;
 &amp;:hover {
 color:#b6bf4e;
 }
 }
}</code></pre><pre><code class="language-html">&lt;!-- view.njk --&gt;
&lt;header class="main-menu p-3 text-bg-dark"&gt;
 &lt;div class="container"&gt;
 &lt;div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"&gt;
 &lt;a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"&gt;
 &lt;svg class="bi me-2" width="40" height="32" viewBox="0 0 118 94" role="img" aria-label="Bootstrap"&gt;
 &lt;path fill="#fff" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"&gt;&lt;/path&gt;
 &lt;/svg&gt;
 &lt;/a&gt;
 &lt;ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"&gt;
 &lt;li&gt;
 &lt;a href="/" class="nav-link px-2 text-white"&gt;Home&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="/about.html" class="nav-link px-2 text-white"&gt;About&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="/contact.html" class="nav-link px-2 text-white"&gt;Contact&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search"&gt;
 &lt;input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search"&gt;
 &lt;/form&gt;
 &lt;div class="text-end"&gt;
 &lt;button type="button" class="btn btn-outline-light me-2"&gt;Login&lt;/button&gt;
 &lt;button type="button" class="btn btn-warning"&gt;Sign-up&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/header&gt;</code></pre>Nhúng main-menu vào trang home và about.<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Home&lt;/title&gt;
 &lt;/head&gt;
 &lt;body class="page-home"&gt;
 {% include 'src/partials/main-menu/view.njk' %}
 &lt;h1&gt;Home page&lt;/h1&gt;
 &lt;img src="images/github.png" alt="" /&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre><pre><code class="language-javascript">import "bootstrap/scss/bootstrap.scss";

import "../../partials/main-menu";

...</code></pre><pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;About&lt;/title&gt;
 &lt;/head&gt;
 &lt;body class="page-about"&gt;
 {% include 'src/partials/main-menu/view.njk' %}
 &lt;h1&gt;About&lt;/h1&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre><pre><code class="language-javascript">import "bootstrap/scss/bootstrap.scss";

import "../../partials/main-menu";

...</code></pre><pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Contact&lt;/title&gt;
 &lt;/head&gt;
 &lt;body class="page-about"&gt;
 {% include 'src/partials/main-menu/view.njk' %}
 &lt;h1&gt;Contact&lt;/h1&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre><pre><code class="language-javascript">import "bootstrap/scss/bootstrap.scss";

import "../../partials/main-menu";

...</code></pre>Chạy lệnh yarn start để xem kết quả.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/tuts_code_splitting_3_928a331bec.png" alt="tuts-code-splitting-3.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_tuts_code_splitting_3_928a331bec.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_tuts_code_splitting_3_928a331bec.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_tuts_code_splitting_3_928a331bec.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_tuts_code_splitting_3_928a331bec.png 1000w," sizes="100vw">-Hết -&nbsp;&nbsp;&nbsp;

Bài này mình sẽ tìm hiểu về Code Splitting để chia tách code cho theo khuôn mẫu vendor.js, common.js, [page].js.

Tìm hiểu Webpack để xây dựng HTML tĩnh - Phần 5 (Code Splitting)

<h2 style="text-align:center;">Một chiếc blog hay ho về WP_Query</h2>Bố cục bài viết:1. WP_Query là gì?2. Sử dụng WP_Query để lọc bằng các custom field3. Hướng dẫn viết một bộ lọc đơn giản1. WP_Query là gì?WP_Query là một class trong WordPress dùng để hỗ trợ lập trình viên viết các lệnh truy vấn của mình để lấy các bài post phù hợp với yêu cầu của dự án.Bằng cách thiết lập các tham số được hỗ trợ sẵn thay vì viết các các câu truy vấn dài thì ta có thể dựa vào class WP_Query làm cho mọi thứ trở nên đơn giản hơn.Ví dụ: Muốn lấy các bài viết có post_type là blog<pre><code class="language-php">$args = array (
 'post_type' = 'blog'
 )
$query = new WP_Query($args);
</code></pre>2. Sử dụng WP_Query để lọc bằng các custom fieldLàm thế nào để sử dụng WPQuery truy vấn đến các custom field. Trong WordPress các custom field mà ta tạo ra sẽ được gọi là các “metakey”Ví dụ: lọc các bài post thuộc product và có màu không phải là màu xanh nước biển.<pre><code class="language-php">$args = array(
 'post_type' = 'product',
 'meta_query' = array(
 array(
 'key' = 'color',
 'value' = 'blue',
 'compare' = 'NOT LIKE',
 ),
 ),
);
$query = new WP_Query($args);
</code></pre>Vậy đối với các custom field lồng nhau thì ta xử lý như thế nào?Mình sẽ tổ chức custom field như sau:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/custom_filed_jgp_184c79f30c.png" alt="custom-filed.jgp.png">Ở đây mình sẽ dùng hàm getpostmeta để xem các custom field lồng nhau như thế nào. Các tham số của hàm <code>get_post_meta</code>:<pre><code class="language-php">get_post_meta( int $post_id, string $key = '', bool $single = false )
</code></pre><pre><code class="language-php">$blog_id = get_the_ID();
$meta_key = get_post_meta($blog_id);
var_dump($meta_key);
</code></pre><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/get_post_meta_8feb41d4fd.png" alt="get_post_meta.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_get_post_meta_8feb41d4fd.png 169w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_get_post_meta_8feb41d4fd.png 500w," sizes="100vw">Bạn sẽ nhìn thấy các custom field lồng nhau ví dụ age sẽ là authorinfomation0age, và ta có thế sử dụng authorinfomation0age để viết câu truy vấn, nhưng ta sẽ không rõ các con số đó xuất hiện như thế nào. Vì vậy ta cần phải viết các dòng sau để khônng phải lo lắng về các con số đó nữa.file custom-posts-where.php<pre><code class="language-php">add_filter('posts_where', 'author_infomation_where');

function author_infomation_where($where)
{
 $where = str_replace("meta_key = 'author_infomation_$", "meta_key LIKE 'author_infomation_%", $where);
 return $where;
}
</code></pre>Các dòng trên sẽ thay thế các con số thành dấu $ và bạn chỉ cần gõ authorinfomation$_age để truy vấn đến custom field age.3. Hướng dẫn viết một bộ lọc đơn giảnSau khi đọc xong mục 1, 2 chắc bạn cũng đã có một cái hình dùng về cách viết một truy vấn bằng cách sử dụng class WP_Query của WordPress.Mình sẽ hướng dẫn bạn viết một bộ lọc đơn giản, ở đây mình sẽ lọc theo tiêu chí độ tuổi của các tác giả.Mình sẽ tạo ra một trang (page) để chứa các bài post.file template-blog.php<pre><code class="language-php">&lt;?php
$args = array(
 'post_type' =&gt; array('blog'),
 'order_by' =&gt; 'date',
 'order' =&gt; 'asc',
);

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

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

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

wp_reset_postdata();
?&gt;
</code></pre>Giao diện:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/giao_dien_9f9d22baa2.png" alt="giao-dien.png">Mình sẽ viết một file blog-filter.js để xử lý việt gửi dữ liệu lên sever:<pre><code class="language-javascript">var BlogFilter = (function () {
 var $module;
 function init() {
 //...
 }
 function preLoadPage() {
 //...
 }
 function eventListeners() {
 //...
 }
 function actionFilter() {
 //...
 }
 function findFilter() {
 //...
 }
 function getDataFromFilter(filter) {
 //...
 }
 function callAjax(age) {
 //...
 }
 return { init: init };
})();

</code></pre>Đây sẽ là file xử lý việc gửi lên dữ liệu lên server, mình sẽ giải thích qua cho các bạn những hàm trên làm gì.<ul><li style="text-align:justify;">init(): chịu trách nhiệm khởi tạo các hàm cần thiết.</li><li style="text-align:justify;">preLoadPage(): xử lý các việc trước khi load page.</li><li style="text-align:justify;">eventListeners(): thêm xử kiện cho các ô check.</li><li style="text-align:justify;">findFilter: tìm các bộ lọc có thể có.</li><li style="text-align:justify;">getDataFromFilter: lấy dữ liệu từ bộ lọc</li><li style="text-align:justify;">calljAjax: như tên của hàm thì công việc là để gọi ajax.</li></ul><pre><code class="language-javascript">function init() {
 preLoadPage();
 eventListeners();
}

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

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

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

 callAjax(age);
}

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

 return { age: ageFilter };
}

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

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

 return { age };
}

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

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

 jQuery(".display-blogs").html(res);
 },
 });
}
</code></pre>Cuối cùng là:<pre><code class="language-javascript">jQuery(document).ready(function () {
 BlogFilter.init();
});
</code></pre>Tiếp theo mình sẽ viết một file .php để xử lý việc nhận dữ liệu và lọc:<pre><code class="language-php">&lt;?php
add_action('wp_ajax_filter_projects', 'filter_projects');
add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');

function filter_projects()
{
 //...
}

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

function age_filter($age = null)
{
 //...
}
</code></pre><ul><li style="text-align:justify;">filter_projects: chịu trách nhiệm xử nhận dữ liệu và lọc.</li><li style="text-align:justify;">chooose_query: dùng để chọn các loại truy vấn.</li><li style="text-align:justify;">age_filter($age = null): dùng để truy vấn theo độ tuổi.</li></ul><pre><code class="language-php">&lt;?php
function filter_projects()
{
 $age = $_POST['age'];

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

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

 $query = new WP_Query($args);

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

 echo $response;
 exit;
}

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

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

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

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

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

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

 return $age_query;
}

</code></pre>Cuối cùng các bạn đăng ký các file này trong function.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/inc/custom-assets.php";
require_once get_template_directory() . "/inc/custom-post-type.php";
require_once get_template_directory() . "/inc/custom-posts-where.php";
require_once get_template_directory() . "/inc/blog-filter.php";

add_filter("use_block_editor_for_post", "__return_false"); // use old editor</code></pre>Kết quả đạt được:&nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ket_qua_e8133dbde1.png" alt="ket-qua.png">Đây là cách tổ chức của mình, các bạn có thể dựa vào đây để tuỳ chỉnh theo ý mình hoặc có thể tổ chức tốt hơn. Các tài liệu mình đã tham khảo:<a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/reference/classes/wp_query/">WP_Query</a><a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/reference/classes/wp_query/#custom-field-post-meta-parameters">custom-field-post-meta-parameters</a><a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/reference/functions/getpostmeta/">getpostmeta</a><a target="_blank" rel="noopener noreferrer" href="https://gist.github.com/thachpham92/d57b18cf02e3550acdb5">thachpham</a>

WP_Query là một class trong WordPress dùng để hỗ trợ lập trình viên viết các lệnh truy vấn của mình để lấy các bài post phù hợp với yêu cầu của dự án. 

Một chiếc blog hay ho về WP_Query

Làm website thì chắc chắn không thể thiếu các thành phần như hình ảnh, video , audio, font chữ. Bài này mình sẽ hướng dẫn các bạn cài đặt và cấu hình để hỗ trợ việc đó đồng thời cấu hình thêm một số plugin để hỗ trợ bạn viết code nhanh hơn.
<h3 id="cit">Cài đặt</h3>
<pre><code>yarn add -D copy-webpack-plugin
</code></pre>
Tạo cấu trúc thư mục như sau:
<pre><code>── src
│ ├── assets
│ │ ├── fonts // Chứa font chữ
│ │ ├── images // Chứa hình ảnh
│ │ ├── media // Chứa video, audio, subtitle...
</code></pre>
Cấu hình trong <code>webpack.config.js</code>.
<pre><code class="javascript language-javascript">...
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
 ...
 module: {
 rules: [
 {
 test: /\.(png|jpe?g|gif,svg)$/i,
 type: 'asset/resource',
 generator: {
 filename: 'images/[name][ext]'
 }
 },
 {
 test: /\.(woff|woff2|ttf)$/,
 type: 'asset/resource',
 generator: {
 filename: 'fonts/[name][ext]'
 }
 },
 {
 test: /\.(mp3|ogg|mp4|webm|vtt)$/i,
 type: 'asset/resource',
 generator: {
 filename: 'media/[name][ext]'
 }
 }
 ],
 },
 plugins: [
 ...
 // Plugin này có chức năng khi bạn thêm 1 tệp bất kỳ vào 1 trong 3 thư mục fonts, images, media.
 // Webpack sẽ tự nhận diện và copy nó vào thư mục dist.
 new CopyPlugin({
 patterns: [
 { from: 'src/assets/fonts', to: 'fonts', noErrorOnMissing: true },
 { from: 'src/assets/images', to: 'images', noErrorOnMissing: true },
 { from: 'src/assets/media', to: 'media', noErrorOnMissing: true }
 ]
 }),
 ]
 ...
};
</code></pre>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/github_70e60ef7a7.png" alt="github.png" />
Bây giờ hãy thử thêm hình trên vào <code>src/assets/images/</code> và sửa file <code>src/pages/home/view.njk</code> như bên dưới:
<pre><code class="html language-html">&lt;body class="page-home"&gt;
 &lt;h1&gt;Home&lt;/h1&gt;
 &lt;img src="images/github.png" alt="Github"&gt;
&lt;/body&gt;
</code></pre>
Chạy lệnh yarn start để xem kết quả.
<h3 id="browsersync">Browsersync</h3>
Trong quá trình viết code bạn không thể cứ Viết code → Lưu → Chuyển sang trình duyệt và click Refresh. Bạn muốn tự động hóa quá trình này. Rất may mắn là có một thư viện có thể hỗ trợ việc này. Đó là Browsersync.
<h4 id="cit-1">Cài đặt</h4>
<pre><code>yarn add -D browser-sync-webpack-plugin browser-sync
</code></pre>
Cấu hình trong <code>webpack.config.js</code>
<pre><code class="javascript language-javascript">const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
 ...
 plugins: [
 ...
 new BrowserSyncPlugin({
 host: '0.0.0.0',
 port: 3000,
 open: true,
 notify: false,
 server: {
 baseDir: ['dist']
 }
 }),
 ],
 ...
};
</code></pre>
Sửa lại kịch bản <code>start</code> trong <code>package.json</code>
<pre><code class="json language-json">"scripts": {
 "start": "webpack --watch",
 ...
 },
</code></pre>
Chạy lệnh <code>yarn start</code> để xem kết quả.
Lúc này sau khi Webpack biên dịch xong sẽ tự động mở trình duyệt lên cho bạn với địa chỉ là: http://localhost:3000/. Hãy thử thay đổi nội dung để xem kết quả.<div id="md2html-converted" style="display:none"></div>

Ở bài trước mình đã hướng dẫn các bạn tạo ra 3 trang đơn giản gồm: Home, About, Contact. Ở bài này mình sẽ tiếp tục hướng dẫn các bạn cấu hình Webpack để hỗ trợ các tệp hình ảnh, fonts...

Tìm hiểu Webpack để xây dựng HTML tĩnh - Phần 4

Xin chào!! Mình là Hưng đến từ ABC Software Solutions Company.&nbsp;
Áp dụng quy trình thiết kế UI-UX trong thiết kế website/app là một phương pháp hiệu quả để đảm bảo rằng bạn tạo ra sản phẩm có trải nghiệm tốt mang lại thành công cho doanh nghiệp. Vậy quy trình thiết kế UI-UX chuẩn là như thế nào? Và làm thế nào quy trình UX giúp tạo ra trải nghiệm tốt?&nbsp;
Hãy cùng mình tìm hiểu các bước của quy trình thiết kế UI-UX trong bài viết này để hiểu tại sao nó lại quan trọng và được các doanh nghiệp tin tưởng.&nbsp;
<h2>Phân tích và lên ý tưởng <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ideas_ab0559af00.png" alt="ideas.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_ideas_ab0559af00.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_ideas_ab0559af00.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_ideas_ab0559af00.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_ideas_ab0559af00.png 1000w," sizes="100vw"></h2>
&nbsp;Mình tin rằng bất kỳ lĩnh vực hay ngành nghề hay công việc nào thì quá trình phân tích là không thể thiếu. Đặc biệt với hệ thống thông tin thì việc phân tích kỹ lưỡng số liệu, thói quen, tập quán… của người dùng và tạo ra một bản kế hoạch chi tiết cho dự án là vô cùng quan trọng. Điều này giúp Designer lẫn Developers nắm chắc được mục đích, nghiệp vụ, tính năng của phần mềm hay tính năng cần phát triển, từ đó tránh các sai sót, hiểu lầm không đáng có dẫn đến phải sửa chữa rất thời gian và công sức. Tại bước này Designer cần làm việc với BA (Business Analyst) khá nhiều. Lời khuyên cho các bạn là nên khảo sát các bên liên quan với doanh nghiệp, tìm hiểu và khảo sát những người dùng khác nhau thông qua User Personas, User Stories, Use cases và User flows.
&nbsp;Sau khi đã có bản kế hoạch chi tiết, nhiệm vụ của UI-UX Designer là lên ý tưởng thông qua việc tham khảo trang lưu trữ thiết kế như Behance, Dribble, Pinterest Freepik… Từ đó ấn định một cách nhất quán cho bản thiết kế các yếu tố như màu sắc, typography, hay phong cách thiết kế phù hợp nhất với người dùng sản phẩm.
<h2>&nbsp;Vẽ Wireframes <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/wireframe_06d4916366.png" alt="wireframe.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_wireframe_06d4916366.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_wireframe_06d4916366.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_wireframe_06d4916366.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_wireframe_06d4916366.png 1000w," sizes="100vw"></h2>Tạo Wrireframes là bước lên kế hoạch chi tiết cho mỗi trang, với các chỉ báo trực quan như đường, lưới và hộp cho biết loại nội dung, hình ảnh và các phần tử khác sẽ dẫn dắt người dùng đi đến đâu. Wrireframe chỉ là bản kế hoạch, không phải là bản thiết kế cuối cùng, nó có thể có độ phân giải cao hoặc có thể có độ phân giải thấp tùy theo công cụ bạn sử dụng, điều này không quan trọng, quan trọng là wireframe cung cấp cho đội ngũ của bạn những thứ cần tuân theo khi bắt đầu thiết kế website chi tiết. Wrireframe hể hiện một cách rõ ràng và đơn giản việc tổ chức bố cục trang web. Wireframing cũng phục vụ một chức năng quan trọng khác và đó là giao tiếp. Cách làm phổ thông là đợi đến khi có bản thiết kế web chi tiết rồi mới thảo luận, điều chỉnh sửa. Nhưng cách làm như vậy khó đánh giá sự hiệu quả của bản thiết kế và có nguy cơ đập đi làm lại từ đầu, dẫn đến tốn thời gian, công sức.&nbsp;Do đó, cách làm trong thiết kế UX là xây dựng wireframes nhanh chóng để tất cả mọi người trong team có một bản thiết kế thô để cùng thảo luận, thống nhất các thứ cần thiết trước khi đi thiết kế chính thức. Từ đó, biết cách phối hợp nhịp nhàng để thúc đẩy dự án hoàn thành.<h2>&nbsp;Design chi tiết <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/design_890f8c98a8.png" alt="design.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_design_890f8c98a8.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_design_890f8c98a8.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_design_890f8c98a8.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_design_890f8c98a8.png 1000w," sizes="100vw"></h2>Khác với Wireframe thì tại bước này chúng ta cần chú trọng vào UI. Bước này sẽ tạo ra một giao diện hoàn chỉnh cho phần mềm,website của chúng ta, việc tạo ra giao diện người dùng tốt hay không cũng sẽ ảnh hưởng tới trải nghiệm của người dùng (UX). Vậy nên mới nói là UI/UX luôn song hành và không thể tách rời. Tại bước này các component cũng sẽ được thiết kế đầy đủ các trạng thái. Ví dụ như button ở wireframe thì chỉ cần thể hiện dưới dạng 1 hình chữ nhật là được nhưng ở bản design chi tiết thì 1 button ngoài việc bao gồm các chỉ số như màu sắc, viền, độ bo góc, đổ bóng… thì nó còn được thể hiện dưới dạng button khi hover, button khi click, button sau khi click, button khi bị vô hiệu hóa…&nbsp;<h2>Prototyping và Mockups <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/prototyping_215d8d6cac.png" alt="prototyping.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_prototyping_215d8d6cac.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_prototyping_215d8d6cac.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_prototyping_215d8d6cac.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_prototyping_215d8d6cac.png 1000w," sizes="100vw"></h2>Một số người bị lẫn lộn giữa đâu là wireframe, mockup hoặc prototype (nguyên mẫu). Nhưng tất cả đều có thể có các mức chức năng khác nhau.&nbsp;- Mockups: Là một bước trên wireframe, mockups lấy những gì đã được thiết lập với wireframe và trình bày trên bản thiết kế đồ họa, có thể có một số chức năng như điều hướng,sử dụng để xem thiết kế sẽ hiển thị như thế nào.&nbsp;- Prototype: Hoạt động như một phiên bản thiết kế gần như được hiện thực hóa đầy đủ, điều hướng, tương tác và sử dụng tất cả các hình ảnh và khối nội dung chính. Không nhất thiết phải có mọi thành phần phải có đủ thứ để người dùng tương tác và trải nghiệm.Prototype gần nhất với bản thiết kế web hoàn thiện, nó cho phép bạn nhận được phản hồi cần thiết và thực hiện các chỉnh sửa và chỉnh sửa trước khi chuyển sang code. Với Prototype, bạn vẫn có 2 loại: Tập trung vào chức năng hơn thiết kế và loại còn lại là thiết kế cho gần với phiên bản cuối cùng nhất.&nbsp;<h2>Kiểm tra <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/check_e81164c636.png" alt="check.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_check_e81164c636.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_check_e81164c636.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_check_e81164c636.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_check_e81164c636.png 1000w," sizes="100vw"></h2>&nbsp;Sau khi bạn có một nguyên mẫu, đã đến lúc thực hiện kiểm tra khả năng sử dụng. Điều này có nghĩa là bạn cần đưa cho một người chưa bao giờ nhìn thấy thiết kế trước đây và để họ thoải mái trải nghiệm nó, kiểm tra trực tiếp có thể cho phép bạn xem các phản ứng rõ ràng và chân thực khi mọi người trải nghiệm website. Hoặc các yêu cầu họ tìm kiếm đáp án cho các câu hỏi phổ biến người dùng có thể sẽ làm với website của bạn. Để từ đó quan sát xem mọi thứ còn có chỗ nào chưa ổn, xem mức độ dễ dàng trong việc điều hướng nội dung. Tất cả các dữ liệu trên sẽ cung cấp cho bạn thông tin về mức độ hiệu quả của thiết kế và các điểm cần thay đổi.&nbsp;<h2>Bàn giao <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hand_over_0574b3b3b5.png" alt="hand over.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hand_over_0574b3b3b5.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hand_over_0574b3b3b5.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hand_over_0574b3b3b5.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hand_over_0574b3b3b5.png 1000w," sizes="100vw"></h2>Bước này là bàn giao bản thiết kế hoàn chỉnh sang cho đội Front-End Dev sao cho phải đảm bảo được Dev đã hiểu đúng, hiểu đủ về toàn bộ bản thiết kế. Bước này cực kỳ quan trọng vì nó sẽ quyết định xem sản phẩm thực tế có thực sự như mong muốn so với bản thiết kế UI/UX hay không. Tất nhiên khả năng của Front-end dev là điều cần được nhắc đến nhưng cũng nhiều trường hợp họ làm sai do chưa đọc hiểu đúng bản thiết kế. Giao đoạn này cần phối hợp nhịp nhàng giữa coder và designer.&nbsp;Mong bài viết của mình sẽ giúp ích được phần nào cho các bạn, Hiện tại thì toàn bộ các bước để tạo ra 1 bản thiết kế Product như nêu ở trên, chúng ta đều có thể sử dụng công cụ Figma – Một công cụ thiết kế UI/UI chuyên nghiệp mà còn miễn phí nữa.&nbsp;Một lần nữa mình là Hưng, cảm ơn các bạn đã quan tâm đến Blog của mình!!!<div id="md2html-converted" style="display:none"></div>

Để tạo ra một bản thiết kế UI-UX thì đòi hỏi các UI-UX Designer dành nhiều thời gian nghiên cứu và tuân thủ các quy trình, tiêu chuẩn nhất định. Sau đây là các bước cơ bản giúp bạn có thể tạo ra sản phẩm UI/UX hoàn chỉnh.

Một bản thiết kế UI-UX hoàn chỉnh cần qua các bước nào?

Xin chào các bạn!!
Lại là mình Quốc Hưng UI-UX Designer đến từ ABC Software Solutions Company.
Hôm nay là một ngày trời rất đẹp, làm mình nhớ lại khoảnh khắc ngày đầu tiên mình bước chân vào học UI-UX với bao bỡ ngỡ. Nên nhân dịp này mình muốn chia sẻ cho các bạn mẩu chuyện về quá trình học UI-UX của mình và những khó khăn mình đã gặp phải, mong rằng mọi người sẽ thích câu chuyện nhỏ này của mình.
<h2 id="tisaolichnuiux">Tại sao lại chọn 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" />
Với một người vừa mới tốt nghiệp đại học chuyên ngành công nghệ thông tin như mình tại sao lại chọn công việc thiết kế UI-UX? Yup, Đơn giản mình muốn thử sức với một lĩnh vực mới có liên quan đến lập trình. Mình rất may mắn khi được giới thiệu và làm việc tại <a href="https://abcsoftwarecompany.com/">ABC Software Solutions</a>, tại đây mình đã có khoảng thời gian vô cùng tuyệt vời khi được trải nghiệm cảm giác vừa học việc vừa làm dự án thực tế. Nhờ vậy khả năng design của mình dần cải thiện hơn rất nhiều.
UI-UX giúp mình gắn kết với mọi người trong team, ngoài ra mình còn có thể tạo ra những thiết kế thể hiện sự sáng tạo của cá nhân mình. Hầu hết các ngành nghề mảng công nghệ là kỹ thuật, sẽ làm các công việc lặp đi lặp lại mỗi ngày, chẳng hạn như coding. Vì mình không thích sự khô khan như thế nên UI-UX là “chân ái” với mình, tuy nhiên các thiết kế sáng tạo của mình vẫn phải đảm bảo tuân thủ các quy tắc thiết kế và lập trình.
<h2 id="nhngkhkhn">Những khó khăn</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/difficult_e497e545da.png" alt="difficult.png" />
Đầu tiên mình cứ nghĩ UI-UX là một nhưng hoàn toàn không phải như vậy đâu nha. UI-UX là hai phạm trù không thể tách rời, nhưng lại chính là những khái niệm hoàn toàn riêng biệt. Thật bất khả thi nếu như làm việc dựa trên trải nghiệm của người dùng mà không xem xét đến giao diện phù hợp với thẩm mỹ. Ngược lại, nếu giao diện rất bắt mắt nhưng lại xây dựng nội dung khó xem thì cũng là một bất lợi.
UI-UX tuy dễ mà khó? Khi mới bắt đầu thiết kế mình chỉ nghĩ làm sao cho giao diện đẹp và vừa mắt mình và mình cũng không tuân thủ một quy tắc thiết kế nào cả. Đó là điều rất sai lầm rất nghiêm trọng, mình đã mắc phải những lỗi vô cùng cơ bản do tính hấp tấp của mình, mình đã nhận được rất nhiều feedback từ các anh chị trong công ty, lúc đó mình cảm thấy vô cùng hoang mang, cảm giác như sản phẩm của mình không được đón nhận, lúc này mình mới vỡ lẽ ra là UI-UX không đơn giản như mình nghĩ.
Sau lần bị ngã đòn đó mình mới bắt đầu cẩn thận lại tìm hiểu về UI-UX một cách thận trọng hơn, mình dành nhiều thời gian để tham gia khóa học trên Udemy và đi tham khảo tập clone các thiết kế khác trên các cộng đồng UI-UX. Mình may mắn khi được chị Chi (Senior UI-UX Designer) đã luôn hỗ trợ mình từ xa, cụ thể đánh giá những thiết kế của mình, chỉ mình những tool, plugin… Chị còn là người feedback cho những sản phẩm sau này của mình, giúp mình tiến bộ lên. Mình rất biết ơn và vô cùng quý mến chị.
<h2 id="kinhnghimmnhtriqua">Kinh nghiệm mình đã trải qua</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/experience_going_through_e1279d9686.png" alt="experience going through.png" />
Trong quá trình làm việc với mọi người trong team, mình đã học hỏi được rất nhiều. Khi mới bắt đầu tất nhiên sẽ có một chút khó khăn, đơn giản như ví dụ như khi mà mình làm xong phần design, đưa cho coder thì bạn coder hay comment là design như thế này khó quá, không thể làm được và yêu cầu thay đổi design để code dễ hơn. Tuy nhiên, không phải cứ dễ code hơn là hay hơn. Vì bạn coder không hiểu về UI-UX nên không hiểu vì sao design nó cần như thế, gây ảnh hưởng đến sản phẩm cuối cùng. Đó cũng là một trải nghiệm đối với mình, bây giờ mình đã khắc phục được nhược điểm này, công việc trở nên nhịp nhàng hơn và sản phẩm ra lò vô cùng hoàn hảo.
Dưới đây là một số kinh nghiệm mà mình đã rút được sau quá trình học UI-UX của mình.
<ul>
<li>Nắm vững các kiến thức cơ bản nhất: Khi bắt đầu cái gì cũng nên đi từ dễ đến khó, cơ bản đến nâng cao, có một lộ trình phải rõ ràng. Thiết kế UI-UX là một nghề mới mẻ và đầy ắp cơ hội cho những ai muốn dấn thân vào. Chính vì lẽ đó, việc nắm bắt và sở hữu những kỹ năng, phẩm chất thiết yếu cho công việc này sẽ giúp ta dựng xây nền móng vững vàng, từ đó, nhanh chóng phát triển thành một UI/UX Designer chuyên nghiệp.</li>
<li>Liên tục cập nhật kiến thức mới về UI-UX: UI-UX là một nghề cần tới sự cập nhật liên tục. Học các kỹ năng mới và nâng cao kỹ thuật là điều cần thiết để theo kịp thị trường. Các nguồn học đó có thể đến từ sách vở, hội nhóm cộng đồng, các khóa học…</li>
<li>Khả năng tự học của bản thân: UI-UX rất cần sự đầu tư tìm hiểu, nên cần phân bố thời gian một cách chặt chẽ và hợp lý. Ngoài ra khi mà mình có một thiết kế mới nào đó có thể chia sẻ lên các nhóm học UI-UX để những người có kinh nghiệm feedback trực tiếp giúp ta tiến bộ nhanh hơn.</li>
<li>Đặt cái tâm vào sản phẩm: Mỗi sản phẩm mình làm ra nên xem nó như đứa con của mình và dành cho nó những điều tốt đẹp nhất. Đâu có ai sinh con ra là xong đâu? Mình phải chăm chút từ lúc mang thai cho nó khỏe mạnh. Nó ra đời vẫn phải chăm sóc để nó nhìn sạch sẽ, cư xử với người khác lễ phép. Cũng giống như từ khâu code đã phải clean, làm ra sản phẩm phải có UI tốt, UX tốt, ít bug, ít crash.</li>
<li>Tuân thủ nguyên tắc thiết kế UX-/UX: Khi thiết kế quan trọng nhất là tập trung vào người dùng, ngoài ra thiết kế phải đảm bảo sự nhất quán, đáp ứng bối cảnh, nội dung.</li>
<li>Kỹ năng mềm: Kỹ năng mềm là một yếu tố quan trọng giúp ta trở thành designer giỏi. Cụ thể ta phải có khả năng giao tiếp, tư duy sáng tạo. Phải biết phản ứng linh hoạt, thấu hiểu người dùng. Yếu tố ngoại ngữ chính là phần quan trọng nhất, tốt ngoại ngữ ta sẽ có nhiều cơ hội và khả năng thăng tiến trong công việc.</li>
</ul>
Thật ra thì mình thấy công việc nào cũng sẽ có những khó khăn, khi mà mình vượt qua khó khăn đó rồi thì mình sẽ nhận những thành quả vô cùng xứng đáng. Tính đến hiện tại UI-UX vẫn là thứ khiến đam mê và gắn bó nhất. Giờ mình chỉ muốn làm tốt công việc mình có, chấp nhận cả những phần việc sẽ không như mình mong, và tận hưởng khoảnh khắc mà mình có thể quên hết hòa vào công việc.
Chỉ thế, rồi buổi tối, cuối tuần đóng máy đi chill, không cần bận tâm nhiều quá, cuộc sống giữ ở mức cân bằng, rồi tìm thêm nhiều cách khác nhau làm mình hạnh phúc, chỉ thế thôi. ^^
“Có công mài sắt có ngày nên kim”. Hãy chăm chỉ rèn luyện và trang bị cho mình những kỹ năng, tố chất cần thiết để vững bước hơn trên con đường phát triển sự nghiệp của một UI-UX Designer, bạn nhé!
Mình là Hưng, cảm ơn các bạn đã quan tâm đến Blog của mình !!! <div id="md2html-converted" style="display:none"></div>

Mình muốn chia sẻ cho các bạn mẩu chuyện nhỏ về quá trình học UI-UX của mình và những khó khăn mình đã gặp phải.

Chia sẻ câu chuyện học UI-UX của mình

<h3>Tạo thư mục và tệp</h3>Trong thư mục dự án webpack-multiple-pages bạn tạo thư mục với cấu trúc sau:<pre><code class="language-plaintext">── node_modules
── src
│ ├── pages
│ │ ├── home
│ │ │ ├── index.js
│ │ │ ├── style.scss
│ │ │ ├── view.njk
│ │ ├── about
│ │ │ ├── index.js
│ │ │ ├── style.scss
│ │ │ ├── view.njk
│ │ ├── contact
│ │ │ ├── index.js
│ │ │ ├── style.scss
│ │ │ ├── view.njk
── package.json
── webpack.config.js
── yarn.lock
</code></pre><h3>Cấu hình</h3>Cấu hình 3 trang trong webpack.config.js<pre><code class="language-javascript">const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 ...
 entry: {
 home: './src/pages/home/index.js',
 about: './src/pages/about/index.js',
 contact: './src/pages/contact/index.js'
 },
 output: {
 path: path.resolve(__dirname, 'dist'), // Kết quả sẽ được xuất ra thư mục này.
 filename: 'scripts/[name].js' // Bạn hãy nhìn lên entry. Dòng code này sẽ tạo ra các file js tương ứng theo tên cho từng trang.
 },
 plugins: [
 new HtmlWebpackPlugin({
 template: './src/pages/home/view.njk',
 filename: 'index.html',
 chunks: ['home'] // Bạn hãy nhìn lên entry. Dòng code này có nghĩa là nó sẽ nhúng chỉ chèn script của home vào trang home. Trang about, contact hoạt động tương tự.
 }),
 new HtmlWebpackPlugin({
 template: './src/pages/about/view.njk',
 filename: 'about.html',
 chunks: ['about']
 }),
 new HtmlWebpackPlugin({
 template: './src/pages/contact/view.njk',
 filename: 'contact.html',
 chunks: ['contact']
 }),
 new MiniCssExtractPlugin({
 filename: 'styles/[name].css', // Dòng code này sẽ tạo ra các file css tương ứng cho từng trang.
 chunkFilename: 'styles/[id].css',
 ignoreOrder: false
 })
 ],
 ...
};
</code></pre><h3>Tạo kịch bản</h3>Mở tệp <code>package.json</code> và thêm các dòng sau:<pre><code class="language-javascript">{
 ...
 "scripts": {
 "start": "webpack",
 "build": "webpack --mode=production"
 },
 ...
}
</code></pre><h3>Viết code</h3><h4>Trang Home</h4><code>src/pages/home/index.js</code><pre><code class="language-javascript">import "./style.scss";

class PageHome {
 constructor() {
 console.log("Page:: Home");
 }
}

new PageHome();
</code></pre><code>src/pages/home/view.njk</code><pre><code class="language-html">&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
 &amp;lt;head&amp;gt;
 &amp;lt;meta charset="UTF-8" /&amp;gt;
 &amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&amp;gt;
 &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&amp;gt;
 &amp;lt;title&amp;gt;Home&amp;lt;/title&amp;gt;
 &amp;lt;/head&amp;gt;
 &amp;lt;body class="page-home"&amp;gt;
 &amp;lt;h1&amp;gt;Home&amp;lt;/h1&amp;gt;
 &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
</code></pre><code>src/pages/home/style.css</code><pre><code class="language-plaintext">.page-home {
 background-color: #fff;
}
</code></pre><h4>Trang About</h4><code>src/pages/about/index.js</code><pre><code class="language-javascript">import "./style.scss";

class PageAbout {
 constructor() {
 console.log("Page:: About");
 }
}

new PageAbout();
</code></pre><code>src/pages/about/view.njk</code><pre><code class="language-html">&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
 &amp;lt;head&amp;gt;
 &amp;lt;meta charset="UTF-8" /&amp;gt;
 &amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&amp;gt;
 &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&amp;gt;
 &amp;lt;title&amp;gt;About&amp;lt;/title&amp;gt;
 &amp;lt;/head&amp;gt;
 &amp;lt;body class="page-about"&amp;gt;
 &amp;lt;h1&amp;gt;About&amp;lt;/h1&amp;gt;
 &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
</code></pre><code>src/pages/about/style.css</code><pre><code class="language-plaintext">.page-about{
 background-color: #fff;
}
</code></pre><h4>Trang Contact</h4><code>src/pages/contact/index.js</code><pre><code class="language-javascript">import "./style.scss";

class PageContact {
 constructor() {
 console.log("Page:: Contact");
 }
}

new PageContact();
</code></pre><code>src/pages/contact/view.njk</code><pre><code class="language-html">&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
 &amp;lt;head&amp;gt;
 &amp;lt;meta charset="UTF-8" /&amp;gt;
 &amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&amp;gt;
 &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&amp;gt;
 &amp;lt;title&amp;gt;Contact&amp;lt;/title&amp;gt;
 &amp;lt;/head&amp;gt;
 &amp;lt;body class="page-contact"&amp;gt;
 &amp;lt;h1&amp;gt;Contact&amp;lt;/h1&amp;gt;
 &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
</code></pre><code>src/pages/contact/style.css</code><pre><code class="language-plaintext">.page-contact{
 background-color: #fff;
}
</code></pre><h3>Biên dịch</h3>Bây giờ bạn sẽ chạy kịch bản <code>start</code><pre><code class="language-plaintext">yarn start
</code></pre>Các bạn sẽ thấy sau khi Webpack chạy xong thì sẽ tạo ra cho mình một thư mục tên dist chứa code HTML, JS, CSS sau khi đã biên dịch với cấu trúc như sau:<pre><code class="language-plaintext">├── dist
│ ├── scripts
│ │ ├── about.js
│ │ ├── contact.js
│ │ ├── home.js
│ ├── styles
│ │ ├── about.css
│ │ ├── contact.css
│ │ ├── home.css
│ ├── about.html
│ ├── contact.html
│ ├── index.html
</code></pre>Hãy thử mở các file html để xem kết quả.

Ở bài trước mình đã giới thiệu cấu hình HTML, CSS, JAVASCRIPT. Bài này mình bắt đầu xây dựng các trang HTML.

Tìm hiểu Webpack để xây dựng HTML tĩnh - Phần 3

Website: <a target="_blank" rel="noopener noreferrer" href="https://pickonename.com/">https://pickonename.com/</a>Một website được tạo ra giúp bạn chọn ra một đáp án bằng cách nhập các lựa chọn và quay bánh xe ngẫu nhiên để quyết định một kết quả. Trong trò chơi này, bánh xe may mắn sẽ được chia thành các ô có thể điền tên, mỗi ô đại diện cho một vị trí trên bánh xe. Người dùng sẽ điền tất cả các tên vào các ô trên bánh xe, và sau đó quay bánh xe để xác định người chiến thắng.Pickonename được sử dụng để phân chia các phần tử một cách ngẫu nhiên, chẳng hạn như việc chia đội trong một trò chơi thể thao, hoặc để quyết định người chiến thắng trong một cuộc thi. Ngoài ra, trò chơi này còn được sử dụng để tạo ra các giải thưởng may mắn cho khách hàng hoặc nhân viên trong các chương trình khuyến mãi và quảng cáo.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_10_31_at_15_16_57_cd5e8aa92b.png" alt="Screenshot 2022-10-31 at 15.16.57.png"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_10_31_at_15_17_09_da8ca3ed4b.png" alt="Screenshot 2022-10-31 at 15.17.09.png"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_10_31_at_15_17_28_0f169a9bab.png" alt="Screenshot 2022-10-31 at 15.17.28.png">

Một website giúp bạn chọn ra một đáp án bằng cách nhập các lựa chọn và quay bánh xe ngẫu nhiên để quyết định một kết quả.

Website PICK ONE NAME

Website: <a target="_blank" rel="noopener noreferrer" href="https://todooy.com/">https://todooy.com/</a>Một nơi để quản lý danh sách công việc của bạn, với những trạng thái Backlog, To-do, In-process, In-review, In-QA, Done; chức năng assign; mức độ ưu tiên từ cao đến thấp. Bạn sẽ dễ dàng thao tác giúp quá trình làm việc được suông sẻ và hiệu quả hơn.<h2>1. Giao diện Đăng nhập&nbsp;</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Login_25512ad9b2.jpg" alt="Login.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Login_25512ad9b2.jpg 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Login_25512ad9b2.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Login_25512ad9b2.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Login_25512ad9b2.jpg 1000w," sizes="100vw">Bạn cần đăng nhập bằng email để lưu trữ các to-do list của bạn.<h2>2. Giao diện Lobby</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Home_page_38383620c2.jpg" alt="Home-page.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Home_page_38383620c2.jpg 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Home_page_38383620c2.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Home_page_38383620c2.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Home_page_38383620c2.jpg 1000w," sizes="100vw">My List bao gồm tất cả danh sách việc cần làm của bạn, vui lòng đăng nhập bằng email để lưu trữ danh sách của tôi.Bấm Create New List để tạo danh sách.<h2>3. Giao diện My list&nbsp;</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/My_List_2355df6e58.png" alt="My-List.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_My_List_2355df6e58.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_My_List_2355df6e58.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_My_List_2355df6e58.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_My_List_2355df6e58.png 1000w," sizes="100vw">Nhấp vào New List mới để tạo danh sách mới của bạn, bạn có thể chỉnh sửa chia sẻ và xóa nó.<h2>4. Giao diện My Task</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/My_task_4b850a0496.png" alt="My task.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_My_task_4b850a0496.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_My_task_4b850a0496.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_My_task_4b850a0496.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_My_task_4b850a0496.png 1000w," sizes="100vw">Hiển thị tất cả những task mà bạn được giao.<h2>5. Giao diện to-do list&nbsp;</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/list_task_391807df6f.jpg" alt="list-task.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_list_task_391807df6f.jpg 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_list_task_391807df6f.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_list_task_391807df6f.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_list_task_391807df6f.jpg 1000w," sizes="100vw">Cho phép tạo nhiều to-do, thêm/xóa/sửa/share to-do/list to-do.&nbsp;<h2>6. Giao diện to-do task chi tiết</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/detail_task_89c23ed731.jpg" alt="detail-task.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_detail_task_89c23ed731.jpg 234w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_detail_task_89c23ed731.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_detail_task_89c23ed731.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_detail_task_89c23ed731.jpg 1000w," sizes="100vw">Chi tiết bao gồm tiêu đề, mô tả, Trạng thái, Người được giao, Mức độ ưu tiên, Điểm câu chuyện, Ngày bắt đầu/Ngày đến hạn và nhận xét.*** Website đang được cập nhật thêm nhiều tính năng.&nbsp;

Một nơi để quản lý danh sách công việc của bạn, với những trạng thái Backlog, To-do, In-process, In-review, In-QA, Done; chức năng assign; mức độ ưu tiên từ cao đến thấp. Bạn sẽ dễ dàng thao tác giúp quá trình làm việc được suông sẻ và hiệu quả hơn.

Website Todooy

Trang web: https://voteuserstory.com/
Đây là website bỏ phiếu user story dựa trên cơ chế Agile Planning Poker, khuyến khích xây dựng và làm việc nhóm, cơ chế hoạt động giống như trò chơi giúp mọi thứ diễn ra theo chiều hướng tích cực và tránh những tranh cãi trong cuộc họp.
<h2 id="1giaodinngnhp">1. Giao diện Đăng nhập</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_09_30_at_15_19_18_24f3b830ea.png" alt="Screenshot 2022-09-30 at 15.19.18.png" />
<h2 id="2giaodintophngjoinphng">2. Giao diện Tạo phòng/Join phòng</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_09_30_at_16_24_18_8bf7f5e3cf.png" alt="Screenshot 2022-09-30 at 16.24.18.png" />
Nhấn tạo phòng hoặc nhập link/ID phòng mà người khác đã tạo.
<h2 id="3giaodinvoting">3. Giao diện Voting</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_09_30_at_16_33_12_0ea87552e0.png" alt="Screenshot 2022-09-30 at 16.33.12.png" />
Copy link hoặc ID phòng cho đồng nghiệp có thể cùng tham gia vote.
Tại đây host có thể hoàn tất vote bằng cách nhấn Complete.
<h2 id="4giaodinhonttvote">4. Giao diện hoàn tất vote</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_09_30_at_16_44_18_c28ec58940.png" alt="Screenshot 2022-09-30 at 16.44.18.png" />
Host sẽ có quyền tạo tiếp 1 story khác bằng cách nhấn Next Story.
***Website đang cập nhật thêm tính năng.<div id="md2html-converted" style="display:none"></div>

Đây là website bỏ phiếu user story dựa trên cơ chế Agile Planning Poker, khuyến khích xây dựng và làm việc nhóm, cơ chế hoạt động giống như trò chơi giúp mọi thứ diễn ra theo chiều hướng tích cực và tránh những tranh cãi trong cuộc họp.

Web

Categories

Liên hệ