Моя активность в гитхаб за 2023 год - https://githubunwrapped.com/nikolai-shabalin. За создание видео отвечают Remotion с помощью веб-технологий.

Можете проверить свою https://githubunwrapped.com/

Пока мы все вместе дружно любим ESLint, у него появляются конкуренты. Это Здорово.

Вышел Oxlint - линтер JavaScript, предназначенный для обнаружения ошибочного или бесполезного кода, не требующий каких-либо настроек по умолчанию. Сами о себе ребята завляют, что они в 50-100 раз быстрее ESLint.

Из интересного это то, что у линтера более привлекательная информация об ошибках.

Посмотрим. Последим за развитием.

Preconnect

<link rel="preconnect" href="https://fonts.googleapis.com">

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


Статья: https://csswizardry.com/2023/12/correctly-configure-preconnections/

В этот раз без статьи. Желаю просто хорошенько отдохнуть на выходных

Иногда решение приходит мгновенно по проблеме, которая возникла только что. Заметили на курсах, что студенты приходят с уже установленным VS Code, с настройками под свои хотелки, которые не всегда гладко работают при работе на курсе. Особенно мешает Prettier, который постоянно диктует свои правила.

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

Встречайте vscode-profile-htmlacademy, доступный для открытого обсуждения.

Как сделать кнопку "Вверх" на чистом CSS

Всё очень просто

margin-top: 110vh;
position: sticky;

Посмотреть: https://codepen.io/expa/pen/yLZmdpL?editors=0100

3D ёлки к вам на сайт

С помощью HTML, CSS, JS

https://designerfeed.org/christmas-tree-animations-made-with-css-and-js/

Facebook выпустил новую CSS-in-JS библиотеку StyleX

Работает со всеми фреймворками: React, Preact, Solid, Angular. Особенно полезен для крупных проектов и сложных систем проектирования, используемых несколькими командами.

Статья: https://habr.com/ru/articles/781166/

Firefox 121

HTML
- <iframe loading=lazy>

CSS
- :has()
- handing и each-line для `text-indent
- balance для text-wrap

JS
- Promise.withResolvers()
- Date.parse() теперь принимает несколько дополнительных форматов даты


и многое другое: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/121

Очередной роадмэп по фронтенду

Стоит пролистнуть. Может быть вас это вдохновит на новогодние каникулы =)

Статья: https://habr.com/ru/companies/kts/articles/775948/

Смена сетки от количества дочерних элементов

Иногда бывает полезно изменить сетку. Например, для <5 элементов - крупные ячейки, а для >10 мелкие ячейки. Раньше верстальщики это делали с помощью бэкендеров, которые генерили им модификаторы, ведь только бэкенд знал какое количество элементов будет отображено.

Сейчас это может сделать CSS с помощью :has().

.element {
  &:has(> :nth-child(10)) {
    /* если элементов больше 10 */
  }
}

Статья: https://frontendmasters.com/blog/quantity-queries-are-very-easy-with-css-has/

mask-composite

В Figma, да и в других графических редакторах, есть возможность накладывать маску на маску, но у наложения может быть несколько вариантов. Например, маска снизу удаляет пиксели маски сверху, или маска просто накладывается сверху без какого-либо просвечивания, или маска которая перекрывает забирает себе пиксели другой маски.

В общем, как вы поняли этим можно управлять в вебе: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

31 декабря Vue 2 официально всё.

https://blog.vuejs.org/posts/vue-2-eol

Ещё не занимались производительностью своих проектов? Можно начать

Отличная статья https://www.htmhell.dev/adventcalendar/2023/14/ , чтобы познакомиться с метриками. Помните всякие LPC, INP, CLS? В статье эти метрики подробно рассматриваются.

Также статья прекрасна тем, что освещает сервисы помимо Lighthouse. Lighthouse хороший инструмент, но есть другие варианты: GTMetrix, WebPageTest.

Движемся к 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
и многое другое.

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