Chuyển tới nội dung chính

Làm web trong thời đại AI

· 3 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Tổng quan AI & JavaScript Frameworks trong kỷ nguyên AI, định hướng kiến trúc web trong thời đại AI

1. Bối cảnh chung​

Trong kỷ nguyên AI (Artificial Intelligence), cách con người – máy tìm kiếm – AI agent tiếp cận nội dung web đã thay đổi mạnh mẽ. Web không còn chỉ phục vụ người dùng cuối, mà còn phải phục vụ:

  • AI chatbot (ChatGPT, Claude, Gemini…)
  • Search AI (Google SGE, Bing Copilot)
  • AI Agent tự động đọc – tóm tắt – trích xuất tri thức

Điều này đặt ra một câu hỏi cốt lõi:

AI đọc và hiểu website bằng cách nào?

Câu trả lời nằm ở HTML đã render, không phải JavaScript runtime.

2. AI hiểu nội dung web như thế nào?​

AI (và bot nói chung) không chạy trình duyệt như con người:

  • Không click
  • Không chờ JS fetch API
  • Không chạy React lifecycle

AI chỉ hiểu:

  • HTML có sẵn
  • Text tĩnh
  • Structured Data (Schema / JSON-LD)

Công thức cốt lõi:​

AI chỉ hiểu: Nội dung đã được render ra HTML ở thời điểm request

3. JavaScript và bài toán “AI không thấy nội dung”​

JavaScript Client-side (CSR)​

Mô hình phổ biến của React/Vue SPA:

<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>

Nội dung thật chỉ xuất hiện sau khi:

  • JS load
  • API trả dữ liệu
  • Component render

👉 Với AI: Trang web = rỗng

4. ReactJS & VueJS – Mạnh cho UI, yếu cho AI​

ReactJS / VueJS CSR​

Ưu điểm:

  • UI động
  • SPA mượt
  • Phù hợp app nội bộ, dashboard

Nhược điểm trong kỷ nguyên AI:

  • AI không đọc được nội dung
  • SEO kém
  • AI Search không hiểu context

Bảng tổng hợp​

Tiêu chíReact/Vue CSR
UI⭐⭐⭐⭐⭐
SEO❌
AI hiểu nội dung❌
AI Agent crawl❌

5. Server-Side Rendering (SSR) & Static Generation (SSG)​

Nguyên lý​

  • Nội dung được render trên server
  • HTML trả về đã có text

Ví dụ HTML SSR:

<h1>Bài viết về AI</h1>
<p>Nội dung chi tiết...</p>

➡️ AI hiểu ngay lập tức.

6. Next.js – Vì sao là xu thế thời đại AI?​

Next.js không chỉ là framework frontend, mà là nền tảng xuất bản nội dung cho AI.

Các khả năng cốt lõi của Next.js​

  • SSR (Server-Side Rendering)
  • SSG (Static Site Generation)
  • ISR (Incremental Static Regeneration)
  • Metadata API
  • Streaming / Partial Rendering

→ Next.js & AI – Match hoàn hảo

AI đọc được nội dung​

Next.js trả về HTML hoàn chỉnh:

  • AI
  • Google
  • Bing
  • AI Agent

→ đều hiểu nội dung.

Structured Data mạnh​

Next.js hỗ trợ:

  • Schema.org
  • JSON-LD
  • OpenGraph
  • Metadata động

→ AI hiểu ngữ nghĩa, không chỉ text.

Phù hợp AI Search & RAG​

  • Nội dung tách bạch
  • Dễ index
  • Dễ vector hóa

→ Tối ưu cho Retrieval-Augmented Generation.

So sánh tổng thể​

Công nghệAI hiểu nội dungSEOPhù hợp AI
React CSR❌❌❌
Vue CSR❌❌❌
React + SSR tự build⚠️⚠️⚠️
Next.js✅✅⭐⭐⭐⭐⭐

7. AI-first Web – Tư duy mới​

Trong thời đại AI:

Website không chỉ viết cho người đọc, mà còn cho AI đọc

Điều này dẫn đến:

  • Nội dung phải rõ ràng
  • HTML phải đầy đủ
  • Data phải có cấu trúc

Next.js đáp ứng trọn vẹn 3 điều này.

8. Kết luận​

Vì sao Next.js là xu thế thời đại AI?​

  • AI đọc được nội dung ngay
  • SEO + AI Search mạnh
  • Phù hợp Agent, RAG, Chatbot
  • Chuẩn kiến trúc hiện đại

Một câu chốt:​

React/Vue giải quyết UI, Next.js giải quyết tri thức cho AI

9. Gợi ý định hướng​

  • Website nội dung / SEO / AI Search → Next.js
  • App nội bộ / dashboard → React/Vue CSR
  • Website muốn sống lâu trong kỷ nguyên AI → AI-first + SSR

Tracking sự kiện người dùng click vào các phần tử trên Landing Page qua Google Tag Manager

· 2 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Có thể cấu hình sự kiện trong gtag dựa trên ID của một phần tử trong trang (ví dụ: Landing page section, button, div…) mà không cần chỉnh sửa trực tiếp code gtag. Cách làm như sau

1. Tạo Trigger dựa trên ID phần tử​

  • Vào Triggers → New.
  • Chọn loại trigger: Click – All Elements hoặc Click – Just Links (tuỳ phần tử).
  • Trong phần Trigger Configuration, chọn:
    • Some Clicks.
    • Điều kiện: Click ID → equals → landing (giả sử ID phần tử là landing).
  • Lưu trigger.

