Типичный Веб Разработчик

171

подписчик

Добро пожаловать на канал о веб-разработке! Здесь вы найдете множество полезной информации о создании и развитии веб-сайтов, веб-приложений, а также о технологиях и инструментах, необходимых для успешной работы в этой области.

Главная Видео Статьи Ролики Подборки

Как вычислить разницу между датами в javascript?

Представим что нам нужно вычислить разницу между двумя датами и показать результат в днях, часах, минутах и секундах. Можно воспользоваться специализированной библиотекой для работы со временем, например moment.js, или понять как это работает и написать свой код. 1. Сначала вычислим разницу между двумя датами в секундах, пускай это будут даты 1 января и 20 февраля: const startDate = new Date("Jan 1, 2025 00:00:00").getTime(); const endDate = new Date("Feb 20, 2025 00:00:00").getTime(); const...

11 месяцев назад

Как использовать адаптивные изображения в HTML? Рассмотрим типичный сценарий - в шапке каждого поста установлена картинка, для экрана компьютера она узкая и длинная, например 1200x200 пикселей, а для экрана смартфона 320x200 пикселей. Если использовать большую картинку и просто обрезать лишнее на экране смартфона, например с помощью object-fit, то получим низкую скорость загрузки страницы. Идеально иметь несколько версий изображения и загружать только одно для каждого устройства. Чтобы устранить эту проблему, добавим в <img> атрибуты srcset и sizes. Они представляет собой набор значений, разделенных запятыми. Каждое значение srcset содержит url-изображения и дополнительные параметры(дескрипторы), каждое значение sizes содержит медиа запрос и минимальный размер картинки: <img src="small-image.png" alt="A description of the image." srcset="small-image.png 480w, large-image.png 800w" sizes="(max-width: 600px) 480px, 800px" > Атрибуты srcset и size выглядят сложными, но их не так уж сложно понять, если отформатировать их, как показано выше. Srcset определяет набор изображений, которые мы разрешаем браузеру выбирать, а также размер каждого изображения, обратите внимание, что здесь используется единица измерения w, а не пиксели. Sizes определяют набор медиа-условий (например, ширину экрана) и указывают, какой размер изображения лучше всего выбрать, когда определенные медиа-условия верны. Браузер определит первое истинное выражение в sizes, проверит размер указанный в нем и загрузит изображение из списка srcset, которое имеет тот же размер, или первое изображение, которое больше выбранного размера. Типичный Веб Разработчик

1 год назад

Как отключить обновление страницы свайпом в мобильных браузерах? Обновление свайпом — популярная функция обновления страницы в мобильных браузерах. Однако в некоторых случаях мы хотели бы отключить это поведение по умолчанию. Сделать это можно с помощью свойства CSS overscroll-behavior. Как видно из названия, это свойство позволяет изменить поведение по умолчанию при чрезмерной прокрутке контейнера. Обновление свайпом можно отключить с помощью свойства CSS overscroll-behavior: body { overscroll-behavior: contain; } Установка overscroll-behaviour: contain отключает передачу прокрутки в родительский элемент — то есть сверхпрокрутка содержится только внутри самого элемента. Установка этого параметра в <body> предотвратит передачу чрезмерной прокрутки в браузере и, таким образом, предотвратит действие для обновления. Однако обновление по запросу происходит вертикально, и в некоторых случаях нам бы хотелось, чтобы по умолчанию прокрутка выполнялась в горизонтальном направлении (на странице может быть слайдер или карусель с событиями пролистывания влево-вправо). Это можно сделать с помощью overscroll-behavior-y: body { overscroll-behavior-y: contain; } Типичный Веб Разработчик

1 год назад

Ускоряем написание HTML разметки с помощью Emmet в VSCode Emmet - это утилита, которая позволяет значительно ускорить ваш рабочий процесс с HTML. Просто введите любой тег без <> и нажмите TAB, в результате получите полноценную HTML разметку с обязательными атрибутами и закрывающим тегом. Рассмотрим популярные сокращения: 1. Вводим ! и нажимаем TAB, далее происходит магия и мы получаем разметку целой страницы. 2. Вводим html, получаем: <html> 3. Добавляем несколько братских элементов - h1+h2+p+btn, получаем: <h1></h1> <h2></h2> <p></p> <button></button> 3. Добавляем дочерние элементы - table>tr>td: <table> <tr> <td></td> </tr> </table> 4. Умножение - ul>li*3: <ul> <li></li> <li></li> <li></li> </ul> Это лишь часть возможностей Emmet. Изучайте и становитесь продуктивнее. Ссылки: YouTube | Дзен Дока Emmet

1 год назад

Как анимировать меню c React Transition Group? Простая анимация меню на основе библиотеки React Transition Group за несколько минут. Ссылки: - YouTube | Дзен - Github Pet Project Типичный Веб Разработчик

1 год назад