不要被骗子欺骗！Telemetrio 会找到并标记这些频道 👉 如果想查看标记，请订阅

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

前往频道在 Telegram

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev

显示更多

网络: Senior Frontend - javascript, html, css俄罗斯82 148技术与应用15 182

7 337

订阅者

-224 小时

-267 天

-10530 天

399

帖子浏览量

~ 23324 小时

~ 31148 小时

5.44%

参与率

~ 1

每日帖子数

Ads index

帖子存档

\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/ch/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/ch/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/ch/channels/1215276433-swebdev/posts/909","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/909","mainEntityOfPage":"https://telemetr.io/ch/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/ch/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/ch/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/ch/channels/1215276433-swebdev/posts/908","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/908","mainEntityOfPage":"https://telemetr.io/ch/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/ch/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/ch/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/ch/channels/1215276433-swebdev/posts/907","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/907","mainEntityOfPage":"https://telemetr.io/ch/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/ch/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/ch/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/ch/channels/1215276433-swebdev/posts/906","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/906","mainEntityOfPage":"https://telemetr.io/ch/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/ch/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/ch/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/ch/channels/1215276433-swebdev/posts/905","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/905","mainEntityOfPage":"https://telemetr.io/ch/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/ch/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/ch/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/ch/channels/1215276433-swebdev/posts/904","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/904","mainEntityOfPage":"https://telemetr.io/ch/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/ch/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/ch/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/ch/channels/1215276433-swebdev/posts/903","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/903","mainEntityOfPage":"https://telemetr.io/ch/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/ch/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/ch/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}]}}]}

7 337

D3 D3 — это наиболее востребованная библиотека для визуализации данных. Она использует веб стандарты и помогает вам оживить данные с помощью HTML, SVG и CSS, используя возможности современных браузеров. Освоение D3 может показаться нелёгким, но если вам хватит для этого терпения, то в дальнейшем вы сможете создавать с её помощью невероятное. 👉 @sWebDev

7 337

react-dnd Крутой Drag&Drop для React. Набор утилит, которые позволяют создавать сложные интерфейсы с перетаскиванием, сохраняя при этом отвязывание компонентов. Отличительные особенности: 1. идеально подходит для таких приложений, как Trello и Storify, где перетаскивание отвечает за передачу данных между различными частями приложения; 2. построен поверх Drag&DropHTML5; 👉 @sWebDev

7 337

Highlight.js Эта библиотека предназначена для выделения синтаксиса. Работать она может и в браузере, и на сервере. Highlight.js способна распознавать практически любой код и имеет встроенную функцию автоматического определения языка. Она осуществляет поиск программного кода между тегами <pre><code>, определяя используемый язык и выделяя синтаксис. Помимо этого, она поддерживает несколько цветовых схем. Вот пример с отрывком JavaScript кода и стандартной темой редакторов. Highlight.js весьма полезна, к примеру, для тех, кто ведёт сайт или блог с большим количеством кода. 👉 @sWebDev

7 337

Hammer.js Эта JavaScript библиотека, привносит в ваши веб-приложения мультисенсорные жесты. Она невелика, не имеет зависимостей и способна распознавать жесты, сделанные прикосновением, мышью или указателя (pointer events). По умолчанию она добавляет распознавание для касания, двойного касания, свайпа, нажатия и пр. Вы же можете задать свой собственный набор установок распознавания. Вот пример добавления событий зума и переворачивания:

 hammertime.get('pinch').set({ enable: true });
 hammertime.get('rotate').set({ enable: true });

👉

@sWebDev

7 337

Хотите освоить фронтенд-разработку? Начните 7 июня с demo-занятия «Базовое использование системы контроля версий Git»! Вместе с преподавателем Василием Ванчуком вы разберете, зачем нужна система контроля версий и нужны ли для этого отдельные программы. Узнаете, почему Git и как вы будете работать с ним в рамках онлайн-курса «JavaScript Developer. Basic» от OTUS. Для участия в практической части потребуется установить Node.js, зарегистрировать Github аккаунт и установить Git, сгенерировать SSH ключ и подключить его к Github-профилю. Регистрируйтесь на занятие https://otus.pw/TBRN/

7 337

Ramda Ramda — это клёвая JavaScript библиотека для функционального программирования, имеющая на данный момент 18 000 звёзд на GitHub. Одна из прекрасных сторон JavaScript — это то, что разработчики могут выбирать между функциональным и объектно-ориентированным программированием. У обоих подходов есть как плюсы, так и минусы, но, если вы предпочитаете именно функциональное, то стоит определённо обратить внимание на Ramda. Её ключевые возможности: Неизменяемость и отсутствие побочных эффектов в функциях. Автоматическое каррирование функций. Параметры упорядочены по функциям для удобства каррирования. 👉 @sWebDev

7 337

React Toastify React Toastify позволяет добавлять причудливые уведомления из приложения (например, уведомление «Сообщение отправлено» в Gmail) в React приложение с помощью всего четырех дополнительных строк кода. 👉 @sWebDev

7 337

React Query React Query позволяет запрашивать данные из одной и той же конечной точки API (например, api/users/1) через несколько компонентов, не вызывая множественных сетевых запросов. 👉 @sWebDev

7 337

Раньше Фейсбук и Вконтакте были настолько похожи, что Павла Дурова постоянно обвиняли в плагиате. Сейчас эти две социальные сети уже невозможно перепутать, но кое-что их все же объединяет. Они обе частично разработаны на PHP. Этот язык предоставляет много инструментов для работы, и программировать на нем быстрее, чем на других языках. PHP находится в тройке самых популярных языков программирования, а спрос на разработчиков только растет. Курс «Веб-разработчик» от SkillFactory позволит освоить профессию за 12 месяцев (10 часов в неделю). На практике вы освоите навыки веб-разработчика и соберёте портфолио проектов. Модули с теорией и интерактивные вебинары; тренажеры для отработки навыков работы с PHP, Laravel, и SQL позволят вам выйти на рынок специалистом, готовым к работе. Персональный ментор не позволит остаться один на один с новым и поможет не забросить обучение в трудную минуту. А после окончания обучения карьерный центр поможет найти работу в топовых компаниях. 📌Все подробности о программе курса и закрепить скидку на курс можно по ссылке: https://clc.am/FPtwrA

7 337

Reveal.js Вы когда-нибудь задумывались о том, что настанет день, когда вы сможете создавать презентации, используя JavaScript? В общем-то, этот день, благодаря замечательной библиотеке Reveal.js, уже настал. Её, как и другие подобные библиотеки, можно установить в виде NPM-пакета, или можно просто скачать её материалы из GitHub-репозитория и подключить соответствующие .js и .css-файлы к странице. 👉 @sWebDev

7 337

useClippy useClippy - это React хук, который позволяет читать и писать в буфер обмена пользователя. Особенно полезно для улучшения UX; позволяет уберечь пользователей от двойного щелчка по полям данных, предоставив им кнопку для копирования значений. 👉 @sWebDev

7 337

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

7 337

Howler.js Вы, вероятно, пользовались в своих проектах HTML-элементами, предназначенными для работы со звуками и видеозаписями. Библиотека Howler.js направлена на решение различных задач, связанных со звуком. К ней подготовлена хорошая документация. Вот фрагмент кода, демонстрирующий работу с этой библиотекой:

 <script>
     var sound = new Howl({
       src: ['sound.webm', 'sound.mp3']
     });
 </script>

👉 @sWebDev

7 337

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

7 337

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

7 337

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

7 337

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

7 337

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

7 337

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

7 337

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