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>

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