Nhật ký học tập

Routing, hay định tuyến, là quá trình quyết định cách ứng dụng phản hồi yêu cầu của người dùng đến một URL cụ thể. Khi người dùng nhấp vào liên kết, nhập URL vào trình duyệt hoặc thực hiện hành động thay đổi URL hiện tại, cơ chế routing sẽ quyết định nội dung hoặc component nào sẽ hiển thị trên trang. Tại sao lại cần App Router? Trong khi Pages Router, với cấu trúc thư mục pages quen thuộc, đã phục vụ tốt cho việc routing trong các phiên bản trước của Next.js, App Router ra đời như một giải pháp cho những đòi hỏi ngày càng cao của ứng dụng web hiện đại. Thay vì pages, App Router sử dụng thư mục app để định nghĩa các route và layout. File layout.js/tsx Là component bao bọc bên ngoài component page.js/tsx, định nghĩa layout chung cho một nhóm route con. Hỗ trợ khai báo metadata cho từng route con. Giúp tái sử dụng layout và logic chung cho nhiều route. File page.js/tsx Đại diện cho một route cụ thể, là component chính được hiển thị cho route tương ứng. app/not-found.js/tsx   Xử lý tr...

NextJs là gì? Next.js là một framework dựa trên React cho phép bạn tối ưu hoá hiệu năng, hỗ trợ SEO và trải nghiệm người dùng thông qua pre-rendering: Server Side Rendering (SSR) và Static Site Generation (SSG). Trong bài viết này, mình sẽ chia sẽ cách cài đặt và sử dụng Bootstrap 5 với NextJs Cài đặt Mở terminal và chạy lệnh sau để tạo dự án Next.js mới. Thay thế my-next-app bằng tên dự án bạn muốn. npx create-next-app@latest my-next-app cd my-next-app npm run dev Bạn chọn Typescript, ESLint, src/, App Router √ Would you like to use TypeScript? ... No / Yes √ Would you like to use ESLint? ... No / Yes √ Would you like to use Tailwind CSS? ... No / Yes √ Would you like to use `src/` directory? ... No / Yes √ Would you like to use App Router? (recommended) ... No / Yes √ Would you like to customize the default import alias (@/*)? ... No / Yes Creating a new Next.js app in D:\Practices\NextJs\nextjs-bootstrap-example. Using npm. Initializing project with template: app Installing de...

Viết CSS hiệu quả, dễ bảo trì và mở rộng luôn là thách thức lớn đối với các lập trình viên front-end. Bạn thường xuyên tốn nhiều thời gian cho việc viết CSS boilerplate, gặp khó khăn trong việc bảo trì code CSS, hay dễ mắc lỗi và thiếu nhất quán? Đừng lo lắng, Tailwind CSS đã có mặt để giúp bạn! Tailwind CSS là gì ? Tailwind CSS là một framework CSS utility-first, tương tự như Bootstrap, cung cấp một tập hợp các lớp CSS được tích hợp sẵn mà chúng ta có thể sử dụng trong ứng dụng của mình. Tuy nhiên, điểm đặc biệt của Tailwind CSS là nó cung cấp một số lượng lớn các lớp CSS với các thuộc tính và quy tắc CSS khác nhau. Thay vì sử dụng các lớp CSS được định nghĩa sẵn cho các thành phần cụ thể, Tailwind CSS tập trung vào việc cung cấp các lớp CSS cơ bản mà chúng ta có thể kết hợp để xây dựng giao diện. Atomic CSS và Utility Classes Để hiểu rõ Tailwind CSS, trước tiên ta cần làm quen với khái niệm Atomic CSS và CSS utility classes: Atomic CSS : Là một phương pháp viết CSS, nơi mỗi class ...

Trong bài viết này, chúng ta sẽ cùng khám phá cách tạo column chart nâng cao Hiển thị nhiều series data Dưới đây là column chart, hiển thị data năm 2015 và 2016 anychart.onDocumentReady(function () { // create a data set var data = anychart.data.set([ ["John", 10000, 12500], ["Jake", 12000, 15000], ["Peter", 13000, 16500], ["James", 10000, 13000], ["Mary", 9000, 11000] ]); // map the data var seriesData_1 = data.mapAs({x: 0, value: 1}); var seriesData_2 = data.mapAs({x: 0, value: 2}); // create a chart var chart = anychart.column(); // create the first series, set the data and name var series1 = chart.column(seriesData_1); series1.name("Sales in 2015"); // create the second series, set the data and name var series2 = chart.column(seriesData_2); series2.name("Sales in 2016"); // set the chart title chart.title(...

Giới thiệu AnyChart là một thư viện JavaScript mạnh mẽ và linh hoạt để tạo biểu đồ trực quan và tương tác cho các ứng dụng web. Thư viện cung cấp nhiều loại biểu đồ khác nhau, bao gồm Pie and Donut , Column , Bar , Line , Scatter , Cherry , Area , Range Column , Win/Loss Sparklines , Pareto Charts, v.v. AnyChart cũng hỗ trợ nhiều tính năng nâng cao như chú thích, tương tác, xuất biểu đồ sang các định dạng hình ảnh khác nhau, v.v. Homepage: https://www.anychart.com/  Bài viết này sẽ hướng dẫn bạn cách cài đặt và sử dụng AnyChart, đồng thời cung cấp một số ví dụ cơ bản để giúp bạn bắt đầu.  Cài đặt Để tạo 1 chart đầu tiên, bạn cần thêm thư viện anychart: <script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-base.min.js" type="text/javascript"></script> Khai báo 1 container element để chứa chart cần render <div id="container" style="width: 500px; height: 400px;"></div> Đoạn code HTML hoàn chỉnh như sau: <!do...

Trong MediatR, Publish Method chính là công cụ mà chúng ta sử dụng để gửi notification đến các handler đã đăng ký. Các handler này sẽ được thực thi theo thứ tự được đăng ký. Mô hình Publish Method trong MediatR được xây dựng theo design pattern Observer . Design pattern Observer (hay còn gọi là Subscriber) định nghĩa một mối quan hệ một-nhiều trong đó một đối tượng publisher duy trì một danh sách các đối tượng subscriber và gửi notification cho tất cả các subscriber khi có thay đổi xảy ra.  Ưu điểm của design pattern này là giảm sự phụ thuộc trực tiếp của các class. Việc thêm hoặc gỡ bỏ các subscriber (handler) đơn giản chỉ cần thực hiện thao tác đăng ký hoặc hủy đăng ký với mediator. Setup Notification MediatR cung cấp interface INotification làm lớp trung gian để thực hiện việc đăng ký subcriber // // Summary: // Marker interface to represent a notification public interface INotification { } Tạo 1 class cụ thể cho Notification public class AddAuthorEvent: INotification { ...

Validation là 1 phần quan trọng của API. Khi sử dụng Clean Architect hoặc bất kỳ design pattern hiện đại nào, chúng ta thường tách phần Validation và Business Logic ra thành những thành phần riêng biệt. Lưu ý trong bài viết này, chúng ta chỉ nói về Input Validation. Chúng ta sẽ không tách Business Validation Giả sử với đoạn code sau, nếu không validate PageIndex thì thỉnh thoảng đoạn code sẽ gây ra exception nếu PageIndex < 0 public class GetAuthorQueryHandler : IRequestHandler<GetAuthorQuery, List<AuthorModel>> { private readonly IAuthorRepository _authorRepository; public GetAuthorQueryHandler(IAuthorRepository authorRepository) { _authorRepository = authorRepository; } public async Task<List<AuthorModel>> Handle(GetAuthorQuery request, CancellationToken cancellationToken) { if(request.PageIndex < 0) throw new Exception("PageIndex is invalid") return _authorRepository.GetAuthors(request.PageSize, request.PageIndex); } } Để phâ...