JavaScript *

После пяти лет работы JavaScript-разработчиком, занимаясь как фронтендом, так и бэкендом, я провел последний год, осваивая Go для серверной разработки. За это время мне пришлось переосмыслить многие вещи. Различия в синтаксисе, базовых принципах, подходах к организации кода и, конечно, в средах выполнения — все это довольно сильно влияет не только на производительность приложения, но и на эффективность разработчика.

Интерес к Go в JavaScript-сообществе тоже заметно вырос. Особенно после новости от Microsoft о том, что они переписывают официальный компилятор TypeScript на Go — и обещают ускорение до 10 раз по сравнению с текущей реализацией.

Эта статья — своего рода путеводитель для JavaScript-разработчиков, которые задумываются о переходе на Go или просто хотят с ним познакомиться. Я постарался структурировать материал вокруг ключевых особенностей языка, сравнивая их с привычными концепциями из JavaScript/TypeScript. И, конечно, расскажу о "подводных камнях", с которыми столкнулся лично — с багажом мышления JS-разработчика.

Да, я убрал из заголовка "за выходные", потому что проект чутка растянулся. Но идёт весело! У него и веб-версия теперь есть: https://mini.qyp.ai

Напомню: я давно хотел пощупать Tauri v2, и новомодные фреймворки для построения AI-агентов (ai-sdk / mastra / llamaindex).

Идея простая: десктопное приложение, дешборд на весь экран, справа интерфейс чата. Просим ИИ вывести на дешборд какую-то информацию в духе "сколько новых юзеров за последнюю неделю" - ИИ пишет код виджета, и размещает его на дешборде. Под капотом - runtime компиляция React.js + sql-коннекторы.
Полный open-source, весь код в репозитории: https://github.com/ElKornacio/qyp-mini

В данной статье я расскажу как добавить YandexGPT для использования с Siri с помощью приложений Shortcuts и Scriptable.

Всем, привет, меня зовут Дмитрий, я React-разработчик, и я снова здесь и попробую сегодня рассказать про Web Workers.

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

Почему так происходит? Всё дело в том, что React, как и JS, в браузере работает на одном основном потоке. Точнее, чтобы меня не закидали помидорами, React — это библиотека JS, и она полностью работает в основном потоке браузера, который однопоточен. Когда вы запускаете тяжёлую синхронную задачу, она полностью занимает этот поток и блокирует его, мешая браузеру рендерить интерфейс и обрабатывать события пользователя.

В современном фронтенде отзывчивость интерфейса — требование по умолчанию. Пользователи ожидают, что ваше приложение будет мгновенно реагировать на действия, даже если оно выполняет тяжёлые вычисления или загружает большие объёмы данных.

В этой статье мы разберём, как можно решить эту проблему одним из вариантов — с помощью Web Workers.

Это вторая статья из цикла про наш фреймворк Steroids, в которой мы расскажем об архитектурном подходе к построению UI-компонентов. Если вы ещё не читали первую статью — начните с неё. В ней мы объясняем, что такое Steroids и какие задачи он решает.

Пустые состояния (Empty States) — это незаметные, но критически важные элементы интерфейса. Что видит пользователь, когда список задач пуст, поиск не дал результатов или дашборд ещё не содержит данных? Пустой экран? Бесполезный спиннер? Или продуманное сообщение, которое помогает сориентироваться?

С появлением декларативного управления потоками (declarative control flow) в Angular обработка пустых состояний стала проще и элегантнее. Одна из ключевых возможностей — директива @empty, которая делает код чище, а интерфейс — дружелюбнее.

Давайте разберёмся, как это работает.

Ну кто не мечтает запустить стартап за одни выходные? Давно хотел развеяться, и чутка отвлечься от рутины и работы. А ещё давно хотел пощупать Tauri v2, и новомодные фреймворки для построения AI-агентов (ai-sdk / mastra / llamaindex).

