Я во время стрима не ответил на вопрос про дивы. Обязательно запишу короткий видос про них завтра днём. Всем бобра и семантику!

13 способов стилизации списков

Не любите списки? Да вы просто не умеете их готовить!

В своей статье автор делится нетривиальными способами стилизации. Всё оформлено в CodePen, так что можно потыкать код, не отходя от кассы.

https://tprg.ru/BOgt

#фронтенд #css

Просто и понятно про БЭМ на примере стейка:

.корова 

- блок

  .корова__спина 

- элемент (не может существовать отдельно от блока)

    .корова__спина-мышца.вырезка 

- микс (вырезка, как кусок мяса - отдельная сущность, но входит в состав коровы, как её мышца)

      .корова__спина-стейк.вырезка__филе-миньон

- микс двух элементов разных блоков

        .корова__спина-стейк.вырезка__филе-миньон—медиум-рейр

- модификатор означает степень прожарки

Гриды для раскладки, флексбокс для компонентов. Разбираемся, что и в каких ситуациях использовать.

https://ishadeed.com/article/grid-layout-flexbox-components/

Этот пост не про CSS, но о человечности. Моего знакомого, которого не раз встречал на разных политических акциях судят за то, что он смог отбиться от нападавших на него людей. У одного из них он выбил нож и нанёс, как позже оказалось, смертельный удар в область живота. Нападение было уже ТРЕТЬИМ по счёту и он просил защиты у государства, которое отморозилось. Поэтому извините, оффтоп, но я поддержу Серёжу Стерненко в его праве на самооборону.

Підтримувати активіста Сергія Стерненка – підтримувати право на самозахист.
У вас може бути різне ставлення до Стерненка, але якщо ви вболіваєте за його ув’язнення, то ваша позиція дуже підозріло збігається з позицією Шарія, Портнова, Медведчука та інших агентів ФСБ. Ми, адміни українських телеграм-каналів, усвідомлюємо відповідальність перед своїми аудиторіями, заявляємо, що всебічно підтримуємо активіста Сергія Стерненка.

Підтримують:
@ukrnastup
@teterivonelove
@tasty_flashbacks
@dvish_live
@knpu_division
@Ironvoter
@privatnamemarnya
@philiszanka
@fastnews_ua
@polcringe
@borykva
@guliajpole
@taburetkax
@kropyvamemes
@not_understandable
@vantazhivka
@nechudopi4
@direview
@Legion_of_Kuchma
@nationalpolpotism

Да ладно? Наконец-то webp в Safari? А снег скоро пойдёт?

Новинки 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