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

ReactPlayer ReactPlayer - потрясающая библиотека, которая позволяет вставлять видео из основных источников (YouTube, Facebook, Twitch, SoundCloud и другие) и определять собственные элементы управления видео. 👉 @sWebDev

Howler.js Вы, вероятно, пользовались в своих проектах HTML-элементами, предназначенными для работы со звуками и видеозаписями. Библиотека Howler.js направлена на решение различных задач, связанных со звуком. К ней подготовлена хорошая документация. Вот фрагмент кода, демонстрирующий работу с этой библиотекой: <script> var sound = new Howl({ src: ['sound.webm', 'sound.mp3'] }); </script> 👉 @sWebDev

Внимание-внимание! Ты из IT? Сбер запустил новый телеграм-канал для всех, кто хочет расти и развиваться в IT-сфере. Ты получишь: 👨‍💻актуальные вакансии в крутых проектах ☝️советы от HR-экспертов Сбера 😎живые и мотивирующие истории наших сотрудников 🔔главные новости и анонсы событий, которые нельзя пропустить Подписывайся на «Карьеру в Сбере» и вливайся в нашу волну!

React Aria React Aria предоставляет хуки, которые обеспечивают доступность компонентов, поэтому всё, о чем нужно беспокоиться, - это дизайн и стиль. Пример использования - useButton: import { useButton } from '@react-aria/button'; function Button(props) { let ref = React.useRef(); let { buttonProps } = useButton(props, ref); return ( <button {...buttonProps} ref={ref}> {props.children} </button> ); } <Button onPress={() => alert('Button pressed!')}>Press me</Button>; 👉 @sWebDev

Editor.js Пригодится, если в вашем проекте возникает необходимость в текстовом редакторе, а Editor.js — это простая и привлекательная JS-библиотека. Её можно использовать в проектах, написанных на чистом JavaScript, и в проектах, основанных на каких-либо фреймворках, вроде React. Редактор позволяет форматировать текст, например — делать его полужирным или курсивным, поддерживает оформление заголовков и много чего ещё. Тому, кто хочет воспользоваться Editor.js, достаточно бегло просмотреть документацию, после чего у него будет общее понимание того, что нужно делать. 👉 @sWebDev

react-three-fiber Это threejs для React в web и react-native. Скорее всего, если вы видели действительно классную 3D-анимацию на сайте, вероятно, она была построена на three.js - react-three-fiber даёт вам возможность подключиться к React при создании 3D-сцен. Также стоит изучить Next.js + Tailwind. 👉 @sWebDev

Что нужно уметь Fullstack JavaScript разработчику, чтобы быть востребованным специалистом? Подбирать и управляться с арсеналом технологий: Node.js / React / Angular / Vue / Svelte / TypeScript / Web Components. А также применять паттерны проектирования и настраивать тесты. Все эти навыки вы освоите на онлайн-курсе «JavaScript Developer. Professional». Вас ждет практика в формате мини-assignment, как на собеседованиях в российских и европейских компаниях. А также живое общение с экспертами, профессиональное сообщество и помощь с трудоустройством. Пройдите вступительный тест и успейте занять место со скидкой https://otus.pw/UkWW/

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

Semantic UI React Эта библиотека содержит длинный список готовых компонентов, разработанных таким образом, чтобы способствовать производству семантически правильного кода. Оригинальная версия библиотеки работала на основе HTML и CSS с небольшими вкраплениями JavaScript. Вы определяли свои HTML-элементы, задавали подготовленные CSS-классы и вызывали подходящую JavaScript-функцию. Теперь, благодаря добавленной совместимости с React, вы при помощи JSX-кода напрямую определяете компоненты и связываете их с кодом React Component. То есть, вам не нужно волноваться о выборе правильного элемента и добавлять код: «реактивный» подход все это значительно упрощает. 👉 @sWebDev

Snap svg Это JavaScript библиотека. Позволяет создавать и анимировать векторную графику в современных браузерах. Можно загружать код SVG асинхронно и запрашивать части, которые нужны, для превращения SVG файлов в спрайты. 👉 @sWebDev

