JavaScript *

 Привет, Хабр! Меня зовут Евгений Жуков, я работаю в Битриксе мобильным разработчиком. Моя основная задача — создавать приложения, которые упрощают бизнес-процессы. А еще я обожаю разбирать задачи с собеседований: они как головоломки, которые не только проверяют знание алгоритмов, но и учат видеть не очевидные подходы к коду. Хочу делиться такими кейсами — вдруг это поможет кому-то пройти сложное интервью или вдохновит на новые идеи. Поехали? 😊

Сценарий: вы на собеседовании, ожидаете вопросов про 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 и браузерах сильно улучшилась. В этой статье я объясню мою современную настройку, которая является относительно простой по сравнению с тем, что нам приходилось делать раньше:

• она предназначена для пакетов, которые могут пренебречь обратной совместимостью. Настройка хорошо работает для меня некоторое время — начиная с TS 4.7 (24.05.2022)
  
  • помогает то, что Node.js теперь поддерживает require(esm) — запрос библиотек ESM из модулей CommonJS
• я использую только 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). Библиотека предоставляет готовые инструменты для регистрации обработчиков событий и широковещательной рассылки сообщений, позволяя фокусироваться на логике приложения, а не на тонкостях межвкладочного взаимодействия.

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

Иногда возникает необходимость разделить длительную дорогую (с точки зрения вычислений) задачу на несколько тиков (ticks) цикла событий (event loop). Существует множество способов это сделать. Рассмотрим их.

Легко "уничтожить" пользовательский опыт, позволив длительной дорогой задаче захватить основной поток (main thread). Неважно, насколько сложным является приложение, цикл событий может выполнять только одну задачу за раз. Пока выполняется одна задача, другие ждут своей очереди. Как правило, задача выполняется настолько быстро, что пользователь ничего не замечает. Но так бывает не всегда.

Каждый PHP-разработчик, работая с современными JavaScript-фреймворками, наверняка задумывался о том, как было бы здорово передавать данные напрямую в компоненты без танцев вокруг контроллеров и типов данных. Арон Френсис, видимо, тоже терзал себя этим вопросом, поэтому 4 февраля 2025 года на своём ютуб-канале представил новую веху развития фронтенда на Laravel — Fusion.  В этом статье мы рассмотрим базовые принципы работы библиотеки и основные нюансы работы с ней.

Что вы делаете с незакрытыми вкладками браузера? На мой взгляд, они занимают слишком много места на экране, поэтому на этой неделе я разобрался, как запустить в этих вкладках Pong.

Это 240 вкладок браузера в плотной сетке 8x30. И в них запущен Pong! Видно, что мяч и ракетки перемещаются по canvas в окне и во всех вкладках.

Код (ужасный) можно посмотреть на GitHub. Но как он работает?

Хотите освоить WebSocket и создать собственный чат с комнатами? В этой статье мы разберем:

• В чем разница между WebSocket и классическим HTTP

• Как реализовать сервер на FastAPI с поддержкой WebSocket

• Как создать простой FullStack-чат для мгновенного обмена сообщениями

• Как всего за пару минут развернуть готовое приложение на облачном сервисе

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

Рассказать надёжный способ заработать на криптовалютах? Устраиваетесь в блокчейн-проект разработчиком, пишете код, получаете зарплату. Готово, вы стали богаче, пока другие прогорали на бирже!

Шутки шутками, но мир web3 разросся в индустрию со своими вакансиями. И в ней востребован JavaScript, причём не только на фронтенде. Так что у JS-разработчиков появился смысл обращать внимание на этот сегмент, а на нашей конференции HolyJS появились доклады об этом.

И для Хабра мы решили перевести в текстовый вид выступление Александра Казакова @AlexandrKazakov, помогающее влиться в тему. В этом докладе рассматривается блокчейн Solana, но после него проще будет разбираться и с другими вроде Ethereum или TON. Если вам удобнее видео, прилагаем ссылки: YouTube, VK Видео. Далее — текст от лица спикера.

Привет, Хабр! Я – Рома, front-end разработчик в компании «АйТи-Баланс». Мне не понаслышке известно, насколько ресурсозатраным (в плане времени и сил) может быть поиск и исправление ошибок в JS. Новичкам этот процесс может показаться неподъёмным камнем, но только до знакомства с отладкой в инструментах разработчика, встроенных в браузер. О ней я и расскажу, причём затрону не console.log, а куда более эффективную альтернативу.

На тему мемоизации написано довольно много статей, и все они хорошо раскрывают суть. Но мне часто не хватало шпаргалки, которую можно отправить на вопрос «А как мемоизировать?». В статье речь пойдет исключительно о функциональных компонентах.