Frontender Libs - обзор библиотек JS / CSS
الذهاب إلى القناة على Telegram
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
إظهار المزيد
7 337
المشتركون
-224 ساعات
-267 أيام
-10530 أيام
أرشيف المشاركات
\n\n👉 @sWebDev","datePublished":"2021-05-19T12:00:03Z","dateModified":"2021-05-19T12:00:03Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2845},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":36}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/909","url":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/909","mainEntityOfPage":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/909","headline":"Внимание-внимание! Ты из IT? Сбер запустил новый телеграм-канал для всех, кто хочет расти и развиваться в IT-…","articleBody":"Внимание-внимание! Ты из IT?\n\nСбер запустил новый телеграм-канал для всех, кто хочет расти и развиваться в IT-сфере. Ты получишь:\n👨💻актуальные вакансии в крутых проектах\n☝️советы от HR-экспертов Сбера\n😎живые и мотивирующие истории наших сотрудников\n🔔главные новости и анонсы событий, которые нельзя пропустить\n\nПодписывайся на «Карьеру в Сбере» и вливайся в нашу волну!","datePublished":"2021-05-19T08:00:24Z","dateModified":"2021-05-21T08:00:18Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1653}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/908","url":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/908","mainEntityOfPage":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/908","headline":"React Aria React Aria предоставляет хуки, которые обеспечивают доступность компонентов, поэтому всё, о чем ну…","articleBody":"React Aria\n\nReact Aria предоставляет хуки, которые обеспечивают доступность компонентов, поэтому всё, о чем нужно беспокоиться, - это дизайн и стиль.\n\nПример использования - useButton:\n import { useButton } from '@react-aria/button';\n function Button(props) {\n let ref = React.useRef();\n let { buttonProps } = useButton(props, ref);\n return (\n \n );\n }\n ;\n\n👉 @sWebDev","datePublished":"2021-05-18T16:07:00Z","dateModified":"2021-05-18T16:07:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2845},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":25}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/907","url":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/907","mainEntityOfPage":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/907","headline":"Editor.js Пригодится, если в вашем проекте возникает необходимость в текстовом редакторе, а Editor.js — это п…","articleBody":"Editor.js\n\nПригодится, если в вашем проекте возникает необходимость в текстовом редакторе, а Editor.js — это простая и привлекательная JS-библиотека. Её можно использовать в проектах, написанных на чистом JavaScript, и в проектах, основанных на каких-либо фреймворках, вроде React. Редактор позволяет форматировать текст, например — делать его полужирным или курсивным, поддерживает оформление заголовков и много чего ещё. Тому, кто хочет воспользоваться Editor.js, достаточно бегло просмотреть документацию, после чего у него будет общее понимание того, что нужно делать.\n\n👉 @sWebDev","datePublished":"2021-05-18T09:03:07Z","dateModified":"2021-05-18T09:03:07Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2924},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":59}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/906","url":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/906","mainEntityOfPage":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/906","headline":"react-three-fiber Это threejs для React в web и react-native. Скорее всего, если вы видели действительно клас…","articleBody":"react-three-fiber\n\nЭто threejs для React в web и react-native.\nСкорее всего, если вы видели действительно классную 3D-анимацию на сайте, вероятно, она была построена на three.js - react-three-fiber даёт вам возможность подключиться к React при создании 3D-сцен. Также стоит изучить Next.js + Tailwind.\n\n👉 @sWebDev","datePublished":"2021-05-17T14:00:00Z","dateModified":"2021-05-17T14:00:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2615},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":50}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/905","url":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/905","mainEntityOfPage":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/905","headline":"Что нужно уметь Fullstack JavaScript разработчику, чтобы быть востребованным специалистом? Подбирать и управл…","articleBody":"Что нужно уметь Fullstack JavaScript разработчику, чтобы быть востребованным специалистом? \n\nПодбирать и управляться с арсеналом технологий: Node.js / React / Angular / Vue / Svelte / TypeScript / Web Components. А также применять паттерны проектирования и настраивать тесты.\n\nВсе эти навыки вы освоите на онлайн-курсе «JavaScript Developer. Professional». \n\nВас ждет практика в формате мини-assignment, как на собеседованиях в российских и европейских компаниях. \nА также живое общение с экспертами, профессиональное сообщество и помощь с трудоустройством.\n\nПройдите вступительный тест и успейте занять место со скидкой https://otus.pw/UkWW/","datePublished":"2021-05-17T10:00:25Z","dateModified":"2021-05-19T10:03:40Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1805},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/904","url":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/904","mainEntityOfPage":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/904","headline":"Push.js Push - это самый быстрый способ начать работу с уведомлениями для рабочего стола. API уведомлений поз…","articleBody":"Push.js\n\nPush - это самый быстрый способ начать работу с уведомлениями для рабочего стола. API уведомлений позволяет современным браузерам отправлять уведомления на рабочий стол пользователя. Среди сильных сторон библиотеки можно отметить простую документацию, понятную даже начинающему разработчику.\n\n👉 @sWebDev","datePublished":"2021-05-17T07:00:02Z","dateModified":"2021-05-17T07:00:02Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3266},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":89}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/903","url":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/903","mainEntityOfPage":"https://telemetr.io/ar/channels/1215276433-swebdev/posts/903","headline":"Semantic UI React Эта библиотека содержит длинный список готовых компонентов, разработанных таким образом, чт…","articleBody":"Semantic UI React\n\nЭта библиотека содержит длинный список готовых компонентов, разработанных таким образом, чтобы способствовать производству семантически правильного кода.\n\nОригинальная версия библиотеки работала на основе HTML и CSS с небольшими вкраплениями JavaScript. Вы определяли свои HTML-элементы, задавали подготовленные CSS-классы и вызывали подходящую JavaScript-функцию.\n\nТеперь, благодаря добавленной совместимости с React, вы при помощи JSX-кода напрямую определяете компоненты и связываете их с кодом React Component. То есть, вам не нужно волноваться о выборе правильного элемента и добавлять код: «реактивный» подход все это значительно упрощает.\n\n👉 @sWebDev","datePublished":"2021-05-14T17:01:38Z","dateModified":"2021-05-14T17:01:38Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ar/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2859},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23}]}}]}
D3
D3 — это наиболее востребованная библиотека для визуализации данных. Она использует веб стандарты и помогает вам оживить данные с помощью HTML, SVG и CSS, используя возможности современных браузеров.
Освоение D3 может показаться нелёгким, но если вам хватит для этого терпения, то в дальнейшем вы сможете создавать с её помощью невероятное.
👉 @sWebDev
react-dnd
Крутой Drag&Drop для React.
Набор утилит, которые позволяют создавать сложные интерфейсы с перетаскиванием, сохраняя при этом отвязывание компонентов.
Отличительные особенности:
1. идеально подходит для таких приложений, как Trello и Storify, где перетаскивание отвечает за передачу данных между различными частями приложения;
2. построен поверх Drag&DropHTML5;
👉 @sWebDev
Highlight.js
Эта библиотека предназначена для выделения синтаксиса. Работать она может и в браузере, и на сервере. Highlight.js способна распознавать практически любой код и имеет встроенную функцию автоматического определения языка.
Она осуществляет поиск программного кода между тегами <pre><code>, определяя используемый язык и выделяя синтаксис. Помимо этого, она поддерживает несколько цветовых схем. Вот пример с отрывком JavaScript кода и стандартной темой редакторов.
Highlight.js весьма полезна, к примеру, для тех, кто ведёт сайт или блог с большим количеством кода.
👉 @sWebDev
Hammer.js
Эта JavaScript библиотека, привносит в ваши веб-приложения мультисенсорные жесты. Она невелика, не имеет зависимостей и способна распознавать жесты, сделанные прикосновением, мышью или указателя (pointer events). По умолчанию она добавляет распознавание для касания, двойного касания, свайпа, нажатия и пр. Вы же можете задать свой собственный набор установок распознавания. Вот пример добавления событий зума и переворачивания:
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
👉 @sWebDevХотите освоить фронтенд-разработку? Начните 7 июня с demo-занятия «Базовое использование системы контроля версий Git»!
Вместе с преподавателем Василием Ванчуком вы разберете, зачем нужна система контроля версий и нужны ли для этого отдельные программы. Узнаете, почему Git и как вы будете работать с ним в рамках онлайн-курса «JavaScript Developer. Basic» от OTUS.
Для участия в практической части потребуется установить Node.js, зарегистрировать Github аккаунт и установить Git, сгенерировать SSH ключ и подключить его к Github-профилю.
Регистрируйтесь на занятие https://otus.pw/TBRN/
Ramda
Ramda — это клёвая JavaScript библиотека для функционального программирования, имеющая на данный момент 18 000 звёзд на GitHub. Одна из прекрасных сторон JavaScript — это то, что разработчики могут выбирать между функциональным и объектно-ориентированным программированием. У обоих подходов есть как плюсы, так и минусы, но, если вы предпочитаете именно функциональное, то стоит определённо обратить внимание на Ramda.
Её ключевые возможности:
Неизменяемость и отсутствие побочных эффектов в функциях.
Автоматическое каррирование функций.
Параметры упорядочены по функциям для удобства каррирования.
👉 @sWebDev
React Toastify
React Toastify позволяет добавлять причудливые уведомления из приложения (например, уведомление «Сообщение отправлено» в Gmail) в React приложение с помощью всего четырех дополнительных строк кода.
👉 @sWebDev
React Query
React Query позволяет запрашивать данные из одной и той же конечной точки API (например, api/users/1) через несколько компонентов, не вызывая множественных сетевых запросов.
👉 @sWebDev
Раньше Фейсбук и Вконтакте были настолько похожи, что Павла Дурова постоянно обвиняли в плагиате. Сейчас эти две социальные сети уже невозможно перепутать, но кое-что их все же объединяет. Они обе частично разработаны на PHP.
Этот язык предоставляет много инструментов для работы, и программировать на нем быстрее, чем на других языках. PHP находится в тройке самых популярных языков программирования, а спрос на разработчиков только растет.
Курс «Веб-разработчик» от SkillFactory позволит освоить профессию за 12 месяцев (10 часов в неделю). На практике вы освоите навыки веб-разработчика и соберёте портфолио проектов. Модули с теорией и интерактивные вебинары; тренажеры для отработки навыков работы с PHP, Laravel, и SQL позволят вам выйти на рынок специалистом, готовым к работе.
Персональный ментор не позволит остаться один на один с новым и поможет не забросить обучение в трудную минуту. А после окончания обучения карьерный центр поможет найти работу в топовых компаниях.
📌Все подробности о программе курса и закрепить скидку на курс можно по ссылке: https://clc.am/FPtwrA
Reveal.js
Вы когда-нибудь задумывались о том, что настанет день, когда вы сможете создавать презентации, используя JavaScript? В общем-то, этот день, благодаря замечательной библиотеке Reveal.js, уже настал.
Её, как и другие подобные библиотеки, можно установить в виде NPM-пакета, или можно просто скачать её материалы из GitHub-репозитория и подключить соответствующие .js и .css-файлы к странице.
👉 @sWebDev
useClippy
useClippy - это React хук, который позволяет читать и писать в буфер обмена пользователя. Особенно полезно для улучшения UX; позволяет уберечь пользователей от двойного щелчка по полям данных, предоставив им кнопку для копирования значений.
👉 @sWebDev
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>;
👉 @sWebDevEditor.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
