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

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

Документация и справка

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

DevDocs

Агрегатор документации, который собирает справочники десятков языков и фреймворков под одним поиском — от HTML и CSS до Python и Node.js. Главная фишка — работа офлайн: один раз скачиваешь нужные наборы, и дальше документация открывается мгновенно даже без интернета. Удобно, когда не хочешь держать пятнадцать вкладок MDN и при этом скакать между разными сайтами с разным дизайном.

MDN Web Docs

Канонический справочник по вебу, который ведёт Mozilla при участии Google и Microsoft. Если нужно понять, как именно ведёт себя flex-basis или какие параметры принимает fetch — ответ ищут здесь, а не в случайных туториалах. Те самые наборы документации, которые DevDocs показывает офлайн, в значительной части тянутся именно из MDN. Держать в закладках стоит обязательно: это первоисточник, на который ссылаются все остальные.

Can I Use

Сервис, который отвечает на единственный, но вечный вопрос: «а это вообще будет работать в Safari?». По любому CSS-свойству, HTML-тегу или JS API он показывает таблицу версий браузеров с процентом покрытия аудитории и сносками про частичную поддержку. Незаменим перед тем, как тащить в прод свежую фичу. Кстати, виджеты поддержки браузерами в наших статьях собираются как раз по данным с Can I Use.

web.dev

Ресурс Google с гайдами по производительности, доступности и безопасности — и, что важнее, с практическими чек-листами под актуальные метрики Core Web Vitals. Здесь же живёт документация по Lighthouse — инструменту аудита, встроенному прямо в DevTools. Если страница тормозит, а почему — непонятно, разбор стоит начинать отсюда. Смежная тема — инструменты для тестирования сдвигов макета (CLS).

free-for.dev

Огромный курируемый каталог сервисов с бесплатным тарифом для разработчиков: хостинг, базы данных, мониторинг, CI, рассылки, аналитика. Список ведётся на GitHub сообществом и постоянно обновляется, поэтому мёртвые проекты из него вычищаются, а новые добавляются. Первое место, куда стоит заглянуть, прежде чем платить за сервис, у которого почти наверняка есть бесплатный аналог.

Песочницы и фейковые данные

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

CodeSandbox

Онлайн-редактор для веб-проектов с поддержкой популярных стартеров: React, Vue, Next.js, чистый Vanilla. Поднимает рабочее окружение со сборкой, npm-зависимостями и живым превью без единой команды в терминале. Идеален для воспроизводимых демо: кидаешь ссылку — и человек видит ровно то же, что и ты, без «а у меня не запускается».

StackBlitz

Прямой конкурент CodeSandbox с одним серьёзным козырем — технологией WebContainers: полноценный Node.js крутится прямо во вкладке браузера, а не на удалённом сервере. Это значит мгновенный старт дев-сервера, работу офлайн и отсутствие задержек на сетевое окружение. Если нужно показать что-то на стеке Node — вспомни, как устроены node, npm и yarn, и StackBlitz даст это пощупать без локальной установки.

Когда какую песочницу брать — короткая шпаргалка:

JSONPlaceholder

Бесплатное фейковое REST API: посты, комментарии, пользователи, задачи — всё это уже лежит на сервере и отдаётся по обычным запросам. Когда верстаешь список, а бэкенд ещё не готов, не нужно поднимать заглушку самому — достаточно дёрнуть готовый эндпоинт. Поддерживает не только GET, но и имитацию POST/PUT/DELETE, так что можно отрепетировать весь набор методов fetch до появления настоящего бэкенда.

Тестирование и адаптивность

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

Responsively App

Бесплатное приложение с открытым исходным кодом: открывает сайт сразу в нескольких виртуальных устройствах рядом, а прокрутка и клики синхронизируются между всеми экранами одновременно. Меняешь CSS — и видишь результат на мобильном, планшете и десктопе в один момент, без переключения вкладок. Здорово экономит время на рутинной проверке брейкпоинтов.

Polypane

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

LambdaTest Free Tools

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

Конвертеры и форматирование

Перевести один формат в другой, причесать минифицированный JSON, превратить HTML в JSX — всё это занимает секунды, если под рукой нужный сервис, и полчаса нытья, если его нет.

Transform.tools

Швейцарский нож для конвертации форматов прямо в коде: HTML → JSX, JSON → TypeScript-типы, CSS → JS-объект, GraphQL → типы и ещё десятки направлений. Особенно выручает, когда переносишь готовую вёрстку в React-компонент — не нужно вручную переименовывать class в className и закрывать одиночные теги. Всё работает в браузере, ничего не уходит на сервер.

Convertio

Универсальный онлайн-конвертер, который тянет более 300 форматов — документы, картинки, таблицы, аудио, видео. У него есть отдельные страницы под конкретный таргет, например конвертер в AVIF или WebP, что удобно для подготовки картинок. Обработка серверная, поэтому бесплатно проглатывает довольно тяжёлые файлы — подробнее про этот сценарий в обзоре инструментов для оптимизации картинок.

Code Beautify

Сборник из сотни мелких утилит на одном сайте: форматировщики и валидаторы JSON, XML, SQL, CSS, минификаторы, конвертер картинки в base64, генераторы и дифф-инструменты. Не самый красивый интерфейс на свете, зато под рукой почти всё, что иногда нужно ровно один раз и не стоит установки отдельной программы.

TinyWow

Большая коллекция простых бесплатных инструментов для работы с PDF, картинками и текстом: сжать, объединить, конвертировать, обрезать, удалить фон. Без водяных знаков и без обязательной регистрации — редкость в нише «всё-в-одном» PDF-сервисов. Хорошая палочка-выручалочка, когда заказчик прислал PDF, а нужен набор картинок.

