Сова пишет…

Раз уж пишу про обновление документации effector, то расскажу, что сейчас сообщество активно пишет новые статьи и улучшает уже написанные!

Effector становится все более привлекательным инструментом для изучения.

Сейчас я не вкладываю много сил в документацию, так как недавно участвовал в программном комитете Podlodka React Crew #2, а также продолжаю дописывать контент для frontend.vision и активно стараюсь не выгореть.

Количество материалов по effector растет с каждым днём, я даже не успеваю вычитывать все новые статьи, поэтому активно использую некоторые AI-технологии для создания контента.

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

Вообще, это подход так называемого RAG (Retrieval-augmented generation), но вместо использования полноценного инструмента я собрал свой RAG дома на коленке используя NodeJS + SQLite запуская в CLI.

По сути, собираю уникальную пачку чанков из документации последовательным поиском, а дальше либо читаю глазами результат, либо компилирую в единый ответ через LLM.

Если интересно, расскажу как это работает подробнее

Кроме этого, я уже давненько создал Custom GPT под названием Effector Assistant, вы можете найти его в каталоге ChatGPT GPTs.

Я загрузил в него не только документацию effector, но еще и WithEase, некоторые свои статьи и рекомендации для ChatGPT.

Вот пример ответа:
https://chatgpt.com/share/67b43fa3-bfe0-8002-8b6c-cdc9b43ab351

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

Стоит начать с коллекции всей документации в виде единого файла. Передаете любую ссылку из списка ниже в ваш ChatGPT/Gemini/Grok и задаете вопросы.
Изначальная задумка отсюда:
https://scalabledeveloper.com/posts/llms-txt-with-astro/

В effector доступно несколько документов:
https://effector.dev/docs/llms.txt
https://effector.dev/docs/llms-full.txt

А также я сделал отдельно локализованные версии:
https://effector.dev/en/llms-full.txt
https://effector.dev/ru/llms-full.txt
https://effector.dev/uz/llms-full.txt
Не вся документация переведена полностью, поэтому недостающие статьи дополняются английским исходником.

Из этих файлов вычищены внутренние ссылки, ID-заголовков, а также вырезан некоторый кастомный markdown синтаксис. Это уменьшает количество токенов.

С сегодняшнего дня мой юзернейм в великой социальной сети — x.com/sergeysova

Теперь у меня есть:
- t.me/sergeysova
- github.com/sergeysova
- x.com/sergeysova

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

Удалось связаться с предыдущим владельцем юзернейма, а так как аккаунт не использовался, то пользователь поменял на другой, за что ему отдельное огромное спасибо!

effector 23.3.0

- Улучшены сообщения об ошибках для skipVoid и store without sid: теперь по стектрейсу видно в каком сторе произошло исключение, что помогает быстрее найти и исправить его поведение
- Добавлена поддержка произвольного количества аргументов в колбэк scopeBind. Автоматически позволяет передать в reflect bind колбэки с числом аргументов больше одного
- Исправлено поведение clearNode в большом ряде ситуаций при работе с withRegion


Мы продолжаем активную работу над моделями и новым мажорным релизом. Данный минорный релиз потребовался чтобы позволить разрабатывать MVP моделей поверх 23 версии не углубляясь в эффективную реализацию. Разработка будет проходить в этом репозитории. Stay tuned!

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

Казалось бы, что может быть такого, в патчинге глобальных функций в javascript окружении?

Не так давно, сообществу удалось пропушить отмену манки-патчинга fetch командой next.js.

Но вы знали, что StrictMode патчит console.log?

Попробуйте вот этот код:

import "./styles.css";
import { useEffect, StrictMode } from "react";
import ReactDOM from "react-dom/client";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

function App() {
  useEffect(() => {
    console.info("useEffect fn called!");
  }, []);

  return <h1>Hello CodeSandbox</h1>;
}

И вы увидите, один лог "useEffect fn called!"
Но если добавить счетчик

let amount = 0;

export default function App() {
  useEffect(() => {
    console.info("useEffect fn called!", ++amount);
  }, []);

  return <h1>Hello CodeSandbox</h1>;
}

То, сразу будет заметна проблема:

