Обновить
46.31

TypeScript *

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

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

Ну это полный мэтч! Как мы сделали бота для знакомств в чатах

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

Всем привет, я Иван, продакт-менеджер. И я остою в айтишном чате — человек двести, может, чуть больше. Там всё как обычно: обсуждаем новости, спорим про фреймворки, кидаем мемы.

Сообщений очень много, и когда новички приходят, пишут интро о себе — через пару минут их уже никто не видит, всё уходит в ленту. В какой-то момент стало интересно: можно ли эту проблему решить алгоритмом?

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

Читать далее

Новости

Obsidian-совместимые заметки в своём приложении: Nest.js, Prisma, gray-matter

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

В этой статье я покажу, как связать Nest.js и Obsidian: хранить заметки в формате Markdown прямо из бэкенда, редактировать и синхронизировать их с базой данных. Если вы тоже любите Obsidian и пишете pet-проекты — это может вам помочь.

Читать далее

Декомпозиция кода становится критически важной при работе с ИИ

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

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

Читать далее

LiqTrade: От идеи до production-ready платформы. Часть 2: Реальные проблемы и их решения

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

Продолжение статьи о разработке B2B платформы международной торговли

Прошло несколько месяцев с момента публикации первой части, где мы рассказали о концепции и начальном этапе разработки LiqTrade. За это время проект прошел путь от MVP до полноценной production‑ready платформы.

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

Дисклеймер: Если вы ищете статью в стиле «10 строк кода, и ваш стартап взлетел» — это не здесь. Здесь будет про то, как мы 3 раза переписывали систему ролей, боролись с circular dependencies и почему наш bundle вырос до 1.2 МБ (спойлер: мы его победили).

Читать далее

Как я подружил бэкенд с API AmoCRM: связь сущностей, отправка данных, защита от дублей

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

Интеграция простой формы с AmoCRM на «бумаге» выглядит просто. Кажется, что можно просто отправить контакт, создать лид, прикрепить товары к сделке — и готово». На практике всё наоборот.

Честно говоря, документация AmoCRM сначала меня запутала. Я полез гуглить по моей ситуации (связка формы с CRM) почти ничего. Посмотрел ролик на YouTube про библиотеку. Понял основы, но всё равно оставалось куча вопросов.

Дело в том, что AmoCRM в упор не видит дубликаты контактов и товаров. При очистке дублей из админки ничего не удаляется. Все из-за уникальных ID, которые назначаются при отправке данных.

После множества экспериментов, я все таки смог подружить небольшой бэкенд и API AmoCRM.

Читать далее

Обзор типов TypeScript

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

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

Читать далее

Работа с индексными членами в TypeScript

Уровень сложностиСложный
Время на прочтение44 мин
Количество просмотров3.1K

Ссылочный тип данных Object является базовым для всех ссылочных типов в TypeScript подобно тому как в JavaScript Object является прототипом всех остальных ссылочных типов.

Помимо того, что в TypeScript существует объектный тип Object , представляющий одноименный конструктор из JavaScript, также существует тип object , представляющий любое объектное значение. Поведение типа указанного с помощью ключевого слова object и интерфейса Object различаются.

Переменные, которым указан тип с помощью ключевого слова object , не могут хранить значения примитивных типов, чьи идентификаторы (имена) начинаются со строчной буквы ( number , string и т.д.). В отличие от них тип интерфейс Object совместим с любым типом данных. Возникает ошибка: Error: Type X is not assignable to type 'object' (Тип X не может быть назначен типу «объект»).

Читать далее

Синхронизация интерфейсов и их реализаций в TypeScript

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

TL;DR: eslint-plugin-interface-method-style гарантирует, что ваши TypeScript реализации соответствуют стилю, определенному в интерфейсах. Если интерфейс объявляет метод (method(): void), реализация должна быть методом. Если объявлено свойство-функция (method: () => void), нужна стрелочная функция. Это предотвращает баги с правилом unbound-method и делает код предсказуемым.

Читать далее

Настройка Express 5 для продакшна в 2025 году. Часть 2

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

Эта статья поможет вам создать приложение Express 5 с поддержкой TypeScript.

Вы настроите готовый к продакшну проект с помощью различных инструментов для линтинга, тестирования и проверки типов. В случае, если вы новичок в REST API, не волнуйтесь, эта статья также включает объяснения основных концепций, которые следует знать, таких как маршрутизация (роутинг) и аутентификация.

Настоятельно рекомендую писать код вместе со мной. Мы будем использовать подход "Разработка через тестирование" (test-driven development, TDD) для создания REST API, который может стать основой вашего следующего приложения Express.

Читать далее

CCXT + CoinGecko: гибкий сбор рыночных данных для собственного криптотрекера

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

Небольшой практический разбор библиотеки CCXT - как получать рыночные данные, баланс и историю ордеров с криптобиржи, обрабатывать ответы API и использовать их в локальном приложении. Примеры на Bitget, интеграция с CoinGecko, код на Nest.js с SQLite и Prisma.

