Ngày nay github là nơi có thể chứa mọi thứ liên quan đến lập trình mà bất kì dev nào cũng thể tiếp cận. Framework, demo, hoặc kết hợp của đủ các thể loại - chẳng có gì mà bạn không thể tìm thấy trên Github. Tuy nhiên, số lượng khổng lồ của Github lại là một vấn đề. Sẽ có những thứ thú vị mà có thể bạn chưa từng nghe tới bao giờ, đơn giản thôi, bởi vì có quá nhiều repo có sẵn. Trong bài viết này mình sẽ giới thiệu đến các bạn một số Github repo phổ biến mà bạn nên biết, mỗi repo dưới đây có ít nhất ~30.000 star

Realworld

Repo đầu tiên trong danh sách đó là Realworld. Những người tạo ra nói gọi nó không gì hơn là "The Mother of all Demo Apps". Một tuyên bố táo bạo, nhưng mình không nghĩ rằng đó là một sự cường điệu. Realworld là một kiểu mẫu mô phỏng của Medium.com. Nhưng không chỉ thế, repo này cho phép bạn chọn giữa các nền tảng Front-end và Back-end khác nhau, từ đó bạn có thể kết hợp chúng.

Vue.js + Node/Express hay là React /Redux + Rust? Họ có tất!

Realworld chỉ ra cho bạn cách chính xác để xây dựng một ứng dụng dựa trên hầu hết bất kì loại ngôn ngữ hay framework nào. Quả là tuyệt vời phải không?

You Don’t Know JS Yet

Repo này là một series sách nổi tiếng viết bởi Kyle Simpson, người được biết đến rộng rãi dưới bí danh của ông, Getify. Các cuốn sách đi sâu vào cơ chế của JavaScript và bao gồm các chủ đề sau:

• Get Started
• Scope & Closures
• Objects & Classes
• Types & Grammar
• Sync & Async
• ES.Next & Beyond

Điều tuyệt vời nhất là gì? Đó là nó hoàn toàn miễn phí để đọc! Đây chắc chắn là một trong những series hay nhất về JavaScript và nó thực sự giúp mình hiểu được JS thực sự là cái gì. Ngay cả khi bạn nghĩ rằng bạn biết rõ về JavaScript - hãy đọc thử qua nó, bạn sẽ ngạc nhiên cho xem.

Airbnb JavaScript Style Guide

Là một cách tiếp cận hợp lý hơn cả đối với JavaScript.

Airbnb JavaScript Style Guide là một trong những hướng dẫn về style phổ biển và được sử dụng nhiều nhất hiện có. Nó giúp bạn viết code JS tốt hơn và đặc biệt hữu ích trong team và trong kết hợp với ESLint.

Dưới đây là một ví dụ từ các docs liên quan đến việc sử dụng const thay vì var:

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

Storybook

Storybook là một môi trường phát triển dành cho các UI component. Nó cho phép bạn duyệt một thư viện component, xem các trạng thái khác nhau của từng component, phát triển trực tiếp và kiểm tra các component. Nó cũng hỗ trợ React, Vue, Angular, React Native, Ember, Web Components và hơn thế nữa!

Storybook chạy bên ngoài ứng dụng của bạn. Điều này cho phép bạn phát triển các component UI riêng rẽ, có thể cải thiện việc tái sử dụng component, khả năng kiểm tra và tốc độ phát triển. Bạn có thể xây dựng nhanh chóng mà không phải lo lắng về các dependencies dành riêng cho ứng dụng.

Bạn có thể tìm thêm các ví dụ tuyệt vời khác tại đây.

HTML5 Boilerplate

Trang chủ: https://html5boilerplate.com/

HTML5 Boilerplate là một trong những Front-end template chuyên nghiệp và phổ biến nhất trên web. Nó giúp bạn xây dựng các trang web hoặc app nhanh và mạnh mẽ. Các công ty như Microsoft, NASA và Nike đều sử dụng nó.

Dưới đây là một số tính năng chính:

• HTML5 có sẵn.
• Được thiết kế với tư tưởng tiến bộ.
• Bao gồm: Normalize.css, jQuery và Modernizer
• Thiết lập để cải thiện hiệu suất và bảo mật của trang web..
• Placeholder CSS Media Queries.
• Kiểu giao diện mặc định, tối ưu hóa hiệu suất.
• Một phiên bản tối ưu của Google Universal Analytics snippet.

Node.js Best Practices

Repo này là một bộ sưu tập toàn diện các best practices liên quan đến phát triển Node.js. Nó hiện bao gồm hơn 80 best practices, hướng dẫn phong cách code và tip liên quan đến kiến trúc.

Bạn có thể tìm thấy thông tin trong repo này về:

• Thực hành cấu trúc dự án
• Thực hành xử lý lỗi
• Thực hành phong cách code
• Kiểm tra và thực hành chất lượng tổng thể
• Đi đến thực tiễn sản phẩm
• Thực tiễn bảo mật
• Thực hành hiệu suất

Front-End Checklist

Bạn đã bao giờ tự hỏi những gì bạn cần phải có hay phải kiểm tra trong ứng dụng web của bạn trước khi bắt đầu? Front-End Checklist sẽ lo vấn đề đó cho bạn!

Nhiều hạng mục được liệt kê là bắt buộc đối với phần lớn các dự án và được tổ chức như sau:

• Head
• HTML
• Webfonts
• CSS
• Images
• JavaScript
• Bảo mật
• Hiệu suất
• Khả năng tiếp cận
• SEO
• Đa ngôn ngữ

Dưới đây là một ví dụ MetaData cho ứng dụng web của Apple:

<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

NW.js

NW.js là một ứng dụng thời gian thực dựa trên Chromium và node.js. Bạn có thể viết các ứng dụng native bằng HTML và JavaScript bằng NW.js. Nó cũng cho phép bạn gọi các module Node.js trực tiếp từ DOM và cho phép một cách mới để viết các ứng dụng native với tất cả các kỹ thuật Web.

Dưới đây là một số tính năng chính:

• Các ứng dụng được viết bằng HTML5, CSS3, JS và WebGL.
• Hỗ trợ đầy đủ cho API Node.js và tất cả các module của bên thứ ba.
• Hiệu suất tốt: Node và WebKit chạy trong cùng một luồng.
• Dễ dàng đóng gói và phân phối ứng dụng.
• Có sẵn trên Linux, Mac OS X và Windows.

fullPage.js

fullPage.js của Alvaro Trigo là một thư viện đơn giản và dễ sử dụng cho phép bạn tạo SPA (Single Page Applications). Nó có sẵn với Vue, React và Angular và hoàn toàn responsive cho các thiết bị di động.

Bạn có thể tìm thấy một số ví dụ tuyệt vời ở đây.

Thư viện này miễn phí sử dụng trong các dự án open source. Tuy nhiên, nếu bạn muốn sử dụng nó trong môi trường thương mại, bạn phải mua bản quyền.

Tổng kết

Trên đây là một số repo hữu ích mà bạn nên ngó qua ít nhất một lần trong cuộc đời lập trình viên, vì biết đâu nó có thể giúp cho bạn cải thiện khả năng cũng như kiến thức của mình, hi vọng bài viết có thể đem đến cho các bạn một bầu trời mới trong con đường trở thành một lập trình viên có tâm và có tầm