Развенчиваю мифы о веб компонентах:

Веб компонент — это нативная альтернатива react/vue/svelte и т. п.
Я понимаю, откуда этот миф, вы могли так подумать, потому что у нас везде компонент прибит гвоздями к своему фреймворку. Но веб компоненты - это не фреймворк и даже не библиотека, это браузерный API. Действительно, есть фреймворк поверх этого API - lit (https://lit.dev/).
(Хороший он или плохой, не тема этого поста), есть и другие фреймворки, которые могут использовать API веб компонентов. Но сам по себе он ни в коем случае не фреймворк, и не решает проблем фреймворка, и сопоставлять его с существующими фреймворками мало смысла.

Задача веб компонента уменьшить размер бандла и / или производительность фреймворков.
Такие цели действительно были заявлены в спичах продвигающих веб компоненты, но мы ещё не здесь, это цель - на далёкое будущее, когда кристаллизуется некоторая кодовая база, основа, которая одинакова в каждом фреймворке для работы с DOM API. Что-то, что пишут снова и снова для достижения того же результата. Но пока её не видно. По факту фреймворкам всё ещё удобнее работать с домом императивно, каждый из них имеет свой уникальный путь, и API вэб компонентов им попросту неинтересен (с позиции автора фреймворка). Однако этот API часто поддерживают для профита конечного пользователя, о чем мы поговорим дальше.

Веб компонент бесполезен?
Напротив, это очень полезный API, хотя нужный он не каждому пользователю. Чаще веб приложение генерирует всё DOM дерево от корня и расширяется библиотеками, написанным специально под него.
Это, безусловно, ограничивает полезность новых фреймворков, без кодовой базы готовых компонентов под них. Эта проблема также может быть решена веб компонентами, но это проблема уровня js тусовки, а мы с вами заглянем ещё глубже, на уровень вэба.

В чём идея API веб компонента как такового?

Веб компонент API позволяет нам расширять возможности html

Давайте представим, что нам нужен простой элемент <switch-toggle /> (результат скрещивания радиокнопки и чекбокса). В мобилке такие элементы повсеместно, а в html такого input-a нет. Но, благодаря API веб компонента мы легко можем это поправить. И причём неважно в каком фреймворке он будет использован, в jsx или vue шаблоне, может, php? Да хоть в mol, назовите любой, всё в вебе, в конце концов умеет генерировать html, а наш веб компонент позволяет в него встроиться! В этом суть веб компонента.

Из понимания этого момента легко выясняется, где этот API применять. Можно даже заполифилить html элементы, которые ещё не завезли, и тогда вам в будущем останется только удалить код полифила (и убрать префикс у тэгов)

Бесконечные возможности встраивания открывают так же двери для встраивания любой дичи из маркета пользователей в ваше положение (SalesForce так и делают), или вовсе создавать реестры универсальных компонентов, вкладывать react в vue, и наоборот, и так далее (можно, не значит нужно!))

Да, использование этого API потребует от вас дополнительных усилий, обертки добавят веса, а коммуникация между компонентами "деградирует" до нативного браузерного API, который мы так старательно избегаем оборачивая ее в фреймворк.

Но иногда, простой и максимально нативный браузерный API - это именно то, что нужно вам и вашему пользователю.

Разработка в 2024ом.
Пишу название функции - аишка предлагает реализацию.
"Вроде правильно, но напишу-ка я тест" - подумал я, и начал писать тест - аишка его дописала.
Запустил тест - он упал - "АГА" подумал я, и пошел исправлять код функции - аишка предложила исправление согласно упавшему тесту (совпадение?)

Странное ощущение, вроде и круто а вроде и даже не комфортно как-то, как будто слова не дают сказать

В чате кинули видео в котором Линус высказывает надежды на то что Valve спасет desktop linux.

Дополню его слова - Valve - чуть ли не единственная крупная компания, которой на коммерческой основе интересен Linux за пределами серверов и IoT.

Не без помощи Steam Deck были исправлены долгоиграющие баги со скейлингом, компиляцией шейдеров, внесены фиксы в Vulkan API и систему энергосбережения.

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

