Vui học cùng “bé Gulp”, bé nhỏ nhưng bé có võ (Phần 1)

Vừa xem World Cup xong tự nhiên không buồn ngủ tâm sự với mọi người một chút vậy, dĩ nhiên là có nội dung của chủ đề hôm nay rồi đó là về “bé Gulp”. Hè này mình có khá nhiều dự định mà chắc phải tạm hoãn vì một số lý do gia đình rồi ^^ . Nhưng sẽ cố gắng cập nhật các kiến thức mà mình học hỏi mỗi ngày lên bờ lốc chứ nhỉ surrender. Vậy hôm nay chúng ta có những gì đây, chúng ta đi lần lượt theo các nội dung sau nhé:

1. Gulp là gì? Cách cài đặt và vai trò của Gulp trong Nodejs (Phần 1)
2. Tạo một Gulp file để làm việc với dự án (Phần 1)
3. Các API bắt buộc phải đọc và nắm chắc của Gulp (Phần 1)
4. Reload Browser với Gulp (Phần 2)
5. Dùng Gulp tối ưu hóa JS, CSS (Phần 2)
6. Tối ưu hóa ảnh và xóa các file rác không cần thiết (Phần 2)
7. Cách kết hợp giữa các API của Gulp (Phần 3)
8. Các API nâng cao khác trong tài liệu của Gulp (Phần 3)
9. Tổng kết (Phần 3)

Ok bây giờ chúng ta lên đường nhé…

1. Gulp là gì?
– Theo định nghĩ trên github chính thức của Gulp thì Gulp được khái quát theo các từ khóa sau:
Automation: tự động hóa – gulp là bộ công cụ giúp bạn tự động hóa các công việc tốn thời gian như thu gọn các file css, js, reload lại trình duyệt khi có thay đổi,… giúp bạn nhanh chóng hoàn thành trong luồng workflow của mình.
Platform-agnostic: chạy tốt trên nhiều nền tảng, mọi người đều có thể sự dụng Gulp trong cả PHP, Nodejs, Java và nhiều nền tảng khác nữa.
Strong Ecosystem: hệ sinh thái lớn – sử dụng npm module để làm bất kỳ thứ gì, hơn 2000 plugins được dùng cho việc chuyển đổi định dạng các tập tin (chức năng chính của Gulp).
Simple: nghe plugins nhiều thế các bạn nghĩ chắc nó cần code rườm rà lắm phải không? Nhưng như tiêu đề mình ghi “bé” thể hiện cho sự đơn giản của Gulp. Các API nhỏ gọn, gulp đơn giản để học và viết.
– Cách cài đặt Gulp, chỉ cần các bạn có npm và gõ câu lệnh:

npm install gulp -g

npm install gulp-cli -g

Như vậy bạn đã chính thức rước được em nó về với đội của mình rồi đó.
– Vai trò của Gulp trọng một dự án: như các từ khóa khái quát về Gulp, Gulp đóng vai trò như một nhà biên dịch, một anh thợ sắp xếp tối ưu việc xây dựng của chúng ta một cách gọn gàng, nhanh nhất có thể. Gulp có thể biên dịch SASS thành CSS, refresh trình duyệt tự động, tối ưu các file, hình ảnh cho môi trường production. Quan trọng nhất Gulp cho phép kết hợp các API để các quá trình này diễn ra theo trình tự theo quy định của chúng ta nối thành chuỗi công việc theo workflow của coder.

Continue reading

Advertisements

Suy nghĩ trong anh về mẫu thiết kế “Adapter Pattern” (Phần Cuối)

Xin chào mọi người, hôm nay mình quay lại và sẽ đưa một demo nhỏ sử dụng Adapter Pattern mình thấy khá hay. Demo viết bằng javascript, mọi người có thể copy và qua https://jsfiddle.net/ để chạy thử. Hoặc chạy file js trong VSCode nhé, để chạy file JS thì các bạn cài extension Code Runner sau đó thì chuột phải vào vùng editor code và chọn Run Code để chạy và xuất log ra Output nhé như hình bên dưới của mình.

