cherkashin.dev
2.13K subscribers
247 photos
15 videos
271 links
Александр Черкашин. Бойскаут, Борец с перфекционизмом.

Для связи 👉 @cherkalexander

Фулстек разработчик в decisions.com. Работаю со стеком TypeScript, React, C#

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


Блог: https://cherkashin.dev
Download Telegram
Пока ремонт особо не напрягает, появилось время вернуться к рутине. Начал смотреть стримы про вайбкодинг в Guide DAO, где сейчас прохожу обучение. Стримы проходят раз в неделю, где ребята продолжают развивать один и тот же проект — шаг за шагом углубляются в архитектуру и работу с агентами.


В этот раз для себя наконец нормально понял тему скиллов.
Skills — это по сути «ленивые» инструкции: они загружаются в промпт только тогда, когда действительно нужны.

Рано или поздно агент начинает делать что-то «не по-нашему». Например, пишет e2e-тесты без структуры, игнорирует page object или общие хелперы.

Первая реакция — добавить правила в CLAUDE.md:
— использовать Playwright
— придерживаться page object
— выносить повторяющуюся логику
— аккуратно работать с асинхронностью

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

Вот здесь и нужны skills.

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

К слову, на следующей неделе в Guide DAO стартует живой поток по вайбкодингу: формат стримов, небольшие группы, практика с домашками и обратной связью, длительность около полутора–двух месяцев. После покупки участники получают доступ ко всей платформе Guide DAO — стримам, курсам и комьюнити. Сейчас по промокоду 🏷 CHERKASHIN действует скидка 30% (плюс около 10% на сайте).

Из других полезных вещей, которые разбирали на стримах:

MCP-серверы — позволяют агенту выходить во внешний мир: сходить в Jira, базу данных или API и собрать данные.
Команды — кастомные slash-команды с заранее заданным сценарием или промптом для повторяющихся действий.
Хуки — точки расширения, которые позволяют выполнить код в определённые моменты работы агента (например, после генерации плана).
spec-kit — spec-kit помогает быстро получить черновик спецификации проекта, который потом можно отревьюить и доработать.

И в конце стрима зацепила одна мысль 💡. Парни обсуждали, что нам, по сути, повезло войти в ИТ ещё до появления ИИ и агентов. Мы успели набить базовые знания и привыкли разбираться в проблемах самостоятельно. Сейчас это объективно сложнее: когда ИИ может написать решение в разы быстрее, нужна большая сила воли, чтобы не просто «попросить агента», а действительно вникнуть, разобраться и чему-то научиться. Заставить себя изучать новое в такой реальности — отдельный навык.

Кстати, ребята выложили в открытый доступ 👉 один из стримов по вайбкодингу, где на практике разбирается как использовать spec-kit.

Ставьте:
- 🔥 — если чувствуете себя уверенно в вайбкодинге
- 👍 — если пока наблюдаете со стороны
- 😱 — если всё сильнее переживаете, что ИИ вас заменит

#ai
1👍7🔥4😱32😴1🤷1
Девушки, с 8 марта 🌷

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

А от меня небольшой виртуальный букет — тюльпаны, выращенные на чистом CSS:

https://codepen.io/cherkalexander/pen/EagyGZw
🔥43👍3🤩1😍1
Если всё горит — поговори 🔥

Это была уже третья неделя подряд, когда у меня в понедельник выходной. Да-да, на прошлой неделе я вообще прогулял — прям как в школе.

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

если всё горит — поговори.

У меня уже который раз происходит одна и та же фигня. Работы вагон и маленькая тележка: ничего не успеваешь, бежишь изо всех сил, нервничаешь, постоянно раздражаешься. Бесит всё так, что аж пот по спине течёт.

А потом оказывается, что иногда достаточно просто поговорить.

Только за прошлую неделю у меня было две такие ситуации:

1. Пошёл проводить 1:1 с коллегой. В итоге сам отвлёкся, проговорили разные вещи — и внезапно уже не кажется, что проблемы такие большие.

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

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

Правда, есть нюанс.
Если кто-то в такой момент захочет поговорить со мной «ни о чём», у меня может полыхнуть ещё сильнее 😅.

