Chnh v vy, extension chn qung co YouTube v website tr thnh tr th c lc ca rt nhiu ngi dng ph thng. Khng cn rnh cng ngh, khng phi ci t phc tp, ch vi c click l bn c th xem video mt hn, lt web gn gng hn.

Bi vit ny s gip bn:

• Hiu extension chn qung co l g

• Bit cc extension chn qung co YouTube & website ph bin nht

• Nm r u nhc im tng cng c

• Hiu cch YouTube ang chng adblock

• Bit cch dng sao cho hp l v bn lu

Extension chn qung co l g?

Ni n gin cho d hiu, extension chn qung co l tin ch m rng ci thm vo trnh duyt nh Chrome, Edge, Firefox Sau khi ci, extension s t ng:

• Chn qung co trc, gia v sau video YouTube

• n banner qung co trn website

• Ngn pop-up, qung co che ni dung

• Chn video qung co t ng pht

• Gim cc m theo di (tracking)

Vi ngi dng ph thng, bn gn nh khng cn chnh g thm. Ci xong l dng c ngay.

V sao nn dng extension chn qung co?

Khng phi ngu nhin m ngy cng nhiu ngi tm n extension chn qung co. Mt vi l do rt thc t gm:

• Qung co YouTube xut hin qu thng xuyn

• Nhiu qung co khng th b qua

• Website c qu nhiu banner gy ri mt

• Pop-up bt ln bt ng, d bm nhm

• Qung co lm trang web ti chm

Ni vui mt cht th, dng extension chn qung co ging nh dn sch rc trn mn hnh, nhn ci g cng d chu hn hn.

Cc extension chn qung co ph bin

Di y l nhng extension c nhiu ngi dng ph thng la chn v d ci d dng hiu qu tt.

1. uBlock Origin Lite Nh, mnh v min ph

uBlock Origin Lite l mt trong nhng extension chn qung co YouTube v website c nh gi cao nht hin nay.

u im:

• Chn qung co YouTube rt hiu qu

• Chn banner, pop-up trn hu ht website

• Rt nh, khng lm chm my

• Hon ton min ph, khng qung co

Nhc im:

• Giao din nng cao hi kh hiu vi ngi mi

• Tuy nhin, dng mc nh l tt

👉 Ph hp cho: ngi dng ph thng mun ci mt ln, dng lu di.

Cch ci t: Truy cp vo ca hng chrome Thm vo chrome l xong.

2. AdBlock D dng, quen thuc

AdBlock l ci tn quen thuc vi rt nhiu ngi mi bt u dng extension chn qung co.

u im:

• Ci t nhanh, giao din thn thin

• Chn qung co YouTube v website kh tt

• Ph hp vi ngi khng rnh cng ngh

Nhc im:

• C tnh nng qung co chp nhn c (c th tt)

• Hi tn ti nguyn hn uBlock Origin Lite

👉 Ph hp cho: ngi dng ph thng, thch s n gin.

Cch ci t: Truy cp vo ca hng chrome Thm vo chrome l xong.

3. AdGuard Chn qung co ton din

AdGuard khng ch l extension m cn c phn mm ring cho my tnh v in thoi.

u im:

• Chn qung co YouTube hiu qu

• Chn qung co trn website rt tt

• C thm tnh nng bo v quyn ring t

Nhc im:

• Phin bn y cn tr ph

• Extension min ph c gii hn

👉 Ph hp cho: ngi mun chn qung co c YouTube ln website mc cao hn.

Cch ci t: Truy cp vo ca hng chrome Thm vo chrome l xong.

Khng ch YouTube Extension cn chn qung co trn website rt hiu qu

Bn cnh YouTube, cc extension chn qung co k trn cn hot ng cc k tt trn cc website c cha qung co nh trang tin, blog, din n

Chng c th:

• n banner qung co hai bn trang

• Chn pop-up bt ln bt ng

• Loi b qung co che ni dung

• Ngn video qung co t chy

Nhiu ngi sau khi ci extension chn qung co mi nhn ra rng lt web cng c th sch s v d chu n vy.

YouTube ang chng adblock nh th no?

Thi gian gn y, YouTube bt u sit cht vic dng adblock. C th bn tng thy thng bo yu cu tt trnh chn qung co trc khi xem video.

Nhng g YouTube ang lm:

• Pht hin trnh duyt ang dng adblock

• Hin th cnh bo

• Tm chn pht video

• Gi ng k YouTube Premium

iu ny khin nhiu ngi lo lng rng extension chn qung co YouTube s ht thi. Tuy nhin, thc t l:

• Mt s extension vn hot ng n

• Cn cp nht thng xuyn

• Khng phi lc no cng chn c 100%

Dng extension chn qung co c vi phm khng?

Cu hi ny c rt nhiu ngi quan tm.

• V php lut: khng vi phm

• V iu khon YouTube: khng c khuyn khch

• V o c: ty quan im mi ngi

Nu bn yu thch mt knh YouTube hay website no , bn c th tt chn qung co ring cho h ng h hu ht extension u h tr whitelist rt d dng.

Mo dng extension chn qung co n nh hn

trnh li v dng lu di, bn c th p dng vi mo nh sau:

• Lun cp nht extension ln phin bn mi

• Khng ci nhiu extension chn qung co cng lc

• Khi b chn xem video, th tt/bt li extension

• Whitelist nhng website hoc knh bn mun ng h

C nn dng YouTube Premium thay cho adblock?

YouTube Premium l gii php chnh thng:

• Khng c qung co

• Pht video nn

• Ti video offline

Tuy nhin, n ch b hin th qung co trn Youtube. Vi ngi dng ph thng, extension chn qung co YouTube v website vn l la chn tit kim v linh hot hn.

Qung co trn YouTube v website ngy cng nhiu l iu kh trnh khi, nhng bn hon ton c th ch ng ci thin tri nghim bng cch s dng cc extension chn qung co ph hp. Vi ngi dng ph thng, ch cn mt cng c nh uBlock Origin Lite, AdBlock hoc AdGuard l dng hng ngy ri.

Quan trng nht vn l dng mt cch hp l: xem thoi mi hn, lt web gn gng hn, nhng ng qun ng h nhng nh sng to ni dung m bn yu thch khi c th.

Hook ny cho php bn vit code theo ng mental model ca React: render l render, event l event, khng cn phi lch lut dependency array na.

useEffectEvent l g?

useEffectEvent l mt hook mi trong React 19.2, cho php bn to ra mt event handler n nh (stable reference) nhng lun truy cp c state v props mi nht.

Ni cch khc:

• Khng b stale closure

• Khng cn thm dependency vo useEffect

• Khng cn useCallback + dependency array phc tp

• Code d c, ng logic hn

Stale Closure l g?

Trc khi hiu v sao useEffectEvent xn n vy, mnh cn nhn li vn c.

V d quen thuc vi useEffect

useEffect(() => {
  const id = setInterval(() => {
    console.log(count);
  }, 1000);

  return () => clearInterval(id);
}, []);

iu g xy ra?

• count lun l gi tr ban u

• V dependency array rng []

• Callback trong setInterval b ng bng state (stale closure)

Cch sa trc y

• Thm count vo dependency interval b reset lin tc

• Dng useRef code kh c

• Dng useCallback dependency chng dependency

Khng hp l, khng ng ban u.

useEffectEvent gii quyt chuyn ny nh th no?

V d vi useEffectEvent

import { useEffect, useEffectEvent } from "react";

