Телеграм канал «WebDev+ | Веб-разработка»

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

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

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

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

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


@WebDev_Plus

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

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

@WebDev_Plus

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

@WebDev_Plus

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

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

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

Одно CSS-свойство только что избавило от необходимости писать JavaScript для каждого FAQ-аккордеона, который вы когда-либо делали.

Серьёзно.

Это свойство — interpolate-size: allow-keywords.

Годами в CSS нельзя было анимировать переход от height: 0 к height: auto.

Браузер просто не мог вычислить переход между числовым значением и ключевым словом.

Поэтому разработчики писали JavaScript, измеряли scrollHeight, использовали requestAnimationFrame и подобные вещи.

Теперь это можно сделать одной строкой:

interpolate-size: allow-keywords;

Что оно делает

Сообщает браузеру, что ему разрешено интерполировать между числовыми значениями и ключевыми словами вроде auto, min-content, max-content и т.д.

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

Добавьте это свойство к элементу (часто к :root). Затем используйте обычные CSS-transition для height, и браузер сам обработает остальное.

Контент будет плавно раскрываться от 0 до своей фактической высоты.

И всё. Без JavaScript.

:root {
interpolate-size: allow-keywords;
}

.content {
height: 0;
overflow: clip;
transition: height 0.3s ease;
}

.content.is-open {
height: auto;
}

Небольшое замечание про аккордеоны

Да, я знаю, что accordion-компоненты имеют довольно спорную репутацию в кругах UX и accessibility.

Но это отличный пример, чтобы показать, как работает interpolate-size.

Поддержка браузерами

Пока поддержка не идеальная — около 70%.

- Chrome 129+
- Edge 129+
- Opera 115+ ✅

Firefox и Safari — пока нет.

Отдельная благодарность команде Chrome за внедрение этой возможности. Она решает проблему, которая существовала с момента появления CSS transitions.

@WebDev_Plus

Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа.

ИИ не убил профессию. Он убрал самое страшное — барьер входа.

Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.

Именно это мы и делаем на бесплатном 7-дневном практикуме.

Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.

Стартуем завтра.

👉 Приходи на бесплатный практикум

🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»