Обновить
256K+

JavaScript *

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

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

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

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

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

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

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

Читать далее

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

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

Привет!

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

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

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

Читать далее

TypeScript или Rust: когда переписывать сервис и какие выигрыши ждать

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

Вы тоже хоть раз ловили себя на мысли: «А может, ну его, этот Node.js — перепишем всё на Rust, и будет летать?»
Поздравляю — вы не одиноки. Я тоже через это прошёл.

В этой статье я разложу по полочкам, когда действительно стоит лезть в Rust, а когда лучше остаться на TypeScript и просто выспаться. Без фанатизма, маркетинга и с примерами из практики.

Читать далее

Упаковка проекта с большой анимацией в один HTML файл или как кодировка Windows-1251 избавила от лишних 52МБ

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

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

Читать далее

Современная магия. Капля росы

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели4.9K

Бывало ли у кого‑нибудь так, что начинаете реализовывать одну идею, а она плавно преобразовывается в другую, а затем ещё в одну, и вот, у вас на выходе уже совершенно свежая история, только лишь отдалённо напоминающая начальную задумку. Думаю, наверняка, бывало!

Этим особенно хороши свои собственные проекты, когда нет чётко прописанных ТЗ, и начальник не стоит за вашей спиной, одёргивая при любом отклонении. А также этим особенно славится «магия программирования», ведь код — потрясающе гибкая магическая субстанция, которая в соединении с железом современных смартфонов, может творить настоящие чудеса.

Вот и на этот раз, у меня была идея сначала попробовать реализовать простейшую игру, на подобие «крестиков‑ноликов», только с более расширенным сюжетом (о ней как‑нибудь тоже обязательно расскажем). Но в какой то момент совершенно неожиданно у меня пропали кодовые наработки, которые были написаны на промежуточном этапе, и «со скрипом» пришлось возвращаться к самому началу написания программы.

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

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

Читать далее

Разработка приложений DevelSCADA

Время на прочтение9 мин
Охват и читатели5.9K

Система DevelSCADA поддерживает широкий спектр возможностей по расширению функционала с помощью скриптов, однако эти возможности все равно ограничены средствами, предоставляемыми самой SCADA системой, заложенной в нее разработчиками системы. При этом не редко есть необходимость расширить данный функционал, и зачастую для этого единственный вариант - просить разработчиков его реализовать внутри SCADA системы. Чаще всего такие запросы просто игнорируются, либо сильно растягиваются по срокам.

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

Данный механизм может быть полезен, к примеру, для интеграции DevelSCADA с какими-то сторонними системами или сервисами, имеющими специфичные интерфейсы взаимодействия, не предусмотренные в базовой поставке SCADA системы, а так же с устройствами, имеющие специфичные, свои собственные протоколы.

Читать далее

Скрипты в DevelSCADA

Время на прочтение5 мин
Охват и читатели6.5K

Для расширения базового функционала среды разработки DevelSCADA, система поддерживает возможность использования скриптов. Основным языком для разработки скриптов является JavaScript. Скрипты, в свою очередь поддерживают весь функционал языка JavaScript, дополняя его функциями работы с системой DevelSCADA.

Система поддерживает работу с двумя видами скриптов - скрипты интерфейса и скрипты ПЛК. Оба типа скриптов имеют идентичные интерфейсы для взаимодействия с системой, но при этом имеют разное предназначение.

Читать далее

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

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

Всем привет!

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

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

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

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

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

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

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

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

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

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

Читать далее

Неиспользуемый JavasScript код. Поиск и удаление

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

Как найти и удалить неиспользуемый JavaScript код даже на крупном сайте. Объёмный, но простой в использовании способ.

Читать далее

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

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

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

Читать далее

Даем LLM суперсилу: глубокое понимание 10 языков в вашем проекте

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

Примерно месяц назад я рассказывал о проекте @er77/code-graph-rag-mcp — инструменте, который превращает LLM из простого генератора кода в полноценного члена команды с глубоким пониманием архитектуры вашего проекта. Сегодня я рад представить самое крупное обновление, которое выводит анализ кода на совершенно новый уровень. Мы не просто добавили новые функции, мы кардинально расширили возможности инструмента, увеличили его производительность и добавили поддержку десяти языков программирования.

Читать далее

Создаем иммерсивную трехмерную визуализацию погоды с помощью React Three Fiber

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

Пошаговое руководство по симуляции солнца, дождя, снега и грозы в интерактивном трехмерном приложении для прогноза погоды.

Демо

Код

Меня всегда интересовала визуализация данных с помощью Three.js / R3F и я подумал, что приложение для прогноза погоды будет отличным началом. Одна из моих любимых открытых библиотек, @react-three/drei, содержит множество прекрасных инструментов, вроде облаков, неба и звезд, которые отлично подходят для визуализации погоды в 3D.

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

Читать далее

Стоит ли игра свеч? Менее кратко о Single SPA (часть 2)

Уровень сложностиСредний
Время на прочтение15 мин
Охват и читатели6.3K

