Nhật ký học tập

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â...

Lịch sử Bootstrap Bootstrap là một framework front-end phát triển bởi Twitter vào năm 2011 bởi Mark Otto và Jacob Thornton. Ban đầu, nó được gọi là "Twitter Blueprint" và được sử dụng bên trong Twitter để tạo giao diện cho ứng dụng Web của họ. Sau đó, Twitter quyết định chia sẻ nó với cộng đồng phát triển Ngày 19 tháng 8 năm 2011, Bootstrap chính thức được phát hành. Bootstrap 2 ra mắt vào tháng 1 năm 2012 với nhiều cải tiến và tính năng mới. Phiên bản này đã cải thiện hệ thống lưới, tương tác trang Web và hỗ trợ trình duyệt tốt hơn. Tiếp đến Bootstrap 3 được phát hành vào tháng 8 năm 2013 và đưa ra các tính năng Responsive Design, tương thích với các thiết bị di động, và nhiều thành phần giao diện mới. Bootstrap 4 đã mất một thời gian dài để phát triển, ra mắt vào tháng 1 năm 2018 với nhiều cải tiến lớn. Bootstrap 4 cải thiện hệ thống grid, tối ưu hóa CSS, hỗ trợ Flexbox, và đem lại nhiều tính năng và sự linh hoạt hơn cho người phát triển. Đến nay Bootstrap đã nhận được sự ủ...

Validation là gì? Là quá trình kiểm tra dữ liệu người dùng (End User) nhập liệu đã đúng với các Quy tắc ràng buộc dữ liệu hay chưa? Tránh dữ liệu gởi đến Server là không chính xác/không sử dụng được (dữ liệu rác). Trong lập trình C# và nhiều ngôn ngữ lập trình khác, việc xác thực dữ liệu (validate data) là một phần quan trọng của việc phát triển ứng dụng, vì nó giúp đảm bảo tính nhất quán, an toàn và đáng tin cậy của hệ thống. Dưới đây là 1 ví dụ về việc sử dụng Validation trong C# Trong ví dụ này, chúng ta sẽ tạo 1 console application để nhận data từ console app. Khai báo Person public class Person { public string FirstName { get; set; } public string LastName { get; set; } } Thực hiện việc kiểm tra trong hàm Validate() var person = new Person(); // Get data Console.WriteLine("Enter first name:"); person.FirstName = Console.ReadLine(); Console.WriteLine("Enter last name:"); person.LastName = Console.ReadLine(); if (string.IsNullOrWhiteSpace(person.Fir...