Идея простая: десктопное приложение, внутри ИИ-агент, который подключается к БД, получает данные о структуре таблиц/вьюшек. Справа сайдбар: интерфейс чата с агентом, а основное пространство - холст, на котором агент размещает что хочет сам. А именно - виджеты, которые делают запросы к БД, и выводят их в приятном глазу виде.
Никакого удалённого бекенда, open-source, доступы к БД хранятся исключительно локально, всё секьюрно.

Часть 2 - как мы в runtime React-компоненты компилировали.

Dependency Injection (DI) один из столпов, на которых держится фреймворк Angular. Каждый разработчик, так или иначе, сталкивается с ним с первого дня: запрашивает сервисы в конструкторе, добавляет providedIn: 'root' и видит, как «магия» работает. Но именно в этом и кроется ловушка.

Для многих DI так и остается на уровне «магии» удобного механизма, который просто работает. Однако поверхностное понимание этого мощнейшего инструмента неизбежно приводит к архитектурным компромиссам: неочевидным утечкам памяти, сложностям в тестировании, созданию неявных связей между компонентами и, в конечном счете, к коду, который трудно поддерживать и масштабировать.

Эта статья не очередной пересказ официальной документации. Это глубокое погружение в архитектуру и философию Dependency Injection в Angular. Наша цель демистифицировать «магию» и превратить ее в предсказуемый, управляемый и мощный инженерный инструмент в вашем арсенале.

Мы пройдем путь от фундаментальных принципов инверсии контроля (IoC) до тонкостей иерархического инжектора. Мы разберем на атомы все стратегии предоставления зависимостей, научимся управлять их жизненным циклом и областью видимости. Мы изучим продвинутые паттерны с использованием InjectionToken и multi-провайдеров и поймем, как современная функция inject() меняет подход к композиции логики.

