API URLPattern официально стал базовой возможностью и доступен во всех основных браузерах с сентября 2025 года. Однако он может не работать на старых устройствах или в старых браузерах. Узнать больше.

Когда требуется функциональность, реагирующая на изменения URL, часто приходится писать сложные регулярные выражения или подключать сторонние библиотеки для маршрутизации. Теперь, когда URL Pattern API вошел в Baseline, у нас появилось стандартное, мощное и универсальное решение для этой задачи.

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

В основе кэширования лежит сокращение лишней работы. Каждый раз, когда браузер, CDN или прокси обращается к серверу за ресурсом, который не изменился, впустую тратятся время и трафик. Когда сервер заново формирует или повторно отдает идентичный контент, это лишь добавляет нагрузки и увеличивает затраты. А при пиковом трафике — например, в "черную пятницу", во время вирусной публикации или DDoS-атаки — такие ошибки стремительно накапливаются и приводят к сбоям всей системы.

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

В основе кэширования лежит сокращение лишней работы. Каждый раз, когда браузер, CDN или прокси обращается к серверу за ресурсом, который не изменился, впустую тратятся время и трафик. Когда сервер заново формирует или повторно отдает идентичный контент, это лишь добавляет нагрузки и увеличивает затраты. А при пиковом трафике — например, в "черную пятницу", во время вирусной публикации или DDoS-атаки — такие ошибки стремительно накапливаются и приводят к сбоям всей системы.

Эта статья поможет вам создать приложение Express 5 с поддержкой TypeScript.

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

Настоятельно рекомендую писать код вместе со мной. Мы будем использовать подход "Разработка через тестирование" (test-driven development, TDD) для создания REST API, который может стать основой вашего следующего приложения Express.

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

Демо

Код

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

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

Мы публиковали статью «Что нужно знать о современном CSS» в прошлом году (2024), и какое-то время я сомневался, хватит ли материала, чтобы сделать новую версию. Но время идет — и CSS развивается вместе с ним. И знаете что? В этом году новинок даже больше, чем в прошлом. Этот (пусть и немного субъективный) список можно рассматривать как подборку «возможностей, которые, по мнению Криса, стоит знать — будь то совсем новые или те, что недавно получили хорошую поддержку в браузерах».

Эта статья поможет вам создать приложение Express 5 с поддержкой TypeScript.

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

Настоятельно рекомендую писать код вместе со мной. Мы будем использовать подход "Разработка через тестирование" (test-driven development, TDD) для создания REST API, который может стать основой вашего следующего приложения Express.

Нотация Big O («О» большое) — это способ описания производительности функции без измерения времени ее выполнения. Вместо того, чтобы засекать, сколько секунд выполняется функция от начала до конца, Big O показывает, как меняется время ее выполнения по мере увеличения размера входных данных. Этот подход помогает понять, как программа будет вести себя при разных объемах входящей информации.

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

По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).

Каждая интерактивная веб-страница опирается на Document Object Model (DOM) и ее систему событий. Когда мы нажимаем кнопку, вводим текст в поле или наводим курсор на изображение, возникает событие. Но оно не происходит само по себе — событие проходит по дереву DOM в процессе, который называется распространением события (event propagation).

В двух словах: интернационализация — это не только перевод текста. Она включает в себя форматирование дат, правильное образование множественного числа, сортировку имен и многое другое с учетом конкретных локалей. Вместо тяжелых сторонних библиотек современный JavaScript предлагает Intl API — мощный встроенный инструмент для работы с i18n. Еще одно напоминание о том, что веб действительно глобален.

Существует распространенное заблуждение, что интернационализация (i18n) сводится лишь к переводу интерфейса. Перевод, конечно, важен, но это лишь одна из частей. Настоящая сложность — в адаптации информации под культурные особенности.

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

В этой серии статей я делюсь с вами своим опытом решения различных задач из области веб-разработки и не только.

Другие статьи серии:

DevOps Tutorials — Ansible: разворачиваем веб-приложение на виртуальном сервере

DevOps Tutorials — Terraform: создаем виртуальный сервер в облаке

В предыдущих статьях мы рассмотрели настройку сети и создание виртуального сервера Ubuntu Linux в Yandex Cloud с помощью Terraform и деплой Angular+Java веб-приложения на этом сервере с помощью Ansible. В этой статье мы научимся разворачивать JavaScript+Go веб-приложение в кластере Kubernetes.

Интересно? Тогда прошу под кат.

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

В этой серии статей я делюсь с вами своим опытом решения различных задач из области веб-разработки и не только.

Другие статьи серии:

DevOps Tutorials — Ansible: разворачиваем веб-приложение на виртуальном сервере

Предыдущая статья была посвящена деплою Angular+Java веб-приложения на виртуальном сервере Ubuntu Linux с помощью Ansible. В этой статье мы научимся настраивать для этого деплоя сеть и создавать виртуальный сервер в облаке с помощью Terraform.

Интересно? Тогда прошу под кат.

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

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

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

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

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

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

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

Демо

Код

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

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

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

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

В этой серии статей я делюсь с вами своим опытом решения различных задач из области веб-разработки и не только.

В этой статье мы изучим библиотеку react-force-graph-2d для рисования двумерных графов.

Демо приложения:

Локальный запуск приложения:

git clone https://github.com/harryheman/react-graph.git
cd react-graph
npm i
npm run dev

Интересно? Тогда прошу под кат.

Сначала я недооценил document.currentScript, но оказалось, что он отлично подходит для передачи параметров конфигурации прямо в теги <script> — и это далеко не все.

Порой я натыкаюсь на давно существующие браузерные API в JavaScript, о которых, по идее, я должен был узнать гораздо раньше. Например, window.screen или метод CSS.supports(). К счастью, я понял, что не один такой. Помню, как однажды упомянул window.screen в посте и получил неожиданно много комментариев от людей, которые тоже впервые о нем слышали. Это меня немного приободрило — я почувствовал себя не таким уж глупым.

Видимо, дело не в том, как давно существует API, а в том, насколько он полезен в реальных задачах. Если window.screen почти нигде не используется, о нем легко забыть.

Но иногда все же появляется неожиданный шанс применить одну из этих малоизвестных возможностей. Похоже, я как раз нашел такой случай для document.currentScript — и намерен использовать его по максимуму.

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

В этой серии статей я делюсь с вами своим опытом решения различных задач из области веб-разработки и не только.

В этой статье мы научимся разворачивать Angular+Java веб-приложение на виртуальном сервере Ubuntu Linux с помощью Ansible.

Интересно? Тогда прошу под кат.

В этом году JavaScript исполняется 30 лет.

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