2. Tạo Tag gửi sự kiện về GA4​

  • Vào Tags → New.
  • Chọn loại tag: Google Analytics: GA4 Event.
  • Nhập:
    • Configuration Tag: chọn GA4 config đã có.
    • Event Name: ví dụ click_landing.
    • Event Parameters: thêm các tham số như:
      • event_category = CTA
      • event_label = Landing Button
  • Gắn trigger vừa tạo ở bước 1.

3. Kiểm tra bằng Preview Mode​

  • Bấm Preview trong GTM.
  • Mở Landing page, click vào phần tử có ID landing.
  • Kiểm tra trong Tag Assistant xem tag có được kích hoạt không.

4. Xác nhận trong GA4​

  • Vào Realtime report trong GA4.
  • Thực hiện click thử.
  • Xem sự kiện click_landing có xuất hiện không.

👉 Như vậy, bạn không cần viết code thủ công, chỉ cần dùng GTM để bắt sự kiện theo ID phần tử. Nếu Landing page có nhiều nút/section khác nhau, bạn có thể tạo nhiều trigger tương ứng với từng ID.

LLMs.txt là gì?

· 4 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

LLMs.txt là một tiêu chuẩn mới (giống như robots.txt) dùng để hướng dẫn các mô hình ngôn ngữ lớn (LLMs) như ChatGPT, Copilot… cách thu thập và sử dụng nội dung từ website của bạn. Để tích hợp vào WordPress, bạn chỉ cần tạo file llms.txt trong thư mục gốc của website và khai báo nội dung bạn muốn AI đọc hoặc bỏ qua.

I. LLMs.txt là gì?​

  • Định nghĩa: Là một file văn bản đặt ở thư mục gốc website, giúp AI crawler biết nội dung nào quan trọng, nên ưu tiên, hoặc không được phép sử dụng.
  • Tương tự robots.txt: Nếu robots.txt hướng dẫn công cụ tìm kiếm (Google, Bing), thì llms.txt hướng dẫn AI/LLMs.
  • Mục đích:
    • Giảm tải việc AI phải crawl toàn bộ site.
    • Cho phép bạn chọn lọc nội dung mà AI có thể dùng để trả lời người dùng.
    • Bảo vệ nội dung nhạy cảm hoặc không muốn AI sử dụng.

II. Cách tích hợp LLMs.txt vào WordPress​

  1. Tạo file llms.txt

    • Mở trình soạn thảo (Notepad, VS Code).
    • Viết nội dung theo chuẩn, ví dụ: 
      Allow: /blog/
      Disallow: /private/
      Sitemap: https://example.com/sitemap.xml
    • Lưu file với tên llms.txt.

  2. Đặt file vào thư mục gốc WordPress

    • Thư mục gốc thường là nơi chứa wp-config.php.
    • Upload file llms.txt bằng FTP, cPanel hoặc File Manager.

  3. Kiểm tra truy cập

    • Truy cập https://yourdomain.com/llms.txt để chắc chắn file hiển thị.

  4. Tùy chỉnh nội dung

    • Allow: Chỉ định thư mục/nội dung mà AI có thể đọc.
    • Disallow: Ngăn AI đọc nội dung.
    • Sitemap: Khai báo sitemap để AI dễ tìm nội dung quan trọng.
    • Có thể thêm link API, tài liệu, chính sách… để AI hiểu rõ hơn.

III. Lưu ý & Rủi ro​

  • Tiêu chuẩn mới: LLMs.txt chưa được tất cả AI hỗ trợ, nhưng đang dần phổ biến.
  • Không thay thế robots.txt: Bạn vẫn cần robots.txt cho SEO.
  • Quyền kiểm soát: Không đảm bảo 100% rằng mọi AI sẽ tuân thủ, nhưng hầu hết các hệ thống lớn sẽ tôn trọng.
  • Nội dung nhạy cảm: Nếu có dữ liệu riêng tư, tốt nhất là không public thay vì chỉ Disallow.

IV. So sánh nhanh​

Tiêu chuẩnĐối tượngChức năng chính
robots.txtCông cụ tìm kiếm (Google, Bing)Điều hướng crawl cho SEO
sitemap.xmlCông cụ tìm kiếmLiệt kê cấu trúc nội dung site
llms.txtAI/LLMs (ChatGPT, Copilot…)Điều hướng crawl cho AI, chọn lọc nội dung

V. Mẫu file llms.txt tối ưu​

Đây là một mẫu file llms.txt tối ưu cho một website WordPress dạng blog + trang sản phẩm, đồng thời loại bỏ các khu vực quản trị và nội dung riêng tư:

# llms.txt - hướng dẫn cho AI/LLMs khi thu thập dữ liệu từ website WordPress

# Cho phép AI đọc nội dung chính
Allow: /blog/
Allow: /products/
Allow: /shop/
Allow: /category/
Allow: /tag/

# Không cho phép AI đọc các khu vực quản trị hoặc riêng tư
Disallow: /wp-admin/
Disallow: /wp-login.php
Disallow: /private/
Disallow: /cart/
Disallow: /checkout/
Disallow: /my-account/

