Các mẹo viết code hữu ích cho các nhà phát triển frontend
Ngày nay, việc phát triển frontend rất quan trọng. Có rất nhiều nhiệm vụ mà một nhà phát triển frontend phải làm hàng ngày.
Là nhà phát triển front-end, chúng tôi luôn viết rất nhiều code HTML, CSS và JavaScript. Biết một số mẹo viết code có thể rất có lợi cho chúng tôi. Đó là lý do tại sao trong bài viết này, tôi quyết định chia sẻ với bạn một số mẹo viết code giao diện người dùng mà bạn có thể chưa biết.
1. Ẩn một phần tử HTML
Bạn có biết rằng bạn có thể ẩn một phần tử HTML mà không cần sử dụng JavaScript không?
Bằng cách sử dụng thuộc tính hidden, bạn có thể dễ dàng ẩn một phần tử HTML nguyên bản. Do đó, phần tử đó sẽ không được hiển thị trên trang web.
Đây là một ví dụ code:
<p hidden>This paragraph won't show up. It's hidden by HTML.</p>2. Sử dụng tốc ký trong CSS
Luôn luôn là một phương pháp hay để sử dụng các viết tắt để làm cho code CSS của bạn nhỏ hơn. Thuộc tính inset trong CSS là viết tắt hữu ích cho bốn thuộc tính top, left, right, và bottom.
Nếu bốn thuộc tính này có cùng giá trị, bạn chỉ có thể sử dụng thuộc tính inset để thay thế và code của bạn sẽ trông gọn gàng hơn nhiều.
Đây là một ví dụ:
Thực hành không tốt:
div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}Thực hành tốt:
div{
position: absolute;
inset: 0;
}3. Phát hiện tốc độ internet
Bạn có thể dễ dàng phát hiện tốc độ internet trong JavaScript bằng cách sử dụng đối tượng điều hướng. Nó rất đơn giản.
Đây là một ví dụ:
navigator.connection.downlink;
Như bạn có thể thấy ở trên, nó cho tôi 5,65 vì tốc độ internet của tôi không tốt chút nào.
4. Vibrate điện thoại của bạn
Một lần nữa, bạn có thể dễ dàng sử dụng phương pháp vibrate() trong đối tượng điều hướng để Vibrate điện thoại của mình.
Đây là một ví dụ:
//vibrating the device for 500 milliseconds
window.navigator.vibrate(500);Vì vậy, như bạn có thể thấy, thiết bị trong tình huống này sẽ rung trong 500 mili giây.
5. Tắt kéo để làm mới
Bằng cách chỉ sử dụng CSS, bạn có thể tắt tính năng kéo để làm mới trên thiết bị di động. Tài sản overscroll-behavior-y cho phép chúng tôi làm điều đó. Chỉ cần cung cấp cho nó giá trị contain.
Đây là ví dụ:
body{
overscroll-behavior-y: contain;
}6. Ngăn người dùng dán văn bản
Sẽ có những tình huống mà bạn cần ngăn người dùng dán văn bản vào đầu vào.
Chà, bạn có thể dễ dàng làm điều đó trong JavaScript bằng cách sử dụng trình nghe sự kiện dán.
Đây là một ví dụ:
<input type="text"></input>
<script>
//selecting the input.
const input = document.querySelector('input');
//prevent the user to paste text by using the paste eventListener.
input.addEventListener("paste", function(e){
e.preventDefault()
})
</script>Do đó, giờ đây người dùng không thể dán văn bản đã sao chép vào trường nhập liệu.
Tổng kết
Như bạn có thể thấy ở trên, đây là một số mẹo mà tôi có thể cung cấp cho bạn lúc này. Chúng rất hữu ích và chúng có thể hữu ích cho bạn. Đó là lý do tại sao tôi quyết định chia sẻ chúng trong bài viết này.
Cảm ơn bạn đã đọc. Tôi hy vọng bạn thấy bài viết này hữu ích.
Bài viết gốc tại đây.
Hiện tại khóa học Web Frontend tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.
Chi tiết khóa học: https://techmaster.vn/lo-trinh/front-end.
Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).
Bình luận