Tác giả: John Au-Yeung
Các dev thường dễ mắc sai sót khi làm việc, tuy nhiên hoàn toàn có thể tránh được những sai lầm này nếu biết về nó từ trước. Bài viết này sẽ chỉ ra những lỗi sai mà các newbie front end developer hay gặp nhất và cách để khắc phục chúng như thế nào.
Phụ thuộc quá nhiều vào việc sử dụng Frameworks
Nhiều front end developer có thói quen phụ thuộc hoàn toàn vào frameworks dù rõ ràng vẫn có thể tự làm được những việc đó mà không cần dùng đến framework. Vậy nên tốt nhất, hãy chỉ dùng framework khi đã thành thạo với các cấu trúc JavaScript đơn giản và thao tác DOM. Nếu không thì sẽ khó mà hiểu được nguyên lý hoạt động của vấn đề đó.
Xem thêm Top 7 JavaScript Frameworks
Front end Developer không nên đặt tất cả code ở một chỗ
JavaScript đã có các module tiêu chuẩn những năm gần đây nên không có lí do gì để sử dụng các scripts quá dài nữa. Hãy sử dụng module để chia code thành các phần khác nhau để dễ quản lý hơn. Bạn cũng không nên sử dụng biến toàn cục – global variables nữa mà hãy chuyển sang sử dụng nhiều biến xuất trên từng module.
Ngoài ra, nếu muốn gom các code thành một custom component, front end developer có thể sử dụng web components API để thực hiện và sử dụng ở bất kỳ nơi nào. Các project được tạo bởi framework đều chia code thành các module, đây là phương pháp tốt nhất mà bạn nên thực hiện để tránh các sai lầm.
Nhiều công ty tuyển dụng Frontend Developer đãi ngộ tốt, ứng tuyển ngay!
Sử dụng Inline-styles
Inline-styles làm trang làm việc của lập trình viên lộn xộn hơn nên hãy chuyển chúng vào một file CSS để làm gọn lại và có thể tái sử dụng cùng một kiểu ở nhiều nơi.
Không loại bỏ các phần thừa thãi
Block elements có chiều rộng 100% sẽ trở nên dư thừa. Các front end developer không cần đặt chiều rộng của nó 100% vì nó được mặc định theo 100% chiều rộng của element phần tử chứa nó. Chrome sẽ cảnh báo khi phát hiện có quá nhiều phần tử không cần thiết trên trang.
Các front end developer không tối ưu hóa hình ảnh
Nhiều trường hợp vẫn chưa có kết nối ổn định, nên để có chất lượng ảnh tốt nhất bạn hãy nén các file ảnh lại. Cũng không nên sử dụng nhiều hình ảnh có kích thước megabytes vì sẽ mất rất nhiều thời gian để tải xuống và tốn nhiều băng thông hơn.
Sử dụng Bootstrap cho Layout (bố cục)
Sử dụng Bootstrap sẽ phát huy hiệu quả tốt nhất khi flexbox và grid được phát hành hoặc khi nó không có sẵn nhiều trên các trình duyệt. Hiện tại đã có thể sử dụng cả hai để tạo layout cho page, kể cả Bootstrap cũng sử dụng flexbox và grid cho layout của mình.
Nên thay vì sử dụng Bootstrap các front end developer nên sử dụng flexbox và grid để tạo layout dễ dàng hơn. Chúng ta có thể quên các nguyên tắc cơ bản khi tạo layout nếu phụ thuộc quá nhiều vào Bootstrap.
Xem thêm Bootstrap là gì? Tặng 20 Templates Bootstrap miễn phí
Không sử dụng tag Heading cho mục đích tạo kiểu
Thẻ heading sẽ giúp người đọc phân biệt được các đề mục trong một bài viết và ảnh hưởng đến tiêu chuẩn SEO, do đó hãy điều chỉnh các thẻ heading sao cho hợp lý để tăng chất lượng bài viết.
Nhúng phông chữ sai cách
@font-face dùng để chỉ định tên phông chữ cho các chữ được nhập, nhưng vẫn có thể thay đổi độ đậm nhạt và giữ nguyên tên trong cả khối đối với phông chữ thông thường so với các phông chữ khác.
Ví dụ, thay vì viết như sau:
@font-face {
font-family: 'Open Sans';
src: url('opensans.woff2');
}
@font-face {
font-family: 'Open Sans Bold';
font-weight: bold;
src: url('opensans-bold.woff2');
}Chúng ta nên viết:
@font-face {
font-family: 'Open Sans';
src: url('opensans.woff2');
}
@font-face {
font-family: 'Open Sans';
src: url('opensans-bold.woff2');
}Sau đó đặt cỡ chữ theo kiểu của mình và phông chữ sẽ được chọn tự động từ chữ có kích cỡ phù hợp hoặc các kiểu khác trong danh sách.
Ví dụ, chúng ta có thể sử dụng Open Sans như sau:
.foo {
font-family: 'Open Sans';
font-weight: bold;
}Sau đó, trình duyệt sẽ chọn mặt phông chữ Open Sans đã font-weight được đặt thành đậm.
Kết luận
Inline-styles không thật sự hiệu quả nên chúng ta hãy chuyển sang tệp CSS để có thể sử dụng lại. Bên cạnh đó, hãy nhúng phông chữ đúng cách với lệnh @font-face. Và vì có nhiều người dùng kết nối chậm hơn nên hãy tối ưu hóa bài viết cho phù hợp nhất để mọi người đều có thể tiếp cận được. Trên đây là một số vấn đề mà các front end developer nên xem qua để tránh gặp sai sót khi lập trình.
Phỏng dịch theo bài viết gốc tại dev.to
Có thể bạn quan tâm:
- Những projects giúp nâng hạng Front-end Developer
- 3 công cụ ngon bổ rẻ cho Front-End developer
- 9 công cụ siêu tiện lợi cho cả Developer và Designer
Xem thêm Việc làm IT hấp dẫn tại TopDev