useEffect fn called! 1
useEffect fn called! 2

И вы можете сказать: ну что такого, удобно же?
Но вам не кажется, что об этом можно было написать в документации?
https://react.dev/reference/react/StrictMode

А еще можно дать флаг, чтобы выключить это поведение (может и есть, но в документации нет ничего!)

Отлаживать работу сложных компонентов, когда React вставляет палки в колеса на каждом шаге, это адовое действо!

Если хочется потыкать:
https://github.com/facebook/react/blob/main/packages/shared/ConsolePatchingDev.js

Может это только у меня так?

Оказывается, да!
В более поздних 17+ версиях react это поведение откатили.
Теперь подсвечивают второй лог более бледным цветом

Да здравствует здравый смысл, раз уж у нас нет нормального фреймворка

Ну и теперь окончательно понятно что это за компания.

Я начал перенос последнего домена, когда мне разблокировали доступ на 48 часов.

Потом выяснилось, что для переноса нужно сменить контактные данные,
а подтверждение занимает 48 часов 🤡.

Спустя 48 часов аккаунт снова был заблокирован,
перенести домен я не смог, а когда написал в поддержку, мне ответили, что теперь аккаунт был закрыт навсегда.

Вот в ЭКОСИСТЕМЕ APPLE есть такое приложение как iPhone Mirroring

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

Что интересно, эта фича работала несколько недель сразу после релиза, а потом перестала.

Месяцем позже Apple выкатили апдейт для всех устройств и вроде заработало.

Сейчас я решил снова воспользоваться этой фичей: мне пришло уведомление с айфона, тыкнул, открылось iPhone Mirroring.

Но! Apple предлагает мне встать, найти айфон и разблокировать его, чтобы использовать эту фичу!

Но тогда нафига мне эта фича? Как так?

Около 3-4 месяцев назад я начал проект smartbundle, так как заметил странное противоречие: по-моему мнению 99.9% библиотек имеют один и тот же пайплайн сборки, но каждый человек каждый раз зачем-то пилит его с нуля.
Причём каждый раз изобретая свои способы решения одних и тех же проблем, что приводит к тому, что package.json в проектах превращается в священную корову, так как он собирает в себя все костыли совместимости, которые лучше не трогать, так как никто не помнит что там и зачем. И даже больше: люди просто говорят "а мы не можем решить проблему совместимости, сорян" https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/

И это чуток мне надоело: я хочу собрать все практики внутри одной тулы, чтобы не приходилось даже знать о всех костылях: пусть бандлер просто соберёт код и не будет меня волновать.

И моя гипотеза о том, что эта штука возможна, походу работает. Как я говорил: имя ему smartbundle https://github.com/XaveScor/smartbundle

И сборка приложения становится как никогда простой: вот пример переноса библиотеки на смартбандл - https://github.com/XaveScor/json-to-ast-es/commit/48d5861529e664c9b2adeb84f5d8e92398f3b997
0 конфигов. 0 доп библиотек. примерно 0 знаний о том во что должен превратиться код. Нужны только минимальные знания о современном package.json и за что отвечает строчка "exports". И всё.
После чего остаётся только перейти в директорию ./dist и опубликовать пакет.

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

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

Как определить контору пидорасов?

Во первых, выкуп домена в 4 раза дороже продления.

Во вторых, купить с креденшенами из РФ стоит на $24 доллара дешевле, чем из Армении.

Вброшу еще немного инфы

Чуваки из godaddy настолько безумны, что банят тупо всех, даже своих старых клиентов

Раньше, я всем советовал Spark Mail App.

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

Из каждой дырки торчит кнопка AI, которая открывает модалку с покупкой подписки.
Очень-очень много багов. Даже сайдбар багует так, что иной раз помогает только перезагрузка приложения или даже переустановка.

Мне очень нравилось это приложение большим количеством кастомизации, синхронизацией между девайсами, а также поддержкой кучи провайдеров.

Есть например, SuperHuman, так он только Google и Outlook поддерживает, еще и ТОЛЬКО по подписке, что кринж.

У меня 5 email'ов от разных провайдеров, мне не подходит пользоваться web-приложениями КАЖДОГО провайдера.

