Как стать автором
Обновить
214.21

JavaScript *

Прототипно-ориентированный язык программирования

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

Playwright: игра в скриншотные тесты

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

Работа с Playwright всегда доставляет мне удовольствие. «Наиграв» уже десятки, если не сотни часов в библиотеке, решая проблемы, копаясь в исходниках или на просторах сети, я практически всегда находил удачное решение. И это я списываю не столько на свой опыт, сколько на удобство самой библиотеки. Чаще всего удачные решения находились уже в коробке. А то, что приходилось допиливать руками, всегда сопровождалось ощущением игры и веселья – настолько приятно и легко работать с этим инструментом. Вот уже год, как наши тесты работают стабильно без каких-либо значимых изменений. Сегодня я расскажу вам о скриншотных тестах, реализованных на основе Playwright и Storybook.

Читать далее

TypeScript 7 в 10 раз быстрее: анонс нативного компилятора TSGO

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

11 Марта вышел аннонс Typescript 7, в котором рассказали о разработке нового tsgo компилятора.

Андерс Хейлсберг объявил о следующем этапе в развитии Typescript, направленном на кардинальное повышение производительности.
Основная ценность Typescript — это удобный опыт разработки, с ростом кодовой базы эта ценность становится всё более очевидной. Но, как показала практика, текущая реализация часто не справляется с очень крупными проектами. Разработчики сталкиваются с долгим временем загрузки, медленным автокомплитом и проблемами с производительностью.

Нативный порт компилятора на Go - tsgo доступен в репозитории на GitHub - typescript-go. Уже сейчас его можно потестировать и попытаться собрать какой-нибудь проект, но пока реализовано 80% функционала языка. А завершить разработку tsgo обещают в пределах 2025 года.

Читать далее

Публикация пакета npm с ESM и TypeScript

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



За последние 2 года поддержка ESM в TypeScript, Node.js и браузерах сильно улучшилась. В этой статье я объясню мою современную настройку, которая является относительно простой по сравнению с тем, что нам приходилось делать раньше:


  • она предназначена для пакетов, которые могут пренебречь обратной совместимостью. Настройка хорошо работает для меня некоторое время — начиная с TS 4.7 (24.05.2022)
    • помогает то, что Node.js теперь поддерживает require(esm) — запрос библиотек ESM из модулей CommonJS
  • я использую только tsc, но упоминаю поддержку других инструментов в разделе "Компиляция TS с помощью других инструментов"

Обратная связь приветствуется: что вы делаете по-другому? Что может быть улучшено?


Пример пакета: в @rauschma/helpers используется настройка, описываемая в этой статье.

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

NEST.js — уродливый монстр или мощный энтерпрайз?

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

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

NEST.js – это фреймворк для написания REST серверов под Node.js на языке TypeScript, который потом транспилируется в JavaScript. Он написан поверх библиотеки Express (или Fastify – можно выбрать) и привносит модные концепции – Inversion of Control, Dependency Injection и т. п. в мир JavaScript. Нередко описание этого инструмента сопровождается восторженным настроением. Как мне кажется, эта восторженность несколько преувеличена, сложность излишняя, а чудо-сила отсутствует. Некоторые неудобства вынудили нас отказаться от его использования после нескольких лет разработки.

Читать далее

Разбор интервью с автором TypeScript о портировании его на Go

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

Анонсирован порт TypeScript на Go, который показывает двухкратное уменьшение использования памяти и десятикратное улучшение скорости работы!

В этой статье мы разберем в деталях часовое интервью с автором TypeScript Андерсом Хейлсбергом об этом портировании.

Чего не хватает для лучшей производительности node.js?

Читать далее

Разворачиваем микрофронты на Next.js

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

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

Читать далее

Пишем простое расширение для браузера

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

Всем привет! В этом туториале я хотел бы описать создание расширения для браузера на основе Chromium (Google Chrome, Brave, Яндекс Браузер и др.).

Расширения для браузеров создаются с использованием веб-технологий: HTML, CSS и JavaScript/TypeScript и все. Можно конечно еще использовать либы React, JQuery или фрейворки Vue например, но можно обойтись Vanilla JS.

Читать далее

Webpack, Vite или Rspack: что это за зоопарк или чем собирать микрофронтенды в 2025?

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

