Уход за пределы кода: 7 лучших практик дизайна для фронтенд-разработчиков

Хорошая статья от Марсиан. Фронтендеры - тоже дизайнеры.

Фронтенд-инженеры играют решающую роль в обеспечении хорошего UX и дизайна в проекте. Хотя они являются первыми пользователями приложения, они также обладают ценными техническими знаниями для оценки проблем реализации. Сотрудничество с дизайнерами необходимо, но фронтенд-инженеры должны активно участвовать в обсуждении дизайна, учитывать технические ограничения и предлагать эффективные решения. Использование системы проектирования повышает согласованность и ремонтопригодность проектов, способствуя эффективному общению между инженерами и дизайнерами. Фронтенд-инженеры могут внести свой вклад, проверяя пользовательские сценарии, рассматривая состояния интерфейса, подчеркивая иерархию и группировку, обеспечивая заметный контраст и перепроверяя согласованность в процессе реализации. Доверие к компетенции друг друга и бдительное наблюдение за продуктом - залог успешного результата.

Статья: https://evilmartians.com/chronicles/care-beyond-code-7-best-design-practices-for-frontend-developers

Astro 4.0

Astro - это веб-фреймворк, предназначенный для контент-ориентированных веб-сайтов, предлагающий новые API, ускоренную сборку и обновленную среду разработки. В релизе появилась панель инструментов Astro Dev Toolbar для локальной разработки в браузере, предоставляющая инструменты для проверки, аудита и взаимодействия со сторонними приложениями, такими как Sentry и Storyblok. Кроме того, Astro 4.0 предлагает маршрутизацию интернационализации (i18n), инкрементное кэширование контента для повышения производительности сборки, новые API переходов между видами для интерактивного опыта, переработанный журнал регистрации для более чистого интерфейса, а также обновленный шаблон документации под названием Starlight. Обновление прошло без проблем для большинства кодовых баз, и пользователи могут изучить Astro 4.0 на npm или с помощью команды npm create astro@latest.

https://astro.build/blog/astro-4/

Интересное исследование Яндекса на тему инклюзивности пользователей мобильный версий браузера: https://inclusion.yandex.ru/settingsresearch

- 27% пользователей используют тёмную тему
- 35% меняют размер шрифта
- 6% используют функцию озвучивания того, что находится на экране

Как дела у Firefox?

Узнайте сами из статьи: https://www.brycewray.com/posts/2023/11/firefox-brink/

Поддержи Лису и установи Firefox - https://www.mozilla.org/en-US/firefox/new/

ally

Адвент календарь по доступности: https://kittygiraudel.com/2020/12/01/a11y-advent-calendar/, не самый свежий, но и не ставший от этого хуже.
Займи декабрь полезным =)

Кто мне может рассказать почему верстальщики не использующие OOCSS, бутстрапы и прочее, всё равно сокращают именование button до btn?

В спецификацию предложили добавить новую единицу измерения: au — астрономическая единица, представляющая собой расстояние от Солнца до Земли.

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

https://github.com/w3c/csswg-drafts/issues/9678

sizes="auto"

Статья: https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/

В статье рассматриваются сложности и нюансы создания отзывчивых изображений, в частности о добавлении функции автоматического изменения размеров для лениво загружаемых изображений в браузере Chrome.
Главный вывод: при использовании sizes=auto для лениво загружаемых изображений loading="lazy" очень важно указывать атрибуты width и height для элементов <img>, согласно спецификации HTML. Невыполнение этого требования может привести к тому, что изображение будет отображаться с размерами по умолчанию 300x150 пикселей. В тексте дается практическое руководство по решению этой проблемы, подчеркивается важность установки атрибутов width и height в соответствии с размерами самого большого ресурса в наборе srcset.
Кроме того, есть потенциальные проблемы, связанные с добавлением ширины и высоты в HTML, и предлагается решение на основе CSS для сохранения гибкости размеров изображений.

В деталях узнайте как работает LCP

Статья: https://www.debugbear.com/blog/lcp-subparts

Для достижения оптимального показателя LCP, особенно для изображений, предлагается поддерживать задержку загрузки ресурсов и задержку рендеринга на низком уровне, причем Google рекомендует, чтобы эти два компонента вместе составляли не более 20 % от общего показателя LCP. Оставшиеся 40 % отводятся на TTFB и время загрузки ресурсов LCP.

Неизвестно полезный CSS

Статья: https://habr.com/ru/companies/ruvds/articles/775986/

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства.

Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!

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

Вопросы на собеседованиях для фронтендеров

Добрый день. У меня появилась идея.

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

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

Оно ещё живо

Знаменитый html5-boilerplate обновился до версии 9.0.0.