В конце концов стали появляться новые игры сразу с учётом Linux, что подняло приоритет поддержки Linux у производителей видеокарт и драйверов. Это, в свою очередь, явило нам Linux-ноутбуки с видеокартами на борту (они были и до этого, но выбор был сильно меньше, а опыт их использования - значительно хуже). Lenovo Legion, например, уже заявляют о поддержке Linux-гейминга из коробки и своё обещание выполняют (имел возможность убедиться лично). Linux гейминг становится модным, это привлекает новых пользователей в экосистему, популяризует ее среди молодежи.

Так что да, у Valve есть мотивация, ресурсы, и влияние чтобы двигать пользовательский опыт настольного Linux, и спасти его, и Линус не спроста возложил на них свои надежды.

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

Пятничная байка:
Один айтишник в Америке зарегистрировал свою машину под кастомным номером null.
Он рассчитывал что когда ему автоматические системы будут выписывать штраф, они подумают что номер не найден в базе и штраф ему не выпишется

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

Открываю гугл ассистент чтобы "зашазамить" песенку, а мне говорят - мы вас редиректнем на Gemini, он пришел на замену, лучше круче и т.д.
Соглашаюсь, спрашиваю Gemini - что играет? Ответ убил: спросите у google assistant

Мне очень интересно, что там в Гугле происходит? Все что касается их попыток внедрения AI в андроид очень очень плохо.
Поспешили и людей насмешили, получается.

Вы наверное слышали что OpenAI запилили свой поисковик пару дней назад. И уже вижу отзывы про-то что гугл ему проигрывает. Маленькие компании разбирают бизнес гиганта на кусочки.

Размышляя об этом я пришел к мыслям о том, что будет, если гугл не вытянет конкуренции в сфере доступа к информации. Станет ли гугл "злее", станет ли все оставшееся делать платным и завинчивать гайки вместо открытости, или наоборот, смирится и сделает пивот куда-то в сторону, например в хардварную часть.

А вы знали что в Firefox и Zen (типа Arc, но на базе лисы) есть экспериментальная фича - спросить у AI?

Включение этой фичи добавляет иконку рядом с выделенным текстом (опционально) и пункт в контекстное меню - "спросить у AI".
По умолчанию там уже есть список из того что можно спросить - упростить текст, сделать выжимку, наоборот - объяснить подробнее, и квиз по тексту.

Интересно что никакие токены создавать и вписывать туда не нужно - диалог с чатом открывается в сайд панели и, так как технически это просто еще одна табка, авторизация произойдет вашими куками из браузера, оставшимися с прошлого логина. Нужно выбрать только провайдера.

Включается в настройках, на закладке Firefox Labs -> AI chatbot

В качестве провайдера можно выбрать так же localhost, для этого надо в about:config переключить флаг browser.ml.chat.hideLocalhost в false

Чтобы добавить свои промпты, там же, в about:config создаем новый параметр с ключем browser.ml.chat.prompts.a где последнюю a можете заменить на любую строку (не используйте цифры, они для дефолтных промптов). В качестве значения укажите тип String и запишите туда json следующего вида:

{
  "label": "Название пункта меню",
  "value": "Текст запроса к чат боту"
}

Название страницы и выделенный текст будут идти префиксом к промпту, но так же доступны в виде переменных %tabTitle% и %selection|12000% где 12000 - ограничение на количество символов
#firefox #ai

Идеи высказанные в JS0/JSSugar кажется были услышаны.

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

Если это легко решается в юзерленде - это стараются там и оставить. Но не отмахиваясь а реализуя их в отдельной либе под названием signal-utils. Такой вот локальный SugarJs.

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

Я таки перешел на локальную аишку для автокомлита дома в vscode.
Вот что я узнал в процессе:

🔸 1. Плагин для IDE / Специальная IDE
Для того чтобы подключить локальную аишку в vscode вам понадобится плагин который будет генерировать запросы для модели и показывать ее предложения в коде. я выбрал Continue как самое универсальное решение.

🔸 2. Поднять AI сервер
Вам понадобится программа - AI сервер (название сам придумал) которая скачает, запустит модель, поможет ее настроить, поднимет локальный сервер для общения с аишкой по http.
Среди них Ollama, LM Studio, openrouter

