От favicon до криптографии: как мы уместили 167 рабочих инструментов в одном сервисе

Frontend-Sisyphus19 часов назад

От favicon до криптографии: как мы уместили 167 рабочих инструментов в одном сервисе

Уровень сложностиСреднийВремя на прочтение7 минОхват и читатели6.4KTypeScript*ReactJS*WebAssembly*Программирование*Развитие стартапаКейсИз песочницыМы с Алексеем были двумя молодыми и неопытными 16-летними парнями и познакомились на первом курсе колледжа. Программа колледжа, в котором мы учились, не успевала за индустрией. Это факт, с которым мы столкнулись на первом курсе. Пока на парах мы изучали технологии пятилетней давности, реальный мир фронтенда уже жил в экосистеме React, Next.js и WebAssembly. Хочешь быть востребованным — учись сам. Мы с Алексеем так и делали: вечерами после пар разбирали современный стек, читали документацию, писали пет-проекты и спорили об архитектуре. Также это сподвигло нас на участие в только что зарождавшемся IT-сообществе для таких же горящих идеями ребят.

Именно эта тяга — догонять и перегонять — сподвигла нас создавать инструменты, которые пригодились бы таким же студентам и разработчикам, как мы. Не абстрактные «проекты для портфолио или диплома», а реально полезные штуки, которыми хочется пользоваться каждый день. Так четыре года назад родилась идея Halfcoder — набора инструментов для разработчиков, в котором всё работает быстро, бесплатно и без отправки данных на сервер. Эту идею Лёша уже носил в голове, и она не давала ему покоя в ходе студенческой деятельности: почему каждый раз, когда нужно отформатировать JSON, декодировать Base64 или сгенерировать UUID, приходится открывать пять разных вкладок? Почему на одном сайте работает быстро, но завалено рекламой, на втором — симпатичный интерфейс, но тормозит, а третий вообще требует регистрации ради кнопки "Скопировать"?

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

Что получилось

На halfcoder.ru сейчас живёт 167 утилит и 8 интерактивных песочниц. Если кратко — это швейцарский нож для разработчика, который целиком работает в браузере.

Что внутри:

• Форматтеры: JSON, XML, CSS, HTML, SQL, YAML, TypeScript, PHP, Python
• Конвертеры: цветов, Markdown в HTML, CSV, изображений (PNG/JPEG/WebP), favicon-генератор
• Кодировщики: Base64, Base32, Unicode, Hex, Punycode
• Генераторы: паролей (с crypto.getRandomValues), UUID v1/v3/v4/v5/v7, robots.txt, multipart/form-data, OAuth 2.0, WebSocket handshake
• Криптография: кодирование и раскодирование в разные форматы
• Изображения: получение цвета и метаданных, конвертация форматов
• DevOps-конфиги: готовые шаблоны Dockerfile, docker-compose, nginx.conf, манифесты Kubernetes
• Шпаргалки: от бэкенда до Kubernetes
• Песочницы: JavaScript, Python, SQL, Regex, Bash (эмулятор), HTML/CSS, Markdown, CronВсё это бесплатно, без рекламы и без регистрации.

А еще шпаргалки, гайды и песочницы

Стек

Проект основан на Next.js 14 с App Router. Из библиотек мы использовали следующие:

• CodeMirror 6 — редактор для всех песочниц и форматтеров. Не решились брать Monaco, потому что CodeMirror легче и лучше дружит с динамическими импортами.
• Zustand выбрали в качестве стейт-менеджера. Обошлись без Redux, так как в проекте с сотней независимых утилит такое переусложнение не требуется, а Zustand позволяет создавать локальные сторы ровно там, где они нужны.
• Tailwind CSS — стилизация. С сотнями уникальных страниц писать CSS классическим образом было бы безумием.
• Lucide React — иконки. Лёгкие и современно выглядят.
• DOMPurify — безопасность HTML в Markdown-песочнице. Без него превью было бы дырой размером с XSS.
• SQL.js — SQLite, скомпилированный в WebAssembly. Работает прямо в браузере, без сервера.

Архитектура: всё на клиенте

Главное архитектурное решение, к которому мы пришли в Halfcoder: все утилиты работают на клиенте, без отправки данных на сервер.

Это означает:

• Никакой серверной обработки пользовательских данных
• Мгновенный отклик: данные не уходят в сеть
• Приватность по умолчанию: ваш JSON, ваш SQL-запрос, ваш пароль никогда не покидают браузерИсключений нет вообще. Даже конвертация изображений работает на Canvas API — файл загружается в браузер, обрабатывается в скрытом <canvas> и отдаётся пользователю через canvas.toDataURL().

Вот, например, код favicon-генератора — чистая работа с Canvas на клиенте:

const generateFavicons = (imageFile: File) => { const reader = new FileReader();

reader.onload = (event) => { const img = new Image();

img.onload = () => {
sizes.forEach(size => {
const [width, height] = size.split("x").map(Number);

const canvas = document.createElement("canvas");

canvas.width = width; canvas.height = height;

const ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, width, height);

results[size] = canvas.toDataURL("image/png"); }); };

img.src = event.target?.result as string;
};
reader.readAsDataURL(imageFile);
};Так выглядит сам генератор

Песочницы: изоляция без Docker

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

JavaScript — Web Worker

Код выполняется в отдельном Web Worker'е. Нет доступа к DOM страницы, нет доступа к window, нет доступа к document. console.log перехватывается и выводится в панель вывода через postMessage. Даже если пользователь напишет бесконечный цикл, основной поток не заблокируется, а воркер можно прибить по таймауту.

Python — Pyodide

Доступна стандартная библиотека, но нет pip и нет доступа к файловой системе хоста. Пользователь может импортировать json, re, math, но не может сделать import os и пройтись по файлам сервера.