Capture2

Untitled2

Trong ví dụ:

  • Client — Trong code mẫu là hàm run() .
    • gọi tới Adapter để gửi request
  • Adapter — Trong code mẫu là hàm ShippingAdapter
    • thực thi giao diện mà client mong muốn
  • Adaptee — Trong code mẫu là hàm AdvancedShipping
    • Đối tượng được chuyển đổi
    • có giao diện khác với giao diện client mong muốn
// old interface
function Shipping() {
this.request=function (zipStart, zipEnd, weight) {
// …
return “100.000 VND”;
}
}
// new interface
function AdvancedShipping() {
this.login=function (credentials) { /* … */ };
this.setStart=function (start) { /* … */ };
this.setDestination=function (destination) { /* … */ };
this.calculate=function (weight) {
return “50.000 VND”;
};
}
// adapter interface
function ShippingAdapter(credentials) {
varshipping=newAdvancedShipping();
shipping.login(credentials);
return {
request:function (zipStart, zipEnd, weight) {
shipping.setStart(zipStart);
shipping.setDestination(zipEnd);
returnshipping.calculate(weight);
}
};
}
function run() {
varshipping=newShipping();
varcredentials= {
token:”30a8-6ee1″
};
varadapter=newShippingAdapter(credentials);
// original shipping object and interface
varcost=shipping.request(“78701”, “10010”, “2 kg”);
console.log(“Giá cũ: “+cost);
// new shipping object with adapted interface
cost=adapter.request(“78701”, “10010”, “2 kg”);
console.log(“Giá mới: “+cost);
}
// run code
run();
Khi này toán giao hàng đặt ra có thêm yếu tố giấy phép bắt buộc ta phải viết một Adapter để chuyển đổi giao diện. Cũng là request đó nhưng trong phần thân Adapter đã có những chuyển đổi để gọi tới giao diện mới. Trên đây là ví dụ của mình, cảm ơn mọi người đã đọc. Hẹn gặp mọi người trong những bài đăng khác nha…!

Bitbucket + Trello + Slack = Super Hero. Siêu anh hùng trong mỗi chúng ta…