Apple Mail не имеет даже малую часть кастомизации Spark.

Эх, это было лучшее приложение, но его убили((
Какие альтернативы?

Всех с наступающим и наступившим!

Я участвую в программном комитете Podlodka React Crew!

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

https://docs.google.com/forms/d/e/1FAIpQLSdkD0nx4U0IEoQbVnS6_FmRVJfpbiWCYsTbLkexZShTKVscJw/viewform

Кстати, среди проголосовавших до 17:00 по МСК 26 декабря ребята разыграют билет на новый сезон!

Две игры вышли в 2024 году:
STALKER Heart of Chornobyl — 153GB
Sons of the Forest — 9GB

Графоний и оптимизации сами сравнить можете.
Сталкер на днях получил крупный патч размером 120GB.

Раз уж и сюда засунули Wrapped 2024

Что у вас?

Ну действительно NEW MERGE EXPERIENCE ✨

В nodejs завозят поддержку SQLite

https://nodejs.org/api/sqlite.html

Готовьте ваши крипто кошельки
За ними пришел Гугл

https://blog.google/technology/research/google-willow-quantum-chip/

difftastic

Это тулза для сравнения исходников через AST-деревья, вместо построчного и посимвольного.

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

Да, в git есть разные режимы сравнения, как и в VSCode/WebStorm, но они также не учитывают семантику языка.
difftastic исправляет этот недочет.
Его также можно настроить для использования по умолчанию.

Пока что главный минус — отсутствие плагина для VSCode/WebStorm. Но как минимум стоит попробовать его, чтобы понять разницу.

brew install difftastic

# ~/.gitconfig
[alias]
    dl = -c diff.external=difft log -p --ext-diff
    ds = -c diff.external=difft show --ext-diff
    dft = -c diff.external=difft diff
[difftool]
    prompt = false
[difftool "difftastic"]
    cmd = difft "$MERGED" "$LOCAL" "abcdef1" "100644" "$REMOTE" "abcdef2" "100644"
[pager]
    difftool = true
[diff]
    external = difft
    tool = difftastic

OpenAI зафигачили новую нишу Pro клиентов за $200 в месяц

Как скоро самые мощные модели у конкурентов будут стоить >$100?

Давно не писал о том, что я делаю когда ко мне обращаются за помощью на личных консультациях.

С 2022 года провел 60+ часов консультаций, не очень много, по разным причинам, но это всегда интересное времяпровождение для меня.

Из интересного по моим логам:

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

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

React, Effector, FSD, Atomic-Router, Next.js
Конечно же, в основном приходят с вопросами по моему основному стеку. Как реализовать сложную задумку, какой архитектурный подход может лучше сработать, какие практики стоит рассмотреть, да и вообще взгляд на решение со стороны.
Я не часто использую Next.js, но приходится в нем разбираться, иногда запрашивая у клиента время на исследование.

Менторинг, личное развитие, управление временем.
Кроме технических штук, за 12+ лет работы в коммерции, пришлось перепробовать кучу разных практик по управлению своим временем, а также временем команды. Это тоже опыт, который можно из меня вытащить на консультациях.
Построить трек из списка навыков, необходимых современному разработчику, проверить собственные скиллы (я регулярно нанимаю людей в разные компании, могу поднатаскать), найти слабые места и придумать как их прокачать.

Может у вас есть задачи для меня, которые я еще не делал?
Или что-то из списка выше откликается?

В любом случае, приходите @sovasergey

Astro 5 + Vite 6

Из самого интересного:

Content Layer
Позволяет динамически грузить данные для страничек из любых источников. Например из notion или вообще через fetch() откуда угодно. Что круто, так это кеширование.
Когда я трогал beta версию, можно было руками перезапустить выгрузку данных, а потом быстро рендерить уже загруженную инфу.

Server Islands
Пререндерим всё статическое в .html, а динамику из бд можем грузить и рендерить на сервере. Причем только для небольших частей интерфейса.
Нормально реализованные идеи Next.js, без привязки к React!

astro:env
Ну и самая ожидаемая мной фича — безопасное извлечение переменных и секретов.
Описываем все переменные в виде zod-схемы, а затем импортируем из astro:env/server или astro:env/client.
Секреты доступны только на сервере из astro:env/server, а вот переменные окружения доступны в любом окружении при импорте из astro:env/client.

Очень рекомендую почитать релиз ноутс и официальный гайд по Env vars.

SVG Components
В экспериментальном режиме Astro поддерживает импорт SVG как компонентов Astro.
Но не спешите грустить, есть разные варианты взаимодействия. Можно как инлайнить, так и бандлить SVG в спрайты.

React-hooks не отделяют логику от UI

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

Почему? Возьмём useEffect. Этот хук будет вызываться дважды в strict mode, потому что он связан с жизненным циклом компонента. И это не баг, а фича React, спорная конечно, но в результате, любая бизнес-логика внутри такого хука становится заложником жизненного цикла React.

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

Из-за этой привязки к React, тестирование также превращается в проблему. Приходится оборачивать тесты в условный act(), или же мокать хуки и поведение React – и всё это только потому, что бизнес-логика не отделена от компонентов.

Можно решить "по-старинке": вынести логику в обычные функции или классы, а хуки использовать только как мост между React и бизнес-логикой. Но тогда мы сталкиваемся с новой проблемой – нужно самостоятельно продумывать реактивность и управление состоянием.

Хоть может показаться, что реактивность не обязательна, современные приложения демонстрируют как раз реактивную природу. Чем меньше в коде ручного/императивного управления состоянием, тем проще код. Но это вовсе не означает, что нужно перестать писать императивный код и погрузиться в пучину декларативности или функциональности.

Используйте инструменты по назначению!

В ноябре 2021 я купил предзаказ.
Атмосфера крайне приятная, персонажей озвучили, прокачали удобство.

Легенда. И баги на старте прям как в первой трилогии.

Сначала люди в интернетах пишут, что Ruby умер и вообще только легаси на нем.

А потом вижу проект этого года на Ruby on Rails и всё еще радуюсь, как приятно на нем было писать.

https://github.com/maybe-finance/maybe

Открыты две вакансии в BigMotion.ai
- Full-stack developer (middle)
- Backend Developer (middle/senior)

О нас
BigMotion.ai — проект в сфере AI-cоздания видео.

Наши продукты:
- Auto Short Generator
- AI Actors

Недавно к команде присоединился Head of UA с опытом развития сервиса от 0 до $5M ARR.

Обязанности
- Проектирование и разработка микросервисов на AWS Lambda
- Работа с высоконагрузочными системами (тысячи пользователей)
- Разработка новых продуктов (wrappers: text2img, img2video).
- Участие в развитии существующих продуктов компании

Технический стек
- AWS Lambda
- TypeScript
- Node.js
- Serverless
- Supabase
- Cloudflare
- Effector
- Монорепозиторий

Условия
Формат: Full-time или part-time с переходом на full-time
Зарплата: $2,500-4,500/месяц

Требования
- Опыт разработки на TypeScript/Node.js
- Знание AWS Lambda и serverless архитектуры
- Опыт работы с высоконагрузочными системами
- Умение проектировать микросервисную архитектуру

Если вас заинтересовало, делитесь своими резюме/ссылками на Linkedin с @andykozik

Что меня смущает в Solid, так это излишняя непрозрачность.

Пример с classList лишь один из многих. Чтобы прочитать значение сигнала, надо вызывать как функцию. К тому же нужно юзать control-flow операторы.

Очень невнятно выглядят ошибки иной раз, но…

Stunning Absolutely Ideal Framework на эффекторе должен поддерживать react, svelte и solid из коробки, #ящитаю

Слушайте, если искать замену React, так это новый Svelte

https://svelte.dev/blog/svelte-5-is-alive

Решение оказалось настолько тупым в своей прямолинейности, что мне не сразу пришло в голову:

rm -rf pnpm-lock.yaml node_modules
pnpm install

Я в восторге!

P.S.
Продолжаю смотреть ViteConf, к тому же там еще NextConf подъехал.
Пока что очень мало интересных докладов, которые не пересказывают доку или блог.

Сейчас потратил 8+ часов на sandpack в комплекте с codemirror, пробовал monaco-editor и это всё в astro, в браузерном окружении.
Бьюсь уже которую неделю, но codemirror отказывается подсвечивать синтаксис кода. Просто cm-line и никаких токенов, просто строка и ничего больше.

Причем, codemirror в обычном Vite SPA приложении тоже не завелся. Какой же костыльный редактор. Я даже его без оберток подключал, нифига не работает. Как его вообще хоть кому-то удается завести?

Попробовал также аналог от stackblitz TutorialKit(WebContainers API), но там нет готовых реюзабельных компонентов.
Не хочу вручную верстать Editor, Terminal, Navigator и FileTree.

Может есть хорошие embed-песочницы с поддержкой npm-пакетов?

Снова настолько же стабильно как прошлый раз с AppRouter?

А его уже стабилизировали?

Интересно, что

Кроме этого, Бен показал как использовать эмбеддинги, для реализации поиска по смыслу, а не по совпадению букв, тоже local-first.

Правда, по ощущением это было хайпа ради, на что указывает ироничная ачивка на скриншоте.

Меня этот момент позабавил, потому что дома тоже есть такой "кек":
✅ Сережа упомянул AI
день прожит не зря))

