Pull to refresh
32K+
339
Igor Agapov@aio350

Web Developer

18
Rating
1 055
Subscribers
Send message

Жизненный цикл токена API: от выпуска до отзыва

Level of difficultyMedium
Reading time22 min
Reach and readers13K

Токены (tokens) API часто расцениваются как незначительные детали реализации.

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

Последствия для безопасности отнюдь не просты.

В этой статье рассматривается полный жизненный цикл токена API, от выпуска (issuance) до истечения срока действия (expiration) или принудительного отзыва (revocation).

Читать далее

Глубокое погружение в React Fiber

Level of difficultyMedium
Reading time25 min
Reach and readers10K

Задумывались ли вы когда-нибудь о том, что на самом деле происходит под капотом, когда вы рендерите приложение React? Мы знаем, что React строит дерево DOM и отображает UI на экране, но как React конструирует это дерево и как он эффективно обновляет его при изменении состояния?

В этой статье мы рассмотрим React Fiber — основной движок согласования (reconciliation) React. Мы рассмотрим, как React строил DOM до v15, недостатки этой ранней стековой (stack) модели с точки зрения производительности и то, как асинхронная архитектура Fiber решает эти проблемы, начиная с React v16 и до React v19.

Читать далее

Размытая граница между состояниями CSS и событиями JavaScript

Level of difficultyEasy
Reading time9 min
Reach and readers9.8K

CSS «слушает» нас. Нет, не в буквальном смысле. Суть в том, что в CSS появляется все больше псевдоклассов, которые позволяют реагировать на события JS без необходимости писать сам JS. Формально псевдоклассы отслеживают состояния, а не события, но порой они настолько похожи на обработчики событий, что разница становится почти незаметной (хотя в контексте CSS это не так уж важно).

Читать далее

Книга аутентификации

Level of difficultyMedium
Reading time47 min
Reach and readers9.2K

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

Как следует из названия, эта книга в значительной степени посвящена системе аутентификации и авторизации для веб-приложений. Более общие вопросы безопасности см. в серии “Шпаргалки OWASP” .

Если у вас возникнут какие-либо вопросы, не стесняйтесь задавать их на сервере Discord или в обсуждениях на GitHub.

Разработано и поддерживается Pilcrow. Исходный код доступен на GitHub.

Читать далее

Создание цветовой темы с помощью light-dark(), contrast-color() и запросов стилей

Level of difficultyMedium
Reading time6 min
Reach and readers5.3K

В этом небольшом туториале я покажу вам, как с помощью нескольких новых возможностей CSS можно создать действительно прикольную динамичную систему тематизации (theming). Эта техника позволяет создавать тематизированные компоненты с тенями в светлом режиме и светящимися границами в темном режиме, с текстом, который всегда остается читаемым, независимо от динамичного цвета его фона. Все на CSS. Доступно во всех современных браузерах с мая 2026 года.

Читать далее

Как на самом деле работают LLM

Level of difficultyMedium
Reading time22 min
Reach and readers29K

В статье подробно рассматриваются принципы работы больших языковых моделей (large language model, LLM). Поскольку в основе большинства современных LLM лежит архитектура трансформера (transformer), ее понимание дает представление о ключевых механизмах, обеспечивающих работу таких моделей.

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

Читать далее

HTML Sanitizer API: конец эпохи DOMPurify и XSS-страданий

Level of difficultyEasy
Reading time9 min
Reach and readers11K

Инженеры узнают о межсайтовом скриптинге (Cross-Site Scripting, XSS) тремя способами.

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

А есть те, кто узнает о нем через страдания, когда их сайт становится уязвимым. Когда злоумышленник внедряет скрипт, который крадет токены сессий из localStorage, перехватывает файлы cookie или перенаправляет пользователей на фишинговый сайт. Я лично присоединился к клубу «пострадавших» еще в 2005 году, когда встроенная Flash-подпись на форуме, которым я владел, превратилась в кошмар с точки зрения безопасности… но это уже другая история.

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

Читать далее

Использование Blob API для обработки файлов, их загрузки и создания клиентских приложений без утечек памяти

Level of difficultyMedium
Reading time15 min
Reach and readers9.9K

Современные фронтенд-приложения постоянно взаимодействуют с файлами.

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

Но именно здесь начинаются настоящие проблемы.

Читать далее

Navigation API теперь доступен в Baseline

Level of difficultyEasy
Reading time13 min
Reach and readers9.9K

Navigation API предоставляет возможность инициировать (программно запускать), перехватывать и управлять навигацией в браузере. Он также позволяет исследовать (traverse) сущности истории (history entries) приложения. Это улучшенный вариант предыдущих возможностей веб-платформы, связанных с навигацией, таких как History API и window.location, который решает их проблемы и специально предназначен для одностраничных приложений (single-page applications, SPA).

Читать далее

Управляемый прокруткой CSS в 2026 году — разработка карусели без JavaScript

Level of difficultyMedium
Reading time18 min
Reach and readers12K

Исторически создание карусели в веб-разработке означало использование какой-либо JS-библиотеки. Slick, Swiper, Flickity, Embla Carousel и другие заполняли пробел платформы. Каждая из них увеличивала размер сборки, имела свои особенности обеспечения доступности и накладные расходы на обработку событий. Полный минифицированный пакет Swiper v11 весит приблизительно 140 КБ; даже модульные импорты составляют 40-60 КБ для ядра и навигации. Умножьте это на бесчисленные маркетинговые страницы, галереи товаров в электронной коммерции и макеты с большим количеством медиаконтента, которые зависят от каруселей, и расходы сильно возрастут: долгое время до интерактивности, блокировка основного потока во время инициализации и большой размер передаваемых данных на каждой странице, где используется слайдер.

Читать далее

