WebDev+ | Веб-разработка
8.32K subscribers
504 photos
241 videos
10 files
699 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
Знал про HTTP-заголовок Clear-Site-Data? 👀

Один заголовок позволяет очистить cookies, storage или cache для вашего сайта. Идеально подходит для logout-флоу.

Подробнее : https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
hyphenate-character широко доступен с 2023 года

Позволяет управлять символом, который показывается в конце строки при переносе слова. По умолчанию используется auto (‐), но это можно настроить.

Полезно для креативной типографики и многоязычных сайтов.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character

@WebDev_Plus
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
В следующей версии Bun

Встроенный клиент 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
Нужно отслеживать, когда элементы попадают в область видимости? 👀

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

⋅ Ленивая загрузка изображений
⋅ Отслеживание видимости рекламы
⋅ Триггер анимаций при скролле

Подробнее - https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Хорошие новости для веб-типографики: 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
1
Container Queries в CSS позволяют компонентам самим определять свои стили

В отличие от медиазапросов, которые проверяют размер области просмотра, @container проверяет размер родительского элемента. Полноценная адаптивность на уровне компонентов.

Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

@WebDev_Plus
Прокачай TypeScript с помощью ключевых утилитных типов

Сохрани, чтобы не потерять

#TypeScript

@WebDev_Plus
⚡️Утилита на TypeScript для отображения вложенных ключей объекта в плоское объединение путей в точечной нотации

#TypeScript

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Очень немногие знают про этот HTML-тег, а он может сделать веб-страницу заметно быстрее по ощущениям.

Он называется Speculation Rules и позволяет заранее рендерить страницы ещё до клика пользователя.

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

В момент клика переход ощущается почти мгновенным.

@WebDev_Plus
Вывод типов по вложенным путям объектов в TypeScript — чисто и типобезопасно

#TypeScript

@WebDev_Plus
Проблема: .sort() в JavaScript мутирует массив.

Решение: использовать .toSorted() — он возвращает новый отсортированный массив.

#javascript
Смешивай цвета прямо в CSS - читать

color-mix() позволяет смешивать два цвета в любом цветовом пространстве. Можно создавать оттенки, затемнения и динамические палитры без препроцессора.

@WebDev_Plus
🔥1
CSS :has() — селектор родителя теперь реально существует 🎯

Позволяет выбирать элементы на основе их содержимого. Можно по-разному стилизовать карточку, если внутри есть изображение, или форму — если в ней есть невалидные поля.

> .card:has(img) { grid-template-rows: auto 1fr; }

Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has

@WebDev_Plus
👍1
⚡️ Два подхода для расчёта количества дней в JavaScript: через Date и через Temporal

// ⚠️ Подход через 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
Автоматически балансируй заголовки

text-wrap: balance равномерно распределяет текст по строкам и убирает некрасивые висячие слова. Подходит для заголовков и коротких текстовых блоков.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

@WebDev_Plus
Фиксированная ширина ломает адаптивный дизайн, делай так вместо этого:

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
3
Генерируй криптографически стойкие UUID прямо в браузере 🔐

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
Разбивайте текст на слова и предложения для любого языка

Intl.Segmenter выполняет сегментацию текста с учётом локали, включая CJK-языки, где слова не разделяются пробелами.

Подробнее : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter

@WebDev_Plus
😍1