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

Intl API — одна из самых мощных возможностей JavaScript, о которой редко говорят. @WebDev_Plus

Firefox 150 вышел и включает новые возможности веб-платформы: 🎉sizes="auto" для изображений 🎉поддержка light-dark() для изображений 🎉revert-rule в CSS 🎉ariaNotify() 🎉 медиа-псевдоклассы, такие как :playing Ни одна из этих возможностей пока не входит в базовый набор, проверяйте поддержку на MDN https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150 @WebDev_Plus

Контролируйте специфичность CSS с помощью @layer Каскадные слои позволяют явно задавать приоритет между группами стилей. Больше не нужно бороться с !important. Подробнее https://developer.mozilla.org/en-US/docs/Web/CSS/@layer @WebDev_Plus

image-set должен быть первым выбором при работе с фоновыми изображениями Одна строка CSS решает: → переключение между 1x/2x и даже 3x разрешениями → фолбэки для современных форматов — AVIF, JPEG, WebP Ноль JS. Чистый CSS! 💪 ✅ Широко доступен с сентября 2023 @WebDev_Plus

⚡️ Про-тип: используйте .at(-1) для более чистого доступа к последнему элементу в JavaScript #JavaScript @WebDev_Plus

Разбивайте текст на слова и предложения для любого языка Intl.Segmenter выполняет сегментацию текста с учётом локали, включая CJK-языки, где слова не разделяются пробелами. Подробнее : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter @WebDev_Plus

Генерируй криптографически стойкие UUID прямо в браузере 🔐 crypto.randomUUID() встроен в Web Crypto API, никакой пакет из npm не нужен. Работает во всех современных браузерах и в Node.js 14.17+. Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID @WebDev_Plus

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

Автоматически балансируй заголовки text-wrap: balance равномерно распределяет текст по строкам и убирает некрасивые висячие слова. Подходит для заголовков и коротких текстовых блоков. https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap @WebDev_Plus

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