Xin chào mọi người lại là mình đây… không phải mi chắc ông hàng xóm hở? Sắp tới cuối kỳ mình cũng hơi bận đề tài với báo cáo nên mình sẽ cố viết nốt các bài này. Tất nhiên sẽ viết bằng cả trái tim chứ không phải vì vội vội vàng vàng mà viết ẩu beat_plaster Dự định những bài viết sắp tới của mình là viết ví dụ áp dụng Adapter Pattern như đã hứa. Tiếp theo là series tìm hiểu về Bitbucket, Trello và Slack (nếu có thời gian sẽ viết tiếp về Jira), tất nhiên mình chỉ viết những gì mình tìm hiểu và cách vận dụng các công cụ này thôi, không thể chuyên nghiệp như các anh chị, các bác đã đi làm được. Cuối cùng là dự định viết về 2 công cụ khá hữu ích trong việc tự động hóa các task, compile đó là Gulp và Webpack và hiểu hơn về minify các file css và js trong quá trình chạy 1 website. Tổng cộng sẽ có khoảng 5 bài nhé. Cố gắng 1 bài 1 tuần để không bỏ bê blog như hồi trẻ trâu. Bây giờ chúng ta bắt đầu chủ đề hôm nay: Với Bitbucket + Trello + Slack = Super Hero. Và bạn có cả thế giới? boss Tất nhiên là không rồi… Với 3 công cụ quản lý dự án phát triển và giao tiếp trên, chúng ta sẽ cùng nhau tìm hiểu cũng như cách kết hợp 3 công cụ đó lại với nhau để có một workspace theo nhóm một cách khoa học và chuyên nghiệp … dưới góc nhìn 1 sinh viên như mình, anh chị, các bác đi làm rồi nếu có sai sót gì thì góp ý ở phần bình luận với em nha đừng beat_brick em tội nghiệp.

  • Khái niệm sơ lược:
    Bitbucket là gì?  Bitbucket là dịch vụ quản lý phiên bản phần mềm trực tuyến từ bản phát triển tới bản release. Quản lý các nhánh và git flow của ứng dụng. Từ repository trên bitbucket chúng ta có thể dễ dàng quản lý dự án của team, các pull, push, commit trên dự án phát triển. Bitbucket được tích hợp với rất nhiều dịch vụ khác của Atlassian như Jira, HipChat, Confluence và Bamboo. Hay nói một cách đơn giản bitbucket tương tự github cũng là một kho chứa quản lý version dự án được lưu trữ trên web. Bên dưới là giao diện làm việc mình demo trong Bitbucket.
    Capture
    Trello là gì? Trello là một công cụ quản lý công việc hiệu quả khi làm việc theo nhóm, giúp mọi người trong cùng một team chỉ cần nhìn qua là biết được có những đầu việc nào, ai đang làm gì và làm đến giai đoạn nào. Trello là một công cụ Freemium, tức là bạn có thể xài miễn phí cho đến khi cần những tính năng nâng cao và đặc biệt chỉ có bản trả tiền mới có thì bạn mới phải trả. Trello cho phép bạn tự tùy chỉnh giai đoạn phát triển ví dụ: To do – Doing – Review – Done hoặc Today – Tommorow – Someday – Finish. Hay nói một cách dễ hiểu Trello là công cụ quản lý công việc cần làm của một team do ai đảm nhiệm, hoàn thành hay chưa và deadline khi nào, trong mỗi task thì chia nhỏ các to do checklist. Đặc biệt trello có liên kết cùng các dịch vụ định kèm link, tệp tin cũng như có comment trao đổi giữa các thành viên. Bên dưới là hình ảnh giao diện làm việc mình demo của ứng dụng Trello.
    Capture1
    Slack là gì? Như giới thiệu của nhà phá triển Slack là nơi mọi công việc diễn ra từ lên dự án nhóm, giao tiếp giữa các thành viên chó tới trao đổi tập tin giữa khách hàng và nhà phát triển cũng có thể diễn ra ngay trên các kênh chát của Slack. Slack mang các thành viên và sự giao tiếp lại gần nhau hơn ở trong mộ không gian làm việc đó gọi là “workspace”. Một workspace có thể chia làm nhiều kênh chat và các thành viên hiện thị thông tin trực tuyến hay không từ đó có thể giao tiếp liên tục đảm bảo không bị gián đoạn. Slack hỗ trợ đa nền tảng (máy tính, Android, iOS) nên tất cả mọi người trong công ty của bạn có thể chat nhóm với nhau bất kể họ dùng thiết bị gì đi nữa. Thêm nữa là khả năng liên kết với các ứng dụng lưu trữ của những hãng khác, chẳng hạn như Dropbox, Google Drive, GitHub… Gói miễn phí của Slack cho phép người ta có thể lưu trữ tới 10.000 tin nhắn mà nhóm đã trao đổi với nhau, 5GB dung lượng lưu trữ và cho phép liên kết 5 dịch vụ của hãng khác. Các gói trả phí sẽ có nhiều chức năng và bạn có thể lưu trữ thoải mái hơn. Bên dưới là giao diện demo làm việc của ứng dụng Slack.
    Capture2

Continue reading

Suy nghĩ trong anh về mẫu thiết kế “Adapter Pattern” (Phần 2)

