Есть проект трекера расходов — API, пользователи, транзакции, категории. Но не хватает счетов. Даём Claude и Codex задачу: нужно реализовать счета, чтобы транзакции можно было привязывать к определённому счёту и переводить деньги с одного счёта на другой. В рамках задачи требуется сделать именно API изменения. Всё делаем в plan mode — сначала план, потом код. Смотрим, кто продумал логику грамотно, у кого API получился рабочим, и насколько модели справились с доработкой структуры. Полное сравнение Claude и ChatGPT — ссылка под шортсом!
#claude #claudecode #chatgpt #codex #opus #ai #aicoding #aiassistant #ии #api
После того как Pencil + MCP помогли перевести макет в компоненты, остаётся другая проблема — AI выдаёт неконсистентный вывод. Каждый раз компоненты выглядят и работают по-разному. Решение — скиллы и качественная документация проекта. Скилл задаёт «рецепт»: как делать то или иное — структуру компонента, стили, импорты. А документация описывает, что это за проект: архитектура, слои, принятые соглашения. В итоге AI выдаёт единый стилевой подход, одинаковый макет даёт одинаковый результат, а итераций с дизайнером становится меньше. Как это настроить — в полном видео по ссылке под шортсом.
#pencildev #aiskills #mcp #ии #ai #aidesign #ui #aiagent #claude #claudemd
Unhead — это библиотека для управления мета-тегами в заголовке документа. Она работает с React, Vue, Solid, Svelte и даже с ванильным JS. Раньше head-теги рендерились один раз и всё. А в третьей версии добавили стриминг для SSR. Теперь, когда страница грузится частями, новые title, meta и link пушатся в DOM по мере готовности — никаких задержек. Unhead также обзавёлся новыми плагинами: ValidatePlugin сам найдёт ошибки в мета-тегах, CanonicalPlugin сгенерирует канонические ссылки и почистит трекинговые параметры, а MinifyPlugin сожмёт инлайн-скрипты и стили. Плюс теперь есть один унифицированный Vite-плагин и DevTools для отладки head-состояния в браузере. Весь код переписан синхронно и стал легче на 11 процентов.
#devnews #unhead #ssr #metatags #webdev #frontend #react #vue #js
Главное преимущество Pencil.dev перед Figma — архитектура. Pencil хранит всё в структурированном JSON, а не в бинарном формате, и заставляет мыслить флексами, а не абсолютными координатами. Макеты лежат в Git — понятная история изменений, кодревью, ветки. Через MCP AI-агент одновременно работает с Pencil, дизайн-системой токенов, вашим Git-репозиторием и API. В итоге макет доступен как структура, а у агента есть неограниченный доступ к данным. Именно это позволяет качественно переводить макет в компоненты без потери информации. Подробности — в полном видео по ссылке под шортсом.
#pencildev #figma #ии #ai #aidesign #ui #uidesign #mcp #aiagent
XSS возникает, когда разработчик доверяет пользовательским данным. Уязвимый код: element.innerHTML = userInput или eval(userInput). Злоумышленник может вставить ﹤script﹥alert(1)﹤/script﹥ и украсть куки. Безопасный код: textContent вместо innerHTML, использование DOMPurify для очистки, избегание eval и new Function, экранирование данных на сервере и клиенте, CSP заголовки. Разница между уязвимым и безопасным кодом — это разделение между Junior и Middle разработчиком на собеседовании. Полный разбор — в большом видео по ссылке под этим шортсом. Подписывайтесь, чтобы не пропустить остальные вопросы.
#xss #crosssitescripting #frontend #frontendinterview #middle #senior #techinterview #codinginterview
Pencil.dev — это как Figma, но с AI-подходом. И он решает сразу несколько проблем при создании макетов. Первая — это скорость. AI-дизайнер за 5-10 минут накидывает несколько вариантов макета, вы сравниваете, анализируете и выбираете оптимальный, прежде чем делать финальный. Никакого ручного переноса, никаких часов на перерисовку. И всё это удобно работает с обычным Claude или Codex, которые легко подключаются к Pencil. Какие ещё задачи закрывает Pencil — смотрите в полном видео по ссылке под шортсом.
#pencildev #ии #ai #aidesign #ui #uidesign #frontend #design
Rspack — это сборщик на Rust, совместимый с экосистемой webpack. Он создан для того, чтобы дать ту же гибкость, но с дикой скоростью. И вот вышла вторая мажорная версия. Производительность выросла: прирост до 100% относительно 1.0, а в режиме с кешем сборка ускорилась в 4 раза. Добавили tree shaking для Module Federation — теперь общие зависимости обрезаются на уровне экспортов. Экспериментально завезли поддержку React Server Components. Починили работу с import.meta — теперь неизвестные свойства не заменяются на undefined, а сохраняются как есть, плюс добавили поддержку import.meta.main, filename и dirname. Также завезли import defer — можно сначала загрузить модуль, а выполнить позже, удобно для контроля сайд-эффектов. Количество загрузок выросло с 10 до 500 тысяч в неделю. Rspack 2 — уже не просто альтернатива, а полноценный зверь.
#devnews #rspack #rust #webpack #bundler #webdev #js
Три этапа создания UI-фичи: первый — дизайн, то есть создание макета и прототипа, второй — создание компонентов, где дизайн превращается в React-код, третий — архитектура, чтобы проект не деградировал со временем. На каждом этапе есть своя боль. На этапе дизайна — множество итераций и долгие согласования. На этапе создания компонентов — AI часто выдаёт неконсистентный вывод, и компоненты не ложатся в проект как надо. На этапе архитектуры — AI деградирует код: кладёт логику не в те слои, делает неправильные импорты. Чего мы хотим добиться: бесшовный процесс от макета до кода, без потери данных, без бесконечных итераций по кругу, единый пайплайн с использованием AI на каждом этапе. В полном видео решаем все эти проблемы и показываем работающий пайплайн с Claude Code и Pencil.dev. Ссылка под шортсом.
#react #ai #podlodkacrew #aidesign #ии #ui #aireact #uidesign
XSS и CSRF — самые частые веб-уязвимости, и спрашивают их не просто так. Фронтенд — это первая линия обороны: данные от пользователя приходят через вас, и вы обязаны их экранировать, настраивать заголовки и куки, не доверять вводу. Знание этих уязвимостей отделяет опытного разработчика от джуниора. Вопрос про XSS и CSRF на собеседовании проверяет сразу три слоя: понимание самой атаки, механику браузера (как работают куки, формы, запросы) и практические методы защиты (CSP, SameSite, токены, валидация). Это не теория, а критический навык для Middle и Senior. Полный разбор — в большом видео по ссылке под этим шортсом.
#csrf #xss crosssitescripting #crosssiterequestforgery #frontend #frontendinterview #middle #senior #techinterview #codinginterview
React Email — это библиотека для верстки и отправки email-писем с помощью React компонентов. Она делает то, что раньше было адом: красивые, адаптивные письма, которые корректно отображаются во всех почтовых клиентах. И вот вышла шестая версия. Главная фича — открытый визуальный редактор, который можно встроить прямо в своё приложение. Всё на компонентах, всё под кастомные блоки. Плюс теперь все компоненты объединены в один пакет — не нужно таскать кучу зависимостей. Количество загрузок выросло на 108% с прошлой версии, а число контрибьюторов перевалило за 200 человек. React Email 6 — это серьёзный шаг к тому, чтобы сделать email-разработку нормальной.
#devnews #react #reactemail #resend #email #frontend #webdev #reactjs
Даём Claude и ChatGPT задачу по аналитике данных. Нужно выяснить, какие модели для генерации картинок чаще всего используют в базе ruGPT_tools внутри Metabase. Оба берутся за работу, но результаты кардинально разные. Claude выдаёт полноценный аналитический отчёт: с графиком, с топ-5 по историческому объёму, с чёткими выводами и хорошей структурой. Всё выглядит как серьёзная работа с данными. А ChatGPT выдал совсем скудно — без графиков, без глубины, будто бы просто отметился. Просто смотрим и сравниваем. Полное видео со всеми задачами — ссылка под шортсом.
#claude #claudecode #chatgpt #codex #opus #ai #aicoding #aiassistant #ии #aianalytics #dataanalysis
Ky — это минималистичный HTTP-клиент, прямая альтернатива Axios, но на нативном fetch. Работает в браузере, Node.js и даже в Deno — никакой магии, просто надёжный запрос. Кидает ошибки на плохие статусы, поддерживает ретраи, отмену запросов и хуки. И вот вышла вторая версия. Добавили totalTimeout, унифицировали сигнатуры хуков, поправили .json() на пустых ответах. Если axios кажется тяжеловатым, а голой fetch не хватает — присмотритесь к Ky.
#devnews #http #httpclient #axios #fetch #js #nodejs #deno #javascript #ky
Code Splitting — разбивка бандла на части, которые грузятся по необходимости. Middle знает про React.lazy и Suspense, разбивает бандл по роутам, слышал про динамический импорт, использует готовые решения (Next.js). Senior идёт дальше: знает про анализ бандла перед сплитом (Webpack Bundle Analyzer), понимает подводные камни — слишком много мелких чанков, водопад запросов, влияние на Web Vitals. Также знает разницу между preload и prefetch, понимает особенности HTTP/1.1 и HTTP/2, использует атрибуты module и nomodule для доставки современного кода старым браузерам, и знает, когда Code Splitting не нужен. На собеседовании важно понимать не только как, но и зачем. Полный разбор — в большом видео по ссылке под этим шортсом.
#codesplitting #frontend #frontendinterview #middle #senior #techinterview #codinginterview
Python 3.14.5rc1 — это релиз-кандидат пятого поддерживающего обновления для ветки 3.14. Главная новость: инкрементальный сборщик мусора, который завезли в 3.14.0, откатили назад. Почему? Потому что на проде начались проблемы с памятью — слишком много жалоб от пользователей на значительное потребление RAM. В итоге разработчики решили вернуться к проверенному generational GC из версии 3.13. Остальные изменения — около 113 багфиксов, улучшения сборки и документации.
#devnews #python #питон #garbagecollector #python314 #backend #webdev
CSRF (Cross-Site Request Forgery) — это атака, когда злоумышленник заставляет пользователя отправить запрос на сайт, где тот уже авторизован. Пример: вы залогинены в банке, переходите на вредоносный сайт, а он отправляет запрос на перевод денег с вашими куками. Бэкенд думает, что это вы. На собеседовании Middle и Senior важно понимать разницу между XSS и CSRF: XSS — внедрение скрипта, CSRF — подделка запроса. Полный разбор безопасности — в большом видео по ссылке под этим шортсом. Подписывайтесь, чтобы не пропустить остальные вопросы.
#csrf #crosssiterequestforgery #frontend #frontendinterview #middle #senior #techinterview #codinginterview
React Tooltip — это самая популярная библиотека для всплывающих подсказок в React. В шестой версии разработчики переписали API. Убрали атрибут data-tooltip-html, вместо него теперь можно передавать форматированный контент через children — гораздо чище и по-реактовски. Появилась возможность автоскрытия через autoClose: тултип сам исчезнет через заданное количество миллисекунд. Ещё одна крутая фича — portalRoot, теперь вы можете зарендерить тултип в любом контейнере на странице, а не только в body. Порталы работают без костылей, SSR поддерживается из коробки, плюс полная совместимость с React 19. Достойное обновление для тех, кто использует тултипы в проектах.
#devnews #react #reacttooltip #tooltip #frontend #js #reactjs
XSS (Cross-Site Scripting) — это атака, когда злоумышленник внедряет вредоносный скрипт в страницу, которую просматривают другие пользователи. Три вида XSS. Первый — stored (хранимый): скрипт сохраняется на сервере, например, в комментариях или профиле. Каждый, кто откроет страницу, запустит атаку. Второй — reflected (отражённый): скрипт передаётся через параметры URL, сервер отражает его в ответе. Жертву нужно обмануть, чтобы перейти по ссылке. Третий — DOM-based: уязвимость возникает прямо в браузере через манипуляцию с DOM, без участия сервера. Например, через eval или innerHTML с данными из location.hash. Защита — экранирование, валидация, CSP, избегать eval и innerHTML с недоверенными данными. На собеседовании важно знать разницу между видами. Полный разбор — в большом видео по ссылке под этим шортсом.
#crosssitescripting #xss #frontend #frontendinterview #middle #senior #techinterview #codinginterview
Nuxt 4.4 выкатил крупное обновление. Внутри теперь vue-router 5 — роутинг стал быстрее и стабильнее. Появилась возможность передавать typed props в лэйауты прямо через definePageMeta, больше не нужно мучиться с provide/inject. Для доступности добавили useAnnouncer — теперь можно озвучивать динамические изменения на странице для скринридеров. А ещё встроили build-профилирование: запустите nuxt build --profile и получите детальный отчёт, где тормозит сборка. Плюс миграция на unrouting ускорила пересборку dev-сервера до 28 раз на больших проектах. Отличный апдейт, который делает Nuxt ещё приятнее.
#devnews #nuxt #vue #vuerouter #frontend #webdev #javascript #js
Claude получил задание — сделать дизайн одного экрана для приложения заказа кофе в Pencil.dev. Вёрстка, карточки напитков, кнопка заказа, адаптив. Смотрим, что получилось: насколько чисто свёрстано, удобно ли это для пользователя и есть ли стиль. А как с этим справился ChatGPT — смотри в полном видео по ссылке под шортсом.
#claude #claudecode #opus #ai #ии #aicoding #aidesign #coffeeapp #appdesign #pencildev
У Code Splitting есть подводные камни. Первый — слишком много мелких чанков: браузер забивает очередь сетевыми запросами. Второй — водопад чанков (network waterfall): чанки грузятся последовательно, а не параллельно. Третий — tree shaking не работает, если забыть про sideEffects: false в package.json, и в бандл попадает мусор. Четвёртый — задержка при навигации: пользователь кликнул, а чанк ещё грузится. Пятый — code splitting ради code splitting, без реальной пользы, когда режут то, что не нужно резать. Всё это влияет на Web Vitals: страдает LCP, FCP, TTI. Правильная стратегия — резать по роутам и фичам, не дробить слишком мелко, использовать preload и prefetch. На собеседовании Middle и Senior важно уметь балансировать. Полный разбор стратегий — в большом видео по ссылке под этим шортсом.
#codesplitting #webvitals #frontend #frontendinterview #middle #senior #techinterview #codinginterview