Движемся к CSS4.

3 современных CSS-свойства, которые должен иметь ваш сайт

Коротко:
- scroll-margin
- color-scheme
- text-wrap: pretty||balance

Подробно: https://bejamas.io/blog/modern-css-properties-your-website-must-have/

Быстрый HTML

Вы же знали, что браузер не понимает HTML? Ну на самом деле понимает, но делает это через этап анализа HTML-разметки и превращения разметки в DOM. Дальнейшая работа происходит именно с DOM.

В 2023 году команда V8 решила сходить в гости в Blink и оптимизировать анализатор HTML. Теперь анализ HTML работает на 3.4% быстрее.
Ребята из WebKit посмотрели на это улучшение и вкатили его к себе.

Про улучшения V8: https://v8.dev/blog/holiday-season-2023 - один из самых моих любимых блогов. Там задроты пишут для задротов =)

Vercel открыл доступ всем желающим на свой продукт v0.

v0 - генератор, с ИИ, создающий компоненты по текстовому описанию, например "Сделай форму оплаты". Результатом работы будет React-компонент. Можно посмотреть разметку, стилизацию. Стили, вроде бы, написаны на Tailwind.

Разметка приемлемая.

Ну что. Закрываем редакторы кода и идём отдыхать!

Всем хороших выходных

Недавно в учительской обсуждали написание ключевого слова currentColor:
- lowercase currentcolor
- camelCase curentColor

Немного истории:
color level 3 - спокойно указывает currentColor
color level 4 - передумали, теперь currentcolor

В самой спеке описано, что произошло:

Примечание: Многословные ключевые слова в CSS обычно разделяют свои составные слова дефисами. currentcolor не разделяют, потому что (глубокий вдох) изначально он был представлен в SVG как значение свойства, "current-color" с обычным написанием CSS. Затем оно (вместе со всеми остальными свойствами и их значениями) стало атрибутами представления и значениями атрибутов, а также свойствами, чтобы упростить генерацию с помощью XSLT. Затем все презентационные атрибуты были заменены с дефиса на camelCase, потому что у DOM была проблема с тем, что дефис означает "минус". Но затем они перестали следовать конвенциям CSS, поэтому все свойства и значения свойств, которые уже были частью CSS, были изменены на дефисные! currentcolor не был частью CSS в то время, поэтому оставался в camelCased. Только позже CSS подхватил его, и тогда капитализация перестала иметь значение, поскольку ключевые слова CSS не зависят от регистра ASCII.

Последний выпуск подкаста «Про код», к сожалению не прощальный. Прощальный уже не получится записать.

Услышимся в других новых подкастах

Отчёт за 2023 год.

Всего нас в канале: 93 человека
Просмотров на пост в среднем: 74 просмотра
Реакций на пост в среднем: 1 реакция
Всего постов: 113

Библиотеки:
- html2-basic-template дорос до версии 2.0.7
- stylelint-config-htmlacademy дорос до версии 4.0.1
- linthtml-config-htmlacademy дорос до версии 1.0.14, а также в нём появилось 24 новых правила
- editorconfig-cli дорос до версии 2.0.8
и многое другое.

Всем желаю хороших новогодних каникул🎉 Обязательно отдохните

Привет, фронтендеры.

Всех с наступающим новым годом. Поменьше багов и побольше новых методов 🥳🎁🎅

Привет. Тяжело неделька у меня началась. Как снежный ком навалились дела.

Ищу единомышленников для совместного изучения Vite.js. Этот инструмент разработан для создания быстрых веб-приложений, оптимизированных под современные стандарты JavaScript и TypeScript. Он предоставляет быструю сборку, легкую конфигурацию, поддержку горячей перезагрузки и интеграцию с популярными фреймворками.

Наш процесс изучения выглядит следующим образом:
- Ежедневные встречи с 09:00 до 10:00 по будням по Московскому времени, на протяжении 2-3 недель.
- Общий репозиторий для экспериментов.
- Совместная работа над созданием кода.
- Постепенное изучение официальной документации и практика, проверяя возможности инструмента.
- Постановка задач из реальной жизни для инструмента и поиск их решений.
- Активное взаимодействие и обсуждение, без скучных "readonly" сессий.

Мы начинаем с нуля, вместе погружаемся в изучение инструмента. Поэтому если вы знаете Vite, то этот формат не для вас. Это не формальное обучение, а скорее совместное знакомство с инструментом с самых основ. В настоящее время я проверяю интерес к такому подходу. Если найдется хотя бы небольшая группа заинтересованных, мы начнем активные встречи. Следите за моими сообщениями для дополнительной информации.

Планируется также переход к изучению Astro после завершения изучения Vite, если этот формат будет успешен. Присоединяйтесь, чтобы вместе погрузиться в увлекательный мир новых технологий!

Если такой формат изучения Vite вам подходит, а также вы сможете выделять время с 09:00 до 10:00 по МСК, то поставьте любую эмодзи на это сообщение или напишите комментарий к этому сообщению "Я в деле"

Уже пятница? О_О

За целую неделю почти никаких новостей вам не принёс. На следующей неделе исправлюсь.

