Согласны?

Programmer memes

Сеньором быть непросто

Programmer memes

3D Cards

Вёрстка реализована с использованием возможностей препроцессоров Pug и SCSS. В JS создана логика поворота карточки, зависящая от положения курсора пользователя.

👉 @seniorFront

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

Что самое важное:
1. Контент на первом месте, вычищайте визуальный шум типа бесполезных разделителей и фонов
2. Ищите способы сэкономить место
3. Выносите повторяющиеся данные в заголовок
4. Чем важнее колонка, тем она левее
5. Убирайте лишнее
6. Текст выравнивается по левому краю, цифры - по правому
7. Если есть скролл, крепите важную колонку (не обязательно первую)
8. Фильтры и сортировки должны быть очевидны
9. Попробуйте транспонирировать т.е “вывернуть” таблицу (колонки сделать строками), возможно станет удобнее
10. Таблица на мобилках может превращаться в карточки или скролиться

Материалы:
Старый добрый совет Горбунова
Бирман про вёрстку таблиц
Статья на русском
Серия статьей про таблицы, "с которыми работают": часть 1, часть 2, часть 3
Перевод хорошей статьи про улучшение таблиц
Tables Ultimate guide (EN)
User friendly tables (EN)
Table patterns best principles (EN)
Tables in Enterprise (EN) - относительно свежая статья
Адаптация таблиц
Адаптация и унификация в рамках дизайн системы
Адаптация под мобильные

Присылайте свои сохраненки по таблицам в комментарии 🌠

#пuxборка

Checkbox Animations With Indeterminate State

Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript

#CodePen

About Us Pop-Out Effect

Виджеты для блока "О нас".

#CodePen

mi про архетиктуру фронта

мне нравится в fsd
1. домены в нейминге
2. слой shared
3. запрет использования нижестоящих слоев
4. попытка разделения бизнес логики и отображения - работа со слотами (частично хватило)

чего мне не хватает или перенасыщено
1. я не понимаю куда апи и стор класть
2. куда класть интерейсы и типы, чтобы не было свалки
3. как переиспользовать повторяющуюся логику в разных модулях
4. не хватает слоя между бизнес компонентами и шаред компонентами
5. не хватает слоя объединения сущностей и фитч без формирования виджета, потому что порой до полноценного виджета ещ не дотягивает

мысли
вынести процесс и мета в отдельные константы

логика пишется в сторе, а отображение происходит только в компоненте

в ес конфиге запретить один импорт слоя в другой

почитать

https://industrious-search-cdf.notion.site/Astral-Frontend-Architecture-Guide-cbb7ccaa69384c65aec35292a5c13e2a