В общем, хорошей недели всем 👋 .
Ставь ❤️, чтобы эта неделя прошла без происшествий.
12👍3👌3
Я занимаюсь фронтенд-разработкой около 9 лет, но, к своему стыду, ни разу не «игрался со шрифтами». Во всех проектах, над которыми я работал, был либо подключён какой-то шрифт из Google Fonts, либо всё уже было настроено, либо использовался просто какой-то дефолтный шрифт из шаблона.

Но вот шрифты всё-таки меня настигли. Во время редизайна дизайнер решил, что Nunito уже не модно, и предложил перейти на Inter. Когда мы обновили шрифт, наш интерфейс разнесло во все стороны 😅 Inter оказался заметно больше.

Сначала мы решили пойти самым простым путём: поменять значения наших дизайн-токенов и сделать их на 1px меньше, чтобы компенсировать переход на новый шрифт. Но это не сработало: наш конструктор позволяет указывать кастомные шрифты, поэтому такой вариант отпал.

И вот после очередного сеанса гугления промптинга ChatGPT подсказал мне, что есть такое свойство, как size-adjust, которое позволяет уменьшить весь шрифт. Размеры и отступы всё равно, конечно, немного отличаются, но так можно избежать изменения дизайн-токенов.

Для наглядности это выглядит примерно так:

@font-face {
font-family: Inter;
font-style: normal;
font-weight: 100 900;
font-display: swap;
size-adjust: 93%;
src: url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf') format('truetype');
}


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

👍 — если знали про size-adjust
❤️ — если узнали что-то новое

#css
16👍5🔥4
Недавно фиксил баг у себя в блоге, и заодно нужно было покрыть тестами парсер тегов для телеграм-постов.

В какой-то момент вспомнил, что в Node.js уже есть встроенный тест-раннер. Решил не тащить лишние зависимости и просто проверить, насколько он вообще живой.

В итоге оказалось, что для таких задач — более чем ок.

https://github.com/acherkashin/acherkashin.github.io/blob/main/tests/telegram-tags.util.test.ts

import assert from 'node:assert/strict';
import test from 'node:test';

test('extracts multiple hashtags from a single line', () => {
const tags = extractTelegramTagsFromMarkdown('#frontend #testing #astro');

assert.deepEqual(tags, ['frontend', 'testing', 'astro']);
});


Что ещё приятно — тесты можно писать на чистом TypeScript без установки дополнительных пакетов.

Для утилит, парсеров, серверного кода и прочих небольших юнит-тестов этого раннера вполне хватает.

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

Ещё по теме:
- Документация
- Trying Node.js Test Runner

А вы чем гоняете тесты?

🔥 — Vitest
👍 — Jest
❤️ — Что-то другое (напишу в комментариях)

#nodejs #tests
🔥10👍75
Я искренне завидую людям, которые выступают на митапах и записывают курсы по программированию. Для меня это кажется чем-то невероятно сложным, поэтому я не выхожу за пределы ведения каналов 😅

Сегодня хочу порекомендовать канал моего тёзки Саши - Frontend вдохновляет.

У нас с ним есть что-то общее: мы оба фронтендеры и оба используем Obsidian. А у себя в канале Саша делится полезным из практики, заметками про инструменты и просто интересными наблюдениями.

Что у него посмотреть:
- Для ценителей Vue: песочница с подводными камнями реактивности
- Про Obsidian
- Про динамичные ключи в i18n
- Про выступления на митапах
- Про опыт с ИИ
- Про мошеннические действия под прикрытием рекрутеров — мой любимый 😅
- Figma Make. Что это и как работает

Плюс у Саши есть курс на Stepik.

А ещё он делится прочитанной художественной литературой и пройденными играми.

В общем, рекомендую заглянуть в канал

👉 https://t.me/front_everyday

#рекомендую_канал
👍32🔥2
Если честно, после того как я научился пользоваться гитом и разобрался, что такое git checkout, git branch, git merge, git commit, я не особо копал, какие ещё там есть команды. Конечно, использовал git rebase, reflog, reset, но не более того.

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

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

У меня и сейчас для этого два отдельных git clone одного и того же репозитория. Работает, конечно, но clone — это всё-таки отдельный репозиторий со своим .git. То есть папок у тебя будет столько же, сколько и с worktree, но в случае с clone ещё и история с git-объектами дублируется. У меня, например, один .git весит около 4 ГБ...

