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

Bideo.js Полноэкранные видео служат отличным фоном для сайта. Bideo.js – библиотека JavaScript для добавления видеофона, который хорошо смотрится на экране любого размера и плавно масштабируется. 👉 @sWebDev

Anime.js Анимация и микровзаимодействия сейчас в тренде. Anime.js добавит на сайт немного движения. Библиотека работает с CSS, SVG, атрибутами DOM и объектами JavaScript, что делает ее идеальной практически для любого проекта. 👉 @sWebDev

Хотите освоить фронтенд-разработку? Начните 24 июня с demo-занятия «Создание интерактивных страниц, работа с анимациями»! Вместе с преподавателем Эржаном Торокуловым вы рассмотрите способы создания интерактивных страниц, научитесь анимировать переходы состояний HTML элементов, а также создадите анимации как на CSS, так и на JavaScript. Для регистрации на вебинар оставьте заявку 👉 https://otus.pw/7rza/

vue-datepicker Это библиотека, предназначенная для организации выбора дат. Нечто подобное встречается в огромном множестве реально существующих приложений. Библиотек, реализующих этот функционал, существует гораздо больше, чем библиотек для решения других задач. Элементы управления для выбора дат, создаваемые с помощью этой библиотеки, легко поддаются стилизации. Она поддерживает массу настроек, касающихся выбора дат и диапазонов дат. Библиотека позволяет формировать аккуратные и удобные элементы пользовательского интерфейса. Она даже поддерживает средства локализации. 👉 @sWebDev

AOS – Animate On Scroll Работаете над одностраничным сайтом с эффектом parallax? Animate on Scroll добавит приятную анимацию при прокручивании страницы. Эта библиотека поможет вам создать привлекательный дизайн: в ней есть все, от эффектов затухания, до размещения статических привязок. 👉 @sWebDev

Front-end, Back-end, Mobile, QA, Scrum... Если для Вас это не просто слова, Вам сюда 👉 @digital_epoch – канал для разработчиков и тех, кто в теме 😎 Из интересного – подборки статей для фронтов – сервисы для дизайнеров и верстальщиков – бесплатные курсы Подписаться: @digital_epoch

vue-good-table. Таблицы — это очень важная часть многих веб-приложений. Если выбрать не очень качественную библиотеку для работы с таблицами, это может принести немало проблем. Эта библиотека способна решить большинство задач по работе таблицами, встающими перед разработчиком. И её название, «good-table» («хорошая таблица»), это — не просто слова. Это — действительно хорошая библиотека, которая предоставляет нам гораздо больше возможностей, чем можно ожидать. 👉 @sWebDev

Anchorme.js Это компактная и быстрая JavaScript-библиотека, предназначенная для поиска URL и адресов электронной почты в тексте и для преобразования их в рабочие гиперссылки. Вот её основные характеристики: 1. Высокая чувствительность, низкий процент ложноположительных срабатываний. 2. Валидация ссылок и адресов электронной почты по полному списку IANA. 3. Валидация номеров портов (при их наличии). 4. Валидация IP-адресов (при их наличии). 5. Поддержка URL, записанных символами, отличными от символов латиницы. 👉 @sWebDev

Онлайн-курс «Frontend-разработчик с нуля до PRO» — ваш проводник в мир IT. ⠀ По окончании обучения вы сможете стать middle-разработчиком и устроиться на высокооплачиваемую работу, даже если вы никогда раньше не программировали. ⠀ На курсе вы научитесь: - верстать веб-страницы; - создавать интерактивные веб-приложения; - работать в системе контроля версий GIT и командной строке Bash; - применять основные алгоритмы и структуры данных в реальных проектах; - работать с макетами в Photoshop и Figma; - создавать серверные приложения с использованием Node.js и многому другому. ⠀ А ещё у вас будет 4 дипломных проекта для вашего портфолио — они повысят шансы получить должность в одной из компаний, которые подберёт наш Центр карьеры. Переходите по ссылке: https://clc.am/vOHpEQ, чтобы зарегистрироваться на курс ⠀

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

