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

Paper.js Это библиотека, которая позволяет создавать и работать с векторной графикой. Официальный сайт описывает это как швейцарский армейский нож для создания векторной графики. Следующий код создает четырехугольник в PaperScript. <script type="text/paperscript" canvas="quad"> var path = new Path(); path.strokeColor = 'black'; var pointOne = new Point(100, 20); var pointTwo = new Point(-100, 100); var pointThree = new Point(300, 30); path.moveTo(pointOne); path.lineTo(pointOne + pointTwo); path.lineTo(pointTwo + pointThree); path.lineTo(pointOne + pointThree); path.closed = true; </script> 👉 @sWebDev

Three.js Three.js – это библиотека JavaScript, содержащая набор готовых классов для создания и отображения интерактивной 3D графики в WebGL. Three.js для WebGL — это то же самое, что jQuery для JavaScript. Библиотека предлагает декларативный синтаксис, и абстрагирует от головных болей связанных с 3D в браузере. Давайте проведем общий обзор и посмотрим, как начать работу, если вы новичок в мире 3D. 👉 @sWebDev

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

Immutable.js Работа с неизменяемыми структурами данных даёт такие весомые преимущества, как упрощение разработки приложений, отсутствие защитного копирования и продвинутая мемоизация. В Immutable.js вам доступны такие неизменяемые структуры данных, как List, Stack, Map, Set. 👉 @sWebDev

Каких звёзд нужно запереть и не выпускать? Сбер решил, что запереть нужно Филиппа Киркорова: смотрим прямой эфир в канале Сбера

gatsby-image Является компонентом React и специально разработана для работы с запросами к Gatsby GraphQL. Он сочетает в себе возможности обработки изображений с передовыми методами оптимизированной загрузки изображений. Отличительные особенности: 1. сайты с Gatsby не требуют серверов, поэтому вы можете разместить весь сайт на CDN за небольшую плату; 2. возможность извлекать данные из любого источника (Markdownфайлы, CMS-ки: Contentfulили WordPress и RESTAPI); 3. преимущества статических сайтов без каких-либо ограничений. 👉 @sWebDev

​🐙 Фронтендеры - золото для охотников за головами. Оклады от 250к, работа на удаленке, рабочий MacBook - от всего этого новичка отделяет только отсутствие знаний. Вот карта в мир фронтедеров: 1. Веб-верстка Узнай основы HTML и CSS, разберись с Flexbox, научись пользоваться Git. 2. Javascript Выучи синтаксис языка Javascript, разберись с EventLoop, моделью DOM, ООП и типизацией, научись работать со сборщиками (Webpack, Gulp). 3. React и другие JS фреймворки Выучи React, познакомься с Angular и Vue. 4. Архитектура приложений и бекенд Научись работать с базами данных, разберись как работает Node.js. 5. Подготовка к собеседованию Составь грамотное резюме и сопроводительное письмо, подготовься к собеседованию. Специализация Frontend-разработчик ускорит твой путь, опытные преподаватели с бэкграундом в Яндексе, RSSchool, The Makers проведут тебя по каждому пункту, разложат все по полочкам, а ты разработаешь 5 реальных проектов для своего портфолио: - Сайт-визитка - Верстка лендинга по макету - Слайдер на JavaScript - Канбан-доска на React и легко войдешь в мир IT PARTNER - промокод на скидку 50%

Voca Эту библиотеку можно эффективно использовать для управления строками. Она уже давно поддерживается и на данный момент имеет рейтинг 2 800 звёзд. С её помощью можно изменять регистр, делать обрезку, растягивать текст, латинизировать его, сокращать и прочее Другие её возможности включают: 1. Полноценный набор функций для управления, обрезки, форматирования, смещение и запроса строк. 2. Понятная документация с возможностью поиска. 3. Поддержка множества сред — Chrome, Firefox, Node.js и пр. 4. 100% охват кода и отсутствие зависимостей. 👉 @sWebDev

react-content-loader Набор компонентов для легкого создания skeleton loadings (как загрузка карты в Facebook). Отличительные особенности: 1. Plug and play: поставляется с большим количеством пресетов для использования. 2. DIY: можно использовать данный софт, чтобы создавать собственные загрузчики. 3. Поддержка React Native: тот же API с теми же мощными функциями. 4. Легковесный: менее 2 КБ и 0 зависимостей для веб-версии. 👉 @sWebDev

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