function Counter({ count }) {
  const logCount = useEffectEvent(() => {
    console.log(count);
  });

  useEffect(() => {
    const id = setInterval(() => {
      logCount();
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return null;
}

iu g khc bit l g?

• logCount khng thay i reference

• Nhng bn trong n lun thy count mi nht

• useEffect khng cn dependency

• Khng reset interval

• Code c pht hiu lin, khng hack no

Mental Model mi: Reactive vs Non-reactive logic

React 19.2 chia logic thnh 2 loi r rng:

Reactive logic (phn ng vi render)

• useEffect

• dependency array

• chy li khi props/state thay i

Non-reactive logic (event logic)

• click

• timer

• websocket

• analytics

• subscription callback

👉 useEffectEvent dnh cho loi th 2

So snh: useEffectEvent vs useEffect vs useCallback

👉 useEffectEvent khng thay th useEffect, m b sung ng ch React cn thiu.

Use case thc t nn dng useEffectEvent

1. Event Listener (window, document)

const onScroll = useEffectEvent(() => {
  console.log(window.scrollY);
});

useEffect(() => {
  window.addEventListener("scroll", onScroll);
  return () => window.removeEventListener("scroll", onScroll);
}, []);

Khng lo stale state, khng cn deps.

2. WebSocket / Subscription

const onMessage = useEffectEvent((msg) => {
  setMessages(prev => [...prev, msg]);
});

useEffect(() => {
  socket.on("message", onMessage);
  return () => socket.off("message", onMessage);
}, []);

3. Analytics / Logging

const trackClick = useEffectEvent(() => {
  analytics.track("click", { userId });
});

Tracking lun dng userId mi nht, khng cn re-register event.

Nhng iu KHNG nn lm

Gi useEffectEvent trong iu kin

if (condition) {
  useEffectEvent(() => {});
}

👉 Hook rule vn p dng, tuyt i trnh lm iu ny.

Dng useEffectEvent thay cho useEffect

// Sai mc ch
useEffectEvent(() => {
  fetchData();
});

👉 useEffectEvent khng chy t ng, n ch l function.

useEffectEvent v tng lai ca React

useEffectEvent gip:

• Gim eslint-disable

• t bug do dependency

• Code gn vi JS thun hn

• Chun b cho React Compiler & concurrent features

Nhiu kh nng trong tng lai, React s khuyn khch tch r render logic v event logic bng hook ny.

Tng kt

useEffectEvent khng phi l mt hook cho vui, m l mt bc tin rt ln trong trit l thit k ca React. N gii quyt tn gc vn stale closure, gip code d c hn, ng hn v t bug hn.

Nu bn:

• Hay vit event listener

• Hay lm timer, socket, analytics

• Ght dependency array

👉 useEffectEvent chc chn l th bn nn p dng ngay t by gi.

Ti liu tham kho

• React Blog: https://react.dev/blog/2025/10/01/react-19-2#use-effect-event

• React Reference: https://react.dev/reference/react/useEffectEvent

Dark mode tr thnh mt phn gn nh phi c trong mi website hin i. Khng ch gip giao din trng chuyn nghip hn, dark mode cn gim mi mt khi c ni dung ban m v tit kim pin cho cc thit b mn hnh OLED.

Trong bi vit ny, mnh s chia s cch lm dark mode chun chnh vi CSS v JavaScript.

Dark Mode l g v ti sao quan trng?

Dark mode (ch ti) l giao din nn ti vi ch sng, gip:

• Gim nh sng xanh t mi mt

• Tp trung hn khi c

• Tit kim pin

• Website trng xn hn nhiu

• Ngi dng ch ng chn theme ph hp

Vic build dark mode bng CSS v JavaScript rt linh hot v n gin.

Bc 1: Chun b CSS Variables cho theme

Cch n gin nht to dark mode l s dng CSS Variables.

V d:

/* Light theme (default) */
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
  --primary-color: #007bff;
}

/* Dark theme */
.dark {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --primary-color: #4dabf7;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

Li ch khi dng CSS Variables:

• D bo tr

• D m rng cho multiple themes

• Khng cn sa nhiu class CSS

Bc 2: Thm nt chuyn i (Toggle Button)

Bn cn mt toggle nh ngi dng i theme.

<button id="theme-toggle">Toggle Dark Mode</button>

Bc 3: Vit JavaScript bt/tt Dark Mode

const toggleBtn = document.getElementById("theme-toggle");
const body = document.body;

toggleBtn.addEventListener("click", () => {
  body.classList.toggle("dark");
});

Nh vy l bn build c dark mode chy ngon lnh.

Bc 4: Lu trng thi Dark Mode bng localStorage

Nhiu bn to c dark mode nhng qun mt lu trng thi, khin khi reload trang theme b reset. iu ny gy kh chu cho ngi dng.

Cch lu trng thi bng JavaScript:

const body = document.body;
const toggleBtn = document.getElementById("theme-toggle");

// Load theme khi trang m
const savedTheme = localStorage.getItem("theme");

if (savedTheme === "dark") {
  body.classList.add("dark");
}

toggleBtn.addEventListener("click", () => {
  body.classList.toggle("dark");

  // Lu theme
  if (body.classList.contains("dark")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Khi reload trang theme vn gi nguyn.

Bc 5: T ng nhn dark mode t h iu hnh

Nhiu h iu hnh (Android, iOS, Windows, macOS) c dark mode system-level.

Bn c th ng b theo h iu hnh bng CSS:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
  }
}

Hoc bng JS:

if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
  document.body.classList.add("dark");
}

Kt hp localStorage + system theme = tri nghim cc mt.

Tips gip Dark Mode ca bn chun UX

1. m bo tng phn (contrast) ch cao

Dng tool kim tra contrast: https://webaim.org/resources/contrastchecker/

2. ng dng pure black (#000)

D gy chi Dng #121212 hoc #1a1a1a.

3. Ch hnh nh

Vi nh PNG:

• Dng filter invert nu cn

• To 2 phin bn light/dark cho logo

V d:

.dark img.logo {
  filter: brightness(0) invert(1);
}

4. ng qun setting theme-color cho SEO

Chrome s i mu thanh mobile browser.

<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">

5. Khng toggle bng CSS alone nu mun lu theme

Nu khng dng JS khng lu c trng thi.

Dark mode khng h kh. Ch cn vi dng CSS + JavaScript l website ca bn c thm mt tnh nng cc k hin i v hu ch.

TailwindCSS ni ln nh mt cng c CSS mnh m da trn utility classes. Nhng liu n c thc s tt hn CSS truyn thng? Cng mnh c bi vit ny a ra la chn ph hp cho d n ca bn nh.

Gii thiu

Nu bn l frontend developer, chc chn bn tng nghe cu hi quen thuc: TailwindCSS c thc s tt hn CSS truyn thng khng?

Mt bn l CSS thun quen thuc n gin, r rng, khng ph thuc th vin. Mt bn l TailwindCSS utility-first, class di ngong trong html nhng li gip code cc nhanh.

C hai u c u im ln im hn h, v th v hn, vic chn ng cng c c th thay i hon ton tc pht trin v tri nghim khi coding.

TailwindCSS l g?

TailwindCSS l mt CSS framework theo hng utility-first, ngha l thay v vit CSS ring cho tng component, bn s kt hp nhiu class nh to ra giao din.

V d:

<button class="px-4 py-2 bg-blue-500 text-white rounded-md">
  Click me
</button>

Nghe c v hi ri mt? Nhng phi cng nhn n cc nhanh, v rt d ti s dng.

CSS truyn thng l g?

CSS truyn thng l cch vit style thun ty dnh cho tng component, file, hoc global stylesheet.

V d:

<button class="btn-primary">Click me</button>

.btn-primary {
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border-radius: 6px;
}

R rng hn, tch bch hn, v d c hn i vi ngi mi.

So snh TailwindCSS vs CSS truyn thng

Vy TailwindCSS c thc s tt hn CSS truyn thng khng?

Cu tr li: Ty d n, ty team, ty phong cch ca bn.

TailwindCSS l la chn tuyt vi khi:

• Bn mun code nhanh, cc nhanh

• Bn xy prototyping hoc MVP

• Team cn thng nht UI trn ton h thng

• Bn lm vic vi React, Vue, Next.js, Laravel

• Bn khng mun ngh qu nhiu v t tn class

CSS truyn thng l la chn tt hn khi:

• Bn lm d n ln, nhiu component phc tp

• Bn mun HTML sch s, d c

• Team quen vi SCSS, BEM hoc OOCSS

• Bn lm vic vi designer thch sng to

• Bn mun kim sot CSS t gc n ngn

Mt s v d thc t

Styling button dng TailwindCSS

<button class="px-4 py-2 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600">
  Mua ngay
</button>

Styling button dng CSS truyn thng

<button class="btn-primary">Mua ngay</button>

.btn-primary {
  padding: 8px 16px;
  background: #3b82f6;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
  background: #2563eb;
}

👉 CSS truyn thng c d hn.
👉 TailwindCSS dng nhanh hn.

Li kt

TailwindCSS khng hn tt hn CSS truyn thng, v CSS truyn thng cng khng h c l s. iu quan trng l:

• Bn ang lm d n g

• Team ca bn quen vi cng c no

• Bn u tin tc hay tnh r rng

D chn ci no, iu quan trng nht vn l hiu CSS tht s, v mi framework ch l lp tin ch nm trn nn tng ct li m thi.

Mt s link tham kho hay ho dnh cho bn

• https://tailwindcss.com

• https://css-tricks.com

• https://developer.mozilla.org/en-US/docs/Web/CSS

Cloudflare R2 l dch v object storage do Cloudflare pht trin, c thit k nh mt gii php thay th cho Amazon S3, nhng khng tnh ph egress (bng thng ti d liu ra).

R2 c xy dng trn Workers v Durable Objects, gip cc developer truy cp v lu tr d liu quy m ln vi tr thp, bo mt cao v chi ph cc k cnh tranh.

im khc bit chnh:

• Khng ph egress: Ti d liu ra (ra khi R2) hon ton min ph.

• Chi ph lu tr thp

• Tch hp mt vi Cloudflare Workers: C th x l d liu ngay ti edge m khng cn server trung gian.

• API tng thch vi S3: D dng chuyn i ng dng ang dng S3 sang R2 m khng phi vit li code.

Bn free cho chng ta ti tn 10GB lu tr mi thng, thay v tnh ph egress, h tnh da theo s lng c (Class B Operations) v ghi (Class A Operations) mi thng. Xem chi tit ti y

2. Kin trc tng quan ca R2

R2 c xy dng trn nn tng Cloudflare Edge Network mt trong nhng mng phn phi d liu ln nht th gii, vi hn 300+ data centers ton cu.
Khi bn lu tr d liu ln R2, Cloudflare s:

• Phn b d liu ln h thng lu tr phn tn.

• Sao chp (replicate) d liu gia nhiu vng m bo bn.

• Cung cp truy cp trc tip thng qua API tng thch vi AWS S3 SDK.

V nm trong cng h sinh thi vi Workers v Pages, R2 c th kt hp trc tip x l file, resize nh, hoc to CDN ng ngay ti edge m khng cn gi API t bn th ba.

3. Cch s dng Cloudflare R2

3.1. S dng bng API

Cloudflare R2 cung cp giao din S3-compatible API, ngha l bn c th dng bt k SDK no h tr Amazon S3 kt ni vi R2.

V d: Kt ni R2 bng Node.js (AWS SDK v3)

Trc ht, to Access Key t Cloudflare Dashboard R2 Manage API Tokens.

npm install @aws-sdk/client-s3

Sau cu hnh SDK:

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const client = new S3Client({
  region: "auto",
  endpoint: "https://<your-account-id>.r2.cloudflarestorage.com",
  credentials: {
    accessKeyId: "R2_ACCESS_KEY",
    secretAccessKey: "R2_SECRET_KEY"
  }
});

const upload = async () => {
  const command = new PutObjectCommand({
    Bucket: "my-r2-bucket",
    Key: "hello.txt",
    Body: "Hello Cloudflare R2!"
  });

  await client.send(command);
  console.log("File uploaded successfully!");
};

upload();

Tng t, bn c th dng GetObjectCommand, ListObjectsCommand, hoc DeleteObjectCommand y ht nh khi lm vic vi Amazon S3.

👉 Ton b ti liu hng dn bn c th tham kho ti Cloudflare R2

3.2. S dng bng giao din trn dashboard

Truy cp vo dashboard ca Cloudlfare v vo mc Storage & databases R2 tin hnh to bucket cng nh upload.

4. Kt hp R2 vi Cloudflare Workers

im mnh nht ca R2 l kh nng tch hp trc tip vi Cloudflare Workers gip bn x l d liu ti edge m khng cn backend truyn thng.

V d di y minh ha cch c file t R2 trong Worker:

export default {
  async fetch(request, env) {
    const object = await env.MY_BUCKET.get("hello.txt");
    if (!object) {
      return new Response("File not found!", { status: 404 });
    }
    return new Response(object.body);
  },
};

y, env.MY_BUCKET c cu hnh trong wrangler.toml nh sau:

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "my-r2-bucket"

Khi deploy, Worker s c quyn truy cp trc tip vo bucket m khng cn gi API qua mng gip tc c/ghi nhanh hn rt nhiu.

5. So snh Cloudflare R2 vi Amazon S3

R2 l tng cho developer mun ti u chi ph phn phi file tnh (nh, video, d liu JSON) hoc lm backend lu tr cho ng dng chy trn Cloudflare Workers / Pages.

6. Mt s trng hp s dng thc t

• Static file hosting: Lu nh, video, script cho web hoc ng dng di ng.

• Backup & archival: Lu tr d liu lu di vi chi ph thp.

• Serverless backend: Kt hp vi Workers to REST API cho file upload/download.

• AI & ML storage: Lu dataset cho cc ng dng AI inferencing chy edge.

7. Gim st v bo mt

Cloudflare cung cp cc tnh nng qun l truy cp chi tit cho R2 thng qua Access Policies v API Tokens.

Bn c th:

• Gii hn quyn read/write theo bucket hoc theo prefix.

• Theo di log truy cp qua Cloudflare Analytics.

• D dng tch hp vi Zero Trust Access bo v endpoint ni b.

Tm li

Cloudflare R2 Storage l cch gip dev gim chi ph, loi b egress, v tng tc phn phi ni dung ton cu. y l gii php tuyt vi xy dng backend serverless, h thng phn phi file, hoc nn tng d liu ln vi chi ph ti u v hiu nng vt tri.

Ti liu tham kho

• R2 Documentation

• Cloudflare Workers + R2 Getting Started

Nu bn tng lm vic vi designer trn Figma, chc hn c lc au u khi h gi mt thit k lung linh vi hng t motion, transition v hover effect Nhng khi xut sang code, tt c ch cn l hnh tnh. 😩

Bn bt u m CSS transitions, vit c ng @keyframes, hoc th dng th vin nh Framer Motion, GSAP, hay Lottie nhng lc no cng phi nh i gia hiu nng, mt v thi gian lm.

Chnh v th, Rive.app ra i khng ch gip designer v developer ni cng ngn ng animation, m cn bin vic nhng motion vo web app tr nn n gin hn bao gi ht.

Rive l g?

Rive l mt nn tng trc tuyn cho php bn thit k, to animation, v xy dng tng tc theo thi gian thc. im khc bit ca Rive so vi cc cng c khc (nh After Effects hay Lottie) l:

• N khng ch render animation, m cn cho php lp trnh logic tng tc.

• Tt c c ng gi trong file .riv nh v ti u.

Rive hot ng da trn State Machine mt h thng cho php bn nh ngha trng thi v cch animation phn ng vi s kin ngi dng.

V d: khi ngi dng click, hover, hay scroll animation c th i trng thi ngay lp tc, mt m nh trong game.

V sao Rive l cu tinh ca web dev?

Hy th so snh quy trnh animation c v mi nh 👇

Cch truyn thng

Figma After Effects Lottie JSON React

Mt chui di, d li v cc tn thi gian.

Vi Rive

Figma Rive .riv React hoc Rive .riv React

Ch cn vi bc!

Bn import thit k t Figma vo Rive, thm motion & state machine, export file .riv, ri nhng thng vo web app, hoc bn thit k Rive ngay t ban u.

Khng cn code animation phc tp, khng cn render video m kt qu li siu mt, nh v d bo tr.

Cch nhng file .riv vo React

y l phn m nhiu web dev quan tm nht! Rive cung cp SDK chnh thc cho React, gip bn d dng tch hp animation ch trong vi pht.

Di y l hng dn da theo ti liu chnh thc ca Rive.

Bc 1: Ci t th vin Rive React

Trong d n React ca bn, ci t package thng qua npm hoc yarn:

npm install @rive-app/react-canvas

hoc

yarn add @rive-app/react-canvas

Bc 2: Chun b file .riv

T Rive Editor, bn export file animation ca mnh (v d: animation.riv) v t vo th mc public/animations trong project React.

V d:

my-app/
 public/
    animations/
        bear.riv
 src/
     App.jsx

Bc 3: Nhng animation vo React Component

Rive cung cp hai cch render animation:

Cch 1 Dng n gin nht:

import { RiveComponent } from '@rive-app/react-canvas';

function App() {
  return (
    <div style={{ width: 400, height: 400 }}>
      <RiveComponent src="/animations/bear.riv" autoplay />
    </div>
  );
}

export default App;

• src: ng dn n file .riv

• autoplay: cho php animation chy t ng

Cch ny rt gn gng nu bn ch mun hin th animation m khng cn logic phc tp.

Cch 2 Dng hook useRive() iu khin animation nng cao

Nu bn cn iu khin animation theo event (hover, click, input, v.v.), hy dng hook useRive() v useStateMachineInput().

V d:

import { useRive, useStateMachineInput } from '@rive-app/react-canvas';

function InteractiveButton() {
  const STATE_MACHINE = "ButtonMachine";

  const { rive, RiveComponent } = useRive({
    src: "/animations/button.riv",
    stateMachines: STATE_MACHINE,
    autoplay: true,
  });

  const hoverInput = useStateMachineInput(rive, STATE_MACHINE, "hover");

  return (
    <div
      onMouseEnter={() => hoverInput && (hoverInput.value = true)}
      onMouseLeave={() => hoverInput && (hoverInput.value = false)}
    >
      <RiveComponent style={{ width: 150, height: 150 }} />
    </div>
  );
}

export default InteractiveButton;

👉 y, STATE_MACHINE tr ti State Machine bn t tn trong Rive Editor.
useStateMachineInput cho php bn kch hot animation theo hnh ng ca ngi dng cc k mnh m cho UI tng tc.

Bc 4: Kim tra v ti u

Bn c th m DevTools kim tra Rive canvas ang render.
Ngoi ra, bn c th ti u performance bng cch:

• Ch render khi component nm trong viewport (dng Intersection Observer).

• Dng animation khi tab b n (document.visibilitychange).

💡 Mt s mo

• Bn c th pause, play, reset animation bng cc hm nh:

rive.play();
rive.pause();
rive.reset();

• Nu mun kim tra animation hin ang trng thi no, bn c th c t rive.stateMachineInputs.

u im vt tri ca Rive trong Web Development

🎯 1. Animation tng tc thi gian thc

Rive render bng Canvas/WebGL, gip animation mt, khng git v c th thay i ngay theo hnh ng ngi dng.

2. State Machine cc mnh

Bn c th nh ngha logic iu khin animation chng hn, khi ngi dng click, animation chuyn t trng thi idle sang active. iu m Lottie hoc CSS kh lm c.

🧩 3. D tch hp vi cc framework ph bin

Rive h tr React, Vue, Flutter, Unity, iOS, Android, C++, thm ch c Web thun. To animation mt ln dng mi ni!

💨 4. Nh, vector, v scalable

File .riv ch vi trm KB, nh hn video hoc GIF, v c th scale m khng b v hnh.

🤝 5. Designer & Dev lm vic trn tru

Designer ch vic export .riv, dev ch vic import vo project khng cn debug code animation. Hai bn ni cng ngn ng chuyn ng.

Khi no nn dng Rive?

Rive l la chn hon ho khi

• Bn cn animation tng tc (hover, click, drag, input event).

• Bn mun UI sng ng hn m khng tn cng code.

• Bn ang pht trin web/app bng React hoc Flutter.

🚫 C th cha ph hp khi

• Ch cn animation nh, tnh (CSS keyframes l ).

• Cn animation cc phc tp gn cht logic app (GSAP c th hp hn).

Mt v d thc t

Bn c th tham kho ti https://rive.app/docs/runtimes/demos

Rive c g c bit hn Lottie?

Tm li, Rive l bc tin tip theo sau Lottie t animation th ng sang animation c tr thng minh.

Hc Rive u?

Nu bn mun bt u ngay, y l vi ti nguyn cc k hu ch:

• 🌐 Trang ch Rive.app

• 📘 Ti liu React SDK

• 🎓 Cng ng Rive & kho animation min ph

• 🧠 Video hng dn Rive c bn trn YouTube

Tng kt li

Rive khng ch l cng c, m l tng lai ca animation web

Rive ang m ra mt k nguyn mi cho UI/UX animation ni m designer v developer c th cng tc hiu qu hn, to nn nhng tri nghim tng tc mt m v thng minh hn.

Nu bn l mt dev React, c l bn nghe tin: NextJS 16 chnh thc ra mt.

Phin bn ny khng ch nng cp hiu nng m cn gii thiu hng lot cng ngh nn tng mi t React Compiler gip ti u ha code t ng, n Partial Prerendering (PPR) cho php kt hp gia static v dynamic rendering, mang n tc vt tri m vn gi c s linh hot.

React Compiler

React Compiler t ng ti u hiu sut m khng cn memo th cng

NextJS 16 nay h tr n nh React Compiler, mt bc tin quan trng sau khi React Compiler ra mt phin bn 1.0. y l cng c gip React t ng ti u re-render ngha l bn khng cn phi dng React.memo, useMemo, hay useCallback th cng tng hiu sut na.

React Compiler s phn tch m ngun component, xc nh phn no c th c memo ha an ton v thc hin t ng.

👉 Kt qu: hiu sut c ci thin ng k, c bit trong nhng app c nhiu component con hoc d liu phc tp.

Cch bt React Compiler trong NextJS 16

Thm dng cu hnh sau vo next.config.ts:

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

Ci thm plugin cn thit:

npm install babel-plugin-react-compiler@latest

Trc khi dng React Compiler: Bn thng phi memo ha th cng trnh render li khng cn thit.

import { useMemo, useCallback, memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
  const processedData = useMemo(() => {
    return expensiveProcessing(data);
  }, [data]);

  const handleClick = useCallback((item) => {
    onClick(item.id);
  }, [onClick]);

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
});

y, chng ta phi dng memo, useMemo, v useCallback trnh component render li mi khi data hoc onClick thay i.

Sau khi bt React Compiler: Ton b logic ti u ny c React t ng x l code tr nn gn hn rt nhiu.

function ExpensiveComponent({ data, onClick }) {
  const processedData = expensiveProcessing(data);

  const handleClick = (item) => {
    onClick(item.id);
  };

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
}

Gi bn ch cn tp trung vit logic chnh. React Compiler s lo vic ghi nh (memoize) kt qu tnh ton v trnh render tha cho hiu sut cao m khng cn can thip th cng.

Partial Prerendering (PPR) & Cache Components

Khi nim

• Vi PPR, bn c th kt hp ni dung tnh v ng trong cng mt route: phn v ca trang c prerender (hoc cache) v gi ngay, sau cc phn ng c load hoc streaming vo.

• Tnh nng Cache Components cho php bn nh du nhng phn d liu hoc UI c th c cache t a chng vo prerender pass cng vi cc phn tnh ca trang.

• Khi bt, NextJS s xem tt c route di dng dynamic mc nh, nhng nh Cache Components th bn vn c th chn cache cc thnh phn y phn tnh ra sm, phn ng x l sau.

Cch hot ng & li ch

• Khi ngi dng truy cp mt route: server tr nhanh phn shell (v) c ni dung c cache/prerender; cc phn ng thng c t trong Suspense hoc tng t tr fallback trc ri b thay th khi d liu/dynamic component sn sng.

• Kt qu l: thi gian ti first byte (TTFB) ngn hn; ngi dng nhn thy nhanh; phn ng vn c th c nhn ha hoc cp nht real-time khi cn.

• V d in hnh: trang sn phm c nav + thng tin sn phm (tnh) v gi hng + xut sn phm (ng). Phn tnh c prerender, phn ng s streaming.

Cch s dng c bn

• Trong file route/layout/component bn c th s dng directive 'use cache' u file hoc component bt caching cho phn .

    // example.tsx
    'use cache';
    export default async function CachedSection() {
      const data = await fetch(...); // d liu c th cache
      return <div>{data.someField}</div>;
    }
  

• Cu hnh trong next.config.js nu cn bt cc tnh nng th nghim nh PPR hoc use-cache:

    // next.config.js
    module.exports = {
      experimental: {
        ppr: true,
        useCache: true,
      },
    };
  

• S dng cc API fetch vi options nh next: { revalidate: } kim sot cp nht cache.

Nhng lu

• PPR hin vn c gn mc experimental (tu phin bn) nn cha khuyn khch s dng rng ri trong production.

• Khi dng caching: cn cn nhc tnh ti mi (fresh data) ca d liu, v cache lu qu c th dn ti hin th d liu li thi. Revalidation (nh thi hoc theo tag) lun l phn quan trng.

• Khi dng directive 'use cache', cc hm/tr v ca chng phi c tnh tham chiu r rng (cc tham s serializable) key cache c xc nh ng.

V d: Gi s bn c trang sn phm kiu e-commerce

// app/product/[id]/page.tsx
import { Suspense } from 'react';

export default async function ProductPage({ params }) {
  const { id } = params;

  // Thnh phn tnh / c th cache
  const product = await fetch(`/api/product/${id}`, { next: { revalidate: 3600 } });

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>

      {/* Thnh phn ng: gi hng, neri sn phm */}
      <Suspense fallback={<div>Loading cart & recommendations</div>}>
        <Cart userId={/* t cookie */} />
        <Recommendations productId={id} />
      </Suspense>
    </div>
  );
}

y: phn name/description c cache/prerender; phn Cart v Recommendations c render ng sau, nh ngi dng nhanh nhn thy ni dung chnh, phn ph ti sau.

🧠 NextJS DevTools MCP

Mt im mi th v trong NextJS 16 l NextJS DevTools MCP tch hp theo chun Model Context Protocol (MCP), gip AI c th hiu r ng cnh ng dng ca bn khi debug.

Thay v phi t ln m qua log hay stack trace, DevTools MCP cho php AI agent (nh ChatGPT hoc cng c tng t) truy cp trc tip vo thng tin ni b ca ng dng ang chy phn tch v h tr gi fix li thng minh hn.

🔍 AI DevTools hiu c nhng g?

• Kin thc v NextJS: nm r cch routing, caching v rendering hot ng.

• Log hp nht: t ng thu thp c log t trnh duyt v server khng cn chuyn tab.

• Truy cp li t ng: ly chi tit stack trace v error context m bn khng cn copy th cng.

• Hiu ng cnh trang: bit bn ang route no, gip phn hi chnh xc v lin quan hn.

Bn c th xem thm chi tit trong ti liu ti NextJS DevTools MCP docs.

🔀 proxy.ts

proxy.ts thay th cho middleware.ts, r rng v thng nht hn

Trong NextJS 16, file proxy.ts chnh thc thay th cho middleware.ts nhm lm r ranh gii mng (network boundary) ca ng dng v m bo tnh nht qun khi x l request.

Trc y, middleware.ts c th chy trn nhiu runtime khc nhau (Edge hoc Node.js), dn n kh d on hnh vi v mi trng chy. Gi y, proxy.ts lun chy trn Node.js runtime, gip developer d hiu v debug hn.

💡 Cn lm g khi nng cp

• i tn file:

    middleware.ts  proxy.ts
  

• i tn hm export:

    export default function proxy(request: NextRequest) {
      return NextResponse.redirect(new URL('/home', request.url));
    }
  

• Logic x l trong file gi nguyn, ch cn i tn cho ph hp.

L do thay i

• Tn proxy r ngha hn: phn nh ng vai tr chn, chuyn hng, hoc x l request trc khi ti route chnh.

• Runtime thng nht: ch chy trn Node.js, gip trnh nhm ln gia mi trng Edge v server truyn thng.

🧭 Lu :

• middleware.ts vn tm thi c h tr cho Edge runtime, nhng deprecated v s b loi b trong phin bn tng lai.

• Hy sm chuyn sang proxy.ts m bo tng thch lu di.

Xem thm hng dn chi tit ti y

🔁 Fast Refresh mi

Ai code React cng bit cm gic ny: sa file lu i reload vi trm mili giy n vi giy.
Gi th khng cn na.

Vi Fast Refresh mi trong NextJS 16, nh React Compiler v Turbopack, mi khi bn lu file:

• Code c bin dch li gn nh ngay lp tc.

• Trng thi component c gi nguyn.

V d: bn ang dev form hoc counter thay i UI, nhn save trnh duyt cp nht ngay tc th m khng reset d liu.

Turbopack Updates

NextJS 16 tip tc ci thin Turbopack, trnh build th h mi thay th Webpack.
Hiu nng build gi nhanh hn ti 40%, c bit vi project ln hoc monorepo.

Bn c th cm nhn ngay khi chy:

npx create-next-app@latest my-app

Turbopack l build engine mc nh, khng cn ci thm g c.
V nu bn tng chu kh vi Webpack build lu, bn s thch Turbopack ngay t ln u chy.

React 19 Support

NextJS 16 c xy dng hot ng mt m cng React 19.
iu ny gip tn dng y cc tnh nng mi:

• Actions & Form Handling: gi form v thc thi logic m khng cn fetch th cng.

• Async Context: chia s d liu bt ng b d dng.

• Ci tin Hooks: gip code React d qun l hn.

💻 DX & Build Improvements

Vercel tip tc u t mnh vo DX (Developer Experience):

• 

  Thng bo li r rng, d hiu.

• Log build chi tit hn.

• Gi fix khi cu hnh sai.

• Tch hp tt hn vi VS Code v TypeScript.

 Next.js 16 (Turbopack)

  Compiled successfully in 615ms
  Finished TypeScript in 1114ms
  Collecting page data in 208ms
  Generating static pages in 239ms
  Finalizing page optimization in 5ms

🧾 Improved Caching APIs

Trong NextJS 16, h thng cache c tinh chnh mnh m hn vi cc API mi v ci tin, gip dev kim sot r rng cch d liu c lu, lm mi v cp nht trong ng dng.

Ba API ni bt trong ln cp nht ny gm: revalidateTag() (c nng cp), updateTag() (mi), v refresh() (mi).

revalidateTag() h tr stale-while-revalidate (SWR)

API ny c cp nht bn c th ch nh profile cacheLife gip d liu c vn c tr v ngay lp tc trong khi NextJS ngm revalidate background.

import { revalidateTag } from 'next/cache';

//  Dng profile c sn (gi  dng 'max' cho hu ht trng hp)
revalidateTag('blog-posts', 'max');

// Hoc chn profile khc
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');

// Ty chnh thi gian revalidate th cng
revalidateTag('products', { revalidate: 3600 });

//  Deprecated: dng c ch truyn 1 tham s
revalidateTag('blog-posts');

Cc profile ('max', 'hours', 'days') c th c nh ngha sn trong next.config.
Khi ngi dng request d liu c tag tng ng, NextJS tr cache ngay v lm mi background, gi tri nghim nhanh m vn m bo d liu khng qu c.

👉 Dng revalidateTag() cho cc ni dung tnh (v d: blog, news feed, sn phm) ni bn chp nhn tr nh khi cp nht i ly tc ti nhanh.

Hng dn nng cp:
Nu bn ang dng revalidateTag('tagName'), hy thm tham s th hai (v d 'max') bt SWR behavior.
Nu bn cn hnh vi c ngay sau khi ghi (read-your-writes), hy dng updateTag() thay th.

updateTag() cp nht cache ngay lp tc

y l API mi, dng trong Server Actions, gip invalidate cache v c li d liu mi ngay trong cng request.

Rt hu ch cho cc hnh ng tng tc (form, ci t, cp nht h s, v.v.), ni ngi dng cn thy kt qu thay i ngay lp tc.

'use server';

import { updateTag } from 'next/cache';

export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);

  // Ht hn cache v c li d liu mi ngay
  updateTag(`user-${userId}`);
}

💡 Dng updateTag() khi cn d liu c cp nht trc quan v tc thi, m bo ngi dng thy kt qu mi ngay sau thao tc.

🔄 refresh() lm mi d liu khng cache

Cng dnh cho Server Actions, refresh() gip cp nht li cc phn d liu ng khng c cache m khng nh hng n phn tnh ca trang.

'use server';

import { refresh } from 'next/cache';

export async function markNotificationAsRead(notificationId: string) {
  await db.notifications.markAsRead(notificationId);

  // Lm mi phn hin th s thng bo (khng cache)
  refresh();
}

Dng trong cc trng hp nh:

• Lm mi s lng thng bo cha c.

• Cp nht trng thi online / live metrics.

• Refresh d liu ng m khng cn re-render ton b trang.

Ti liu tham kho

• Next.js 16

Trong thi i mi th u as a Service, vic t trin khai ng dng thng b xem l phc tp, tn thi gian, i hi phi rnh DevOps hoc t nht l bit cch cu hnh server. Nhng ch ! Gi y bn c th t tay trin khai mt ng dng full-stack ch trong vi pht, m chng cn phi chm n dng lnh rc ri no nh Coolify.

Trong bi vit ny, chng ta s cng nhau khm ph:

• Coolify l g v n gip ch g cho developer?

• Cch ci t Coolify ch vi mt dng lnh.

• Cch kt ni Git, trin khai app, v cu hnh mi trng.

• Nhng ng dng bn c th trin khai bng Coolify (Laravel, Next.js, Node.js, v.v.)

• Tips v li khuyn ti u tri nghim Coolify.

Coolify l g?

Coolify l mt nn tng self-hosted PaaS (Platform as a Service) ngha l bn t chy n trn server ca mnh, nhng li c giao din qun l cc k d dng, ging nh tri nghim trn Vercel, Heroku, hay Netlify.

Vi Coolify bn c th:

• T deploy app backend/frontend mt cch t ng, d dng.

• Kt ni thng n GitHub/GitLab.

• Qun l mi trng (ENV), build images bng Docker.

• Theo di logs, trng thi app, restart app d dng.

• M rng server nu cn (h tr Docker Swarm & Traefik).

📌 iu c bit: bn c ton quyn qun l, khng b gii hn ti nguyn hay chnh sch nh cc nn tng m my min ph.

Ti sao nn dng Coolify?

• 🧑💻 Thn thin vi developer: C UI trc quan, khng cn bit nhiu v h tng.

• 💸 Tit kim chi ph: Ch cn 1 VPS gi r (~5-10$/thng), bn c th deploy nhiu app.

• 🛠 T do tuyt i: T host = khng b gii hn, ton quyn qun l app ca mnh.

• 🔒 Bo mt hn: Bn kim sot d liu v h thng ca mnh 100%.

Ci t Coolify nhanh gn trong mt dng lnh

Coolify c xy dng d ci t nht c th. Tt c nhng g bn cn l mt my ch c Docker ci t sn (Ubuntu VPS l gi ph bin).

Cu hnh VPS ti thiu:

• CPU: 2 cores

• Memory (RAM): 2 GB

• Storage: 30 GB of free space

Bc 1: SSH vo server

ssh root@your-vps-ip

Bc 2: Ci Docker (nu cha c)

curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh

Bc 3: Ci t Coolify

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash

💡 Sau khi ci t, bn c th truy cp giao din web qua http://your-server-ip cu hnh ln u. Nu khng vo c, hy thit lp tng la trn VPS vi cc cng 80 v 443 (giao thc TCP).

To ti khon qun tr u tin

Sau khi truy cp trnh duyt, bn s thy giao din ng k ti khon qun tr Coolify. in email v mt khu, sn sng deploy ng dng!

Cch deploy ng dng vi Coolify

Bc 1: Kt ni Git, to Github App

Coolify h tr kt ni vi:

• GitHub

• GitLab

• Gitea (self-hosted)

Sau khi kt ni, bn ch cn chn repo mun deploy.

Bc 2: Cu hnh mi trng

Chn:

• Loi ng dng: Static / Node.js / Laravel / Docker Image

• Cu hnh ENV (API_KEY, DATABASE_URL)

• Ch nh Dockerfile nu c

Bc 3: Trin khai ng dng

Nhn nt Deploy v i vi pht Coolify build + start app cho bn.

🧪 Coolify s t ng detect framework ph bin nh Next.js, Nuxt.js, Laravel, React, v.v.

H thng gim st v logs

Coolify cho php bn:

• Theo di trng thi ng dng theo thi gian thc

• Restart / dng app d dng

• Xem logs h thng ngay trong dashboard

Qun l domain v HTTPS vi Traefik

Coolify tch hp sn Traefik h thng reverse proxy mnh m:

• T ng cp HTTPS vi Lets Encrypt

• Qun l routing cc app qua subdomain

• Khng cn config NGINX th cng 🎉

Mt s mo hu ch khi dng Coolify

• Dng VPS t nht 2 vCPU + 2GB RAM trnh nghn ti nguyn khi chy nhiu app.

• Backup thng xuyn bng chc nng sao lu built-in ca Coolify.

• S dng Coolify CLI qun l nng cao nu cn.

• Trin khai cng Docker Swarm nu mun m rng h thng.

So snh Coolify vi cc nn tng khc

Cc ng dng ph hp vi Coolify

• Laravel

• Node.js / Express

• Next.js / Nuxt.js

• React / Vue (static build)

• WordPress (qua Docker image)

• PostgreSQL, MySQL, Redis, v.v.

Mt s video hng dn c bn

Tham kho ti https://coolify.io/docs/get-started/videos

Nu bn tng ngi deploy v s rc ri hoc thiu kinh nghim DevOps, th Coolify chnh l la chn tt dnh cho bn. Vi mt giao din cc k thn thin, kh nng tch hp Git, h tr Docker mnh m Coolify gip bn lm ch h tng ch vi vi c nhp chut.

Tham kho thm

• Trang chnh thc Coolify

• Ti liu chi tit

• Coolify trn GitHub

🚀 Cursify l g?

Cursify l mt repo m ngun m c xy dng bi React, TypeScrips, Tailwind, Framer motion gip bn to ra hiu ng con tr chut hot nh ty chnh mt cch n gin, nh nhng nhng cc k bt mt. Vi m ngun m, th vin ny khng ch min ph m cn d dng tch hp v chnh sa theo nhu cu ring ca bn.

👉 Bn c th tri nghim trc tip ti y: Cursify

🛠 Cng ngh c s dng

Cursify khng ch p m cn c xy dng trn nn tng nhng cng ngh hin i trong lp trnh frontend:

• React Framework ph bin xy dng giao din ng.

• TypeScript Ngn ng mnh m gip tng tnh n nh v d bo tr.

• Tailwind CSS Framework CSS utility-first gip style ha nhanh chng.

• Framer Motion Th vin hot nh mt m, cc d tch hp vo React.

S kt hp ny gip Cursify khng ch gn nh m cn cc k linh hot, d dng v d custom.

Nhng tnh nng ni bt ca Cursify

• 🔁 Hot nh mt m: Hiu ng chuyn ng mm mi nh Framer Motion.

• 🎨 Ty chnh linh hot: D dng thay i mu sc, hnh dng v hiu ng.

• 🧠 Vit bng TypeScript: Gip gim li v ci thin tri nghim lp trnh.

• 💡 Thit k ti gin: Ph hp vi hu ht phong cch UI hin i.

• Hiu sut cao: Khng lm chm website ca bn (ci ny th tu nha, my trnh duyt khc mnh thy nhanh, tuy nhin s dng Google Chrome li kh git t 1 s custom cursor).

📦 Cch ci t v s dng

Bn c th thm Cursify vo d n React ca mnh ch vi vi bc n gin:

Bc 1: Ci t th vin framer-motion v tailwind

Mt s custom cursor cn s dng th vin framer-motion th nn mnh cn ci n.

npm install framer-motion clsx tailwind-merge

Hoc nu bn dng Yarn:

yarn add framer-motion clsx tailwind-merge

Tng t cho pnpm v bun.

Bc 2: To file utils.ts

// lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Bc 3: Custom cursor

Truy cp Cursify copy custom cursor mnh cn, to hook v import l c th s dng.

📹 Demo

📸 Mt s v d s dng Cursify

• Portfolio c nhn

• Website agency sng to

• Landing page sn phm

• Blog c nhn hin i

🔗 Ti nguyn hu ch

• 🌐 Trang chnh thc (demo)

• 💻 GitHub Repository

• 🧠 Tm hiu thm v Framer Motion

🎯 Kt li

Nu bn ang mun to mt tri nghim ngi dng hin i, bt mt m khng mun mt qu nhiu cng sc, th Cursify chnh l cng c bn nn th ngay. D ci, d dng, li cn p ng kiu chn i cho lp trnh vin front-end.

Hy th tch hp Cursify vo d n tip theo ca bn v cm nhn s khc bit nha! 😎

1. CSS Sprite v Image Sprite l g?

CSS Sprite (hay Image Sprite) l k thut ti u ha hnh nh bng cch gp nhiu hnh nh nh thnh mt tp hnh nh duy nht, sau s dng CSS hin th tng phn hnh nh theo v tr mong mun.

K thut ny gip gim s lng request HTTP khi ti trang, tng tc load website, v ti u hiu sut tng th.

V d: Nu mt trang web c 10 icon nh, thay v ti tng icon mt (10 request HTTP), bn c th gp chng vo mt nh duy nht v ch cn 1 request.

2. Li ch ca CSS Sprite

• Gim s lng HTTP Requests: Gip trnh duyt ti trang nhanh hn bng cch gim s lng file hnh nh cn ti.

• Ci thin hiu sut trang web: t request hn ng ngha vi vic ti nhanh hn, c bit quan trng vi cc website c nhiu hnh nh nh nh menu, icon, button,...

• Tit kim bng thng: V tt c hnh nh gp chung vo mt file, tng dung lng ti xung c th nh hn so vi ti tng nh ring l.

• Gip website thn thin vi SEO: Google nh gi cao tc ti trang, t ci thin th hng trn cng c tm kim.

3. Cch to v s dng CSS Sprite

Bc 1: Gp nhiu hnh nh thnh mt file duy nht

Bn c th t to mt file sprite bng cch s dng phn mm Photoshop, Figma, hoc cc cng c online nh:
👉 CSS Sprite Generator
👉 Sprite Cow

V d: Gp 3 hnh nh icon-home.png, icon-user.png, icon-search.png vo mt nh sprite.png:

sprite.png
-----------------
|  icon-home    |
|  icon-user    |
|  icon-search  |
-----------------

Bc 2: Xc nh v tr tng hnh nh trong file sprite

Sau khi c file sprite.png, bn cn xc nh ta (X, Y) ca tng hnh nh bn trong file ny.

V d:

• icon-home.png nm v tr (0, 0)

• icon-user.png nm v tr (0, 50px)

• icon-search.png nm v tr (0, 100px)

Bc 3: S dng CSS hin th hnh nh

Bn c th s dng background-position hin th tng hnh nh ring l t file sprite.

.sprite {
    background-image: url('sprite.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px; /* Kch thc icon */
    height: 50px;
}

.icon-home {
    background-position: 0 0;
}

.icon-user {
    background-position: 0 -50px;
}

.icon-search {
    background-position: 0 -100px;
}

Bc 4: p dng vo HTML

By gi, bn ch cn thm cc class vo HTML hin th ng hnh nh:

<div class="sprite icon-home"></div>
<div class="sprite icon-user"></div>
<div class="sprite icon-search"></div>

4. Cng c h tr to CSS Sprite

Di y l mt s cng c gip bn to CSS Sprite nhanh chng:

• CSS Sprite Generator

• Sprite Cow Gip ly ta ca tng nh trong file sprite

• Glue Cng c mnh m to sprite bng Python

5. Khi no nn s dng CSS Sprite?

• Website c nhiu icon nh: Nh menu, button, social media icon,...

• Mun ti u tc ti trang: CSS Sprite gip gim thi gian ti trang ng k.

• Khng cn nh ng (GIF) hoc nh c trong sut cao (PNG transparency): V i khi sprite c th lm mt hiu ng trong sut ca nh PNG.

6. Lu khi dng CSS Sprite

• Khng ph hp vi nh ln hoc nh c nhiu mu sc khc nhau: CSS Sprite thch hp vi cc hnh nh nh, t chi tit hn.

• Cn cp nht ton b sprite khi thay i mt nh nh: Nu cn thay i mt icon trong sprite, bn phi cp nht li ton b file sprite.

• C th gy kh khn cho vic qun l m ngun: Khi c qu nhiu hnh nh trong mt sprite, vic tm v chnh sa c th mt nhiu thi gian.

7. Kt lun

CSS Sprite l mt k thut ti u ha hnh nh cc k hiu qu gip gim HTTP request, tng tc ti trang v ci thin hiu sut website. Nu bn ang qun l mt trang web c nhiu hnh nh nh, hy p dng CSS Sprite gip trang ca bn nhanh hn v mt m hn.

GetOutline l mt nn tng qun l ti liu m ngun m, gip cc i nhm, t chc chia s kin thc mt cch khoa hc. Cng c ny c thit k thay th cc gii php truyn thng nh Google Docs hay Notion, nhng vi giao din ti gin, tc nhanh v kh nng ty chnh mnh m.

Nu bn ang tm kim mt gii php lu tr ti liu ni b, cng tc hiu qu v d dng truy xut thng tin, th GetOutline l la chn ng cn nhc.

Nhng tnh nng ni bt

1. Qun l ti liu khoa hc

GetOutline cho php bn to, sp xp v phn loi ti liu theo th mc hoc ch . Bn c th d dng ko th sp xp li ti liu theo mun.

2. Giao din n gin, d s dng

Khng qu cu k nh mt s nn tng khc, GetOutline tp trung vo tri nghim ngi dng vi giao din ti gin, trc quan, gip bn d dng to v chnh sa ti liu nhanh chng.

3. Tm kim thng minh

Vi tnh nng tm kim mnh m, bn c th tm thy ti liu mong mun trong tch tc, ngay c khi c hng trm ti liu khc nhau.

4. Tch hp vi cc cng c khc

GetOutline h tr tch hp vi Slack, Trello, Google v nhiu nn tng khc, gip bn d dng lm vic lin mch gia cc cng c.

5. Phn quyn truy cp linh hot

Bn c th kim sot ai c th xem, chnh sa hoc qun l ti liu. iu ny gip bo mt thng tin v trnh nhng chnh sa khng mong mun.

6. H tr markdown

Nu bn l ngi yu thch Markdown, GetOutline cung cp trnh son tho h tr c php ny, gip bn nh dng ti liu mt cch nhanh chng.

7. Trin khai linh hot (Cloud & Self-hosted)

Bn c th s dng GetOutline trn m my (Cloud) hoc t trin khai trn my ch ca mnh kim sot d liu mt cch tt nht.

Li ch khi s dng GetOutline

Nng cao hiu sut lm vic nhm: Cc thnh vin c th d dng truy cp v cng tc trn ti liu.
Tit kim thi gian tm kim: H thng tm kim thng minh gip bn nhanh chng tm thy thng tin cn thit.
Bo mt d liu tt hn: Kim sot quyn truy cp gip bo v ti liu quan trng.
Tch hp mt m vi cc cng c khc: Gip cng vic tr nn linh hot v hiu qu hn.

So snh GetOutline vi cc cng c khc

Nh vy, nu bn cn mt cng c m ngun m, h tr Markdown, v c th trin khai t qun l, bo mt ti liu th GetOutline l mt la chn tuyt vi so vi Notion hay Google Docs.

i tng s dng

🔹 Doanh nghip & Startup: Qun l ti liu ni b mt cch khoa hc.
🔹 Nhm pht trin phn mm: Tch hp vi Slack v h tr Markdown rt tin li.
🔹 C nhn mun ghi ch hiu qu: Giao din n gin, d s dng.
🔹 T chc gio dc & nghin cu: D dng chia s ti liu v kin thc.

Bt u vi GetOutline

1 Truy cp trang web chnh thc ti getoutline.com
2 To ti khon min ph hoc ti v phin bn self-hosted
3 Bt u to v qun l ti liu
4 Tch hp vi cc cng c khc ti u quy trnh lm vic

Kt lun

GetOutline l mt la chn tuyt vi nu bn ang tm kim mt cng c ghi ch v qun l ti liu mnh m, linh hot v d s dng. Vi nhng tnh nng nh h tr Markdown, phn quyn linh hot, tch hp vi Slack v kh nng t trin khai, n ph hp cho c c nhn, i nhm v doanh nghip.

Docusaurus l mt cng c to trang web tnh m ngun m da trn React, ni ting vi kh nng to ti liu, blog, trang web marketing v ng dng web mt trang mt cch nhanh chng v d dng. im mnh ca Docusaurus nm giao din tch hp sn, ti liu chi tit, hng dn s dng, v cng ng ngi dng ln sn sng h tr.

Nu bn ang tm kim mt template hon chnh bt u nhanh chng, th docusaurus-tailwind-shadcn-template l mt la chn tuyt vi.

📌 Repo Github: docusaurus-tailwind-shadcn-template

👉 Demo: https://docusaurus-tailwind-shadcn-template.vercel.app/

Template ny tch hp

• Docusaurus V3

• 🎨 TailwindCSS (H tr v3 & v4)

• 🧩 Shadcn/UI

• 🔍 Tnh nng tm kim bi @easyops-cn/docusaurus-search-local plugin

• 📝 H tr t ng to API docs nh @PaloAltoNetworks/docusaurus-openapi-docs plugin

• 📱 Hon ton responsive

• 🌗 H tr chuyn theme sng/ti

gip bn d dng ty chnh giao din, vit docs chuyn nghip, v m rng vi cc tnh nng mnh m.

🎯 Tnh nng chnh

H tr vit Docs & API Docs: D dng to ti liu chuyn nghip.
H thng Blog: Vit bi blog c nhn ngay trong Docusaurus.
Giao din hin i: S dng TailwindCSS & ShadCN UI.
D dng ty chnh: Thay i theme, cu trc m khng cn qu nhiu chnh sa.
Trin khai d dng: H tr deploy trn Vercel, Netlify, Cloudflare Pages...

🚀 Cch ci t v s dng

1 Clone Repository

Trc tin, bn cn clone repo v my:

git clone https://github.com/namnguyenthanhwork/docusaurus-tailwind-shadcn-template.git
cd docusaurus-tailwind-shadcn-template

Chn nhnh ph hp vi nhu cu s dng ca bn:

• Template Docusaurus (docs v blog) vi Tailwind v3: feature/docusaurus-tailwind-v3

• Template Docusaurus (docs, api docs v blog) vi Tailwind v3: feature/docusaurus-tailwind-v3-openapi-docs

• Template Docusaurus (docs v blog) vi Tailwind v4: feature/docusaurus-tailwind-v4

• Template Docusaurus (docs, api docs v blog) vi Tailwind v4: feature/docusaurus-tailwind-v4-openapi-docs

2 Ci t Dependencies

S dng npm hoc yarn ci t cc package cn thit:

npm install
# Hoc dng Yarn
yarn install

3 Chy d n

Sau khi ci t xong, chy lnh sau khi ng Docusaurus:

npm start
# Hoc dng Yarn
yarn start

M trnh duyt v truy cp http://localhost:3000/ xem kt qu.

Cch vit docs v blog

1. Vit ti liu (Docs)

Docs c lu trong th mc /docs. thm ti liu mi:

1. Vo th mc docs/

2. To file .md hoc .mdx

3. Thm ni dung Markdown

2. Vit ti liu API (API Docs)

Template c tch hp plugin docusaurus-plugin-openapi-docs gip t ng to API docs da vo 1 file .yaml

Cch cu hnh bn c th tham kho https://docusaurus-openapi.tryingpan.dev/

3. Vit blog

Cc bi vit blog nm trong th mc /blog. to bi vit mi:

1. Vo th mc blog/

2. To file .md hoc .mdx

3. Vit ni dung

🎨 Tu chnh giao din

Chnh sa mu sc trong Tailwind

• Trong Tailwind v3, cp nht trong tailwind.config.js.

• Trong Tailwind v4, chnh sa trong src/css/custom.css.

• Cp nht bin CSS trong src/css/custom.css.

Ty chnh cc component ca Shadcn/UI

• Chnh sa cc thnh phn trong th mc src/components/ui/.

V d:

To mt button ty chnh trong Docusaurus:

// src/components/ui/custom-button.tsx
import { Button } from './button';

export function CustomButton({ children }) {
  return (
    <Button className="custom-styles">
      {children}
    </Button>
  );
}

Ghi cc component ca Docusaurus

Bn c th ghi cc component bng cch Swizzling. Xem thm v Component Swizzling.

🎯 Kt lun

Nu bn ang tm kim mt template chuyn nghip vit ti liu, API docs hoc blog c nhn, docusaurus-tailwind-shadcn-template l mt la chn tuyt vi. Vi Docusaurus, TailwindCSS v ShadCN UI, bn c th to mt trang web ti liu chuyn nghip m khng cn qu nhiu cng sc.

👉 Dng th ngay: GitHub Repo

🔗 Ti nguyn tham kho:

• Docusaurus Docs

• TailwindCSS Docs

• ShadCN/UI

• OpenAPI Docs

Chc bn thnh cng! 🎉

Kt hp vi TailwindCSS l mt framework CSS tin dng, tp trung vo vic cung cp cc utility classes (lp tin ch) bn d dng xy dng giao din m khng cn vit qu nhiu CSS ty chnh. Khc vi cc framework truyn thng nh Bootstrap, Tailwind khng cung cp cc thnh phn sn c, thay vo , bn s t do "xy dng mi th" da trn cc utility classes nh bg-blue-500, text-center, hoc flex.

Shadcn/UI l mt th vin giao din hin i c xy dng da trn TailwindCSS. Thay v ch cung cp cc lp tin ch, Shadcn/UI mang n cc thnh phn (components) sn c nh Button, Input, Dropdown, Modal,... vi thit k p mt, c th d dng ty chnh v m rng.

S kt hp ny gip bn to ra cc trang web v ng dng web khng ch p mt, hin i m cn d s dng, mang n tri nghim tuyt vi cho ngi dng.

Hy cng tham kho bi vit di y tch hp TailwindCSS v Shadcn/UI vo Docusaurus.

Thit lp ban u

V Shadcn/UI c khng c xy dng cho Docusaurus nn chng ta s cn thc hin mt s iu chnh n hot ng vi Docusaurus.

u tin, hy to mt d n Docusaurus mi nu bn cha c:

npx create-docusaurus@latest my-website classic
cd my-website

Ci t cc ph thuc cn thit:

npm install tailwindcss tailwindcss-animate postcss autoprefixer class-variance-authority tailwind-merge lucide-react

Cu hnh Tailwind CSS

To file tailwind.config.js th mc gc ca d n:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './docs/**/*.{js,jsx,ts,tsx}',
    './blog/**/*.{js,jsx,ts,tsx}'
  ],
  darkMode: ['class', '[data-theme="dark"]'], // Support Docusaurus dark mode
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))'
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))'
        }
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: 'calc(var(--radius) - 4px)'
      }
    }
  },
  plugins: [require('tailwindcss-animate')]
}