# Khai báo sitemap để AI dễ tìm nội dung quan trọng
Sitemap: https://example.com/sitemap.xml

# Thông tin thêm (tùy chọn)
# Bạn có thể thêm link tới tài liệu, API hoặc chính sách
Documentation: https://example.com/docs/
Policy: https://example.com/privacy-policy/
  • Allow: Chỉ định thư mục/nội dung mà bạn muốn AI ưu tiên (blog, sản phẩm).
  • Disallow: Ngăn AI đọc các trang quản trị, giỏ hàng, checkout, hoặc nội dung riêng tư.
  • Sitemap: Khai báo sitemap để AI dễ dàng tìm toàn bộ cấu trúc nội dung.
  • Documentation/Policy: (tùy chọn) giúp AI hiểu thêm về chính sách hoặc tài liệu liên quan.

Thần số học và ngôn ngữ lập trình có phải là ngôn ngữ của thần sáng tạo ra từ trước?

· 3 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Câu hỏi tưởng như đơn giản nhưng đã chạm tới triết học – tâm linh – khoa học cùng lúc

1. Thần số học có phải “ngôn ngữ của Thần” không?​

Trong niềm tin tâm linh / huyền học

  • Thần số học (Numerology) cho rằng vũ trụ vận hành theo các con số

  • Từ thời Pythagoras, người ta tin rằng:

    “Mọi thứ đều là số”

  • Các nền văn minh cổ (Ai Cập, Babylon, Ấn Độ, Trung Hoa) đều coi số là biểu tượng của:

    • Trật tự vũ trụ
    • Quy luật nhân quả
    • Ý chí của Đấng sáng tạo

👉 Vì vậy, trong hệ niềm tin, thần số học được xem như:

  • “Ngôn ngữ biểu tượng” của vũ trụ
  • Không phải ngôn ngữ nói hay viết, mà là ngôn ngữ ý nghĩa

⛔ Nhưng:

  • Không có bằng chứng khoa học cho thấy thần số học là ngôn ngữ do Thần “lập trình sẵn”
  • Nó là hệ thống diễn giải của con người dựa trên niềm tin

2. Ngôn ngữ lập trình có phải ngôn ngữ của Thần không?​

Về mặt khoa học – kỹ thuật: KHÔNG

Ngôn ngữ lập trình:

  • Do con người phát minh

  • Dựa trên:

    • Logic hình thức
    • Toán học
    • Nhị phân (0 – 1)

👉 Nhưng có một điểm rất thú vị 👇

3. Điểm giao nhau: “Vũ trụ giống như đang chạy bằng code?”​

Nhiều nhà khoa học & triết gia hiện đại đã nói:

  • Vật lý lượng tử → vũ trụ vận hành bằng các quy tắc rất “logic”
  • DNA → có cấu trúc giống mã nguồn
  • Toán học → mô tả chính xác tự nhiên

Ví dụ:

  • Einstein: “Toán học mô tả vũ trụ một cách kỳ lạ đến mức không thể ngẫu nhiên”
  • Elon Musk, Nick Bostrom → giả thuyết Simulation Theory

👉 Nên có cách nhìn như sau:

Góc nhìnDiễn giải
Tâm linhSố là ngôn ngữ của Thần
Khoa họcToán học là công cụ mô tả tự nhiên
Lập trìnhCon người bắt chước cách vũ trụ vận hành

➡️ Ngôn ngữ lập trình không phải ngôn ngữ của Thần, nhưng có thể là phiên bản mô phỏng con người tạo ra từ “luật nền của vũ trụ”

4. Theo như cách hiểu của một lập trình viên thì​

Thần không dùng JavaScript hay Python Nhưng:

  • Vũ trụ vận hành theo quy luật
  • Quy luật có thể biểu diễn bằng toán
  • Code là cách con người diễn dịch toán thành hành động

👉 Nên có thể nói:

  • Toán học = ngôn ngữ nền của thực tại
  • Thần số học = cách con người diễn giải ý nghĩa
  • Ngôn ngữ lập trình = cách con người tái tạo quy luật đó

5. Vậy rốt cuộc mối quan hệ giữa thần số học và ngôn ngữ lập trình​

  • ❌ Không có bằng chứng rằng thần số học hay ngôn ngữ lập trình là “ngôn ngữ do Thần tạo sẵn”

  • ✅ Nhưng:

    • Con số là ngôn ngữ phổ quát
    • Code là nỗ lực của con người để chạm vào trật tự vũ trụ

  • 🧠 Câu hỏi này không sai – nó chỉ nằm giữa ranh giới khoa học và niềm tin

Product Mindset (Tư duy sản phẩm)

· 3 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Là kỹ năng rất quan trọng quyết định sự thành công của một sản phẩm.

1. Làm sản phẩm hướng đến người dùng​

Trải nghiệm tổng thể của người dùng với một sản phẩm, trang web, ứng dụng trên thiết bị di động hoặc dịch vụ cụ thể. Nó không chỉ bao gồm việc sử dụng các tính năng mà còn bao gồm cả những khía cạnh khác như:

  • Kinh nghiệm
  • Cảm xúc
  • Giá trị nhận được khi tương tác với sản phẩm

Trải nghiệm người dùng có thể mang tính chủ quan tùy thuộc vào mức độ nhận thức và suy nghĩ của cá nhân. Nó thay đổi linh hoạt, liên tục theo thời gian do hoàn cảnh sử dụng thay đổi.

