CSS Anchor Positioning: соединяем два круга одной стрелкой без JavaScript

Автор эксперимента показывает, как связать два перетаскиваемых круга динамической стрелкой, используя только CSS. В основе — Anchor Positioning, который позволяет привязать один элемент сразу к двум якорям и построить вокруг них ограничивающий прямоугольник. Дальше в дело вступают clip-path для формирования наконечника, поворот через atan() и масштабирование через scale(-1, 1) для остальных трёх положений.

Расстояние между кругами вычисляется через CSS-функцию hypot() и выводится через кастомные счётчики. При сближении форма стрелки меняется — за это отвечают if() и проверка расстояния. Всё работает в Chrome и Edge, где Anchor Positioning уже поддерживается.

Автор не призывает заменять JS-библиотеки, но показывает, насколько далеко зашёл современный CSS.

Разбор всех технических приёмов — в статье: https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/

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

Формы в Angular всегда были той ещё головной болью — кажется, это начинает меняться

В Angular 21 появились Signal Forms — экспериментальная альтернатива привычным реактивным формам. Главная идея: форма и данные синхронизируются сами, без ручного перекладывания значений туда-обратно.

Грубо говоря, вместо вот этого:

ngOnChanges() {
  this.loginForm.patchValue({ ...this.login });
}

Теперь просто:

loginForm = form(this.login);

Форма сама следит за состоянием. Меньше кода, лучше типизация, встроенные debounce, hidden, disabled, readonly и валидация — синхронная и асинхронная.

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

#javascript

@prog_point (теперь ещё в VK и Max)

Просто напоминаю, что JS вам не нужен

В Chrome 143 появился новый тип container queries — anchored

Anchor positioning уже умеет переворачивать тултип на другую сторону, когда не хватает места. Проблема была в том, что стрелка-указатель при этом оставалась на прежней стороне — CSS не знал, сработал ли fallback.

container-type: anchored это фиксит. Теперь можно напрямую спросить у контейнера, какой position-try активен:

@container anchored(fallback: none) {
  /* тултип справа — стрелка слева */
}

@container anchored(fallback: flip-inline) {
  /* тултип перевернулся — стрелка справа */
}

В статье на этой основе собирают toggletip с нуля: popover API, декларативные якоря через атрибут anchor, modern attr() для автоматической привязки без дублирования CSS, и corner-shape: scoop для скруглённой стрелки вместо border-трика с треугольником.

Фича пока только Chrome 143+, но через @supports (container-type: anchored) легко добавляется как прогрессивное улучшение — тултипы работают везде, стрелка появляется там, где поддержка есть.

Подробности с примерами и живым демо по ссылке.

#css

Как правильно передать проект на аутсорс

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

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

Погружаемся в эту статью. Она про то, как построить транзитный период по-человечески:
— Что должно быть в transition period (сроки, бюджет, приоритеты).
— Почему внешняя команда должна коммитить в общий Git и писать тесты как инхаус.
— Зачем нужна валидация артефактов в первые сутки.
— Как зафиксировать завершение перехода, а не жить в режиме онбординга годами.

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

Microsoft переписала TypeScript на Go

21 апреля вышла TypeScript 7.0 Beta. Весь компилятор переписан с TypeScript на Go. Работает примерно в 10 раз быстрее старого tsc.

Новый бинарник называется tsgo, живёт рядом со старым компилятором и не конфликтует с ним. Логика проверки типов структурно идентична TypeScript 6.0 — то есть переход должен быть прозрачным.

Скорость берётся из нативного кода Go плюс параллелизм: парсинг, чекер и эмиттер работают в несколько потоков одновременно. Флаг --checkers задаёт число type-check воркеров (по умолчанию 4), --builders — параллельная сборка монорепозитория. Bloomberg, Figma, Google, Slack и ещё десяток компаний уже попробовали в бою.

Поставить: @typescript/native-preview@beta. Запустить: tsgo вместо tsc. Несколько старых флагов (target: es5, moduleResolution: node) пока сломаны — так сказать, приятный бонус бета-версии.

