Type-fest - это как “lodash”, но для типов.
Если вы разрабатываете продукты на TS - рано или поздно сталкиваетесь с вопросом: “почему этого типа нет из коробки?”
Дальше стандартный путь: идёте к GPT/гуглите, собираете свой “утилитарный” тип, радуетесь 5 минут… и забываете, где его сохранили.
Так вот - всё это уже сделали за вас. Есть пакет type-fest, где собрано вообще всё, что когда-либо нужно было в реальных проектах.
Мой топ SetRequired - превращает опциональные поля в обязательные (или наоборот SetOptional)
Советую пробежаться глазами и найти то, чему вы сами можете найти применение. Ну а если не хватает фантазии - все просто, посмотрите как другие люди его применяют
@devallim
#dx
Если вы разрабатываете продукты на TS - рано или поздно сталкиваетесь с вопросом: “почему этого типа нет из коробки?”
Дальше стандартный путь: идёте к GPT/гуглите, собираете свой “утилитарный” тип, радуетесь 5 минут… и забываете, где его сохранили.
Так вот - всё это уже сделали за вас. Есть пакет type-fest, где собрано вообще всё, что когда-либо нужно было в реальных проектах.
Мой топ SetRequired - превращает опциональные поля в обязательные (или наоборот SetOptional)
Советую пробежаться глазами и найти то, чему вы сами можете найти применение. Ну а если не хватает фантазии - все просто, посмотрите как другие люди его применяют
@devallim
#dx
👍3👀1
Деплой пет-проектов
Для пет-проектов я давно использую dokploy - простая, но мощная штука для деплоя без боли (о ней вообще можно отдельный гайд писать).
Недавно захотел чуть оптимизировать рутину: под новый проект - агент для нейрокомментинга (собирает посты из каналов, генерит комментарии и шлет мне) - опять пришлось поднимать инфру, настраивать деплой, переменные и прочее.
Решил сделать удобнее:
- создать Cursor команду (о них уже упоминал)
- и использовать Dokploy API через MCP, чтобы одна команда запускала всё - создание проекта, деплой, конфиги.
Но оказалось что официальный mcp у Dokploy живёт своей жизнью - полусырой, почти не поддерживается (успел даже завести пару issues). Стало очевидно, что нужно создавать свой.
Eсли тоже деплоите пет-проекты через dokploy - зову пробовать
👉 github.com/tacticlaunch/dokploy-mcp
P.S. Были еще чуть шире идеи, но время ограничено на эксперименты:
- Сделать репу со всеми командами (в будущем скорее всего создам) и через промпт шаринг передать вам промпт, который бы скачал эту команду в проект
- Сделать хитрую систему поддержки пакета в духе настоящеего e/acc и меня очень впечатляет эта история:
- Настроить change detection на json swagger’а, чтобы мониторились изменения в dokploy api
- Слать запрос на вебхук (допустим в zappier), который бы создавал issue в репе моего dokploy-mcp и добавлял коммент с упоминанием cursor (их агент может в репах работать).
- Собственно агент бы создавал PR, который оставалось бы только проревьювить.
@devallim
#dx
Для пет-проектов я давно использую dokploy - простая, но мощная штука для деплоя без боли (о ней вообще можно отдельный гайд писать).
Недавно захотел чуть оптимизировать рутину: под новый проект - агент для нейрокомментинга (собирает посты из каналов, генерит комментарии и шлет мне) - опять пришлось поднимать инфру, настраивать деплой, переменные и прочее.
Решил сделать удобнее:
- создать Cursor команду (о них уже упоминал)
- и использовать Dokploy API через MCP, чтобы одна команда запускала всё - создание проекта, деплой, конфиги.
Но оказалось что официальный mcp у Dokploy живёт своей жизнью - полусырой, почти не поддерживается (успел даже завести пару issues). Стало очевидно, что нужно создавать свой.
Eсли тоже деплоите пет-проекты через dokploy - зову пробовать
👉 github.com/tacticlaunch/dokploy-mcp
- Сделать репу со всеми командами (в будущем скорее всего создам) и через промпт шаринг передать вам промпт, который бы скачал эту команду в проект
- Сделать хитрую систему поддержки пакета в духе настоящеего e/acc и меня очень впечатляет эта история:
- Настроить change detection на json swagger’а, чтобы мониторились изменения в dokploy api
- Слать запрос на вебхук (допустим в zappier), который бы создавал issue в репе моего dokploy-mcp и добавлял коммент с упоминанием cursor (их агент может в репах работать).
- Собственно агент бы создавал PR, который оставалось бы только проревьювить.
@devallim
#dx
❤1🔥1
Выделил из проекта пакет - react-portalslots
Если разберётесь - точно впечатлит. В OSS нет таких элегантных альтернатив.
- С его помощью очень удобно делать разные Layout‑штуки, не ломая логику компонентов.
- Можно локализовать рендеринг разных частей UI без глобального состояния (colocation + слоты), как описано в статье “avoid global state, colocate UI” от участницы команды radix.
- Это решает одну из самых раздражающих вещей, когда приходится писать что-то вроде:
- то есть передавать компоненты “сверху”, даже если логически они ближе к контексту внутри. Здесь же можно разместить логику прямо в нужных местах, и всё автоматом “подхватится” в layout.
👉 github.com/beautyfree/react-portalslots
@devallim
#dx
Если разберётесь - точно впечатлит. В OSS нет таких элегантных альтернатив.
- С его помощью очень удобно делать разные Layout‑штуки, не ломая логику компонентов.
- Можно локализовать рендеринг разных частей UI без глобального состояния (colocation + слоты), как описано в статье “avoid global state, colocate UI” от участницы команды radix.
- Это решает одну из самых раздражающих вещей, когда приходится писать что-то вроде:
<Layout
header={<button>Save</button>}
sidebar={<div>Navigation</div>}
>
<SomeToolbar />
</Layout>
- то есть передавать компоненты “сверху”, даже если логически они ближе к контексту внутри. Здесь же можно разместить логику прямо в нужных местах, и всё автоматом “подхватится” в layout.
👉 github.com/beautyfree/react-portalslots
@devallim
#dx
🔥3
Все-таки кросспостинг меня догнал, но из-за npm-пакетов (хотел пару месяцев назад сделать такой сервис)
Короче, с этими пакетами ситуация простая: делаю, чтобы переиспользовать в других проектах, а бонус - ещё и поделиться с сообществом. И было бы, конечно, здорово, чтобы сообщество тоже использовало, лайкало и т.д, но заниматься SEO пакетов не лежит в области профита, поэтому задача вторична.
Ну я и подумал, что было бы классно, допустим, писать статью в репозитории(а то ещё интерфейс и бэк кодить, хостить - это долго и отнимает ресурсы) в md-формате, и она по каким-нибудь площадкам кросспостилась. И реально нашёл решение на GitHub, которое кто-то навайбил 3 месяца назад и которое можно как CLI запустить в GitHub Actions.
Но, конечно же, оно не работало из коробки, т.к. автор использует type: module, а импорты без “.js”, и вообще пакет оказался не опубликованным, с косяками в документации. Я поправил, опубликовал и настроил репу с названием blog (на вырост).
Теперь могу создавать md-файлики, которые будут поститься в dev.to и Hashnode.
Делюсь тем, что уже автоматически опубликовалось:
- раз
- два
Ну а перенять опыт можно, подсмотрев, как организован репозиторий:
👉 github.com/beautyfree/blog
@devallim
#buildinpublic #dx
Короче, с этими пакетами ситуация простая: делаю, чтобы переиспользовать в других проектах, а бонус - ещё и поделиться с сообществом. И было бы, конечно, здорово, чтобы сообщество тоже использовало, лайкало и т.д, но заниматься SEO пакетов не лежит в области профита, поэтому задача вторична.
Ну я и подумал, что было бы классно, допустим, писать статью в репозитории
Но, конечно же, оно не работало из коробки, т.к. автор использует type: module, а импорты без “.js”, и вообще пакет оказался не опубликованным, с косяками в документации. Я поправил, опубликовал и настроил репу с названием blog (на вырост).
Теперь могу создавать md-файлики, которые будут поститься в dev.to и Hashnode.
Делюсь тем, что уже автоматически опубликовалось:
- раз
- два
Ну а перенять опыт можно, подсмотрев, как организован репозиторий:
👉 github.com/beautyfree/blog
@devallim
#buildinpublic #dx
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Не понимаю почему до сих пор не появились редакторы в которых одно из представлений кодовой базы это полотно
Иногда код настолько большой с большим количеством зависимостей (движок анимаций, например), что его не охватить с одного взгляда и в этом случае канвас с перелинкованными методами и зависимостями может быть единственным способом быстро понять точки входа (а может и в целом работать над проектом).
А пока нашел такой экстеншен codecanvas.app
@devallim
#dx
Иногда код настолько большой с большим количеством зависимостей (движок анимаций, например), что его не охватить с одного взгляда и в этом случае канвас с перелинкованными методами и зависимостями может быть единственным способом быстро понять точки входа (а может и в целом работать над проектом).
А пока нашел такой экстеншен codecanvas.app
@devallim
#dx
🔥3
Сайт со старыми играми портированными в браузер
https://dos.zone/
Там есть герои, дум, gta 1,2, фэллаут 1, дюна и много чего еще.
В том числе и мультиплеерные!
(важно заметить что на главном экране не все игры - советую пробежаться по сайдбару)
А в этом свежем видео рассказ о том как это все портируется https://www.youtube.com/watch?v=e63OrolJzNI
@devallim
https://dos.zone/
Там есть герои, дум, gta 1,2, фэллаут 1, дюна и много чего еще.
В том числе и мультиплеерные!
(важно заметить что на главном экране не все игры - советую пробежаться по сайдбару)
А в этом свежем видео рассказ о том как это все портируется https://www.youtube.com/watch?v=e63OrolJzNI
@devallim
DOS Zone
DOS Zone | DOS games in browser
Ultimate collection of free dos games to play online in browser. No registration needed, no advertisment, just play!
🔥4
Хотел прийти с готовым инструментом в связке с repomix, но пока нет целесообразности этим заниматься, поэтому просто поделюсь этим классным “артефактом”.
Представим ситуацию, нужно:
- отрефакторить проект с помощью LLM,
- или “черрипикнуть” функционал из другого проекта в свой.
Для этого важно понимать зависимости нужного entrypoint’а - т.е. нужно пройтись по AST-дереву и собрать рекурсивно все импорты в файлах.
Есть ли уже решение для этого? Да, и не одно.
После серии экспериментов лучшим оказался madge - лёгкий, надёжный и хорошо ложится в пайплайн с LLM:
Отличный способ быстро построить граф зависимостей и передать его в контекст модели.
Флаг -j для результата в json (больше токенов, но потенциально улучшит понимание моделькой). И сразу положим результат в файл:
Можно пойти дальше и передать пути в include параметр repomix’а и получить промпт с содержимым файлов.
⬇️ Больше в комментах (мой промпт и важное про --ts-config флаг)
@devallim
#dx
Представим ситуацию, нужно:
- отрефакторить проект с помощью LLM,
- или “черрипикнуть” функционал из другого проекта в свой.
Для этого важно понимать зависимости нужного entrypoint’а - т.е. нужно пройтись по AST-дереву и собрать рекурсивно все импорты в файлах.
Есть ли уже решение для этого? Да, и не одно.
После серии экспериментов лучшим оказался madge - лёгкий, надёжный и хорошо ложится в пайплайн с LLM:
npx madge index.ts
Отличный способ быстро построить граф зависимостей и передать его в контекст модели.
Флаг -j для результата в json (больше токенов, но потенциально улучшит понимание моделькой). И сразу положим результат в файл:
npx madge -j index.ts > deps.json
⬇️ Больше в комментах (мой промпт и важное про --ts-config флаг)
@devallim
#dx
🔥3💯2
App Store выкатил новую веб-версию и забыли выключить source maps в проде.
В итоге весь исходный код торчал наружу и его уже аккуратно собрали на GitHub:
github.com/rxliuli/apps.apple.com
github.com/agentellisense/apps.apple.com.
P.S. Написано на Svelte
В итоге весь исходный код торчал наружу и его уже аккуратно собрали на GitHub:
github.com/agentellisense/apps.apple.com.
P.S. Написано на Svelte
В CSS появилось крайне полезное свойство - corner-shape.
Позволяет задавать нетипичные формы углов без SVG и костылей: от мягких вариаций до необычных вырезов и срезов.
Отличный инструмент для тех, кто любит экспериментировать с визуальным языком интерфейсов.
Лично меня эта новость радует тем, что теперь без боли можно делать такую форму как squircle (а точнее
Посмотреть все в живую можно здесь:
https://codepen.io/una/pen/PwNozMX
Позволяет задавать нетипичные формы углов без SVG и костылей: от мягких вариаций до необычных вырезов и срезов.
Отличный инструмент для тех, кто любит экспериментировать с визуальным языком интерфейсов.
Лично меня эта новость радует тем, что теперь без боли можно делать такую форму как squircle (а точнее
corner-shape: superellipse(1.333)), которую apple использует в своих интерфейсах.Посмотреть все в живую можно здесь:
https://codepen.io/una/pen/PwNozMX
🔥5
А помните старые времена, когда появляющийся скролл портил лэйаут?
Когда открываешь модалку - и у тебя вся страница хрясь - на десяток пикселей в сторону.
И ты такой: “Ну ок, опять ловить ширину скролла, опять пляски с паддингами”.
Так вот, всё это можно выкинуть на свалку истории.
В CSS с декабря 2024 завезли свойство
резервирует место под скролл заранее, чтобы интерфейс нигде не дёргался.
Минимально рабочий вариант:
И всё - модалки не прыгают, страницы не сдвигаются, UI ведёт себя адекватно.
Документация:
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
Когда открываешь модалку - и у тебя вся страница хрясь - на десяток пикселей в сторону.
И ты такой: “Ну ок, опять ловить ширину скролла, опять пляски с паддингами”.
Так вот, всё это можно выкинуть на свалку истории.
В CSS с декабря 2024 завезли свойство
scrollbar-gutter, и оно делает именно то, чего мы столько лет хотели:резервирует место под скролл заранее, чтобы интерфейс нигде не дёргался.
Минимально рабочий вариант:
overflow: auto;
scrollbar-gutter: stable;
И всё - модалки не прыгают, страницы не сдвигаются, UI ведёт себя адекватно.
Документация:
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
🔥4🌚1
У браузерного js как языка есть большой недостаток являющийся плюсом - деобфускация.
Большой минус в том, что деобфускация js не сложна и любой человек может разобрать твой продукт на кусочки и спасения этому увы нет (а llm значительно удешевляют этот процесс).
Большой плюс - тебе доступна возможность перенять опыт других экспертов и найти выразительные способы организации логики в проектах, в которых ты даже не поработаешь**
**Как правило reverse engineering легален в образовательных целях, но зависит от законодательства страны и лицензионного соглашения
Большой минус в том, что деобфускация js не сложна и любой человек может разобрать твой продукт на кусочки и спасения этому увы нет (а llm значительно удешевляют этот процесс).
Большой плюс - тебе доступна возможность перенять опыт других экспертов и найти выразительные способы организации логики в проектах, в которых ты даже не поработаешь**
Один из сильных для меня примеров - это Linear, которые, понимая бессмысленность защиты, всего лишь минифицировали код (оставив даже нэйминг файлов), но при этом у них сильные и выразительные инженерные решения:
- интересная организация моделей с Mobx и свой «Sync Engine»
- механика описания и использования «Action»'ов (которые можно передавать как классы в специальные react компоненты и получать например готовые кнопки с иконками, текстом, шорткатом и правилами активности; вешать глобальные шорткаты; в зависимости от активности той или иной модели применять этот экшен именно к ней; и тот же экшен можно увидеть в «Command Menu»)
- определение роутов и использование «useLoaderData» (который завезли в реакт роутер 3 года назад)
🔥3😎1
Если у вас очиститель воздуха от xiaomi и нет желания нормальный фильтр выкидывать на помойку
https://unethical.info/2024/01/24/hacking-my-air-purifier/
Сработало даже с айфоном, хотя, мне казалось, не так давно он умел только читать rfid метки
(есть еще способ с нажатием разного рода кнопок и играми с питанием, но этот банально быстрее)
https://unethical.info/2024/01/24/hacking-my-air-purifier/
Сработало даже с айфоном, хотя, мне казалось, не так давно он умел только читать rfid метки
Tailscale и homelab
В декабре 2022 года я собрал свой homelab (рис 1) и записывал что покупал, что ставил, как настраивал (рис 2), думая что когда то это где то опубликую, но руки так и не дошли создать свой digital garden (аля https://nikiv.dev/) из obsidian, да и в целом упаковать все в удобный для понимания “проект” (и имхо многие вещи можно было бы сейчас переложить на terraform + ansible, но мотивация есть только на занятие продуктами)
Поэтому сегодня просто поделюсь актуалочкой про tailscale.
Какое то время он был недоступен для пользователей рф, а я его использовал для подключения к homelab из разных мест (фотки выкачать, к devcontainer’ам подключиться, менеджер паролей синкануть, селф хост решениями попользоваться и тд). Но вот прошло время и мне снова потребовался кейс с удаленным доступом к homelab и tailscale вновь работает, а я чуть детальнее сделал настройку.
Задача в этом случае у меня для homelab простая - я использую macOS и создаю аналог screen.studio для записи экрана с автозумом и редактированием, но пытаюсь сделать программу кроссплатформенной и мне для этого нужны VM’ки (сейчас windows; рис 3 и 4). В homelab стоит proxmox (рис 5), а в нем винда (с прокинутой видюшкой), которая иногда используется как game vm с playnite лаунчером (некоторые вечера были проведены с джойстиком в руках, т.к комп подключен по hdmi к телеку с прямым доступом к экрану винды)
Так вот, tailscale позволяет создать частную виртуальную сеть (VPN) и связать наши устройства.
Можно поставить tailscale на все устройства и vm’ки, а можно пойти более интересным путем:
- Поставить tailscale на основную тачку (с настройками как на рис 6)
- Поставить tailscale на proxmox и запустить его как маршрутизатор для subnet routes
(после этого в admin console tailscale нужно апрувнуть эти маршруты для машины)
И получится так что вы сможете получать доступ к любым vm’кам представленным в proxmox используя внутренние ip proxmox’а
Чтобы увидеть routing tables (узнать к каким ip можно делать запросы и проверить ip’шники vm’ок):
В декабре 2022 года я собрал свой homelab (рис 1) и записывал что покупал, что ставил, как настраивал (рис 2), думая что когда то это где то опубликую, но руки так и не дошли создать свой digital garden (аля https://nikiv.dev/) из obsidian, да и в целом упаковать все в удобный для понимания “проект” (и имхо многие вещи можно было бы сейчас переложить на terraform + ansible, но мотивация есть только на занятие продуктами)
Поэтому сегодня просто поделюсь актуалочкой про tailscale.
Какое то время он был недоступен для пользователей рф, а я его использовал для подключения к homelab из разных мест (фотки выкачать, к devcontainer’ам подключиться, менеджер паролей синкануть, селф хост решениями попользоваться и тд). Но вот прошло время и мне снова потребовался кейс с удаленным доступом к homelab и tailscale вновь работает, а я чуть детальнее сделал настройку.
Задача в этом случае у меня для homelab простая - я использую macOS и создаю аналог screen.studio для записи экрана с автозумом и редактированием, но пытаюсь сделать программу кроссплатформенной и мне для этого нужны VM’ки (сейчас windows; рис 3 и 4). В homelab стоит proxmox (рис 5), а в нем винда (с прокинутой видюшкой), которая иногда используется как game vm с playnite лаунчером (некоторые вечера были проведены с джойстиком в руках, т.к комп подключен по hdmi к телеку с прямым доступом к экрану винды)
Так вот, tailscale позволяет создать частную виртуальную сеть (VPN) и связать наши устройства.
Можно поставить tailscale на все устройства и vm’ки, а можно пойти более интересным путем:
- Поставить tailscale на основную тачку (с настройками как на рис 6)
- Поставить tailscale на proxmox и запустить его как маршрутизатор для subnet routes
tailscale up --advertise-routes=192.168.1.0/24
(после этого в admin console tailscale нужно апрувнуть эти маршруты для машины)
И получится так что вы сможете получать доступ к любым vm’кам представленным в proxmox используя внутренние ip proxmox’а
Чтобы увидеть routing tables (узнать к каким ip можно делать запросы и проверить ip’шники vm’ок):
netstat -rn
🔥2❤1