Bài đăng

Hiển thị các bài đăng có nhãn css

SERIES SOLID PHẦN 2: Single Responsibility Principle

Hình ảnh
Nội dung nguyên lý : Một class chỉ giữ một trách nhiệm duy nhất , hay nói cách khác , muốn modify class này thì chỉ có một lý do duy nhất Vi phạm SRP( Single Responsibility Principle) Ta có ví dụ điển hình trên, một con dao có quá nhiều chức năng. Khi một phần nào đó trong dao bị hư, ta phải tháo ra toàn bộ chức năng sau đó lấp lại, trong khi đó các con dao khác lại không bị hư hỏng gì => tốn kém, tốn thời gian modify, quản lý thời gian không hiệu quả. Tại sao nên áp dụng SRP? Đối với các quy trình phần mềm nói chung việc thay đổi requirement là liên tục và rất dynamic , vì vậy việc chỉnh sửa code cũng liên tục. Việc một class quá to sẽ rất khó quản lý , quá cồng kềnh dẫn đến modify rất cực , muốn modify phải đọc lại toàn source? Dễ ảnh hưởng đển các module khác. Áp dụng Single responsibility principle như thế nào? Để áp dụng với single responsibility principle cụ thể với con dao phía trên ta chỉ phần tách các con dao chức năng thành các class nhỏ hơn, thế là xong. Khi 1 phần dao nà...

SERIES SOLID PHẦN 1: SOLID là gì? 5 nguyên tắc vàng cho dev xịn

Theo sách game programming pattern: một kiến trúc phần mềm tốt là một phần mềm được thiết kế như thể nó đúng hoàn toàn như dự đoán từ đầu đã đề ra, nghĩa là ta sẽ giải quyết mọi task một cách dễ dàng chỉ với một vài function với vị trí đặt function là hoàn hảo, không ảnh hưởng đến các đoạn mã đã viết, không để lại một chút "gợn" nào trên bề mặt yên bình của các dòng mã. Đễ làm được điều đó dễ dàng, các dev như chúng ta không thể nào bỏ qua được SOLID, những nguyên lý vàng trong việc phát triển và xây dựng phần mềm( tất nhiên phải có sự kết hợp của cả design pattern, nhưng trong phạm vi bài này mình sẽ chỉ nói SOLID). SOLID RA ĐỜI NHƯ THẾ NÀO? Lập trình hướng đối tượng là mô hình lập trình cực kì mạnh mẽ và được áp dụng nhiều nhất ngày nay, Các tính chất đặc biệt của nó khiến nó trở nên nổi bật hơn bất kì mô hình lập trình nào khác đó chính là: Encapsulation( Đóng gói ) Abstraction( Trừ tượng ) Inheritance( Kế thừa ) Polymorphism( Đa hình ) Tuy nhiên, không phải lập trình viê...

Toán vector là cái vẹo gì?

Hình ảnh
Cứ nhắc đến vector lại nhớ đến những năm tháng lớp 10 hoàng kim , thời mà đầu những năm cấp 3 lại phải chơi cùng những thứ gọi là vector nhưng chả biết để phải làm gì :)) . Mình khá may mắn vì có người thầy tâm huyết chỉ cho mình từng ứng dụng chi tiết sau mỗi bài học nhưng rồi cũng quên cho đến khi mình bắt đầu làm game thì mới đụng lại vector và hiểu ứng dụng của nó cực kì mạnh mẽ trong làm game nói riêng . Trong ngữ cảnh bài này , mình sẽ giới thiệu sơ qua toán vector và cách ứng dụng toán vector trong làm game cụ thể là unity engine. 1. Toán vector cơ bản Trong toán học , người ta định nghĩa vector là đại lượng biểu diễn cho hướng và độ lớn . Trong không gian vector được xác định bởi 3 đại lượng x , y ,z Tương tự , trong unity ta có cấu trúc Vector3 , nó đại diện cho cả Points và Vectors. Một point đại diện cho 1 vị trí nào đó trong không gian trò chơi , còn một Vector đại diện cho hướng và độ lớn Trong không gian , Đối với một point có tọa độ x ,y ,z là một vị trí duy nhất và đối...

Make AI with State Design Pattern

