navigator.credentials.preventSilentAccess() теперь широко доступен!После выхода пользователя вызывайте этот метод, чтобы предотвратить автоматический вход при следующем визите. Это особенно важно для общих устройств и сценариев с несколькими аккаунтами.
Подробнее
https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/preventSilentAccess
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
MDN Web Docs
CredentialsContainer: preventSilentAccess() method - Web APIs | MDN
The preventSilentAccess() method of the CredentialsContainer interface sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns a Promise that resolves to undefined.
For example, you might call this…
For example, you might call this…
В следующей версии Bun
Встроенный клиент
Ранее Unix domain sockets поддерживались только в WebSocket-сервере. Теперь поддержка есть и в клиенте, и в сервере.
@WebDev_Plus
Встроенный клиент
WebSocket в Bun теперь поддерживает Unix domain sockets.// Plain
const ws = new WebSocket("ws+unix:///tmp/app.sock");
// With a request path (split on first ':', same as the npm `ws` package)
const ws = new WebSocket("ws+unix:///tmp/app.sock:/api/stream?x=1");
// TLS over a unix socket
const ws = new WebSocket("wss+unix:///tmp/app.sock", {
tls: { rejectUnauthorized: false },
});
Ранее Unix domain sockets поддерживались только в WebSocket-сервере. Теперь поддержка есть и в клиенте, и в сервере.
@WebDev_Plus
:only-child теперь матчится даже на элементы без родителя!Селектор
:only-child обновили — теперь он может матчить элементы, у которых вообще нет родителя, а не только те, которые являются единственным ребёнком.Небольшое, но полезное выравнивание спецификации во всех основных браузерах.
Узнать больше : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:only-child
@WebDev_Plus
MDN Web Docs
:only-child - CSS | MDN
The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
Нужно отслеживать, когда элементы попадают в область видимости? 👀
IntersectionObserver вызывает колбэк, когда элементы пересекают порог видимости. Больше не нужны обработчики события прокрутки.
⋅ Ленивая загрузка изображений
⋅ Отслеживание видимости рекламы
⋅ Триггер анимаций при скролле
Подробнее - https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
@WebDev_Plus
IntersectionObserver вызывает колбэк, когда элементы пересекают порог видимости. Больше не нужны обработчики события прокрутки.
⋅ Ленивая загрузка изображений
⋅ Отслеживание видимости рекламы
⋅ Триггер анимаций при скролле
Подробнее - https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Хорошие новости для веб-типографики:
Теперь можно делать более сложные, типографские лейауты в духе печатных изданий с помощью CSS, и это стабильно работает во всех основных движках.
@WebDev_Plus
text-indent с ключевыми словами each-line и hanging теперь входит в Baseline Widely Available → https://goo.gle/4c7tO9jТеперь можно делать более сложные, типографские лейауты в духе печатных изданий с помощью CSS, и это стабильно работает во всех основных движках.
@WebDev_Plus
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Оставляйте видео видимым даже при переключении вкладок → https://goo.gle/3O03kNA
Автоматический режим «картинка в картинке» убирает необходимость ручного переключения и решает проблему потери вовлечённости при уходе со страниц с медиа-контентом. Теперь браузер сам обрабатывает этот переход.
@WebDev_Plus
Автоматический режим «картинка в картинке» убирает необходимость ручного переключения и решает проблему потери вовлечённости при уходе со страниц с медиа-контентом. Теперь браузер сам обрабатывает этот переход.
@WebDev_Plus
❤1
Container Queries в CSS позволяют компонентам самим определять свои стили
В отличие от медиазапросов, которые проверяют размер области просмотра,
Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
@WebDev_Plus
В отличие от медиазапросов, которые проверяют размер области просмотра,
@container проверяет размер родительского элемента. Полноценная адаптивность на уровне компонентов.Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
@WebDev_Plus
Прокачай TypeScript с помощью ключевых утилитных типов
Сохрани, чтобы не потерять
#TypeScript
@WebDev_Plus
Сохрани, чтобы не потерять
#TypeScript
@WebDev_Plus
#TypeScript
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Очень немногие знают про этот HTML-тег, а он может сделать веб-страницу заметно быстрее по ощущениям.
Он называется Speculation Rules и позволяет заранее рендерить страницы ещё до клика пользователя.
Браузер отслеживает намерение перехода, например при наведении на ссылку, и начинает готовить следующую страницу в фоне.
В момент клика переход ощущается почти мгновенным.
@WebDev_Plus
Он называется Speculation Rules и позволяет заранее рендерить страницы ещё до клика пользователя.
Браузер отслеживает намерение перехода, например при наведении на ссылку, и начинает готовить следующую страницу в фоне.
В момент клика переход ощущается почти мгновенным.
@WebDev_Plus
Проблема:
Решение: использовать
#javascript
.sort() в JavaScript мутирует массив.Решение: использовать
.toSorted() — он возвращает новый отсортированный массив.#javascript
Смешивай цвета прямо в CSS - читать
@WebDev_Plus
color-mix() позволяет смешивать два цвета в любом цветовом пространстве. Можно создавать оттенки, затемнения и динамические палитры без препроцессора.@WebDev_Plus
🔥1
CSS
Позволяет выбирать элементы на основе их содержимого. Можно по-разному стилизовать карточку, если внутри есть изображение, или форму — если в ней есть невалидные поля.
>
Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has
@WebDev_Plus
:has() — селектор родителя теперь реально существует 🎯Позволяет выбирать элементы на основе их содержимого. Можно по-разному стилизовать карточку, если внутри есть изображение, или форму — если в ней есть невалидные поля.
>
.card:has(img) { grid-template-rows: auto 1fr; }Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has
@WebDev_Plus
MDN Web Docs
:has() CSS pseudo-class - CSS | MDN
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a…
👍1
// ⚠️ Подход через Date — ручная арифметика, небезопасно при DST
const MS_PER_DAY = 1000 * 60 * 60 * 24;
const d1 = new Date("2026-01-01");
const d2 = new Date("2027-01-01");
const diffDays = (d2 - d1) / MS_PER_DAY;
console.log(diffDays); // 365
// ✅ Подход через Temporal — учитывает календарь, безопасно при DST
const t1 = Temporal.PlainDate.from("2026-01-01");
const t2 = Temporal.PlainDate.from("2027-01-01");
const totalDays = t1.until(t2).total({ unit: "days" });
console.log(totalDays); // 365
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👌2💯1
Автоматически балансируй заголовки
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
@WebDev_Plus
text-wrap: balance равномерно распределяет текст по строкам и убирает некрасивые висячие слова. Подходит для заголовков и коротких текстовых блоков.https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
@WebDev_Plus
Генерируй криптографически стойкие UUID прямо в браузере 🔐
Работает во всех современных браузерах и в Node.js 14.17+.
Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID
@WebDev_Plus
crypto.randomUUID() встроен в Web Crypto API, никакой пакет из npm не нужен.Работает во всех современных браузерах и в Node.js 14.17+.
Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Разбивайте текст на слова и предложения для любого языка
Подробнее : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter
@WebDev_Plus
Intl.Segmenter выполняет сегментацию текста с учётом локали, включая CJK-языки, где слова не разделяются пробелами.Подробнее : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter
@WebDev_Plus
😍1
.at(-1) для более чистого доступа к последнему элементу в JavaScript#JavaScript
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
image-set должен быть первым выбором при работе с фоновыми изображениями Одна строка CSS решает:
→ переключение между 1x/2x и даже 3x разрешениями
→ фолбэки для современных форматов — AVIF, JPEG, WebP
Ноль JS. Чистый CSS!
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1👎1👏1