Frontender Libs - обзор библиотек JS / CSS

Recoil Recoil - это экспериментальная библиотека управления состоянием JavaScript, разработанная Facebook. Он доступен с мая 2020 года. Recoil решает многие проблемы, с которыми сталкиваются более крупные приложения при использовании существующего Context API: - Состояние компонента можно разделить только путем передачи его общему предку, но это может включать в себя огромное дерево, которое затем необходимо повторно отобразить. - Контекст может хранить только одно значение, а не бесконечный набор значений, каждое со своими потребителями. Оба эти фактора усложняют кодовое разделение вершины дерева (где должно находиться состояние) от листьев дерева (где используется состояние). 👉 @sWebDev

Новичкам фронтендерам: хотите в 3 раза сократить время до первой зп в 100к? 🚀Велкам на курс "Профессия Frontend-разработчик с нуля до PRO" от Skillbox. - Адаптированная программа под требования работодателей - Вебинары с разработчиками из крупных компаний - Командный проект в конце курса - Помощь в трудоустройстве ⚡️Регистрируетесь сейчас - полгода учитесь бесплатно, получаете 40% скидку на остальное время обучения.

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

xstate XState - библиотека, которая позволяет формализовать приложение React как конечный автомат. Конечные автоматы - не особо новая концепция, но разработчики только недавно начали понимать, что, возможно, наши приложения могли бы быть менее глючными, если бы мы четко определяли состояния, в которых они могут находиться, и входные данные, необходимые для перехода между состояниями. XState также создает диаграммы на основе конфигурации xstate приложения: твоя документация будет обновляться по мере того, как кодишь. 👉 @sWebDev

В 2021 ВЕРСТКА УСТАРЕЛА  Так говорят те, кто не готовы схватывать новые тренды на лету. ⚡️Автор канала «Просто: Разработка» рассказывает о: - Летающем ноутбуке состоящем из 1 div’а - Сортировке массивов по вложенным свойствам - Уязвимости window.open() и target=”_blank” Подпишись и ты удивишься насколько легко ты начнешь верстать сайты.

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

Все разработчики хотят выговориться. Иногда из этого получаются подкасты. Подкаст «307 пакетов» — это будни (а иногда и выходные) айтишников, которые не боятся шутить, обсуждать душных начальников, лишние килограммы на удалёнке, влюбленности на собеседованиях и зарплаты. Только нескучные беседы с ребятами и их приглашенными гостями. Тоже нескучными, кстати. А ещё коллеги сделали забавный квиз — он поможет найти подходящий выпуск, с которого приятно будет стартануть. Подписывайся на YouTube-канал «307 пакетов» ➡️ https://bit.ly/3BnY8HH Или выбирай любую удобную подкаст-площадку ➡️ https://bit.ly/3BCIOYd

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

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

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

Друзья! Мы знаем, что не все из вас смогут присоединиться к нам в Москве. Но очень важно, чтобы каждый из вас смог узнать о том, что происходит в современном фронтенде. Чтобы вы смогли получить знания о лучших практиках и внедрить их у себя. Только так отрасль будет развиваться. Поэтому мы открываем трансляцию Главного зала FrontendConf 2021. Чтобы получить доступ к трансляции, нужно зарегистрироваться по ссылке 11 и 12 октября, с 11:00 до 18:00 (МСК) вас ждут 12 огненных докладов. Присоединяйтесь и зовите коллег!

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

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

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

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

FrontendQuiz задачи с собеседований - канал на котором публикуются задачки для фронтендщиков: алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения. Проверь свои знания на @frontendquiz

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

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

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

#полезное #git LearnGitBranching - это визуализатор репозитория git, песочница и серия обучающих руководств и задач. Создан, чтобы помочь разработчикам понять git с помощью визуализации (чего нет при работе с командной строкой). Ссылка на исходник Ссылка из чемодана frontend'ера - канал, где публикуются ссылки на полезные сервисы, плагины, инструменты и сайты. Присоединяйся, чтобы ускорить свою работу и найти для себя новые и интересные сайты и сервисы!