Привет! Разбираясь с микрофронтендами в монорепозитории для проекте с Vue3 пришёл к выводу, что так много уделяется внимания гибкости в построении архитектуры и бизнес-задачам, что все боятся заниматься улучшением "условий труда" связанных со сборкой приложения! Решил что эта задачка как раз мне подходит и представляю вашему вниманию небольшую статью которая возможно поможет вам сделать выбор или подтолкнет попробовать новые инструменты сборки фронтенда! Для справки - микрофронтенды у нас на Module Federation, Nx для управления монорепозиторием, общаемся мы через GraphQL, тестируем с Jest и конечно куда без TypeScript. Проект активно развивается, и с ростом его масштабов столкнулись с вопросом: какой сборщик лучше всего справится с нашими задачами? Webpack уже давно с нами, но его медлительность заставляет искать альтернативы. Vite обещает молниеносную разработку, а Rspack — производительность без сложной миграции. Давайте разберёмся, что подойдёт именно нам — и, возможно, вам.

Читать далее

Управление bluetooth из js или как я реверсинжинирил умный чайник

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

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

Читать далее

Что новенького в Angular 19

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

Всем привет, с вами Максим Иванов, и сегодня мы поговорим о некоторых улучшениях, которые появились в последней версии Angular 19, вышедшей в ноябре 2024. Публикация довольно запоздалая с этой точки зрения, но мы сегодня постараемся рассмотреть некоторые нововведения более детально. Как и всегда ребята из Google дарят нам что-то новое, что сделает наши приложения еще более быстрыми и эффективными. И в этом нам помогут модерновые реактивные примитивы, инкрементальная гидратация и многое другое.

Читать далее

tabs-broadcast — библиотека для синхронизации вкладок

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

tabs-broadcast — это открытая библиотека JavaScript, предназначенная для удобной коммуникации между вкладками браузера в одном приложении. Она решает распространенную проблему: как синхронизировать состояние и события между несколькими вкладками без лишних запросов к серверу и без сложных обходных путей. С помощью этой библиотеки разработчики могут организовать обмен сообщениями между вкладками так, будто это единое приложение, обеспечивая согласованность данных и оптимизируя нагрузку.

Какие задачи помогает решить tabs‑broadcast? В современных веб-приложениях пользователь нередко открывает одну и ту же страницу в нескольких вкладках. Без координации эти вкладки работают изолированно: могут дублировать дорогостоящие операции (например, загрузку одних и тех же данных), создавать конфликты состояний (например, разные вкладки по-разному отображают авторизацию или настройки) и увеличивать нагрузку на сервер (несколько соединений от одного пользователя). Библиотека tabs-broadcast предоставляет механизм единого центра управления для таких случаев. Она позволяет одной «главной» вкладке выполнять критичные задачи (синхронизация с сервером, получение обновлений, запись в хранилище и т.п.), а другим вкладкам — получать результаты и уведомления от неё. Для разработчиков это означает более простой код для синхронизации вкладок и избавление от ручного использования низкоуровневых API.

Почему это полезно? Во-первых, улучшение UX: пользователь всегда видит актуальное состояние во всех открытых окнах приложения. Во-вторых, оптимизация ресурсов: за счет того, что тяжелые операции выполняются только в одном экземпляре, снижается нагрузка на браузер (меньше потоков, соединений, таймеров) и на сервер (меньше дублирующих запросов). В-третьих, упрощается разработка функционала, требующего взаимодействия между вкладками (не нужно изобретать собственный велосипед на базе localStorage или postMessage). Библиотека предоставляет готовые инструменты для регистрации обработчиков событий и широковещательной рассылки сообщений, позволяя фокусироваться на логике приложения, а не на тонкостях межвкладочного взаимодействия.

Читать далее

Чистый код

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

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

Далее

Способы разделения длительных задач в JavaScript

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



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


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

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

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

Fusion — php стал ещё ближе к javascript

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

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

Читать далее

Запускаем Pong в 240 вкладках браузера

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

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

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

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

Читать далее

Вебсокеты на FastAPI: Реализация простого чата с комнатами за 20 минут

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

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

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

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

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

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

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

Читать далее

Web3 для JavaScript-разработчиков на примере Solana

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

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

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

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

Читать далее

Отладка JavaScript в Chrome DevTools для начинающих фронтендеров

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

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

Читать далее

Борьба с перерендерами в React

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

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

Читать далее

Реверс-инжиниринг 128-битного дракона

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


КДПВ для этой статьи сгенерировала программа размером всего в 16 байт. Под катом разберёмся в том, как в столь скромном объёме сумел спрятаться дракон и какие силы поддерживают его жизнь. Для лучшего понимания происходящего мы портируем эту красоту на JavaScript.

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

Вклад авторов