6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

Чтобы спрятать DOM-элемент, вам не нужен JavaScript, достаточно нативного HTML-атрибута hidden . Эффект аналогичен добавлению стиля display: none , элемент просто исчезает со страницы.

Конечно, с псевдоэлементами такой трюк не сработает.

2. Быстро спозиционировать

Вы знакомы с CSS-свойством inset? Это сокращенный вариант для всем знакомых top , left , right и bottom . По аналогии с кратким синтаксисом свойства margin или padding вы можете задать все смещения для элемента одной строчкой.

Использовать краткий синтаксис полезно для уменьшения размера CSS-файла, и код так выглядит чище. Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот.

3. Узнать скорость интернета

Вы можете легко определить скорость интернета пользователя из кода на JavaScript с помощью объекта navigator .

6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

Результат не очень 🙂 Скорость моего интернета всего 5,65 мб/сек.

4. Включить вибрацию на смартфоне

Да, так тоже можно. Метод vibrate() объекта window.navigator может включить режим вибрации на мобильном устройстве.

Методу можно передать параметр – время вибрации в миллисекундах. А можно указать даже паттерн – чередование интервалов вибрации и пауз. Для этого передайте методу массив чисел.

5. Запретить pull-to-refresh

Pull-to-refresh (потяни для обновления) – это популярный паттерн мобильной разработки. Если он вам не нравится, просто запретите этот эффект с помощью CSS-свойства overscroll-behavior-y со значением contain .

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

6. Запретить вставлять текст

Возможно, вы захотите запретить пользователю вставлять в поля ввода скопированный откуда-то текст (хорошо подумайте, стоит ли оно того). Это очень просто сделать отследив событие paste и вызвав его метод preventDefault() .

Упс, теперь не получится копипастить, придется писать вводить все руками.

Эти приемы используются не очень часто, но могут быть вам полезны в ряде ситуаций. Надеемся, вы нашли что-то интересное для себя.