🔸 3. Выбрать модель.
Брать лучше модели заточенные под кодинг, такие как OpenCoder, Cline, QwenCoder (накидайте в комментариях если знаете еще) - выбрать и скачать можно будет прямо в интерфейсе вашего AI сервера.

У одной и той же модели есть масса вариантов, давайте разберемся чем они отличаются.

🔹 0.5b / 1.5b / 8b и другие цифры с маленькой b

Это "размер" модели, чем он больше тем тяжелее для вашего пк будет генерировать ответ с ее помощью, но и ответ может быть качественней. Для автокомплита есть смысл брать до 3b

🔹 Q8 / Q4 и другие цифры с большой Q

Это уровень квантования, чем он меньше, тем меньше моделька потребляет памяти, и тем хуже ответ. Если у вас 32 GB памяти или больше то берите Q8, иначе Q4

Чтобы примерно понять как соотносятся b и Q, представьте что мы говорим о кино.
b - это бюджет фильма. Чем он выше тем лучше актерский состав, спецэффекты, костюмы, музыкальное сопровождение и тп.
Q - это качество в котором вы это кино смотрите - Q8 это как 1440p, а Q4 это как 720p. На суть фильма не влияет

🔹Instruct / Base.

Instruct - Это специально проинструктированная и подтюненная аишка под свою задачу (в нашем случае - кодинг)

Base - Это базовая модель, используется как промежуточная для дообучения

🔹GGUF / GPTQ / AWQ - это метод квантования

- GGUF - "Классика", ваш выбор по умолчанию - из плюсов совместимость и стабильность, из минусов - медленная (в сравнении с теми что идут дальше). Может запускаться как на GPU так и на CPU

- GPTQ - Запускается только на GPU, и только на Nvidia, быстрая, но в жертву приносится точность. Видюшку желательно иметь с 8GB+ памятью

- AWQ - И быстрая и точная, но только для самых свеженьких Nvidia

Если не указано ничего - это почти наверняка GGUF.

🔹 Размер контекста (K). Он может быть указан как K с числом, так и сокращением K_M (Medium) или K_S (Small)

малое (K_S) это 2-4K
среднее (K_M) соотвствует 8-16K

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

1000 токенов примерно соответствует 750 словам на английском языке и 500-600 на русском

Поковырялся с настройкой форматирования чисел в приложении.
Intl работает как магия, и в процессе я чучуть капнул а откуда оно берет как что должно быть отформатировано.

Так вот:

1. В качестве локали принимается строка, состоящая из латинских букв или цифр объединенных через дефис или "default".
Правила там черт ногу сломит, и оно может выглядеть даже как de-DE-u-co-phonebk, но чаще всего это будет выглядеть как вот такая вот пара из языка и страны:
en-US - американский английский
en-GB - британский английский
ru-BY - белорусский русский
Нувыпонели, тут все просто. Обязательна только первые две-три буквы до дефиса - т.е. язык, Остальное опционально, но регион все же стоит учитывать, разница бывает существенная.
Язык надо брать из стандарта ISO 639-2 или ISO 639-1 а страну из ISO 3166 (да, цифрами тоже можно)

2. Влияет это не только на форматирование, но даже на то как будут выглядеть ваши цифры (это тоже цифры: ๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙), и даже летосчисление (т.е. какой календарь будет использован)

3. Но где лежат все эти конфиги для каждой локали и страны? В специальном реестре The Unicode Common Locale Data Repository (CLDR) который есть на гитхабе в виде джейсонок на ~650 MB (32 из них про форматирование чисел)

4. Intl умеет форматировать отрицательные числа валют в формате "accounting". Это когда вместо знака минус число просто оборачивается в скобки.

Еще полезные ссылки:

Посмотреть а че там вообще в этом формате который вас интересует в виде таблички
https://www.localeplanet.com/icu/ru-BY/index.html

Посмотреть в каких локалях какие языки используют, и сколько человек
https://www.unicode.org/cldr/charts/46/supplemental/territory_language_information.html

В vscode завезли прикольную фичу, называется Extension Bisect.

