В следующем обновлении языковых инструментов Vue выкатывают совершенно новую фичу Rich Hover Message.

Наводишь курсор на любой Vue-компонент и сразу видишь аккуратно отформатированные Props и Slots, все генерируется автоматически.

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

@WebDev_Plus

CSS-совет:

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

@WebDev_Plus

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

Исходный код и демо здесь

@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

API шаблонов URL теперь доступен!

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

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

@WebDev_Plus

Программа для скачивания видео с более чем 1000 веб-сайтов на базе yt-dlp

https://github.com/nexmoe/VidBee/

@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

ИЗИ способ переключить сайт в тёмный режим.

Используется анимация через View Transitions.

Всего 2 строки на JavaScript и немного CSS: https://theme-toggle.rdsx.dev/

@WebDev_Plus

Мега-новинка в CSS

Теперь можно делать анимации появления и исчезновения элементов.

Знакомься с новым правилом starting-style.

@WebDev_Plus

Хочешь легко загружать файлы на сайт?

Эта JavaScript-библиотека как раз для этого.

✓ Минимальная настройка
✓ Аккуратные и настраиваемые CSS-стили
✓ Совместима с React, Vue, Angular и jQuery

Установка → npm i filepond

@WebDev_Plus

Плавно “затухай” текст или картинки.
Одной строкой CSS, без лишних HTML-элементов...

Просто используй mask-image

@WebDev_Plus

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

В high-frequency приложениях вроде Linear это начинает раздражать, но для редких действий, типа отправки контактной формы, такой подход ощущается лучше, чем оптимистичное обновление.

Можно использовать Promise.all, чтобы запускать мутацию и задержку параллельно. Тогда пользователь ждет только то, что дольше, а не сумму задержки и времени запроса.

// A minimum duration of `800ms`
const delay = new Promise((r) => setTimeout(r, 800));
await Promise.all([promise, delay]);

@WebDev_Plus

Покажи календарь на сайте или в приложении без лишнего гемора.

Называется Cally, и он годный:

✓ Мультиязычный
✓ Весит всего 9 KB
✓ Кастомизируется через CSS
✓ Работает с React, Angular, Vue и т.д.

→ npm install cally

@WebDev_Plus

Знал, что в JavaScript можно так?

Валидировать формы можно прямо через HTML-атрибуты.

А сообщения об ошибках настраивать через setCustomValidity.

Без библиотек и с поддержкой во всех браузерах.

@WebDev_Plus

Инструмент, который вытаскивает всю информацию о веб-сайте.

✓ Находит проблемы безопасности
✓ Метрики оптимизации и качества
✓ DNS, TXT-записи, SSL, IP-информация и HTTP-заголовки

Ресурс бесплатный и реально полезный:

→ http://web-check.xyz

@WebDev_Plus

Быстрый совет по TanStack Router:

Вынеси состояние в URL через useSearch.
Страница сразу становится сохраняемой в закладки и удобной для шаринга.

@WebDev_Plus

Сегодня на HackerNews взлетел проект MQuickJS

https://github.com/bellard/mquickjs

MQuickJS — это JavaScript-движок под встраиваемые системы, рассчитанный на ультра-скудные ресурсы. Он умеет компилировать и выполнять JS в условиях, где память на вес золота.

Память жрёт копейки: около 10 kB RAM для запуска, что прям впечатляет. Но есть нюанс — это не полный JS, а подмножество ES5, плюс всё время строгий режим.

@WebDev_Plus

Сколько бы видосов про server components ты ни смотрел, топовый демо до сих пор тот, который запилила core-команда
react:

https://github.com/reactjs/server-components-demo

Там нет вообще никакой интеграции с Next.js, поэтому можно нормально врубиться в сам Flight-протокол.

Очень чётко показана граница server «-» client.

Что тебе реально нужно, чтобы поэкспериментировать: react-server-dom-webpack, createFromFetch, папки Server и Client.

Если хочешь другой заход для обучения, вот сюда:
https://github.com/reactwg/server-components/discussions/5

Там инженеры из Meta спорили и проектировали RSC. Мне это очень зашло, потому что помогает понять, как принимались решения, а не только как оно работает.

Если после этого всё ещё чешутся руки реально поковырять код, да, я серьёзно, иди вот сюда:
https://github.com/facebook/react/tree/main/packages/react-server-dom-webpack

Там видно, как именно делается сериализация и как кодируются ссылки.

Пожалуйста, обходи стороной рандомные мусорные medium-посты в духе «разберись в RSC за 10 минут». И без этого базового понимания даже не начинай жаловаться, что RSC бесполезны. Мозг же есть, зайди, посиди, разберись.

И в конце уже сравни сам, что именно прячет next-модель от vercel по сравнению с тем, как это устроено у Meta.

@WebDev_Plus

Входящие сообщения WhatsApp для Cloud API, созданного с помощью Next.js

https://github.com/gokapso/whatsapp-cloud-inbox/

@WebDev_Plus

Эффект снега для вашего веб-сайта с помощью CSS и JS.

https://codepen.io/jkantner/pen/MYeWWab

@WebDev_Plus