Hình ảnh
Hôm nay đang trong thời gian chạy deadline nhập môn kỹ thuật phần mềm , cụ thể là con game "The Walker" của team tụi mình , mình cần phải làm một con AI cụ thể là con zombie với các chức năng : tìm đường , tự động tấn công trong phạm vi cố định , chuyển sang trạng thái đứng yên khi ông có người chơi đứng gần , vân vân mây mây. Đây có lẽ là một tính năng rất bình thường , mọi chuyện vẫn suôn sẻ cho đến khi mình thêm 1 state mới và cứ như vậy code của mình hầu như phải sửa đi sửa lại nhìn rất không được clean theo phong cách OOP mà mình hướng đến Trong phạm vi bài viết này mình sẽ nói cách làm ban đầu của mình và sự cải tiến khi dùng State Design Pattern Cách giải quyết ban đầu Mình nghĩ mọi người đều sẽ nghĩ rằng : tạo 1 enum cho zombie , và dùng if else để thay đổi trạng thái của nó ví dụ : enum Status { Idle, Chase, } IEnumerator AIZombie() { float dis = Vector3.Distance(transform.position, player.transform.position); switch (W...

Master về con trỏ this - cách khắc phục các lỗi thường gặp

Trong blog lần này mình sẽ chia sẽ tổng quan về con trỏ this , và một số lỗi thường gặp , các câu hỏi này rất rất hay xuất hiện trong các buổi interview và nó nằm trong các vấn đề nâng cao của javascript  This đối với những bạn mới học thì có vẻ nó khá đơn giản , vì các bạn chỉ nghĩ đơn giản là nó sẽ refer đến object chứa nó ,  đúng nhưng chưa đủ ,  vì có lẽ các bạn chưa gặp qua nhiều vấn đề chuyên sâu về this Tổng quan this keyword Như trên , thì cơ bản this là refer(tham chiếu) đến object chứa nó , nhớ nhé : LÀ OBJECT CHỨA NÓ để tí nữa mình còn nhắc lại , đối với các newbie thì sẽ hiểu như thế này Thái là con trai nhưng anh ấy thích trai Thắng là con trai nhưng anh ấy lại thích ngắm trai 6 múi  ở ví dụ trên , thì Thái và Thắng là một đối tượng , và anh ấy là đại từ nhân xưng thay thế cho Thái và Thắng => this =  anh ấy , và object =  Thái và Thắng Ví dụ: var  user = {     name : "Vo Minh Tan", ...

Thu Thập Dữ liệu Trang Web (Web Scraping) với PUPPETEER

Hình ảnh
Khi cần dữ liệu của 1 trang web nào đó, trang web đó có thể cung cấp API cho ta kết xuất thông tin ở dạng JSON. Nhưng trong nhiều trường hợp, nếu không có API thì ta phải đi cào dữ liệu từ trang bằng cách mở Google Dev Tools và code qq gì đó lấy thông tin ở các element trong trang và có trích xuất được dữ liệu. Có khá nhiều công cụ phục vụ cho việc scraping, tùy theo ngôn ngữ bạn sử dụng. Trong bài viết này mình sẽ giới thiệu Puppeteer, một thư viện của Nodejs. Một số kiến thức bạn cần có trước khi bắt đầu: + Javascript, Nodejs + Async await trong Javascript + Render được 1 trang html đơn giản (có thể sử dụng Pugjs) (có thể biết sau cũng được) Đầu tiên, chúng ta tạo một project để test nhé (Lưu ý đặt tên khác Puppeteer (tên package) vì khi lưu vào file Package.json sẽ báo lỗi đấy) + Mở cửa sổ cmd tại folder project, gõ lệnh npm init: tạo file package.json lưu thông tin project, các module sử dụng... + Gõ npm install puppeteer --save Bước thiết lập project hoàn tất, chúng ta bắt đầu với...

Quy tắc Tổ chức Properties CSS dễ đọc, dễ hiểu

Hình ảnh
Nếu như HTML là cái khung quy định các element của 1 trang web thì CSS giúp hiển thị các element như ý muốn, giúp tạo ra giao diện trang đẹp hơn, bắt mắt hơn thu hút người truy cập. Với những dự án lớn, 1 element CSS (class, id, tag) có hàng tá các properties với những cách viết khác nhau lộn xộn sẽ làm cho người khác trong team khó đọc hiểu những dòng CSS, nên có những quy tắc chung trong việc viết các thuộc tính (properties) để dễ dàng đọc, dễ dàng refactor sau này. .messy-class { font-size: 20px; margin-top: 50px; width: 100%; border-top-right-radius: 10px; background-color: black; color: white; border: 2px solid lavender; font-weight: bold; } Nhìn vào CSS của class trên, để tìm 1 properties phải dò từ trên xuống dưới, chưa nói đến những đoạn dự án lớn chứa nhiều properties sắp xếp lộn xộn trong 1 group CSS. Đối với class trên, nên có cách viết đẹp hơn. .organized-class { margin-top: 50px; width: 100%; border: 2px solid lavender; border-top-right-radius: 10px; color: ...

ABOUT R2W - BÉ NHỎ NHƯNG ƯỚC MƠ LỚN

Hình ảnh
Xin chào , tụi mình là R2W team , một nhóm sinh viên yêu thích công nghệ và có sợ thích chia sẻ kiến thức đến cho mọi người , trong blog này tụi mình sẽ chia sẻ toàn bộ kiến thức mà tụi mình đã tiếp thu được và truyền đạt lại một cách bình dân nhất nhắm mục đích cho mọi người có thể dễ dàng tiếp cận đến các công nghệ và vấn đề phức tạp và còn phục vụ cho việc học của tụi mình , giúp tụi mình hiểu sâu hơn trong mọi vấn đề mà tụi mình chia sẻ Tại sao lại là R2W? R : Reference 2 : To W : World Reference to world tức là tham chiếu đến thế giới theo nghĩa đen . Nếu các bạn đã biết qua về reference tức là tham chiếu thì một biến , khi biến đó thay đổi thì biến ref sẽ thay đổi theo.Quay lại vấn đề , khi thế giới thay đổi thì nhóm tụi mình sẽ liên tục cập nhật xu thế để bắt kịp thế giới với mục đích chia sẽ những kiến thức hay và mới mẻ cho mọi người (và tất nhiên phải đi từ basic) Kế hoạch tương lai R2W hướng tới một cộng đồng lập trình miễn phí , nơi mọi người có thể học hỏi trao đổi ki...