TypeScript *

Месяц назад я баловался с сервисом Lovable — мне показался прикольным инструментом, а главное, что он предложил мне настроить БД на Supabase с помощью пары кликов. База Postgres уже крутится, таблицы создаются, в админке всё прозрачно и, главное, что вск это бесплатно в пределах небольших квот.

Пока щёлкал UI заметил раздел Functions. «Что‑то похожее на AWS Lambda, только прямо рядом с базой». Отложил идею «попробовать на боте» в долгий ящик.

И тут несколько дней назад релиз OpenAI Images API. Захотелось сделать простого бота фотку за пару тапов, а не лезть постоянно в Playground. Вспомнил про Supabase → идеальный шанс обкатать edge‑функции без боли с серверами.

Как обычно для себя, накидал мысли по тому, как должен работать бот и на чем, и попросил ChatGPT накидать первые черновики ТЗ. Несколько правок и плюс-минус полное описание задачи было на руках. Затем пошёл в Claude через OpenRouter — он выплюнул скелет кода под Supabase edge functions. Имея на руках написанный код я пошел его править локально и запускать постепенно погружаясь в Deno и работу функций.

Архитектура решения

Привет всем! Меня зовут Антон Галич, я фронтенд-инженер в департаменте разработки Analytics Platform в Авито. В этой статье я рассказываю историю о том, как мы перевели аналитику для внутренних сервисов компании на нашу собственную платформу, отказавшись от стороннего решения Amplitude.

JetBrains зарелизил новую версию своего AI-ассистента и вместе с ним Junie - автономного нейросетевого агента-программиста, которому можно поручать небольшие рабочие задачи.

Буквально вчера я получил к нему доступ и не смог не воспользоваться возможностью. Я даже не представлял...

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

Старался сделать доступным для широкой аудитории.

Когда-то я занимался спортивными парными танцами. Часто на тренировках была необходимость узнать темп (или скорость, если немного подушнить насчёт терминов) играющего трека, который измеряется в «ударах в минуту» (beats per minute, bpm)

Спортсмены используют для этого разные сайты/приложения, где нужно пальцем «протапать» ритм. Я и сам таким пользовался, но однажды я задался вопросом — смогу ли я сделать браузерный сервис, который сможет определять bpm из записанного через микрофон аудио

Эта статья как раз о том, как я его сделал

Я не буду вдаваться в тонкости реализации непосредственно UI: у меня уже был на момент начала разработки пет-проект на React, и сервис я решил делать на базе него.

Всем привет! Меня зовут Виген Мовсисян, я Frontend-разработчик в QIC digital hub. В этой статье я расскажу, как мы внедрили технологию Canvas, какие задачи он помогает решать, что уже успели сделать и какие у нас планы на будущее.

Материал основан на моём докладе с QIC Tech Meetup, полную запись вы можете найти на YouTube.

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

*В текущей версии отсутствует кнопка «Назад» — для возврата в предыдущий раздел воспользуйтесь стандартной кнопкой браузера. 

Итак, начнём погружение в удивительный мир возможностей Canvas.

Как понять, что реально делают ваши UI автотесты?

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

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

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

Эта статья - своеобразный мини-гайд для быстрого старта вместе с Cypress и axe-core. 

Почему такое сочетание технологий? 

Axe-core - это надежный движок, соответствует стандартам WCAG. Он проверяет действительно реальные проблемы: контраст, aria-label, роли, альтернативный текст. Его легко интегрировать.

Cypress - удобный фреймворк, с огромным количеством функций “из коробки”. Легкая установка, большое количество примеров. Сохраняет скриншоты, делает запись видео, идеален для пользовательских тестов.

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

В далёком Контуровском царстве, в чудесном Фокусовском государстве жила-была дружная команда разработчиков. Денно и нощно они создавали интерфейсы для поиска надёжных контрагентов, возводя величественные «палаты» функциональности и прокладывая пути обновлений. Но однажды, дабы ускорить доставку фич и снизить нагрузку на фронтендеров, было решено привлечь необычных существ — примитивов...

Около полутора лет назад я опубликовал на Хабре статью под названием "Слово Божие — функциональное программирование как основа Вселенной", в которой я рассказывал про лямбда-исчисление и про то, как программу любой сложности можно свести к алгоритму на базе всего трёх SKI-комбинаторов или же одного единственного йота-комбинатора. В ней мы разобрались с алфавитом божественного языка, на котором написана книга мироздания. Теперь же пришло время разобраться с его грамматикой.

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

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

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