@your_tech (теперь ещё в VK и Max)

robots.txt из двух строк может обнулить всю вашу SEO-работу над сайтом

robots.txt — файл в корне, который легко сгенерировать у ИИ или взять из шаблона не глядя. Одна неверная директива, и Googlebot тихо разворачивается у порога: ни ошибки, ни предупреждения, просто сайт исчезает из выдачи.

Самый частый случай: Disallow: /, оставленный с dev-окружения при деплое на прод. В Next.js и похожих фреймворках конфиг нередко копируется целиком вместе с блокировкой. Ещё хуже, когда закрыты CSS и JS: Googlebot не отрендерит страницу, даже если HTML открыт.

Коварство в том, что краулер не сообщает об ошибке. Он просто уходит. Симптом обнаруживается через недели, когда трафик уже упал.

Я нашёл для вас разбор частых ошибок в robots.txt с примерами конфигураций — рекомендую изучить и проверить свой сайт. Быстро проверить доступность конкретной страницы можно в Google Search Console в разделе «Проверка URL».

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

Одна схема вместо кучи валидаций: schema-driven подход к формам

Типичная картина: правила валидации размазаны по компонентам, дублируются между фронтом и беком, а при изменении бизнес-логики надо найти и поправить десяток мест. Schema-driven подход решает это через единый источник правды — JSON/TypeScript-схему, которая описывает и структуру данных, и правила проверки.

Схема определяется один раз, используется везде: фронт рендерит поля динамически и валидирует на клиенте, бек проверяет те же правила на сервере. Zod или Yup парсят схему и генерируют валидаторы — подключить к React Hook Form несложно.

В LogRocket разобрали на примере, как построить динамическую форму по схеме и реализовать асинхронную валидацию — когда нужно проверить уникальность email через API прямо в процессе ввода.

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

WebGL-портфолио на Three.js: акварельный 3D через один шейдер

Дизайнер Wei Xianyao опубликовал разбор своего портфолио Susurrus — интерактивной 3D-сцены в браузере, стилизованной под акварель. Стек: React Three Fiber, Drei, React Three Rapier, Howler.js, TypeScript.

Весь эффект «картины» — один Kuwahara-шейдер в постпроцессинге. Под него подгонялось всё остальное: отражающая вода (MeshReflectorMaterial + кастомный шейдер поверх), частицы, физика появления объектов по клику. Модели в Blender строились сразу с учётом шейдера, чтобы видеть итог на этапе моделирования.

Интро-анимация при скролле — ScrollControls передают uProgress в шейдер на ScreenQuad. Компактный способ сделать разворачивающуюся сцену без лишних зависимостей.

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

Cloudflare переписала Next.js за неделю — и это проблема для Vercel

Один инженер Cloudflare, ИИ-агент и $1 100 на токены — столько понадобилось, чтобы создать vinext: альтернативу Next.js на базе Vite, которая деплоится в Cloudflare Workers одной командой.

Ключевое изменение для разработчика: Turbopack заменён на Vite. Сборка до 4 раз быстрее, клиентские бандлы на 57% меньше. Покрытие API Next.js — 94%, так что большинство проектов мигрирует без серьёзных правок.

Для Vercel это неудобная ситуация: проприетарный формат вывода Turbopack был главным «рвом», удерживавшим Next.js-проекты на их платформе. Теперь этот ров засыпан за одну рабочую неделю.

vinext официально экспериментальна и не прошла нагрузочного тестирования — в прод тащить рано.

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

Когда ИИ пишет код, а ты его не понимаешь — жди сюрприза

ИИ-инструменты вроде Cursor или GitHub Copilot умеют писать сотни строк кода за минуты. Это удобно, особенно когда только осваиваешь разработку. Но вот в чём ловушка: код может работать, тесты проходить, а серьёзная ошибка будет ждать своего часа.

В разборе на сайте описан такой случай: разработчик принял 400 строк от ИИ, не разобравшись в деталях. Ошибка обнаружилась только через три месяца на аудите. Причина простая: никто не читал код по-настоящему.

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