Intl: мощный браузерный API, который вы, возможно, не используете

Level of difficultyEasy
Reading time21 min
Reach and readers12K

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

Читать далее

Предварительная загрузка изображений с помощью JavaScript

Level of difficultyEasy
Reading time8 min
Reach and readers11K

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

Читать далее

Главные игроки экосистемы JavaScript по состоянию на 2026 год

Level of difficultyEasy
Reading time18 min
Reach and readers8.3K

Ранее мы писали похожие статьи о CSS, но JavaScript заслуживает не меньшего внимания! Тем более что JavaScript лучше справляется с версионированием. Мы рассмотрим новые возможности самого языка, а также основные среды выполнения, фреймворки, библиотеки и инструменты.

Читать далее

37 советов и приемов по написанию качественных тестов для фронтенда

Level of difficultyEasy
Reading time30 min
Reach and readers7.1K

Мне нравится писать тесты. Написание теста и последующее обновление кода для его прохождения — всегда увлекательный процесс.

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

Представляю вашему вниманию мои советы по написанию высококачественных тестов для фронтенда.

Читать далее

Долг понимания — скрытая цена кода, сгенерированного искусственным интеллектом

Level of difficultyEasy
Reading time8 min
Reach and readers9.9K

“Долг понимания” (comprehension debt) — это скрытая цена, которую человеческий интеллект и память платят в результате чрезмерной зависимости от ИИ и автоматизации. Для инженеров это особенно актуально в сфере разработки агентных систем.

Когда команды активно используют инструменты для генерации кода с помощью ИИ, возникают определенные издержки, которые не отражаются в показателях производительности. Особенно это касается случаев, когда проверка всего кода, генерируемого ИИ, становится утомительной. Эти издержки накапливаются постепенно, и в конечном итоге их приходится оплачивать — с процентами. Это называется “долг понимания” или “когнитивный долг”.

Читать далее

10 веб-API, заменяющих многие библиотеки JavaScript

Level of difficultyEasy
Reading time18 min
Reach and readers15K

Современные браузеры тихо съедают экосистему JavaScript живьем.

За последние несколько лет основные браузеры выпустили нативные веб-API, которые заменяют удивительно большое количество утилит, которые мы до сих пор устанавливаем по привычке. Тем не менее, многие разработчики продолжают использовать уже ненужные, но привычные библиотеки. Если зависимость всегда работала, она остается в стеке, даже если браузер уже умеет выполнять ту же работу.

Такой подход обходится дороже, чем кажется. Каждый дополнительный пакет увеличивает вес сборки, затраты на обслуживание, частоту обновления версий и риск отказа от проекта в долгосрочной перспективе. Нативные API-интерфейсы стоят пользователям 0 КБ данных, работают глубоко в движке (часто вне основного потока (main thread)) и используют оптимизации, недоступные библиотекам.

Читать далее

Выделение памяти в Go

Level of difficultyHard
Reading time36 min
Reach and readers8.9K

Эта статья посвящена языку программирования Go 1.24, работающему на Linux на архитектуре ARM. Она может не охватывать специфические для других операционных систем (ОС) или аппаратных архитектур детали.

Читать далее

JavaScript: заметка о свойствах source ToggleEvent и closedBy HTMLDialogElement

Level of difficultyEasy
Reading time6 min
Reach and readers7.1K

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

В этой небольшой статье я расскажу вам о новом свойстве события toggle - source, а также о новом атрибуте HTML-элемента dialog - closedby.

Свойство source позволяет определять источник переключения видимости поповера (popover), а атрибут closedby позволяет декларативно управлять логикой закрытия dialog, но обо всем по порядку.

Читать далее

Выполнение HTTP-запросов в Node.js

Reading time20 min
Reach and readers7.3K

Долгое время я использовал пакет request (теперь устаревший) для выполнения HTTP-запросов в Node.js. Затем в моду вошли промисы (promises), и я переключился на request-promise (также ныне устаревший). Затем я начал использовать axios и думал, что на этом все... но ошибался. История HTTP в Node.js продолжает эволюционировать, и это прекрасно.

Выполнение запросов HTTP - одна из самых распространенных задач в Node.js. Будь то обращение к API, получение данных из внешнего сервиса или разработка веб-скрейпера (scraper), важно знать, как делать это эффективно. Хорошая новость состоит в том, что начиная с Node.js 18 в качестве глобальной переменной доступен стандартный fetch(). Если вы использовали fetch() в браузере, то уже знаете, как использовать его на сервере. Никаких дополнительных зависимостей, никаких оберток, только тот же знакомый API, предоставляющий все необходимое для выполнения запросов HTTP современным способом в Node.js.

Читать далее

Планировщик Go

Level of difficultyMedium
Reading time36 min
Reach and readers8.9K

Эта статья посвящена языку программирования Go 1.24, работающему на Linux на архитектуре ARM. Она может не охватывать специфические для других операционных систем (ОС) или аппаратных архитектур детали.

В этой статье подробно рассматриваются следующие вопросы:

Компиляция и среда выполнения Go
Примитивный планировщик
Улучшение планировщика
Модель GMP
Начальная загрузка программы
Создание горутины
Цикл планирования
Поиск готовой к выполнения горутины
Вытеснение горутин
Обработка системных вызовов
Сетевой и файловый ввод-вывод
Работа netpoll
Сборщик мусора
Общие функции
API среды выполнения Go

Читать далее
1
23 ...

Information

Rating
425-th
Location
Екатеринбург, Свердловская обл., Россия
Date of birth
Registered
Activity

Specialization

Бэкенд разработчик, Фронтенд разработчик
Старший
JavaScript
HTML
React
TypeScript
CSS
Веб-разработка
Node.js
Express
Webpack
Next.js