PurpleSchool

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

ChatGPT Codex получил задание — сделать дизайн экрана для приложения заказа кофе в Pencil.dev. Вёрстка, карточки напитков, кнопка заказа, адаптив. Смотрим, что получилось: насколько чисто свёрстано, удобно ли это для пользователя и есть ли стиль. А как с этим справился Claude Opus — смотри в полном видео по ссылке под шортсом. #chatgpt #codex #ai #aicoding #aiassistant #ии #aidesign #coffeeapp #appdesign #pencildev

Тема Reflow и Repaint — обязательна на собеседовании Middle и Senior фронтенд-разработчика. Middle должен знать, что Reflow дороже Repaint, потому что требует пересчёта геометрии всей страницы, а Repaint — только перерисовки пикселей. Middle слышал, что для анимации лучше использовать transform вместо left/top, и знает про will-change для подсказки браузеру о будущих изменениях. Senior идёт дальше: знает про Layout Thrashing и как его избежать, понимает композитинг и создание слоёв (will-change), умеет оптимизировать сложные анимации и работать с Layers Panel. Senior разбирается в стратегиях GPU-рендеринга. Полный разбор — в большом видео по ссылке под этим шортсом. #reflow #repaint #frontend #frontendinterview #middle #senior #techinterview #codinginterview

Сравниваем фичи самих агентов — Claude Code и ChatGPT. Разбираем, как устроена работа с agents.md и claude.md, что такое агенты и субагенты, скиллы, хуки и правила. Отдельно смотрим на фишку Claude — memory, которая позволяет хранить договорённости прямо в проекте. У ChatGPT такого нет — там нужно прописывать всё отдельно либо в скиллах, либо в agents.md. А ещё у Claude есть output styles — полезная штука для управления форматом ответов. У кого экосистема гибче и удобнее для реальной разработки — смотрим и сравниваем. Полное сравнение всех навыков — ссылка под шортсом. #claude #claudecode #chatgpt #codex #opus #ai #aicoding #aiassistant #ии #aiskills

Перед тем как делать Code Splitting, нужно понять, что именно резать. Для этого анализируют бандл — смотрят, какие библиотеки и модули занимают больше всего места. Главный инструмент — Webpack Bundle Analyzer (или Vite Bundle Visualizer). Он показывает интерактивную карту бандла, где каждый блок — это модуль. Чем больше блок, тем больше места. Вы сразу увидите, например, что lodash или moment.js тянут сотни килобайт, хотя вы используете пару функций. Дальше можно резать по фичам или вендорам. На собеседовании Middle и Senior важно не просто знать про Code Splitting, но и уметь находить места для оптимизации. Полный разбор стратегий — в большом видео по ссылке под этим шортсом. #bundleanalyzer #codesplitting #frontend #frontendinterview #middle #senior #techinterview #codinginterview

Даём Claude Code Opus 4.6 и ChatGPT Codex 5.3 реальный баг из жизни разработчика. Промпт звучит так: «Почему-то иногда пропускаются символы в ответах AI, которые приходят дальше на фронтенд. Это свойственно именно для моделей ChatGPT. Найди баг и опиши, почему так происходит, но не корректируй». Задача не простая — нужно не просто найти ошибку, а понять её природу и объяснить причину, при этом ничего не исправляя. Смотрим, кто справился за полторы минуты и чётко описал проблему, а кто ушёл в дебри, начал исправлять то, о чём не просили, или вообще провалил задание. Полное сравнение всех навыков — по ссылке под шортсом. #claude #claudecode #chatgpt #codex #opus #ai #aicoding #aiassistant #ии #bugfixing

Reflow и Repaint — главные враги плавной анимации. Reflow пересчитывает геометрию элементов и происходит при изменении ширины, высоты, паддингов, display none. Repaint перерисовывает пиксели: цвет, фон, тени, visibility hidden. Оба процесса грузят главный поток браузера и убивают 60 fps. Правильная анимация работает на GPU через композитинг — это transform (translate, scale, rotate) и opacity. Они не вызывают Reflow и Repaint, анимация идёт на видеокарте. На собеседовании Middle и Senior важно знать разницу. Полный разбор производительности — в большом видео по ссылке под этим шортсом. #reflow #repaint #cssanimation #gpu #frontend #frontendinterview #middle #senior #techinterview #codinginterview

Claude Code и ChatGPT получили одинаковые данные и задачу — сделать аналитику, а затем собрать отчёт по результатам. Сравниваем, что получилось. У кого таблички, у кого графики, в каком отчёте больше ключевой информации. Качество вёрстки, читаемость, структура — смотрим и сравниваем. Полное сравнение всех навыков — по ссылке под шортсом. #claude #claudecode #chatgpt #codex #opus #ai #aicoding #aiassistant #ии

Всё, что тормозит анимацию — Reflow, Repaint, Compositing, Layout Thrashing — можно отследить в DevTools любого современного браузера (Chrome, Edge, Firefox, Safari). Performance Tab покажет перерасчёты стилей, Layout (Reflow), Paint (Repaint) и Composite Layers (Compositing). Красные полосы на таймлайне — признаки проблем. Layers Panel покажет, какие элементы вынесены в отдельные слои и работают на GPU. Paint Flashing (вкладка Rendering) наглядно подсветит области, которые перерисовываются, — это помогает найти лишние Repaint. На собеседовании Middle и Senior фронтенд-разработчика важно уметь пользоваться этими инструментами. Полный разбор стратегий оптимизации производительности — в большом видео по ссылке под этим шортсом. #devtools #gpu #frontend #frontendinterview #middle #senior #techinterview #codinginterview