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

⚡️ Два подхода для расчёта количества дней в 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

CSS :has() — селектор родителя теперь реально существует 🎯 Позволяет выбирать элементы на основе их содержимого. Можно по-разному стилизовать карточку, если внутри есть изображение, или форму — если в ней есть невалидные поля. > .card:has(img) { grid-template-rows: auto 1fr; } Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has @WebDev_Plus

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

Для тех кто просил, наш канал с мемами для программистов и айтишников 👇 https://t.me/+VS5COdLqY_s4OTYy

Проблема: .sort() в JavaScript мутирует массив. Решение: использовать .toSorted() — он возвращает новый отсортированный массив. #javascript

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

Очень немногие знают про этот HTML-тег, а он может сделать веб-страницу заметно быстрее по ощущениям. Он называется Speculation Rules и позволяет заранее рендерить страницы ещё до клика пользователя. Браузер отслеживает намерение перехода, например при наведении на ссылку, и начинает готовить следующую страницу в фоне. В момент клика переход ощущается почти мгновенным. @WebDev_Plus

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.

В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid: 2W5zFJXJNJD ИП Галактионов Тихон Витальевич, ИНН 771618975809

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

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

Container Queries в CSS позволяют компонентам самим определять свои стили В отличие от медиазапросов, которые проверяют размер области просмотра, @container проверяет размер родительского элемента. Полноценная адаптивность на уровне компонентов. Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries @WebDev_Plus

Оставляйте видео видимым даже при переключении вкладок → https://goo.gle/3O03kNA Автоматический режим «картинка в картинке» убирает необходимость ручного переключения и решает проблему потери вовлечённости при уходе со страниц с медиа-контентом. Теперь браузер сам обрабатывает этот переход. @WebDev_Plus

Хорошие новости для веб-типографики: text-indent с ключевыми словами each-line и hanging теперь входит в Baseline Widely Available → https://goo.gle/4c7tO9j Теперь можно делать более сложные, типографские лейауты в духе печатных изданий с помощью CSS, и это стабильно работает во всех основных движках. @WebDev_Plus

Нужно отслеживать, когда элементы попадают в область видимости? 👀 IntersectionObserver вызывает колбэк, когда элементы пересекают порог видимости. Больше не нужны обработчики события прокрутки. ⋅ Ленивая загрузка изображений ⋅ Отслеживание видимости рекламы ⋅ Триггер анимаций при скролле Подробнее - https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver @WebDev_Plus

:only-child теперь матчится даже на элементы без родителя! Селектор :only-child обновили — теперь он может матчить элементы, у которых вообще нет родителя, а не только те, которые являются единственным ребёнком. Небольшое, но полезное выравнивание спецификации во всех основных браузерах. Узнать больше : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:only-child @WebDev_Plus

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

navigator.credentials.preventSilentAccess() теперь широко доступен! После выхода пользователя вызывайте этот метод, чтобы предотвратить автоматический вход при следующем визите. Это особенно важно для общих устройств и сценариев с несколькими аккаунтами. Подробнее 👇 https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/preventSilentAccess @WebDev_Plus

На Stepik добавили курс «Git с нуля» Этот курс закрывает всю обязательную базу по Git для работы в IT. Подойдёт для:

- разработчиков - девопсов, админов и безопасников - аналитиков, data- и ML-специалистов - тестировщиков - всех, кто хочет уверенно работать с Git в команде

Внутри вся основа, которая реально нужна на практике: от основ системы контроля версий и архитектуры Git до работы с ветками, merge, конфликтами и GitHub. Всё сразу закрепляется на практике с помощью заданий с автопроверкой Материал подаётся простым языком, шаг за шагом, с акцентом на понимание того, как Git работает под капотом, а не просто на запоминание команд После прохождения вы получите сертификат, который можно добавить в резюме В ближайшие 48ч курс доступен со скидкой 25% по промокоду «GIT25»: открыть курс на Stepik

hyphenate-character широко доступен с 2023 года Позволяет управлять символом, который показывается в конце строки при переносе слова. По умолчанию используется auto (‐), но это можно настроить. Полезно для креативной типографики и многоязычных сайтов. https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character @WebDev_Plus

Знал про HTTP-заголовок Clear-Site-Data? 👀 Один заголовок позволяет очистить cookies, storage или cache для вашего сайта. Идеально подходит для logout-флоу. Подробнее : https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data @WebDev_Plus