А пока, linthtml научился следить за пробелами внутри комментариев. Правило следит за консистентностью использования пробелов вначале комментария и в конце.

Можно писать вот так:

<!-- Комментарий -->

а можно вот так:

<!--Комментарий-->

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

https://github.com/htmlacademy/linthtml-rules-htmlacademy/blob/main/rules/space-between-comments/README.md

Опять пятница. Да что такое-то?

Идея с изучением Vite пока не взлетела поэтому начинать не будем. Основная проблема подобрать время встречи, но на обучение его всегда не подобрать.
Попробуем в следующий раз с чем-нибудь другим. Если есть идеи - пишите.

Safari Technology Preview 185

- Поменяли роль по умолчанию для заголовков. Если в WAI ARIA 1.1 значение было 2, то в современной 1.2 значения по умолчанию вообще нет. Теперь нужно явно указывать aria-level="2", ну либо использовать заголовки <h2>, <h3> и т.д.

Получается Сафари придёрживаются спецификации. Молодцы.

- Также добавлена поддержка align-content для блочных контейнеров.
- letter-spacing и word-spacing теперь поддерживают процентные значения.
- Добавлена поддержка @scope.
- Добавлена поддержка ::grammar-error и ::spelling-error для стилизации ошибок в тексте.

Оригинал: https://webkit.org/blog/14885/release-notes-for-safari-technology-preview-185/

switch

Помните же такой классный UI-элемент как свитчер или switch? Сейчас идут разговоры как внедрить подобный элемент в браузер, чтобы не писать его каждый раз с нуля.

Пока обсуждаются два варианта:
- <input type="checkbox" switch>
- <switch>

Есть ещё вариант - ничего не делать или реализовывать с помощью псевдоэлементов.

Просто поглядите на картинки и посмотрите каким сложным может быть этот элемент и сколько нюансов нужно учесть при его реализации: https://deploy-preview-785--open-ui.netlify.app/components/switch.explainer/

Не то, чтобы вам вообще нужна эта информация, но сегодня мы обсуждали устаревшую версию WA ARIA 1.1 и новую 1.2. Оказалось, что уже готовится версия 1.3 - https://www.w3.org/TR/wai-aria-1.3/

Коротко: спецификация предоставляет роли интерфейсным элементам, которые помогут повысить доступность веб-интерфейсов. В новой версии спецификации появились новые роли aria-description, aria-braillelabel, aria-brailleroledescription

Ну и завершим сегодняшний день новостью про новую спецификацию.

Вышла новая спецификация CSS Viewport Module Level 1. Спецификация на данный момент имеет незначимый статус "Первый публичный черновик".

Эта спецификация предоставляет автору возможность указать в CSS размер, коэффициент масштабирования и ориентацию области просмотра, которая используется в качестве основы для начального содержащего блока.

6 CSS-снипетов, который должен знать верстальщик в 2023

- выражение от контейнера
- scroll-snap
- наложение грид ячеек друг на друга
- как быстро сделать круг
- управление каскадом с помощью слоёв
- логические свойства

Посмотри примеры: https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023

A Deep Dive Into SVG Path Commands

Очень хорошо представленное интерактивное руководство по пониманию SVG-путей и команд путей - в нем рассматриваются курсоры, линии, кривые Безье и многое другое. Посмотрите как шаг за шагом создаются иконки.

https://www.nan.fyi/svg-paths

Экономия на спичках

Отличная статья от microsoft про перформанс селекторов. В проектах мы стараемся использовать простые селекторы, например .link, а значит производительные, но что если необходимо написать сложный селектор, например .wrapper .section .title .link.. Повлияет ли сложный селектор на перформанс интерфейса и как сильно повлияет?

Быстродействие сложного селектора, в основном, зависит от глубины и ширины DOM-дерева, чем больше дерево, тем менее производительный сложный селектор. Также перформанс зависит от того как часто изменяется DOM-дерево. Это значит, что перформанс одного и того же сложного селектора зависит от проекта.

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

Статья: https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/

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

Статья: https://www.techspot.com/news/101396-european-union-set-revise-cookie-law-admits-cookie.html

Баннер с превьюшки показывается тут - https://www.artlebedev.ru/

10 самых распространенных ошибок доступности , обнаруженных на сайтах в 2023 году.

1. Нет текста ссылки
2. Неактивный элемент в порядке табуляции (tabindex="0").
3. Отсутствует атрибут alt ссылки.
4. Нет альтернативного текста
5. Список вложен неправильно. Имеется ввиду, когда список вложен в список
6. Задублированные лейблы
7. Положительное значение табиндекса.
8. Неверное aria описание. Нет цели для aria-describedby
9. Нет надписи для кнопки.
10. Неверная ариа-маркировка. нет цели для aria-labelledby

Детальнее: https://www.tpgi.com/the-top-accessibility-errors-found-in-2023/

Разбираем самый маленький PNG в мире

Самый миниатюрный PNG в мире весит 67 байт и представляет собой один чёрный пиксель.

Узнайте почем так https://habr.com/ru/companies/ruvds/articles/787302/