JavaScript *

Знакомо чувство, когда читаешь документацию, а через десяток страниц уже не помнишь, что именно успел изучить? Или когда возвращаешься к старой статье и не можешь понять – ты уже видел эту ссылку или нет?

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

Но что если заставить браузер самому отмечать ссылки, которые у вас уже сохранены? Чтобы слева от каждой знакомой ссылки возникала метка с названием папки из закладок – как тихий намёк: “Ты это уже сохранял, не потеряй”.

Сегодня мы не просто поговорим об идее – мы сгенерируем через нейросеть готовое расширение для Chrome, которое сделает это за нас. А заодно разберёмся, как такие инструменты создавать, тестировать и даже улучшать – шаг за шагом, от первого промпта до работающего прототипа.

Пристегнитесь, будет интересно!

Оптимизация кода. Что быстрее: циклы vs стрелочные функции. Простая задача с собеседования. Разбор простых итераций с примерами кода

Идея «умного» рабочего стола у меня появилась давно. Под "умным" я понимал не виджеты, прогнозы погоды и не очередную анимацию, а максимально простую идею: фон рабочего стола должен соответствовать тому времени суток, которое сейчас у меня за окном. Без условностей. Только солнце.

Кейс: как использовать frontend-фичи и UX для оптимизации сетевого трафика запросов на примере Дзена и других сервисов

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

Сегодня двинемся дальше. Покажу, как создавать множество однотипных объектов, не копируя код раз за разом. Мы разберемся с функциями-конструкторами и оператором new — тем самым фундаментом, на котором строятся современные классы в JavaScript. Как всегда, расскажу все доступно и просто, поехали!

Привет, Хаброжители! Мы приготовили для вас новый перевод про генерацию 3D-мешей из текста.

Недавно мне захотелось научиться преобразовывать текст в 3D-меши для последующего рендеринга, так, чтобы такими объектами можно было манипулировать в рамках моего проекта Geotoy и на языке Geoscript. Я занялся исследованием инструментов и библиотек, которые могли бы решать разные аспекты этой задачи, и потом собрал конвейер, реализующий всё вместе. Получились красивые 2-многообразные 3D-меши, поддерживающие произвольные шрифты, текстовые стили и многое другое.

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

Обзор на браузерные API, которые стали Widely available в декабре 2025. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

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

Мне нравится, когда можно увидеть обратную сторону; какой бы формальной и железобетонной ни казалась спецификация ES-262, мы всё равно замечаем (если знать, куда смотреть) в ней все хорошие и плохие решения, принятые сотнями людей, разрабатывавших язык. У JavaScript есть характер. Да, он не всегда делает всё в точности так, как можно ожидать, но на мой взгляд, JavaScript обладает настоящим очарованием, которое можно оценить, если глубоко его изучить.

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

Подход по компонентам — не новое понятие. Например, в экосистеме Vue vue-i18n поддерживает [i18n SFC (Single File Component)](https://vue-i18n.intlify.dev/guide/advanced/sfc.html). Nuxt также предлагает [переводы на уровне компонента](https://i18n.nuxtjs.org/docs/guide/per-component-translations), а Angular использует похожий паттерн через свои [Feature Modules](https://v17.angular.io/guide/feature-modules).

Даже в Flutter-приложении часто встречается следующий паттерн:

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

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

Именно о них предлагаю поговорить сегодня.

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

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

Всем привет.

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

У React-разработчика две беды:

1. Целевые данные изменились, а ререндера нет.

2. Целевые данные не изменились, а ререндер есть.

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

Ранее публиковал теоретическую часть по рекурсивным импортам, желательно ознакомиться перед тем как продолжить, чтобы было общее преставление.

Рекурсивные импорты рассмотрим на примере React/Redux приложении.

Исходный код приложения опубликован тут, можете склонировать и попробовать самостоятельно исправить ошибки. Так сказать закрепить теорию на практике.

Привет, Хабр! Меня зовут Владислав, мне 13 лет, и я создал язык программирования VladX. В этой статье расскажу, как устроен его интерпретатор, почему я выбрал русский синтаксис и как можно попробовать язык в действии.

Привет, друзья!

В этой небольшой статье мы вместе с вами немного пощупаем новый Web API - Anchor Positioning.

Anchor Positioning API предоставляет новые возможности для связывания элементов между собой. Одни элементы являются якорями (якорными, anchor elements), другие - позиционируемыми относительно якорей (закрепленными, anchor-positioned elements). Размер и положение позиционируемого элемента может определяться размером и положением якорного элемента.

Кроме того, с помощью CSS можно:

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

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

На сегодняшний день этот API поддерживается всеми основными браузерами (в Safari пока только в качестве экспериментальной возможности).

В компаниях с несколькими продуктами знания о коде и архитектуре почти неизбежно расползаются. Часть живёт в репозиториях, часть — в статьях с архитектурными решениями, часть — в корпоративной базе знаний (в нашем случае — Confluence). На небольшом масштабе это выглядит как порядок. Но по мере роста начинают проявляться системные эффекты.

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

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

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

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

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

правильное создание Blob

разбивка больших файлов на части (chunks)

сжатие и конвертация изображений

реализация надежных превью файлов

экспорт данных в виде загружаемых файлов

управление памятью во избежание утечек Blob URL

Цель руководства — сделать работу с файлами быстрой, стабильной и готовой к продакшну.

Base64 — это схема кодирования двоичных значений в текст, преобразующая произвольные двоичные данные (например, изображения, файлы или любые байтовые последовательности) в безопасную печатную ASCII-строку, состоящую из 64-символьного алфавита (A–Z, a–z, 0–9, +, /). Браузеры применяют эту схему в JavaScript для встраивания двоичных данных непосредственно в код/HTML или для передачи двоичных данных в виде текста.

Недавно в браузерах появились удобные и безопасные функции для обработки Base64: Uint8Array.toBase64() и Uint8Array.fromBase64(). Хоть у них и есть множество параметров, смысл их сводится к кодированию и декодированию.

При кодировании они берут 24 бита из входных данных и разделяют их на четыре сегмента по 6 бит, и каждое 6-битное значение (в интервале от 0 до 63) соотносится с конкретным символом из алфавита Base64: первые 26 символов — это буквы A-Z в верхнем регистре, следующие 26 — a-z в нижнем, затем идут цифры 0-9 и, наконец, символы «+» и «/» в качестве 62-го и 63-го символов. Если длина входных данных не кратна трём байтам, то в качестве заполнителя используется знак «=».

Насколько же быстро могут работать эти функции?

Опишу пример, демонстрирующий, насколько важна декларативность в вопросах управления поведением «аппки» (за этим стоят вопросы сохранения высокого уровня абстракции и, как следствие, масштабируемости приложения). Задача - сделать управление мутациями DOM более декларативным и, как заявлено в заголовке, использовать реактивность на примере управления состоянием.