Ну кто не мечтает запустить стартап за одни выходные?
Давно хотел развеяться, и чутка отвлечься от рутины и работы.
А ещё давно хотел пощупать Tauri v2, и новомодные фреймворки для построения AI-агентов (ai-sdk / mastra / llamaindex.

Идея простая: десктопное приложение, внутри ИИ-агент, который подключается к БД, получает данные о структуре таблиц/вьюшек. Справа сайдбар: интерфейс чата с агентом, а основное пространство - холст, на котором агент размещает что хочет сам. А именно - виджеты, которые делают запросы к БД, и выводят их в приятном глазу виде.
Никакого удалённого бекенда, open-source, доступы к БД хранятся исключительно локально, всё секьюрно.

Так как весь код открытый, то процесс я буду логировать в репозитории: https://github.com/ElKornacio/qyp-mini

Создание фронтенда для Web3-приложений — это не только дизайн, кнопки и React. Это мост между пользователем и блокчейном. И ты, как фронтенд‑разработчик — тот, кто этот мост может построить...

Визуализатор звука, в котором светящийся 3D-шар пульсирует и меняет цвет в такт музыке, а перетаскиваемые панели GSAP плавно перемещаются вокруг него по инерции.

Демо

Код

Звук — это волны, зрение — это волны, которые мы видим. Я всегда стремлюсь поймать момент, когда эти волны накладываются друг на друга. Для недавнего задания от сообщества Webflow и GSAP, посвященного плагинам GSAP Draggable и Inertia, я решил развить идею, создав футуристический визуализатор, реагирующий на звук. Идея заключалась в создании научно-фантастического интерфейса "детектора аномалий", который реагирует на музыку в реальном времени, совмещая атмосферные визуальные эффекты со звуком.

Приветствую, дорогой читатель! Хочу поделиться решением наболевшей проблемы — автоматическим обновлением access-токена при истечении его срока действия.

Visual Studio Code прочно закрепился как один из самых популярных редакторов кода, и не зря. Его гибкость, производительность и огромная экосистема расширений делают его незаменимым инструментом для миллионов разработчиков. Однако, даже опытные пользователи зачастую не догадываются о некоторых его «скрытых» возможностях, которые могут кардинально изменить привычный рабочий процесс и значительно повысить продуктивность.

В этой статье мы рассмотрим 5 интересных функций и расширений VS Code, без которых, возможно, вы уже не сможете представить свою разработку.

За последние пару лет генеративные нейросети стали волшебной кисточкой для всего: концепт‑артов, иконок, иллюстраций, обложек, аватаров, спрайтов… Особенно — пиксель‑арта. В Midjourney, Stable Diffusion, Dall‑E, Image-1 и в других моделях можно просто вбить: «Pixel art goose with goggles in the style of SNES» — и получить шикарного пиксельного гуся за 10 секунд.

Но если ты пробовал вставить такого гуся в игру — ты уже знаешь боль.

Я решил вкопаться в эту тему поглубже и сделать open‑source‑инструмент, который автоматизирует превращение AI‑generated pixel art в pixel‑perfect pixel art.

Сегодня веб-приложения стали сложными интерактивными системами, напоминающими полноценные десктоп приложения. Однако за красивыми интерфейсами и богатым функционалом часто скрывается важный аспект, которому уделяется недостаточно внимания — доступность (accessibility). Для миллионов пользователей с ограниченными возможностями это означает, что они не могут полноценно взаимодействовать с сайтом, выполнить базовые действия или получить информацию.

Проблема особенно ярко выражена в современных одностраничных приложениях (SPA), кастомных компонентах, модальных окнах и прочих динамических UI-решениях, которые не учитывают, как с ними будут работать вспомогательные технологии. Например:

SVG – одна из самых интересных технологий браузера. С его помощью можно делать массу полезных и интересных компонентов. Это неотъемлемая часть моего стека.

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

Для понимания этой статьи не требуется специальных знаний и опыта работы с SVG, но предполагается, что вы знакомы с основами HTML/CSS/JS.

Всем привет, хабровчане! Я (не)начинающий разработчик с относительно небольшим стажем, который пытается углубить свои знания в любимой технологии. В работе и повседневной жизни очень часто приходится работать с языком TypeScript, который мне очень нравится, но к своему стыду, сам очень плохо знаком с настройкой его конфигурации, поэтому решил восполнить этот пробел, ведя собственный Today I Learned. Некоторые опции tsconfig являются очень простыми и понятными. Другие же заставляют знатно напрячься. И даже если поверхностное назначение какой-то настройки является понятным, все равно возникает желание разобраться с принципом ее действия, понять, на какие структурные аспекты проекта она влияет, а также узнать, а как вообще людям жилось до ее появления.

Как раз об одном из них и пойдет разговор в этой статье, а именно об esModuleInterop. Действие опции проверялось при попытке подружить CommonJS-модуль с ES-модульным проектом. Поверхностная гуглешка не дала исчерпывающий ответ на ряд моих вопросов, поэтому приходилось обращаться к спецификации ES6, документации tsconfig (упаси боже читать документацию (шутка)), в личные блоги авторитетных дядек в сообществе и к описаниям модульных систем. На основе найденной информации я составил небольшое резюме, с попыткой собрать материал во едно. Надеюсь, кому-то он покажется интересным. Приятного чтения!

Вы когда-нибудь сталкивались с плагинами, которые лезут в чужие папки, перезаписывают файлы ядра и превращают git status в ад?

Я — да. И вместо того чтобы мириться с ручным копированием, гигантскими .gitignore и вечными конфликтами, написал dmp — инструмент, который:
 Отслеживает, откуда взялся каждый файл,
 Автоматически разрешает конфликты (или даёт контроль),
 Не ломает IDE (никаких симлинков!),
 Работает с любыми языками и фреймворками.

Для кого:
— Разработчики плагинов/модулей,
— Те, кто устал от git-submodules и rsync,
— Все, кто хочет чистый workflow без монрепозитория.

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

Недавно прошла 108-я встреча TC39, на которой было продвинуто 9 предложений на разные стадии стандартизации — от сырых идей (Стадия 0) до полностью утвержденных возможностей (Стадия 4).

Ниже краткий обзор этих предложений и того, что они могут привнести в JavaScript.