To file postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

Thit lp CSS

To file src/css/custom.css hoc chnh sa nu tn ti, y l ni bn to theme ca Shadcn/UI.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  html[data-theme='dark'] {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

To th mc Utils

To src/lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

To Shadcn/UI Components

Lu : do Shadcn/ui khng xy dng dnh cho Docusaurus nn bn khng th ti cc component bng CLI, thay vo l bn sao chp cc component mt cch th cng.

Cc bc thm bao gm:

• To mt th mc cha component: src/components/ui

• Copy cc component trn Shadcn/ui.

• iu chnh ng dn import cho ph hp v ti cc packages nu component yu cu.

V d: Button component (src/components/ui/button.tsx)

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '../../lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
        outline:
          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline'
      },
      size: {
        default: 'h-9 px-4 py-2',
        sm: 'h-8 rounded-md px-3 text-xs',
        lg: 'h-10 rounded-md px-8',
        icon: 'h-9 w-9'
      }
    },
    defaultVariants: {
      variant: 'default',
      size: 'default'
    }
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'
    return (
      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
    )
  }
)
Button.displayName = 'Button'

export { Button, buttonVariants }

To plugin Tailwind CSS

To file cu hnh Tailwind trong src/plugins/tailwind-config.js

module.exports = function tailwindPlugin(context, options) {
  return {
    name: 'tailwind-plugin',
    configurePostCss(postcssOptions) {
      postcssOptions.plugins = [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer')
      ]
      return postcssOptions
    }
  }
}

