TypeScript *

Всем привет! Меня зовут Виген Мовсисян, я 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% пользователей).

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

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

Хорошая новость: распутать спагетти-код можно по-разному, и иногда срабатывают не самые очевидные способы. В нашем случае помогла комбинация действий: не просто выделение части кода в отдельные микросервисы, но и параллельная реализация архитектурного подхода DDD Lite (в связке с принципами чистой архитектуры).

О том, как в рамках кейса мы избавились от спагетти-зависимостей, поделили сервис на чёткие слои, упростили поддержку и масштабирование кода, — рассказываем под катом. Плюс делимся рекомендациями: кому и при каких сценариях связка «DDD Lite + микросервисы» может пригодиться.

Эта статья рассказывает о интеграционных пакетах AI от Effect – наборе инструментов для упрощения работы с крупными языковыми моделями (LLM) в современных приложениях. В ней подробно описывается, как можно использовать универсальные сервисы для разработки AI‑функционала, не привязываясь к конкретному провайдеру, что позволяет сократить объем «клейкого кода» и снизить технический долг.

Авторы делятся опытом создания системы, в которой взаимодействия с LLM становятся максимально удобными и гибкими. Рассматриваются вопросы тестирования, параллельного выполнения запросов, стриминга ответов и мониторинга производительности – всё это делает интеграцию с AI не только мощным, но и надежным решением для разработки сложных приложений.

Данная статья будет полезна разработчикам, стремящимся внедрить передовые технологии AI в свои проекты без лишних сложностей. Она показывает, зачем нужен подход, независимый от провайдера, и почему использование Effect может значительно упростить жизнь при работе с различными поставщиками LLM.

В каком состоянии сейчас JavaScript-разработка? Насколько значим стал TypeScript? Напишут ли уже нейросети за нас юнит-тесты? Что можно закодить в вебе с помощью Emscripten? (спойлер: например, «Героев Меча и Магии»).

Конференции всегда помогали «держать руку на пульсе» и понимать состояние индустрии. А в этот раз перед HolyJS мы ещё и затеяли опрос TechRadar, где разработчики отвечают, чем именно они пользуются. И на конференции узнаем ответы.

До начала HolyJS 2025 Spring осталось меньше недели, и мы публикуем на Хабре полную программу докладов. Возможно, по ней вы поймёте, хотите ли на конференцию. А возможно, просто пробежитесь глазами по названиям, и уже по ним поймёте, что волнует JS-разработчиков в 2025 году.

💻 Применение Nginx для балансировки нагрузки LLM чат сессий

В сети много примеров подключения LLM модели к Telegram-боту, но при большом числе пользователей нет руководств по распределению нагрузки между процессами — все туториалы предлагают монолит с одной репликой. Эта статья объясняет, как балансировать нагрузку бота для тысяч пользователей, в том числе, после подключения model context protocol для интеграций

Привет, Хабр! Я yukk1ro, и сегодня хочу рассказать о своем проекте, который призван сделать обучение программированию более доступным и эффективным.