А git worktree — это по сути несколько рабочих папок для одного репозитория. История и git-объекты при этом общие, а в дополнительной папке .git — это не отдельная директория, а файл-ссылка на служебные данные основного репозитория.

То есть разница такая:

git clone — отдельный репозиторий, отдельный .git, отдельная история на диске.
git worktree — ещё одна рабочая папка, но репозиторий под капотом общий.

Создаётся всё буквально одной командой:

git worktree add ../project-review main


Если нужна новая ветка под задачу:

git worktree add -b feature/button-fix ../project-button-fix main


Дальше просто открываешь обе папки в IDE и спокойно работаешь параллельно.

Посмотреть все worktree можно так:

git worktree list


Удалить так:

git worktree remove ../project-review


Подробнее можете почитать в статье.

Узнал я об этой фиче, кстати, из Codex. Там есть специальная функция, чтобы быстро создать дополнительный worktree и работать над несколькими задачами параллельно.

👍 — если уже пользуетесь worktree
🔥 — если, как и я, держите несколько клонов одного репо
🤔 — если вам вообще нет надобности держать несколько копий одного репозитория

#git
🔥13👍11🤔74
4 года назад я перешёл с винды на мак, подключил свой старый 2K монитор и вообще не понял прикола.

Монитор отлично работал с виндовым ноутом, но на маке всё поплыло.
Текст мыльный, глаза уставали довольно быстро.

Я всё откладывал этот вопрос, а глаза продолжали страдать.

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

- 4K на 24 дюйма
- 5K на 27 дюймов
- 6K на 32 дюйма

Если очень грубо, PPI — это плотность пикселей на дюйм.

Я решил взять 5K монитор и запустил исследование в ChatGPT, и он предложил мне 4 варианта:
- 27" Монитор DIGMA PRO Art M, 5120x2880 — 54 990
- Samsung ViewFinity S9 S90PC S27C902PAI 27" 5120x2880 — 81 999
- Монитор Digma Pro DM27SP02 — 84 906
- Kuycon G27X SE — от 80 000

Я человек простой: что дешевле, то и беру.
Поэтому остановился на Digma PRO.

После 2К монитора, это просто сказка, смотреть одно удовольствие. Единственное неудобство — ножка не регулируется по высоте. Но сама по себе она более-менее высокая, так что с 14-дюймовым маком можно обойтись и без подставки.

Пока ждал монитор нашел 2 способа улучшить качество на 2K мониторе:
- включить 2x масштабирование — тогда качество отличное, но всё огромное
- установить BetterDisplay — специальную утилиту для мака для настройки монитора, и изображение становится чуть чётче, но всё ещё достаточно отстойное

Кстати, обзоры этих мониторов можно посмотреть здесь:
- Монитор для Mac за 50 тысяч — Digma 5k Pro Art M
- Как выбрать монитор для Мака и MacOS? Потратил полмиллиона и узнал

А как у вас дела
- 👍 — обхожусь одним монитором
- 😢 — тоже страдаю с внешним монитором
- 🔥 — всё ок: монитор классный или на винде/линуксе таких проблем нет
🔥15👍9😢5
Знаете как это бывает, начинаешь делать задачу, посидел, придумал архитектуру, реализовал, и тут начинается самое интересное... В одном месте что-то не учёл, в коде соседнего модуля вылез косяк, а время идёт, сроки горят и приходится подставить костыли и надеяться что когда-то можно будет это исправить. Да и переписывать свой код больно, он же ваш, вы потратили на него время.

Я это вот к чему. Астрологи объявили год агентного кодинга, все пишут как они ускоряются в 5-10 раз, но эта проблема никуда на самом деле не уходит.

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

И тут на помощь приходит One Shot Prompting. Про подход я уже слышал, но по-настоящему понял его только на стриме Вани в GuideDAO. В общем, суть простая - вы не просите агента исправить все косяки. Вместо этого берёте исходный промпт и уточняете требования, чтобы избежать проблем, которые всплыли в первой реализации. И, конечно, без угрызений совести выкидываете первую версию.

То есть по сути, теперь мы дешево можем делать почти сразу хорошо, переписать всё стало в разы проще.

🧪 Пример из своего опыта. Я решил начать пилить небольшой пет-проект, который, надеюсь, когда-нибудь увидит свет. В проекте используется MapLibre GL JS - библиотека для отображения векторных карт. После очередной фичи я решил попросить кодекс покрыть её playwright тестами, и тут началось.

