https://htmlacademy.ru/inspector

Докинули ещё 4 задачки для джунов. Приходите с обратной связью.

Это не учебная тревога.

Gulp обновился до версии 5.0.0

Интересные изменения:
- Отказались от node.js < 10.13
- Теперь используется glob(работа с путями) одинаково для src и watch. Вообще было сделано много для работы с путями.
- Обновлены все зависимости
- Очень много изменений для создателей плагинов
- Добавлена поддержка gulpile.cjs и gulpfile.mjs

Предыдущая мажорная версия вышла в 2018 году

Все изменения: https://github.com/gulpjs/gulp/releases#individual-changelogs

Вот вам небольшой тренинг на вечер.

Нужно написать селектор, в этом вся сложность, который выберет карточку без изображения. У выбранной карточки без изображения должен появится зелёный фон.

Проверять себя тут: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-1.html

Подсказка: задача на применение селектора :has()

Вот и вторая задача на знание :has(). Нужно написать селектор таким образом, чтобы при выборе в <select> опции «Картошечка», <select> становился зелёного цвета. По умолчанию, или если выбрана любая другая опция, <select> должен быть белого цвета.

Проверить себя можно тут: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-2.html

Третья задача со сложной HTML-структурой.

Нужно написать селектор, который окрасит в зелёный цвет только первый блок, но есть ряд условий.

Проверить себя: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-3.html

Новая задачка от Ани Лисененковой 🥳

Нужно написать селектор, который изменит цвет заголовка в единственном блоке, в котором нет изображения.

Проверить себя можно здесь: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-4.html

Пятая: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-5.html

Node.js 22

Выпущена версия Node.js 22 с несколькими улучшениями, включая возможность импортировать ES-модули с помощью require(), появление клиента WebSocket и обновления движка V8 JavaScript до v12.4. Эта версия скоро перейдет на долгосрочную поддержку (LTS), но в настоящее время она находится в стадии "Текущая" в течение шести месяцев. Среди заметных особенностей - компилятор Maglev, поддержка синхронных графов ESM и новые возможности выполнения сценариев из package.json. Кроме того, в этом выпуске улучшена производительность и добавлены новые функции, такие как glob и globSync. Скачать и прочитать подробнее об этих обновлениях можно здесь.

Лично жду glob, хотя наверняка возлагаю на него слишком большие надежды

Веб-спеки

Мало кто их читает, это и понятно. Слишком сложно. Слишком скучно. Но нужно ли их читать? Я бы сказал, что почитывать точно необходимо, иначе вся веб-разработка вам будет казаться магией.

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

Это также способ быть в курсе новинок и трендов. В гридах, например, до сих пор не доделана спецификация CSS Grid Layout Module Level 2, посвящённая сабгридам (подсеткам), а также есть Level 3, посвящённый кирпичной раскладке (Masonry 1, 2). Знали? =)

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

Если хотите начать погружаться в спеки, то можете сделать свой первый шаг, начав с статьи Виталия Зюзина "Как ор­га­ни­зо­вана веб-плат­фор­ма"

Хочу нас всех поздравить, так как у нас с каждым днём появляется всё больше способов центрировать элемент.
Никогда бы не подумал, что это такая глобальная проблема, но как оказывается это всех заботит.

Благодаря флексам и гридам у нас появилась спецификация CSS Box Alignment Module Level 3, которая отвечает за выравнивание элементов внутри их контейнеров. Но знаете что? Спецификация никак не связана с гридами и флексами, то есть выравнивать мы должны уметь хоть в блочной, хоть в табличной вёрстке =)
Ну это в спеке, а что с браузерами?

align-content: center заработал во всех браузерах для блочной вёрстки(дивчиков)

Посмотрите пример как центрируется заголовок внутри дива, без флексового и гридового контекста: https://codepen.io/web-dot-dev/pen/abMxwzr. Красота же.

Начал исследовать visually-hidden.