P.S.
Вместо React-библиотек, Бен использует нативный <dialog> подключаясь к его событиям.

А еще, при использовании настоящих когнитивных моделей, в Хроме можно будет не качать 30МБ+ для работы поиска, а использовать встроенный AI.
Хоть и Gemini Nano, но уже хорошо

Всем привет!
Потихоньку смотрю доклады с ViteConf, там 12 часов контента, не могу так много залпом.

The Future of the Web is Local First • Ben Holmes

Бен показал как используя SQLite в браузере, вместе с Drizzle и Astro делать local-first веб-приложения.

Пакет sqlocal — это по сути билд SQLite3 под WASM, позволяет выполнять запросы к БД в памяти браузера.
Удобно, что есть адаптер для Drizzle, а значит ORM можно использовать в браузере.

Хранение .sqlite файла в системе пользователя сделано через StorageManager .getDirectory(). Юзер разрешает доступ приложению в определенную директорию на своем диске, откуда код может читать и писать.

const root = await navigator.storage.getDirectory();
const handle = await root.getFileHandle("db.sqlite");
const writable = await handle.createWritable();

Поддержка есть во всех зеленых браузерах уже больше года.

Создавать красивые штуки Vercel конечно умеет

Пока я смотрю записи докладов ViteConf, записался на Next.js Conf.