Cp nht cu hnh Docusaurus

iu chnh file docusaurus.config.js, thm plugin Tailwind bn va to.

plugins: [
    ['./src/plugins/tailwind-config.js', {}],
]

S dng

By gi bn c th s dng cc components ca Shadcn/ui trong d n Docusaurus ca mnh.

import React from 'react';
import { Button } from '../components/ui/button';

export default function Home() {
  return (
    <div className="p-4">
      <Button>Click me</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Settings</Button>
    </div>
  );
}

Demo

Bn c th thao kho repo docusaurus-tailwind-shadcn-template m mnh to. Trong d n ny tch hp TailwindCSS & Shadcn/UI vo Docusaurus. Bn cnh , mnh custom li giao din, to 1 plugin gip em blog hin th ngoi homepage.

👉 Xem thng tin chi tit repo README.md

📌 Repository: https://github.com/namnguyenthanhwork/docusaurus-tailwind-shadcn-template

🚀 Demo: https://docusaurus-tailwind-shadcn-template.vercel.app/

Hy ng h 1 nu bn yu thch n. Cm n nh

Ti to li (reproduce) l mt bc quan trng trong qu trnh sa li phn mm. Khi ngi dng hoc tester bo co li, i ng lp trnh cn thc hin li cc bc chnh xc hoc thit lp mi trng ging nh ngi bo co li xut hin ln na. iu ny gip xc minh li thc s tn ti v cung cp thng tin y gii quyt vn .

