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

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

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

Sử dụng To do Tasks trong VS Code – Làm việc có kế hoạch?

Lâu lắm rồi mình mới viết lại blog các bạn ạ, dạo này làm bài + học kiến thức mới nên cũng yêu đời trở lại. Lượn lờ khắp các trang blog buôn hàng à nhầm blog buôn dưa các kiểu thì đọc được bài viết sử dụng to do task và lập kế hoạch làm việc cho dự án trong VS Code. Mò mẫm vào đọc thì ra tác giả PR cho 1 extension trên VS Code Market. Thử tải về xem thử có gì hay thì thấy hiệu quả không ngờ :))

Đầu tiên để cài đặt extension VS Code thì tất nhiên bạn phải có VS Code rồi  beat_shot . Tiếp theo các bạn vào “chợ” của VS Code tìm từ khóa “To Do Tasks” như hình nhé:

Capture

Ở đây mình cài rồi :)) Ok vậy là xong bắt đầu tạo 1 file với đuôi là .tasks hoặc .todo nha để extension nó hiểu chứ không phải đặt tên cho ngầu đâu nha mấy ba 😐

Capture

Bây giờ, bước quan trọng nhất, mỗi sáng thức dậy hay mỗi khi code project nào đó các bạn lại lập kế hoạch theo ngày. Trong ngày thì sẽ có những tasks nào, test nào được thực hiện và task nào bị hủy. Mình demo 1 file như hình dưới là quá trình thực hiện tạo 1 file cũng như tạo các task mới cũng không mất quá nhiều thời gian mà mình thấy khá hiệu quả.

Capture

  • Để tạo 1 task mới các bạn chọn dòng task và nhất tổ hợp “Ctrl + Enter”
  • Để tạo highlight các bạn gõ @ và thêm tag mong muôn với các mức độ quan trọng như sau @critical, @high, @low, @today
  • Để đánh dấu đã hoàn thành công việc bấm tổ hợp “Alt + D” (Done)
  • Để đánh dấu hủy bỏ công việc bấm tổ hợp “Alt + C” (Cancelled)
  • Các bạn cũng có thể sử dụng Command Palette để làm việc với extension bằng cách gõ tổ hợp “Ctrl + Shift + P” sau đó gõ To do để chọn tạo mới, đánh dấu hoàn thành hoặc hủy bỏ nha

Tổng kết, mình vừa giới thiệu với các bạn 1 extension khá thú zị của VS Code. Mình không PR gì cả nhé mọi người thấy phù hợp với nhu cầu công việc thì thêm vào bộ extension của mình nha. Cảm ơn các bạn đã đọc bài viết ! big_smile