Filter/Tag
98 entries
Khép series: thời khoá biểu 6 tuần ánh xạ sang các phần đã học kèm sản phẩm cuối tuần, checklist tự đánh giá ba cấp độ, đồ án cuối khoá với bài kiểm tra curl không rớt request, cheat sheet kubectl và tài nguyên học tiếp.
securityContext cho container nginx non-root và read-only, RBAC cho team FE, NetworkPolicy chỉ cho Ingress gọi vào, checklist bảo mật; rồi bảng chi phí thẳng thắn và tiêu chí quyết định frontend có nên lên K8s hay không.
Cài cert-manager, viết ClusterIssuer ACME, thêm một annotation để Ingress tự có chứng chỉ và tự gia hạn, debug khi certificate kẹt Pending. Rồi ba trụ cột observability: log JSON ra stdout, metric cần theo dõi, lệnh xem log hằng ngày.
Pipeline GitHub Actions: test, build và push lên ghcr.io, deploy có tự rollback, ServiceAccount giới hạn quyền cho CI. Rồi đảo sang mô hình pull với ArgoCD: cài đặt, Application manifest, selfHeal, prune và bẫy HPA.
Bài khép series: lộ trình 8 tuần với tiêu chí hoàn thành từng tuần, năm dự án thực hành để bỏ vào CV, từ điển thuật ngữ, checklist trước khi lên production và mười câu hỏi phỏng vấn thường gặp kèm câu trả lời.
Mười lăm file YAML gần giống nhau cho ba môi trường: Helm biến chúng thành template có values, Kustomize thành base và overlay. Cấu trúc chart, lệnh cần thuộc, checksum/config, configMapGenerator và chọn cái nào.
RollingUpdate, Recreate, Blue-Green hay Canary cho frontend: cấu hình từng cách, đo và rollback ra sao; rồi để HPA tự co giãn Pod với metrics-server, resources.requests và behavior chống dao động.
Quy trình chẩn đoán 7 bước và 12 lỗi hay gặp: ImagePullBackOff, CrashLoopBackOff, READY 0/1, Pending, 502, 503, 404 khi F5, trang trắng, sai API URL, OOMKilled, ConfigMap không đổi, CORS. Mỗi lỗi có triệu chứng, lệnh chẩn đoán, cách sửa.
VITE_*, NEXT_PUBLIC_*, REACT_APP_* không phải bí mật vì nằm nguyên văn trong bundle. So build-time với runtime, mẫu config.json để một bản build chạy mọi môi trường, và chỗ đặt secret thật: SSM, Secrets Manager, proxy ở backend.
Next.js SSR khác SPA ở đâu trên K8s: Dockerfile standalone, HOSTNAME=0.0.0.0, startupProbe, ISR cache không chia sẻ giữa Pod. Rồi Ingress cho nhiều app theo path hoặc subdomain, cạm bẫy base path và Module Federation.
Lỗi ở Cloudflare hay ở origin? Quy trình chẩn đoán năm bước, bảng mã lỗi 520–526 và 1xxx, bộ lệnh curl, dig, openssl nên thuộc, và bảng tra cứu triệu chứng từ ERR_TOO_MANY_REDIRECTS tới JavaScript vỡ sau khi bật Cloudflare.
Vì sao đổi ConfigMap mà SPA vẫn gọi API staging: Vite đóng băng VITE_* lúc build. Runtime config pattern 6 bước với config.js sinh lúc container start, rồi bộ manifest production-ready cho React SPA: Deployment, Service, Ingress, HPA, PDB.
Cloudflare bật sẵn gì, WAF Custom Rules viết thế nào cho an toàn, vì sao Bot Fight Mode và Under Attack Mode dễ làm vỡ API, rate limit trang đăng nhập, bảo vệ API token, và tính năng tối ưu nào nên bật, nào nên tắt.
requests và limits khác nhau thế nào, đơn vị m và Mi, gợi ý số cho SPA và Next.js, QoS quyết định Pod nào bị giết trước, volume nào FE thật sự cần, và chuỗi sự kiện khi Pod bị xoá gây 502 lúc deploy cùng cách chặn bằng preStop.
Worker là gì và năm việc nó giải quyết cho frontend: proxy API hết CORS, giấu secret, A/B test, chuyển hướng theo quốc gia, sửa HTML bằng HTMLRewriter. Kèm Wrangler, route, secret, debug và khi nào không nên dùng.
Tách cấu hình khỏi image bằng ConfigMap và Secret, ba cách đưa config vào container, vì sao đổi ConfigMap mà Pod không thấy, rồi readiness, liveness, startup probe và cạm bẫy liveness quá gắt gây CrashLoopBackOff.
Deploy SPA hay site tĩnh lên Cloudflare Pages: kết nối Git, cấu hình build, preview URL cho từng PR, file _redirects và _headers, Pages Functions giấu API key, gắn tên miền riêng và giới hạn gói Free.
Pod đổi IP liên tục nên không ai hardcode được. Service cho bạn một tên DNS và IP ổn định đứng trước nhóm Pod; Ingress đọc host và path để đưa request từ Internet vào đúng Service. Kèm cách chẩn đoán endpoints rỗng, 502, 503.
Sáu loại rule của Cloudflare và khi nào dùng loại nào, Redirect Rule gom www về tên miền gốc, Transform Rule thêm security header và viết lại đường dẫn, thứ tự thực thi so với WAF, Workers và cache, 301 với 302, kèm lab ba rule đầu tiên.
Pod là gì và các trạng thái của nó, init container và sidecar, quan hệ Deployment → ReplicaSet → Pod, manifest Deployment hoàn chỉnh cho frontend, rolling update và rollback, rồi label, selector, annotation và namespace.
Bốn vấn đề docker run không giải được, tám năng lực của K8s và vòng lặp reconciliation; control plane và node, chuyện gì xảy ra khi kubectl apply; dựng cluster kind 3 node có Ingress; kubectl theo ba nhóm đọc, ghi, debug.
Cho user upload thẳng lên S3 mà backend không chịu tải: ký presigned PUT bằng SDK v3, PUT bằng fetch trần, bốn lỗi kinh điển, presigned POST giới hạn dung lượng, CORS bucket, rồi Versioning và lifecycle làm lưới an toàn, kết bằng Lab 3.1.
Dockerfile multi-stage cho React/Vue/Vite ra image khoảng 25 MB, nginx.conf cho SPA với try_files, .dockerignore, quy ước tên và tag image, push lên ghcr.io, imagePullSecrets, và Docker Compose như bước đệm trước K8s.
YAML đối chiếu với JSON, 5 quy tắc sống còn, các kiểu dữ liệu gây bẫy và 4 khối của mọi manifest K8s; rồi container giải quyết gì, khác VM ra sao, Dockerfile, image, container, cơ chế layer và bộ lệnh Docker cần thuộc.
CORS là luật của trình duyệt chứ không phải server: preflight, bảng ai trả header CORS trên AWS, bẫy CloudFront trả nhầm header, cách né CORS bằng cùng origin, rồi VPC, subnet và Security Group đủ để hiểu vì sao API treo rồi 504.
Hơn 20 lệnh Linux đủ dùng khi kubectl exec vào Pod, IP và port, DNS nội bộ của Kubernetes, reverse proxy giải quyết CORS, 404 khi F5 và HTTPS, ba loại lỗi kết nối và bảng HTTP status code để debug hạ tầng.
Sáu khái niệm chiếm 80% việc dùng Cloudflare hằng ngày: nameserver quyết định ai trả lời về tên miền, zone, bốn loại bản ghi DNS, công tắc đám mây cam và xám, PoP, Anycast, cf-ray và origin — kèm lab quan sát trên trang thật.
Mở đầu series: FE dev học Kubernetes để làm gì và học tới đâu là đủ, hành trình từ npm run build tới URL production qua 9 chặng, từ điển thuật ngữ cấp tốc, cách học và lộ trình 19 phần.
Mở đầu series: điều gì xảy ra với file và request sau khi rời localhost, sơ đồ vòng đời một request qua Route 53, CloudFront, S3 và ALB, Region và Edge Location, IAM tối thiểu, lab thiết lập tài khoản và lộ trình 16 phần.
Mở đầu series: Cloudflare đứng ở đâu trong đường đi của một request, làm được gì cho frontend developer với gói Free, KHÔNG phải là gì — kèm sơ đồ vòng đời request và lộ trình 13 phần.
The Vite config top to bottom: defineConfig, plugins, root and base, resolve.alias, the dev server (port, open, proxy), define, css, and build options — plus config as a function of command and mode. With a live config builder.
Why Vite is fast: native ESM in dev means no bundling on startup, while production still bundles with Rolldown. Scaffold your first project, understand dev vs build, and see the two-strategy design. With a dev-startup race demo.
Opening the series: why performance is a feature, perceived vs actual performance, the RAIL model with human-perception time thresholds, and the "measure first, fix later" principle.
Phân biệt Web Components, Custom Elements, Shadow DOM và template; xây kb-task-card đầu tiên theo hướng progressive enhancement bằng API gốc của trình duyệt.
Hiểu Lit 3 như lớp render và reactivity trên Web Components; viết lại kb-task-card mà vẫn giữ nguyên public contract, accessibility và contract test.
Bonus track: instead of remembering to sanitize at every sink, Trusted Types makes the browser reject raw strings at innerHTML, eval, and script.src — values must come from a registered policy. Enforce vs report-only, with a live simulator.
Bonus track: when a CDN is compromised, the script you ship to every user silently changes. SRI pins a cryptographic hash so the browser refuses to run tampered code — the mechanism, the crossorigin requirement, and a live hash simulator.
Bonus track: the WebSocket handshake carries the victim cookies and the browser never applies CORS to it — so any site can open an authenticated socket if the server skips the Origin check. The mechanism, the defenses, and a live simulator.
Bonus track: why the implicit flow is dead, how Authorization Code + PKCE stops code interception, why PKCE does nothing for token storage, and the BFF pattern that keeps tokens out of the browser. With a live PKCE simulator.
Bonus track: every third-party widget you embed can submit forms, open popups, even navigate your whole tab. How the sandbox attribute flips that to deny-by-default, the allow-scripts + allow-same-origin footgun, and a safe pattern.
Trái tim của service worker: event fetch và respondWith. Đọc Request, tạo Response, hiểu request mode/destination, xử lý lỗi mạng, khi nào nên và không nên chặn, đặt nền cho mọi caching strategy.
Bonus track: why escaping, blacklists, and naive sanitizers fail on untrusted HTML, how mutation XSS resurrects payloads when the parser re-reads your clean string, and the right tools: DOMPurify and the native Sanitizer API.
Bonus track: how an attacker site asks the victim browser one yes/no question about another site — via frame counting, error events, and timing — without reading any response. The oracles, the defenses, a live simulator, and labs.
Mổ xẻ trọn vòng đời service worker: install, waiting, activate; vì sao SW mới bị "kẹt" ở waiting; skipWaiting và clients.claim; cơ chế update; controllerchange; và cách debug lifecycle trong DevTools.
Bonus track: why Spectre forced browsers to disable SharedArrayBuffer and precise timers, and how COOP + COEP + CORP let you safely re-unlock them. The headers, the gotchas when COEP breaks your CDN, a live simulator, and labs.
Bắt đầu Vue 3 đúng cách: reactivity là gì và vì sao nó là trái tim của Vue, Single-File Component, dựng project với Vite, và viết app đầu tiên với <script setup> + Composition API.
Bộ công cụ khai báo UI của Vue: interpolation, v-bind cho attribute, v-if vs v-show, v-for và vì sao cần key, v-on với event modifier, class/style binding động, và v-model ràng buộc hai chiều.
Bonus track: pastejacking rewrites what you copy, the 2024–25 ClickFix wave tricks users into pasting malware into a terminal, and hidden form fields harvest autofill data. The mechanisms, defenses, a live lab, and exercises.
Mở màn series: service worker thực sự là gì, vì sao nó tồn tại, kiến trúc network proxy chạy nền, khác biệt với Web Worker, scope, yêu cầu HTTPS, và đăng ký service worker đầu tiên của bạn.
Bonus track: how a link you open can silently navigate your original tab to a phishing page via window.opener — why modern browsers mostly fixed it, where it still bites, and the safe-link defenses. With a live simulator and labs.
Advanced-track finale: how path-confusion caching serves a private response to an attacker, how unkeyed input poisons a shared cache, and how open redirects chain into OAuth token theft and CSP bypass. With a simulator and exercises.
Advanced track: JWT attacks to recognize — alg:none, RS256→HS256 confusion, weak HMAC secrets, kid/jku injection, unchecked exp/aud/iss — why the browser must never trust a claim. With a forge/verify simulator and exercises.
Advanced track: how cross-window messaging goes wrong — missing or substring origin checks, postMessage-to-DOM-XSS, and targetOrigin "*" leaks to popups — and the exact-origin allowlist that fixes it. With a simulator and exercises.
Advanced track: why allowlist CSPs get bypassed — JSONP and gadgets on trusted CDNs, open redirects, base-uri hijacks, scriptless exfiltration — and how a nonce + strict-dynamic policy stops them. With a simulator and exercises.
Start from zero: why utility-first CSS exists, the one idea that makes Tailwind click, and a complete v4 setup with Vite — install, @import, @theme, and your first composed component. With a live playground.
Advanced track: how injected id/name attributes overwrite the globals your JavaScript trusts — no script needed — why a script-blocking CSP does not stop it, and how to defend. With a live demo and exercises.
Advanced track: how attacker __proto__ keys poison Object.prototype through unsafe merge and query parsing, the gadgets that turn pollution into XSS or auth bypass, and the defenses that stop both. With a live demo and exercises.
A practical guide to navigator.sendBeacon: why it exists, how it differs from fetch keepalive, the Content-Type/Blob trick, CORS and size limits, and the real-world use cases — analytics, web vitals, error logging, autosave.
The real reasons a <video> goes fullscreen, refuses to autoplay, or stays silent on iPhone — and the exact playsinline + muted + autoplay recipe (plus a tap-to-play fallback) that fixes it. With a live demo.
Đào sâu Lit 3: reactive properties, năm kiểu binding, keyed list, built-in và custom directives, events, update lifecycle, styling, slots và controllers.
Checkpoint ghép Custom Elements, Shadow DOM, slots, public events, theming, accessibility, ElementInternals và Declarative Shadow DOM thành một toggle dùng được.
A bilingual, hype-free guide for frontend developers in the AI era: what actually changed, the 2026 web tech landscape, new ways of working with agents, the skills that rise vs fade, and a concrete 30/60/90 survival playbook.
Bilingual 2026 guide: same-document SPA and cross-document MPA view transitions, pseudo-elements, shared elements, reduced motion, Astro/React integration, browser support, and fallbacks.
A bilingual comparison of frontend build tools (Webpack, Vite, Rollup, esbuild, Turbopack, SWC, Bun) and package managers (npm, Yarn, pnpm, Bun) — architecture, speed, disk usage, ecosystem, and when to use each.
Từ font-display, preconnect, preload, self-host, subsetting, variable fonts đến metric-compatible fallback — các kỹ thuật thực chiến giúp loại bỏ FOUT/FOIT và cải thiện LCP/CLS khi dùng webfont bên ngoài.
A bilingual guide to React Router v7: how Remix merged into it, the three additive modes (Declarative, Data, Framework), type-safe routing, migrating from v6 and Remix v2, and how Framework mode stacks up against Next.js.
A bilingual deep dive into Astro 5: the Islands architecture, .astro component anatomy, client directives, SSG vs SSR, Content Collections with Zod, routing, integrations, and View Transitions — using this blog's real config as examples.
Đào sâu Observer pattern trong browser: MutationObserver theo dõi DOM, ResizeObserver bắt resize, IntersectionObserver, PerformanceObserver, ReportingObserver — concept, use case production, pitfall, memory cleanup.
Toàn cảnh SEO cho frontend engineer: cách Googlebot crawl & render 2-wave, robots.txt và sitemap, meta/OG/JSON-LD, canonical & hreflang, Web Vitals, spectrum CSR/SSR/SSG/ISR, vì sao SPA React dễ tàng hình và prerender giải quyết ra sao.
A bilingual deep-dive into loading placeholders: why they boost perceived performance and prevent layout shift, the types (spinner, skeleton, LQIP), and how to implement and orchestrate them in vanilla JS and React.
Đào sâu cách render danh sách dài: pagination vs infinite scroll vs virtual scroll, sentinel pattern với IntersectionObserver, fixed/variable-height windowing, bidirectional list (chat, feed), và mọi pitfall production.
A bilingual deep-dive into generator functions and yield: the pausable-function mental model, core syntax, two-way communication, async generators, plus 10 real-world use cases and practice exercises.
Bilingual deep-dive: signals vs Virtual DOM, the three primitives, a ~30-line vanilla runtime, push/pull glitch-free updates, Solid/Angular/Svelte/Vue/Preact/TC39, React compiler angle, pitfalls.
A bilingual, hands-on guide to TanStack Query v5: server vs client state, useQuery/useMutation, caching (staleTime vs gcTime), optimistic updates, pagination, strengths, weaknesses, and what you lose without it.
A bilingual walkthrough of classic type-challenges (easy → hard): Pick, Readonly, Exclude, Awaited, Omit, DeepReadonly, Permutation, Union to Intersection, CamelCase — each with a toggle-to-reveal answer and a detailed explanation.
Vì sao `"🇻🇳".length === 4`? Bài này đào sâu Unicode code point, surrogate pair, grapheme cluster, và cách JS xử lý binary qua ArrayBuffer, TypedArray, DataView, Blob, TextEncoder — kèm use case frontend thực chiến.
A principal-level playbook for unit, integration, and e2e testing with Vitest, Testing Library, and Playwright—without a slow, flaky suite.
A senior guide to the accessibility tree, ARIA authoring patterns, keyboard semantics, live regions, and pragmatic a11y testing for design systems.
How the browser security model, XSS, CSP, isolation headers, and supply-chain controls form a layered defense for modern frontend systems.
Tổng hợp toàn bộ cơ chế variant trong Tailwind CSS v4: hover, focus, responsive, dark mode, group, peer, has, data/aria, arbitrary variant và cách dùng trong Radix/shadcn.
Series finale: why client validation is UX not security, open-redirect fixes, DOM risks beyond XSS, postMessage hygiene, and a practical frontend threat-model checklist tying Parts 1–9 — with exercises.
There are no secrets in the browser: env vars, source maps, and third-party scripts leak. Plus npm supply-chain threats — lockfiles, audit, SRI, typosquatting — and practical defenses, with exercises.
HTTPS/TLS, HSTS, mixed content, the production security-header stack (CSP, COOP/COEP, Permissions-Policy, SRI), static-host `_headers` examples, and audit tooling — with exercises.
A bilingual deep-dive into HTTP cookies: how Set-Cookie works, every attribute (Secure, HttpOnly, SameSite, Partitioned/CHIPS), reading them in JS, cookies vs storage, and the security threats (XSS, CSRF, fixation) with prevention.
A bilingual deep-dive into CORS: the Same-Origin Policy, simple vs preflight requests, every Access-Control header, credentials mode, which requests bypass CORS checks, and how to solve CORS in real web apps.
A progressive guide to CSS performance optimization structured by developer seniority. Each level builds on the previous — from writing clean selectors to architecting compositor-only animation pipelines.
A bilingual guide to the CSS features that have changed how we build UIs — container queries, :has(), native nesting, cascade layers, popover, anchor positioning, scroll-driven animations, and more.
A bilingual deep-dive into source maps: what they are, how they work internally (VLQ encoding, mappings field), how to generate and configure them, and best practices for production debugging.
Clickjacking (UI redressing) tricks users into clicking your real UI through invisible iframes. Defend with CSP frame-ancestors, X-Frame-Options, safe embedding, and postMessage hygiene — with exercises.
CORS is not a firewall for your API — it relaxes SOP so browsers can read cross-origin responses when the server opts in. Preflight, credentials, misconfigurations, and what CORS cannot fix — with exercises.
Where to store session and auth tokens in the browser: httpOnly cookies vs localStorage vs in-memory, JWT pitfalls, OAuth PKCE + BFF for SPAs, Set-Cookie hardening, and strict TypeScript patterns — with exercises.
CSRF abuses the gap SOP leaves open: the browser sends cookies cross-origin but blocks reading the reply. SameSite cookies, anti-CSRF tokens, Origin checks, and layered defenses — with exercises.
Đi sâu vào cách browser xử lý CSS, chi phí của Layout/Paint/Composite, critical CSS, containment, content-visibility, GPU acceleration, và mọi kỹ thuật giúp CSS không còn là nút thắt performance.
Đào sâu các tầng cache giữa user và origin: cache headers, browser memory/disk/bfcache, CDN edge, reverse proxy, Service Worker, và mọi pitfall thường gặp.
How Content-Security-Policy contains XSS even when sanitization fails: directives, nonces, strict-dynamic, report-only rollout, Trusted Types, and a starter strict policy — with exercises.
Cross-Site Scripting (XSS) for frontend devs: why it tops the threat list, stored vs reflected vs DOM-based, dangerous sinks, textContent vs DOMPurify, escaping contexts, Trusted Types, and defense-in-depth — with exercises.
The foundation every frontend dev must own: what an origin is, what the Same-Origin Policy protects (and what it does not), how cookies and credentials cross the wire, and the mental model for the whole series — with exercises.
An exploration of Module Federation, shared state management, and breaking down monolithic UI architectures for enterprise scale applications.