Фронтенд

В Додо и Дринкит работают несколько тысяч киосков самообслуживания на iOS, Android и Windows. Чтобы не писать нативный софт и интеграции под каждую систему, мы используем SPA-приложение на React и встраиваем его в хост-приложение на целевой платформе. А в основе интерфейсов всех киосков — фронтенд-приложение, запущенное в WebView внутри нативного приложения

Так мы даём пользователям максимально бесшовный опыт использования киосков. Но есть и обратная сторона медали: если киоск тормозит, пользователи ощущают это мгновенно, а мы не можем так быстро разобраться, где именно возникла проблема с перформансом. Поэтому мы решили измерять производительность напрямую в React-приложении.

С этой задачей столкнулся я — Андрей Боев, техлид команды XXX, отвечающей за опыт пользователей киосков. В этой статье я расскажу, как мы добавили сбор метрики FPS и начали использовать её для системного мониторинга производительности интерфейса, а также почему путь к очевидной метрике оказался не таким уж очевидным. Погнали!

Привет, Хабр!

Мне кажется, что сегодня начинающие фронтендеры уже не пишут код сами. Они отдают всё на откуп искусственному интеллекту. Хорошо это или плохо — судить не буду.

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

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

Давайте посмотрим, что я вам подготовил.

Команда Socket Threat Research обнаружила компрометацию 84 npm-пакетов в пространстве @tanstack: в них внедрили вредоносный имплант Mini Shai-Hulud, нацеленный на кражу учётных данных и секретов из CI/CD-сред, включая GitHub Actions.

Атака особенно опасна тем, что вредонос автоматически запускается при установке зависимостей через lifecycle-хуки npm, а среди затронутых пакетов есть крайне популярные — например, @tanstack/react-router с более чем 12 млн загрузок в неделю, что делает инцидент серьёзной угрозой для безопасности цепочки поставок ПО.

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

Графы функций одним кликом, поиск уязвимостей в сотнях тысяч строк, транзакции в циклах и мёртвые блокировки — всё это можно найти за минуты. История создания бесплатного визуализатора и аудитора кода 1С с открытым исходным кодом.

Собеседования по TypeScript всё чаще проверяют не только знание синтаксиса, но и умение видеть «узкие места» в уже работающем коде. Задача кандидата - не просто сказать «тут ошибка», а предложить более безопасное, читаемое и поддерживаемое решение.

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

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

Помните тот момент, ĸогда вы отĸрываете свой собственный проеĸт, ĸоторый не трогали пару месяцев, и не понимаете, где что лежит? А если ĸ проеĸту подĸлючается новый разработчиĸ, первые две недели он просто бродит по папĸам в попытĸах понять логиĸу автора.

React дал нам невероятную свободу: фунĸциональные ĸомпоненты с хуĸами, состояние в Redux, Context, MobX, Zustand или useState, запросы где угодно и ĸаĸ угодно. Но эта свобода имеет обратную сторону — отсутствие стандартов.

Каждый разработчиĸ пишет «по‑своему». В одном проеĸте мирно сосуществуют устаревшие подходы с современными, запросы ĸ API разбросаны по всему ĸоду, а состояние приложения напоминает спагетти. Проходит полгода, и даже автор ĸода с трудом объясняет, почему все устроено именно таĸ.

Знакомо?

Существует архитеĸтура, ĸоторая решает эти проблемы. Она называется Bulletproof React. Это не очередной шаблон или стартовый boilerplate. Это философия и набор лучших праĸтиĸ для создания production‑ready приложений, ĸоторые не превращаются в хаос через месяц разработĸи. В этой статье я постараюсь разобрать эту архитеĸтуру детально: от струĸтуры директорий до тестирования и безопасности. Данный материал будет полезен и новичĸам, ĸоторые тольĸо начинают задумываться об архитеĸтуре, и опытным разработчиĸам, ищущим проверенные решения.

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

Мы живём в эпоху когда можно написать в чат «сделай мне CRUD» и получить рабочий код через десять секунд что в принципе удобно. И это, если честно, главная причина почему я периодически намеренно лезу в что-то сложное руками — чтобы не разучиться думать о том что происходит внутри.

ИИ я использую. Но в этом проекте он был исключительно быстрой документацией — особенно когда добрался до selection/range API, про которые до этого знал чуть меньше чем ничего. Реализация все равно была за мной.

Так вот — ReadGen. Блочный конструктор README-файлов. Месяц, 2-3 часа в день, React и TypeScript и небольшая пачка дополнительных библиотек для разумного облегчения жизни. Важно понимать что это не коммерческий продукт и не претендует на решение чьей-то боли. Просто техническая задача которую я давно хотел разобрать.

Привет! Меня зовут Родион, и я фронтенд-разработчик. Когда-то в 2022 году писал свои первые сайты на нативном HTML, CSS и JavaScript. С тех пор успел поработать в стартапах и на фрилансе.

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

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

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

Правильная файловая структура - скелет любого фронтенд-приложения. В Vue 3 нет строгих предписаний, как раскладывать файлы по папкам, кроме базового разделения components/, views/. Но с ростом проекта хаотичное размещение кода быстро превращается в проблему. В этой статье разберём популярные подходы к организации Vue-проектов: от простейшего плоского до микрофронтендов.