Вот список изменений:
- удаление определенных плиточных изображений
- включение Prettier для форматирования кода
- отказ от Modernizr
- отказ от Normalize.css
- внедрение процесса сборки WebPack для развертывания проекта
- прощание с Internet Explorer
- удаление apache-server-configs/. htaccess
- замена Parcel на Webpack
- добавление SVG Favicon
- отказ от Google Analytics
- исключение humans. txt

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

Accessibility tree

Отличная статья, https://blog.pope.tech/2023/11/27/how-to-use-chromes-accessibility-tree/, чтобы начать погружение инспектировании доступности в DevTools.

Например, из панели Name сразу становится понятно откуда берётся описание интерактивного элемента, а главное иерархия разных атрибутов(см.картинку)

Посмотрите каким был 2023 год для CSS

Гуглы рассказали как они хорошенько поработали над CSS - https://developer.chrome.com/blog/css-wrapped-2023 и это чистая правда. Замечательно поработали.

Тут тебе и :has(), и container queries, и @scope, и нестинг, и subgrid, и text-wrap и куча всего остального.

30 лет HTML

В 1993 году, а именно 3 декабря, появиля документ об HTML.

Тогда было "модно" писать все теги прописными <TITLE>, <P>, а марджины делались с помощью <BR><BR><BR>

NaN

Узнайте о работе с null, undefined и 0 значениями в JavaScript, в частности в контексте функции isNaN(). isNaN() - это глобальная функция, используемая для определения того, оценивается ли значение как NaN (Not A Number), что обычно происходит в JavaScript в результате невозможных математических операций или передачи в функцию значений неправильного типа.

В статье подчеркивается, что isNaN() пытается преобразовать значение в число перед его оценкой. Такое поведение может привести к неожиданным результатам при проверке некоторых нечисловых значений, таких как null, пустые строки "" и undefined. Для решения этой проблемы в тексте представлена более надежная функция Number.isNaN(), которая не пытается преобразовать значение в число.

Также рассматривается использование функций isNaN() и Number.isNaN() для фильтрации данных, при этом подчеркивается, что эти функции только проверяют, не является ли значение NaN, а не подтверждают, является ли оно числом. Чтобы убедиться, что фильтруются только числа, в тексте предлагается проверять тип каждого значения с помощью typeof. Однако в тексте признается, что NaN считается типом числа, поэтому для более полного решения необходимы дополнительные проверки с помощью функции isNaN().

В общем, "NaN or not NaN, that is the question". Надо бы разобраться прочитав статью https://css-irl.info/nan-or-not-a-number/

Ваш софт не очень

Помните нытьё про то, что весь софт дырявый. Это касается абсолютно всех компаний. Например, если у вас старый AMD процессор, то вы могли не увидеть миниатюр изображений. А вот в 122 Firefox уже увидите - https://www.mozilla.org/en-US/firefox/122.0a1/releasenotes/#note-789894

Кастомные свойства расцветают всё лучше и лучше

Скоро возможность использования кастомных свойств в <dialog> для ::backdrop заработает везде. Раньше по спецификации ::backdrop удалялся из цепочки наследования, теперь спецификацию поправили, а за спецификацией начинают подтягиваться браузеры.

Гонимся за Core Web Vitals

Сложное чтиво на вечер.

First Input Delay (FID) заменяется на новую метрику Interaction to Next Paint (INP), начиная с марта 2024 года. Это связано с тем, что отчёты о производительности часто не соответствуют реальному взаимодействию с интерфейсами. Лучше всегда перепроверять с помощью PageSpeed Insights или аналогичных инструментов, типа DebugBear.

В статье полностью раскрывается метрика INP и как она оценивает всё взаимодействие пользователя, а не конкретное место.

Статья: https://www.smashingmagazine.com/2023/12/preparing-interaction-next-paint-web-core-vital/

VS Code 1.85

Вышла новая версия. Давайте узнаем о новинках:
- Плавающие окна редакторов - перетаскивайте редакторы на рабочий стол.
- Рабочий процесс Accessible View - более плавные переходы в Accessible View и обратно.
- Более тонкий контроль обновления расширений - выбор расширений для автоматического обновления.
- Просмотр входящих и исходящих изменений в Source Control - Удобный просмотр ожидающих изменений в репозитории.
- Снимки кучи JavaScript - Визуализация снимков кучи, включая графики объектов памяти.
- Отображение иерархии типов Python - быстрый просмотр и навигация по сложным отношениям типов.
- Обновления GitHub Copilot - Улучшения встроенного чата, пояснение кода Rust.
- Предварительный просмотр: расширенная поддержка Sticky Scroll - Sticky Scroll в древовидных представлениях и терминале.

Более подробное описание: https://code.visualstudio.com/updates/v1_85

SVGO 3.1.0

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

Подробнее: https://github.com/svg/svgo/releases