Привет, меня зовут Андрей, и я написал книгу.
Нет, не о синтаксисе и не про очередной набор «лучших практик».
А о том, что часто остаётся за кадром — в рефлексии, в мыслях после проектов, в спорах между «пишем быстро» и «делаем правильно».
В первой части мы построили бэкенд на FastAPI, Aiogram, Redis и Centrifugo, заложив основу для анонимного чата в Telegram. Теперь пришло время развернуть фронтенд и создать стильный и отзывчивый интерфейс с использованием VueJS 3 в формате Telegram MiniApp.
В этой статье мы:
• Разработаем интерактивный UI с фильтрами поиска, анимациями загрузки и real-time чатом.
• Настроим мгновенный обмен сообщениями через Centrifugo без лишних запросов к серверу.
• Интегрируем монетизацию для заработка на рекламе в приложении.
• Выполним деплой на удаленный сервер и подготовим проект к продакшену.
Если вы хотите создать быстрый, удобный и монетизируемый анонимный чат в Telegram, который работает без задержек и перезагрузок, — эта статья для вас!
🔪 Карусель триальных токенов под ребро облачному LLM провайдеру
Облачный LLM провайдер Cohere предоставляет бесплатно 20 запросов в минуту без проверки кредитной карты. Я просто не смог отказаться от задумки сделать веселую карусель.
🐝 Выбор локальной LLM модели. Публикация на сайт с чатом.
В мире нейросетей - хайп. Не всегда заявления производителя соответствуют действительности, например, на бумаге DeepSeek R1 поддерживает русский язык, на деле не всё так гладко. Данная статья содержит подборку LLM моделей, хорошо работающих с русским языком и имеющих возможность tool calls - вызов внешних python/nodejs функций для интеграции в стороние сервисы
React существует уже довольно давно, и за эти годы вокруг него выросла огромная экосистема библиотек. Разработчики, переходящие с других языков или фреймворков, часто испытывают трудности с выбором библиотек, необходимых для создания веб-приложений с помощью React.
React позволяет разработчикам создавать пользовательские интерфейсы (user interfaces, UI) на основе функциональных компонентов. Хотя он предоставляет встроенные решения, такие как хуки (hooks), для управления локальным состоянием, обработки побочных эффектов и оптимизации производительности, в конечном итоге все сводится к работе с функциями — как компонентами, так и хуками — для построения UI.
В этой статье мы рассмотрим основные библиотеки React на 2025 год. Эти библиотеки являются строительными блоками для разработки приложений. Независимо от того, новичок вы или опытный разработчик, эта шпаргалка поможет вам сориентироваться в обширной экосистеме React.
Привет, Хабр! Я уже рассказал, что умею разнообразно писать счётчики . Пришло время сделать шаг вперёд! Сегодня поговорим о том инструменте, который я и миллионы разработчиков используют ежедневно. Речь пойдёт о великом и ужасном ReactJS.
Я пишу на React с 2018 года, делаю это, на мой взгляд, более-менее сносно. Мне нравится тезис о том, что профессионализм заключается не только в умении использоваться достоинства инструмента, но и в умении чётко видеть его недостатки. Поэтому возникла идея сделать что-то типа прожарки React, указав на лично меня раздражающие моменты. С какими-то я смирился, с какими-то нет, что-то научился обходить. Если вас бесит в React что-то, что я не упомянул, не стесняйтесь писать в комментариях, было бы очень интересно сравнить мои ощущения с вашими.
И важное: несмотря на указанные ниже проблемы, я до сих пор считаю React прекрасным и удобным инструментом для создания фронтенда, в частности SPA. Громких слов типа «ReactJS не пригоден для разработки» тут не будет - пригоден, да ещё как! Но... и на Солнце бывают пятна. Приступим.
Привет, Хабр! Сегодня я хотел бы поговорить с тобой о проблеме публикации картинок. Зачем вообще об этом говорить? Ежедневно миллионы людей публикуют миллионы, или даже, миллиарды изображений, что тут можно обсуждать? Наверняка, для веб-разработчика, тем более, опытного - это вообще никакая не проблема.
Привет, Хабр! Меня зовут Евгений Жуков, я работаю в Битриксе мобильным разработчиком. Моя основная задача — создавать приложения, которые упрощают бизнес-процессы. А еще я обожаю разбирать задачи с собеседований: они как головоломки, которые не только проверяют знание алгоритмов, но и учат видеть не очевидные подходы к коду. Хочу делиться такими кейсами — вдруг это поможет кому-то пройти сложное интервью или вдохновит на новые идеи. Поехали? 😊
Сценарий: вы на собеседовании, ожидаете вопросов про React, WebGL или хотя бы про Event Loop. А вместо этого получаете: «Напишите функцию сложения двух чисел в столбик, но числа передаются как массивы.
«Что? — думаете вы. — Это же уровень начальной школы! Где мои хитрые асинхронные задачи?» Но не спешите радоваться. Я тоже недооценивал эту задачу, пока не попытался реализовать её на JavaScript.
Привет! Я Егор Стеблин, фронтенд-разработчик в юните спецпроектов KTS.
В этой статье я расскажу о том, каким образом в Discord можно встроить свой миниапп (a.k.a. «активность»). Для тех, кто еще не сталкивался с этим понятием: активности — это интерактивные приложения, которые можно запустить в Discord. Они могут интегрироваться со следующей функциональностью Discord:
• получение информации о пользователе;
• голосовой и текстовый чаты;
• данные профиля и встроенная монетизация.
Если ваша ЦА включает в себя молодежь, студентов или геймеров, то активности помогут вам сделать рекламу в приложении, в котором они регулярно проводят время. В целом, Discord — довольно удобная платформа для создания мультиплеерных проектов, и с помощью миниаппов вы можете создать на ней интерактивное многопользовательское пространство и кастомизировать его под ваши цели.
Ниже я опишу процесс создания Discord-активностей от инициализации приложения на портале Discord до написания кода и его тестирования.
Работа с Playwright всегда доставляет мне удовольствие. «Наиграв» уже десятки, если не сотни часов в библиотеке, решая проблемы, копаясь в исходниках или на просторах сети, я практически всегда находил удачное решение. И это я списываю не столько на свой опыт, сколько на удобство самой библиотеки. Чаще всего удачные решения находились уже в коробке. А то, что приходилось допиливать руками, всегда сопровождалось ощущением игры и веселья – настолько приятно и легко работать с этим инструментом. Вот уже год, как наши тесты работают стабильно без каких-либо значимых изменений. Сегодня я расскажу вам о скриншотных тестах, реализованных на основе Playwright и Storybook.
11 Марта вышел аннонс Typescript 7, в котором рассказали о разработке нового tsgo компилятора.
Андерс Хейлсберг объявил о следующем этапе в развитии Typescript, направленном на кардинальное повышение производительности.
Основная ценность Typescript — это удобный опыт разработки, с ростом кодовой базы эта ценность становится всё более очевидной. Но, как показала практика, текущая реализация часто не справляется с очень крупными проектами. Разработчики сталкиваются с долгим временем загрузки, медленным автокомплитом и проблемами с производительностью.
Нативный порт компилятора на Go - tsgo доступен в репозитории на GitHub - typescript-go. Уже сейчас его можно потестировать и попытаться собрать какой-нибудь проект, но пока реализовано 80% функционала языка. А завершить разработку tsgo обещают в пределах 2025 года.
За последние 2 года поддержка ESM в TypeScript, Node.js и браузерах сильно улучшилась. В этой статье я объясню мою современную настройку, которая является относительно простой по сравнению с тем, что нам приходилось делать раньше:
tsc, но упоминаю поддержку других инструментов в разделе "Компиляция TS с помощью других инструментов"Обратная связь приветствуется: что вы делаете по-другому? Что может быть улучшено?
Пример пакета: в @rauschma/helpers используется настройка, описываемая в этой статье.
Если, когда вы смотрите на NEST.js вас гнетёт необъяснимая тоска. Если вы не можете понять воодушевления и радости от использования декораторов. Если рассмотрение очередного NEST-инструмента вызывает лёгкое недоумение — не стесняйтесь, вы не одиноки.
NEST.js – это фреймворк для написания REST серверов под Node.js на языке TypeScript, который потом транспилируется в JavaScript. Он написан поверх библиотеки Express (или Fastify – можно выбрать) и привносит модные концепции – Inversion of Control, Dependency Injection и т. п. в мир JavaScript. Нередко описание этого инструмента сопровождается восторженным настроением. Как мне кажется, эта восторженность несколько преувеличена, сложность излишняя, а чудо-сила отсутствует. Некоторые неудобства вынудили нас отказаться от его использования после нескольких лет разработки.
Анонсирован порт TypeScript на Go, который показывает двухкратное уменьшение использования памяти и десятикратное улучшение скорости работы!
В этой статье мы разберем в деталях часовое интервью с автором TypeScript Андерсом Хейлсбергом об этом портировании.
Чего не хватает для лучшей производительности node.js?
Привет, Хабр! Меня зовут Дэниз, в этой статье я расскажу о микрофронтах — что это такое, какие у них плюсы и минусы, и как их можно реализовать. Пройдемся от того, зачем моей компании они понадобились, разберем реализацию, плюсы-минусы, и сделаем выводы.
Всем привет! В этом туториале я хотел бы описать создание расширения для браузера на основе Chromium (Google Chrome, Brave, Яндекс Браузер и др.).
Расширения для браузеров создаются с использованием веб-технологий: HTML, CSS и JavaScript/TypeScript и все. Можно конечно еще использовать либы React, JQuery или фрейворки Vue например, но можно обойтись Vanilla JS.
В статье описаны способы получения информации о подключении устройств по bluetooth. Проведен анализ обмена данными между чайником и официальным приложением, создано собственное веб приложение для управления умным чайником из браузера.
Всем привет, с вами Максим Иванов, и сегодня мы поговорим о некоторых улучшениях, которые появились в последней версии Angular 19, вышедшей в ноябре 2024. Публикация довольно запоздалая с этой точки зрения, но мы сегодня постараемся рассмотреть некоторые нововведения более детально. Как и всегда ребята из Google дарят нам что-то новое, что сделает наши приложения еще более быстрыми и эффективными. И в этом нам помогут модерновые реактивные примитивы, инкрементальная гидратация и многое другое.
tabs-broadcast — это открытая библиотека JavaScript, предназначенная для удобной коммуникации между вкладками браузера в одном приложении. Она решает распространенную проблему: как синхронизировать состояние и события между несколькими вкладками без лишних запросов к серверу и без сложных обходных путей. С помощью этой библиотеки разработчики могут организовать обмен сообщениями между вкладками так, будто это единое приложение, обеспечивая согласованность данных и оптимизируя нагрузку.
Какие задачи помогает решить tabs‑broadcast? В современных веб-приложениях пользователь нередко открывает одну и ту же страницу в нескольких вкладках. Без координации эти вкладки работают изолированно: могут дублировать дорогостоящие операции (например, загрузку одних и тех же данных), создавать конфликты состояний (например, разные вкладки по-разному отображают авторизацию или настройки) и увеличивать нагрузку на сервер (несколько соединений от одного пользователя). Библиотека tabs-broadcast предоставляет механизм единого центра управления для таких случаев. Она позволяет одной «главной» вкладке выполнять критичные задачи (синхронизация с сервером, получение обновлений, запись в хранилище и т.п.), а другим вкладкам — получать результаты и уведомления от неё. Для разработчиков это означает более простой код для синхронизации вкладок и избавление от ручного использования низкоуровневых API.
Почему это полезно? Во-первых, улучшение UX: пользователь всегда видит актуальное состояние во всех открытых окнах приложения. Во-вторых, оптимизация ресурсов: за счет того, что тяжелые операции выполняются только в одном экземпляре, снижается нагрузка на браузер (меньше потоков, соединений, таймеров) и на сервер (меньше дублирующих запросов). В-третьих, упрощается разработка функционала, требующего взаимодействия между вкладками (не нужно изобретать собственный велосипед на базе localStorage или postMessage). Библиотека предоставляет готовые инструменты для регистрации обработчиков событий и широковещательной рассылки сообщений, позволяя фокусироваться на логике приложения, а не на тонкостях межвкладочного взаимодействия.