Большинство примеров работы с API заканчиваются простым вызовом
Но в реальных приложениях нужно учитывать медленные сети, сбои, ретраи и многое другое.
В этом гайде показывает, как построить production-ready networking на JavaScript.
@WebDev_Plus
fetch().Но в реальных приложениях нужно учитывать медленные сети, сбои, ретраи и многое другое.
В этом гайде показывает, как построить production-ready networking на JavaScript.
@WebDev_Plus
TypeScript в своей наиболее выразительной форме
— Generics (обобщения)
— Omit (исключение свойств из типа)
— keyof (получение ключей типа)
— Literal Union (объединение литеральных типов)
Смотри, как это делает код типобезопасным👇
#TypeScript
— Generics (обобщения)
— Omit (исключение свойств из типа)
— keyof (получение ключей типа)
— Literal Union (объединение литеральных типов)
Смотри, как это делает код типобезопасным
#TypeScript
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Cпособ переключить сайт в тёмный режим
С нативной и настраиваемой анимацией.
Всего 2 строки JavaScript и немного CSS:
→ http://theme-toggle.rdsx.dev
@WebDev_Plus
С нативной и настраиваемой анимацией.
Всего 2 строки JavaScript и немного CSS:
→ http://theme-toggle.rdsx.dev
@WebDev_Plus
Знал про HTTP-заголовок 👀
Один заголовок позволяет очистить cookies, storage или cache для вашего сайта. Идеально подходит для logout-флоу.
Подробнее : https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data
@WebDev_Plus
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
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