Телеграм канал «WebDev+ | Веб-разработка»

Мигель сделал расширение для Visual Studio Code Оно называется Better SVG и делает работу с SVG удобнее. Постоянный предпросмотр и оптимизация кода в один клик, не выходя из редактора. @WebDev_Plus

Intl.ListFormat это удобный способ собрать список в строку с учетом локали, без самописных костылей. onst getMessage = (users) => { const formatter = new Intl.ListFormat("en-US", { style: "long", // long (по умолчанию), short, narrow type: "conjunction" // conjunction (and), disjunction (or), unit }); return `Hello ${formatter.format(users)}!`; }; // Автоматически подстраивает грамматику console.log(getMessage(["Alice"])); // → "Hello Alice!" console.log(getMessage(["Alice", "Bob"])); // → "Hello Alice and Bob!" console.log(getMessage(["Alice", "Bob", "Charlie"])); // → "Hello Alice, Bob, and Charlie!" По сути, он сам правильно ставит запятые, союзы и форматирует список в зависимости от языка. Удобнее, чем писать if users.length === 2 ... else ... и поддерживать всё вручную. @WebDev_Plus

Css трюк для «блестящей» рамки - берем псевдоэлемент - позиционируем его и задаем inset box-shadow - маскируем под углом через linear-gradient бонус: используем corner-shape: squircle и крутим рамку при движении курсора https://codepen.io/jh3y/pen/WbwyGBb @WebDev_Plus

Это вообще спокойно делается на CSS - используй маску по бордеру, слои + overflow: hidden или другие трюки. - градиент анимировать не надо, просто крути слой с градиентом 1:1 🤙 @WebDev_Plus

Новая версия Ant Design! Один из самых крутых UI-компонентных наборов: ✓ Архитектура на CSS Variables ✓ Минус поддержка Internet Explorer ✓ Оптимизация под React Compiler ✓ Новый компонент Masonry → github.com/ant-design/ant-design @WebDev_Plus

"Ад из React Context" на самом деле не такой уж страшный, и в нём нет ничего плохого. Если глубокая вложенность раздражает, просто поставь размер табуляции в 0, если можешь. @WebDev_Plus

border-radius развивается в CSS! Благодаря новому свойству corner-shape. @WebDev_Plus