Вышел UI Kit 6 — обновление ключевой библиотеки открытой дизайн-системы Яндекса Gravity UI

Что интересного:
— Новый компонент List 2.0  для работы со списками: можно подбирать размер и ширину, ставить иконки и разные разделители, а также добавилась поддержка стейтов
— Поддержка rtl: теперь с помощью дизайн-системы можно делать лендинги и сайты на арабском, иврите и других языках с написанием справа налево
— Улучшение доступности: например, поддержка клавиатуры для clickable и closable состояния компонента Persona

Пробуйте Gravity Ul и ставьте звездочки на GitHub, чтобы следить за обновлениями.


Original post link: t.me/frontendnoteschannel/3391
Forwarded and filtered by @smartfeed_bot

Skeuomorphic Range Slider

Поверх элемента input создано несколько вспомогательных элементов, зависящих от значений CSS переменных. Эти значения изменяются в JS при срабатывании события input.

👉 @seniorFront


Original post link: t.me/seniorFront/3885
Forwarded and filtered by @smartfeed_bot

🖥 Sleep Time App – дизайн приложения для отслеживания времени сна. Цвет варьируется от очень светлого розового (на фоне) до темного кораллового на отдельных элементах.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1693
Forwarded and filtered by @smartfeed_bot

Google Loading

Анимированный загрузчик в стиле Google на HTML и SCSS.

https://codepen.io/onlyveen/pen/owQRME


Original post link: t.me/senior_front/1901
Forwarded and filtered by @smartfeed_bot

​​🧑‍💼Бизнес-метрики в Sentry или как сделать велосипед из самоката

В этой статье автор делится опытом работы с Sentry, начиная с отрицания возможности использования инструмента для этой цели, через разработку специального сервиса для передачи событий в Sentry, до настройки дашбордов в Sentry для мониторинга бизнес-метрик.

Читать...


Original post link: t.me/frontendnoteschannel/3392
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 14 messages
Today you received: 10 messages
Our filtering prevented you from: 4 messages

Top 3 source channels:
Senior Frontend Developer | JavaScript, React, HTML & CSS: 5 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 3 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

​​Почему не стоит использовать сброс стилей (reset.css, обнуление стилей CSS)?

Интересная предложка от нашего читателя Виталия Першина, в которой он кратко объяснил, почему сброс стилей — худшее решение в современной верстке: https://www.youtube.com/watch?v=eDXSW22p9Bk

@tproger_web #css


Original post link: t.me/tproger_web/4429
Forwarded and filtered by @smartfeed_bot

​Солнце: Я самый тяжелый объект в своей системе.

Нейтронная звезда: Я самый тяжелый объект на несколько десятков тысяч световых лет.

Черная дыра: Я самый тяжелый объект в галактике.

node_modules:


Original post link: t.me/tproger_web/4430
Forwarded and filtered by @smartfeed_bot

Eletric Spinner

Размытие реализовано при помощи svg картинки. Всё остальное свёрстано и анимировано на HTML и SCSS.

👉 @seniorFront


Original post link: t.me/seniorFront/3888
Forwarded and filtered by @smartfeed_bot

​​🤠Монорепозиторий с pnpm и typescript для фронтенда на React и бэкенда на Node.js

В этой статье мы установим pnpm, создадим воркспейсы для фронта и бека, импортируем что угодно из одного в другое, типизируем запросы и избавляемся от бойлерплейта.

Читать...


Original post link: t.me/frontendnoteschannel/3394
Forwarded and filtered by @smartfeed_bot

Scattering hexagons

Анимация рассеивающихся шестиугольников, реализованная с помощью jQuery.

https://codepen.io/K-T/pen/OJLxzVq


Original post link: t.me/senior_front/1902
Forwarded and filtered by @smartfeed_bot

💾 CSS-Only Directionally Aware Hover – темный фильтр для картинки, который скользит вслед за курсором по вертикали и по горизонтали. От курсора зависит, с какой стороны изображения выплывает фильтр.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1694
Forwarded and filtered by @smartfeed_bot

​​🚀Zustand.js: современный, невесомый, производительный и очень гибкий state manager

В этой статье вы узнаете о state manager'е Zustand.js, который является современным, невесомым, производительным и гибким инструментом для управления состоянием в веб-разработке.

Читать...


Original post link: t.me/frontendnoteschannel/3396
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 14 messages
Today you received: 8 messages
Our filtering prevented you from: 6 messages

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Веб-страница: 4 message(s)
Senior Frontend - javascript, html, css: 4 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

CSS Animation Effects

В этом видео создаётся svg картинка, которая затем анимируется в CSS. В итоге получается простой и оригинальный loader.

👉 @seniorFront


Original post link: t.me/seniorFront/3891
Forwarded and filtered by @smartfeed_bot

​​Какой инструмент для сборки лучше: Webpack или vite?

Кто-то хоронит Webpack. Кто-то говорит, что он как PHP — ещё долго будет поддерживаться, и что его точно стоит учить хотя бы на всякий случай.

Какие инструменты для сборки сейчас в топе? Что уже можно учить новичку, а что лучше обойти стороной? Какие есть достойные альтернативы Wepack сегодня и есть ли они вообще?

@tproger_web #обсуждение


Original post link: t.me/tproger_web/4433
Forwarded and filtered by @smartfeed_bot

​​Какую профессию вы бы выбрали, если бы не IT?

Представьте, что профессии фронтендера, бэкендера, сисадмина, да и всего IT никогда не существовало. Чем бы вы занялись и какую профессию освоили?

@tproger_web #обсуждение


Original post link: t.me/tproger_web/4434
Forwarded and filtered by @smartfeed_bot

​​🥳Написание слоя API в приложении — это прошлый век! Встречайте универсальный прокси

В данной статье я хочу поделиться методом, который позволяет избежать этих сложностей.

Читать...


Original post link: t.me/frontendnoteschannel/3398
Forwarded and filtered by @smartfeed_bot

Понимание условий асинхронной гонки JavaScript

Термин «состояние гонки» обычно применяется к конфликту при доступе к общим переменным в многопоточной среде. В Javascript ваш JS-код выполняется только одним потоком за раз, но все же можно создавать похожие проблемы.

Это распространенная проблема, когда люди просто вслепую делают свои функции асинхронными, не задумываясь о последствиях.

https://dev-gang.ru/article/ponimanie-uslovii-asinhronnoi-gonki-javascript-jro3mt2525/


Original post link: t.me/senior_front/1903
Forwarded and filtered by @smartfeed_bot

✍️ Gochi Hand – это типографская интерпретация почерка подростка. Шрифт выглядит спонтанным и непринужденным, но на самом деле все символы хорошо проработаны и подходят для печати. Пример есть в дизайне "Kids Toys & Games Store Website"

Сайтодел | #шрифт


Original post link: t.me/sitodel/1695
Forwarded and filtered by @smartfeed_bot