Он написал тесты и следующие полчаса пытался понять, почему же карта не отображается. Как джун, искал проблему методом тыка. Вносил изменения - карта не работает. Решил, что проблема в кеше - перезапускает дев-сервер. И так раз десять. В итоге он всё-таки дошёл до причины: WebGL, который используется в MapLibre, не работает, когда playwright запущен в headless режиме.

С горем пополам тесты он написал, но на код, конечно, лучше не смотреть. Естественно, он не убрал все свои неудачные попытки пофиксить проблему.И это именно тот случай, когда нужен One Shot Prompting.

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

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

⚠️ У подхода, конечно, есть и минус. Токенов тратится больше. Поэтому если задача большая, а багов немного, иногда проще пойти на компромисс и просто попросить агента всё пофиксить.

А вообще теперь же с 1 марта нельзя говорить one shot prompting. Как это будет по-русски, «однократное задание по образцу»? 😆

А вы используете One Shot Prompting?
- 👍 — использую one shot prompting
- ❤️ — правлю всё в одном чате
- 😢 — почти не использую ИИ

#ai
10👍9😢3💊3
Вчера говорю жене: так и не придумал какую шутку написать на 1 апреля

Жена: какие шутки? время сейчас такое, не до шуток совсем

Я: Отлично, спасибо так и напишу

Надеюсь сегодня обойдётся без дурацких новостей шуток.
😢12👍62
Я собираюсь в свой первый отпуск в этом году, а значит пора всё-таки немного рассказать, как я провел предыдущий отпуск.

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

Наш рейс задержали на пару часов, поэтому когда мы прилетели, то встряли в жёсткую пробку, и до отеля ехали как черепахи. Остановились в Ja Ocean View Hotel, отель выбрали из-за вида на Персидский залив и колесо обозрения, он просто бомбический, особенно ночью, когда всё сияет.

Когда мы заселились было уже темно, поэтому пошли сразу гулять по набережной, и рты у нас приоткрылись, тут и море, и набережная и высотки и это всё сияет в ночи. Мы немного пожалели, что мы приехали именно сюда. Подумали: ну всё, красивее уже, наверное, не будет, можно больше и не путешествовать 😅. Конечно, ко всему этому мы привыкли за пару дней.

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

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

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

Вообще, в этот раз мы уговаривали себя не пытаться посмотреть всё всё всё, что только возможно, хотя в Дубае это было достаточно сложно. Но мы вроде как справились, посетили примерно половину из того что планировали изначально. Этому ещё помогло то, что я заболел после первого же купания. Я вообще люблю болеть в отпуске.


Вообще море в Дубае так себе. Либо это ощущение после Египта, где море прям шикарное, либо дело в искусственных островах, из-за которых, вода застаивается Было ощущение, что мы скорее на речке, чем на море.

Из того, что успели посмотреть в Дубае:
- Колесо обозрения
- Смотровую на пальме — The View at the Palm
- Световое шоу у Бурдж Халифы
- Потерялись в Дубай Молле
- Покатались на Катере по Персидскому заливу
- Нашли "настоящий" и "поддельный" дубайский шоколад
- Съездили на экскурсию в Абу-Даби
- Пробежались по Лувру
- Заехали в Президентский Дворец
- Походили с открытым ртом по мечети шейха Зайда

Возвращаюсь к Старбаксу, в старом городе, есть очень колоритный Старбакс, ну, конечно, и очереди там соответствующие, и нам пришлось минут 20 ждать пока пара китаянок сделает миллион фоток, прежде чем мы смогли сфоткаться.

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

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

Тут невероятно чисто, никакого мусора. Яблоки сложены одно к одному как египетские пирамиды, морковки выложены вряд. Хотя, так, конечно, не везде, мы ездили в старые районы, где есть ещё тот старый Дубай, и там совсём всё не дорого богато.

Мне кажется Курск в этом плане угнетает, нельзя вот так выйти и насладиться красотой. Впитать немного энергии из вне, приходится вывозить на морально волевых, или сваливать в отпуск на подзарядку 😄.

Рассказывайте:

🔥 — тоже уже были в отпуске в этом году
🤨 — ещё не успели отдохнуть
❤️ — желаете мне не заболеть в этот раз

#vacation
10🤨4🔥3😁1