Сайт icones.js.org довольно удобен для подбора иконок (хотя выбор средний и поиска по параметрам нет, но хорошо сделано копирование найденного сразу в svg), но такое потребление памяти после поиска нескольких иконок выше понимания.

К вопросу о том, качественный ли код пишет Anthony Fu, автор VueUse, Nuxt и многого другого

#antfu #icons #optimization

Описал, как с помощью AI можно быстро и качественно сделать интернационализацию сайт

На этом примере видно, как еще можно использовать AI кроме автокомплита.

Посвящается Денису Чернову

#ai #i18n #article

Вона как
Минин вернулся к Vue 3
Климов отстает... ((

#minin

Как и предсказывалось, Voidzero создан чтобы спонсировать, грубо говоря, разработчиков проектов Эвана

Мудрый ход

#voidzero

Новые HTML элементы <dialog> и popover имеют много схожего

Элемент <dialog> используется для создания модальных и немодальных диалогов, которые требуют явного взаимодействия пользователя для закрытия. Модальные диалоги блокируют остальную часть страницы до тех пор, пока не будут закрыты пользователем, тогда как немодальные диалоги позволяют продолжать взаимодействие с остальной частью страницы. Это делает <dialog> полезным для сценариев, где необходимо привлечь внимание пользователя к определённому контенту или взаимодействию.

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

Ключевое различие между этими элементами заключается в их влиянии на фокус: диалоги перемещают фокус на первый доступный элемент внутри себя, в то время как поповеры сохраняют фокус на элементе, который их открыл. Это различие важно учитывать при разработке интерфейсов, чтобы обеспечить правильное взаимодействие и доступность для пользователей. Кроме того, поповер может быть управляем исключительно HTML методами, а <dialog> требует JavaScript.

<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Hello!</div>

#dialog #popover

P.S. Не согласен с нарисованным

#meme

https://ios404.com/

Чего нет в iOS по сравнению с Android

#ios #android

Белорусский фулстек на заработках в Европе

Кому зайдет - Internal flight

#video #offtop

Тихо и незаметно вышел Svelte 5 со своими рунами - самый близкий Vue по духу фронтенд фреймворк

Ну и стандартно за два дня уже три дополнительных минорных релиза

Из новинок декларируется:

- более высокая производительность
- более гранулированная система реактивности с рунами
- более выразительный синтаксис шаблонов с фрагментами (snippets) и атрибутами событий
- встроенная поддержка TypeScript
- обратная совместимость с предыдущим синтаксисом

#svelte

Пару недель назад в интернете и Твиттере прошла ярая дискуссия по поводу Web Components, в которой принял участие и Evan You.

С моей точки зрения, веб компоненты являются неким ориентиром, стандартом на которые должны/могут ориентироваться фронтенд фреймворки и разработчики на них. Он дает две ключевые вещи - декомпозицию системы на более мелкие части, и инкапсуляцию HTML, JS и CSS в одном компоненте. Vue взял эти принципы у него, и, наверное, из всех фреймворков ближе всего идеологически к веб компонентам.

Но этот стандарт не может и не сможет заменить фронтенд фреймворки и даже приблизиться к ним в плане удобства и функционала. Да, на Web Components можно прекрасно писать большие приложения, но ему "не хватает" трех вещей, которыми избаловали современные фреймворки своих пользователей - связывания переменных шаблона и скрипта, директив в HTML и реактивности данных в JS.

И вряд ли они когда-то появятся, потому что любая их реализация будет частным случаем и будет означать, что это уже не просто HTML, и не просто JS. А такого быть не должно в W3C мире, потому что в его спецификациях стандарты, которым десятки лет, и которые должны просуществовать еще десятки лет.

#webcomponents

В 2024 году в CSS завезли типизацию переменных

Нетипизированное CSS property:

:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}

Типизированное CSS property

@property --background-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}

Через JS

window.CSS.registerProperty({
  name: "--background-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "blue",
});

Типы (syntax): <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, или список типов данных и значений ключевых слов.

Поддержка в браузерах уже полная

———

P.S. Типизация нужна, если это свойство используется в transition

Пример 1

Пример 2

#css

Недавно Эван сказал, что Vue близок к тому, чтобы быть "feature complete" (функционально полным).

Абсолютно согласен.

Гранит стабильности в безумстве появляющихся каждый день хайпожорских фронтенд перверсий.

#evanyou #vuejs