Как переносить «висячие» слова с помощью JavaScript

Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.

#фронтенд #javascript #ux

@tproger_web
Читайте также в VK и Max

JavaScript для всех: деструктуризация

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

С появлением ES6 в 2015 году у нас появилась деструктуризация: единый, лаконичный синтаксис для распаковки значений из массива или объекта и их присваивания переменным в одном объявлении let, const или var. В самой простой форме — деструктуризации с шаблоном связывания — каждое значение извлекается из литерала и попадает в соответствующий идентификатор за раз.

Понять, как это работает и где может пригодиться вам, поможет эта статья: https://css-tricks.com/javascript-for-everyone-destructuring/

#javascript #основы

@tproger_web
Читайте также в VK и Max

80% проблем с асинхронностью в Angular решают пять операторов RxJS

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

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

Если хотите перестать гадать, почему данные приходят не в том порядке, и сделать обработку ошибок по-взрослому, смотрите материал: https://habr.com/ru/companies/ruvds/articles/1008646/

#angular

@tproger_web
Читайте также в VK и Max

В каком порядке что изучать в девопсе? Популярных роадмапов куча, идеального нет.

roadmap.sh/devops — самый полный по охвату, но это гигантская интерактивная карта без чёткого порядка: открываешь и тонешь в сотне тем.

github.com/milanm/DevOps-Roadmap — выглядит всё очень уверенно и как будто свежее, но в реальности чел просто обновил заголовок на 2026 год, а внутри всё ещё лежит информация например про Puppet.

devopsroadmap.io — интереснее по подходу: итеративное обучение через сквозной проект, GitOps и security подаются как база, есть ветки роста (SRE, Platform Engineering, MLOps). Но внутри скорее каркас со ссылками, чем полноценный контент. Сетей нет, Ansible нет, облако обзорно. Как навигатор сгодится.

Что реально нужно в 2026 и чего нет ни в одном роадмапе целиком: GitOps (Argo CD/Flux), Platform Engineering, FinOps для больших, OpenTelemetry. Secrets management (Vault, External Secrets) — это вообще первое, что настраиваешь на проекте. Тему AI в пайплайне генераторы контента тоже пока не научились системно покрывать.

Есть курс Яндекс Практикума PRO «DevOps для эксплуатации и разработки». Он хорошо закрывает ядро: Git с Git Flow, GitLab CI, Terraform, Ansible, Docker, Kubernetes, мониторинг (Prometheus + Grafana + Loki), CD с rollback и feature flags, DORA-метрики. Финальный проект в Yandex Cloud с фидбеком от эксперта.

Чего курс не даст: обучение программированию, GitHub Actions, GitOps/Argo CD, Kustomize, облачный провайдер системно (AWS/Azure/GCP), supply chain security, тестирование как дисциплину. Это придётся добирать самостоятельно, как и фундаментальные знания по сетям (не знаю, почему к ним сейчас так мало внимания).

Если нужна структура с менторством — курс + параллельно по roadmap.sh ходить в ширину и в глубину. Если умеете планировать обучение и пинать себя самостоятельно — документация, домашний кластер в minikube и реальные проекты на GitHub закроют 80% потребностей.

Есть тут CSS-разработчики? Отмечайтесь в комментариях

@tproger_web
Читайте также в VK и Max

Firefox 149: нативные контролы, CSS-гибкость и Reporting API для CSP

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

Главное, что стоит взять на заметку:

— Программное управление нативными элементами. Появилась поддержка showPicker() для <datalist> — теперь можно открывать браузерный picker для списка опций по событию пользователя. Также добавили CloseWatcher: наконец-то можно единообразно обрабатывать закрытие модалок, попапов и кастомных компонентов через Esc или системную кнопку «Назад» на Android, как это делают нативные элементы.

— Больше гибкости в CSS. shape-outside теперь понимает функцию xywh() — можно задавать форму обтекания контентом с привязкой к краям блока. vertical-align стал шорткатом для свойств выравнивания по базовой линии, а @container позволяет указывать только имя контейнера без условия запроса.

— Безопасность и отчётность. Реализовали Reporting API для CSP и Integrity Policy. Теперь можно ловить нарушения политик через ReportingObserver, а не только полагаться на заголовок Report-To. Удобно для мониторинга в production.

Кроме того, добавили captureStream() для медиаэлементов (стримим видео с веб-камеры или экрана напрямую в WebRTC), расширили допустимые символы в DOM-методах (теперь как в HTML-парсере) и внедрили поддержку математического шрифта через font-family: math.