Tuy nhin, vic ti to li c th tr nn phc tp nu thiu thng tin chi tit. y chnh l lc Jam.dev tr thnh cng c c lc gip qu trnh ny tr nn nhanh chng v d dng hn.

Ti sao Jam.dev l cng c h tr reproduce li?

Jam.dev c thit k c bit ti u ha qu trnh bo co v ti to li. Thay v mt hng gi trao i vi tester hoc ngi dng thu thp thng tin, Jam.dev t ng ghi nhn mi d liu quan trng ngay khi li xy ra. iu ny gip lp trnh vin khng ch d dng reproduce li m cn tit kim rt nhiu thi gian.

Jam l g?

Vi Jam, ch vi mt c nhp chut, bn c th: chp nh mn hnh, quay video hoc ghi li ngay lp tc v Jam s ngay lp tc to mt lin kt chia s vi nhm ca bn.

Khi s dng Jam, chng s ghi nhn tt c thng tin chn on k thut m nhm k thut ca bn cn g li nhanh chng, chng hn nh yu cu mng, nht k giao din iu khin, thng tin thit b v thm ch tc mng! Tt c u c ghi li bn khng cn phi ti to hoc tm kim chn on k thut trc khi bo co li.

Cc tnh nng ni bt ca Jam.dev trong qu trnh reproduce:

