Chuyển đến nội dung chính

Bài đăng

Đang hiển thị bài đăng từ Tháng 5, 2025

Tailwind: Giới thiệu về Tailwind CSS - Day 1

Tailwind CSS là gì? Tailwind CSS được tạo ra bởi Adam Wathan, một lập trình viên người Canada. Ban đầu, Adam chỉ muốn tạo ra một công cụ nội bộ để tăng tốc việc thiết kế UI mà không cần rời khỏi HTML. Nhưng chính triết lý "utility-first" của anh lại mở ra một hướng đi hoàn toàn mới: viết giao diện bằng cách sử dụng các tiện ích nhỏ (utility classes) thay vì viết CSS riêng cho từng component. Tailwind được giới thiệu lần đầu vào năm 2017, và kể từ đó đã tạo nên một cuộc cách mạng nhỏ trong cách thiết kế web — vừa nhanh, vừa chuẩn, vừa nhất quán. Hệ sinh thái của Tailwind cũng phát triển cực kỳ mạnh, từ Tailwind UI (bộ giao diện trả phí do chính Adam phát triển) đến Headless UI (component UI không phụ thuộc vào style), và giờ là hàng loạt plugin, theme, và công cụ build. Tailwind Documentation: https://tailwindcss.com/docs/installation/using-vite Tailwind CSS Github: https://github.com/tailwindlabs/tailwindcss   Taiwind UI Pricing: https://tailwindcss.com/plus/ui-blocks/marketi...

ReactJs: Tổng hợp các bài viết về ReactJs

React: Up and Running - Day  React: Component- Day 2     React: Khai báo Function component Typescript - Day 2.1 React: Các công cụ lập trình - Day 3  React: Complex Component- Day 4 React: Complex Component với React Bootstrap- Day 4.1   React: ES 6, Import và Export - Day 4.2   React: ES 6 - Day 4.3   React: Data-Driven Component - Day 5   React: State trong ReactJs - Day 6   React: LifeCycle Hook - Day 7   React: React Hook - Day 7.1 React: Proptypes - Day 8   React: React Interactivity - Day 9   React: Yup - Day 10   React: Axios - Day 11   React: React Hook Form - Day 12   React: Cách tổ chức thư mục trong React Js - Day 13 React: React Router - Day 14   React: Higher-Order Component - Day 15  

Mermaid: Hướng dẫn sử dụng Mermaid - Part 1

Mermaid là gì? Mermaid là một công cụ vẽ sơ đồ và biểu đồ trực quan dựa trên JavaScript, sử dụng cú pháp lấy cảm hứng từ Markdown để tạo và chỉnh sửa các sơ đồ một cách linh hoạt. Với bản phát hành gần đây và sự hỗ trợ trực tiếp trên GitHub, Mermaid đã giúp loại bỏ nhu cầu chèn hình ảnh hoặc đoạn mã cứng trong phần văn bản. Bạn có thể chèn trực tiếp biểu đồ vào nội dung sử dụng cú pháp JavaScript.  Ưu điểm Tích hợp dễ dàng: Bạn có thể dùng trực tiếp trong các công cụ phổ biến như GitHub, GitLab, VS Code, v.v. Dễ dàng tích hợp vào Blogger, Wordpress, website. Hỗ trợ Visual Studio code và một số công cụ khác Sử dụng online tại https://mermaid.live Hỗ trợ nhiều loại sơ đồ: Flowchart, Sequence diagram, Gantt chart, Class diagram, Entity Relationship diagram, v.v.  Các loại Diagram types hỗ trợ Diagram Type Mermaid Syntax Description Flowchart graph TD / graph LR Biểu đồ luồng – mô tả quá trình, điều kiện, luồng ...

Sơ lược về các thuật toán mã hóa: MD5, SHA1, SHA256

Hash Function (Hàm băm) là gì? Hàm băm là một hàm toán học nhận đầu vào là một chuỗi dữ liệu (văn bản, tệp tin, mật khẩu...) với độ dài bất kỳ, và trả về một chuỗi giá trị cố định (gọi là mã băm – hash value, digest hoặc checksum). Ví dụ: Input: "ChatGPT" Output (MD5): 62290c06718fbef3ca1e3be8a5a145f2 Đặc điểm chính của một hàm băm Đầu ra cố định (Fixed-length output) Dù bạn nhập 10 ký tự hay 10.000 ký tự, kết quả băm luôn có độ dài như nhau. MD5: 128 bit SHA-1: 160 bit SHA-256: 256 bit SHA-512: 512 bit VD: Nhatkyhoctap -> df30cb178eb8e37728f39b3e6551c8de https://www.md5hashgenerator.com/ -> bd041e3f1821cbb99795412b64508a05 Không thể đảo ngược (One-way function) Rất khó – gần như không thể – tìm ra dữ liệu gốc chỉ từ mã băm. Tính kháng va chạm (Collision resistance) Không nên có hai đầu vào khác nhau cho ra cùng một mã băm. Nếu điều này xảy ra, thuật toán được coi là yếu. Deterministic – Tính xác định Cùng một đầu vào luôn cho ra cùng một kết quả băm. Ví dụ: Hash(...

AZ-204: Azure CLI