Полный список изменений, включая нововведения для WebDriver и дополнений, — в официальных заметках: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/149

#новости #фронтенд #firefox

Коды состояния HTTP на котиках 😺

Если объяснять HTTP-состояния текстом скучно, вот забавный проект: https://http.cat/

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

@tproger_web
Читайте также в VK и Max

SPA-переходы без фреймворков: асинхронная смена страниц с клонированием DOM

Главная сложность плавных переходов между страницами — нужно одновременно держать в DOM старую и новую страницу, чтобы анимировать их crossfade. Готовые решения скрывают эту механику, но если требуется тонкая настройка, лучше разобраться, как всё устроено внутри.

В туториале показывают, как собрать лёгкий SPA-роутер на чистом JS, GSAP и Vite. Ключевой приём: клонировать контейнер, подгрузить HTML новой страницы, запустить параллельную анимацию и только потом удалить старый DOM.

Помимо роутинга с перехватом кликов и обработкой popstate, разбирают организацию страниц как модулей с init/cleanup, анимацию входа для элементов и блокировку повторных переходов.

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

Детали и код — в материале.

#spa #javascript #vite

Интересно было бы увидеть каким кодом пофиксили проблему

@tproger_web
Читайте также в VK и Max

Разработчик Нильс Линхир портировал Doom в браузер с 3D рендерингом на чистом CSS. Игровая логика написана на JavaScript, но для вывода графики автор принципиально отказался от Canvas и WebGL. Вся визуализация переложена на браузерный движок стилей.

Детали реализации:
— каждый объект и текстура представлены обычным тегом div;
— позиционирование в пространстве работает через CSS-трансформации;
— геометрия вычисляется нативными CSS-функциями hypot и atan2;
— сложная архитектура уровней вырезается свойством clip-path.

Технический разбор архитектуры и нюансов производительности: https://tprg.ru/yGpg

@make_game (теперь в VK и Max)

Внимание: axios 1.14.1 и 0.30.4 содержат троянец

Злоумышленники взломали npm-аккаунт мейнтейнера axios и опубликовали вредоносные версии. Они были доступны около трёх часов и уже удалены из реестра, но могли попасть в ваши проекты.

Вредоносный код добавляет зависимость plain-crypto-js, которая при установке загружает и запускает RAT-троянец на macOS, Windows и Linux. Сами исходники axios не изменены, поэтому проверка node_modules постфактум бесполезна.

Что делать прямо сейчас

Проверьте package-lock.json командой:

grep -E 'axios@(1\.14\.1|0\.30\.4)|plain-crypto-js' package-lock.json

Если есть совпадения:
— откатите axios до 1.14.0 или 0.30.3
— проверьте наличие артефактов RAT (пути перечислены в статье)
— немедленно смените все секреты на затронутых машинах и в CI/CD
— добавьте в CI флаг --ignore-scripts, чтобы блокировать postinstall-хуки

Если axios используется как транзитивная зависимость, зафиксируйте безопасную версию через overrides в package.json.

Полный список индикаторов компрометации и технические детали в материале: https://tproger.ru/news/axios-vzloman-na-npm---vredonosnye-versii-ustanavlivayut-rat-troya

V8 выдаёт headless-браузеры через Proxy и console.groupEnd

Если вы используете Puppeteer или Playwright, то знаете: headless-режим можно замаскировать — подменить User-Agent, размеры окна, отключить флаги. Но есть сигналы, которые не зависят от ваших настроек. Исследователь обнаружил два способа детектировать активный CDP Runtime domain через одну строку JavaScript. Первый (через кастомный getter stack) частично закрыли патчем в V8, но он обходится через прототип. Второй (Proxy в прототипе + console.groupEnd) работает до сих пор.

Суть в том, что при включённом Runtime.enable (а это происходит и при открытых DevTools, и при работе Puppeteer/Playwright) инспектор сериализует аргументы всех console.*-методов. В процессе он безусловно обходит цепочку прототипов и вызывает ownKeys trap, если встречает Proxy. Это требование спецификации ECMAScript, поэтому V8 не может его отключить без нарушения совместимости.

Подробный разбор с исходниками V8 и ссылкой на исследование: https://tproger.ru/news/specifikaciya-ecmascript-zastavlyaet-v8-raskryvat--zapushhen-li-dev

Flappy Bird на чистом CSS: без JS, но с анимацией и коллизиями

Автор создал полноценный Flappy Bird, используя только HTML и CSS. Механика прыжка работает через анимированные переменные и подмену анимаций при клике на радио-кнопки. Трубы двигаются бесконечно, их высота меняется за счёт тригонометрических расчётов от анимированного счётчика — так достигается псевдослучайность. Столкновение вычисляется через пересечение прямоугольников прямо в CSS, а экран проигрыша появляется, когда переменная --collision становится ненулевой.