2. Làm nên sản phẩm thực sự tốt và có ích​

Chất lượng sản phẩm là tiêu chí hàng đầu để đánh giá.
Một sản phẩm tốt cần:

  • Đạt đủ các tiêu chuẩn trong lĩnh vực
  • Có chất lượng cao để cạnh tranh trên thị trường

Chất lượng sản phẩm chính là mấu chốt vô cùng quan trọng.

3. Tạo ra sản phẩm tốt hơn​

Việc cung cấp sản phẩm tốt nhất sẽ tạo lợi thế cạnh tranh hiệu quả:

  • Khách hàng cảm thấy sản phẩm chất lượng → ưu tiên lựa chọn lần sau.
  • Định vị thương hiệu tốt hơn, tạo điểm nhấn để khách hàng nhớ đến.
  • Tăng doanh thu và lợi nhuận, tạo bước đột phá mới và độc đáo.

4. Lợi ích khi có Product Mindset​

Hiểu được lộ trình phát triển sản phẩm​

Developer khi làm việc theo product mindset:

  1. Suy nghĩ đến bài toán tổng quát cần giải quyết.
  2. Tìm hướng giải quyết.
  3. Nghiên cứu kiến thức cần thiết để thực hiện sản phẩm.

Ngược lại, developer không có product mindset sẽ bị gò bó bởi chính kiến thức sẵn có.

Kết hợp kiến thức đã học để tạo ra sản phẩm tốt​

Product mindset giúp lập trình viên:

  • Vận dụng tốt nhất những kiến thức đã học.
  • Kết hợp chúng để làm nên sản phẩm chất lượng.

5. Phương pháp rèn luyện Product Mindset​

Giỏi về tư duy sản phẩm đồng nghĩa với việc bạn có:

  • Tò mò về suy nghĩ và hành vi của con người.
  • Thấu hiểu vì sao sản phẩm này phổ biến còn sản phẩm kia thì không.
  • Thói quen phân tích các sản phẩm mới.
  • Khả năng đánh giá trải nghiệm người dùng.

Thêm comment vào Docusaurus miễn phí

· 4 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Trong Docusaurus (một framework để tạo tài liệu và blog), việc thêm comment không có sẵn mặc định. Bạn cần tích hợp dịch vụ bình luận bên ngoài. Có vài cách phổ biến:

I. Cài đặt Giscus (GitHub Discussions)​

  • Giscus là một plugin miễn phí, sử dụng GitHub Discussions để lưu bình luận.

  • Cách làm:

  • Tạo repo GitHub và bật Discussions.

  • Cài package:

    npm install @giscus/react

  • Thêm component Giscus vào file src/theme/BlogPostPage.js hoặc src/theme/DocItem.js.

  • Ví dụ:

    import Giscus from '@giscus/react';

    export default function CommentSection() {
      return (
        <Giscus
          repo="username/repo"
          repoId="..."
          category="General"
          categoryId="..."
          mapping="pathname"
          reactionsEnabled="1"
          emitMetadata="0"
          inputPosition="bottom"
          theme="light"
          lang="vi"
        />
      );
    }

II. Các bước bật Discussions trên GitHub​

