Источник: Nuances of Programming
Фронтенд-разработка сегодня весьма востребована. Программисты, выполняющие подобные проекты, постоянно сталкиваются со множеством новых задач.
Для их решения приходится создавать код с использованием HTML, CSS и JavaScript. Представленные здесь советы могут оказаться весьма полезными для тех, кто занимается созданием сайтов и мобильных приложений.
1. Скрытие элемента HTML
Знаете ли вы, что даже без использования JavaScript можно скрывать элементы HTML?
Сделать их невидимыми можно в исходном (нативном) формате с помощью атрибута hidden. В результате элемент не будет отображаться на странице.
Вот пример кода:
<p hidden>Этот абзац не появится на экране. Он скрыт тегом HTML.</p>
2. Сокращение inset в CSS
Чтобы сократить размер кода CSS, рекомендуется использовать сокращения. Свойство inset в CSS — удобное сокращение для четырех свойств top, left, right и bottom.
Если эти четыре свойства имеют одинаковое значение, то вместо них можно просто использовать inset и код станет намного чище.
Плохая реализация:
div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Хорошая реализация:
div{
position: absolute;
inset: 0;
}
3. Определение скорости интернета
Легко и просто определить скорость интернета можно с помощью объекта navigator в JavaScript.
Вот пример:
navigator.connection.downlink;
Как видите, скорость интернет-соединения не очень хорошая — 5,65 мегабит в секунду.
4. Вибрация на смартфоне
Чтобы заставить смартфон вибрировать, можно использовать метод vibrate() в объекте navigator.
Вот пример:
// Устройство будет вибрировать в течение 500 мс
window.navigator.vibrate(500);
5. Запрет “pull to refresh”
С помощью CSS можно отключить функцию обновления экрана pull to refresh (потянуть, чтобы обновить) на мобильном устройстве. Сделать это позволяет свойство overscroll-behavior-y. Просто задайте ему значение contain.
Вот пример:
body{
overscroll-behavior-y: contain;
}
6. Запрет вставки текста
Иногда нужно запретить пользователям вставлять скопированный текст в форму ввода. JavaScript позволяет сделать это с помощью отслеживания события paste.
Вот пример:
<input type="text"></input>
<script>
// Выбор типа ввода const input = document.querySelector('input');
// Запрет вставки текста с помощью paste eventListener input.addEventListener("paste", function(e){
e.preventDefault()
})
</script>
Удачного программирования!
Читайте также:
Перевод статьи Mehdi Aoussiad: 6 Amazing Frontend Coding Tips That You Probably Don’t Know
