Иногда решение приходит мгновенно по проблеме, которая возникла только что. Заметили на курсах, что студенты приходят с уже установленным 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
и многое другое.

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

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

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

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

Ищу единомышленников для совместного изучения 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 пока не взлетела поэтому начинать не будем. Основная проблема подобрать время встречи, но на обучение его всегда не подобрать.
Попробуем в следующий раз с чем-нибудь другим. Если есть идеи - пишите.