Xin chào các bạn lại là mình đây 😀 Hôm nay mình sẽ tiếp tục với bài viết về Adapter Pattern. Nhắc lại một chút về bài trước chúng ta đã cùng nhau tìm hiểu định nghĩa, thành phần cũng như cách thức hoạt động, phân loại và ưu nhược điểm của mẫu Adapter Pattern. À chúng ta còn nói sơ về vấn đề đặt ra của mẫu và các mẫu liên quan như dưới:

  • Các vấn đề đặt ra của mẫu Adapter Pattern:
    • Adapter có thể điều chỉnh bao nhiêu chuyển đổi?
    • Pluggable adapters
    • Sử dụng Adapter hai chiều cho việc sử dụng xuyên suốt chương trình
  • Các mẫu thiết kế có liên quan với Adapter Pattern:
    • Bridge
    • Decorator
    • Proxy

Vậy hôm nay mình sẽ đi sâu chi tiết về các vấn đề đặt ra của mẫu Adapter Pattern và các thiết kế mẫu liên quan với Adapter nhé. Nào chúng ta cùng lên đường…

Các vấn đề đặt ra ở đây có nghĩa là các vấn đề cần phải xem xét khi làm việc với mẫu thiết kế Adapter. Có 3 vấn đề được ưu tiên xem xét đó là:

  1. How much adapting does Adapter do?
    – Adapter có thể điều chỉnh bao nhiêu thay đổi? Adapter có thể xử lý chuyển đổi nhiều công việc với Adaptee và với giao diện Target. Nó có thể hỗ trợ những công việc nhẹ nhàng như đổi tên operation cho tới thiết lập lại từ đầu một operation. Số lượng giao diện chuyển đổi này phụ thuộc vào “nền” tức là các giao diện trước có sẵn có cần thay đổi nhiều hay là không.
  2. Pluggable adapters
    – Một lớp có thể tái sử dụng nhiều hơn khi chúng ta giảm thiểu tối đa đến việc sử dụng các lớp khác phải tạo ra để sử dụng nó. Bằng cách xây dựng chuyển đổi các giao diện vào một lớp, chúng ta có thể loại bỏ việc sử dụng các lớp khác với cùng một giao diện. Nói cách khác, giao diện chuyển đổi cho phép chúng ta kết hợp lớp của chúng ta vào các hệ thống hiện có trong khi vẫn có thể chờ đợi các giao diện khác cho lớp.
    – Ví dụ cho vấn đề này: Hãy xem xét một widget TreeDisplay có thể hiển thị cấu trúc cây đồ họa. Nếu đây là một widget chuyên dụng để sử dụng chỉ trong một ứng dụng, thì chúng ta có thể yêu cầu các đối tượng mà nó hiển thị để có một giao diện cụ thể; có nghĩa là, tất cả phải chuyển xuống từ một lớp abstract Tree. Nhưng nếu chúng ta muốn làm cho TreeDisplay tái sử dụng nhiều hơn (nói rằng chúng ta muốn biến nó trở thành một phần của bộ công cụ của các widget tích hợp), thì yêu cầu đó sẽ là không hợp lý. Các ứng dụng sẽ định nghĩa các lớp riêng của chúng cho các cấu trúc cây. Chúng không nên bị buộc phải sử dụng lớp abstract Tree. Cấu trúc cây khác nhau sẽ có giao diện khác nhau.
    – Trong một hệ thống phân cấp thư mục, ví dụ, trẻ em có thể được truy cập với một hoạt động GetSubdirectories, trong khi trong một hệ thống phân cấp thừa kế, hoạt động tương ứng có thể được gọi là GetSubclasses. Một widget TreeDisplay có thể tái sử dụng phải có khả năng hiển thị cả hai loại phân cấp ngay cả khi chúng sử dụng các giao diện khác nhau. Nói cách khác, TreeDisplay nên có khả năng thích ứng giao diện được tích hợp vào nó.
  3. Using two-way adapters to provide transparency
    – Sử dụng Adapter hai chiều cho việc sử dụng xuyên suốt chương trình: một vấn đề nữa với Adapter đó là chúng không rõ ràng đối với phía client. Một đối tượng được chuyển đổi thì không hoàn toàn phù hợp với giao diện Adaptee, vì vậy nó không thể sử dụng giống như là bất cứ khi nào một đối tượng Adaptee có thể sử dụng. Two-way adapters có thể cung cấp sự thông suốt này. Rõ ràng là việc sử dụng này có ích khi mà 2 clients khác nhau cần sử dụng chung một hế thống từ 2 phía. Và việc dùng Two-way adapters là rất cần thiết và có vai trò quan trọng trong mô hình 2 clients.

