Angular повзрослел — и лучшее ещё впереди
За Angular долгое время тянулся шлейф репутации сложного и многословного фреймворка. Статья рассказывает, как недавние нововведения, такие как standalone-компоненты, Signals и новый синтаксис для потоков управления, изменили эту ситуацию. Автор показывает, почему современный Angular стал значительно проще и дружелюбнее к разработчику.
👉 @sWebDev
За Angular долгое время тянулся шлейф репутации сложного и многословного фреймворка. Статья рассказывает, как недавние нововведения, такие как standalone-компоненты, Signals и новый синтаксис для потоков управления, изменили эту ситуацию. Автор показывает, почему современный Angular стал значительно проще и дружелюбнее к разработчику.
👉 @sWebDev
❤1👍1👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Color Thief
Библиотека Color Thief извлекает цветовую палитру из изображений. Она содержит методы для получения доминирующего цвета или набора репрезентативных оттенков. Инструмент также будет полезен для динамической стилизации интерфейса.
👉 @sWebDev
Библиотека Color Thief извлекает цветовую палитру из изображений. Она содержит методы для получения доминирующего цвета или набора репрезентативных оттенков. Инструмент также будет полезен для динамической стилизации интерфейса.
👉 @sWebDev
❤2
Событийная модель браузера
Почему в реализации хука для отслеживания внешних кликов предпочтительно использовать событие
Забыли? Вернитесь к посту от25.08.2025 .
👉 @sWebDev
Почему в реализации хука для отслеживания внешних кликов предпочтительно использовать событие
mousedown
вместо click
?Забыли? Вернитесь к посту от
👉 @sWebDev
❤2
Почему в реализации хука для отслеживания внешних кликов предпочтительно использовать событие mousedown вместо click?
Anonymous Quiz
15%
Событие mousedown имеет лучшую совместимость со старыми браузерами.
45%
Событие mousedown срабатывает до возможного удаления элемента из DOM.
25%
Событие mousedown содержит больше информации о координатах курсора.
15%
Событие mousedown проще перехватить на уровне документа.
👍3
Please open Telegram to view this post
VIEW IN TELEGRAM
Декларативная условная стилизация
Для условного применения inline-стилей в React часто создают объект стилей с помощью
Механизм основан на том, что выражение
👉 @sWebDev
Для условного применения inline-стилей в React часто создают объект стилей с помощью
if
или тернарных операторов. Существует более лаконичный, декларативный подход с использованием spread-оператора (...
) и логического оператора &&
.Механизм основан на том, что выражение
условие && { стиль: 'значение' }
вернет либо объект стилей, если условие истинно, либо false
, если ложно. React при разворачивании (spread
) falsy-значений (таких как false
, null
или undefined
) внутри объекта просто игнорирует их, не добавляя никаких свойств. import React from 'react';
function AlertMessage({ text, isActive, isUrgent }) {
const baseStyles = {
margin: '10px 0',
padding: '15px',
borderRadius: '4px',
transition: 'all 0.2s ease-in-out',
};
const finalStyles = {
...baseStyles,
...(isActive && { background: '#f0f0f0' }),
...(isUrgent && { background: '#ffdddd', border: '1px solid red' }),
};
return <div style={finalStyles}>{text}</div>;
}
👉 @sWebDev
👍3
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Infinite Canvas
Интерактивный бесконечный холст с drag-and-drop на Canvas API и JavaScript.
👉 @sWebDev
Интерактивный бесконечный холст с drag-and-drop на Canvas API и JavaScript.
👉 @sWebDev
👍1