Представьте оживлённый перекрёсток без светофоров и знаков приоритета. Машины едут в разных направлениях, кто-то пытается проскочить первым, кто-то резко тормозит. Рано или поздно это приведёт к аварии.

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

Долгое время разработчики обходились кустарными решениями — флагами в localStorage, хитрыми setInterval и т.д. Но с появлением Web Locks API у нас наконец появился стандартный способ расставить приоритеты в этом хаосе.

Web Lock API — это механизм, позволяющий скриптам, находящимся в рамках одного orign, блокировать доступ к ресурсу, удерживать блокировку пока выполняется необходимый код, а затем разблокировать ресурс, чтобы другие части программы могли получить к нему доступ.

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

Спойлер: получилось! Теперь у меня есть рабочий плагин для заметок в Figma, который экономит время и нервы команде.

В статье рассказываю, как пошагово прошла путь от идеи до рабочего плагина. Без магии, с фейлами, но с кайфом ✨

RxJS — штука мощная, но одновременно и коварная. Многие новички, освоив такие базовые операторы, как map, filter и, возможно, даже take, начинают чувствовать себя уверенно. Но в какой-то момент они сталкиваются с задачами, где нужно сочетать несколько потоков одновременно… и всё! Паника. Что выбирать: combineLatest, forkJoin, merge, zip? А что делать, если данные приходят с разной скоростью? Этот материал для тех, кто запутался на этом этапе. Давайте попробуем спокойно и пошагово разобраться.

Привет! Меня зовут Дмитрий, и я уже много лет работаю с TypeScript. За это время я был частью разных команд с разным уровнем владения этим языком, в том числе тех, кто только готовился перевести проект с JavaScript. И нередко я замечал, что разработчики воспринимают TypeScript не как инструмент, упрощающий работу, а как рутинную обязанность, которая лишь замедляет процесс. В этой статье я расскажу, как сделать TypeScript своим союзником и заставить его работать на вас, а не против.

Хочу поведать о своей библиотеке для написания тестов в транзакция при работе с MySQL.

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

Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.

🐝 Fine tuning роя агентов

В вакансиях LLM инженеров присутствует слово RAG. Это подразумевает интеграцию во внешнюю базу данных. Можно дешевле - fine tuning. Что это и как поставить работу описано в этой статье

Представьте, что вы разрабатываете новую функцию в приложении, но пока не готовы открыть её всем пользователям. Хочется выложить код на продакшн, но оставить функцию «под замком» до поры до времени. В таких случаях на помощь приходят feature flags (по-русски часто говорят «фича-флаги») — специальный механизм переключения функциональности. Проще говоря, фича-флаг – это пара «ключ – значение (обычно булевое)», которая определяет, активна ли та или иная возможность в приложении. В коде это проявляется как условие: если флаг включён, выполняется новая логика, а если выключен – используется старое поведение. С помощью фича-флагов можно не только скрывать незавершённые функции за условными операторами, но и гибко управлять их постепенным запуском для аудитории (например, включать новую фичу только для X% пользователей).

На первых порах разработчики часто реализуют флаги «локально» – в виде переменных конфигурации, констант или параметров в коде приложения. Такой локальный флаг хранится и меняется непосредственно в приложении (или на сервере, где оно запущено). Этот подход может сработать в небольшом проекте, но в масштабе команды и множества окружений у него быстро обнаруживаются недостатки. Во-первых, если значение флага жёстко прописано в конфигурации или коде, для его изменения зачастую требуется выкатывать новую версию приложения (то есть делать повторный деплой). Возможность динамически «покрутить тумблер» теряется, и смысл фич-флагов частично сводится на нет. Во-вторых, появляется рассинхрон между окружениями: например, в продакшене новый флаг включён через удалённую конфигурацию, а в тестовой сборке по умолчанию выключен. В итоге тестировщикам приходится вручную приводить локальные значения флагов в соответствие с продакшеном, что неудобно и чревато ошибками. Кроме того, без общего подхода трудно отслеживать, какие флаги существуют в системе, кто и когда их включал, и на что они влияют.