Continue reading

Suy nghĩ trong anh về mẫu thiết kế “Adapter Pattern” (Phần 1)

Khi nhắc đến Adapter bạn nghĩ tới điều gì? Đó là cục nằm giữa 2 cái đầu cắm hay nó là miếng gắn thẻ nhớ vào cắm vào máy tính beated

Capture

Đúng là như vậy nhưng khi đi vào lĩnh vực lập trình và cụ thể ở đây là Design Pattern thì Adapter có nghĩ là bộ chuyển đổi trung gian.

  • Định nghĩ về Adapter Pattern:
    Adapter Pattern là pattern giữ vai trò trung gian giữa hai lớp, chuyển đổi giao diện của một hay nhiều lớp có sẵn thành một giao diện khác, thích hợp cho lớp đang viết. Điều này giúp các lớp có interface không tương thích có thể làm việc với nhau.
    – Adapter còn có tên gọi khác là Wrapper
    – Adapter thuộc nhóm cấu trúc mẫu Structural Pattern
  • Vậy mục đích sử dụng của Adapter Pattern là gì?
    – Chuyển đổi interface có sẵn thành một interface khác thích hợp cho class hiện tại
    – Tái sử dụng lại interface có sẵn để giảm thiểu việc viết lại code vẫn đảm bảo yêu cầu
    – Xây dựng, mở rộng các phương thức của lớp có sẵn để phù hợp với yêu cầu
  • Các thành phần tham gia vào mẫu thiết kế Adapter:
    Capture– Client: Đây là lớp sẽ sử dụng đối tượng của bạn (đối tượng mà bạn muốn chuyển đổi giao diện).
    – Adaptee: Đây là những lớp bạn muốn lớp Client sử dụng, nhưng hiện thời giao diện của nó không phù hợp.
    – Adapter: Đây là lớp trung gian, thực hiện việc chuyển đổi giao diện cho Adaptee và kết nối Adaptee với Client.
    – Target: định nghĩa giao diện đang làm việc (domain specific).

Continue reading

Yarn vs Npm. Ai là nhà vô địch?

Bài viết dựa vào các thống kê do tác giả thực hiện và đánh giá chủ quan theo các thống kê thực hiện. Không gây war dưới mọi hình thức nhé 2 trường phái  😀

NPM(Node Package Manger) và Yarn đều là công cụ quản lý node package cho phép nhà phát triển khởi tạo ứng dụng node, sử dụng cũng như tái sử dụng các package trên khắp thế giới. Yarn ra đợi muộn hơn được hình thành bởi các lập trình viên từ Facebook, Google, Exponent và Tilde. Nên nếu so sánh về lượng đóng góp trên github thì đơn giản sẽ thấy npm vẫn chiếm ưu thế về lượng người dùng và lượng người tham gia đóng góp. Nhưng bạn sẽ bất ngờ về lượng người Star trên github một con số khủng nếu so sánh về thời gian ra mắt của Yarn so với NPM.

Untitled

Cách cài đặt Yarn: Có 2 cách cài đặt Yarn đó là sử dụng npm hoặc cài đặt từ file cài đặt:

  • Cách 1: Gõ lệnh trong cmd với điều kiện bạn đã cài đặt Node và NPM nhé:

    npm install yarn –global

  • Cách 2: Truy cập vào trang chủ của Yarn theo đường dẫn: Yarn Installation và chọn hệ điệu hành bạn đang xài sau đó nhấn Download và tiến hành cài đặt như bình thường. Bạn nhớ là phải cài Node.js rồi nhé 😀