Owl carousel Это плагин для создания слайдеров. Имеет интуитивные настройки точек остановки слайдера. Адаптивен. Отлично работает как на мобильной, так и на десктопной версии. Owl карусель поддерживает модульную структуру плагина. Таким образом, можно отсоединить плагины, которые не используются в проекте, или создать новые, которые необходимы. Поддерживает старые версии браузеров. 👉 @sWebDev

Программист из Google выкладывает тесты и задачи по JavaScript 👉 @js_tests Зайди и посмотри сколько сможешь решить

History Этот плагин управляет состоянием страницы. Отправляет ссылку на уже подгруженную историю браузера. Состояние страницы при этом сохраняется в виде нормального URL и всё работает так, как будто вы на самом деле переходите с одной страницы на другую. 👉 @sWebDev

Meteor.js Полноценная инфраструктура Meteor.js обеспечивает быструю Frontend разработку для сквозных веб-приложений и мобильных приложений в JavaScript. Из-за своей модульной структуры библиотеки очень удобно использовать пакеты. Сегодня данная структура используется для разработки приложений в таких компаниях, как Mazda, Honeywell и IKEA 👉 @sWebDev

Mithril.js Mithril.js весит около 12kb в формате gzipped благодаря своему малому API. Он предоставляет механизм шаблонов с виртуальной реализацией DOM diff для рендеринга, утилиты для высокоуровневого моделирования с использованием функционального состава, а также поддержку маршрутизации и компонентности. Mithril.js имеет ряд похожих функций, как в React.js. Mithril предлагает иерархические элементы MVC и различные безопасные шаблоны, которые поставляются с интеллектуальными различиями DOM, они используются для проверки высокопроизводительного рендеринга. Данный JavaScript Framework также поставляется с двумя очень впечатляющими функциями для Frontend Development - маршрутизацией URL-адресов и настраиваемой привязкой данных. Преимущества 1. Чистый JavaScript. 2. Отлично работает с ES6, может выдерживать любую нагрузку. 3. Наличие интеллектуальной системы автоматической перерисовки. 4. Быстрее чем React. 5. Виртуальный DOM позволяет объединять HTML, XHTML или XML документы по определенным критериям.

Next.js Фреймворк был запущен командой React.js в качестве инструмента для рендеринга на стороне сервера. Разработчики, работающие с комбинацией Next и React.js, могут значительно упростить процесс разработки интерфейса. Next.js поставляется с набором замечательных функций, таких как маршрутизация на стороне клиента и автоматическое разделение кода. Прежде всего, Next.js поставляется с полной поддержкой CSS, известной как styled-jsx, чтобы упростить разработку дизайна пользовательского интерфейса 👉 @sWebDev

Node.js — мощный инструмент для fullstack- и backend-разработчиков. Быстро освоиться в этом фреймворке и научиться использовать все его возможности поможет онлайн-курс «Node.js Developer» от OTUS. Справитесь ли вы с уровнем курса? Покажет вступительный тест. ❗️Пройдите тестирование, чтобы: • оценить свои навыки • занять место по специальной цене • получить доступ к демо-урокам курса • попасть в закрытое сообщество профессионалов 👉 Пройти тестирование: https://otus.pw/FoCY/

Algolia Places Algolia Places – библиотека JavaScript для автоматического заполнения форм. Она специализируется на адресах, может добавить карту в поиск и отобразить местоположение. Удивительно точная и сверхбыстрая библиотека повысит удобство работы пользователей с сайтом. 👉 @sWebDev

Как JavaScript-разработчику прокачивать свой профессиональный уровень? 16 июня Александр Коржиков, Dev IT Engineer в международной финансовой корпорации ING Group, расскажет о своем опыте и проведет обзор вакансий. Также вы познакомитесь с программой онлайн-курса «JavaScript Developer. Professional» и форматом обучения в OTUS. В конце встречи вы получите возможность приобрести курс по спец.цене. Ждем вас на встрече! Записи вебинара НЕ будет. Зарегистрироваться -> https://otus.pw/nJWBH/