Все потоки
Поиск
Написать публикацию
Обновить
28.41

TypeScript *

Cтрого типизированная надстройка для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Продвинутые методы использования TypeScript в реальных проектах

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров7.7K



Ранее на Piccalilli Сэм Роуз поделился реальными примерами использования вспомогательных типов (utility types) TypeScript. Сегодня я хочу продолжить эту тему и поделиться несколькими продвинутыми возможностями TypeScript для работы с типами, которые, на мой взгляд, особенно полезны и применимы в реальных проектах.


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

Читать дальше →

Фронтенд — новый легаси: Как мы проспали event-driven революцию

Время на прочтение14 мин
Количество просмотров34K

Введение: Архитектурное дежавю

Вы когда-нибудь замечали, как цифровой мир движется по спирали? В 2018 году я, размахивая Dockerfile и Helm-чартами, внедрял микросервисы на C# с RabbitMQ — всё ради священной цели «низкой связанности». А через три года, переключившись на Angular, с ужасом осознал: фронтенд-компоненты общались через цепочки Input/Output, словно это 2005-й, а мы пишем WinForms.

Это как собрать космический корабль, но управлять им через телеграф. На бэкенде мы гордо декларируем event-driven architecture, а на фронтенде компоненты перешёптываются через пропсы, будто подростки на школьной дискотеке. Ирония? Чем сложнее становились наши системы, тем больше они напоминали те самые монолиты, от которых мы бежали в мире backend.

Читать далее

Архитектура от тестов: Проектируем код, который легко поддерживать

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров6.5K

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

Читать далее

Solid.js как альтернатива (P)React+MobX на практике

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров4.6K

Как известно, у Solid довольно скудная экосистема, поэтому для сложных проектов я беру React+MobX. Однако недавно подвернулся небольшой mobile-only проект, в котором разве что маскированные инпуты и кастомные селекты, которых для Solid предостаточно. При этом требования к размеру выходных файлов и перфомансу были высокие.

Очевидным решением посчитал взять Solid, заодно и сравнить его по всем параметрам (размер, перфоманс, возможности реактивности, удобство настройки) в реальном проекте. Никаких синтетических тестов с рендерингом больших таблиц и хранением в сторе нескольких мегабайт данных не будет, зато приведу замеры из реального приложения. Бонусом — репозиторий с универсальной архитектурой для Solid+Preact+React, где замена фреймворка (набора стейт‑менеджер + рендеринг UI) производится одной строчкой кода.

Читать далее

Zod v4: Стал в 17 раз медленнее? (и почему это важно)

Время на прочтение4 мин
Количество просмотров3.6K

Всем привет! 👋

Я — Дмитрий, автор Sury — самой быстрой библиотеки для работы со схемами. Если вы фанат Zod (а кто не фанат?), эта статья для вас. Сегодня я поделюсь неожиданными результатами тестов производительности Zod v4, расскажу, что это значит для вас, и как избежать подводных камней.

Zod v4: Стал в 17 раз медленнее и никто этого не заметил 🙈

Начнём с небольшого кликбейта.

Это действительно так, но, конечно, не вся правда. Давайте разберёмся.

Читать далее

Измерение покрытия UI тестами. Следующий уровень

Время на прочтение18 мин
Количество просмотров6K

Покрытие UI-тестами — вещь, о которой все говорят, но почти никто не измеряет. А если и измеряет, то по старинке, через Excel, TMS или на глаз. Это как считать шаги, не надевая шагомер.

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

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

Читать далее

Как делать внешние редиректы с JavaScript?

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров5.9K

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

Я хочу сравнить самые популярные методы для редиректов в браузере с помощью JavaScript, а так же способы как их сделать безопаснее и продуманнее.

Читать далее

Юнит тесты роя агентов

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров1.8K

🐝 Тестирование роя агентов

Юнит тесты - единственный способ принять работу промпт инженера, так как не понятно, действительно ли он всё это время чатился с моделью или списал в работу на 5 минут пару недель времени. Так же, статья содержит типовые галлюцинации роя агентов, которые обязательно нужно проверить

Читать далее

Четвертый шаг в мир RxJs: незавершенные потоки — тихие убийцы приложений

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров1.7K

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

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

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

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

Читать далее

Автовыведение типов в TypeScript: мощь дженериков и функций

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров4K

Я уже более 7 лет активно использую TypeScript, применяя его в самых разных сценариях — от простых типизированных переменных до сложных условных типов и интерполяции. Однако TypeScript продолжает удивлять: сегодня я открыл для себя ещё один элегантный сценарий использования автовыведения типов в дженериках и функциях.

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

Читать далее

Почему JS (и TS) это плохой язык

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров18K

Я знаю, что на эту тему уже было сказано много, но настал мой черед. На JS я пишу больше 10 лет, так что терпел я достаточно. Мы называем это “джаваскрипт”, но под капотом скрываются три разные сущности: EcmaScript, среда исполнения и экосистема. Иногда о них стоит говорить отдельно, но сегодня я хочу обсудить всё сразу и объяснить, почему джаваскрипт — это плохой язык. Не в смысле “не работает”, а в смысле “заставляет страдать”.

Читать далее

Альтернатива Zod размером 1 КБ

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров3.5K

19 марта 2025 года вышла стабильная версия Valibot — библиотеки для валидации данных в JavaScript/TypeScript. Разработанная как альтернатива популярному Zod, она сочетает минималистичный дизайн с мощными возможностями.

В этой статье мы сравним Valibot и Zod по трём ключевым параметрам: синтаксису API, размеру библиотеки и скорости работы. Вы узнаете, чем эти решения отличаются друг от друга и почему стоит использовать специализированные инструменты валидации входящих данных.

Читать далее

Telegram‑бот на Supabase

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров799

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

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

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

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

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

Читать далее

Ближайшие события

Как мы перевели аналитику внутренних сервисов Авито на собственное решение

Уровень сложностиСредний
Время на прочтение17 мин
Количество просмотров6.2K

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

Читать далее

Пробуем Junie от JetBrains на реальной задаче (или как я попал в рассказ Азимова)

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров16K

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

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

насколько это весело.

Приемы, шаблоны, утилиты Typescript: Циклы, счетчики, шаблоны строк разной длины

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров1.3K

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

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

Хотите знать больше?

Определение bpm (beats per minute) в браузере

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров1.3K

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

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

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

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

Читать далее

Как Canvas украсил QIC

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров543

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

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

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

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

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

Читать далее

Измерение покрытия UI тестами

Время на прочтение22 мин
Количество просмотров4.1K

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

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

Читать далее

Cypress + axe-core: быстрый старт тестов на доступность

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров562

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

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

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

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

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

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

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

Читать далее