WebDev+ | Веб-разработка

Хочешь легко загружать файлы на сайт? Эта JavaScript-библиотека как раз для этого. ✓ Минимальная настройка ✓ Аккуратные и настраиваемые CSS-стили ✓ Совместима с React, Vue, Angular и jQuery Установка → npm i filepond @WebDev_Plus

NZT существует. В фильме «Области тьмы» герой выпивает NZT — и за день становится трейдером, мастером кунг-фу и полиглотом. Дело не в таблетке. А в состоянии. Химия не нужна. Когда ум чист, внимание собрано, и сомнений нет — ты уже на NZT. Ты замечаешь всё. Действуешь без разрывов. И мир отвечает тебе. Как включить режим NZT? Подписывайся на Мэверика. • входи в состояние всё «получается само». • мгновенно принимай лучшие решения. • считывай сложные связи там, где все видят хаос. • управляй фокусом и вероятностями событий. Твоя таблетка NZT. 👇 Мэверик. Ясность. Точность. ㅤ

Мега-новинка в CSS Теперь можно делать анимации появления и исчезновения элементов. Знакомься с новым правилом starting-style. @WebDev_Plus

ИЗИ способ переключить сайт в тёмный режим. Используется анимация через View Transitions. Всего 2 строки на JavaScript и немного CSS: https://theme-toggle.rdsx.dev/ @WebDev_Plus

Разделители в хлебных крошках должны быть в CSS, а не в HTML. Просто используйте псевдоэлемент ::after.

nav > ol > li:not(:last-child)::after {
  content: " / ";
  color: lightgray;
  padding: 0 0.5em;
}

Селектор :not(:last-child) гарантирует, что после последнего элемента разделитель не появится. Разметка при этом остается аккуратной и чистой:

<nav>
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
  </ol>
</nav>

Нужны другие разделители? Просто меняете content:

/* Шеврон */
li:not(:last-child)::after {
  content: " › ";
}

/* Стрелка */
li:not(:last-child)::after {
  content: " → ";
}

/* Вертикальная черта */
li:not(:last-child)::after {
  content: " | ";
}

Для иконок вместо текста можно использовать фоновое изображение:

li:not(:last-child)::after {
  content: "";
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml,...") center / contain no-repeat;
}

Этот подход универсальный и подходит для любых горизонтальных списков с разделителями: хлебные крошки, списки тегов, инлайн-метаданные. @WebDev_Plus

Программа для скачивания видео с более чем 1000 веб-сайтов на базе yt-dlp https://github.com/nexmoe/VidBee/ @WebDev_Plus

API шаблонов URL теперь доступен! С его помощью можно сопоставлять URL и извлекать из них части, не изобретая собственную логику роутинга. Поддерживаются литералы, подстановки, именованные группы и даже ограничения на основе регулярных выражений. Как это работает @WebDev_Plus

В open source выходит jax-js - библиотека машинного обучения для веба, полностью на чистом JavaScript. jax-js — первый ML-компилятор, который работает прямо в браузере и генерирует быстрые WebGPU-ядра. Проект написан с нуля за последний год как личный сайд-проект. Подробности: https://ekzhang.substack.com/p/jax-js-an-ml-library-for-the-web Python и JavaScript - самые популярные языки в мире. Python нужен для ML, JavaScript — нативный язык веба. Проект пока на ранней стадии, но jax-js задумывается как по-настоящему «реальная ML-библиотека» для веба: с JIT-фьюжном ядер под WebGPU и полноценным API, а не просто рантайм. @WebDev_Plus

Прокачай любой UI красивыми анимированными фонами 🦄 Это open-source коллекция готовых компонентов анимированных фонов, которые можно сразу закидывать в проекты. Всё сделано на Tailwind CSS и JSX, поэтому они без боли встраиваются в современные React и Next.js воркфлоу. Можно посмотреть список компонентов, превью анимаций и сразу залезть в исходники, чтобы кастомизировать под себя или переиспользовать в своих приложениях :) github.com/Netmods/Drapes-ui @WebDev_Plus

Этот эффект на CSS и JavaScript просто огонь. Подсвечивает область, по которой проходит курсор. Очень трендовый приём в дизайне. Исходный код и демо здесь @WebDev_Plus

CSS-совет: Используй svh, чтобы мобильная адресная строка не перекрывала интерфейс. Эта единица гарантирует, что layout всегда помещается в реально видимую область экрана. @WebDev_Plus

В следующем обновлении языковых инструментов Vue выкатывают совершенно новую фичу Rich Hover Message. Наводишь курсор на любой Vue-компонент и сразу видишь аккуратно отформатированные Props и Slots, все генерируется автоматически. Сделано, чтобы прокачать DX на новый уровень. Подробности скоро, следите за обновлениями. @WebDev_Plus

