Danh mục: Front end

  • Best Practice: Typescript trong functional programming

    Best Practice: Typescript trong functional programming

    🧠 Phần 1: Khái niệm nền tảng trong Functional Programming 🔹 Functional Programming là gì? 🆚 Imperative vs Declarative Programming 🔸 Imperative: Chỉ định từng bước cụ thể. 🔸 Declarative: Mô tả cái cần đạt được. 👉 Declarative được ưa chuộng trong FP vì giúp dễ hiểu và bảo trì hơn. 🧼 Pure Functions (Hàm…

  • TypeScript Advanced – Phần 4 – Design Patterns – Behavioral Patterns

    TypeScript Advanced – Phần 4 – Design Patterns – Behavioral Patterns

    🧠 Tổng quan Phần này tập trung vào các Behavioral Design Patterns giúp quản lý trạng thái và hành vi của đối tượng theo thời gian – bằng cách tách biệt logic trạng thái ra khỏi hành vi của đối tượng. 📌 Các mẫu thiết kế sẽ được đề cập: 🔁 Iterator Pattern – Mẫu…

  • TypeScript Advanced – Phần 3 – Design Patterns – Structural Patterns

    TypeScript Advanced – Phần 3 – Design Patterns – Structural Patterns

    🎯 Mục tiêu 🧠 Khi nào nên dùng Structural Patterns Trường hợp Vai trò của Structural Pattern 🧩 Kết hợp nhiều đối tượng thành hệ thống lớn Composite, Facade, Bridge… 🔁 Thêm tính năng mà không sửa đổi code cũ Decorator, Proxy 🔗 Kết nối các interface không tương thích Adapter 🔍 Giảm phụ thuộc…

  • TypeScript Advanced – Phần 2 – Design Patterns – Creational Patterns

    TypeScript Advanced – Phần 2 – Design Patterns – Creational Patterns

    🧱 Design Patterns trong TypeScript ❓ Tại sao cần? 🔎 Relevance hiện nay 🏗️ Creational Patterns – Nhóm khởi tạo 🧍‍♂️ Singleton Pattern – Mẫu Thiết kế Đơn thể 🧠 Khái niệm cốt lõi 📝 Ví dụ điển hình: 📌 Đặc điểm chính ⛳ Khi nào nên dùng Singleton ⚠️ Cảnh báo: Dùng quá đà…

  • Typescript Advanced – Phần 1 – Core Principles

    Typescript Advanced – Phần 1 – Core Principles

    📌 Tổng quan Chương này đưa bạn đến phần nâng cao của TypeScript, gồm: 🧩 Các kiểu dữ liệu tiện ích (Utility Types) 🔹 Record<K, T> 🔹 Partial<T> 🔹 Required<T> 🔹 Pick<T, K> 🔹 Omit<T, K> 📝 Lưu ý: Partial và Required không áp dụng đệ quy (nested objects cần chỉ rõ). 🔍 Các kỹ…

  • A-Z: Những công cụ Generative AI cách mạng hóa cho dân IT “truyền thống”

    A-Z: Những công cụ Generative AI cách mạng hóa cho dân IT “truyền thống”

    Nội dung sau đây mà mình đã tổng hợp sẽ được chia theo phần công việc liên quan trực tiếp đến quy trình phần mềm quen thuộc, trích từ nội dung gốc của tác giả Sergio Pereira sẽ cung cấp cho bạn một bộ công cụ mạnh mẽ với phần đánh giả trải nghiệm trực…

  • Các loại Tests thiết yếu cho Front-End : Unit Tests, Performance Tests, Visual Regression Tests

    Các loại Tests thiết yếu cho Front-End : Unit Tests, Performance Tests, Visual Regression Tests

    🏛️ Vai trò kiểm soát chất lượng của Frontend Architect 🐛 Các loại lỗi (regressions) có thể xảy ra khi có code mới 🔔 Hậu quả chung:Tất cả các lỗi trên đều dẫn đến mất doanh thu. 🧪 Giải pháp chung cho các loại lỗi: Testing! 📝 Nguyên tắc lập kế hoạch test coverage 🌟…

  • Cách RedHat.com xây dựng hệ thống với thiết kế “super” clean cho Front End

    Cách RedHat.com xây dựng hệ thống với thiết kế “super” clean cho Front End

    1. Modular design là gì? Và vì sao thất bại? Ban đầu, team xây dựng website RedHat.com không hề có khái niệm “modular design”. Mỗi “band” (khối nội dung – content block) được viết theo kiểu top-down – nghĩa là style CSS được gắn rất cụ thể vào từng cấu trúc markup, ví dụ: Hệ…

  • Viết E2E test cho Angular bằng Cypress

    Viết E2E test cho Angular bằng Cypress

    Lý do viết E2E test 🛠️ 1. Thiết lập Cypress và viết test đầu tiên ✅ Các bước chính: 🧪 Viết test đầu tiên: // src/support/app.po.tsexport const getHeaderTitle = () => cy.get(‘.toolbar__title’);// src/e2e/app.cy.tsdescribe(‘ng-cypress-starter’, () => { beforeEach(() => cy.visit(‘/’)); it(‘should display the correct header title’, () => { getHeaderTitle().should(‘contain.text’,’Your first Cypress test in Angular’); });});…

  • Quản lý State bên trong Angular bằng NgRx

    Quản lý State bên trong Angular bằng NgRx

    NgRx là hệ sinh thái quản lý state reactive trong Angular. Chương này giúp bạn nắm vững cách sử dụng các phần chính của NgRx để xây dựng ứng dụng có cấu trúc rõ ràng, dễ kiểm soát và mở rộng. Các kỹ thuật được trình bày: ✅ 1. Store đầu tiên với Actions &…