Картинки: заглушки и обработка

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

Lorem Picsum

Генератор заглушек на настоящих фотографиях: запрашиваешь картинку нужного размера по простому URL вида picsum.photos/600/400 — и получаешь случайное фото. Можно зафиксировать конкретный кадр по id, попросить размытие или чёрно-белый вариант. Идеально для прототипов, где вместо серых прямоугольников хочется живую картинку.

placehold.co

Когда нужна не фотография, а честный плейсхолдер с подписью размера — одноцветный прямоугольник с текстом прямо в URL: placehold.co/600x400. Настраиваются цвет фона, цвет текста, формат (PNG, SVG, WebP) и собственная надпись. Это современная замена старому placeholder.com: тот ещё работает, но placehold.co отдаёт SVG и обновляется живее.

remove.bg

Автоматически находит на фотографии главный объект и убирает фон, отдавая прозрачный PNG. То, на что в Photoshop уходят минуты возни с выделением, здесь происходит за пару секунд. Бесплатно отдаёт результат в небольшом разрешении, полноразмерные выгрузки — платно, но для веб-превью и аватарок бесплатного хватает.

AI Image Enlarger

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

Squoosh

Веб-сжиматель картинок от команды Chrome Labs со слайдером «до/после» и поддержкой современных кодеков (WebP, AVIF, MozJPEG). Работает целиком в браузере — файл наружу не уходит, что важно, если картинка под NDA. Прежде чем заливать баннер на сайт, прогнать его через Squoosh — самое дешёвое улучшение скорости загрузки. Какой формат под какую картинку выбрать — разобрано в статье про JPEG, PNG, WebP и AVIF.

Код в красивую картинку

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

Carbon

Дедушка жанра: вставляешь код — получаешь картинку с подсветкой, выбором темы, шрифта и фона. Настраивается практически всё: язык, оформление окна, отступы, тень. Именно Carbon задал визуальный язык, который потом скопировали все остальные.

ray.so

Минималистичный генератор от команды Raycast: меньше настроек, чем у Carbon, зато подобранные дизайнерами палитры, на которых сложно сделать некрасиво. Когда нужно быстро и со вкусом, без копания в полусотне опций — берут именно его.

Shots.so

Чуть шире по задаче: не только код, а любой скриншот в красивой рамке — в окне браузера, на экране телефона или ноутбука, на градиентном фоне. Незаменим, когда оформляешь кейс в портфолио или превью проекта для соцсетей.

Дизайн и вдохновение

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

Figma

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

UI Verse

Открытая библиотека готовых UI-элементов — кнопок, переключателей, карточек, лоадеров — с кодом на чистом CSS или Tailwind. Каждый элемент можно скопировать одним кликом и докрутить под себя. Отличный источник идей, когда нужен симпатичный микро-компонент, а времени придумывать анимацию hover нет.

Mobbin

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

LandingFolio

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

Деплой и автоматизация

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

Vercel

Облачная платформа для деплоя фронтенда: подключаешь репозиторий — и каждый пуш автоматически собирается и выкатывается, с превью-ссылкой на каждую ветку. Из коробки даёт CDN, serverless-функции и SSL. Родной дом для Next.js (Vercel его и разрабатывает), но прекрасно тянет и статику, и другие фреймворки. Бесплатного тарифа хватает для пет-проектов и портфолио.

Netlify

Ближайший аналог Vercel и его давний конкурент: тот же сценарий «подключил Git — получил автодеплой», плюс формы без бэкенда, serverless-функции и удобные редиректы. Исторически Netlify сильнее в стороне статических сайтов и Jamstack, Vercel — в Next.js. Разумно попробовать оба и осесть на том, чей интерфейс ближе.

Zapier

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

Бонус: текст и регулярные выражения

Две вещи, на которых разработчики регулярно теряют время на ровном месте: связный текст и регулярки.

Hemingway Editor

Редактор, который подсвечивает громоздкие предложения, пассивный залог и лишние наречия, оценивая читаемость текста. Документацию, README или описание проекта он помогает довести до состояния «понятно с первого раза». Заточен под английский, но базовые подсказки про длину предложений полезны на любом языке.

regex101

Песочница для регулярных выражений с подсветкой совпадений в реальном времени и, главное, с панелью-объяснялкой: для каждого куска паттерна расписано, что он делает. Поддерживает диалекты разных языков, включая JS-флавор. Любая нетривиальная регулярка собирается здесь за пару минут вместо часа отладки методом тыка прямо в коде.

Как не утонуть в инструментах

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

• Закладки по папкам, а не по памяти. Заведи в браузере папки вроде «картинки», «песочницы», «деплой» и раскидай туда то, чем реально пользуешься. Инструмент, который не нашёл за пять секунд, для тебя не существует.
• Сервис не заменяет понимание сборки. Онлайн-конвертер хорош для разовой задачи. Если картинок десятки или формат конвертируется постоянно — это место для плагина сборщика, а не для ручного перетаскивания файлов мышкой.
• Следи, что уходит на чужой сервер. Инструменты, которые работают целиком в браузере (Squoosh, Transform.tools), не отправляют твои файлы наружу. Для чего-то под NDA это решающий аргумент против серверных конвертеров.
• Помни про лимиты бесплатных тарифов. Размер файла, число операций в день, водяные знаки — у каждого сервиса свои. Перед тем как встроить сервис в рабочий процесс, прикинь, не упрёшься ли в потолок через неделю.
• Инструменты приходят и уходят. Хороший пример — популярная песочница Glitch, которая закрыла хостинг приложений в июле 2025 года. Не привязывайся намертво к одному сервису и держи под рукой free-for.dev, чтобы быстро найти замену.

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