Проблема:
Решение: использовать
#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
Контролируйте специфичность CSS с помощью
Каскадные слои позволяют явно задавать приоритет между группами стилей. Больше не нужно бороться с
Подробнее
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
@WebDev_Plus
@layer Каскадные слои позволяют явно задавать приоритет между группами стилей. Больше не нужно бороться с
!important.Подробнее
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
@WebDev_Plus
❤4
Firefox 150 вышел и включает новые возможности веб-платформы:
🎉
🎉 поддержка
🎉
🎉
🎉 медиа-псевдоклассы, такие как
Ни одна из этих возможностей пока не входит в базовый набор, проверяйте поддержку на MDN
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150
@WebDev_Plus
sizes="auto" для изображенийlight-dark() для изображенийrevert-rule в CSSariaNotify():playingНи одна из этих возможностей пока не входит в базовый набор, проверяйте поддержку на MDN
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
MDN Web Docs
Firefox 150 release notes for developers - Mozilla | MDN
This article provides information about the changes in Firefox 150 that affect developers.
Firefox 150 was released on April 21, 2026.
Firefox 150 was released on April 21, 2026.
🔥1
Распространение событий в JavaScript
Описывает, как события проходят по DOM при срабатывании. Событие не ограничивается одним элементом, а проходит через несколько узлов в заданном порядке.
Важные моменты:
▪️ Две фазы: перехват (capturing, сверху вниз к целевому элементу) и всплытие (bubbling, от целевого элемента вверх)
▪️ Всплытие используется по умолчанию в большинстве случаев
▪️ Полезно при работе с вложенными элементами и несколькими обработчиками событий
▪️ Управляется через event.stopPropagation()
Применение:
Подходит для эффективной обработки событий в сложных интерфейсах — например, делегирование событий на родительский элемент или предотвращение лишних срабатываний во вложенных компонентах.
@WebDev_Plus
Описывает, как события проходят по DOM при срабатывании. Событие не ограничивается одним элементом, а проходит через несколько узлов в заданном порядке.
Важные моменты:
▪️ Две фазы: перехват (capturing, сверху вниз к целевому элементу) и всплытие (bubbling, от целевого элемента вверх)
▪️ Всплытие используется по умолчанию в большинстве случаев
▪️ Полезно при работе с вложенными элементами и несколькими обработчиками событий
▪️ Управляется через event.stopPropagation()
Применение:
Подходит для эффективной обработки событий в сложных интерфейсах — например, делегирование событий на родительский элемент или предотвращение лишних срабатываний во вложенных компонентах.
@WebDev_Plus
❤4
Перестань усложнять код на React.
Управление сложным состоянием быстро становится перегруженным.
Использование нескольких
Более эффективный подход — использовать хук
Он упрощает код за счёт более структурированной работы со связанными переменными состояния.
Нужно глубже — абстрагируй детали редьюсера.
Это даёт более чистый и простой интерфейс для компонентов.
Эти техники критичны.
Освой их, чтобы строить поддерживаемые и масштабируемые приложения на React.
Разбор подробнее в статье:
https://thetshaped.dev/p/how-to-use-reducer-in-react-for-better-and-simpler-state-management
@WebDev_Plus
Управление сложным состоянием быстро становится перегруженным.
Использование нескольких
useState приводит к запутанным и трудно поддерживаемым компонентам.Более эффективный подход — использовать хук
useReducer.Он упрощает код за счёт более структурированной работы со связанными переменными состояния.
Нужно глубже — абстрагируй детали редьюсера.
Это даёт более чистый и простой интерфейс для компонентов.
Эти техники критичны.
Освой их, чтобы строить поддерживаемые и масштабируемые приложения на React.
Разбор подробнее в статье:
https://thetshaped.dev/p/how-to-use-reducer-in-react-for-better-and-simpler-state-management
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Можно использовать разные favicon для светлой и тёмной темы сайта
@WebDev_Plus
<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" />
@WebDev_Plus
🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Рекомендация для фронтенд-разработчиков: лёгкая опенсорс-библиотека для кодов верификации на сайтах — Cap, которая может выступать альтернативой классическим CAPTCHA.
Она основана на механизме proof-of-work с использованием SHA-256, полностью отказывается от пазлов и распознавания изображений, весит всего ~20 КБ, практически не влияет на время загрузки, не занимается трекингом и не собирает данные.
GitHub: http://github.com/tiagorangel1/cap
Поддерживает гибкие варианты отображения: видимый, невидимый, плавающий и т.д., при этом стили фронтенда и логика валидации полностью настраиваются.
Совместима с любым JavaScript-рантаймом, без зависимостей, разворачивается одной Docker-командой.
@WebDev_Plus
Она основана на механизме proof-of-work с использованием SHA-256, полностью отказывается от пазлов и распознавания изображений, весит всего ~20 КБ, практически не влияет на время загрузки, не занимается трекингом и не собирает данные.
GitHub: http://github.com/tiagorangel1/cap
Поддерживает гибкие варианты отображения: видимый, невидимый, плавающий и т.д., при этом стили фронтенда и логика валидации полностью настраиваются.
Совместима с любым JavaScript-рантаймом, без зависимостей, разворачивается одной Docker-командой.
@WebDev_Plus