Читать далее

Лучшее время для соло предпринимательства: интеграция платежной системы

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

Вторая часть серии статей "Лучшее время для соло предпринимательства". Описание процесса интеграции платежной системы Paddle с точки зрения юзер-сценариев.

Читать далее

Production-ready сайт о ГОЗ: от Заказчика к React, Vite и Tailwind

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

Десять лет в бюджетных организациях из них три года работы с ГОЗ показали: сложность не в законах, а в инструментах. Собрал консалтинговую платформу с нуля на React 18 + TypeScript + Vite. Полный CI/CD через GitHub Actions, мониторинг на Sentry, Lighthouse > 90. Делюсь стеком, архитектурой и выводами — как в одиночку запустить production-ready продукт в сложной B2G-нише.

Читать далее

От вседозволенности к порядку: кастомизация Jodit для строгой типографики

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

Привет, Хабр!

В этой статье речь пойдет об интересной задаче на одном из моих проектов. Он был разработан на React для документооборота сотрудниками. Так уж вышло, что со времен старта проекта основным текстовым WYSIWYG-редактором был небезызвестный Jodit. За долгие годы было написано много кастомных плагинов, например, для работы с упоминаниями сотрудников, и нас устраивала его надежность, хоть его внешний вид был далек от идеала.

И вот однажды заказчик пришел с запросом:

Читать далее

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

Собрать звуковую спектрограмму на React и MobX

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

Привет!

Я Таня, фронтенд-разработчик в KTS и студент магистратуры МГТУ им. Баумана. На одном из недавних проектов я работала над интересной фичей — визуальным представлением аудиоданных, a.k.a. звуковой спектрограммой. Казалось бы, штука нехитрая: кто не видел график, прыгающий в такт с музыкой на разных частотах? Он есть в любом секвенсоре, на любом диджейском пульте и даже в динамическом островке последних айфонов.

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

А в этой статье я расскажу, как сделать такую же звуковую спектрограмму, а также как изменять ее стиль и другие параметры.

Читать далее

setTimeout убил наши анимации: история спасения модальных окон

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

Всем привет!

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

Вы запускаете стабильно работающий проект, применяете useEffect с необходимой фичей и пустой зависимостью, а затем - начинаете тестировать.

И вот незадача: модальное окно открывается на миллисекунду и моментально закрывается.

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

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

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

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

Совершенно случайно наткнувшись на статью @GragertVD, которая, словом, не подходила под мои критерии поиска - я открыл для себя совершенно новый обработчик события onAnimationEnd и наконец решил указанную выше проблему.

Именно поэтому мне захотелось рассказать о том, как я это сделал.

В этой статье я расскажу:

Читать далее

Зоны временной недоступности, или почему исходный код TypeScript усеян var-ами

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

Если вы работаете с JavaScript, то знаете, что есть несколько способов объявить переменную (let, const). Эти объявления существуют уже давно и имеют адекватные правила блочной области видимости. Возможно, вы также помните времена, когда их не было. У нас был только var. А var - отвратителен. Каждая переменная изменяема, нельзя навязать неизменяемость, и что ещё хуже - var выходит иногда за пределы блока. Поэтому для меня было большим сюрпризом узнать, что код TypeScript (написанный на TypeScript - пока что) усеян var-ами так, будто на дворе 2003-й. В чем же причина?

Читать далее

Как мы делали свою ноду для n8n

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

Всем привет!

Самостоятельное создание ноды HTTP Request может быть сложной задачей. Нужно самостоятельно искать и указывать эндпоинт, прописывать body для запроса и проставлять нестандартный заголовок авторизации, что совершенно неудобно и сложно для многих пользователей.

По вышеописанной причине мы решили разобраться в этой проблеме, и опубликовать собственную комьюнити-ноду n8n-nodes-amvera-inference, которая сможет помочь пользователям, без сложностей, работать с нашим Inference API нужной модели.

В статье мы расскажем и про саму разработку комьюнити-ноды, и про её установку с настройкой.

Читать далее

Моя первая попытка в инди-хакинг

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

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

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

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

🚀 План такой:

Читать далее

Кеширование Lottie-анимаций с помощью Service Worker

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

Всем привет!
Меня зовут Прокошкин Леонид, я Frontend-разработчик в компании DDPlanet.

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

В проекте было около 30 Lottie-анимаций, некоторые весили ~100 KB, и нам нужно было оптимизировать их загрузку.

Как снизить трафик и нагрузку? Правильно - кеширование. Мы выбрали кеширование на стороне Service Worker.

Читать далее

Замыканий в JavaScript не существует

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

По крайней мере так сказал блогер Demimurych у меня в комментариях: 

Дальше была беседа в комментариях, из который я вынес два хороших замечания:

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

Реализация этой проблемы наиболее и единственно полно описана в ECMAScript спецификации. 

Я потратил время и покажу, что нашёл!

Читать далее
1
23 ...