Около года назад я написал первую часть статьи о Single SPA — о том, как я выбирал архитектурный подход, боролся с монолитом и пробовал собрать первые микрофронтенды. В статье были разобраны базовые принципы работы Single SPA, подключение importmap, сравнение с другими архитектурными решениями и настройка сборки на Webpack и Vite.

Эта статья — продолжение цикла. Здесь я поделюсь практикой: как на самом деле живётся с Single SPA, какие есть подводные камни и что можно вынести в виде рекомендаций.

Сразу скажу: Single SPA — не «серебряная пуля» и уж точно не современный тренд фронтенд-разработки. В 2025-м появилось еще больше других подходов, которые решают похожие задачи иначе. Но Single SPA всё ещё актуален там, где есть огромные легаси-системы, которые невозможно переписать с нуля. И вот именно для таких кейсов мой опыт может быть полезен.

Читать!

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

Игра на SWI-Prolog + Phaser

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели7.4K

Давно хотел попробовать Prolog, и вот появился удобный случай. Пришла идея логической игры, смесь шахмат, шашек и нашествия зомби. Prolog - логический язык программирования, говорят, на нём удобно решать комбинаторные задачи, что может пойти не так!

Читать далее

Веб. К черту фреймворки! Пишем свой starter-kit с роутером и сторами. Часть 1

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

Пробуем собрать свой минималистичный starter-kit.

Комедия в трех действиях. Туториал из трех частей.

Создадим причудливый конфиг на webpack + собственный роутинг в первой части. Реализуем реактивные хранилища во второй и уменьшим сложность с помощью веб-компонентов в третьей.

Читать далее

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

Время на прочтение4 мин
Охват и читатели9.2K

Всем привет!

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

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

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

Читать далее

[Пятничное] Я сломал русский язык. Теперь ваша очередь

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

Все вокруг стараются сделать мир лучше, пишут редакторы, используют нейросети. Скука! Я решил пойти другим путём и создал "Лабораторию Абсурда" — которая намеренно и с особым цинизмом превращает любой осмысленный текст в лингвистический бред.

Не спорю, существуют и другие генераторы бреда, но я дарю вам 50 (или что-то около того) разных способов издевательства над текстом и здравым смыслом! Никаких рекламных баннеров, только ванильный JS и словари на тысячи слов, только хардкор!

Читать далее

Полный курс Full‑Stack магии: от идеи и фреймворков до DevOps и SEO

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

Мир веб‑разработки давно вышел за пределы простых проектов. Статьи про «Hello, world» больше не спасают, когда нужно собирать масштабируемые приложения для реальных пользователей. Что выбрать — монолит или микросервисы? REST или GraphQL? React, Vue или Angular? Node.js, Python или Go? Какая база данных лучше подойдёт — реляционная или NoSQL? Нужно ли кэширование? Как настроить CI/CD, контейнеризацию и мониторинг? И почему нельзя забывать о мобильной версии и SEO? В этой статье я делюсь опытом, описываю архитектурные подходы, сравниваю основные технологии и инструменты, рассказываю о бэкенд‑ и фронтенд‑best practices, базах данных, кэшировании, DevOps, мониторинге и оптимизации. Каждая тема подкреплена примерами и ссылками на источники. Материал рассчитан на тех, кто хочет уверенно руководить полным циклом разработки — от планирования до продакшна. Если вы давно ищете структурированное руководство по современному фулл‑стеку, оно перед вами. Из этого путеводителя вы также узнаете об оптимизации производительности Node.js (gzip, асинхронность, логирование), работе с графами данных и типизации GraphQL, особенностях React (hooks, SSR), Vue, Angular, Tailwind и shadcn/ui, выборе баз данных, настройке кэширования Redis, задачах CI/CD и Dockerfile, Kubernetes, а также об инструментах мониторинга и SEO, включая мобильную адаптивность и структурированные данные. Текст большой, но разбит на разделы и содержит кодовые примеры, так что вы сможете легко адаптировать идеи под свои задачи.

Читать далее

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

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

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

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

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

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

Читать далее

Зубрить сложно, понимать легко: бинарный поиск

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

Как правило, обучающие материалы сводятся к показу одного «правильного» решения. Такие решения можно попробовать запомнить, но они быстро забываются и не помогают по-настоящему понять алгоритм.

Меня интригует вопрос: возможно ли объяснение, которое позволит не просто заучивать формулы, а понять саму логику? И если такое объяснение существует, даст ли оно возможность решать похожие задачи — или даже помогает становиться лучшим программистом?

Сразу оговорюсь: мы не будем останавливаться на тривиальных проверках,
вроде пустого массива или некорректных параметров. Фокус статьи — на сути алгоритма.

В этой статье мы не просто посмотрим на готовый код. Вместо этого мы:

1. Разберем ключевую идею алгоритма на простом примере.
2. Сконцентрируемся на крайнем случае, в котором ошибается большинство.
3. Сравним два подхода к реализации — с закрытым и полуоткрытым диапазоном.
4. Увидим, как небольшие изменения в коде позволяют решать целый класс задач.

Читать далее