Share This
Связаться со мной
Крути в низ
Categories
//🛠 6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

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

Небольшая подборка малоизвестных техник для HTML, CSS и JavaScript. Обсудить

6 poleznyh frontend priemov o kotoryh vy vozmozhno ne znaete 7882ce9 - 🛠 6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

Фронтенд – это первая линия обороны веб-сайта (или, точнее, первая линия “нападения” на пользователя), поэтому у фронтендеров всегда много работы. Чтобы немножко облегчить им жизнь, мы подобрали несколько полезных, но не очень широко известных HTML, CSS и JavaScript-приемов.

1. Быстро скрыть

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

         <p hidden>Этот параграф не виден на странице, он спрятан из HTML.</p>      

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

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

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

         // До div {   position: absolute;   top: 0;   left: 0;   bottom: 0;   right: 0; }  // После div {   position: absolute;   inset: 0; }     

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

  • Подробный разбор свойства inset с интерактивными примерами

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

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

         navigator.connection.downlink;     

6 poleznyh frontend priemov o kotoryh vy vozmozhno ne znaete 9128ee2 - 🛠 6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

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

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

  • Черновик Network Connection API

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

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

         window.navigator.vibrate(500);     

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

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

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

         body {  overscroll-behavior-y: contain; }     

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

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

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

         <input type="text"></input> <script>   const input = document.querySelector('input');     input.addEventListener("paste", function(e){     e.preventDefault()   })    </script>     

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

***

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

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close