Bài viết giải thích
Hướng dẫn sử dụng công cụ, giải thích kỹ thuật và các mẹo phát triển — Tôi tóm tắt những điều tôi thấy hữu ích trong các bài viết này.
Giải thích theo từ khóa kèm bài tập (74 bài)
Học các kiến thức cơ bản về HTML, CSS, JavaScript thông qua bài viết giải thích và bài tập thực hành ngay tại chỗ.
-
Trải nghiệm: Hãy chạy thử mã
Mã đã được nhập sẵn. Hãy nhấn nút 'Chạy' (Execute) và xác nhận rằng 'Hello World' hiển thị ở phần xem trước. Đây là bài tập để bạn làm quen với luồng học.
Môi trường -
HTML đầu tiên
Hãy viết mã HTML để hiển thị dòng chữ 'Hello World'. Sử dụng thẻ h1 mà bạn đã học ở trên.
Môi trường -
Thêm đoạn văn
Hãy thêm một đoạn văn bản 'Đây là trang web đầu tiên của tôi.' bên dưới tiêu đề. Sử dụng thẻ p để bao quanh.
Môi trường -
Tạo danh sách
Hãy tạo một danh sách 3 loại trái cây bạn yêu thích bằng thẻ ul và li. Hãy thay thế phần ___ trong mã mẫu.
Môi trường -
Chèn liên kết
Hãy tạo một liên kết đến địa chỉ https://google.com với văn bản hiển thị là 'Google'.
Môi trường -
Hiển thị hình ảnh
Hãy hiển thị hình ảnh từ địa chỉ https://placehold.co/200x100. Đặt thuộc tính alt là 'Ảnh mẫu'.
Môi trường -
Phân cấp tiêu đề
Hãy tạo 3 tiêu đề h1, h2, h3 theo đúng thứ tự phân cấp với chủ đề bất kỳ (ví dụ: Trang của tôi, Phim yêu thích, v.v.).
HTML Cơ bản -
Danh sách có thứ tự
Sử dụng thẻ ol và li để viết 3 bước thực hiện một công việc hoặc bảng xếp hạng (ví dụ: Các bước nấu ăn, Top phim hay, v.v.).
HTML Cơ bản -
Thẻ strong và em
Bao quanh từ 'Quan trọng' bằng thẻ strong và từ 'Nhấn mạnh' bằng thẻ em.
HTML Cơ bản -
HTML ngữ nghĩa (Semantic)
Hãy tạo cấu trúc cơ bản sử dụng các thẻ header, main, footer. Nội dung bên trong main bạn có thể viết tùy ý.
HTML Cơ bản -
Điều hướng (Navigation)
Hãy tạo 3 liên kết (Trang chủ, Giới thiệu, Liên hệ) bên trong thẻ nav.
HTML Cơ bản -
Nhóm lại bằng thẻ div
Hãy bao quanh hai phần tử bất kỳ bằng thẻ div riêng biệt. Nội dung bên trong có thể viết tùy ý.
HTML Cơ bản -
Trang trí bằng thẻ span
Hãy bao quanh cụm từ 'Chữ màu đỏ' bằng thẻ span.
HTML Cơ bản -
Bảng dữ liệu (Table)
Hãy tạo một bảng gồm 2 hàng và 2 cột. Nội dung trong các ô có thể viết tùy ý.
HTML Cơ bản -
Ngắt dòng (br)
Hãy ngắt dòng giữa 'Dòng 1' và 'Dòng 2' bằng thẻ br.
HTML Cơ bản -
Mở trong tab mới
Hãy thiết lập để liên kết mở trong một tab mới bằng thuộc tính target="_blank".
HTML Cơ bản -
Thay đổi màu chữ
Hãy đổi màu chữ của thẻ h1 thành màu xanh (blue).
CSS Cơ bản -
Màu nền (Background Color)
Hãy đổi màu nền của body thành màu xám nhạt (#f5f5f5).
CSS Cơ bản -
Thêm khoảng trống nội bộ (Padding)
Hãy thêm khoảng trống nội bộ (padding) là 16px cho thẻ p.
CSS Cơ bản -
Căn giữa văn bản
Hãy căn giữa cho thẻ tiêu đề h1.
CSS Cơ bản -
Cỡ chữ (Font Size)
Hãy đổi cỡ chữ của thẻ p thành 1.2rem.
CSS Cơ bản -
In ra console
Sử dụng console.log để in ra chuỗi 'Xin chào'
JavaScript Cơ bản -
Khai báo biến
Hãy khai báo một biến có tên name, gán cho nó một giá trị bất kỳ và xuất ra console.
JavaScript Cơ bản -
Định nghĩa hàm
Hãy định nghĩa một hàm tên là greet trả về chuỗi 'Xin chào'.
JavaScript Cơ bản -
Tạo mảng
Hãy tạo một mảng tên là fruits chứa 3 tên loại trái cây và xuất ra console.
JavaScript Cơ bản -
Đối tượng (Object)
Hãy tạo một đối tượng user có name và age, sau đó xuất ra console.
JavaScript Cơ bản -
Cơ bản về Form
Hãy tạo một form có ô nhập tên và nút gửi. Thuộc tính name của input phải là 'name'.
HTML Nâng cao -
Liên kết label và input
Hãy liên kết label 'Email' với input có id='email' bằng thuộc tính for.
HTML Nâng cao -
article và section
Hãy tạo 2 thẻ section bên trong một thẻ article.
HTML Nâng cao -
Thuộc tính data
Hãy thêm thuộc tính data-id="123" và data-name="test" vào thẻ div.
HTML Nâng cao -
Ô tích (Checkbox)
Hãy tạo một ô tích kèm theo nhãn 'Tôi đồng ý'.
HTML Nâng cao -
Đường viền (Border)
Hãy thêm đường viền nét liền, dày 1px, màu #ccc cho thẻ div.
CSS Cơ bản -
Bo góc (Border Radius)
Hãy bo góc thẻ div với bán kính 8px.
CSS Cơ bản -
Sử dụng Class
Tạo class .highlight với nền vàng và áp dụng nó cho thẻ p.
CSS Cơ bản -
Chiều rộng (Width)
Hãy đặt chiều rộng của thẻ div là 300px.
CSS Cơ bản -
Hiệu ứng Hover
Khi di chuột vào thẻ a, hãy làm cho chữ chuyển sang màu đỏ.
CSS Cơ bản -
Dàn hàng bằng Flexbox
Hãy xếp 3 thẻ div nằm ngang bằng Flexbox.
Layout CSS -
Căn giữa màn hình
Sử dụng Flexbox để đưa thẻ div vào chính giữa màn hình (ngang và dọc).
Layout CSS -
Chia 3 cột bằng Grid
Sử dụng Grid để chia các phần tử con thành 3 cột bằng nhau.
Layout CSS -
Khoảng cách gap
Tạo khoảng cách 16px giữa các phần tử con trong Flexbox.
Layout CSS -
Thiết kế Responsive
Thiết lập 2 cột khi màn hình rộng từ 768px trở lên, và 1 cột khi nhỏ hơn.
Layout CSS -
Tự động xuống dòng (flex-wrap)
Thiết lập để các phần tử con tự động xuống dòng nếu bị tràn khung chứa.
Layout CSS -
Căn lề hai đầu (space-between)
Sử dụng Flexbox để đẩy hai phần tử con về hai phía xa nhất.
Layout CSS -
Bố cục dạng thẻ (Card Layout)
Tạo 3 thẻ bài nằm ngang bằng Grid, mỗi thẻ có padding và border.
Layout CSS -
Câu lệnh if
Nếu age từ 18 trở lên xuất 'Người lớn', ngược lại xuất 'Trẻ em'. Cho age = 20.
JavaScript Cơ bản -
Vòng lặp for
Hãy xuất các số từ 1 đến 5 ra console.
JavaScript Cơ bản -
Template Literal
Sử dụng biến name ('An') để xuất chuỗi 'Chào bạn, An' dùng template literal.
JavaScript Cơ bản -
Độ dài của mảng
Hãy xuất số lượng phần tử của mảng arr ra console. Cho arr = [1,2,3,4,5].
JavaScript Cơ bản -
Phần tử đầu tiên
Hãy xuất phần tử đầu tiên của mảng fruits ra console.
JavaScript Cơ bản -
Hàm mũi tên (Arrow Function)
Định nghĩa hàm mũi tên double nhận vào một số và trả về giá trị gấp đôi.
JavaScript Cơ bản -
Thuộc tính đối tượng
Hãy xuất giá trị thuộc tính name của đối tượng user ra console.
JavaScript Cơ bản -
Hàm map
Tạo mảng mới với các giá trị gấp đôi từ mảng numbers = [1,2,3] dùng map.
JavaScript Cơ bản -
Toán tử ba ngôi
Dùng toán tử ba ngôi để gán 'Đậu' nếu score >= 60, ngược lại gán 'Rớt'.
JavaScript Cơ bản -
Nối chuỗi
Nối firstName và lastName để tạo ra tên đầy đủ 'Nguyễn Văn An'.
JavaScript Cơ bản -
Lấy phần tử DOM
Lấy phần tử có id='msg' và đổi nội dung văn bản của nó thành 'Xin chào'.
Thao tác DOM -
Sự kiện Click
Khi nhấn vào nút có id='btn', hãy xuất 'Đã nhấn!' ra console.
Thao tác DOM -
Thêm Class
Thêm class 'active' vào phần tử có id='box'.
Thao tác DOM -
Tạo phần tử mới
Tạo thẻ p mới, gán văn bản và thêm nó vào trong thẻ có id='container'.
Thao tác DOM -
Sử dụng querySelector
Lấy thẻ li đầu tiên trong ul có id='list' và xuất nội dung của nó.
Thao tác DOM -
Lấy tất cả phần tử
Lấy tất cả thẻ li trong danh sách và xuất nội dung từng cái ra console.
Thao tác DOM -
Lấy giá trị Input
Lấy và xuất giá trị hiện tại của ô nhập liệu có id='name'.
Thao tác DOM -
Xóa phần tử
Xóa hoàn toàn phần tử có id='remove-me' khỏi trang web.
Thao tác DOM -
Event Delegation
Lắng nghe sự kiện click trên ul và xuất nội dung của thẻ li được nhấp.
Thao tác DOM -
Thay đổi Style
Đổi màu nền của phần tử id='box' thành 'lightblue' bằng JavaScript.
Thao tác DOM -
Lấy dữ liệu API
Dùng fetch để lấy dữ liệu từ API và xuất tiêu đề (title) ra console.
Kết nối API -
Xử lý lỗi API
Nếu phản hồi fetch không thành công (res.ok là false), hãy xuất 'Lỗi'.
Kết nối API -
Sử dụng try-catch
Bao quanh fetch bằng try-catch để bắt và xuất lỗi nếu có.
Kết nối API -
Hiển thị danh sách dữ liệu
Lấy danh sách bài viết từ API và xuất tiêu đề của 3 bài đầu tiên.
Kết nối API -
Trạng thái đang tải (Loading)
Xuất 'Đang tải' trước khi gọi API và 'Hoàn tất' sau khi nhận dữ liệu.
Kết nối API -
Ứng dụng TODO
Khi nhấn nút, hãy thêm nội dung từ ô input vào danh sách ul.
Dự án thực tế -
Lưu trữ Local Storage
Lưu tên vào localStorage và sau đó đọc ra để xuất vào console.
Dự án thực tế -
Bộ hẹn giờ (Timer)
Hãy xuất câu 'Hết giờ' ra console sau đúng 3 giây.
Dự án thực tế -
Bộ đếm (Counter)
Tăng giá trị bộ đếm lên 1 mỗi khi nhấn nút và hiển thị ra màn hình.
Dự án thực tế -
Bộ lọc dữ liệu (Filter)
Lọc lấy các số lớn hơn hoặc bằng 3 từ mảng [1,2,3,4,5] và xuất ra.
Dự án thực tế
Kỹ thuật & Mẹo (Blog)
Cách chọn ghi chú trực tuyến | So sánh memo online và web memo theo mục đích【2026】
Hướng dẫn chọn ghi chú trực tuyến, memo online và web memo theo mục đích. So sánh aNotepad, NotePal, Google Keep, Kawa, Privnote về không cần đăng ký, chia sẻ, mã hóa và thời gian lưu. Tìm dịch vụ phù hợp từ chia sẻ tạm đến ghi chú dài hạn.
1 frame bao nhiêu ms? Đổi 60FPS / 120FPS sang mili giây cho Unity & game
Công thức ms/frame = 1000 ÷ FPS: 60≈16.67ms, 120≈8.33ms, 30≈33.33ms. Ngân sách frame cho Unity Update, animation, mobile indie Việt Nam — bảng tra, case study hitch và checklist profiler.
Bảng đổi nhanh 1ms ↔ FPS | Tra 60 / 120 / 144 từ mili giây (cheat sheet)
Cheat sheet 1ms ↔ FPS: từ 1ms (~1000FPS) đến 33.33ms (~30FPS). Tra ngược khi Profiler báo ms, bảng 60/90/120/144Hz, đổi frame↔giây — bổ sung máy tính FPS và bài ngân sách frame.
Postman vs Insomnia vs curl | Chọn tool debug API cho freelance Việt Nam【2026】
So sánh Postman, Insomnia và curl khi debug API: collection, môi trường staging, token JWT, script CI. Gợi ý chọn tool theo freelance outsourcing VN — laptop cá nhân, nhiều client, không cần đăng ký cloud.
API là gì? Request, response & JSON cho junior trước khi dùng Postman
Giải thích API cho junior Việt Nam: request/response, HTTP method, status code, JSON body — nắm trước khi mở Postman. Ví dụ fetch, lỗi thường gặp, checklist đọc Network tab.
Tỷ lệ khung hình video & CSS｜Tính 16:9, 9:16, 1:1 trước khi crop【2026】
Hướng dẫn tính aspect ratio cho landing page và short video. Công thức 16:9 / 9:16 / 1:1, bảng độ phân giải, CSS aspect-ratio, safe zone TikTok/Reels và lỗi crop mặt khi export.
Data URI ảnh/font Base64 — khi nào nên nhúng, khi nào tránh (payload & cache)
Hướng dẫn quyết định nhúng ảnh/icon/font bằng Data URI Base64 hay dùng URL tĩnh. So sánh kích thước (+33%), cache HTTP, giới hạn trình duyệt, email HTML và checklist trước khi ship production.
Base64 decode tiếng Việt bị lỗi dấu — nguyên nhân atob và cách sửa UTF-8
Decode Base64 ra chữ Việt bị lỗi dấu (Xin chào thành mojibake kiểu Xin chà o)? Giải thích tại sao atob() không hiểu UTF-8, cách dùng TextDecoder, Node Buffer, Base64URL/JWT, và checklist debug khi chuỗi vẫn sai.
Astro Content Collections cho blog đa ngôn ngữ | Schema MDX + Zod 2026
Thiết kế Astro Content Collections cho blog JA/EN/VI: tách collection theo locale, Zod schema cho MDX frontmatter, translationOf, noIndex, và checklist tránh build fail khi thêm trường bắt buộc.
Encode/decode Base64 hàng ngày: clipboard, JWT đoạn, file nhỏ【2026】
Workflow thực tế encode/decode Base64: dán từ clipboard, tách segment JWT (Base64URL), chuyển file/ảnh nhỏ, bật URL-safe, sửa lỗi padding và ký tự thừa. Công cụ chạy local trên trình duyệt — không cần đăng ký.
Copy-paste box-shadow từ generator: workflow nhanh cho card, button, modal【2026】
Cách lấy CSS box-shadow bằng generator rồi paste thẳng vào dự án: cheat sheet offset/blur/spread, preset card–button–modal, lỗi copy phổ biến, và khi nào dùng inset. Chạy local trên trình duyệt, không cần đăng ký.
Bug report tiếng Việt cho khách Nhật/US: template paste được, repro steps, expected vs actual
Freelancer và outsource VN viết bug report để dev Nhật/US sửa nhanh: đủ môi trường, bước tái hiện, expected vs actual. Template Markdown tiếng Việt + English labels, tạo bằng tool Kawa.
Quy ước đặt tên team: chọn camelCase, PascalCase, snake_case hay kebab-case?【2026】
Hướng dẫn team chọn naming convention: biến JS dùng camel, class/component dùng Pascal, Python/DB dùng snake, URL/CSS dùng kebab. Ma trận ngôn ngữ, lỗi API lệch case, checklist PR và chuyển nhanh bằng case converter trên trình duyệt.
Đổi case hàng loạt khi rename trong PR | camelCase snake_case checklist【2026】
Cách đổi case hàng loạt identifier khi rename trong Pull Request: chuẩn bị danh sách biến, chuyển camel/snake/kebab an toàn, checklist review trước khi merge. Tránh rename mù phá JSON key và env.
Đếm ký tự cho form & SEO title | Meta description không bị cắt【2026】
Cách đếm ký tự nhanh cho form input, SEO title và meta description: giới hạn phổ biến, tiếng Việt có dấu, checklist trước khi publish. Khác bài deep dive UTF-16 — tập trung kiểm tra thực tế trên trình duyệt.
Đếm ký tự UTF-16 vs code point vs byte: Twitter, SMS, VARCHAR và tiếng Việt có dấu
Phân biệt độ dài code point, UTF-16 (JS string.length), UTF-8 byte cho Twitter/X, SMS và cột DB. Cạm bẫy emoji và dấu tiếng Việt. Kiểm tra nhanh bằng char-count Kawa.
Đếm token ChatGPT / Claude / Gemini | Ước tính chi phí API trước khi dính bill
Tokenizer ≠ số chữ cái. Cách đếm token input/output, system prompt, RAG và tiếng Việt để freelancer VN ước tính bill OpenAI/Anthropic/Google trước khi chạy batch — không đoán bằng ký tự.
camelCase vs snake_case trong NestJS và Prisma | Đổi tên hàng loạt an toàn
Xử lý xung đột naming khi outsource: API Nest/Prisma dùng camelCase trong TypeScript nhưng cột DB là snake_case. Checklist map DTO, bulk rename an toàn, và khi nào dùng case converter.
ChatGPT token và prompt cơ bản | Checklist trước khi gọi API cho freelancer【2026】
Token ChatGPT là gì, tiếng Việt/Anh tiêu tốn bao nhiêu, cách viết prompt gọn và ước tính chi phí trước khi gọi OpenAI API. Checklist cho freelancer Việt Nam — tránh cháy budget ngay tuần đầu dự án.
Kiểm tra DNS/CNAME đã lan chưa | Trước khi báo khách 'domain xong'
Checklist DNS propagation cho freelancer VN: dig/nslookup nhiều resolver, phân biệt authoritative vs cache, bẫy Cloudflare proxy, CNAME apex, và cách xác nhận A/AAAA/CNAME trước khi báo khách domain đã xong.
Tra mã màu CSS named | Tìm tên màu chuẩn và HEX tương ứng【2026】
Cách tra CSS named colors (coral, rebeccapurple, dodgerblue…): name→HEX và HEX→tên gần nhất. Khác hẳn map brand sheet — bài này dành cho học CSS, prototype nhanh và thống nhất từ vựng màu trong team.
CORS trên localhost | Vite proxy vs header trước khi đổ lỗi production
Lỗi CORS khi Vite/Next gọi API localhost khác port: vì sao cùng máy vẫn bị chặn, khi nào dùng proxy, khi nào sửa Access-Control-Allow-Origin, và checklist trước khi đổ tội production.
CORS là gì? Origin (scheme + host + port) giải thích đơn giản【2026】
CORS là gì và Origin được trình duyệt so sánh thế nào: scheme, host, port. Hiểu Same-Origin Policy trước khi sửa Access-Control-Allow-Origin, proxy Vite, hay đọc bài fix production. Có bảng so sánh URL và checklist đọc lỗi console.
Tìm tên màu / HEX từ brand sheet | CSS, Figma và Tailwind【2026】
Cách map màu từ brand guideline / Figma sang HEX và tên CSS gần nhất, rồi gắn token Tailwind — tránh ship nhầm coral CSS khi client gửi 'coral brand'. Quy trình handoff cho freelancer và team outsourcing Việt Nam.
Handoff Figma → CSS: chuyển HEX / RGB / HSL không lệch brand【2026】
Cách chuyển mã màu từ Figma sang CSS (HEX, RGB, HSL) mà không lệch brand. Checklist token, lỗi làm tròn HSL, opacity kép, và cách đối chiếu nhanh bằng color converter trên trình duyệt — không cần đăng ký.
CORS Error khi lên production | Localhost OK, Access-Control-Allow-Origin và preflight
Khắc phục CORS khi SPA local chạy được nhưng production fail: Access-Control-Allow-Origin, credentials, OPTIONS preflight, Vite proxy che lỗi, và checklist cho freelance/outsourcing Việt Nam ship SPA+API.
CSS box-shadow đẹp: Soft UI stack vs một lớp đậm, elevation token và chữ dễ đọc
Hướng dẫn box-shadow cho UI card: soft shadow nhiều lớp thay vì một bóng đậm, bảng elevation token, tránh bóng làm chữ khó đọc. Tạo CSS bằng generator local trên Kawa.
Cú pháp box-shadow từng tham số | offset, blur, spread, color【2026】
Giải thích từng tham số CSS box-shadow: offset-x, offset-y, blur-radius, spread-radius, color và inset. Có bảng giá trị mẫu, lỗi thường gặp (đổ bóng đen đặc), layered shadow, và generator xem preview rồi copy CSS — chạy trên trình duyệt.
Tutorial CSS glass card｜Từng bước làm kính mờ với backdrop-filter【2026】
Hướng dẫn từng bước tạo glass card bằng CSS: cấu trúc HTML, lớp rgba + backdrop-filter, viền sáng, shadow nhẹ. Chỉnh blur/opacity trên generator rồi copy vào dự án — không cần đăng ký.
Kiểm tra độ tương phản WCAG AA/AAA | Text trên ảnh hero landing page
Checklist WCAG 2.1 AA vs AAA cho agency và SME Việt Nam: text trên ảnh hero thường fail 4.5:1, cách cân bằng brand color với khả năng đọc, và quy trình kiểm tra trước khi launch landing.
Glassmorphism là gì? Khi nào dùng kính mờ trên UI (và khi nào tránh)【2026】
Glassmorphism (frosted glass) là gì trong thiết kế UI: khác neumorphism/flat thế nào, khi nào hợp card/nav/modal, khi nào hại đọc và hiệu năng. Checklist quyết định + generator CSS trên trình duyệt.
CSS linear/radial gradient｜Landing không bị bẩn màu — stops & góc【2026】
Cách viết linear-gradient và radial-gradient cho hero landing sạch màu: chọn góc (deg), đặt color stops, tránh vùng xám đục giữa hai màu đối lập. Có ví dụ CSS, checklist và generator chạy trên trình duyệt.
grid-template-areas cho dashboard admin | Named Grid layout thực chiến
Đặt tên vùng CSS Grid (header, sidebar, main, footer) cho shell admin/SaaS. Cách viết grid-template-areas, đổi breakpoint bằng cách viết lại areas, lỗi thường gặp, và prototype cột/gap trên công cụ CSS Grid.
CSS Grid vs Flexbox: khi nào dùng Flex, khi nào dùng Grid (nav & dashboard)
Quyết định layout thực tế: navbar / chip / button → Flexbox; dashboard / gallery / form cột → Grid. Bảng quyết định, code shell trang, lồng Grid+Flex, và checklist trước khi ship — không chỉ định nghĩa 1D/2D.
Flex vs Grid chọn nhanh | Cheat sheet layout CSS 30 giây【2026】
Cheat sheet chọn Flexbox hay CSS Grid trong 30 giây: câu hỏi litmus, bảng tình huống, snippet copy được, lỗi hay gặp. Khác bài so sánh dài — tập trung quyết định nhanh khi code.
Minify CSS + JS cùng lúc trước deploy | Workflow tối ưu 2026
Quy trình minify CSS và JavaScript cùng lúc trước khi deploy: thứ tự build → minify → Brotli/gzip → cache, checklist đo Network, khi nào dùng tool gộp minify vs css-minify/js-minify riêng, lỗi CI và case study freelance.
Minify CSS/JS là gì? Khái niệm trước khi tối ưu workflow【2026】
Minify CSS và JavaScript nghĩa là gì: xóa gì, giữ gì, khác Brotli/gzip, khác obfuscate và tree-shaking. Ví dụ trước/sau, số byte, khi nào minify tay trên trình duyệt vs để bundler làm.
Minify CSS trước khi ship | Checklist freelance & hosting shared【2026】
Hướng dẫn minify CSS trước khi đưa lên production cho freelancer và hosting shared (cPanel, FTP). Khi nào dùng tool online, khi nào cần Vite/cssnano, checklist ship, lỗi thường gặp và cách giữ file nguồn.
Bảng tra px ↔ rem nhanh | 16px = 1rem, Figma → CSS trong 30 giây
Bảng tra px rem chuẩn root 16px: 8→0.5, 12→0.75, 16→1, 24→1.5, 32→2. Công thức, bảng spacing phổ biến, khi nào mở máy tính PX↔REM — khác bài sâu về 62.5%.
px vs rem trong CSS | Root 16px, trick 62.5% và khi nào dùng px cho border
Chọn px hay rem khi migrate design token: root font 16 vs 62.5%, accessibility zoom trình duyệt, border/hairline bằng px, bảng chuyển đổi trước khi đổi Figma → CSS.
Xóa dòng trùng trong list & CSV | Tool text trên trình duyệt (không cần Set)
Làm sạch email, URL, keyword, cột CSV: 1 dòng = 1 mục, trim khoảng trắng, bỏ qua hoa thường. Khác JavaScript Set — dành cho ops/marketing dán list, chạy local không upload.
So sánh 2 bản code/config/JSON không cần Git UI | Diff nhanh trên trình duyệt【2026】
Cách so sánh hai bản code, config JSON/YAML hoặc .env mà không mở Git GUI hay IDE. Highlight thêm/xóa, chạy local trên trình duyệt — phù hợp review nhanh trước khi deploy hoặc trả lời khách qua Slack.
DNS là gì? A, CNAME, NS cho junior trước khi tick checklist domain
Giải thích DNS từ góc junior: A trỏ IP, CNAME alias, NS nameserver — khi nào dùng cái nào, checklist trước khi bảo domain đã xong, và cách kiểm tra bằng dig/nslookup hoặc DNS check online.
.env best practices | Checklist onboard freelancer vào repo khách
Quy tắc .env thực chiến: không commit secret, quote đúng, tách môi trường, .env.example, validate lúc boot. Checklist onboarding freelancer/outsourcing Việt vào repo khách — tránh leak Slack và 'works on my machine'.
Checklist lỗi .env thường gặp | Quote, khoảng trắng, thiếu key
Checklist debug .env khi app không đọc biến: khoảng trắng quanh =, quote lệch, key thiếu so với .env.example, CRLF, comment cuối dòng — kèm ví dụ Node/Docker và cách format nhanh trên trình duyệt.
Ảnh placeholder đúng size trước khi có asset | Wireframe & landing【2026】
Cách tạo dummy image đúng kích thước cho wireframe và landing page trước khi có ảnh thật. Tránh CLS, khóa tỷ lệ khung hình, preset OGP/hero, và checklist bàn giao CMS — không cần đăng ký.
Format & sort .env.example | Env formatter trước khi mở PR
Cách format và sắp xếp key trong .env.example bằng env formatter: sort A–Z, giữ comment, phát hiện key trùng sau khi sắp xếp. Checklist PR cho freelancer/outsourcing — chạy local trên trình duyệt, không dán secret production.
.env là gì? process.env cơ bản cho NestJS và Next.js junior
Giải thích .env và process.env cho junior Nest/Next: file KEY=value load thế nào, khác biến môi trường OS, NEXT_PUBLIC_*, ConfigModule Nest, .env.local vs .env.example. Checklist boot lần đầu không bị undefined.
Bảng tra cứu escape \n \t \u | Cheat sheet nhanh cho lập trình viên
Bảng tra cứu nhanh escape sequence: \n, \t, \r, \\, \uXXXX, \xHH — nghĩa, ví dụ JS/Python/C#, khi nào dùng. Khác bài debug JSON/Windows sâu: đây là cheat sheet mở tab giữ lại khi viết string và log.
Escape sequence \n \t \u | Debug JSON, log và đường dẫn Windows
Hiểu \n, \t, \u trong string, JSON và log — phân biệt newline thật với ký tự litereal, tránh double-escape, và xử lý path Windows (\\). Checklist debug + bảng ngôn ngữ cho JS/Python/JSON.
Cách xuất favicon từ logo | Generator 16/32/180/512 PNG không cần Photoshop【2026】
Hướng dẫn dùng favicon generator: chuẩn bị logo vuông, xuất PNG 16×16, 32×32, 180×180, 512×512 trên trình duyệt, gắn vào dự án. Tránh méo logo, chữ vỡ ở 16px và cache cũ — phù hợp freelancer và sinh viên VN.
Favicon là gì? Đặt đâu trong HTML | link rel=icon, apple-touch, đường dẫn public【2026】
Favicon là biểu tượng tab/bookmark. Hướng dẫn đặt thẻ link trong head, đường dẫn file, apple-touch-icon, lỗi 404 và cache. Mẫu HTML thực tế cho Vite, Astro, Next — kèm cách sinh PNG từ logo.
Favicon 2026: ICO, PNG, SVG và checklist ship landing | Không cần 20 file
Hướng dẫn chọn favicon cho landing 2026: ICO vs PNG vs SVG, apple-touch-icon 180×180, bộ kích thước thật sự cần. Checklist ship cho freelancer VN — tránh spam hàng chục icon thừa.
Fluid Typography với clamp() | Type scale mượt mobile→desktop, không nhảy font đột ngột
Thay @media font-size từng breakpoint bằng CSS clamp(min, preferred, max). Cách chọn min/max rem, công thức rem + vw, lỗi chỉ dùng vw phá accessibility, và generate clamp() trên trình duyệt không cần đăng ký.
FPS Calculator｜Đổi 30fps to ms, 60/120FPS ↔ mili giây cho animation & game
Máy tính FPS: 30fps to ms ≈ 33.33ms, 60≈16.67, 120≈8.33. Đổi hai chiều FPS↔ms, tra preset màn hình, chuyển timing animation/Unity WaitForSeconds — không cần đăng ký.
Git là gì? Commit và branch giải thích cho fresher Việt Nam【2026】
Git là gì theo góc fresher VN: commit lưu snapshot, branch làm việc song song, remote khác local. Hình dung mental model trước khi học lệnh — tránh sợ hãi khi join team outsource.
Lệnh Git hàng ngày cho junior | status, add, commit, branch, PR【2026】
Cheat sheet Git thực chiến cho junior Việt: git status, add, commit, branch, push, pull, PR trên GitHub. Luồng hàng ngày trong team outsource, lỗi thường gặp và checklist trước khi mở pull request.
Glassmorphism CSS | backdrop-filter trên landing, fallback và contrast chữ
Làm card kính trên landing: backdrop-filter blur + rgba, hỗ trợ trình duyệt, fallback khi không blur, hiệu năng mobile VN, và tương phản chữ trên nền mờ — kèm generator CSS.
Tỷ lệ vàng trong layout | Hero, cột và spacing tính nhanh trước khi thiết kế
Dùng φ ≈ 1.618 để chia hero, cột nội dung/sidebar và type scale — rồi làm tròn về grid 4/8px. Công thức, ví dụ CSS Grid, khi nào φ hữu ích và khi nào chỉ làm UI khó implement. Tính nhanh trên trình duyệt trước khi mở Figma.
SHA-256 generate & verify: checksum file và chữ ký API【2026】
Hướng dẫn tạo và đối chiếu SHA-256 (và SHA-384/512) trên trình duyệt: verify checksum file tải về, debug signature API khi digest lệch, checklist CRLF/UTF-8. Công cụ hash local Kawa — không upload secret.
Hash ≠ mã hóa: SHA-256 checksum vs băm mật khẩu (và vì sao MD5 không dùng được)
Phân biệt hash và encryption: hash một chiều (SHA-256) cho checksum/toàn vẹn; mã hóa AES/RSA có thể giải mã. Mật khẩu dùng Argon2/bcrypt + salt — không dùng MD5 hay SHA-256 trần. Checklist verify file và lỗi thường gặp.
301 vs 302 trong .htaccess | Snippet ngắn chọn đúng mã redirect【2026】
Phân biệt 301 và 302 siêu ngắn: khi nào Moved Permanently, khi nào Found. Snippet .htaccess copy-paste, cách đọc header Location bằng curl, sinh rule an toàn bằng htaccess generator.
Redirect 301 vs 302 trong .htaccess | Freelancer VN chuyển domain/hosting【2026】
Hướng dẫn chọn 301 hay 302 khi migrate domain/hosting Apache: www↔apex, ép HTTPS, sai 302 làm SEO chậm. So sánh .htaccess với panel hosting và Cloudflare Redirect — checklist cho freelancer Việt Nam.
RewriteRule vs Redirect trong .htaccess | Khi nào dùng cái nào【2026】
Phân biệt Redirect (mod_alias) và RewriteRule (mod_rewrite) trên Apache: path đơn giản, điều kiện Host/HTTPS, vòng lặp redirect. Checklist chọn cú pháp đúng cho shared hosting Việt Nam và generator tạo rule an toàn.
Escape vs sanitize: XSS từ form comment / CMS freelance — khi nào cần cái nào
XSS từ user content không chỉ innerHTML. Escape HTML theo ngữ cảnh (text, attribute, URL) vs sanitize whitelist khi CMS cho rich text. Checklist React/template và payload QA cho freelancer Việt Nam.
HTML escape/unescape khi debug entity | Khác XSS sanitize thế nào【2026】
Dùng HTML escape/unescape để đọc entity (< & ') khi debug log, CMS và API — không nhầm với sanitize chống XSS. Checklist ký tự &, thao tác nhanh trên trình duyệt không cần đăng ký.
HTTP status code 4xx/5xx cheat sheet | Đọc lỗi API nhanh cho junior & freelance
Cheat sheet HTTP status code thực chiến: phân biệt 400/401/403/404/422 và 500/502/503. Checklist debug Network tab, phân biệt lỗi client vs server — dành cho junior API và freelance hỗ trợ khách.
HTTP request/response cơ bản | Đọc Network tab trước khi học status code
Giải thích HTTP request và response: method, URL, header, body, status line. Checklist đọc DevTools Network cho junior API và freelancer — nền trước khi dùng cheat sheet 4xx/5xx.
HTML cơ bản cho tool web | Thẻ, attribute và vì sao phải escape trước khi render
Hiểu thẻ HTML, attribute và text node trước khi escape. Map ngữ cảnh chèn (body, title, href), checklist cho form/tool web, và khi nào dùng HTML Escape trên trình duyệt — dành cho sinh viên và freelancer Việt Nam.
Eyedrop màu từ screenshot brand & landing đối thủ | Image color picker【2026】
Cách lấy mã HEX/RGB/HSL từ screenshot landing brand hoặc đối thủ. Checklist token UI, lỗi JPEG làm lệch màu, và quy trình từ eyedrop → CSS/Tailwind không cần Figma Pro.
AVIF vs WebP khi nào chọn? | So sánh format ảnh web 2026
AVIF hay WebP cho landing, hero, screenshot UI? So sánh kích thước, hỗ trợ trình duyệt, tốc độ encode, transparency và fallback <picture>. Checklist chọn format cho freelance / outsourcing VN — kèm A/B WebP local trên trình duyệt.
Nén WebP trên trình duyệt | Thao tác tool: format, quality, hạn mức KB
Hướng dẫn thao tác nén ảnh sang WebP local: chọn JPEG/WebP/GIF, preset chất lượng 60/80/95, fit theo hạn mức KB, so sánh trước/sau, giữ alpha. Không upload server — checklist cho freelance VN.
Resize ảnh giữ tỷ lệ | Letterbox vs crop trước khi WebP cho landing SME
Trước khi nén WebP: crop/resize đúng slot landing, letterbox vs object-fit cover, batch resize catalog SME. Giữ aspect ratio, tránh méo mặt sản phẩm, quy trình local trên trình duyệt.
Resize ảnh width/height | Đổi kích thước px cơ bản trên trình duyệt
Cách nhập chiều rộng/cao (px), khóa tỷ lệ, tránh upscale và méo ảnh. OGP 1200×630, thumb, avatar — quy trình local không upload cho freelance VN. Khác bài letterbox/crop.
Xóa trùng mảng JavaScript | Set, filter, Map và khi nào dùng tool text
So sánh Set vs filter vs Map khi dedupe mảng JS — primitive, object theo key, NaN và reference. Khi nào viết code, khi nào dán CSV/email vào tool xóa trùng trên trình duyệt.
JavaScript junior: xóa trùng mảng & chuỗi — Set, filter và tool dedupe【2026】
Hướng dẫn JavaScript cho junior: loại bỏ phần tử trùng trong mảng bằng Set và filter, so sánh độ phức tạp, xử lý chuỗi/email/URL trùng, và khi nào dùng tool dedupe trên trình duyệt thay vì tự viết code.
Minify vs Obfuscate JS | Bundle freelance, source map và đừng tin 'bảo mật bằng minify'
Phân biệt minify, uglify và obfuscate JavaScript: giảm size ≠ che mã. Checklist source map cho freelance Việt Nam, khi nào dùng bundler, khi nào thử nén nhanh trên trình duyệt.
JSON ↔ Excel: BOM UTF-8, sheet và lỗi tiếng Việt khi mở CSV【2026】
Đưa JSON API sang Excel (và ngược lại) không bị lỗi font tiếng Việt: UTF-8 BOM, dấu phẩy trong ô, flatten nested, một sheet = một bảng phẳng. Dùng JSON↔CSV trên trình duyệt rồi mở bằng Excel hoặc Google Sheets.
JSON ↔ CSV cho ops SME | Import API vào Excel đúng cách【2026】
Hướng dẫn chuyển JSON API sang CSV/Excel và ngược lại cho team ops SME: flatten object lồng nhau, giữ tiếng Việt UTF-8, tránh lỗi kiểu số/boolean khi import. Dùng công cụ trình duyệt, không cần đăng ký.
JSON ↔ CSV: cột là gì, flatten thế nào (hiểu nhanh trước khi convert)
Giải thích ngắn khái niệm cột CSV và flatten object lồng nhau khi chuyển JSON↔CSV. Biết vì sao mảng lỗi, vì sao key thành user.name, và khi nào dùng công cụ trình duyệt — không cần đăng ký.
Validate JSON trước khi debug Nest/Express | Format + phân biệt lỗi cú pháp vs schema
Freelancer VN dán JSON từ API/log rồi gặp Unexpected token: format + validate trước khi đào Nest/Express. Phân biệt cú pháp JSON vs schema (DTO/class-validator), pretty-print vs minify, checklist debug an toàn trên trình duyệt.
Pretty-print JSON là gì | Khi nào format, khi nào minify (2026)
Pretty-print JSON (định dạng có indent) khác minify thế nào? Khi nào cần format API response 1 dòng, khi nào nén payload, và cách dùng JSON formatter trên trình duyệt không upload.
JSON Unexpected token — trailing comma, nháy đơn và cách tìm vị trí lỗi
JSON.parse báo Unexpected token ] hoặc '? Thường do trailing comma, nháy đơn, comment kiểu JS. Đọc position, debug API/log, phân biệt JSON vs object literal, và validate trên trình duyệt trước khi deploy.
Unexpected token JSON — quick fix | Map sang bài lỗi đầy đủ
JSON.parse Unexpected token: bảng quick fix theo token ], }, ', <, u. 5 bước sửa nhanh, rồi đọc bài lỗi đầy đủ về trailing comma, nháy đơn và position.
Debug JWT: checklist decode header/payload khi API trả 401【2026】
Checklist debug JWT thực chiến: đọc header (alg, kid, typ), payload (exp, sub, aud, roles), phân biệt decode vs verify, và quy trình 401 trước khi đổ lỗi backend. Tool local trên trình duyệt.
JWT Decode ≠ Verify | Khi nào chỉ đọc payload, khi nào bắt buộc kiểm chữ ký
Phân biệt JWT decode và verify chữ ký: đọc claims để debug 401, rủi ro tin role chưa verify, alg=none, và quy trình decode local an toàn trên trình duyệt — không dán token production lên site lạ.
Decode JWT online an toàn | Không verify ≠ không tin chữ ký【2026】
Cách decode JWT online đúng và an toàn: chọn tool chạy local trên trình duyệt, hiểu decode không chứng minh chữ ký, khi nào cần verify HS256/RS256, và checklist trước khi dán token thật.
JWT là gì? 3 phần header.payload.signature và cách đọc an toàn【2026】
Giải thích JWT gồm header, payload, signature (Base64URL). Phân biệt decode ≠ verify, đọc exp/sub/roles, rủi ro alg=none và secret lộ. Decode local trên trình duyệt với công cụ Kawa — không gửi token lên server lạ.
Line-height tiếng Việt đọc dài | Blog & landing nên đặt bao nhiêu?
Cách chọn line-height cho đoạn tiếng Việt dài trên blog và landing. Vì sao 1.6–1.8 dễ đọc hơn tiếng Anh, cách đổi leading Figma (px) sang hệ số CSS, lỗi unitless thường gặp, và checklist trước khi ship.
Lorem Ipsum cho mock UI | Độ dài tiếng Việt vs Latin khi test layout【2026】
Cách dùng Lorem Ipsum làm dummy text cho mock UI mà không bị vỡ layout khi thay bằng tiếng Việt. So sánh độ dài Latin vs tiếng Việt có dấu, checklist fixture ngắn/dài, lỗi line-clamp thường gặp và cách tạo nhanh trên trình duyệt.
line-height CSS cơ bản: unitless, px và công thức leading ÷ font-size【2026】
Hướng dẫn line-height trong CSS từ gốc: unitless vs px vs %, kế thừa, công thức đổi leading Figma sang hệ số, ví dụ body/heading, lỗi responsive khi gắn cứng px. Tính nhanh trên công cụ Kawa — khác bài đọc tiếng Việt dài.
Cách dùng Lua Formatter online | Dán code → Định dạng → Copy trong 1 phút【2026】
Hướng dẫn dùng Lua Formatter trên trình duyệt: dán script Lua lệch indent, bấm Định dạng, copy kết quả. Hiểu tool căn then/end/do thế nào, khi nào lệch, và checklist trước khi dán lại Roblox Studio hoặc resource FiveM — chạy local, không upload.
Lua Formatter cho Roblox & FiveM | Quy ước indent then/end cho cộng đồng script VN
Cách format Lua trước khi review script Roblox Luau hoặc resource FiveM. Thống nhất indent 2 space, then/end, local vs global — dùng Lua Formatter chạy local trên trình duyệt, không upload code lên server lạ.
Lua là gì? Ngôn ngữ script cho Roblox, FiveM và game mod【2026】
Lua là ngôn ngữ script nhẹ, gắn vào game và tool qua embedding. Giải thích ngắn cho developer Việt Nam: bảng (table), index từ 1, local vs global, khối then/end — và vì sao Roblox (Luau) cùng FiveM chọn Lua làm nền tảng mod.
Markdown cheat sheet GitHub README | Heading, link, code, table copy-paste【2026】
Cheat sheet Markdown thực dụng cho README GitHub: heading, link, code block, bảng, list, checkbox. Copy-paste ngay, tránh lỗi khoảng trắng sau #, full-width, relative link vỡ trên GitHub.
Markdown table generator | Tạo bảng MD từ hàng/cột Excel·CSV không bị lệch【2026】
Cách dùng markdown table generator: dán dữ liệu hàng/cột từ Excel hoặc CSV, sinh bảng Markdown đủ header + separator, escape dấu |, preview trước khi paste README / Issue / HackMD. Chạy trên trình duyệt, không upload.
Bảng Markdown GitHub README vs Notion | Alignment, escape dấu | và khi nào dùng CSV
Làm bảng Markdown tương thích GitHub Flavored Markdown và paste Notion: căn cột, escape dấu |, lỗi cột lệch, và tiêu chí chọn CSV thay cho table trong README hay wiki.
Markdown table vs CSV | Khi nào dùng bảng MD, khi nào giữ CSV【2026】
Chọn Markdown table hay CSV theo mục đích: README/Issue đọc nhanh vs Excel/Sheets/script/Notion database. Tiêu chí số cột, vòng đời dữ liệu, diff Git, và lúc nào convert bằng markdown table generator.
Markdown là gì? Heading và list trước khi học cheat sheet【2026】
Markdown là gì — giải thích cho sinh viên và freelancer Việt Nam: heading (#) và list (- / 1.) trước cheat sheet đầy đủ. Lỗi khoảng trắng, full-width từ Unikey, cấu trúc README, và format local trên trình duyệt.
Giải mã MD5? Myth search ‘decrypt’ — hash một chiều và cách trả lời khách【2026】
Vì sao search ‘giải mã MD5’ / ‘MD5 decrypt’ dẫn đến hiểu sai. MD5 không decrypt được; site crack chỉ tra dictionary. Playbook khi khách đưa 32 hex, rủi ro dán hash lên web lạ, và verify bằng hash xuôi trên trình duyệt.
MD5 không giải mã được: Myth ‘decrypt MD5’, checksum hợp lệ và khi nào tuyệt đối không dùng
MD5 là hash một chiều — không decrypt về chuỗi gốc. Rainbow table ≠ giải mã. Dùng MD5 cho checksum/ETag/cache key legacy; không dùng cho mật khẩu. Phân biệt với SHA-256 và encryption.
Xóa cache OGP Zalo, Facebook, LinkedIn sau khi sửa meta | 2026
Sửa og:title/og:image rồi mà Zalo, Facebook, LinkedIn vẫn hiện bản cũ? Hướng dẫn scrap lại bằng Sharing Debugger, Post Inspector, mẹo ?v= ảnh, và checklist sau deploy — bổ sung bài OGP preview SNS.
MD5 là gì? Checksum ngắn 32 ký tự hex — khi nào còn dùng【2026】
MD5 tạo digest 128-bit (32 hex) — nhanh cho checksum và API legacy, không dùng mật khẩu. So với SHA-256, lỗi khoảng trắng/CRLF làm lệch hash, và cách tạo MD5 local trên trình duyệt.
OGP không hiện trên Zalo, Facebook, LinkedIn | Cache, kích thước ảnh, checklist launch
Card share Zalo/Facebook/LinkedIn không lên ảnh hoặc còn bản cũ: nguyên nhân cache scraper, kích thước og:image, URL tuyệt đối, và checklist kiểm tra OGP trước khi post launch sản phẩm.
OGP meta tags là gì? og:title và og:image cơ bản cho share link【2026】
Open Graph (OGP) quyết định title, mô tả và ảnh khi share link. Giải thích og:title, og:image, og:url, kích thước ảnh, URL tuyệt đối, và cách xem trước trước khi đăng — nền tảng trước khi xử lý cache Zalo/Facebook.
OpenClaw setup guide cho beginner | Cài đặt AI agent trên PC từ Discord/Telegram【2026】
Hướng dẫn setup OpenClaw từ zero cho beginner Việt Nam: cài Node.js 22+, lấy API key (Gemini/Claude/Groq), onboard wizard, nối Discord/Telegram/WhatsApp, SOUL.md, troubleshooting lỗi Intents và port 18789.
OpenClaw là gì? AI agent local qua Discord/Telegram — overview trước khi setup【2026】
OpenClaw là AI agent mã nguồn mở chạy trên PC của bạn, điều khiển qua Discord, Telegram hoặc WhatsApp. So với ChatGPT web và Cursor: khi nào nên dùng, kiến trúc gateway, SOUL.md, và khi nào chưa nên cài.
Cách dùng Password Generator | Preset độ dài, ký tự và workflow lưu manager【2026】
Hướng dẫn dùng password generator trên trình duyệt: chọn độ dài 8–64, chữ hoa/thường/số/ký hiệu, tạo nhiều mật khẩu một lần, đọc chỉ báo mạnh/yếu, rồi copy vào password manager — khác bài checklist policy.
Portfolio site cho freelance & outsource VN | 9 mẹo xin việc 2026
Cách làm portfolio developer Việt Nam để xin việc freelance hoặc outsource: hero 3 giây, case study số liệu, tốc độ trang, SEO kỹ thuật, checklist trước khi gửi CV. Tránh lỗi phổ biến khi PM và recruiter review.
html font-size quyết định rem thế nào | Root 16px, 62.5% và lỗi scale
rem phụ thuộc font-size của html — không phải 'luôn = 16px'. Giải thích root mặc định, trick 62.5%, đổi root theo breakpoint, media prefers, và cách tính px↔rem đúng base trước khi ship token.
Tạo mã QR cho quán VN | Menu, Zalo, WiFi, URL — kích thước & in ấn【2026】
Hướng dẫn tạo mã QR cho SME Việt Nam: menu điện tử, Zalo OA, WiFi khách, link website. Chọn kích thước theo khoảng cách quét, mức sửa lỗi L/M/Q/H, checklist in ấn để tránh mã không đọc được.
Regex pattern hay dùng + cảnh báo ReDoS | Test trước khi ship
Bộ pattern regex thực chiến: email lỏng, URL, UUID, trim, log key=value, tiếng Việt Unicode. Cảnh báo catastrophic backtracking (ReDoS), fixture good/bad, và số điện thoại VN chỉ khi đúng format 10 số — luôn test trên tool trước khi merge.
Regex cơ bản + test nhanh trên trình duyệt | Flag, neo, nhóm bắt
Học regex đủ dùng hàng ngày: ., *, +, \d, ^ $, nhóm (), flag g/i/m — và quy trình test nhanh với fixture trước khi dán vào code. Khác cheat sheet pattern: tập trung hiểu engine và debug.
rgba() overlay trên ảnh hero | opacity vs nền bán trong suốt【2026】
Cách dùng rgba() làm overlay trên ảnh hero để chữ vẫn đọc được. So sánh opacity với rgba, bảng alpha 0.3–0.6, pseudo-element, gradient, checklist contrast — khác bài chỉ convert HEX↔RGBA.
RGBA to HEX / HEX to RGBA | Token màu có alpha cho design system
Chuyển rgba to hex và hex to rgba đúng alpha: công thức #RRGGBBAA, bảng token Figma→CSS→Tailwind, lỗi làm tròn 0.5→80, và checklist design system cho team frontend Việt Nam.
rgba() cú pháp alpha ngắn | rgb() slash, %, HEX8 cho CSS hiện đại
Học cú pháp alpha ngắn của rgba()/rgb(): slash alpha, phần trăm, #RGBA/#RRGGBBAA, khác opacity thế nào, và bảng giá trị hay dùng. Chuyển nhanh bằng công cụ RGBA ↔ HEX trên trình duyệt.
robots.txt ≠ noindex: Staging Disallow sai và checklist deploy cho freelancer
robots.txt không xóa khỏi Google. Phân biệt Disallow, meta noindex và auth. Case staging copy production làm lọt index / chặn nhầm cả site. Checklist deploy + generator local cho freelancer Việt Nam.
robots.txt là gì? User-agent và Disallow cơ bản cho SEO kỹ thuật
Giải thích robots.txt: User-agent, Disallow, Allow, Sitemap. Khác noindex thế nào, mẫu staging/production, lỗi chặn cả site, và cách tạo file bằng generator trên trình duyệt.
JSON-LD structured data cho site/blog/local business VN | Article, FAQ, Organization
Hướng dẫn JSON-LD (dữ liệu có cấu trúc) cho website, blog và cửa hàng local Việt Nam: Article, FAQPage, Organization, LocalBusiness. Ví dụ schema, lỗi Rich Results thường gặp, checklist trước khi deploy — không spam markup.
SHA-256 là gì? Checksum ngắn để kiểm tra file không bị sửa【2026】
SHA-256 là hàm băm 256 bit — dùng làm checksum ngắn để xác minh file tải về hoặc bản ghi. Giải thích avalanche, độ dài 64 hex, so với MD5, và khi nào không dùng cho mật khẩu. Tính local trên trình duyệt.
Quy ước format SQL: keyword IN HOA và indent JOIN/WHERE【2026】
Thống nhất quy ước format SQL trong team: SELECT/FROM/WHERE viết hoa, indent cột và điều kiện JOIN, khi nào Format vs Minify. Checklist review query một dòng từ log — formatter chạy local trên trình duyệt.
Bạch ngân tỷ (√2) là gì? Khi nào dùng thay tỷ lệ vàng trong print và UI
Bạch ngân tỷ (白銀比) ≈ 1:1.414 (√2) — tỷ lệ giấy A4/ISO. So với golden 1.618, khi nào chọn silver cho PDF, card UI, layout Nhật. Công thức chia N, ví dụ CSS aspect-ratio, checklist print→web.
SQL SELECT cơ bản trước khi dùng formatter | Đọc query một dòng từ log
Học SELECT / FROM / WHERE / JOIN trước khi format SQL. Cách đọc query một dòng từ log hoặc Slack, checklist review, rồi dùng SQL formatter Kawa để indent và viết hoa từ khóa — không cần đăng ký.
Kiểm hạn SSL trước outage | Freelancer VN hay quên renew
Cách kiểm tra hạn SSL/TLS trước khi site khách báo đỏ: openssl notAfter, trình duyệt, monitoring 30 ngày, bẫy Let's Encrypt 90 ngày, renew ≠ reload nginx, và checklist ship site freelance Việt Nam.
SQL Formatter khi review PR & log ORM | Pretty-print trước EXPLAIN
Định dạng SQL dài từ Prisma/Eloquent/TypeORM log trước khi đọc EXPLAIN. Convention cho team outsourcing VN: keyword hoa, indent JOIN/WHERE, minify khi nhúng script — dùng SQL Formatter trên trình duyệt.
Cách dùng SSL check tool | Kiểm tra hạn chứng chỉ trước khi khách báo đỏ
Hướng dẫn dùng SSL check Kawa: nhập domain, mở báo cáo Qualys SSL Labs, đọc hạn chứng chỉ, grade A/B/C và chuỗi CA. Checklist Let's Encrypt cho freelance hosting — tránh trang cảnh báo HTTPS.
SSL/TLS là gì? | HTTPS và biểu tượng ổ khóa trên trình duyệt
Giải thích SSL/TLS và HTTPS bằng ngôn ngữ thực tế: ổ khóa trình duyệt nghĩa là gì, handshake TLS làm gì, HTTP vs HTTPS, lỗi phổ biến (self-signed, mixed content, tên không khớp), và khi nào cần kiểm tra chứng chỉ.
Checklist mật khẩu mạnh khi onboard repo khách | Length, passphrase, không gửi Slack
Freelancer VN nhận quyền Git/hosting khách: checklist mật khẩu mạnh — độ dài quan trọng hơn myth ký tự đặc biệt, passphrase dễ gõ, password manager, và tuyệt đối không paste output generator vào Slack/Zalo.
Bảng màu Tailwind CSS | Tra cứu palette 50–950 và class HEX
Cách đọc bảng màu Tailwind: cấu trúc text/bg/border + tên màu + bậc 50–950, chọn slate vs zinc, map HEX từ Figma sang class gần nhất, và khi nào dùng palette mặc định thay vì custom.
Thêm màu brand vào Tailwind CSS | Custom color palette từ HEX (v3/v4)
Hướng dẫn extend bảng màu Tailwind từ mã HEX brand: theme.extend vs ghi đè, @theme trong v4, scale 50–900, opacity /50, và lỗi class động biến mất trên production. Kèm checklist cho team outsourcing.
Tailwind CSS là gì? Utility-first trong 15 phút — khi nào nên dùng【2026】
Tailwind CSS là framework utility-first: class như flex, p-4, text-sm thay vì viết CSS dài. So với Bootstrap/CSS thuần, khi nào hợp freelance VN, lỗi class động, và map HEX Figma sang palette mặc định.
Đếm token GPT trên trình duyệt | Token counter trước khi gửi prompt【2026】
Cách đếm token ChatGPT/GPT trên tool trình duyệt: khác đếm ký tự, tiếng Việt tốn hơn English, system prompt cũng tính. Workflow rút gọn prompt — không đi sâu bảng giá API.
Unity ScreenToWorldPoint: click lệch world khi đổi độ phân giải【studio VN】
Screen ↔ World trong Unity cho studio game và freelance VN: Z depth, Camera.main sai, Canvas Overlay vs Camera, ray–plane, và cách đối chiếu bằng công cụ trình duyệt khi Editor và build mobile lệch nhau.
Unix timestamp 2038 và giờ Việt Nam (UTC+7) | int32, int64, JWT exp
Vấn đề năm 2038 (int32 epoch), phân biệt giây/milli, chuyển timestamp sang giờ Việt Nam UTC+7, checklist trước khi lưu expiry và JWT exp — tránh tràn cột INT và lệch 7 giờ khi debug API.
Xem User-Agent trình duyệt hiện tại | Copy UA local không cần extension【2026】
Cách xem chuỗi User-Agent của trình duyệt đang mở: đọc token Chrome/Safari/Android, copy nhanh cho curl/Postman, so sánh mobile vs desktop, và tránh sniff UA để bật feature. Công cụ hiển thị UA chạy trên trình duyệt.
Unix timestamp là gì? Epoch giây từ 1970 và cách chuyển đổi【2026】
Unix timestamp (epoch) là số giây kể từ 1970-01-01 UTC. Phân biệt giây vs mili giây, chuyển số ↔ ngày giờ cho API/log, tránh lệch Date.now(), và dùng công cụ chuyển đổi trên trình duyệt — không trùng bài về vấn đề 2038.
URL encode tiếng Việt | Space, +, %20 và bẫy double-encode khi copy từ trình duyệt
Hướng dẫn URL encode/decode cho query tiếng Việt: khi nào encode path vs query, khác biệt space/%20/+, encodeURI vs encodeURIComponent, và cách tránh double-encode khi copy URL từ thanh địa chỉ Chrome.
Cấu trúc URL | Scheme, host, path, query — đọc đúng trước khi encode
Giải thích cấu trúc URL theo scheme, host, path, query, fragment. Phân biệt từng phần, lỗi ghép query tiếng Việt, encodeURIComponent vs encodeURI, và checklist debug URL trên local.
Đọc User-Agent trong ticket support | Parse UA bug report đúng chỗ, không sniff feature
Cách đọc và ghi User-Agent trong ticket support / bug report: checklist môi trường, bẫy UA Reduction, Chrome trên iOS, spoof DevTools — và khi nào dùng feature detection thay vì sniff chuỗi. Copy UA local bằng công cụ trình duyệt.
User-Agent header là gì? | Chuỗi trình duyệt gửi kèm mọi request HTTP
User-Agent (UA) là header HTTP trình duyệt gửi để tự nhận diện. Cách đọc chuỗi Mozilla/Chrome, khi nào dùng cho support/debug, giới hạn UA sniffing, Client Hints và công cụ xem UA local.
Collision UUID có đáng sợ không? Checklist an toàn khi dùng làm ID production
Xác suất collision UUID v4 cực thấp — nhưng 'thấy trùng ID' vẫn xảy ra vì truncate, RNG giả, import dump. Checklist vận hành, bảng quy mô, UNIQUE constraint và khi nào nên lo thật sự.
UUID v4 trùng được không? Collision thật vs myth khi dùng làm ID DB/API
UUID v4 không 'tuyệt đối không trùng' theo nghĩa toán học tuyệt đối — nhưng an toàn thực dụng cho primary key và API. Birthday paradox, 122 bit random, lỗi giả (truncate, Math.random), so với ULID/v7, và khi nào nên lo.
UUID là gì? Giải thích format 8-4-4-4-12 và cách đọc từng nhóm
UUID (Universally Unique Identifier) là chuỗi 128 bit dạng 8-4-4-4-12. Phân tích version/variant, ví dụ hợp lệ, regex kiểm tra, so với GUID/ULID, và khi nào dùng làm primary key hay trace id.
Contrast accessibility cơ bản | Chữ xám, placeholder và checklist UI hàng ngày【2026】
Hướng dẫn contrast a11y cơ bản cho frontend Việt: khi nào chữ xám Fail AA, placeholder vs label, link và nút disabled. Đo bằng số với công cụ contrast, checklist PR trước khi bàn giao.
Web frontend stack ngắn cho junior Việt | HTML → CSS → JS → framework【2026】
Lộ trình học web frontend ngắn gọn cho junior và sinh viên Việt Nam: thứ tự HTML CSS JavaScript Git, khi nào học React/Vue/Next, stack outsource phổ biến và lỗi học nhảy cóc.
WebP quality bao nhiêu? | Chữ UI bị mờ và checklist trước khi ship landing
WebP quality vs kích thước: ảnh hero khác screenshot UI. Vì sao chữ trên landing bị mờ khi nén quá, lossy vs lossless, resize trước khi encode, và checklist ship cho freelance VN.
WebP là gì? Ưu nhược điểm và khi nào nên dùng【2026】
WebP format là gì — ưu điểm (nhỏ hơn JPEG/PNG, có alpha, animation) và nhược điểm (encode UI chữ, tooling cũ, CMYK). Checklist chọn lossy/lossless, quality, fallback <picture> cho freelance và team outsourcing Việt Nam.
YAML ↔ JSON an toàn | K8s/CI config vs API — tránh thụt lề & secret
Chuyển YAML↔JSON cho Kubernetes, GitHub Actions và payload API: bẫy thụt lề, key trùng, anchor. Quy trình convert an toàn trên trình duyệt — không dán secret production lên tool lạ.
Bảng độ phân giải theo tỷ lệ khung hình｜16:9, 4:3, 1:1, 9:16, 21:9【2026】
Bảng độ phân giải theo tỷ lệ: 16:9 (720p–4K), 4:3, 3:2, 1:1, 9:16, 21:9 với kích thước pixel sẵn dùng. Tra cứu nhanh cho banner, YouTube, TikTok, slide — kèm công thức và tool tính cạnh còn lại.
Bảng escape sequence theo ngôn ngữ | \n \t \\ trong JS, Python, Java, C#, JSON
Bảng đối chiếu escape sequence theo ngôn ngữ: JavaScript, Python, Java, C#, PHP, Go và JSON. Khi nào dùng \n, \r\n, \uXXXX, raw string — kèm lỗi hay gặp khi copy giữa stack outsourcing.
Tra tên màu trong design | HEX → tên CSS, moodboard và giao tiếp designer
Cách tra tên màu từ mã HEX khi làm design: moodboard, CSS named colors, đặt tên swatch Figma, và nói chuyện với designer/PM mà không ship nhầm màu. Dùng Color Name Search trên trình duyệt.
So sánh dịch vụ placeholder image 2026 | placehold.co, Picsum, Kawa, local
So sánh dịch vụ dummy image / placeholder: placehold.co, via.placeholder, Lorem Picsum, placekitten, SVG data URI và tool Canvas local. Tiêu chí offline, ổn định regression, tiếng Việt trên nhãn, khi nào hotlink CDN và khi nào tải file vào repo.
Điều kiện mật khẩu mạnh theo policy 2026 | Độ dài, ký tự, không tái sử dụng
Điều kiện mật khẩu mạnh cho product và tài khoản cá nhân: độ dài tối thiểu, bộ ký tự, cấm tái sử dụng, chống dictionary — và cách viết policy không đẩy user tạo Shop2024!. Sinh bằng generator local, lưu password manager, bật 2FA.
8 regex ngắn hay dán mỗi ngày | Email, URL, trim, log — pocket card【2026】
Bộ regex ngắn (dưới ~40 ký tự) dùng hàng ngày: email lỏng, URL, số, trim, gộp space, key=value trong log, chữ có dấu tiếng Việt. Mỗi pattern kèm good/bad và lý do giữ ngắn — test trên Regex tester chạy local trước khi merge.
Đếm ký tự JS sai vì surrogate pair | .length vs emoji vs UTF-8【2026】
Vì sao "🍎".length = 2 trong JavaScript? Giải thích surrogate pair UTF-16, khác biệt code unit / code point / grapheme, CRLF, và khi nào dùng [...str].length hay Intl.Segmenter. Kiểm tra nhanh trên công cụ đếm ký tự chạy local.
Giữ tỷ lệ khi resize ảnh｜5 mẹo tránh méo mặt, logo và OGP【2026】
Resize ảnh không bị kéo giãn: khóa tỷ lệ, chỉ nhập một cạnh, checklist trước khi upload SNS/OGP. Phân biệt méo do file vs méo do CSS, kèm ví dụ số và lỗi hay gặp của freelancer.
Mẹo bug report ngắn｜Đủ để dev tái hiện, không viết tiểu thuyết【2026】
Cách viết bug report ngắn mà vẫn sửa được: 4 dòng bắt buộc, repro đánh số, expected vs actual, môi trường tối thiểu. Template 60 giây, lỗi «em lỗi rồi», và generator local trên trình duyệt.
Base64 là gì? Khi nào nên dùng (và khi nào đừng)【2026】
Giải thích Base64 encoding: bảng 64 ký tự, padding =, tăng ~33% kích thước. Phân biệt encode ≠ mã hóa bảo mật. Checklist khi nào dùng cho Basic Auth, API, email — và khi nào tránh. Thử nhanh trên trình duyệt.
Cách dùng JSON Formatter từng bước trên UI | Format, Minify, copy
Hướng dẫn thao tác JSON Formatter online theo từng nút: dán JSON, Định dạng (Format), Nén (Minify), Sao chép, Dữ liệu mẫu. Phát hiện lỗi cú pháp trên trình duyệt — không cần đăng ký, không upload server.