https://nextjs.org/conf

В ближайшую пятницу 4 октября будет ViteConf.
Я буду слушать и всем советую взять онлайн билет.

Уверен, что покажут что-то интересное, особенно, если вы не следите за beta версиями и обсуждениями в репозиториях Vite.

Открыл картинки гугл…

Google полностью ушел из качественного UX?

Cloudflare присоединяется к OpenNext
Astro умеет в SSR с серверными экшенами

В чем смысл Next.js?
Все равно, сложные приложения на нем делать больно

Тем временем, Winamp открыл исходники своей легендарной версии под Windows.

Написано на плюсах, можно скомпилить себе или портировать на Rust

https://github.com/WinampDesktop/winamp

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

https://t.me/crossjoin/361

Давайте повангуем в комментариях: с какой версии Go приблизится к Rust, по сложности синтаксиса и количеству фич?

Я думаю, где-то к 1.70, Go уже не будет "простым" языком, а чисто типа Rust, только с GC и компилится побыстрее.

Поэтому прямо сегодня выбираю для себя язык сегодняшнего и будущего дня — Zig(нет).

Github теперь отображает префиксы, вроде test: или feature: в названии коммита в виде лейблов!

У кого есть инвайт в Deadlock?

Я обычно пользуюсь tig, но тут по советам из комментов решил попробовать lazygit.

Открываю софтину, а там you rock

🗿

Вот непонятно, есть ли смысл отказываться от Rectangle app.

К слову, про новую «думающую» модель

Что на счет новых моделей? Тестируем?

Кто-то уже пользовался GitHub Models?

Рассматривал логи с лендинга frontend.vision и заметил странный Yandex Browser

А также скрипт, которого в коде лендинга нет

Ждем?