FRONT-END VÀ NHỮNG SAI LẦM DỄ MẮC

Các Developer 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. Trong bài viết này, hãy cùng Hybrid Technologies chỉ ra những lỗi sai mà các Front-end developer hay gặp nhất và cách để khắc phục chúng như thế nào nhé!

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, bạn sẽ khó mà hiểu được nguyên lý hoạt động của những vấn đề đó.

Front-end developer không nên đặt code ở một chỗ

JavaScript đã có các module tiêu chuẩn 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.

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.

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.

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 Bold';
  font-weight: bold;
  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.

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 dễ gặp phải khi lập trình, hãy cùng comment bên dưới bài viết để đóng góp ý kiến với chúng mình nhé!

Nguồn: Sưu tầm.

Facebook Comments
Đánh giá bài viết

Bạn thích bài viết này chứ?
Đăng ký để nhận những bài viết thú vị như thế hàng tuần.

Đừng sợ thất bại, chỉ sợ việc dậm chân tại chỗ

TÌM VIỆC
Bình luận