Чего не хватало нам весь прошлый год, так это хороших IT-конференций в офлайне — HighLoad++ 2021 пройдет в Крокус-Экспо 17 и 18 мая. В этом году особенно радует состав спикеров и партнеров, которые не только разбавляют конференцию интерактивом, но и помогают набрать команды на проекты. Мы о Skillbox сейчас. Их курсами по программированию довольны — Skillbox за 2020 год трудоустроили 400 студентов. И вам помогут найти своего человека, просто подойдите к их стенду и расскажите о вашем запросе. Сюрприз: всем, кто придет на конференцию, Skillbox дает бесплатный доступ к курсу «Как подготовиться к профессиональной конференции». Поможет вам справиться с любым выступлением 💪🏻 Такое пропустить нельзя. Билет на конференцию приобретайте по ссылке 👉 https://clc.am/PxSH8A

Rebass Это маленькая React библиотека UI-компонентов, благодаря которой можно создавать очень мощные наборы примитивных UI-элементов для тем на основе библиотеки Styled System. Среди ключевых особенностей этой библиотеки стоит отметить следующие: 1. Очень простой старт. У вас не будет нужды писать большое количество бойлерплейт-кода: вы его просто импортируете и начнете расширять примитивные компоненты, а также создавать собственные при необходимости. 2. Привыкнув к рабочему процессу и синтаксису, вы сможете реализовывать темы для своих приложений, причем они будут обладать потрясающим уровнем кастомизации и расширяемости. А лучше всего то, что система тем полностью совместима с Theme UI. 3. При создании этой библиотеки применялся подход mobile-first. Вы получите новейшую философию дизайна прямо из коробки. 4. Flexbox layout с примитивными компонентами Box и Flex, которые вы можете расширять. 👉 @sWebDev

Device.js Device будет полезен больше для изменения интерфейса страницы или приложения на различных устройствах. Например, можно сделать версию для Android несколько иной, чем версия под iOS. Или пойти дальше и заточить, например, телефонную портретную версию под интерфейс iOS или Android. Ещё очень часто возникает необходимость отображения ссылок на онлайн-маркеты в зависимости от устройства пользователя. Например, при заходе с устройств на Android отображать ссылку на Google Play, на iPhone и iPad — AppStore, на Windows — магазин Windows Phone и т.д. Device.js с этим справляется прекрасно. 👉 @sWebDev

React Desktop Этот проект пытается подражать десктопному опыту в вебе. Как видите, при помощи этой библиотеки вы можете идеально воспроизвести десктопный опыт, используя JavaScript. А это значит, что вы сможете создавать настоящие десктопные приложения, используя Electron.js или же просто добавлять интересные эффекты в ваши веб-приложения (эти примеры лучше всего работают в Chrome, так что используйте именно этот браузер для тестирования). 👉 @sWebDev

Autosize.js Этот плагин автоматически регулирует высоту текстовой области, добавляя ей свойство автоматической регулировки высоты. Пользователю удобней просматривать набранную информацию. 👉 @sWebDev

Тесты и задачи по JavaScript На канале Front Wars | Javascript, HTML, CSS публикуют полезные мини-тесты разной сложности, которые помогут закрепить и улучшить свой скилл!😉 📊 — Каждый день новый тест ✉️ — Личный чат фронтендеров 🎁 — Скоро новая фича... 🚀 Залетайте на канал Front Wars @FrontWars

React Virtualized React Virtualized предназначен для решения одной-единственной проблемы: эффективного рендеринга списков и табличных данных на странице. Я знаю, что вы думаете: «А что, так сложно отобразить таблицу? Или простой выпадающий список?» Но что, если в вашем выпадающем списке больше тысячи элементов, а в таблице — больше сотни столбцов? 👉 @sWebDev

Интересуешься веб-разработкой? Пройди онлайн-курс по fullstack-разработке, изучи полный цикл работы с backend и frontend, освой Python, JavaScript или PHP, а также смежные навыки, — и получи высокооплачиваемую профессию. По данным Lucky Hunter, fullstack-разработчик входит в тройку самых востребованных IT-профессий, а значит, проблем с работой у тебя не будет. С нас — помощь с трудоустройством! Переходи на сайт https://clc.am/XOUzYQ , чтобы узнать больше и записаться.

Swiper.js Это превосходный слайдер, заточен для работы с мобильными версиями сайта и веб-приложениями. Swiper обеспечивает аппаратное ускорение анимации на нативном уровне. Гибкий, имеет множество настроек. Подогнать можно под любой дизайн или задачу. 👉 @sWebDev

Gestalt Библиотека компонентов Gestalt была разработана Pinterest на основе их внутреннего языка дизайна. Как и Material UI, и Ant-Design, Gestalt была создана для упрощения коммуникации между дизайнерами и разработчиками путем внедрения множества готовых компонентов. 👉 @sWebDev