Сценарий использования такой - случился у вас какой-то баг, жмете кнопочку с вышеупомянутым названием (находится под тремя точками в панели расширений) после чего редактор вырубает все расширения оставляя вас в том же контексте и просит попробовать воспроизвести баг.

В углу редактора у вас две кнопки - "Могу воспроизвести" и "Не могу воспроизвести".
Нажимаете "не могу" - vscode включает половину расширений и снова спрашивает.
Т.е. это бинарный поиск глючного расширения встроенный в вскод.

В конце вы получите отключение каких расширений помогло, и форму для заполнения issue,
по задумке он сам запостит в репозиторий расширения, а так же прикрепит всю инфу о вашем окружении и лог эксперимента.

Правда вот эта вот форма в конце у меня почему-то не работает, нажатие кнопки отправления отчета просто ничего не делает.
Ну, по крайней мере нашел что так сильно грузило мне редактор

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

<code language="json"></code>

Апдейт по текущему состоянию порпосала сигналов:
Stage 1 - TC39 согласен что что-то такое было бы интересно иметь, некоторые делегаты очень хотят чтобы это было в языке, однако нет согласия в том какая должна быть апи.
Сейчас полифил пробуют в реальных приложениях, и просят внедрять его поддержку в фреймворки (к сожалению пока это сделал только lit в новом релизе). Это то чем мы можем помочь.

Оригинал

Нетфликс поделился своей саксес стори использования css containers query. В классической медиаквери мы указываем ширину/высоту вьюпорта, в контейнерной квери это размер дива).

Я удивлен что там нет ни слова о двух важных моментах которые надо знать:

1. Одна из самых тяжёлых (по нагрузке на ПК) фича css. А если использовать js полифил, это вовсе катастрофа. Если у вас пяток виджетов работает таким образом - все нормально. Если у вас весь UI на этом построен страничка заметно лагает при ресайзе окна. И это одна из причин почему эти квери так долго не желали тащить в браузер - многие опасались того что если это начнет использоваться массово, общий перф вэба сильно пострадает.

2. Когда таких элементов много их поведение становится сложно предсказуемым. Скажем, у вас есть три компонента в ряд у каждого из которых есть компактный режим. Обычно у нас все они переключаются вместе при достижении маленького размера вьюпорта. Но не с контейнерными квери, где они будут переключаться по очереди, часть будет компактная часть нет. Это надо учитывать, нельзя делать дизайн как сейчас "компактный значит мобильный и тач с кнопками побольше", это теперь разные вещи.

Еще несколько подтверждений что в google тоже пилят свои очечи.
В проекте Astra (XR помощник от Google) упоминается некий прототип очков, а 26 Декабря alphabet запатентовала технологию напрямую с ними связанную. Кстати, на 2030 год XR рынок оценивают в 1.1 миллиард долларов

Если вы хотите вывести тип на экран, чтобы он все время был перед глазами, а не только по наведению. используйте комментарий // ^? на следующей строке, так, чтобы символ ^ указывал на интересующий вас токен

Забавно, но claude это объяснить не может

P.S. @khraks_mamtsov подсказал что можно еще писать в той же строке // =>, если ваш токен последний в ней

Забыл сказать, по умолчанию это работает только в песочнице typescript-a.
Чтобы заработало в vscode надо докинуть плагин vscode-twoslash-queries
Чтобы работало в markdown нужен еще вот этот плагин
(Для webstorm не знаю надо ли что-то ставить, напишите в комментариях если в курсе)

#ts #typescript

Если вы записывайте обучающие видосы на ютуб, в надежде там заработать то у меня для вас прекрасная новость =)
Если просто перезалить эти видео на, скажем, порнохаб, монетизация будет в 3 раза больше

Спасибо моим подписчикам, выяснилась интересная деталь: история эта выдуманная
https://t.iss.one/yashernet/5648

В Ирландии предусмотрен тюремный срок на 18 месяцев и штраф 60000$ за не устранение проблем с доступностью по стандартам EAA.
Осудить могут как директора компании, так и секретаря, менеджера и других сотрудников чья вина будет установлена.

Ну а как еще заставить их достать эти задачи из бэклога вместо того чтобы делать новые фичи!?

P.S. Я знаю что доступность это не только и не столько про aria атрибуты