Ну всё, ребята. Этот день настал 😱 Popover на чистом CSS (элемент popover + анимации + привязка к якорю) теперь стабильно работает во всех базовых браузерах. И да, конечно, он уже доступен в CSS-Zero. Репозиторий: http://github.com/lazaronixon/css-zero Демо: https://csszero.lazaronixon.com/lookbook/inspect/popover/default @WebDev_Plus

Делись своим localhost с кем угодно за секунды через URL, доступный по всему миру, с HTTPS

$ brew install cloudflared
$ cloudflared tunnel --url <твой-локальный-домен>

Это альтернатива ngrok. Без регистрации и бесплатно @WebDev_Plus

Запускает GitHub Actions локально в VS Code. https://github.com/SanjulaGanepola/github-local-actions/ @WebDev_Plus

Не допускайте появления растянутых изображений на вашем сайте. Это выглядит ужасно! И это легко исправить с помощью одной строки CSS @WebDev_Plus

Большинство CSS-переходов плавные, но display переключается мгновенно. allow-discrete делает так, что элемент еще немного остается видимым, чтобы анимация выхода выглядела гладко, и только потом уходит в display: none. Ключевое слово allow-discrete применяет тайминги transition к дискретным свойствам. Для exit-анимаций элемент остается видимым, проигрывает переход, а затем переключается в display: none уже после завершения transition. Подробнее на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior Свойство overlay управляет тем, остается ли диалог в top layer во время перехода. Без него диалог сразу “провалится” назад, за другой контент. MDN: https://developer.mozilla.org/en-US/docs/Glossary/Top_layer CSS-сниппет:

dialog {
  opacity: 1;
  scale: 1;

  transition:
    opacity 0.2s ease-out,
    scale 0.2s ease-out,
    overlay 0.2s ease-out allow-discrete,
    display 0.2s ease-out allow-discrete;

  @starting-style {
    opacity: 0;
    scale: 0.95;
  }
}

И:

dialog::backdrop {
  background-color: rgb(0 0 0 / 0.5);
  transition:
    background-color 0.2s ease-out,
    overlay 0.2s ease-out allow-discrete,
    display 0.2s ease-out allow-discrete;

  @starting-style {
    background-color: rgb(0 0 0 / 0);
  }
}

@WebDev_Plus

Наконец-то! Можно начинать прощаться с new Date() в JS. Temporal API доехал до Google Chrome 144. Это новый способ работать с датами и временем. Там куча утилит и улучшений:

// 1) Разница между датами - без миллисекунд и без головняка
const start = Temporal.PlainDate.from('2026-01-10')
const end = Temporal.PlainDate.from('2026-01-30')

console.log(`Длительность: ${start.until(end).days} дней`)
// Длительность: 20


// 2) Создаём время без даты и таймзоны
const opensAt = Temporal.PlainTime.from('09:30')
console.log(`Открывается в ${opensAt.hour} часов и ${opensAt.minute} минут`)
// Открывается в 9 часов и 30 минут


// 3) Конвертим таймзоны без боли
const meeting = Temporal.ZonedDateTime.from(
  '2026-03-15T18:00[Europe/Madrid]'
)

console.log('Мадрид:', meeting.toString())
console.log('Токио:', meeting.withTimeZone('Asia/Tokyo').toString())


// 4) Прибавляем время, не ломая даты
const release = Temporal.PlainDate.from('2026-02-01')
console.log('Следующий релиз:', release.add({ months: 1 }).toString())
// Следующий релиз: 2026-03-01


// 5) Instant - точка во времени (логи, события, метрики)
const now = Temporal.Now.instant()
console.log('Точный таймстамп:', now.toString())

@WebDev_Plus

В Chrome DevTools MCP добавили улучшение, о котором просили многие 🦌 Новый апдейт даёт возможность агентам напрямую подключаться к активным сессиям браузера. Представьте, что вы хотите, чтобы ваш агент по программированию исправил проблему, доступ к которой возможен только после авторизации. Теперь ваш агент может напрямую получить доступ к вашей текущей сессии просмотра, не требуя дополнительной авторизации. Теперь агенты могут получать доступ к активным сеансам отладки в пользовательском интерфейсе DevTools. Например, если вы обнаружите запрос с ошибкой на панели «Сеть» в Chrome DevTools, выберите запрос и попросите своего агента исследовать его. То же самое работает и с элементами, выбранными на панели «Элементы». @WebDev_Plus

В последнем апдейте Vue Language Tools для vuejs директива v-for теперь ведёт себя с ключами типа number так же, как TypeScript и рантайм Vue.js: ключи автоматически считаются строками. Больше консистентности, меньше сюрпризов. И это ещё не всё! Добавили поддержку Template Literal Types в v-for: если у ключа union из числовых литеральных типов, он автоматически "строкифицируется" 1 | 2 → "1" | "2" @WebDev_Plus