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 2020 / All rights reserved

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