SQL — SQL.js (SQLite в Wasm)

Выполняется в Web Worker, Wasm-файл подгружается с того же origin (никаких CDN). Пользователь может создавать таблицы, делать SELECT, JOIN, GROUP BY — всё, что умеет SQLite, но в изолированной песочнице браузера.

HTML/CSS — IFrame с sandbox

Превью рендерится в <iframe sandbox="allow-scripts">. Скрипты внутри превью выполняются, но изолированно: без доступа к cookie и DOM родительской страницы. Даже если пользователь напишет <script>document.cookie</script>, он не получит сессионные cookie Halfcoder.

Markdown — DOMPurify

HTML-превью после рендеринга Markdown прогоняется через DOMPurify. Все <script>, on*-обработчики и произвольные теги вырезаются. Результат — безопасный HTML, который можно вставить в DOM без риска XSS.

Bash — эмулятор

Поддерживает echo, export, pwd, wc, grep, head, tail, cat и пайпы (|). Работает на клиенте, написан вручную — никаких серьёзных системных вызовов, только парсинг команд и симуляция вывода.

Regex — нативный JavaScript

Обычный new RegExp() с визуализацией совпадений. Никакой магии, но CodeMirror делает подсветку синтаксиса регулярки приятной.

Cron — cron-parser + Luxon

Расписание парсится через cron-parser v5, текстовое описание генерируется через cronstrue, даты — через Luxon. Все три библиотеки работают на клиенте.

Форматтеры и кодировщики: пишем руками

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

• Prettier весит немало, а нам нужно много разных форматтеров
• Для некоторых языков (SQL, YAML) Prettier требует плагины, которые добавляют ещё больше веса
• Мы хотели полный контроль над форматированием и отсутствие сайд-эффектовВот, например, как мы сделали SQL-форматтер — чистые регулярки и парсинг строк:

const formatSql = () => {
let formatted = input
.replace(/\s+/g, " ")
.replace(/\s*,\s*/g, ", ")
.replace(/\s*\(\s*/g, " (")
.replace(/\s*\)\s*/g, ") ")
.trim();

const keywords = ["SELECT", "FROM", "WHERE", "JOIN", /* ... */];

keywords.forEach((keyword) => {
const regex = new RegExp(`\\b${keyword}\\b`, "gi");

formatted = formatted.replace(regex, keyword); });

formatted = formatted
.replace(/\bSELECT\b/gi, "\nSELECT")
.replace(/\bFROM\b/gi, "\nFROM")
.replace(/\bWHERE\b/gi, "\nWHERE")
/* ... */;
};Ничего лишнего, только то, что нужно для выполнения задачиДа, это не полноценный SQL-парсер. Но для 90% повседневных запросов этого хватает.

Аналогично сделаны:

• YAML-форматтер — нормализация отступов (табы → пробелы, выравнивание по уровням)
• HEX/Unicode кодировщики — charCodeAt + toString(16) в цикле
• Base64 декодер — нативный atob() с обработкой ошибок
• UUID-генератор — crypto.getRandomValues с ручной расстановкой битов версии и вариантаДля JSON-форматтера хватило нативного JSON.parse + JSON.stringify с параметром space = 2.

Генератор паролей: crypto API без компромиссов

Отдельно хотел бы остановиться на генераторе паролей. Это не Math.random(), который даёт предсказуемые значения. Мы решили использовать crypto.getRandomValues — криптографически стойкий генератор случайных чисел:

const array = new Uint32Array(length);

crypto.getRandomValues(array);

for (let i = 0; i < length; i++) {
password += chars[array[i] % chars.length];
}Пользователь выбирает длину (от 4 до 128 символов), количество паролей (до 20 за раз) и наборы символов: заглавные, строчные, цифры, спецсимволы. Интерфейс — кастомные чекбоксы с анимацией, стилизованные под единый дизайн.

Роутинг и ленивая загрузка

Со 167 утилитами мы не могли позволить себе загружать всё сразу. Next.js 14 с App Router даёт нам возможность использовать динамические импорты на уровне страниц. Каждую утилиту положили в отдельную директорию с помощью [slug]/page.tsx и загружаем только при переходе на неё.

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

Дизайн и UX

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

• Тёмная тема по умолчанию с возможностью изменения
• Минимум отвлекающих элементов
• Кнопка «Копировать» всегда под рукой
• Поле ввода и поле вывода на одном экране (для форматтеров)По итогу изначальная версия дизайна в разы отличается от текущей, но мы довольны результатом.

Что дальше

Halfcoder для нас — это проект для души и для сообщества. Мы не гонимся за монетизацией, хотя не исключаем, что когда-нибудь она появится, если проект взлетит. Сейчас наша цель — сделать максимально полезный инструмент для разработчиков.

В ближайших планах:

• Календарь с IT-событиями (хакатоны, конференции и т. д.)
• Коллекция часто используемых шаблонов кода (привет, StackOverflow)Будем рады, если вы заглянете на halfcoder.ru, потестируете утилиты и, возможно, найдёте баги или предложите идеи для новых инструментов. Мы открыты к фидбеку и всегда на связи.

Фидбек можете писать одному из создателей проекта: Алексей Овчинников (@allelleo) и Борис Карабут (@SisyphusOfFrontend).

Это моя первая статья на Хабре, так что буду рад любой обратной связи: что получилось хорошо, что можно улучшить, о чём рассказать подробнее в следующий раз, а где можно покороче.Теги:• инструменты для разработчиков
• песочницы в браузере
• форматтеры кода
• WebAssembly
• CodeMirror
• Next.js
• Web WorkerХабы:• TypeScript
• ReactJS
• WebAssembly
• Программирование
• Развитие стартапа