11 малоизвестных, но полезных приемов по фронтенду

Рассмотрим несколько удобных приемов JavaScript и CSS, которые помогут оптимизировать рабочий процесс веб-разработки.

1. Проверка скорости сети

Нужно определить скорость сети пользователя?

Network Information API JavaScript поможет вам! Вы можете получить доступ к скорости передачи данных (в Мбит/с) через navigator.connection.downlink.

if (navigator.connection) {
    const downlink = navigator.connection.downlink;
    console.log(`Current download speed: ${downlink} Mbps`);
} else {
    console.log("Network Information API not supported");
}

Имейте в виду, что браузеры могут поддерживать этот API по-разному.

2. Добавление вибрации в мобильное приложение 

Хотите добавить тактильный отклик в мобильное веб-приложение? API window.navigator.vibrate позволяет запускать вибрацию устройства.

// Вибрация в течение 500 мс
if (navigator.vibrate) {
    navigator.vibrate(500);
} else {
    console.log("Vibration API not supported");
}

// Создание паттерна для вибраций и пауз
if (navigator.vibrate) {
    navigator.vibrate([200, 100, 200, 100, 200]);
}

Не забудьте проверить совместимость браузера и устройства, прежде чем внедрять вибрацию.

3. Запрет на вставку текста

В определенных скриптах может понадобиться запретить пользователям вставлять текст в поля ввода. В следующем фрагменте показано, как это сделать.

<input type="text"></input>
<script>
  const input = document.querySelector('input');

  input.addEventListener("paste", function(e){
    e.preventDefault()
  })
</script>

Используйте этот прием с осторожностью! Запрет на вставку во многих случаях может помешать работе пользователя.

4. Упрощенное скрытие элементов DOM  

Не нужно полагаться только на JavaScript, чтобы скрыть элементы. Используйте нативный атрибут HTML hidden.

<p hidden>I'm invisible!</p>

Этот прием имеет тот же эффект, что и display: none; в CSS, заставляя элемент исчезнуть.

5. Быстрое позиционирование с помощью inset в CSS 

Откажитесь от многословных свойств top, left, right, bottom в CSS! Свойство inset упрощает позиционирование.

/* Слишком многословно */ 
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Со свойством inset */ 
div {
  position: absolute;
  inset: 0; 
}

Это сделает CSS не только чище, но и эффективнее!

6. За пределами console.log(): необычные приемы с консолью

Хотя console.log() является основным элементом отладки, консоль браузера предлагает гораздо больше возможностей.

• console.table(): отображает массивы или объекты в виде аккуратной таблицы:

const data = [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 }
  ];
   console.table(data);

• console.group() и console.groupEnd(): группируют связанные журналы для повышения уровня организации:

console.group('Group Label');
   console.log('Log message 1');
   console.log('Log message 2');
   console.groupEnd();

• console.time() и console.timeEnd(): измеряют время выполнения кода:

console.time('myTimer');
   // Код
   console.timeEnd('myTimer'); // Вывод затраченного времени

• console.error(), console.warn(), console.assert(): выполняют вывод ошибок, предупреждений и утверждений для более эффективной отладки;

• console.clear(): очищает консоль;

• console.dir(): отображает интерактивный список свойств объекта.

7. Отключение функции pull-to-refresh на мобильных устройствах

Запретить функцию pull-to-refresh на мобильных устройствах поможет CSS-свойство overscroll-behavior-y.

body {
 overscroll-behavior-y: contain;
}

Это также помогает управлять прокруткой внутри модального окна, предотвращая прокрутку фоновой страницы, когда модальное окно достигает своих границ.

8. Превращение всей веб-страницы в редактируемую область 

Хотите быстро сделать всю веб-страницу редактируемой? Используйте атрибут contentEditable!

document.body.contentEditable = 'true';

Но будьте осторожны! Этот прием дает пользователям право редактирования, что может повлиять на структуру страницы и выполнение скриптов. Обращайтесь с пользовательским вводом осторожно и используйте его разумно.

9. Идентификаторы создают глобальные переменные!

Знаете ли вы, что можно обращаться к элементам с идентификаторами непосредственно в JavaScript, без необходимости использовать document.getElementById()?

<div id="test"></div>
<script>
    console.log(test); // Refers to the div with id="test"
</script>

Несмотря на удобство этого приема, используйте document.getElementById() для ясности и удобства обслуживания в реальных проектах.

10. Плавная прокрутка для сайта

Повысьте удобство пользования сайтом с помощью плавной прокрутки, добавив scroll-behavior: smooth; в CSS элемента <html>.

html {    
    scroll-behavior: smooth;  
}

11. CSS-селектор :empty

Эффективно выделяйте и стилизуйте пустые элементы с помощью селектора :empty.

p:empty {   
  display: none;  
}

Он выбирает и скрывает пустые теги <p> в HTML.

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

• Практики фронтенд-разработки, которые помогут избежать неудач
• Нужно ли дизайнеру уметь писать код?
• Мы забываем основы фронтенд-разработки

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Xiuer Old: 11 Mysterious But Interesting Front-end Tips