Bước chân vào thế giới phát triển web có thể là một thử thách lớn, đặc biệt khi bạn không biết nên bắt đầu từ đâu. Với vô vàn lời khuyên về React, Svelte, NPM hay các công cụ phức tạp khác, bạn có thể dễ dàng cảm thấy bối rối và bị choáng ngợp. Điều quan trọng là bạn cần chủ động tối thiểu hóa sự phức tạp này. Bài viết này sẽ giúp bạn bắt đầu hành trình học lập trình web một cách hiệu quả, không bị gánh nặng bởi những công cụ không cần thiết và tập trung vào những kiến thức cốt lõi nhất.
Luôn Luôn Áp Dụng Nguyên Tắc KISS (Keep It Simple, Stupid)
Khi mới bắt đầu học phát triển web, điều cuối cùng bạn muốn là tự làm mình rối tung với những kiến thức phức tạp không cần thiết. Thay vào đó, mục tiêu của bạn là giảm thiểu tối đa mọi yếu tố nằm giữa đoạn code của bạn và trình duyệt web. Bạn nên tập trung hoàn toàn vào các kiến thức cơ bản nhất. Nói cách khác, hãy áp dụng nguyên tắc KISS – “Keep It Simple, Stupid” (Giữ Mọi Thứ Đơn Giản, Đồ Ngốc). Việc tuân thủ nguyên tắc này cho phép bạn thực hiện các thay đổi nhanh chóng, dễ dàng quan sát tác động của chúng và thực sự hiểu rõ cách thức hoạt động.
Nguyên tắc KISS trên nút bàn phím để giữ mọi thứ đơn giản khi code
Chúng tôi sẽ tập trung vào cách bạn có thể đạt được sự đơn giản đó. Đồng thời, bạn cũng có thể tham khảo thêm hướng dẫn của chúng tôi về cách tránh những sai lầm phổ biến khi học lập trình.
Tránh Xa Các Framework Khi Mới Bắt Đầu Học Lập Trình Web
Cách dễ nhất để bị sa lầy là cài đặt các công cụ và framework thường được khuyến nghị như NPM, Yarn, PNPM, NodeJS, React, v.v. Mọi người thường khuyên dùng chúng vì chúng phổ biến và có giá trị nghề nghiệp cao hơn so với JavaScript (JS) thuần túy. Tuy nhiên, những lời khuyên này phù hợp với yêu cầu của họ, chứ không phải của một người mới bắt đầu như bạn.
Các công cụ phức tạp thêm nhiều lớp trừu tượng vào code của bạn, che khuất đi cách “phép màu” thực sự diễn ra. Hãy kiên quyết từ chối những lớp trừu tượng đó ở giai đoạn này. Thay vào đó, hãy giữ vững sự tập trung vào các kiến thức nền tảng: bản chất của mọi thứ, mục đích của chúng và cách bạn có thể sử dụng chúng. Hãy kiểm tra mọi điều bạn học được và ghi lại những ghi chú đơn giản.
Tóm lại, hãy tránh xa các công cụ và framework ở thời điểm hiện tại. Bạn có thể học NPM trong vài tuần, và React hay Svelte trong vài tháng sau khi đã nắm vững nền tảng.
Code Dễ Đọc Giúp Giảm Gánh Nặng Tư Duy
Sự đơn giản (hay còn gọi là tính dễ đọc) là một trong những nguyên tắc cốt lõi của “clean code” (mã sạch). Tôi thường viết lại những đoạn code phức tạp để làm cho chúng “ngu ngốc” hơn và dễ đọc hơn. Code của bạn nên thể hiện rõ ý nghĩa thông qua tên biến và cấu trúc của nó.
Sử Dụng Tên Biến và Hàm Có Ý Nghĩa (Signposts)
Ví dụ, hãy bắt đầu tên hàm bằng những động từ ngắn gọn, đơn giản:
function fetchUserAccount() { ... }Có thể bạn chưa hiểu hoàn toàn đoạn code này, nhưng bạn có thể hiểu ý định của nó: nó dùng để lấy thông tin tài khoản người dùng. Nếu điều đó rõ ràng với bạn, thì đó là một cái tên tốt.
Bây giờ, hãy xem đoạn code sau. Ngay cả khi bạn có hiểu code, cũng không rõ ràng ngay lập tức về chức năng của nó.
function evaluateDimensions(b) { return b.x > 10 && b.z > 5 && b.y > 7 }Còn đây là đoạn code tương tự, nhưng có ý định rõ ràng hơn nhiều:
function boxWillFit(box) {
const isDeepEnough = box.depth > 5
const isWideEnough = box.width > 10
const isLongEnough = box.length > 7
return isDeepEnough && isWideEnough && isLongEnough
}Một lần nữa, bạn có thể chưa hiểu code, nhưng ý định của nó rõ ràng ngay từ cái nhìn đầu tiên. Bạn sẽ lướt qua code của mình hàng trăm lần, vì vậy, hãy làm cho code trở nên cực kỳ đơn giản để nhanh chóng xử lý, và sử dụng tên biến/hàm như những biển báo chỉ đường.
Nhóm Các Đoạn Code Liên Quan Bằng Dấu Cách (Newlines) và Bình Luận
Khi chúng ta nhóm các thứ lại với nhau, chúng sẽ tạo ra những liên kết tự nhiên trong tâm trí chúng ta. Bạn nên sử dụng các dòng trống (blank lines) làm ranh giới để nhóm các khối code liên quan lại với nhau. Sử dụng khoảng trắng theo cách này là một thực hành phổ biến trong thiết kế trải nghiệm người dùng (UX).
Các bình luận (comments) cũng giúp phân định ranh giới đó. Bình luận không phải là ghi chú cá nhân của bạn; chúng là nhãn và thông tin cho các lập trình viên tương lai (bao gồm cả bạn). Hãy sử dụng chúng để giúp đỡ người khác, nhưng cũng hãy tuân thủ nguyên tắc KISS. Càng viết ít, càng tốt. Hãy rèn luyện nghệ thuật súc tích. Chỉ nên bao gồm những bình luận hữu ích và nhãn rõ ràng.
Trong ví dụ sau, bình luận bắt đầu bằng dấu gạch chéo (/):
function boxWillFit(box) {
// VALIDATE BOX.
// Sometimes we receive things that look like boxes but are not.
if (!isBox(box)) return false
// EVALUATE FITNESS.
// This is readable; don't change it.
const isDeepEnough = box.depth > 5
const isWideEnough = box.width > 10
const isLongEnough = box.length > 7
return isDeepEnough && isWideEnough && isLongEnough
}Hãy chú ý đến sự nhất quán. Sự nhất quán làm cho code của bạn dễ đọc và dễ xử lý hơn. Bạn nên cung cấp vừa đủ ngữ cảnh trong các bình luận để chúng thực sự hữu ích.
Giữ Code Đơn Giản Dù Mức Độ Phức Tạp Tăng Lên
Một trong những yếu tố quan trọng nhất để tăng khả năng đọc hiểu là sự nhất quán. Sự nhất quán về bố cục, đặt tên và nhóm code giúp bạn giảm bớt gánh nặng phải xử lý từng dòng code lặp đi lặp lại. Mục tiêu là chỉ cần nhìn vào một khối code và biết nó làm gì mà không cần phải suy nghĩ.
Tuân thủ các thực hành về khả năng đọc hiểu hợp lý sẽ giúp bạn hiểu code của mình trong quá trình học. Mọi thứ sẽ trở nên phức tạp, và bạn cần những “biển báo” rõ ràng. Điều này sẽ giúp bạn tiết kiệm rất nhiều căng thẳng và nỗ lực tinh thần.
Phục Vụ Nội Dung Website Cục Bộ Bằng HTTP Server Đơn Giản
Để tuân thủ nguyên tắc KISS, hãy giữ cho các công cụ của bạn thật đơn giản. Việc phục vụ nội dung web không hề khó, và thực tế bạn có thể làm điều đó chỉ với một lệnh duy nhất.
Đầu tiên, hãy tạo một thư mục. Trong thư mục đó, đặt một tệp index.html với nội dung sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World!</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<main>
<p>Hello From HTML!</p>
</main>
<script type="module" src="/index.js"></script>
</body>
</html>
Cấu trúc thư mục đơn giản với các tệp HTML, CSS, JS trong terminal
Đặt các tệp JS và CSS của bạn vào cùng thư mục đó, chuyển đến thư mục này trong terminal và sau đó chạy máy chủ bằng lệnh sau:
python -m http.server 8080Chúng tôi giả định rằng bạn đã cài đặt Python 3. Bây giờ, bạn chỉ cần truy cập localhost:8080 trong trình duyệt của mình, và bạn sẽ thấy trang web của mình.
Trình duyệt hiển thị trang web "Hello World" từ mã HTML, CSS và JS cục bộ
Nếu bạn muốn trang của mình trông giống hệt như của chúng tôi, hãy đặt nội dung sau vào tệp JS của bạn:
const main = document.querySelector("main");
const p = document.createElement("p");
p.textContent = "..and from JS.."
main.appendChild(p);Và đặt nội dung sau vào tệp CSS của bạn:
p {
font-weight: bold;
color: rgba(5, 5, 5, 0.75);
font-size: 4em;
font-family: sans;
margin: 0px;
}
p:nth-child(2) {
font-size: 1em;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}Đây là toàn bộ “ngăn xếp công nghệ” của bạn khi mới bắt đầu. Như bạn thấy, nó rất đơn giản và không có gì che khuất code của bạn. Đây là môi trường lý tưởng để bạn bắt đầu rèn luyện kỹ năng của mình.
Để thấy bất kỳ thay đổi nào, hãy làm mới trang trình duyệt sau khi bạn thực hiện chúng.
Cẩn Trọng Với Các Phương Thức Nhập File JavaScript Khác Nhau
Hệ sinh thái JavaScript (JS) là một mớ hỗn độn, và thực tế, toàn bộ hệ sinh thái phát triển web front-end cũng vậy. Khi mới bắt đầu, tôi thường bối rối bởi nhiều cách khác nhau để đạt được cùng một mục tiêu. Một trong những lĩnh vực gây nhầm lẫn đặc biệt là cú pháp import. Để tránh đi sâu vào chi tiết, có 4 cách tiếp cận khác nhau, nhưng cách mới nhất (ESM – ES Modules) là dễ sử dụng nhất.
Để sử dụng phương pháp mới, hãy đặt thuộc tính type bằng “module” trong tất cả các thẻ script của bạn:
<script type="module" src="/index.js"></script>Bên trong tệp index.js, hãy import một tệp JS khác bằng cách đặt một câu lệnh import ở đầu tệp:
// Top of the file.
import { something } from "/bar.js"
// Other code here.Dấu gạch chéo ngược trong “/bar.js” đề cập đến đường dẫn trên localhost:8080/, và nó trỏ đến thư mục mà chúng ta đang phục vụ; importing “/bar.js” sẽ import một tệp có tên bar.js từ thư mục đó. Ngoài ra, nó import “something,” là tên một hàm hoặc biến, từ bar.js.
Nhân tiện, hãy cẩn thận để không nhầm lẫn CommonJS với JS thông thường. NodeJS sử dụng CommonJS, yêu cầu các công cụ build đặc biệt để nó hoạt động trong trình duyệt. Chúng trông giống nhau, nhưng có những khác biệt nhỏ. Nếu bạn thấy một câu lệnh như sau, thì nó chỉ hoạt động với NodeJS chứ không trực tiếp trong trình duyệt:
const foo = require("bar");Đây là cách (cũ hơn) mà NodeJS import các tệp.
Chọn Một Trình Soạn Thảo Code Có Tính Năng Đánh Dấu Cú Pháp (Syntax Highlighting)
Syntax highlighting (đánh dấu cú pháp) về cơ bản là việc tô màu cho code của bạn. Nếu tôi chỉ có thể chọn một công nghệ duy nhất cho trình soạn thảo của mình, đó sẽ là đánh dấu cú pháp. Một lần nữa, đây là một yếu tố trực quan; bộ não của chúng ta đã tiến hóa để xử lý thông tin hình ảnh qua hàng triệu năm, và tôi tin rằng việc tận dụng giác quan thị giác là một trong những công cụ mạnh mẽ nhất giúp chúng ta nhanh chóng nắm bắt code. Màu sắc là cách tốt nhất để khai thác sức mạnh đó.
Code được tô màu bởi tính năng syntax highlighting trong trình soạn thảo
Hãy chọn một trình soạn thảo có tính năng đánh dấu cú pháp. Nếu bạn gặp khó khăn trong việc lựa chọn, bạn có thể quan tâm đến lý do tôi chọn Neovim làm trình soạn thảo văn bản trên Linux. Tuy nhiên, các lựa chọn phổ biến khác bao gồm VSCode, Emacs, Notepad++ và thậm chí cả Nano.
Tìm Kiếm Các Nguồn Tài Nguyên Chất Lượng – “Kinh Thánh” Của Bạn
Bạn cần câu trả lời, hướng dẫn, tài liệu tham khảo, hướng dẫn từng bước (tutorials), ý tưởng và quan trọng nhất là sự kiên nhẫn. Tôi không liệt kê chúng một cách ngẫu nhiên; mỗi yếu tố đều rất quan trọng.
- Tài liệu tham khảo: Website Mozilla Developer (MDN) là nguồn tài nguyên hàng đầu.
- Hướng dẫn từng bước (Tutorials): Bạn có thể tìm thấy chúng ở bất cứ đâu, nhưng hãy coi chúng như “bánh xe tập đi”. Đừng quá phụ thuộc.
- Câu trả lời: Tốt nhất là sử dụng AI ở chế độ ngắn gọn, đàm thoại và thẩm vấn nó một cách nghiêm túc – tuyệt đối không sao chép và dán code do AI tạo ra. Stack Overflow là một nguồn đáng tin cậy khi AI “đi chệch khỏi thực tế”.
- Hướng dẫn/Lời khuyên: Con người thật là nguồn tài nguyên tốt nhất. IRC và Discord có các cộng đồng sôi nổi, mặc dù cá nhân tôi không sử dụng cả hai.
- Ý tưởng: Hãy dùng sách và YouTube. Sách sẽ giới thiệu các kiến thức nền tảng, và YouTube tràn ngập những ý tưởng mới lạ.
- Kiên nhẫn: Hãy tham khảo “thiền sư” bên trong bạn.
Nếu bạn sử dụng AI đúng cách, chúng không nên tạo code cho bạn. Bạn nên đặt những câu hỏi đúng đắn và nhận được những câu trả lời ngắn gọn, rõ ràng bằng ngôn ngữ phổ thông. Khi AI viết tất cả code cho bạn, điều đó chỉ gây hại cho quá trình phát triển của bạn.
Việc học lập trình web không nhất thiết phải phức tạp. Ý tưởng chủ đạo là giữ mọi thứ thật đơn giản. Điều này có nghĩa là tránh các công cụ phức tạp, bố cục code nhất quán và sử dụng các tên có ý nghĩa để làm cho code dễ đọc ngay từ cái nhìn đầu tiên.
Để phục vụ nội dung, hãy tạo một thư mục, đặt các tệp nguồn vào đó và chạy máy chủ HTTP đơn giản. Từ đó, bạn có thể chỉnh sửa các tệp code và làm mới trình duyệt để xem các thay đổi.
Việc lựa chọn các nguồn tài nguyên là tùy thuộc vào bạn. Tuy nhiên, MDN là trang web tốt nhất, và chuỗi hướng dẫn của MDN có vẻ rất tuyệt vời cho những người mới bắt đầu. Bạn cũng có thể theo dõi hướng dẫn của chúng tôi để xây dựng ứng dụng web đầu tiên của mình.
Bạn đã bắt đầu học lập trình web như thế nào? Chia sẻ kinh nghiệm của bạn bên dưới nhé!
