Fish-UI

Fish-UI — это набор инструментов для веб-разработки, использующий возможности WebPack и ES2015. Несмотря на скудную документацию, библиотека Fish-UI достойна внимания, так как содержит в себе более 35-ти хорошо структурированных компонентов, позволяющих создавать простые и понятные интерфейсы, не перегруженные ненужными деталями.

👉 @sWebDev

Компоненты React от Khan Academy

Компоненты React, подготовленные силами Khan Academy, выпущены в виде библиотеки компонентов, в которой используется встроенный CSS и имеются комментарии. Отдельные компоненты библиотеки можно установить, воспользовавшись этой подборкой, созданной средствами Bit.

👉 @sWebDev

Angular Material

Angular Material — это официальная библиотека компонентов Angular, в которой реализованы концепции Material Design от Google. Эти компоненты пользовательского интерфейса можно рассматривать как примеры кода, написанные в соответствии с рекомендациями команды разработчиков Angular.

NG Bootstrap

У NG Bootstrap, популярной библиотеки, в которую входят компоненты для Angular, выполненные в стиле Bootstrap 4, около 4.5 тысячи звёзд на GitHub. Она служит заменой Bootstrap-проекту angular-ui, который больше не поддерживается. NG Bootstrap отличается высоким уровнем покрытия кода тестами и отсутствием сторонних JS-зависимостей.

👉 @sWebDev

Clarity

Clarity — это опенсорсная система дизайна, созданная VMware. Она представляет собой комбинацию из реализации рекомендаций по UX-дизайну, HTML/CSS фреймворка и компонентов для Angular. Clarity даёт разработчику обширный набор высокопроизводительных компонентов с привязкой данных.

👉 @sWebDev

NG2 Charts

Библиотека NG2 Charts, имеющая около тысячи звёзд на GitHub, даёт разработчику директивы Angular для создания графиков шести типов, при этом используемые здесь свойства основаны на chart.js. Эту библиотеку можно использовать для визуализации больших наборов данных и вывода списков.

👉 @sWebDev

Framer Motion

Framer Motion - это библиотека анимации и жестов, созданная Framer. Дополнительным преимуществом Framer Motion является то, что дизайнеры могут создавать анимацию во Framer, а затем передавать проекты для точной реализации с использованием собственной библиотеки Framer

👉 @sWebDev

Formik

Formik - популярное решение для создания форм, так как оно предоставляет многоразовый компонент, в котором можно просто использовать его API для обработки трех наиболее раздражающих частей при построении форм:

- получение значений внутри формы и вне его состояния;
- сообщения о проверке и ошибках;
- обработка отправки формы.

👉 @sWebDev

Быть в курсе последних IT-новостей — необходимость для современного разработчика.
Можно не тратить драгоценное время на поиск свежей информации, а делегировать это дело «Быстрому Фронтенду».

Наш коллега Саша смотрит видео, слушает подкасты и читает статьи, чтобы регулярно публиковать в своём Telegram-канале «Быстрый Фронтенд» краткий обзор свежих новостей со всего мира. Конечно же, со ссылочками и комментариями.

Подписывайся на «Быстрый Фронтенд» — самые интересные и полезные новости фронтенда в компактном формате 📲

Друзья! Мы знаем, что не все из вас смогут присоединиться к нам в Москве. Но очень важно, чтобы каждый из вас смог узнать о том, что происходит в современном фронтенде. Чтобы вы смогли получить знания о лучших практиках и внедрить их у себя. Только так отрасль будет развиваться.

Поэтому мы открываем трансляцию Главного зала FrontendConf 2021. Чтобы получить доступ к трансляции, нужно зарегистрироваться по ссылке

11 и 12 октября, с 11:00 до 18:00 (МСК) вас ждут 12 огненных докладов. Присоединяйтесь и зовите коллег!

Jotai

Jotai описывает себя как примитивное решение для управления состоянием для React и конкурента Recoil. Это довольно минималистично - меньше API для изучения; и если ты понимаешь хук useState в React, ты, вероятно, поймешь хук Jotai useAtom.

👉 @sWebDev

Remotion

Remotion позволяет снимать видеоролики о рендеринге React компонентов - будь то получение данных из API и их отображение, или показ классной анимации.

👉 @sWebDev

React Spring

React Spring использует физику пружины, а не временную анимацию для анимации компонентов. React Spring считается одним из лучших анимационных пакетов для React — приложений. Её разрабатывают большое количество участников и у этой библиотеки открытый исходный код.

👉 @sWebDev

Все разработчики хотят выговориться. Иногда из этого получаются подкасты.

Подкаст «307 пакетов» — это будни (а иногда и выходные) айтишников, которые не боятся шутить, обсуждать душных начальников, лишние килограммы на удалёнке, влюбленности на собеседованиях и зарплаты.

Только нескучные беседы с ребятами и их приглашенными гостями. Тоже нескучными, кстати.

А ещё коллеги сделали забавный квиз — он поможет найти подходящий выпуск, с которого приятно будет стартануть.

Подписывайся на YouTube-канал «307 пакетов» ➡️ https://bit.ly/3BnY8HH
Или выбирай любую удобную подкаст-площадку ➡️ https://bit.ly/3BCIOYd

Muse UI

Библиотека Muse UI, имеющая около 5 тысяч звёзд на GitHub, представляет собой набор компонентов для Vue 2.0, использующих Material Design. Тут, уже в который раз, для погружения в документацию неплохо будет знать китайский, но возможности библиотеки вполне стоят усилий по её освоению.

👉 @sWebDev

xstate

XState - библиотека, которая позволяет формализовать приложение React как конечный автомат.

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

XState также создает диаграммы на основе конфигурации xstate приложения: твоя документация будет обновляться по мере того, как кодишь.

👉 @sWebDev

SWR

Название SWR происходит от stale-while-revalidate, способа кэширования, который сейчас набирает популярность в frontend-разработке. Он позволяет загружать кэшированный контент сразу же, и сразу же его и обновляет, чтобы в будущем обрабатывать уже новый контент.

SWR – это библиотека хуков React, разработанная Vercel. Она позволяет извлекать данные из API или другого внешнего источника, сохранять их в кэше, а затем рендерить.

👉 @sWebDev

Новичкам фронтендерам: хотите в 3 раза сократить время до первой зп в 100к?

🚀Велкам на курс "Профессия Frontend-разработчик с нуля до PRO" от Skillbox.

- Адаптированная программа под требования работодателей
- Вебинары с разработчиками из крупных компаний
- Командный проект в конце курса
- Помощь в трудоустройстве

⚡️Регистрируетесь сейчас - полгода учитесь бесплатно, получаете 40% скидку на остальное время обучения.

Recoil

Recoil - это экспериментальная библиотека управления состоянием JavaScript, разработанная Facebook. Он доступен с мая 2020 года.
Recoil решает многие проблемы, с которыми сталкиваются более крупные приложения при использовании существующего Context API:

- Состояние компонента можно разделить только путем передачи его общему предку, но это может включать в себя огромное дерево, которое затем необходимо повторно отобразить.
- Контекст может хранить только одно значение, а не бесконечный набор значений, каждое со своими потребителями.
Оба эти фактора усложняют кодовое разделение вершины дерева (где должно находиться состояние) от листьев дерева (где используется состояние).

👉 @sWebDev

Redux Toolkit

Redux Toolkit (или RTK) - это способ управлять своим состоянием с помощью Redux.

RTK значительно сокращает количество шаблонов, необходимых для использования Redux, обеспечивает разумные значения по умолчанию и сохраняет ту же неизменную логику обновления, которую мы знаем и любим.

👉 @sWebDev