REST API — это шесть ограничений, а не просто HTTP с JSON

Большинство «REST»-сервисов выполняют 2–3 ограничения из шести, которые Рой Филдинг описал в диссертации 2000 года. Клиент-сервер и stateless — обычно на месте. Остальные — реже.

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

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

Разбор всех шести ограничений и зачем они нужны — на Tproger.

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

Ванильный CSS вместо Tailwind: система из девяти частей

Джулия Эванс провела неделю, переводя несколько сайтов с Tailwind обратно на семантический HTML и CSS, и задокументировала конкретную структуру, которая заменяет фреймворк.

Система состоит из девяти слоёв: reset, компоненты (один класс, один CSS-файл), цветовая палитра и шкала шрифтов через custom properties, утилиты, базовые стили и адаптивная сетка на grid auto-fit + minmax() без единого media query. В dev-режиме сборщик не нужен: браузер понимает нативные @import и вложенные селекторы. Для production достаточно одной команды esbuild.

Практическая проблема Tailwind v2 без JIT: 2,8 МБ CSS (270 КБ gzip) на каждый проект. В v3 JIT-компилятор обязателен, grid-template-areas через arbitrary values неудобен, container queries и @layer не вписываются в синтаксис.

Разбор с примерами структуры.

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

Vite+ — один бинарник vp вместо пяти конфиг-файлов

VoidZero выпустили Vite+ (Node.js 20.19+ или 22.12+): CLI-инструмент, который объединяет Vite, Vitest, Oxlint, Oxfmt, Rolldown и менеджмент версий Node.js под одной командой vp.

До этого типичный проект держал отдельно .eslintrc, .prettierrc, vitest.config.ts и .nvmrc, у каждого свой релиз-цикл и режим отказа. Vite+ сводит всё в vite.config.ts. Одна команда vp check запускает форматирование, линтинг и проверку типов за раз.

Для новых Vite-проектов переход выглядит прямолинейно. Для production-кодовых баз с кастомными ESLint-плагинами лучше сначала протестировать: Oxlint совместим с большинством правил, но не со всеми.

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

Pica 10.0 — качественный image resize в браузере

После пятилетнего перерыва вышла Pica 10.0 — библиотека ресайза картинок на клиенте с качеством на уровне GraphicsMagick. Ядро на WebAssembly, fallback на Web Workers, в крайнем случае — pure JS.

В 10.0:
— Полная миграция на TypeScript, типы для всего API.
— ESM как первый-класс, отдельные сборки для node/browser.
— Старое CommonJS-API сохранили — миграция не блокирующая.

Кейс: загрузить фото на 20 MP, отресайзить в 800×600 для аватарки, отправить хеш на бэк. Никакого ImageMagick на сервере, никакой нагрузки на CPU — Pica делает Lanczos-фильтр прямо в браузере. MIT, 7k+ звёзд.

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

Откуда взялся Рунет: 7 апреля 1994 и далее

На Tproger вышла вторая часть истории российского IT, и веб-кусок там получился плотным.

7 апреля 1994 года зарегистрировали домен .RU. В тот же день появился первый сайт российской доменной зоны, 1-9-9-4․ru, со списком из нескольких десятков адресов и описаниями, что можно узнать в новом русском интернете.

Первый внемосковский интернет-канал страны проложила компания «Стек» из подмосковного Пущино: пятеро инженеров-радиотехников из НИИ в 1991 году подняли IP-канал к сети Курчатовского института, а потом свои ftp-, mail- и www-серверы.

8 октября 1996 запустился Rambler. Он проиндексировал около 100 тысяч документов, при том что весь Рунет тогда был на 30–50 сайтов. 23 сентября 1997 анонсировали Яндекс, и его сильной стороной стала русская морфология: система понимала, что «купить», «купил» и «куплю» — одно слово. В 1998 году на Yandex․ru появился контекстный баннер, меняющийся под запрос. Позже это станет основной бизнес-моделью.

Полный материал на Tproger.

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