Нужно ли писать 5 media queries, чтобы шрифт выглядел нормально на разной ширине экрана?

На деле хватает одной строки CSS:

font-size: clamp(1rem, 2vw + 0.5rem, 2rem);

Как это работает:

Сразу задаются три значения: минимальный размер, предпочтительный (плавающий) размер и максимальный размер.

Браузер выбирает подходящее среднее значение, но при этом никогда не уходит ниже минимума и выше максимума.

Например:

* 1rem = минимум (16px). Текст никогда не станет меньше 16px.
* 2vw + 0.5rem = предпочтительный размер. Плавно масштабируется вместе с шириной вьюпорта.
* 2rem = максимум (32px). Текст не станет больше 32px даже на огромных мониторах.

Результат:

Текст масштабируется в зависимости от ширины экрана. Без breakpoints, без media queries. Просто плавная адаптивная типографика.

Где использовать:

* Заголовки, которым нужно масштабирование
* Основной текст в hero-секциях
* Любой текст, который должен подстраиваться под размер экрана

Поддержка в браузерах: около 95%

Одна функция.

И адаптивная типографика готова.

@WebDev_Plus

Laravel Tip

Хотите знать, как отработала ваша запланированная задача в полночь?

Тут вам повезло: вывод scheduled tasks можно без проблем сохранить или отправить по email

@WebDev_Plus

Теперь, когда shape() поддерживается всеми основными браузерами, напоминаю: вы можете использовать этот онлайн‑генератор, чтобы создавать любые полигоны с закруглёнными углами: https://css-generators.com/polygon-shape/

Настраиваете фигуру, потом просто копируете сгенерированный код.

@WebDev_Plus

Intl.NumberFormat в JavaScript — один из самых полезных встроенных API.

Большинство разработчиков даже не подозревают о его существовании 👇

Node всегда был про I/O: стримы, буферы, сокеты, файлы. Но есть один пробел, который меня раздражал годами: нельзя виртуализировать файловую систему.

Нельзя импортировать модуль, который существует только в памяти. Нельзя собрать ассеты в Single Executable без патчинга половины стандартной библиотеки.

Теперь это меняется :

Аносируют две вещи:

node:vfs — виртуальная файловая система, которая появляется в core Node.js (PR #61478, ~14 000 строк в 66 файлах)

@platformatic/vfs — userland-пакет, который можно использовать уже сейчас на Node.js 22+

Вот в чём проблема. Каждый раз, когда нужно:

- собрать приложение в Single Executable
- запускать тесты без обращения к диску
- заизолировать файловый доступ арендатора (tenant)
- загружать сгенерированный ИИ код во время выполнения

нужен один и тот же примитив: виртуальная файловая система, которая интегрируется и с node:fs, и с резолвером модулей. Никто этого не делал.

Экосистема предлагала приближённые решения: memfs, unionfs, mock-fs. У всех одна и та же проблема: они патчат fs, но не резолвер модулей.

Код с вызовом import('./config.json') полностью их обходит.

Два режима:

Mount mode: VFS активна только под заданным префиксом пути. Чистая изоляция.

Overlay mode: VFS проверяется первой для всех путей, затем происходит fallback на реальную файловую систему. Можно переопределить несколько конфигов и оставить остальное без изменений. Идеально для тестирования.

Почему это должно быть в core? Потому что userland-решения всегда компромисс:

- 960+ строк дублированной логики резолвинга модулей
- патчинг приватных API вроде Module._resolveFilename
- глобальный патчинг fs, который ломается, если код заранее сохранил ссылки
- нативные модули не могут загружаться из памяти
- невозможно корректно очистить кэш модулей извне

Скажу честно, как это появилось. PR на 16 000 строк обычно занимает месяцы. Этот был сделан за рождественские праздники 2025 года, потому автор делал его с помощью Claude Code.

Он отдал ИИ рутину: все варианты методов fs, покрытие тестами и документацию. Сам сосредоточился на архитектуре, дизайне API и построчном ревью.

Когда Мальте Убль, CTO Vercel увидел PR, команда Vercel независимо вынесла тот же API в userland как node-vfs-polyfill.

Когда две команды независимо реализуют одно и то же — значит, дизайн получился удачным.

https://github.com/vercel-labs/node-vfs-polyfill

@platformatic/vfs поставляется с дополнительными провайдерами, которых нет в core:

SqliteProvider: персистентная VFS на базе node:sqlite. Файлы сохраняются между перезапусками.

RealFSProvider: изолированный доступ к реальной файловой системе с встроенной защитой от path traversal. Больше не нужны хрупкие проверки через path.resolve().

@WebDev_Plus

Становится сложно не отставать от всех новых возможностей CSS.

@WebDev_Plus

Создавай красивые карты для своего веб-сайта или приложения.
Бесплатно, без настройки и одной командой:

→ http://github.com/AnmolSaini16/mapcn

@WebDev_Plus

Фильтрация по геолокации — частое требование:

- «найти поблизости»
- «в радиусе X км»
- «отсортировать по расстоянию»

Eloquent scope помогает избежать дублирования Haversine-запросов.

Можно вынести это в Trait, чтобы использовать в нескольких моделях.

Или даже оформить как Package для использования в разных проектах.


@WebDev_Plus

Скоро можно будет попрощаться с Date() в JavaScript.

Temporal API уже находится на стадии Stage 4 и поддерживается в Chrome, Edge и Firefox. Поддержка — около 65% браузеров!

Новый способ работы с датами и временем.
С большим количеством утилит и улучшений:

@WebDev_Plus

JavaScript Array.with() — обновление неизменяемого массива в одном выражении

@WebDev_Plus

Laravel tip

Знал ли ты, что CarbonPeriod может генерировать все даты в заданном диапазоне?

Больше никаких пропущенных дней в графиках.

@WebDev_Plus

В Next.js 16.2 ошибки браузера теперь напрямую прокидываются в терминал во время разработки

Больше не нужно переключаться в консоль браузера, чтобы дебажить client-side ошибки.

Особенно полезно для AI-агентов, которые не могут открыть DevTools и посмотреть ошибки в браузере.

@WebDev_Plus

CSS-совет:

Создавайте плавные переходы между страницами всего одной строкой CSS

@WebDev_Plus

На случай, если ты не знал: React концептуально не изобрёл RSC, SSR или Hydration.

SSR — это по сути Express:

app.get('/', (req, res) => {
  res.render('index', { name: 'John' })
})

RSC — это Pug:

if name == "Bob"
  button(class="btn") Hello Bob
else
  button(class="btn") My name is #{name}

Hydration — это jQuery:

$('.btn').click(...)

Отсюда и следствия: в SSR нет window, в RSC нельзя навесить onClick, а проблемы с hydration были ещё в jQuery (например, опечатка в .btn), просто тогда это называлось не так модно.

@WebDev_Plus