Continue reading

So sánh sự khác nhau giữa Interface và Abstract trong lập trình hướng đối tượng

  1. Tổng quan: InterfaceAbstract Class là những khái niệm cơ bản trong lập trình OOP, nhưng khi mới tiếp xúc với OOP thì mọi người thường có sự so sánh cũng như khó hiểu, nhầm lẫn về 2 khái niệm này. Vì vậy hôm nay mình sẽ viết bài viết so sánh về Interface và Abstract Class. Bây giờ chúng ta lên đường…
  2. Định nghĩa:
    • Interface: là một giao diện thiết kế của một lớp. Nó chỉ có các phương thức trừu tượng. Interface là một kỹ thuật để thu được tình trừu tượng hoàn toàn và đa kế thừa trong Java. Interface trong Java cũng biễu diễn mối quan hệ IS-A. Nó không thể được khởi tạo giống như lớp trừu tượng. Interface mặc định có access modifier là public.
    • Abstract Class: Một lớp được khai báo là abstract thì đó là lớp trừu tượng. Nó cần được kế thừa và phương thức của nó được triển khai. Nó không thể được khởi tạo. Có thể xác định access modifier.
  3. So sánh sự khác nhau:
    Đặc điểm Lớp trừu tượng Interface
    Phương thức abstract Lớp trừu tượng có thể có các phương thức abstract và non-abstract Interface chỉ có thể có phương thức abstract
    Đa kế thừa Lớp trừu tượng không hỗ trợ đa kế thừa Interface hỗ trợ đa kế thừa
    Khai báo biến Lớp trừu tượng có thể có các biến final, non-final, static và non-static Interface chỉ có các biến static và final
    Khai báo phương thức Lớp trừu tượng có thể có phương thức static, phương thức main và constructor Interface không thể có phương thức static, main hoặc constructor.
    Từ khóa khai báo Từ khóa abstract được sử dụng để khai báo lớp trừu tượng Từ khóa interface được sử dụng để khai báo Interface
    Triển khai Interface Lớp trừu tượng có thể cung cấp trình triển khai của Interface Interface không cung cấp trình triển khai cụ thể của lớp abstract
    Access Modifier Mọi phương thức, property đều mặc định là public. Có thể xác định modifier.
  4. Nhận định:
    • Abstract class: là một class cha cho tất cả các class có cùng bản chất. Bản chất ở đây được hiểu là kiểu, loại, nhiệm vụ của class. Hai class cùng hiện thực một interface có thể hoàn toàn khác nhau về bản chất.
    • Interface: là một chức năng mà bạn có thể thêm và bất kì class nào. Từ chức năng ở đây không đồng nghĩa với phương thức (hoặc hàm). Interface có thể bao gồm nhiều hàm/phương thức và tất cả chúng cùng phục vụ cho một chức năng.
    • Vậy, bạn không nên nhầm lẫn khi nói về việc một class được implement hay extend. Nhiều người thường hay đồng nhất là không phân biệt hai từ này, nhưng chính chúng đã nói lên sự khác biệt giữa interface và abstract class. Bạn chỉ có thể thừa kế (extend) từ một class và chỉ có thể hiện thực (implement) các chức năng (interface) cho class của mình.
    • Theo cách ngắn gọn, quan hệ giữa một class khi thừa kế một abstract class được gọi là is-a, và một class khi hiện thực một interface được gọi là can-do (hoặc –able).
  5. Ví dụ minh họa:
    • Các bạn có thểm tham khảo thêm ví dụ minh họa ở blog: YinYangIT . Ví dụ được đưa ra có hình ảnh mia họa cụ thể đọc rất dễ hiểu.

Via YingYangIT