Это не просто забавный эксперимент, а демонстрация возможностей современного CSS: :has(), анимированные переменные, математические функции. Разбор всех приёмов и код в статье: https://blog.scottlogic.com/2026/03/09/noJS-3-flappy-bird.html

#css

Так, стоп...

@tproger_web
Читайте также в VK и Max

Flex или Grid: как перестать выбирать на автомате и начать мыслить структурно

Многие фронтенд-разработчики годами используют Flex по привычке, а Grid кажется избыточным или пугающим. Но эти инструменты не взаимозаменяемы — у каждого своя философия. Flex работает в одном измерении и управляет элементами от частного к общему, Grid сразу мыслит двумя осями и задаёт жёсткий каркас.

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

Если хотите выбирать технологию осознанно, а не гадать — смотрите материал: https://habr.com/ru/companies/timeweb/articles/1004986/

#фронтенд #css

@tproger_web
Читайте также в VK и Max

Вебхуки в Python: почему обработка прямо в эндпоинте это ловушка

Начинающие разработчики часто пишут обработку вебхуков в лоб: получили запрос -> обновили базу -> отправили письмо -> вернули ответ. На локальной машине всё работает, но в реальности такой подход приводит к таймаутам (внешний сервис ждёт ответа секунды), потере данных (падение во время обработки) и дублям.

В статье делятся практическим опытом перехода от «просто эндпоинта» к надёжной архитектуре с очередью задач. Ключевое решение: FastAPI принимает вебхук, проверяет подпись, кладёт задачу в Redis и мгновенно отвечает. Отдельный воркер забирает задачи из очереди и спокойно выполняет бизнес-логику. Так API не тормозит, задачи не теряются, а при необходимости можно запустить несколько воркеров для горизонтального масштабирования.

Подробнее о реализации: https://habr.com/ru/articles/1016206/

@zen_of_python (теперь в VK и Max)

Для чего используется stopPropagation()

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

При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать event.stopPropagation(), то при клике по вложенному контейнеру, в консоль будут выведены оба сообщения.

#простымисловами

@tproger_web
Читайте также в VK и Max

React vs Vue в 2026: сравнение по 12 критериям с бенчмарками

React лидирует по загрузкам npm — 429 млн в месяц против 47 млн у Vue. Вакансий с React в 3–4 раза больше. Казалось бы, выбор очевиден. Но у Vue есть аргументы, которые на собеседовании не спросят.

React 19.2 и Compiler v1.0 — важные события. Компилятор автоматически мемоизирует компоненты, устраняя необходимость в useMemo и useCallback. По данным Meta, это сократило количество лишних ре-рендеров в их приложениях на 40%. Vue тем временем готовит Vapor Mode — рендеринг без виртуального DOM, по принципу Svelte: компиляция шаблонов напрямую в DOM-операции.

В статье мы сравнили оба фреймворка по производительности, экосистеме, TypeScript-поддержке, размеру бандла, кривой обучения и рынку вакансий — с актуальными данными на март 2026.

Читать: https://tproger.ru/articles/react-vs-vue-v-2026-godu--kakoj-frejmvork-vybrat

#javascript #frontend @tproger

@tproger_web
Читайте также в VK и Max

Cloudflare выпустила EmDash — open-source CMS на TypeScript, где каждый плагин в изолированной песочнице

96% уязвимостей WordPress-сайтов приходит из плагинов. Причина архитектурная: в WordPress плагин — это PHP-скрипт, который встраивается в ядро с полным доступом к базе данных и файловой системе. Без изоляции, без ограничений. Установить плагин — значит полностью ему доверять.

Cloudflare выпустила EmDash v0.1.0 — CMS с принципиально другой моделью. Каждый плагин запускается в собственном изолированном воркере (Dynamic Worker, v8-песочница) и декларирует нужные разрешения в манифесте:

definePlugin({
  capabilities: ["read:content", "email:send"],
  // плагин не может сделать ничего сверх этого
})

Под капотом: Astro, serverless-архитектура, Portable Text вместо HTML, встроенный MCP-сервер для ИИ-агентов. Лицензия MIT. Проект создан за 2 месяца с помощью ИИ-агентов и за сутки набрал 3 200+ звёзд на GitHub.

Подробнее: https://tproger.ru/news/cloudflare-zapustila-emdash---open-source-cms-na-typescript--kot

#javascript