Всегда было интересна история развития этого утилитарного класса. Какие свойства в нём появились по каким причинам, отчего отказались, а что вообще является антипаттерном.

Всё это опубликую в этом репозитории: https://github.com/nikolai-shabalin/visually-hidden

Уже много материала удалось насобирать

Кажется у меня произошло разочарование века: условный импорт для CSS-файла всё равно загружает CSS-файл, но браузер не обрабатывает файл.

Коротко. В браузеры постепенно имплементируется условный импорт файлов:

  <style>
    @import url('./anchor.css') supports(position-try: flip-block);
  </style>

Работает это так. Файл ('./anchor.css') начнёт работать только если supports подтвердит, что браузер поддерживает (position-try: flip-block). Я думал, что если браузер не поддерживает position-try: flip-block, то './anchor.css' даже не загрузится, но это не так.

Фронтендер

Поставьте любую эмодзи этому посту, если вы прямо сейчас ищите работу фронтенд-разработчиком

Если хотите немного поразвлекаться с JS, то вот вам задачка над реальным проектом. Бери, да делай =)

На сайте css-properties нужно создать фильтр CSS-эпох. Если захотите сделать, то отпишитесь в issue, что берётесь.

https://github.com/nikolai-shabalin/css-properties/issues/29

Сегодня читал всю обратную связь по HTML1. Всё конечно же написать не смогу.

Короткие итоги:
Курса в целом: 9.6/10
Наставники: 10/10 💪

Рад что результаты работы так высоко ценят. А теперь сниму розовые очки и пойду поднимать в небеса HTML2 =)

Привет.

Поделитесь ссылками на любые свои проекты. Можно студенческие. Желательно свежие. Себя покажите, да других посмотрите.

Результаты State of HTML 2023

Исследование охватывает не только HTML-теги, но и доступность, веб-компоненты и многое другое.

Интересные для меня моменты:
- Средний возраст HTML-программиста 33,6 года. Мы старые
- Опыт разработки 10,7 лет. Мы опытные
- 51% имеет высшее образование в смежной области.
- Самый популярный скринридер - VoiceOver (26%). Покупаем макбуки и айфоны
- Самый популярный инструмент для проверки доступности, неожиданно, LightHouse (51%), а уже после Axe (23%)
- Ожидаемые элементы: интерактивные таблицы с сортировкой, фильтрацией и прочим, нативные табы, тогглер, нативный скелетон, контекстное меню(правый клик), бесконечный скролл, масштабирование изображений, более умный <input type="date">.
- Неожиданно и то, что людям нужны сложные нативные элементы. Не хватает настроек и возможностей стилизации.

Познакомиться с исследованиями можно на странице https://2023.stateofhtml.com/ru-RU/demographics/

Не минифицируйте CSS (мнение автора статьи)

78 kB сырого CSS превращаются в 65kB. Так ли вам важны эти 13kB?

Компрессия. Без gzip или Brotli уже вообще не должно быть сайтов:
- 78kB сжимается до 11kB
- 65 kB сжимается до 10kB
Так ли вам важен этот 1kB?

Протокол.
HTTP/2 мультиплексирование позволяет серверу использовать одно соединение для параллельной передачи нескольких запросов и ответов.
Если сжатый CSS-файл без минификации составляет всего 10 кБ, а затем разбивается на более мелкие фрагменты, скажем, по 2 кБ, то минификация становится как бы не проблемой

Статья: https://blog.sentry.io/why-dont-we-talk-about-minifying-css/

Моё мнение: занимайтесь оптимизацией сайта комплексно. Немножко CSS минифицировал, потом JS, потом HTML. Вот и картиночки оптимизировались. И хоба! 1mB сайта превратился в 100kB. Пользователь счастлив. Вы счастливы. Все счастливы.

Линтер для HTML

Напомню, что я делаю линтер для HTML на основе linthtml.

