Демо для видеоблога
- Как тестировать на
☎️ телефонах и эмуляторах, и почему фронтендеру никуда без макбука 🥨 Попап вместо селекта:✨ новые HTML-элементы✨ наконец-то решат старую проблему- 6+5 способов сделать две колонки
✌️ От таблиц и флоатов до гридов и полной дичи😱 - Табы или пробелы?
➡️ Почему мы повернули не туда и как табы помогают - Переключатель
🌓 цветовой схемы: радиокнопки, CSS-фильтры и инверсия, SVG-иконки, JS и localStorage - Тёмная
🌑 и светлая🌕 темы на CSS: кастомные свойства, подключение, фолбэк для старых браузеров - Новый image-set как
🖼 тег picture в CSS: не только ретина, но и WebP и AVIF - Цветные вкладки
🌈 на theme-color для Safari, Vivaldi и Chrome. Бонусом ES-импорты, сервер на Node.js - :has в CSS — псевдокласс из будущего
👽 на примере карточки новости - Мой VS Code
⚙️ Светлая тема, удобный поиск, полезные расширения и настройки - Веб-сервер на Ubuntu 20 с нуля: nginx, HTTPS, Brotli и HTTP/2
📦 CSS Container Queries, или Адаптация по новому: контейнер вместо вьюпорта- Цветовые функции в CSS
🎨 Мечты сбываются: смешивание, прозрачность, контраст - Верстать как в 2020, или Трюки на SVG: маски, трансформации и calc
- Верстать как в 2008, или Флэшбеки олдфага: IE6, таблицы и JS в CSS
- Где использовать флексы, а где гриды?
🤨 Спойлер: да где хотите - Декларативный Shadow DOM для изоляции стилей
- Хороший и плохой focus, полифил focus-visible и Open Prioritization
- Автотесты и деплой на GitHub Actions: npm-скрипты, EditorConfig и настройка ssh-ключа
- Свежий взгляд на Gulp: функции и ES-модули
- Адаптивная шапка с выпадающим меню на гридах
- Веб-сервер на Ubuntu с нуля: nginx, HTTP/2, brotli и HTTPS
- Направляющие для адаптивной сетки на градиентах и кастомных свойствах
- Шапка на гридах и флексах с гэпами и БЭМ
- Кастомные свойства или честный Sass вместо CSS-переменных на PostCSS
- Звёздный рейтинг
⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ✅ Кастомные чекбоксы правильно- Как вставить двадцать видео с Ютуба и не скачать слона
- Прототип изоляции стилей для Shower на веб-компонентах
- Skillbox, оптимизация графики, Squoosh и элемент picture
- Кто такие дивелоперы, ручной SVG и волнительное подчёркивание
- Погружение в object-fit: cover с полифилом и без
- Политех, магический JPEG, ненужная форма и object-fit на SVG
- Навигация, дизайнеры и код, актуальность, личинки фронтендера и фреймворки