Cài đặt Install Azure CLI: https://learn.microsoft.com/en-us/cli/azure/install-azure-cli Hoặc bạn sử dụng Azure Portal   Popup Getting Started hiện lên -> chọn No storage account required -> Chọn Subscription -> Apply Một số lệnh thông dụng 1. az account – Quản lý tài khoản Lệnh Mô tả az login Đăng nhập vào Azure az account show Hiển thị thông tin subscription hiện tại az account list-locations Liệt kê các vùng (region) khả dụng az account set --subscription "<id>" Chọn subscription cụ thể Ví dụ: $ az account list --output table Name CloudName SubscriptionId TenantId State IsDefault ---------- ----------- ------------------- ------------------- ------- ----------- Nhatkyhoctap AzureCloud 3e5ff226-... 82676786-... Enabled True DisplayName Name RegionalDisplayName ------------------------ ------------------- ------------------------------------- East US ...

Sudoku: Naked Triple

Naked Triple xảy ra khi có 3 ô trong cùng một hàng, cột hoặc vùng 3x3 và chúng chỉ chứa đúng 3 ứng viên (số) khác nhau, bất kể thứ tự hoặc sự trùng lặp. ➡ Khi đó, ta biết chắc chắn rằng 3 số đó sẽ phải nằm trong chính 3 ô này, và chúng sẽ không thể xuất hiện ở bất kỳ ô nào khác trong cùng vùng/hàng/cột. Vị trí 3 ô tạo thành Naked Triple: Trong cột thứ 2, có 3 ô được tô màu xanh lá: Ô B2 (hàng 2, cột 2): có ứng viên 2, 8 Ô C2 (hàng 3, cột 2): có ứng viên 2, 9 Ô H2 (hàng 8, cột 2): có ứng viên 2, 8, 9 ➡ Tổng hợp lại, 3 ô này chỉ chứa 3 ứng viên: 2, 8 và 9 📢 Đây chính là một Naked Triple trong cột 2.

Sudoku: Claiming Candidates

Kỹ thuật Claiming Candidates (còn gọi là Pointing Candidates) là một chiến thuật trung cấp rất hiệu quả trong Sudoku, giúp loại trừ các con số (candidates) trong một khu vực cụ thể. Claiming Candidates xảy ra khi: Một con số (ứng viên) chỉ xuất hiện trong một hàng hoặc cột duy nhất bên trong một vùng 3×3. ➡ Điều đó có nghĩa là: con số đó phải nằm ở hàng hoặc cột đó, nên ta có thể loại bỏ nó khỏi các ô khác cùng hàng hoặc cột ngoài vùng 3×3 đó.

Sudoku: Naked Pair

Naked Pair là gì? Naked Pair xảy ra khi hai ô trong cùng một hàng, cột hoặc vùng 3×3 chỉ chứa chính xác hai số giống nhau, ví dụ như: {1, 3} và {1, 3}. ➡ Vì hai con số đó phải nằm trong hai ô này, chắc chắn chúng không thể xuất hiện ở bất kỳ ô nào khác trong hàng/cột/vùng đó. Xem hình Sudoku dưới đây:   Hai ô màu xanh ở cột 1 (A3 và H3) đều có {1, 3}. Đây chính là một naked pair trong cột. ⇒ Kết luận: Tất cả các ô còn lại trong cột 1 phải loại bỏ số 1 và 3  

Sudoku: Simple coloring

Simple Coloring (hay còn gọi là Single’s Chains) trong Sudoku là một kỹ thuật giải nâng cao dùng để loại bỏ các con số (candidates) dựa trên việc tô màu xen kẽ cho các chuỗi liên kết đơn (single chains) của một con số cụ thể trong lưới Sudoku. Xác định số cụ thể Đây là kỹ thuật chỉ xét   một con số cụ thể   (ví dụ số 7), sau đó tìm các   ứng viên còn lại   của số đó trong những hàng, cột, hoặc khối   chỉ còn đúng 2 ô   chứa số đó. Ta gọi các cặp này là các   bi-location links   – liên kết hai vị trí. Xây dựng chuỗi (chain) Đây là kỹ thuật chỉ xét   một con số cụ thể   (ví dụ số 7), sau đó tìm các   số còn lại   của số đó trong những hàng, cột, hoặc khối   chỉ còn đúng 2 ô   chứa số đó. Ta gọi các cặp này là các   bi-location links   – liên kết hai vị trí. Tô màu các ô – Xây chuỗi logic Khi đã có chuỗi, ta   tô màu xen kẽ   hai ô một màu. Ví dụ: Coloring Contradiction – Mâu thuẫn màu A1 – F6: màu ...

Azure Private DNS là gì?

Trước đây mình từng làm một bài lab về Azure Container App, trong đó có phần cấu hình Azure Private DNS. Thấy khá thú vị và hữu ích, nên mình quyết định tổng hợp lại và chia sẻ cùng mọi người. Trước khi đi sâu vào Private DNS, chúng ta cần nắm rõ DNS là gì, và DNS đóng vai trò gì trong việc phân giải tên miền — từ đó mới thấy được vì sao Private DNS lại quan trọng trong môi trường Azure nội bộ (VNet). DNS là gì? DNS (Domain Name System) là hệ thống phân giải tên miền cho phép thiết lập tương ứng giữa địa chỉ IP và tên miền trên internet. Khi người dùng nhập địa chỉ trang web trên trình duyệt, DNS sẽ tìm địa chỉ IP của máy chủ chứa trang web và trả về kết quả hiển thị tương ứng của trang web cần tìm. Do đó, thay vì phải ghi nhớ địa chỉ IP phức tạp, người dùng có thể dễ dàng truy cập các trang web thông qua tên miền. Ngoài ra, DNS cũng giúp tăng tính linh hoạt và quản lý hiệu quả hơn cho hệ thống mạng, cung cấp tính bảo mật và tăng tốc độ truy cập internet. Chức năng của DNS là gì? DNS l...