С последнего моего отчёта было многое, что сделано нового:
- Поправил правило htmlacademy/attr-req-value, которое требует заполнение атрибутов, например value="chto-nibud"
У правила появилось исключение для первого <option> в <select>
- input-req-label теперь исключает проверку <input type="submit">
- tag-req-attr появилась новая настройка ignore, которая спасает от ситуаций вроде <input type="submit" name="submit">
- Новое правило htmlacademy/req-stylesheet-link, которое проверяет наличие <link rel="stylesheet"> внутри тега head.
- Правило htmlacademy/req-mailto требует mailto: для ссылок с email в теле тега
- htmlacademy/no-blocking-script теперь игнорирует <script> с type="module" в <head>, так как подобные скрипты неблокирующие
- У <source> внутри <picture> требуем атрибуты размеров width и height если <source> внутри <picture>
- Добавил правило tag-forbid-attr, запрещающее использование указанных атрибутов в указанном теге.
- Правило req-tags-presence требует наличия указанных тегов на странице.
- Правило req-preload-font требует значения preload для шрифта.
- Правило req-webp-in-picture требует webp в <picture>.
- Правило no-class-in-container проверяет атрибут class для дочерних элементов внутри указанного контейнера.

Работа идёт и если у вас идеи для правил, то приходите в гости https://github.com/htmlacademy/linthtml-rules-htmlacademy

На данный момент уже стало ясно, что из-за того, что linthtml не развивается, а его API не обширно, то уже хочется какой-то другой инструмент. Поживём - увидим.

Альтернативное описание на максималках

Четыре года назад я на работе обсуждал, что альтернативное описания контентным изображениям никто не пишет. Все понимают, что надо, но всем лень. Тогда пришли к мнению, что надо донести простую мысль. Если лень, то хотя бы оставь alt правильно пустым — alt="". Это уже победа.

3.5 года назад я обсуждал, что если уж контентным изображениям никто альтернативное описание не пишет, то про описание для декоративных изображений можно забыть, хотя такая возможность есть:

.element {
  content: url("images/background.jpg") / "альтернативное описание";
}

в content можно добавить /, после него написать описать изображение текстом. Такое описание попадает в дерево доступности.

Но это вообще не рабочий вариант, так как описание находится в стилях. Абсолютно никто не будет после изменения изображения, да и во время создания, менять текст описания, а это значит, что этот текст будет только сбивать столку.

Буквально сегодня, в Chrome 126 версии, должно произойти, то что сможет нам все помочь. Лень никуда не уйдёт, но будут способы делать нормальное описание.

И так: в спецификации CSS Generated Content Module Level 3 для content появились новые возможности, а именно использование функции attr() для альтернативного описания.

Исправим изначальный пример

.element {
  content: url("images/background.jpg") / attr(data-alt);
}

добавим в разметку атрибут

<div class="element" data-alt="Альтернативное описание"></div>

Кажется, что ничего не поменялось, текст "Альтернативное описание" всё также попадает в дерево доступности, а мы всего лишь перенесли описания из стилей в разметку. В этом заключается мощь. У нас появляются новые возможности управлять контентом. Теперь у нашего бэкендера появляется возможность взять нейросеточку, которая делает описания изображению, а результат работы нейросетки вставлять в разметку в data-alt="", ну либо сделать это руками.

В общем, как вы поняли, то появляются новые возможности, которыми мы конечно же не будем пользоваться, но как приятно, что эти новые возможности постоянно появляются.

gap

Часто ведь возникает вопрос «В каких случаях мне переписывать margin на gap» 🤔 У меня уже сложилось мнение, которое я ещё уточняю, но всегда не хватает примеров.

Ахмад Шадид постарался и показал кучу примеров - https://ishadeed.com/article/the-gap/
Статья на английском, но знаний английского не нужно, так как есть примеры кода и небольшие интерактивные демонстрации. Статья хоть и длинная, но хватит 5 минут, чтобы её посмотреть