1. Ghi nhn y thng tin k thut

   • nh chp mn hnh hoc video li.

   • Log console chi tit.

   • D liu mng (Network logs).

   • Thng tin h thng nh trnh duyt, h iu hnh, v phin bn phn mm.

2. Bo co li ch trong mt c nhp chut
   Tester hoc ngi dng ch cn nhn nt "Jam" trn tin ch m rng ca trnh duyt, v bo co li c t ng gi km theo y thng tin cn thit.

3. Tch hp vi cc cng c ph bin
   Jam.dev d dng tch hp vi Jira, Trello, Slack, gip i ng pht trin c th x l li trong cc nn tng m h quen thuc.

4. T ng chuyn giao mi trng:
   Khi lp trnh vin nhn c bo co li t Jam.dev, h c th nhanh chng ti to li trong mi trng c thit lp ging ht vi mi trng m li xy ra.

Quy trnh Reproduce li vi Jam.dev

Bc 1: Ci t Jam.dev

u tin, ci t tin ch m rng Jam.dev trn trnh duyt ca bn. Bn c th ti v ti Jam.dev.

Bc 2: Bo co li

Khi mt tester hoc ngi dng gp li, h ch cn nhn vo biu tng Jam trn trnh duyt. Cng c ny s:

• Chp li nh mn hnh ca li.

• Ghi nhn thng tin log console.

• Lu tr d liu mng v thng tin h thng.

Bc 3: Tch hp vi cc cng c qun l d n

Bo co li t Jam.dev s c t ng gi n cc cng c qun l d n nh Jira, Trello, hoc Slack, ni i ng pht trin c th d dng truy cp v x l.

Bc 4: Ti to li (Reproduce)

Khi lp trnh vin nhn c bo co li t Jam.dev, h c th s dng d liu chi tit ti to li li, bao gm:

• Lm theo cc bc trong bo co.

• Kim tra log console v d liu mng hiu r nguyn nhn.

• Th nghim trn mi trng ging nh trong bo co xc minh vn .

Bc 5: Sa li (Fix bug)

Sau khi ti to li thnh cng, lp trnh vin c th nhanh chng xc nh nguyn nhn v trin khai bn sa li (patch).

Li ch ca Jam.dev trong qu trnh Reproduce

1. Tit kim thi gian

   • Khng cn yu cu thm thng tin t ngi bo co li.

   • Lp trnh vin c th bt u lm vic ngay lp tc vi d liu chi tit.

2. Gim thiu sai st

   • Jam.dev t ng ghi nhn ton b d liu quan trng, trnh trng hp ngi dng hoc tester qun cung cp thng tin cn thit.

3. Ci thin giao tip gia cc i ng

   • Bo co li r rng v d hiu, gip gim thi gian trao i gia tester v lp trnh vin.

4. Ti to li trn nhiu mi trng:

   • Jam.dev cho php lp trnh vin d dng kim tra li trn cc mi trng ging ht nh mi trng xy ra li (nh trnh duyt c th hoc phin bn h iu hnh).

V d thc t v s dng Jam.dev Reproduce li

🧑💻 Tnh hung gi nh:

Mt ngi dng bo co rng trang web b crash khi h nhp vo nt "ng k".

Bt u quy trnh vi Jam.dev

1. Ngi dng nhn vo nt "Jam" bo co li.

2. Jam.dev t ng ghi nhn

   • nh chp mn hnh lc trang web crash.

   • Log console vi chi tit li JavaScript.

   • D liu mng v cc API c gi ti thi im li.

   • Thng tin trnh duyt v h iu hnh.

3. Bo co li c gi n Jira, ni lp trnh vin nhn c y thng tin.

4. Lp trnh vin ti bo co t Jam.dev, kim tra log console, v th li trn trnh duyt ca h. Sau khi lm theo cc bc trong bo co, h ti to c li v bt tay vo sa.

Kt lun

Vic ti to li (reproduce) l mt phn quan trng trong quy trnh sa li, v Jam.dev gip n gin ha cng vic ny n mc ti a. Vi cc tnh nng nh t ng thu thp d liu, tch hp cng c qun l d n, v h tr lp trnh vin ti to li chnh xc, Jam.dev khng ch tit kim thi gian m cn nng cao hiu qu lm vic ca nhm.

free-for.dev l g?

free-for.dev l mt danh sch tng hp cc cng c, dch v v ti nguyn min ph dnh ring cho lp trnh vin. Nn tng ny bt u t mt kho lu tr trn GitHub, v qua thi gian, n tr thnh mt ngun ti nguyn ng tin cy v ph bin trong cng ng lp trnh.

Trang web cung cp hng trm cng c c phn loi r rng, bao gm cc dch v in ton m my, c s d liu, API th nghim, cng c CI/CD, v c cc cng c tng nng sut lm vic.

D bn l mt freelancer, startup ang tm kim gii php tit kim chi ph, hay mt sinh vin mun hc hi cng ngh mi, free-for.dev u c th p ng nhu cu ca bn.

Cc tnh nng ni bt ca free-for.dev

Vy iu g khin free-for.dev tr nn c bit? Hy cng khm ph nh!

1. Phn loi ti nguyn r rng

Trang web c t chc rt gn gng vi nhiu danh mc khc nhau, gip bn d dng tm kim cng c ph hp. Mt s danh mc ni bt bao gm:

• Dch v m my: Cc nh cung cp dch v m my min ph nh AWS, Google Cloud, v Azure.

• API: Hng lot API min ph phc v cho th nghim, thu thp d liu, nh v a l, v nhiu hn na.

• C s d liu: Cc gii php SQL v NoSQL min ph nh MongoDB Atlas, Firebase, v PostgreSQL.

• Cng c pht trin: IDE, trnh son tho vn bn, v cng c g li.

• CI/CD: Cc cng c tch hp v trin khai lin tc nh GitHub Actions, Travis CI, v Jenkins.

2. Cp nht thng xuyn

Nh vo s ng gp t cng ng, danh sch ti nguyn trn free-for.dev lin tc c lm mi, m bo rng bn lun c trong tay cc cng c mi nht.

3. M t chi tit

Mi cng c u i km vi m t ngn gn, d hiu, gip bn nhanh chng nm c thng tin ct li v quyt nh xem n c ph hp vi nhu cu khng.

4. Da trn cng ng m ngun m

V free-for.dev l mt d n ngun m trn GitHub, bt k ai cng c th ng gp, cp nht, v thm ti nguyn mi. iu ny to ra mt mi trng lun pht trin v minh bch.

Cch s dng free-for.dev hiu qu

free-for.dev cc k d s dng. Di y l cc bc tn dng ti a ti nguyn t trang web ny:

1. Khm ph danh mc: Hy bt u bng cch duyt qua cc danh mc tm cng c ph hp cho d n ca bn.

2. Tm kim nhanh: S dng thanh tm kim tm cc dch v hoc cng c c th.

3. c chi tit: Kim tra thng tin v gii hn v tnh nng ca phin bn min ph hiu r nhng g bn s nhn c.

4. ng gp: Nu bn bit cng c hay dch v min ph mi, hy ng gp cho cng ng thng qua kho GitHub ca free-for.dev.

V sao free-for.dev c yu thch?

Di y l nhng l do khin nn tng ny tr thnh "tr th c lc" ca nhiu lp trnh vin:

• Tit kim chi ph: Nhiu cng c trn free-for.dev cung cp cc tnh nng cao cp trong phin bn min ph, gip bn tit kim mt khon chi ph ng k.

• Tt c trong mt: y l ni tp trung tt c cc cng c m bn cn, gip bn tit kim thi gian tm kim.

• Cng ng h tr: Vic d n c cp nht lin tc bi cng ng gip n lun mi m v ng tin cy.

• Ph hp vi ngi mi: Cc lp trnh vin mi c th th nghim cc cng c cao cp m khng phi lo lng v chi ph.

Kt lun

free-for.dev thc s l mt ngun ti nguyn v gi dnh cho lp trnh vin. Vi hng trm cng c v dch v c phn loi r rng, nn tng ny s gip bn xy dng v trin khai d n mt cch hiu qu nht.

Bn cn chn ch g na? Hy bookmark v khm ph free-for.dev ngay thi!

Nhng SEO khng ch dng li vic "ln top" - n cn gip tng tri nghim ngi dng, ci thin tc ti trang, v gip website ca bn thu ht nhiu lu lng truy cp t nhin (organic traffic) hn.

Hin nay, vi hng triu website ang cnh tranh nhau trn Internet, SEO tr thnh mt phn khng th thiu trong chin lc pht trin website ca bt k doanh nghip hay c nhn no. Ni cch khc, nu khng c SEO, website ca bn d b "chm" trong bin thng tin khng l.

Ti sao SEO li quan trng?

• Tng lng truy cp t nhin (Organic Traffic): SEO gip website ca bn xut hin trn cc trang kt qu tm kim (SERP). Khi ti u tt, website s thu ht khch truy cp t nhin m khng cn chi tin cho qung co qu nhiu.

• Nng cao uy tn: Khi website ca bn xut hin v tr cao trn trang kt qu tm kim, ngi dng s nh gi cao hn v tin cy v chuyn nghip ca bn.

• Tng t l chuyn i: Lng truy cp tng ng ngha vi vic bn c nhiu c hi chuyn i khch hng tim nng thnh khch hng thc t hn.

• Tit kim chi ph: So vi cc hnh thc qung co tr ph, SEO mang li hiu qu lu di v tit kim chi ph hn.

• Ci thin tri nghim ngi dng (User Experience - UX): Mt website thn thin vi SEO thng c tc ti trang nhanh, thit k tng thch vi mi thit b v ni dung d c. iu ny khng ch lm hi lng Google m cn c ngi dng.

• Xy dng thng hiu (Brand Awareness): SEO gip bn xut hin trn top u tm kim, t lm tng nhn din thng hiu v tin cy ca khch hng i vi doanh nghip.

• Phn tch d liu v ti u lin tc: SEO khng phi l "mt ln v mi mi". N yu cu bn theo di cc ch s (nh traffic, thi gian trn trang, t l thot, v.v.) khng ngng ci thin.

SEO hot ng nh th no?

