Передача данных между воркерами в JavaScript, не так проста и имеет массу особенностей завязанных на реализации потоков в языке. Хотите узнать о том какие ограничения накладывает архитектура многопоточки JS и как эти ограничения безопасно обойти?
Если вы хотите узнать, какие связки технологий наиболее популярны в 2025 и что стоит доучить, чтобы стать full-stack разработчиком, эта статья вам поможет! Я три раза анализировал вакансии на разных площадках, в начале, середине и конце года, чтобы данная информация была наиболее полезной и честной. Также, если давно думали сделать свой пет-проект, но не знали, на чем сделать вторую часть приложения, тут есть ответ и на этот вопрос.
https://addons.thunderbird.net/static/img/addon-icons/default-64.png
Как я разработал переводчик для Thunderbird с помощью Deepseek: от идеи до публикации в официальном магазине.
Ранняя версия Sanitizer API была реализована в Chrome, но позже была удалена. Поэтому не стоит ориентироваться на старые материалы — спецификация API со временем значительно изменилась.
На данный момент Sanitizer API поддерживается в Firefox Nightly в соответствии с актуальной спецификацией. В Chrome Canary он также доступен, но только при включении специального флага. В Safari реализация пока не ведется, однако команда разработчиков Safari выразила поддержку этой инициативе.
Trusted Types API уже реализован в Chrome/Edge, Samsung Internet, Safari и Firefox Nightly. В Chrome он поддерживается начиная с версии 83, а начиная с версии 144 полностью соответствует последней спецификации и реализации в других браузерах.
Тултипы — классика веб-разработки. Кликаешь по элементу — и рядом всплывает небольшой «бабл» с дополнительной информацией. Но за этим простым кликом почти всегда стоит JavaScript, который рассчитывает, где именно показать тултип.
Попробуем поставить его сверху. Нет, места не хватает. Окей, давай снизу. Теперь он упирается в правый край — сдвинем чуть левее. Приходится учитывать кучу нюансов, чтобы тултип оказался на своём месте и нигде не обрезался, не теряя важный текст.
В этой статье я покажу, как написать хороший JavaScript, который обработает все такие случаи…
Шучу! Мы обойдёмся CSS и посмотрим, как современный Anchor Positioning API может помочь со всем этим. Никакого тяжёлого JS и лишних проблем с производительностью.
Если вы когда-либо использовали i18next или next-intl, вы, вероятно, знаете, что интернационализация часто замедляет процесс разработки.
Почему?
Как‑то на одном проекте понадобилось красиво равномерно разместить небольшие блоки‑виджеты в контейнере на странице. Сложность в том, что эти блоки различаются, как по высоте, так и по ширине. При чём нужно учесть адаптивность вёрстки и динамическое изменение содержимого, как контейнера, так и самих элементов — виджетов. Собственно мои изыскания по этой теме и вылились в разработку собственного решения и эту статью, которые, я надеюсь, будут полезны читателям.
API.
Это слово звучит в каждой IT-статье, в каждой вакансии, в каждом разговоре разрабов. Но когда гуглишь, что это, вываливается тонна заумных определений про «программные интерфейсы приложений», от которых мозг плавится.
Так что сегодня объясню, что такое API, так, что ты точно поймешь: на простых примерах, интересно, да еще и с крутой графикой. Уже через несколько минут ты будешь великолепно знать, что такое API и как создать свой собственный.
Ранее мы говорили о том, как улучшить кэширование наших проектов и правильно загружать поставщиков. А в этой статье мы рассмотрим следующее:
- Как мы можем использовать стратегии предварительной загрузки, включая что такое "магические" комментарии Webpack, и что такое спекулятивная/ручная предварительная загрузка;
- Как мы можем запрашивать данные с сервера, не дожидаясь загрузки наших статических файлов;
- А также какие сторонние или наши собственные решения могут быть использованы для этого.
Ранее мы поговорили о том, как сделать дерево зависимостей нашего проекта максимально чистым и почему это важно для ленивой загрузки. А в этой статье мы расскажем о следующем:
- Как мы должны загружать вендор файлы с точки зрения правильной организации ленивой загрузки.
- Что общего между стратегиями оптимизации "ленивой загрузки" и "кэширования", и как использование одной из них влияет на другую.
- Что такое кэшируемость и как сделать наше приложение максимально кэшируемым.
- А также как правильно настраивать группы кэша в Webpack и не испортить кэшируемость.
Ранее мы обсуждали самые основы ленивой загрузки и то, почему она вообще важна. А в этой статье мы рассмотрим следующее:
- Как бандлеры анализируют файлы исходного кода, строят деревья зависимостей и генерируют файлы для сборки.
- Как они генерируют файлы JavaScript из исходного кода.
- Как браузеры решают, какие сгенерированные файлы следует загружать, чтобы отобразить ленивую страницу/компонент.
- И как мы можем уменьшить размер и количество загружаемых файлов, правильно настроив структуру файлов и корректно используя статический импорт.
Ленивая загрузка - это принцип, который должен быть известен большинству frontend разработчиков. Однако, этот механизм обманчиво прост, и его освоение является гораздо более комплексной задачей, чем кажется многим. Если уже используете Lazy Loading, у вас все равно могут быть серьезные пробелы в знаниях. Но даже если вы считаете, что знаете про ленивую загрузку абсолютно все, освежить память не будет лишним.
В этой статье мы рассмотрим основы ленивой загрузки: что это такое и почему это важно;
как мы можем использовать ленивую загрузку в наших проектах; а также какие части кода следует загружать лениво.
Пишем Slider с Web Components
В этой статье мы создали полнофункциональный слайдер, используя современные веб-стандарты. Мы не только реализовали базовую логику, но и освоили ключевые концепции:
• Работу с Shadow DOM для изоляции стилей и структуры
• Использование слотов для композиции контента
• Реакцию на атрибуты для настройки поведения компонента
• Организацию жизненного цикла через connectedCallback
Микросервисы тут, микросервисы там… Из каждого утюга доносится дивный сказ про прекрасный мир микросервисов. А ведь это всего лишь один вид из десятка архитектурных стилей, который имеет свои достоинства и недостатки.
В этом эксперименте мы внедрим микросервисы в личный сайт, нарушив ключевые принципы DDD. Я создам антипаттерн «бедных сервисов» (Anemic Domain Model) и покажу, чем опасен прямой доступ к данным между микросервисами.
Эта статья о том, что за прекрасным внешним видом, большой функциональностью, высокопроизводительным исправным кодом может скрываться абсолютное зло.
Моя история разработки инкрементальной игры о горнодобывающей промышленности Кузбасса с подробным разбором технической архитектуры, системы безопасности и монетизации.
Игра на 80% сделана с помощью вайб кодинга, но это не так просто как звучит.
Современный фронтенд напоминает перегруженный интерфейс: мощные возможности, но чтобы начать работать, нужно изучить десятки концепций. React, Vue, Angular — у каждого свой сложный путь изучения.
Мы задались вопросом: что действительно нужно знать, чтобы создавать UI?
Оказалось, всего четыре концепции: компоненты, состояние, эффекты и DOM. Все остальное — синтаксический сахар и edge cases.
Так родился наш эксперимент: упаковать эти основы в максимально простую модель. Не изобретать новое, а отшлифовать существующее.
Иногда прогресс — это не добавление возможностей, а смелость убрать лишнее.
Всем привет! Сегодня я возвращаюсь с новой порцией TypeScript- и React-магии. Вместе разберем полиморфизм в React, а именно — паттерн as. Зачем он нужен, как его прикрутить без багов и почему это сделает ваши компоненты в разы круче. Как обычно — всё под катом.
ElevenLabs выложила в открытый доступ проект Eleven Shopping - голосового агента, который превращает процесс выбора товаров и оформления заказа в диалог с ИИ. В основе - стек Next.js + React + TypeScript + Tailwind CSS и подключение к Shopify Storefront API через протокол MCP.
Я построил полноценную образовательную платформу для изучения иврита — с интерактивными тренажерами, умным словарем на 4000+ слов и системой подписок. В статье рассказываю о нетривиальных технических решениях, архитектурных выборах и ошибках, которые пришлось исправлять по ходу.
Продукт: hebrewglot.com
Стек: Next.js 15, TypeScript, PostgreSQL + SQLite, Stripe, NextAuth
Недавно мы переделали наши внутренние инструменты, визуализирующие компиляцию JavaScript и WebAssembly. При работе оптимизирующего компилятора Ion мы теперь можем генерировать интерактивные графы, демонстрирующие, как конкретно обрабатываются и оптимизируются функции.
Вы можете сами поэкспериментировать с этими графами в оригинале статьи. Просто введите какой-нибудь код на JavaScript в функцию test, и наблюдайте за созданием графа. Также там можно щёлкать и перетаскивать граф, менять масштаб при помощи колеса мыши с зажатым Ctrl и перетаскивать ползунок вниз, чтобы изучить процесс оптимизации.
В процессе экспериментов обратите внимание на то, насколько стабильна схема графа даже при изменении размеров блоков и добавлении новых структур. Попробуйте нажать на заголовок блока, чтобы выделить его, а затем перетащить ползунок, и наблюдайте за тем, как меняется граф, а блок остаётся на месте. Или нажмите на номер команды, чтобы подсветить её и следить за ней между проходами.
Разумеется, мы не первые, кто начал визуализировать внутренние графы компиляторов, и не первые, кто сделал их интерактивными. Но меня не устраивали результаты работы популярных инструментов наподобие Graphviz и Mermaid, поэтому я решил создать алгоритм специально под наши потребности. Получившийся алгоритм прост, быстр, создаёт на удивление высококачественный вывод и его можно реализовать в менее чем тысяче строк кода. В этой статье я объясню алгоритм и конструкторские решения, лежащие в его основе.
