Новинки Safari 14 в ближайших релизах macOS и iOS: WebP, веб-расширения, HTTP/3, отказ от Flash, BigInt, logical assignment и публичные поля классов, кастомные EventTarget, расширенный image-set в CSS, псевдоселекторы :is() и :where(), image-orientation https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes

Выпуск №235: Евангелист Safari, Bootstrap 5, content-visibility, гриды, чекбоксы, forms, API для PWA. Слушайте на Ютубе https://youtu.be/3QExB7SK5bY, читайте на Медиуме https://medium.com/p/7673629b7d01

Марафон по HTML/SCSS/Gulp верстке сайтов!
Для старичков ! =)

⏰Когда: с 3 по 5 июля 3 дня, начало в 18:00

🎥Формат: прямой эфир

Бесплатный марафон по верстке, буду практически использовать Gulp и SCSS, объяснять свои действия, добавим анимах, обязательно адаптив, без него страшно)

🎬 Видео о марафоне, и канал автора:
https://youtu.be/ZcYo-xqhBcs

В поисках возможности проверить функционал сайта на телефоне с помощью console.log(); нашёл, что оказывается, можно открыть на компьютере консоль с браузера телефона.
Инструкция от Гугла здесь. Приятного использования.

Выпуск №236: Онлайн-доклады, новинки DevTools, новости Safari 14, Date и Temporal, TypeScript 4 и зачем TS. Слушайте на Ютубе https://youtu.be/TicJyAYPEUQ, читайте на Медиуме https://medium.com/p/5919f4f412da

Прямая трансляция Web.Dev Live начнётся в 19:00 (GMT+3). В программе: инструменты тестирования перфоманса, измерение и отладка метрик Web Vitals, отчёт Chrome UX, анализ JS-бандлов, AMP, SEO.

Программа https://web.dev/live/
Трансляция https://youtu.be/H89hKw06iWs

Ссылка или кнопка?
Ссылка:
- ведёт на другую страницу (меняется URL);
- ведёт по якорю к элементу сайта;
- даёт скачать файл (href="file:...");
- открывает приложение (ссылка mailto: tel: skype: и т.п.);
- в случае другой необходимости (нужна для плагина и не работает иначе, нужно считывать именно атрибут href и никакой другой).
Даже если выглядит кнопкой!
Во всех остальных случаях это кнопка, даже если выглядит ссылкой!

Тёмная сторона веба: исчерпывающий гайд

Дарк мод для UI набирает популярность. Тренд или необходимость? Скорее, второе, ведь пользователи, работающие в тёмное время суток, отдают предпочтение дарк моду, уменьшая нагрузку на глаза.

Предоставьте своим пользователям выбор. А вот как реализовать тёмную тему, изменить яркость изображений и сделать текст менее контрастным, вы узнаете из этой статьи:

https://tprg.ru/d3ay

#фронтенд

Свойства CSS, которые сэкономят кучу времени

Для достижения некоторых эффектов не нужно писать миллион строк. В статье описаны такие свойства:

— Центрирование с помощью place-items: center и CSS Grid или margin: auto и Flexbox.
— Стилизация маркеров списка.
— Центрирование текста.
— Иконки в одну линию с display: inline-flex.
— Добавление границ между столбцами.
— Повторение фоновой картинки без обрезки.
— Соблюдение размеров объекта с object-fit.

Больше информации, код и результаты в картинках можно найти в самой статье:

https://tprg.ru/STXI

#фронтенд #css

Как подключить и оптимизировать нестандартные шрифты. Саша Смыгина про все варианты подключения и настройки: от Google Fonts до предзагрузки и сабсетинга — https://htmlacademy.ru/blog/boost/frontend/fonts-loading?utm_source=tg_web_standarts&utm_medium=special&utm_campaign=fonts_loading03072020

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

Выпуск №238: События в Яндексе, Safari, планы браузеров, новый CSS Zen Garden, Houdini vs CSS, Yandex UI Kit. В гостях Владимир Гриненко. Слушайте на Ютубе https://youtu.be/u1OPg7IKMQU, читайте на Медиуме https://medium.com/p/3533ce9bf361

00:02:08 События в Яндексе
00:09:10 Подкаст про Safari
00:12:50 Планы браузеров
00:22:21 Новый CSS Zen Garden
00:29:53 Кто быстрее: Houdini или CSS
00:38:58 Yandex UI Kit

БЭМ'а не должно существовать. Громкое название? Нет. Статья о том, почему БЭМ это плохо.
Любая технология, любая методика имеет как плюсы, так и минусы.

Статья о том, в чём минусы БЭМ:

BEM'a не должно существовать / Хабр
https://m.habr.com/ru/post/422537/

15 базовых советов по Git для эффективной работы каждый день. Сергей Сергеев делится лайвхаками в блоге ManyChat на Хабре — https://habr.com/p/511946/

https://youtu.be/wBj6TDc4M5o - поехали смотреть!)

До­ступ­ный для кого-то. Эксперимент Мануэля Матузовича, который показывает, как плохая доступность влияет на пользователей и их повседневную работу в вебе. В переводе Никиты Дубко на «Веб-стандартах» — https://web-standards.ru/articles/accessible-to-some/

Что значит 100% в CSS?

Вы когда-нибудь задумывались, как всё рассчитывается в каскадных таблицах стилей, и почему иногда не удаётся подвинуть элемент, хотя, казалось бы, всё верно?

Амелия Ваттенбергер не только написала об этом, но и сделала статью интерактивной. Так что можете потаскать ползунки и посмотреть, что получится:

https://tprg.ru/YU83

#фронтенд #css

Альтернативный текст для свойства content. Стефан Джудис показывает, как задать отдельный текст для скринридеров для содержимого псевдоэлементов after и before — https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/