​Видео в вебе, Browser Policy и палки в колёсах

Раньше, когда деревья были большими, а веб был с градиентными кнопочками, на сайтах любили впилить рекламные видео, которые автоматически запускались с громким звуком. И вместо того чтобы приятно провести время или найти нужную информацию, приходилось судорожно искать источник этого звука.

Это негативно сказывалось на пользовательском опыте, и в какой-то момент разработчики браузеров решили, что хватит это терпеть.

В результате появилась Autoplay Policy.

Как понятно из названия, это политика автовоспроизведения видео в браузере. Инициатором её введения стал Chrome (с v.66), и на текущий момент эту политику поддержали все современные браузеры.

Итак, давайте поговорим, что это такое и какие палки и колёса мы можем встретить.

#ru

Framer motion hamburger

Кнопка для бургер-меню, выполненная с помощью CSS и библиотеки React.js.

#css #js

​Как улучшить код на TypeScript: 5 рекомендаций

Хотите писать код на TypeScript элегантно и профессионально? Тогда следуйте рекомендациям, основанным на лучших практиках!

#ru

Mitosys Canvas

Фоновая анимация в виде деления клеток, реализованная с помощью JavaScript.

#js

Advanced JavaScript Visualized

Автор: Meet Patel
Год издания: 2021

#javascript #english

Animated Social Links

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

#css

​Улучшаем прокрутку благодаря современному CSS

Обширный обзор современных способов кастомизации как внешнего вида, так и поведения прокрутки в браузерах.

#css #en

Responsive Grid

Адаптивная сетка, созданная без медиа-запросов на чистом CSS.

#css

Agressive Toggle

Анимированный переключатель на HTML и SCSS.

#css

JavaScript Everywhere

Автор: Adam D. Scott
Год издания: 2020

#javascript #english

CSS Dots wave

Анимированная сцена, выполненная с помощью SCSS, без использования JavaScript.

#css

Javascript PRO - канал для JS и FrontEnd разработчиков.

По контенту:
1. Готовые примеры: карусели, паралаксы
2. Тесты
3. Туториалы и фишки JS

Rating & Counter

Звездочный рейтинг, созданный из радиокнопок на HTML и CSS.

#css

Before/After Image Slider

Слайдер "До/После", выполненный с помощью SVG, CSS и JavaScript.

#css #js

Hands-on JavaScript for Python Developer

Автор: Sonyl Nagale
Год издания: 2020

#javascript #english

Horrible UX: Bad Buttons

Неотлипающаяся кнопка "Subscribe" и кнопка "Unsubscribe", которую невозможно нажать, реализованные с помощью React.

#react

​Избегаем сдвигов раскладки при загрузке изображений

Джейк Арчибальд демонстрирует отличия и нюансы двух подходов: aspect-ratio vs атрибуты width и height.

#css #en

Checkbox Animations With Indeterminate State

Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript.

#css #js

JavaScript®: The New Toys

Автор: T.J. Crowder
Год издания: 2020

#javascript #english