6 полезных приемов для создания интерфейсов

Фронтенд-разработка сегодня весьма востребована. Программисты, выполняющие подобные проекты, постоянно сталкиваются со множеством новых задач.

Для их решения приходится создавать код с использованием 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>

Удачного программирования!

Читайте также:

• Элементы минималистичного дизайна
• 3 важных рекомендации Django-программистам
• Новые правила дизайна интерфейсов в Google

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Mehdi Aoussiad: 6 Amazing Frontend Coding Tips That You Probably Don’t Know