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

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

#antfu #icons #optimization

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

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

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

#ai #i18n #article

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

#minin

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

Мудрый ход

#voidzero

Мы были разработчиками и создавали инструмент, который позволил бы нам работать так, как мы мечтали. Наш проект был единственным, который разработчики создавали для разработчиков. Без PM’ов, бухгалтеров или CEO, пытающихся оптимизировать продукт для получения прибыли, а не для удобства инженеров.

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

Интересная историческая ретроспектива o создании Git - родителя GitHub и Open Source

И еще одна

Создатель Git тот же, что и Linux - Линус Торвальдс

Git Линус делал как побочный продукт, а Linux - чтобы тот работал на домашних компьютерах пользователей, но всё пошло не так...

#git #linux

Новые 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

Если у вас в проекте есть данные в json файлах, то иногда удобней работать с json5 (+комментарии и переносы строк, как минимум)

Для этого надо:

1) Поставить Vite плагин vite-plugin-json5
2) Поставить расширение json5 для VS Code для подсветки синтаксиса
3) Чтобы не ругался TypeScript, прописать в index.d.ts:

declare module "*.json5" {
  const value: any;
  export default value;
}

Стало намного удобней.

Бандл не меняется.

#json #tip #dx

В CSS есть scroll-driven animations, которые позволяют делать сложные красивые анимации [почти] без JS

Демо

Документация

#css #animation

Нашел интересный сервис - https://assayo.online/

По логам GIT репозитория дает разную статистику, в том числе местоположение его разработчиков

Определяет это по времени коммитов, разным языковым символам, популярным именам в стране и др.

Мои координаты точно нашел.

#git