Cc cng c tm kim s dng nhng thut ton phc tp nh gi v xp hng cc website. SEO tp trung vo vic ti u ha cc yu t trn website ca bn p ng c cc thut ton ny. Mt s yu t quan trng trong SEO bao gm:

• Ni dung cht lng: Ni dung c o, hu ch v lin quan n t kha mc tiu s gip website ca bn hp dn c ngi dng v cc cng c tm kim.

• Cu trc website: Mt cu trc website r rng, d iu hng s gip cc cng c tm kim hiu r hn v ni dung ca bn.

• Ti u ha t kha: Vic s dng t kha mt cch hp l trong tiu , m t, ni dung v cc th meta s gip cng c tm kim hiu r hn v ch ca trang.

• Lin kt: Cc lin kt n website ca bn t cc website khc (backlink) s gip tng uy tn v th hng ca website.

• Tc ti trang: Mt website ti nhanh s mang li tri nghim tt hn cho ngi dng v c cc cng c tm kim nh gi cao.

• Tri nghim ngi dng: Thit k giao din thn thin, d s dng v ti u ha cho cc thit b di ng s gip ngi dng li lu hn trn website ca bn.

Cc loi SEO

• SEO On-page: Ti u ha cc yu t bn trong website nh ni dung, cu trc, th meta...

• SEO Off-page: Ti u ha cc yu t bn ngoi website nh xy dng backlink, qung b trn mng x hi...

• SEO k thut: Ti u ha cc yu t k thut ca website nh cu trc URL, cu trc file robots.txt, sitemap...

Cu hnh SEO trong NextJS

NextJS l mt framework React ni bt nh kh nng kt hp SSR (Server-Side Rendering) v SSG (Static Site Generation). iu ny lm cho Next.js tr thnh mt la chn l tng ti u SEO. Di y l cch bn c th cu hnh SEO trong NextJS.

1. Ti u Meta tags

Meta tags nh <title>, <meta description> v cc th Open Graph l yu t ct li ca SEO. Trong NextJS, bn c th s dng next/head thm cc th ny.

V d:

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Gii thiu SEO trong Next.js</title>
        <meta name="description" content="Hng dn ti u SEO vi framework Next.js." />
        <meta name="keywords" content="SEO, Next.js, Ti u website, SSR, SSG" />
        <meta property="og:title" content="Ti u ha SEO trong Next.js" />
        <meta property="og:description" content="Cch s dng Next.js  tng th hng tm kim." />
        <meta property="og:type" content="website" />
      </Head>
      <h1>Welcome to SEO with Next.js</h1>
    </>
  );
}

2. S dng cc chin lc SSR v SSG

• SSR (Server-Side Rendering): Ni dung c render trn server v gi n trnh duyt. iu ny gip cc cng c tm kim d dng "c" ni dung ca bn.

• SSG (Static Site Generation): To cc trang tnh trc ti thi im build, l tng cho cc website c ni dung t thay i.

V d khi s dng getStaticProps cho SSG:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  return {
    props: {
      data,
    },
  };
}

3. Thm Sitemap v Robots.txt

• Sitemap gip cc cng c tm kim hiu cu trc trang web. Bn c th s dng package next-sitemap to t ng hoc to file sitemap.ts trong app.

• Robots.txt hng dn cng c tm kim nn (hoc khng nn) crawl nhng g.

4. Ti u tc ti trang

• Image Optimization: S dng next/image gim kch thc nh.

• Lazy Loading: Ch ti nh khi chng hin th trn mn hnh.

• Code Splitting: Ch ti nhng phn cn thit ca m ngun.

Trong cc d n ln, vic cu hnh SEO mt cch th cng cho tng trang ring l c th rt tn thi gian. May mn thay, NextJS cung cp c ch Layout v generateMetadata (phin bn mi t NextJS 13) gip qun l SEO mt cch linh hot, c bit vi cc dynamic routes.

5. Cu hnh SEO vi Layout trong NextJS

📌 Layout l g?

Trong NextJS, Layout l mt cch chia s cu trc v logic chung cho nhiu trang trong ng dng ca bn. Vi SEO, Layout c th c dng t cc th meta chung nh <title>, <meta description>, th Open Graph (OG), v nhiu hn na.

📌 To Layout trong NextJS

u tin, hy to mt file layout. Nu bn dng NextJS 13+ vi App Directory, file Layout c to cp th mc, v d:

/app
  /blog
    layout.js
    page.js

V d: Cu hnh SEO trong layout.js

// app/blog/layout.js
import React from 'react';
import Head from 'next/head';

export const metadata = {
  title: 'Blog | Website ca bn',
  description: 'Khm ph nhng bi vit mi nht v cng ngh, SEO, v pht trin web!',
  keywords: 'SEO, Next.js, Blog, Cng ngh',
};

export default function BlogLayout({ children }) {
  return (
    <>
      <Head>
        <meta name="author" content="Your Name" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content={metadata.title} />
        <meta property="og:description" content={metadata.description} />
        <meta name="keywords" content={metadata.keywords} />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <main>
        {children}
      </main>
    </>
  );
}

Trong v d ny, Layout s t ng p dng cc th meta c cu hnh cho ton b cc trang nm trong th mc /blog.

6. Cu hnh SEO cho Dynamic Routes vi generateMetadata

📌 Dynamic Routes l g?

Dynamic routes trong NextJS cho php bn to cc trang ng da trn tham s. V d: URL /blog/[slug] c th c s dng hin th bi vit vi slug tng ng.

Khi kt hp vi generateMetadata (mt tnh nng ca NextJS 13+), bn c th to metadata ng cho tng trang.

📌 Cch s dng generateMetadata

Cu trc th mc:

/app
  /blog
    /[slug]
      page.js

To metadata ng da trn slug

Trong page.js, bn c th truy vn d liu t API hoc c s d liu to metadata ph hp cho mi bi vit.

export async function generateMetadata({ params, searchParams }, parent) {
  // read route params
  const id = (await params).id

  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())

  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

export default function Page({ params, searchParams }) {}

7. Tch hp Layout v generateMetadata

Bn c th kt hp c hai phng php trn ti u ton b trang blog. Layout s qun l cc th meta chung, trong khi generateMetadata x l metadata ng cho tng bi vit.

V d tch hp:

// app/blog/[slug]/layout.js
import React from 'react';

export default function PostLayout({ children }) {
  return (
    <div>
      <header>
        <h1>Blog ca ti</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>Bn quyn  2024</p>
      </footer>
    </div>
  );
}

Hy vng bi vit ny cho bn hiu thm c v SEO v cu hnh chng trong NextJS.

CMS l g?

1. nh ngha CMS

CMS l vit tt ca Content Management System, tc H thng qun l ni dung. y l phn mm gip ngi dng d dng to, chnh sa, t chc, v qun l ni dung trn website m khng cn phi am hiu su v lp trnh. CMS nh mt "cng c tt c trong mt", gip mi ngi nhanh chng xy dng v vn hnh mt trang web hon chnh.

2. Mt s v d v CMS

Mt s CMS quen thuc nht hin nay bao gm:

• WordPress (chim hn 40% th phn website ton cu).

• Drupal

• Joomla

• Wix

• Squarespace

• .

Nhng nn tng ny thng c tch hp giao din ko th (drag-and-drop), gip ngi dng xy dng trang web d dng m khng cn k nng lp trnh chuyn su.

CMS truyn thng l g?

CMS truyn thng l m hnh CMS c s dng ph bin t nhiu nm nay, trong backend (ni lu tr v qun l d liu) v frontend (giao din hin th vi ngi dng) c tch hp trong cng mt h thng. Ni cch khc, ni dung c qun l v trnh by trc tip trn mt nn tng duy nht.

Hy tng tng mt CMS truyn thng nh mt chic hp hon chnh: bn trong cha tt c cng c cn thit to ra mt website hoc blog, t vic qun l ni dung, ci t giao din, n hin th trang cho ngi dng cui.

Headless CMS l g?

1. nh ngha Headless CMS

Headless CMS l mt loi CMS khng bao gm "giao din hin th" (frontend) c nh. Thut ng "headless" ngha l n "khng u" phn "u" y m ch giao din ngi dng. Thay v kt ni trc tip ni dung vi giao din, Headless CMS ch tp trung vo vic qun l v cung cp ni dung thng qua API (Application Programming Interface).

Ni cch khc, Headless CMS ging nh mt "nh kho ni dung" m bn c th kt ni vi bt k nn tng no: website, ng dng di ng, thm ch l thit b IoT.

2. Mt s v d v Headless CMS

• Contentful

• Strapi

• Sanity.io

• Prismic

• Ghost ( ch Headless)

Nhng nn tng ny thng c a chung bi cc nh pht trin cn s linh hot trong cch s dng ni dung.

So snh CMS truyn thng v Headless CMS

Khi no nn chn CMS truyn thng hoc Headless CMS?

Bn nn chn CMS truyn thng khi:

• Bn cn xy dng nhanh mt website hoc blog c bn.

• Bn khng c i ng lp trnh vin pht trin.

• Ngn sch d n hn ch.

Bn nn chn Headless CMS khi:

• Bn cn trin khai ni dung trn nhiu nn tng (website, app, IoT).

• Bn c i ng lp trnh vin khi vic ca bn ch l vit content cho web.

• D n yu cu tnh nng phc tp hoc tch hp vi cng ngh hin i.

Mt s lu khi la chn CMS

• Xc nh nhu cu d n: Xem xt d n ca bn c yu cu phc tp khng.

• nh gi kh nng k thut: CMS truyn thng ph hp hn nu bn khng c i ng lp trnh.

• Ngn sch: Nu ngn sch hn ch, CMS truyn thng l la chn an ton hn.

• Kh nng m rng: Headless CMS s ph hp nu bn mun pht trin di hn vi kh nng m rng ln.

Kt lun

La chn gia CMS truyn thng v Headless CMS ph thuc rt nhiu vo mc tiu, yu cu v ngun lc ca bn. CMS truyn thng nh WordPress l la chn tuyt vi cho nhng ai mun n gin ha quy trnh, t mnh thc hin, trong khi Headless CMS li l gii php mnh m cho cc d n hin i, i hi s linh hot v hiu sut cao.

Hy vng bi vit gip bn hiu r hn v hai loi CMS ph bin ny.

Trong bi vit ny, chng ta s khm ph nhng im mi trong Docusaurus v3.6 nh!

Nu bn cha tng bit qua Docusarus, hy c bi vit ny https://blog.thanhnamnguyen.dev/tao-trang-web-voi-docusaurus

im ni bt

Phin bn ny ch yu tp trung vo hiu sut xy dng thng qua d n Docusaurus Faster.

Docusaurus Faster

Mc tiu ca d n Docusaurus Faster l gim thi gian xy dng v tiu th b nh.

• Rspack: Nhanh hn vi trnh ng gi web da trn Rust, thay th gn nh hon ho cho webpack.

• SWC: Trnh bin dch Web nhanh hn, nn tng da trn Rust cho Web (HTML, CSS, JS).

• Lightning CSS: Trnh phn tch c php CSS cc k nhanh, b chuyn i, ng gi v nn.

Gim thi gian build web

Cc php o th nghim trn trang web cho thy bn c th build web nhanh hn t 2 n 4 ln.

Tiu th b nh

Bn cnh , Docusaurus Teams ci thin v vic tiu th b nh nh:

• C s h tng mi tiu th t b nh hn tng th.

• Sa mt li r r b nh quan trng, c bit nh hng n cc trang web i18n.

• Thm cc kim tra CI.

• Thm cng c ni b hiu r hn bc no trong qu trnh xy dng tiu th b nh.

• Loi b mt lnh process.exit(0) c th che giu cc li r r b nh trong m ca bn v cc plugin ca bn th ba.

Cc tc ng khc

• Trnh nn HTML hin s pht ra cnh bo trong trng hp c nh du HTML khng hp l

• Output HTML tnh gim hn ~5%.

• Mt s li c t ng sa bi c s h tng mi.

Hng dn cp nht ln Docusaurus v3.6

cp nht ln phin bn mi nht, bn c th lm theo cc bc n gin sau y:

Cp nht qua npm hoc yarn

M terminal v chy lnh sau cp nht:

npm install @docusaurus/core@latest @docusaurus/preset-classic@latest

Hoc:

yarn add @docusaurus/core@latest @docusaurus/preset-classic@latest

Thm package Docusaurus Faster vo d n:

npm install @docusaurus/faster

Sau khi ci, hy thm

  future: {
    experimental_faster: true,
  },

vo file docusaurus.config.js chy vi Rspack thay v Webpack.

Trong trng hp mt trong cc c tnh nng khng hot ng cho trang web ca bn, bn c th bt cc c tnh nng mt cch c lp nh sau:

 future: {
    experimental_faster: {
      swcJsLoader: true,
      swcJsMinimizer: true,
      swcHtmlMinimizer: true,
      lightningCssMinimizer: true,
      rspackBundler: true,
      mdxCrossCompilerCache: true,
    },
  },

