Коля Шабалин и великий аттрактор кода

Результаты 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/

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

Сегодня читал всю обратную связь по HTML1. Всё конечно же написать не смогу. Короткие итоги: Курса в целом: 9.6/10 Наставники: 10/10 💪 Рад что результаты работы так высоко ценят. А теперь сниму розовые очки и пойду поднимать в небеса HTML2 =)

Если хотите немного поразвлекаться с JS, то вот вам задачка над реальным проектом. Бери, да делай =) На сайте css-properties нужно создать фильтр CSS-эпох. Если захотите сделать, то отпишитесь в issue, что берётесь. https://github.com/nikolai-shabalin/css-properties/issues/29

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

Кажется у меня произошло разочарование века: условный импорт для 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' даже не загрузится, но это не так.

Начал исследовать visually-hidden. Всегда было интересна история развития этого утилитарного класса. Какие свойства в нём появились по каким причинам, отчего отказались, а что вообще является антипаттерном. Всё это опубликую в этом репозитории: https://github.com/nikolai-shabalin/visually-hidden Уже много материала удалось насобирать

Хочу нас всех поздравить, так как у нас с каждым днём появляется всё больше способов центрировать элемент. Никогда бы не подумал, что это такая глобальная проблема, но как оказывается это всех заботит. Благодаря флексам и гридам у нас появилась спецификация CSS Box Alignment Module Level 3, которая отвечает за выравнивание элементов внутри их контейнеров. Но знаете что? Спецификация никак не связана с гридами и флексами, то есть выравнивать мы должны уметь хоть в блочной, хоть в табличной вёрстке =) Ну это в спеке, а что с браузерами? align-content: center заработал во всех браузерах для блочной вёрстки(дивчиков) Посмотрите пример как центрируется заголовок внутри дива, без флексового и гридового контекста: https://codepen.io/web-dot-dev/pen/abMxwzr. Красота же.

Веб-спеки Мало кто их читает, это и понятно. Слишком сложно. Слишком скучно. Но нужно ли их читать? Я бы сказал, что почитывать точно необходимо, иначе вся веб-разработка вам будет казаться магией. Спецификации предоставляют полную и точную информацию о технологии, которую вы будете использовать в работе. Это также способ быть в курсе новинок и трендов. В гридах, например, до сих пор не доделана спецификация CSS Grid Layout Module Level 2, посвящённая сабгридам (подсеткам), а также есть Level 3, посвящённый кирпичной раскладке (Masonry 1, 2). Знали? =) Спецификации часто включают рекомендации по лучшим практикам, которые помогают избежать распространённых ошибок и улучшить производительность сайта. Когда вышел will-change, это свойство сразу же выстрелило в миллионы колен. Разработчики стали более аккуратно относиться к CSS-свойствам и действительно разбираться в том, что они используют в коде. Если хотите начать погружаться в спеки, то можете сделать свой первый шаг, начав с статьи Виталия Зюзина "Как ор­га­ни­зо­вана веб-плат­фор­ма"

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

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

Новая задачка от Ани Лисененковой 🥳 Нужно написать селектор, который изменит цвет заголовка в единственном блоке, в котором нет изображения. Проверить себя можно здесь: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-4.html

Третья задача со сложной HTML-структурой. Нужно написать селектор, который окрасит в зелёный цвет только первый блок, но есть ряд условий. Проверить себя: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-3.html

Вот и вторая задача на знание :has(). Нужно написать селектор таким образом, чтобы при выборе в <select> опции «Картошечка», <select> становился зелёного цвета. По умолчанию, или если выбрана любая другая опция, <select> должен быть белого цвета. Проверить себя можно тут: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-2.html

Вот вам небольшой тренинг на вечер. Нужно написать селектор, в этом вся сложность, который выберет карточку без изображения. У выбранной карточки без изображения должен появится зелёный фон. Проверять себя тут: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-1.html Подсказка: задача на применение селектора :has()

Это не учебная тревога. 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://htmlacademy.ru/inspector Докинули ещё 4 задачки для джунов. Приходите с обратной связью.

Мы тут в Академии опять немножко упоролись. Запускаем проект, который ещё находится на ранней стадии разработки, но мы уже близки к запуску бета-версии, по глубокой проверке теоретических знаний во фронтенд-технологиях. Пока собрали только для CSS, так как самим интереснее. Если захочется порешать сложную задачу по CSS на выходных, то заглядывайте в https://htmlacademy.ru/inspector/3. Присылайте мне личку решения =) Обсудим. Если прям будете страдать, но всё-таки будет хотеться решить задачу, то приходите в личку за подсказкой =) Можно поделиться и идеями, если захотите. Для решения нужно написать CSS, который будет удовлетворять тестам.

Привет. Я не пропал, а уходил в длительный отпуск. Решил в этом отпуске вообще ничего не делать. Удалил рабочие чаты и наслаждался бездельем. В этом безделье родилось пару идей, что можно поделать общественно полезного для фронтендеров. Скоро напишу об этом новости. 16 марта отметил день рождения. Мне 36 лет 🥳 Ну, а пока возвращаюсь в режим. Ждите, как минимум, фронтенд-новости =)

Олимпиада Проводили недавно в Академии олимпиаду для студентов ВУЗов и не только. Олимпиада была разделена на две секции: построение интерфейсов (HTML + CSS) и оживление простых интерфейсов с помощью JavaScript, с алгоритмами и DOM. Все задачи были реальными из жизни, но не без упрощений для того, чтобы всё уместить в один день. Мои выводы: в универах всё очень хорошо с программированием. Прям прекрасно. Но над созданием интерфейсов ещё работать и работать. Прям пахать надо.