Bước chân vào thế giới phát triển web có thể là một thử thách đáng sợ, đặc biệt là khi bạn không biết nên bắt đầu từ đâu. Những lời khuyên thông thường như học React, Svelte, hay NPM thường khiến bạn hoang mang và bị mắc kẹt trong sự phức tạp không cần thiết. Để trở thành một nhà phát triển web hiệu quả, điều quan trọng là bạn phải ý thức tối thiểu hóa sự phức tạp này. Bài viết này của tinmoicongnghe.com sẽ giúp bạn khởi động hành trình học lập trình web cho người mới bắt đầu một cách suôn sẻ, loại bỏ những rào cản không cần thiết và tập trung vào những kiến thức cốt lõi nhất để bạn có thể phát triển web đơn giản mà vẫn hiệu quả.
Luôn Tuân Thủ Nguyên Tắc KISS (Keep It Simple, Stupid) Khi Học Phát Triển Web
Khi mới bắt đầu tự học lập trình web, bạn không muốn bị sa lầy vào những 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 khoảng cách giữa đoạn mã bạn viết và trình duyệt web. Bạn cần tập trung hoàn toàn vào các kiến thức nền tảng: HTML, CSS và JavaScript thuần túy. Đây chính là lúc nguyên tắc KISS—Keep It Simple, Stupid (Giữ Mọi Thứ Đơn Giản, Ngốc Nghếch)—phát huy tác dụng. Việc tuân thủ nguyên tắc này cho phép bạn nhanh chóng thực hiện thay đổi, thấy được kết quả ngay lập thì và thực sự hiểu rõ những gì mình đang làm.
Nguyên tắc KISS Keep It Simple Stupid thể hiện trên nút bàn phím, nhấn mạnh sự đơn giản trong lập trình web.
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, tinmoicongnghe.com cũng khuyến nghị bạn tham khảo thêm hướng dẫn của chúng tôi về cách tránh những cạm bẫy phổ biến khi học lập trình để có một lộ trình học tập hiệu quả hơn.
Tránh Xa Các Framework Phức Tạp Ngay Từ Đầu
Cách dễ nhất để bị quá tải là cài đặt các công cụ và framework thường được khuyên dùng như NPM, Yarn, PNPM, NodeJS, React, Svelte. Mọi người thường giới thiệu chúng vì chúng phổ biến và có giá trị chuyên môn cao hơn JavaScript (JS) thuần túy. Tuy nhiên, những khuyến nghị này phục vụ yêu cầu của họ, không phải của bạn khi bạn mới bắt đầu học web dev.
Các công cụ phức tạp tạo thêm nhiều lớp trừu tượng cho mã của bạn, che khuất đi cách “phép thuật” thực sự hoạt động. Hãy chống lại những lớp trừu tượng này. Hãy tập trung vào các kiến thức nền tảng: mọi thứ là gì, chúng dùng để làm gì và bạn có thể sử dụng chúng như thế nào. Hãy kiểm tra mọi thứ bạn học và ghi chú đơn giản. Nói tóm lại, hãy tránh xa các công cụ và framework trong thời điểm hiện tại. Bạn có thể học NPM chỉ trong vài tuần. Có lẽ sau vài tháng, bạn có thể học React hoặc Svelte, khi bạn đã nắm vững các kiến thức cơ bản về HTML CSS JavaScript cơ bản.
Viết Mã Dễ Đọc Để Giảm Tải Gánh Nặng Nhận Thức
Sự đơn giản, hay còn gọi là tính dễ đọc, là một trong những nguyên tắc định hướng của “clean code” (mã sạch). Tôi thường viết lại những phần phức tạp của mã để làm cho nó “ngốc nghếch” và dễ đọc hơn. Mã của bạn nên thể hiện ý nghĩa của nó 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 Rõ Ràng
Ví dụ, hãy bắt đầu tên hàm bằng các từ hành động ngắn gọn, đơn giản:
function fetchUserAccount() {...}Bạn có thể chưa hiểu đầy đủ đoạn mã này, nhưng bạn có thể hiểu ý định của nó: nó dùng để “tìm nạp 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.
Hãy xem đoạn mã sau. Ngay cả khi bạn hiểu mã, cũng không rõ ràng ngay lập tức nó làm gì.
function evaluateDimensions(b) { return b.x > 10 && b.z > 5 && b.y > 7}Bây giờ hãy nhìn vào đoạn mã này, nó làm điều 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ể không hiểu mã, nhưng ý định của nó rõ ràng ngay từ cái nhìn đầu tiên. Bạn sẽ lướt qua mã của mình hàng trăm lần, vì vậy hãy tự làm lợi cho mình, làm cho nó đơn giản một cách “ngốc nghếch” để xử lý nhanh chóng và sử dụng tên làm biển chỉ dẫn. Đây là một phần quan trọng trong việc tối ưu code dễ đọc.
Nhóm Các Đoạn Mã Liên Quan Bằng Dòng Trống
Khi chúng ta nhóm các thứ lại với nhau, chúng tạo thành các 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 làm ranh giới để nhóm các khối mã liên quan lại với nhau. Việc 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 comment cũng giúp tạo ra những ranh giới đó. Comment không phải là ghi chú cá nhân của bạn; chúng là nhãn và thông tin dành cho các lập trình viên tương lai (trong đó có cả bạn). Hãy sử dụng chúng để giúp đỡ người khác, nhưng cũng 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ỉ bao gồm các comment hữu ích và nhãn rõ ràng.
Trong ví dụ sau, các comment 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 mã của bạn dễ đọc và dễ xử lý hơn. Bạn nên cung cấp đủ ngữ cảnh trong các comment của mình để chúng hữu ích.
Giúp Bản Thân Dễ Dàng Hơn Khi Mã Trở Nên Phức Tạp
Một trong những chiến thắng lớn nhất về khả năng đọc là sự nhất quán. Sự nhất quán trong bố cục, đặt tên và nhóm giúp bạn giảm bớt gánh nặng căng thẳng khi phải xử lý từng dòng, lặp đi lặp lại. Mục tiêu là nhìn vào một khối mã và biết nó làm gì mà không cần suy nghĩ.
Việc tuân thủ các thực hành về khả năng đọc hợp lý sẽ giúp bạn hiểu mã của mình khi đang học. Mọi thứ sẽ trở nên phức tạp, và bạn cần những biển chỉ dẫn 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, làm cho việc học lập trình web đơn giản hơn.
Chạy Trang Web Cục Bộ Với Một 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 đơn giản. Việc phục vụ nội dung web cục bộ không hề khó khăn, và thực tế bạn có thể làm điều đó chỉ với một lệnh duy nhất.
Cấu trúc thư mục dự án web cơ bản với các file index.html, index.js và style.css được hiển thị trong cửa sổ terminal, minh họa cách tổ chức nội dung.
Trước tiên, hãy tạo một thư mục, và trong đó đặ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>Đặ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 đó, và sau đó chạy server với lệnh sau:
python -m http.server 8080Chúng tôi giả định 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.
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;
}Không bao gồm trình soạn thảo, đây là toàn bộ ngăn xếp công nghệ của bạn. Như bạn thấy, nó đơn giản và không có gì che khuất mã của bạn. Đó là một “sổ nháp” hoàn hảo để bạn bắt đầu nghề 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 Thận Với Các Cách Import File JavaScript Khác Nhau
Hệ sinh thái JavaScript (JS) là một mớ hỗn độn. Thực tế, toàn bộ hệ sinh thái phát triển web front-end đều lộn xộn. Là một người 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 lĩnh vực gây nhầm lẫn đặc biệt là cú pháp import. Để bỏ qua các chi tiết, có 4 cách tiếp cận khác nhau, nhưng cách mới nhất (ESM) 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 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ụ; việc import “/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 để bạ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ụ xây dựng đặc biệt để làm cho nó hoạt động trong trình duyệt. Chúng trông giống nhau, với 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 cho NodeJS và không trực tiếp cho 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 Highlight Cú Pháp
Hai cửa sổ trình soạn thảo code hiển thị tính năng highlight cú pháp giúp lập trình viên dễ đọc và phân biệt các phần của code HTML và JavaScript.
Highlight cú pháp về cơ bản là việc tô màu cho mã của bạn. Nếu tôi chỉ có thể chọn một công nghệ cho trình soạn thảo của mình, đó sẽ là highlight cú pháp. Một lần nữa, đó 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 trực quan qua hàng triệu năm, và tôi tin rằng việc tận dụng các giác quan thị giác là một trong những công cụ mạnh mẽ nhất của chúng ta để nhanh chóng hiểu mã. Màu sắc là cách tốt nhất để khai thác sức mạnh đó.
Hãy chọn một trình soạn thảo có highlight 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 các lý do tại sao nhiều người chọn Neovim làm trình soạn thảo văn bản của họ. 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. Việc có một môi trường phát triển web với trình soạn thảo code phù hợp sẽ hỗ trợ đắc lực cho quá trình học tập của bạn.
Tìm Các Nguồn Tài Nguyên Học Tập Tốt – “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 và quan trọng nhất là sự kiên nhẫn. Tôi liệt kê chúng không phải không có lý do; mỗi yếu tố đều rất quan trọng.
- Tài liệu tham khảo: Mozilla Developer Website (MDN) là nguồn tài liệu số một.
- Hướng dẫn (Tutorials): Bạn có thể tìm thấy chúng ở khắp mọi nơi, nhưng chỉ nên sử dụng chúng như “bánh xe tập đi”.
- Câu trả lời: Tốt nhất là sử dụng AI ở chế độ đàm thoại, ngắn gọn và hỏi một cách nghiêm túc – không sao chép và dán mã được tạo ra. Stack Overflow là đáng tin cậy khi AI đi chệch khỏi thực tế.
- Hướng dẫn: Con người thực là nguồn tài nguyên tốt nhất. IRC và Discord có các cộng đồng hoạt động tích cực.
- Ý tưởng: Sử 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 có đầy đủ các ý tưởng mới.
- Kiên nhẫn: Hãy tham khảo “thiền sư” bên trong bạn.
Nếu bạn đang sử dụng AI đúng cách, chúng không nên tạo mã cho bạn. Bạn nên đặt đúng câu hỏi và nhận được câu trả lời ngắn gọn bằng tiếng Việt đơn giản. Khi AI viết tất cả mã cho bạn, nó chỉ làm hại sự phát triển của bạn.
Ý tưởng chủ đạo là giữ mọi thứ đơn giản khi học lập trình web cho người mới. Điều này có nghĩa là tránh các công cụ phức tạp, bố cục mã của bạn một cách nhất quán và sử dụng các tên có ý nghĩa để làm cho nó dễ đọc ngay từ cái nhìn đầu tiên.
Để chạy nội dung, hãy tạo một thư mục, đặt các tệp nguồn vào đó và chạy server. Từ đó, bạn có thể chỉnh sửa các tệp mã và làm mới trình duyệt.
Các nguồn tài nguyên bạn thu thập là tùy thuộc vào bạn. Tuy nhiên, MDN là tốt nhất trên web, và loạt bài hướng dẫn của MDN trông rất tuyệt vời cho những người mới bắt đầu tuyệt đối. 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. Hãy bắt đầu hành trình phát triển web đơn giản của bạn ngay hôm nay!