• swcJsLoader: S dng SWC bin dch JS (thay v Babel)

• swcJsMinimizer: S dng SWC nn JS (thay v Terser)

• swcHtmlMinimizer: S dng SWC nn HTML v JS/CSS nhng (thay v html-minifier-terser)

• lightningCssMinimizer: S dng Lightning CSS nn CSS (thay v cssnano v clean-css)

• rspackBundler: S dng Rspack ng gi ng dng ca bn (thay v webpack)

• mdxCrossCompilerCache: Bin dch cc tp MDX mt ln cho c mi trng trnh duyt v Node.js thay v bin dch hai ln

Sau khi thm vo file docusaurus.config.js. Bn hy chy d n ca bn v cm nhn, ng thi, kim tra li cc plugin v kim th sau khi cp nht m bo rng khng c li hoc s c no pht sinh.

1. S dng Proxy Web

Mt trong nhng cch n gin nht truy cp cc trang web b chn l s dng proxy web. Proxy hot ng nh mt trung gian, gip bn truy cp website qua mt my ch khc, t n a ch IP ca bn. Proxy web thng d s dng, ch cn truy cp mt trang proxy, nhp URL ca trang web bn mun vo v bn c th truy cp ngay lp tc.

Li ch ca Proxy:

• D s dng, khng cn ci t.

• C th truy cp ngay t trnh duyt.

Nhc im:

• Tc c th chm.

• Khng an ton bng VPN, d liu c th khng c m ha.

2. Thay i DNS ngay trn trnh duyt

Domain Name System (DNS) l h thng phn gii tn min, v mt s trang web b chn bi cc nh cung cp dch v mng thng qua vic ngn chn DNS. Tuy nhin, bn c th d dng thay i DNS mc nh sang DNS cng cng, nh Google DNS hoc Cloudflare DNS, vt qua vic ny.

2.1. Trn trnh duyt Google Chrome

Bn vo phn Settings Privacy and security Security.

Sau , cun trang xung di, tick chn s dng DNS v chn nh cung cp l Cloudflare (1.1.1.1)

2.2. Trn trnh duyt Microsoft Edge

Bn vo phn Settings Privacy, search, and services, sau bn cun trang xung di, tick chn s dng DNS v chn nh cung cp l Cloudflare (1.1.1.1)

2.3. Trn trnh duyt Cc cc

Bn vo phn Ci t Quyn ring t v bo mt Bo mt.

Sau , cun trang xung di, tick chn s dng DNS v chn nh cung cp l Cloudflare (1.1.1.1)

2.4. Trn trnh duyt Opera

Bn vo phn Settings Privacy & security Security

Sau , cun trang xung di, tick chn s dng DNS v chn nh cung cp l Cloudflare (1.1.1.1)

Kt qu

Hy vng mo nh ny gip bn lt web 1 cch d dng m khng cn s dng n VPN.

1. Scalability (Kh nng m rng)

Kh nng m rng cp n vic h thng c th x l ti tng ln bng cch b sung ti nguyn (nh thm my ch). C hai loi chnh:

• M rng ngang (Horizontal Scaling): Thm nhiu my.

• M rng dc (Vertical Scaling): Tng cng sc mnh ca my hin c.

2. Load Balancer (B cn bng ti)

B cn bng ti c trch nhim phn phi lu lng mng n nhiu my ch khc nhau m bo khng c my ch no b qu ti.

3. Caching (B nh m)

B nh m lu tr bn sao d liu trong mt khu vc tm thi cc yu cu sau c th c phc v nhanh hn.

4. Latency ( tr)

tr l thi gian mt gi d liu di chuyn t ngun n ch. y l thc o quan trng nh gi hiu sut ca h thng.

5. Throughput (Thng lng)

Thng lng l lng d liu m h thng c th x l trong mt khong thi gian nht nh, thng c o bng s yu cu trn giy (RPS).

6. High Availability (HA - Kh nng sn sng cao)

Kh nng sn sng cao cp n h thng c thit k hot ng lin tc m khng b gin on trong thi gian di, thng s dng cc chin lc d phng v chuyn i d phng.

7. Fault Tolerance (Kh nng chu li)

Kh nng chu li l kh nng ca h thng tip tc hot ng bnh thng ngay c khi mt hoc nhiu thnh phn b li.

8. Microservices (Kin trc vi dch v)

Microservices l mt phong cch kin trc trong h thng c chia thnh cc dch v nh, c lp, giao tip vi nhau qua API.

9. Monolithic Architecture (Kin trc n khi)

Tri ngc vi microservices, kin trc n khi kt hp tt c cc thnh phn ca mt ng dng thnh mt chng trnh lin kt cht ch.

10. API Gateway (Cng API)

Cng API l im vo cho cc khch hng truy cp nhiu dch v vi m, gip n gin ha vic giao tip gia chng.

11. CAP Theorem (nh l CAP)

nh l CAP cho rng mt h thng phn tn ch c th m bo hai trong ba thuc tnh:

• Tnh nht qun (Consistency)

• Tnh sn sng (Availability)

• Kh nng chu phn vng (Partition Tolerance).

12. Consistency (Tnh nht qun)

Tnh nht qun m bo rng mi yu cu c s nhn c d liu mi nht sau khi c mt yu cu ghi.

13. Partition Tolerance (Kh nng chu phn vng)

Kh nng chu phn vng cp n kh nng ca h thng tip tc hot ng ngay c khi mt lin lc gia cc my ch.

14. Eventual Consistency (Nht qun cui cng)

Trong cc h thng phn tn, nht qun cui cng c ngha l tt c cc bn sao ca d liu s tr nn nht qun sau mt khong thi gian, mc d khng ngay lp tc.

15. ACID Properties (Thuc tnh ACID)

ACID (Tnh nguyn t, Nht qun, C lp, Bn vng) l tp hp cc thuc tnh m bo cc giao dch trong c s d liu c x l mt cch ng tin cy.

16. BASE Model (M hnh BASE)

BASE (Kh nng sn sng c bn, Trng thi mm, Nht qun cui cng) l mt s thay th cho ACID, thng c s dng trong cc c s d liu NoSQL.

17. Load Shedding (Gim ti)

Gim ti l mt c ch s dng gim bt khi lng cng vic trn h thng bng cch loi b hoc u tin cc yu cu nht nh duy tr s n nh.

18. Data Replication (Nhn bn)

Nhn bn l qu trnh sao chp d liu t mt v tr sang mt v tr khc ci thin tnh sn sng v kh nng chu li.

19. Database Sharding (Phn mnh c s d liu)

Phn mnh c s d liu l qu trnh chia mt c s d liu ln thnh cc mnh nh hn, d qun l hn c gi l "shards".

20. NoSQL

NoSQL l loi c s d liu c thit k x l khi lng ln d liu khng c cu trc, thng linh hot hn cc c s d liu quan h truyn thng.

21. SQL (Structured Query Language - Ngn ng truy vn c cu trc)

SQL l ngn ng tiu chun dng tng tc vi c s d liu quan h, chng hn nh truy vn v thay i d liu c cu trc.

22. Master-Slave Architecture (Kin trc Ch-T)

Trong m hnh ny, my ch ch x l tt c cc yu cu ghi, trong khi cc my ch t sao chp d liu t ch v phc v cc yu cu c.

23. Leader Election (Bu chn lnh o)

Bu chn lnh o l qu trnh trong cc h thng phn tn m cc nt ng chn mt nt duy nht ng vai tr lnh o cho vic iu phi.

24. Heartbeats (Nhp p)

Nhp p l cc tn hiu nh k c gi gia cc nt xc nhn rng chng vn hot ng v ang hot ng tt.

25. Pub/Sub (Publish/Subscribe - ng k/Pht hnh)

Pub/Sub l m hnh nhn tin m ngi gi pht hnh cc thng bo m khng bit ngi nhn, v ngi nhn ng k nhn cc ch thng bo c th.

26. Message Queue (Hng i tin nhn)

Hng i tin nhn l mt dng giao tip khng ng b, ni cc thng bo c lu tr trong hng i v x l theo th t vo trc ra trc (FIFO).

27. Rate Limiting (Gii hn tn sut)

Gii hn tn sut kim sot s lng yu cu m mt khch hng c th gi n dch v, ngn nga lm dng v m bo tnh n nh.

28. Circuit Breaker Pattern (Mu ngt mch)

Mu ngt mch ngn chn h thng c gng thc hin mt hot ng c kh nng tht bi, cho php thi gian phc hi.

29. Content Delivery Network (CDN - Mng phn phi ni dung)

CDN l mt mng li cc my ch phn tn cung cp ni dung cho ngi dng da trn v tr a l ca h, gip ci thin thi gian ti.

30. DDoS (Distributed Denial of Service - Tn cng t chi dch v phn tn)

DDoS l cuc tn cng khi nhiu h thng lm ngp bng thng hoc ti nguyn ca mt h thng mc tiu, lm cho n khng th phc v ngi dng.

31. Throttling (iu chnh tc )

iu chnh tc kim sot lu lng truy cp m h thng gi hoc nhn, ngn chn vic qu ti bng cch lm chm hoc t chi cc yu cu qu mc.

32. Idempotency (Tnh ng nht)

Tnh ng nht m bo rng vic thc hin cng mt thao tc nhiu ln s c hiu qu ging nh khi thc hin mt ln duy nht, thng rt quan trng trong cc API.

33. Service Discovery (Khm ph dch v)

Khm ph dch v cho php cc h thng t ng pht hin v tr ca cc dch v bn trong mng phn tn.

34. Latency vs Throughput ( tr v Thng lng)

tr cp n s chm tr trong vic x l mt yu cu n l, trong khi thng lng o lng c bao nhiu yu cu c th c x l trong mt khong thi gian nht nh.

35. SLA (Service Level Agreement - Tha thun mc dch v)

SLA l mt hp ng chnh thc gia nh cung cp dch v v khch hng, xc nh hiu sut v tnh sn sng mong i.

36. Data Partitioning (Phn vng d liu)

Phn vng d liu l qu trnh chia mt tp d liu ln thnh cc phn nh hn ci thin kh nng qun l v hiu sut.

37. Quorum (Quyn biu quyt)

Trong h thng phn tn, quorum l s lng ti thiu cc nt cn ng cho mt quyt nh n c chp nhn.

38. Replication Lag ( tr sao chp)

tr sao chp xy ra khi c s chm tr gia vic ghi d liu vo my ch chnh v vic sao chp d liu sang cc my ch ph.

39. Data Consistency Models (Cc m hnh nht qun d liu)

Cc m hnh khc nhau (v d: Nht qun mnh, Nht qun cui cng) nh ngha cch d liu c truy cp v cp nht trong cc h thng phn tn.

40. Strong Consistency (Tnh nht qun mnh)

Tnh nht qun mnh m bo rng sau khi thc hin thao tc ghi, bt k thao tc c no sau u s tr v d liu c cp nht.

41. Consensus Algorithm (Thut ton ng thun)

Thut ton ng thun (v d: Paxos, Raft) c s dng t c s ng thun v mt gi tr d liu duy nht gia cc h thng phn tn.

42. 2PC (Two-Phase Commit - Cam kt hai giai on)

2PC l mt thut ton phn tn m bo rng tt c cc bn tham gia vo mt giao dch hoc l s cam kt thay i ca h, hoc hy b n duy tr tnh nht qun.

43. Zookeeper

Zookeeper l mt dch v iu phi phn tn dnh cho cc ng dng phn tn, cung cp cc chc nng nh bu chn lnh o v qun l cu hnh.

44. Rate Limiting Algorithms (Thut ton gii hn tn sut)

Cc thut ton khc nhau (v d: Token Bucket, Leaky Bucket) c s dng thc hin gii hn tn sut v qun l lu lng truy cp.

45. Data Lake (H d liu)

H d liu l mt kho lu tr tp trung lu tr lng ln d liu th nh dng gc ca n cho n khi cn x l.

46. Batch Processing (X l theo l)

X l theo l lin quan n vic x l mt lng ln d liu cng mt lc, thng din ra sau mt khong thi gian nht nh, chng hn nh vo ban m.

47. Stream Processing (X l dng d liu)

X l dng d liu cho php phn tch d liu lin tc, theo thi gian thc, ni d liu c x l ngay khi n n.

48. Autoscaling (T ng m rng)

T ng m rng iu chnh t ng s lng ti nguyn c phn b cho mt dch v da trn ti hin ti.

49. Elasticity (Tnh n hi)

Tnh n hi cp n kh nng ca h thng m rng hoc thu hp da trn nhu cu.

50. Containerization (ng gi container)

ng gi container ng gi mt ng dng v cc phn ph thuc ca n vo mt container duy nht, cho php n chy n nh trn nhiu mi trng khc nhau (v d: Docker).

Kt lun

Vic hiu r cc thut ng thit k h thng quan trng ny c th gip bn ci thin kh nng thit k v qun l cc h thng ln. Cho d bn ch mi bt u hay ang n tp li, vic nm vng nhng thut ng ny s gip bn lm vic hiu qu hn.