Медиа-запросы (media queries) - это основа отзывчивого дизайна. Мы используем их для определения того, как должен меняться дизайн на основе размеров области просмотра (viewport). Но синтаксис min-width и max-width может вызывать путаницу, и в некоторых случаях вызывает проблемы макета (layout), которые трудно выявить.

Цель этой статьи - убедить вас использовать запросы диапазонов (range queries), начиная с сегодняшнего дня.

Открываете очередной React-проект в 2026 году и смотрите на белый экран package.json. Какой роутер? Vite или Next.js? shadcn/ui или Mantine? Zustand или всё-таки Redux Toolkit? React Hook Form или TanStack Form? И как вообще теперь делать таблицы — TanStack Table или AG Grid?

Каждая из этих категорий за последние 2-3 года прошла через смену лидера. То что было стандартом в 2022 (Redux, Material UI, Webpack, styled-components, Formik), в 2026 либо в legacy-режиме, либо проиграло свежим конкурентам. Те кто работают в одной экосистеме годами, могут не заметить как сместились веса в соседних слоях стека — пока не открывают новый проект и не сталкиваются с тем что “стандарт”, которым они пользовались, теперь редко выбирают.

Эта статья — карта актуального React-стека 2026 года, разбитая по 60+ категориям. По каждой — что выбрал бы я для нового проекта в 2026, какие есть альтернативы для специфических случаев, что считается legacy и почему. Плюс — типовые комбинации стека под разные виды проектов (SaaS dashboard, collaborative editor, real-time dashboard, streaming app, consumer landing).

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

Быстро собрать прототип страницы, чтобы использовать его для постановки задачи команде. AI не вместо разработчиков, а в помощь Product Owner.

Я попробовал собрать маркетинговый сайт через Claude Design - и быстро упёрся в лимиты токенов и непрозрачность облачного тула. Перешёл на Open Design - open-source альтернативу, которая цепляет твой Claude Code, держит дизайн-систему как DESIGN.md в репозитории и работает локально. Под катом - четыре практики, которые сработали на сайте конференции: design-as-code в git, симлинк дизайнера в код сайта, два markdown-файла под бренд и дизайн токены, и как мы учили автономных агентов делать сайт с помощью нашей дизайн системы

Вы заметили, как часто в чарты популярных стриминговых сервисов стали попадать сгенерированные нейросетями треки? Иногда их можно спутать с реальными творениями, созданными людьми. Например, в феврале 2026 чарты «Яндекс Музыки» и VK впервые возглавил сгенерированный трек. Проект СДП на стихи Есенина набрал 4,2 млн слушателей за месяц, став хитом. 

Но сколько сил вкладывают люди, чтобы создать свой трек, не используя нейросеть? Если сравнить затраты средств и сил на создание реального трека и нейросетевого, думаю ответ очевиден — ИИ-контент создавать гораздо проще. Правда, зачастую он получается не самого лучшего качества. А если все-таки можно сделать что-то достойное при помощи нейросети? Это мы и проверим.

В статье протестируем возможности Suno v5 и ее конкурентов. Попробуем сгенерировать композиции в нескольких жанрах: от джаза и шансона до тяжелого рока. Также мы оценим качество генерации женского и мужского вокала на русском и английском.

Уже не первый раз сталкиваюсь в проектах на Qt QML с проблемой управления диалогами и всплывающими окнами.

QML — декларативный язык и это здорово! Мы описываем, что хотим видеть на экране, и, если всё сделали правильно, при запуске программы получаем желаемый результат.

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

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

Вторая проблема, как по мне, куда хуже — при создании экрана в приложении будут созданы и все дочерние элементы. То есть диалог может потреблять память, хотя по факту пользователь может так им и не воспользоваться.

Другой вариант, который тоже часто встречается — это обёртка диалога в Component и его непосредственное создание в нужный момент. С точки зрения потребления памяти это уже лучше, но проблему лишнего кода это не решает. Зачастую из-за подготовки такого диалога кода может оказаться даже больше. К тому же нужно не забывать вызывать destroy() для всех динамически созданных объектов, когда они больше не нужны.

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

Как и в предыдущие месяцы, по итогам апреля мы решили рассказать про то, как изменилась GigaIDE за прошедший месяц. Ниже краткий обзор обновлений PRO-функциональности GigaIDE, который можно найти на нашем маркетплейсе.

ПО для ПК дорого уже потому, что нужен ПК, да еще и с такой же дорогой видеокартой(ами). ПК проигрывает и в надежности, и в обслуживании, в тысячи раз проигрывает в работе без электропитания.

Спецлаб предоставляет разработчикам Non-PC-based устройство по цене оборудования с возможностью имплантации собственных нейронных сетей – поддерживается семейство ONNX.

FPGA продвинутого типа является универсальным устройством для большого круга задач. В нем есть место и распознаванию объектов, и контролю физических величин, и управлению устройствами, и промтовой логике, и архивам хранения, и аппаратным кодерам с декодерами в рамках разрешения 8К, и всем компьютерным интерфейсам.

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