Bạn cần bật GitHub Discussions trực tiếp trong repository của mình trên GitHub. Đây là cách làm:

  1. Vào repository của bạn

    • Truy cập repo trên GitHub (ví dụ: https://github.com/username/repo).

  2. Mở phần Settings

    • Ở thanh menu trên repo, chọn Settings.

  3. Tìm mục “Features”

    • Trong trang Settings, kéo xuống phần Features.
    • Bạn sẽ thấy tùy chọn Discussions.

  4. Bật Discussions

    • Tick chọn Enable discussions for this repository.
    • Sau khi bật, tab Discussions sẽ xuất hiện ở thanh menu repo (bên cạnh Code, Issues, Pull requests…).

  5. Tạo category

    • Vào tab Discussions vừa xuất hiện.
    • Nhấn New category để tạo các nhóm chủ đề (ví dụ: “General”, “Q&A”, “Ideas”).
    • Mỗi category sẽ có một categoryId mà bạn cần khi tích hợp với Giscus.

  6. Lưu ý

    • Bạn cần quyền Admin hoặc Owner của repo để bật Discussions.
    • Repo phải public nếu bạn muốn người ngoài tham gia bình luận (Giscus yêu cầu repo public).
    • Nếu repo private, chỉ thành viên có quyền mới xem và tham gia Discussions.

III Cách lấy repoId và categoryId​

1. Lấy repoId​

  • repoId là ID nội bộ của repository trên GitHub.
  • Cách nhanh nhất: Vào trang Giscus App và kết nối repo của bạn. Khi chọn repo, Giscus sẽ tự động hiển thị repoId.
  • Nếu muốn tự lấy: Mở repo trên GitHub. Vào Settings → General → About → GraphQL Explorer (hoặc dùng GitHub GraphQL Explorer). Chạy query: 
    {
      repository(owner: "username", name: "repo") {
        id
      }
    }
    Kết quả trả về chính là repoId.

2. Lấy categoryId​

  • categoryId là ID của category trong Discussions (ví dụ: “General”, “Q&A”).
  • Cách làm: Vào tab Discussions trong repo. Tạo một category mới (ví dụ: “Comments”). Dùng GraphQL Explorer để lấy ID: 
    {
      repository(owner: "username", name: "repo") {
        discussionCategories(first: 10) {
          nodes {
            id
            name
          }
        }
      }
    }
    Kết quả sẽ trả về danh sách category cùng với id (chính là categoryId).

IV. Tích hợp vào Docusaurus​

Sau khi có repoId và categoryId, bạn thêm vào component Giscus:

<Giscus
  repo="username/repo"
  repoId="MDEwOlJlcG9zaXRvcnkxMjM0NTY3OA=="
  category="General"
  categoryId="DIC_kwDOA1q4LM4B-abc"
  mapping="pathname"
  reactionsEnabled="1"
  emitMetadata="0"
  inputPosition="bottom"
  theme="light"
  lang="vi"
/>

V. Hiển thị ở cả blog và doc​

Để hiển thị comment (Giscus) ở cả blog post và docs page trong Docusaurus, bạn cần tuỳ chỉnh theme component cho cả hai loại trang.

1. Override component cho Blog​

  • Tạo file src/theme/BlogPostPage.js (nếu chưa có).
  • Thêm Giscus vào cuối nội dung blog:
import React from 'react';
import BlogPostPage from '@theme-original/BlogPostPage';
import Giscus from '@giscus/react';

export default function BlogPostPageWrapper(props) {
  return (
    <>
      <BlogPostPage {...props} />
      <Giscus
        repo="username/repo"
        repoId="MDEwOlJlcG9zaXRvcnkxMjM0NTY3OA=="
        category="General"
        categoryId="DIC_kwDOA1q4LM4B-abc"
        mapping="pathname"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="bottom"
        theme="light"
        lang="vi"
      />
    </>
  );
}

2. Override component cho Docs​

  • Tạo file src/theme/DocItem.js.
  • Thêm Giscus vào cuối nội dung docs:
import React from 'react';
import DocItem from '@theme-original/DocItem';
import Giscus from '@giscus/react';

export default function DocItemWrapper(props) {
  return (
    <>
      <DocItem {...props} />
      <Giscus
        repo="username/repo"
        repoId="MDEwOlJlcG9zaXRvcnkxMjM0NTY3OA=="
        category="General"
        categoryId="DIC_kwDOA1q4LM4B-abc"
        mapping="pathname"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="bottom"
        theme="light"
        lang="vi"
      />
    </>
  );
}

3. Tái sử dụng cấu hình​

Để tránh lặp lại, bạn có thể tạo một component riêng src/components/CommentSection.js:

import React from 'react';
import Giscus from '@giscus/react';

export default function CommentSection() {
  return (
    <Giscus
      repo="username/repo"
      repoId="..."
      category="General"
      categoryId="..."
      mapping="pathname"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="bottom"
      theme="light"
      lang="vi"
    />
  );
}

Sau đó import CommentSection vào cả BlogPostPage.js và DocItem.js.

Kết quả​

  • Khi người dùng mở blog post, phần bình luận sẽ hiển thị ngay dưới bài viết.
  • Khi người dùng mở docs page, phần bình luận cũng xuất hiện dưới nội dung tài liệu.
  • Tất cả bình luận được lưu trong GitHub Discussions của repo bạn đã cấu hình.

Antigravity so với VS Code

· 3 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Antigravity của Google là một nền tảng phát triển ưu tiên tác nhân (agent-first) được xây dựng dựa trên mã nguồn mở của VS Code, nhưng tập trung vào việc tự động hóa toàn bộ quy trình phát triển phần mềm bằng AI thay vì chỉ hỗ trợ viết mã như VS Code truyền thống.

Tải ứng dụng tại: https://antigravity.google/

Các điểm khác biệt chính giữa Antigravity và VS Code​

1. Mô hình hoạt động​

  • VS Code: Là trình chỉnh sửa mã nguồn truyền thống, nơi người lập trình viết mã và sử dụng các tiện ích mở rộng để nhận gợi ý hoặc hoàn thành mã.
  • Antigravity: Là một nền tảng phát triển tích hợp ưu tiên các tác nhân AI. Người lập trình đưa ra các mục tiêu cấp cao bằng ngôn ngữ tự nhiên, và các tác nhân AI tự lập kế hoạch, viết mã, chạy thử nghiệm và sửa lỗi.

2. Giao diện người dùng​

  • VS Code: Có giao diện tập trung vào trình chỉnh sửa mã, cây thư mục và bảng điều khiển terminal.
  • Antigravity: Chia giao diện thành hai phần:
    • Trình chỉnh sửa tương tự VS Code
    • Trình quản lý tác nhân - cho phép người dùng theo dõi và điều phối nhiều tác nhân AI thực hiện các nhiệm vụ khác nhau.

3. Khả năng tự động hóa và lập kế hoạch​

  • VS Code: Cung cấp các gợi ý tức thời.
  • Antigravity: Có thể tạo ra "Kế hoạch thực thi" và "Hiện vật" để minh bạch hóa quá trình làm việc của AI, cho phép người lập trình đánh giá và xác thực công việc của tác nhân.

4. Tích hợp trình duyệt​

  • Antigravity: Tích hợp trình duyệt Chrome cho phép các tác nhân AI kiểm tra giao diện người dùng và chức năng của ứng dụng web.

5. Mô hình AI cốt lõi​

  • VS Code: Sử dụng các mô hình AI thông qua tiện ích mở rộng.
  • Antigravity: Tận dụng các mô hình ngôn ngữ lớn của Google và các mô hình khác, cho phép truy cập đa mô hình tích hợp.

Tóm lại​

VS Code là công cụ để người lập trình tự viết mã với sự hỗ trợ của AI, còn Antigravity là nền tảng mà người lập trình giao nhiệm vụ cho các tác nhân AI tự trị để xây dựng và thử nghiệm phần mềm.

VPI trong LiteSpeed là gì?

· 2 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Đây là một dịch vụ của LiteSpeed/QUIC.cloud giúp cải thiện trải nghiệm tải ảnh khi bật Lazy Load, đặc biệt với các ảnh above-the-fold (ảnh hiển thị ngay khi mở trang).

I. Viewport Images​

  • VPI (Viewport Images) là một dịch vụ tối ưu hóa hình ảnh được giới thiệu trong LiteSpeed Cache v5.0.
  • Nó giải quyết nhược điểm của Lazy Load: khi bật Lazy Load, tất cả ảnh (kể cả ảnh trên màn hình đầu tiên) đều bị trì hoãn tải. Điều này có thể khiến người dùng thấy trang trống hoặc chỉ có khung xám.
  • VPI sẽ xác định và ưu tiên tải ngay các ảnh trong vùng hiển thị đầu tiên (viewport), trong khi các ảnh khác vẫn Lazy Load như bình thường.

II. Ý nghĩa của “files left in queue”​

  • Khi bạn bật tính năng VPI trong LiteSpeed Cache, plugin sẽ gửi các yêu cầu đến dịch vụ QUIC.cloud để phân tích và tạo danh sách ảnh cần ưu tiên.
  • Những yêu cầu này được đưa vào hàng đợi (queue) để xử lý.
  • Thông báo “499 VPI files left in queue” nghĩa là hiện tại còn 499 trang/hình ảnh đang chờ dịch vụ QUIC.cloud xử lý để tạo dữ liệu VPI.

III. Khi nào bạn thấy thông báo này?​

  • Sau khi bật Viewport Images trong LiteSpeed Cache.
  • Khi website có nhiều trang hoặc nhiều ảnh cần phân tích.
  • Nếu cron job hoặc kết nối với QUIC.cloud chưa chạy hết, số lượng file trong queue sẽ hiển thị.

IV. Lợi ích của VPI​

  • Cải thiện tốc độ hiển thị ban đầu (First Contentful Paint, Largest Contentful Paint).
  • Người dùng sẽ thấy ảnh trên màn hình đầu tiên ngay lập tức, không phải chờ Lazy Load.
  • Giúp tăng điểm hiệu năng trên Google PageSpeed Insights và Core Web Vitals.

Ứng dụng trí tuệ nhân tạo trong thời đại AI

· 5 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Ứng dụng chung của Trí tuệ Nhân tạo (AI) trong công việc và đời sống con người.

I. MINDSET — Tư duy thời đại AI​

1. AI – Yếu tố sống còn trong kỷ nguyên mới​

AI không còn là công cụ tùy chọn, mà là nền tảng của sự thích nghi và phát triển. Trong mọi lĩnh vực — giáo dục, y tế, kỹ thuật, sáng tạo, quản trị — AI giúp con người nâng cao năng suất, giảm sai sót, và mở rộng giới hạn tư duy.

Câu hỏi quan trọng không còn là “Làm sao để dùng AI?”, mà là “AI có thể trở thành trợ thủ trong từng bước công việc của tôi như thế nào?”

2. Tư duy đúng: Đặt AI vào quy trình, không phải ngoài quy trình​

  • Câu hỏi sai: “AI có thể làm giúp tôi việc này không?” → Cách nghĩ này biến AI thành một món đồ chơi công nghệ, dùng lúc hứng thú.
  • Câu hỏi đúng: “Công việc của tôi có những bước nào, và AI có thể hỗ trợ từng bước ấy ra sao?” → Khi đó, AI trở thành một phần của quy trình, không phải công cụ rời rạc.

3. Tư duy hệ thống & kiến trúc​

Vai trò của con người đang chuyển dịch từ người thực thi sang kiến trúc sư quy trình:

  • Thiết kế luồng công việc rõ ràng.
  • Giao nhiệm vụ cho AI đúng vai trò.
  • Giữ quyền kiểm soát và đánh giá đầu ra.

4. Tư duy “AI-First”​

Trong mọi nhiệm vụ, hãy tự hỏi:

“Có cách nào để AI làm thay hoặc giúp tôi làm tốt hơn không?”

AI-First không có nghĩa phụ thuộc hoàn toàn vào máy, mà là tư duy hợp tác thông minh giữa con người và trí tuệ nhân tạo.

5. Nguyên tắc đạo đức khi dùng AI​

  • Bảo mật: Không dùng dữ liệu nhạy cảm hoặc cá nhân với các hệ thống công khai.
  • Sự thật: Con người phải là người chịu trách nhiệm cuối cùng cho đầu ra của AI.
  • Học hỏi: Luôn ghi nhận, chia sẻ kinh nghiệm và “prompt hiệu quả” trong nhóm để cùng tiến bộ.

II. SKILLSET — Nghệ thuật giao việc cho AI​

1. Tư duy “AI là đồng nghiệp”​

AI hiểu và phản hồi dựa trên cách bạn giao tiếp với nó. Prompting — cách bạn đặt câu hỏi và hướng dẫn — chính là kỹ năng lãnh đạo AI.

Prompt tốt = Kết quả tốt Prompt mơ hồ = Kết quả tệ

2. Framework C.R.I.S.P – Công thức vàng khi giao việc cho AI​

  1. C – Context (Bối cảnh): Bạn là ai, đang làm việc gì.
  2. R – Request (Nhiệm vụ): Mô tả cụ thể yêu cầu.
  3. I – Input (Dữ liệu): Cung cấp dữ liệu đầu vào thực tế.
  4. S – Structure (Định dạng): Yêu cầu cách trình bày kết quả.
  5. P – Purpose (Mục tiêu): Giải thích “tại sao” cần đầu ra này.

3. Kỹ thuật cơ bản: Zero-Shot Prompting​

AI thực hiện nhiệm vụ chỉ dựa trên hướng dẫn tổng quát. Ví dụ:

“Tóm tắt 5 ý chính trong đoạn văn sau và nêu lại bằng ngôn ngữ dễ hiểu.”

4. Kỹ thuật nâng cao: Few-Shot Learning​

Cung cấp 2–3 ví dụ mẫu để AI bắt chước phong cách, giọng văn, cấu trúc. → Giúp tạo ra đầu ra nhất quán và gần với tiêu chuẩn mong muốn.

5. Kỹ thuật tư duy chuỗi (Chain-of-Thought)​

Hướng dẫn AI suy luận từng bước logic trước khi trả kết quả.

“Hãy phân tích theo 3 bước: xác định vấn đề – nguyên nhân – giải pháp đề xuất.”

6. Mô hình “Hội đồng chuyên gia”​

Yêu cầu AI đóng vai nhiều chuyên gia khác nhau để phản biện đa chiều:

“Hãy đánh giá ý tưởng này từ góc nhìn của kỹ sư, nhà quản trị và người dùng cuối.”

→ Cách làm này giúp con người nhìn vấn đề toàn diện và khách quan hơn.

III. TOOLSET — Bộ công cụ ứng dụng AI​

Level 1: Trợ lý cá nhân​

Các công cụ AI cơ bản giúp tăng hiệu suất cá nhân:

  • Tư duy & Phân tích: ChatGPT, Claude, Gemini — hỗ trợ viết, nghiên cứu, phân tích dữ liệu.
  • Sáng tạo nội dung: Midjourney, Leonardo, Adobe Firefly — tạo hình ảnh và video sáng tạo.
  • Nghiên cứu & học tập: Perplexity, NotebookLM — tổng hợp thông tin, học nhanh theo ngữ cảnh.

Level 2: AI chuyên biệt (AI Agent)​

Tạo “trợ lý thông minh” cho từng nhiệm vụ hoặc phòng ban:

  • Trợ lý hành chính, nghiên cứu, phân tích tài chính, hỗ trợ kỹ thuật, chăm sóc khách hàng,... Những AI này được huấn luyện theo bối cảnh và dữ liệu nội bộ, giúp hiểu sâu và phản hồi chính xác hơn.

Level 3: Tự động hóa quy trình phức tạp​

Khi nhiều AI Agent phối hợp cùng nhau, ta có thể:

  • Tự động hóa các chuỗi công việc liên phòng ban.
  • Kết nối công cụ khác qua nền tảng no-code/low-code (như Make, n8n).
  • Giảm thao tác lặp lại, giúp con người tập trung vào sáng tạo và ra quyết định.

KẾT LUẬN​

Trí tuệ Nhân tạo không thay thế con người, mà nâng tầm con người. Sự khác biệt không nằm ở việc bạn biết dùng AI hay không, mà ở chỗ bạn biết chỉ huy, định hướng và hợp tác với AI như thế nào.

“AI sẽ không lấy đi công việc của bạn. Nhưng người biết dùng AI — sẽ.”

Trang web không có điểm mốc chính thì có sao không

· 5 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Điểm mốc chính giúp người dùng trình đọc màn hình dễ dàng thao tác trên trang web.

Dưới đây là tài liệu chi tiết về chủ đề “Landmark One Main (ID quy tắc: landmark-one-main)” — được biên soạn dựa trên quy tắc của axe-core 4.11, hướng dẫn của Deque Systems, và mở rộng thêm về tầm quan trọng trong SEO (bộ máy tìm kiếm)

I. Landmark One Main là gì?​

Landmark One Main là một quy tắc kiểm tra khả năng truy cập (Accessibility Rule) đảm bảo rằng mỗi trang web chỉ có một vùng nội dung chính duy nhất (main landmark) — giúp người dùng, đặc biệt là người khiếm thị hoặc sử dụng trình đọc màn hình, có thể xác định nhanh khu vực nội dung chính trong trang web.

Một trang web được coi là tuân thủ quy tắc này khi:

  • Có đúng một phần tử <main> hoặc một phần tử có role="main".
  • Các phần tử iframe bên trong (nếu có) không chứa nhiều hơn một vùng chính.
  • Tất cả nội dung đều nằm trong các vùng mốc (landmark regions) được xác định bằng HTML5 semantic elements hoặc ARIA roles.

II. Tầm quan trọng của quy tắc “Landmark One Main”​

1. Đối với người dùng và khả năng truy cập (Accessibility)​

  • Người dùng trình đọc màn hình (screen reader) có thể dễ dàng chuyển đến nội dung chính bằng phím tắt (ví dụ: JAWS, NVDA, VoiceOver).
  • Giúp phân tách rõ ràng các khu vực trong trang web như: tiêu đề, điều hướng, nội dung chính và chân trang.
  • Giảm nhầm lẫn khi có nhiều khối nội dung phụ (ví dụ sidebar, banner, popup, v.v.).
  • Tăng hiệu quả điều hướng và trải nghiệm người dùng tổng thể, đặc biệt với người khuyết tật về thị giác.

2. Đối với SEO (Tối ưu hóa công cụ tìm kiếm)​

Việc tuân thủ quy tắc này có tác động tích cực gián tiếp đến thứ hạng và khả năng hiểu nội dung của website:

Lợi íchTác động SEO
Cấu trúc HTML ngữ nghĩa (semantic HTML)Giúp Googlebot hiểu rõ phần nào là nội dung chính của trang.
Tăng khả năng lập chỉ mục (indexing)Google ưu tiên nội dung trong <main> khi xác định chủ đề chính của trang.
Giảm tỷ lệ bỏ trang (bounce rate)Người dùng truy cập dễ dàng tìm thấy nội dung trọng tâm.
Tuân thủ chuẩn WCAG & Core Web VitalsLà yếu tố gián tiếp giúp cải thiện “Experience signals” trong xếp hạng.

:::tip Tóm lại

Quy tắc landmark-one-main không chỉ giúp trang web dễ truy cập hơn, mà còn giúp công cụ tìm kiếm hiểu chính xác nội dung cốt lõi của trang — một yếu tố cực kỳ quan trọng trong SEO kỹ thuật (Technical SEO).

:::

III. Cách triển khai đúng quy tắc Landmark One Main​

1. Sử dụng đúng phần tử HTML5 và ARIA Roles​

Một trang web tiêu chuẩn nên có cấu trúc ngữ nghĩa như sau:

<header role="banner">
   <h1>Company Name</h1>
</header>

<nav role="navigation">
   <ul>
      <li><a href="#">Trang chủ</a></li>
      <li><a href="#">Sản phẩm</a></li>
      <li><a href="#">Liên hệ</a></li>
   </ul>
</nav>

<main role="main">
   <article>
      <h2>Nội dung chính của trang</h2>
      <p>Đây là nơi hiển thị nội dung trọng tâm mà người dùng cần đọc.</p>
   </article>
</main>

<footer role="contentinfo">
   <p>Bản quyền © 2025 Công ty ABC</p>
</footer>

:::tip Lưu ý

  • Chỉ một <main> hoặc role="main" được phép tồn tại trên mỗi trang.
  • Không đặt <main> bên trong <header>, <nav>, <footer>, hoặc các phần tử lặp lại khác.
  • Trong mỗi iframe, cũng chỉ nên có một vùng mốc chính (hoặc không có).

:::

IV. Cấu trúc vùng mốc (Landmark Regions)​

Khu vựcThẻ HTML5Vai trò ARIA tương ứngChức năng
Tiêu đề<header>role="banner"Giới thiệu hoặc nhận diện trang
Điều hướng<nav>role="navigation"Cung cấp các liên kết điều hướng
Nội dung chính<main>role="main"Nội dung trung tâm của trang
Thanh bên<aside>role="complementary"Nội dung phụ trợ, ví dụ: liên kết liên quan
Chân trang<footer>role="contentinfo"Thông tin bản quyền hoặc liên hệ

💡 Best Practice: Sử dụng cả HTML5 element và ARIA role đồng thời giúp tương thích tối đa với cả trình duyệt cũ và công nghệ trợ năng mới.

V. Cách kiểm tra & khắc phục lỗi “landmark-one-main”​

1. Dùng công cụ tự động​

  • axe DevTools Pro (plugin cho Chrome, Firefox)
  • Lighthouse (trong Chrome DevTools)
  • WAVE Accessibility Tool

Nếu có lỗi, bạn sẽ thấy cảnh báo như:

⚠️ “Document must have one main landmark” hoặc “Multiple <main> elements found on the same page.”

2. Cách khắc phục​

  • Giữ lại duy nhất một <main> cho nội dung chính.
  • Gỡ bỏ hoặc đổi các <main> phụ thành <div> hoặc <section>.
  • Kiểm tra trong iframe, đảm bảo không chứa nhiều vùng role="main".

Ví dụ lỗi:

<main>...</main>
<main>...</main> <!-- ❌ Lỗi: Nhiều vùng main -->

Cách sửa:

<main>...</main>
<section>...</section> <!-- ✅ Không vi phạm landmark-one-main -->

VI. Kết luận​

Quy tắc Landmark One Main (landmark-one-main) là một trong những yếu tố nền tảng của khả năng truy cập web hiện đại. Việc tuân thủ quy tắc này mang lại ba lợi ích đồng thời:

✅ Tăng khả năng truy cập cho người khuyết tật và người dùng công nghệ hỗ trợ.

📈 Cải thiện SEO kỹ thuật, giúp công cụ tìm kiếm hiểu rõ nội dung trọng tâm của trang.

💼 Tuân thủ tiêu chuẩn WCAG & Deque Best Practices, nâng cao tính chuyên nghiệp và độ tin cậy của website.