Frontender Libs - обзор библиотек JS / CSS
8.3K subscribers
2.04K photos
735 videos
3 files
243 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Letterize.js

Letterize.js - библиотека для анимации текста. Помещает каждую из букв в отдельный блок и использует их в процессе анимации.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Folding Ticket Detail

Анимированное расписание полётов. Созданное на CSS и React.

👉 @sWebDev
Девять порочных практик React. Разбираем частые ошибки

Одно из главных преимуществ React в том, что он крайне вариативен в использовании и это при определенных подходах делает его мощным и простым в освоении. Но, излишняя гибкость также является минусом: нередко разработчики выбирают плохие практики и неверные методы работы с React. В статье разбираемся с тем, что стоит использовать в React и от каких практик стоит отказаться.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Survey.js

Survey.js — библиотека, позволяющая создавать опросы, формы, викторины и тесты разной сложности. Гибкий и простой процесс создания, можно менять дизайн и создать собственное хранилище данных. Подробный обзор доступен по ссылке.

👉 @sWebDev
5 общих советов по оптимизации React приложений

В статье рассмотрим советы, которые помогут сделать ваше приложение на React более оптимизированным.

👉 @sWebDev
Media is too big
VIEW IN TELEGRAM
Nuxt.js

Nuxt.js — это фреймворк для создания универсальных приложений на Vue.js с использованием Node.js. С помощью него можно рендерить UI на сервере и генерировать статические сайты.

👉 @sWebDev
Ecommerce приложение на NestJs

NestJS - один из фреймворков Node для создания приложений на стороне сервера. В статье рассмотрим, как создать приложение на NestJs, используя максимум возможностей библиотеки.

👉 @sWebDev
Media is too big
VIEW IN TELEGRAM
Semantic UI

Semantic UI — это фреймворк для создания переносимых интерфейсов, который поможет повторно использовать элементы UI в своих проектах.

👉 @sWebDev
Создание многократно используемых компонентов React оптимальным способом

В руководстве рассмотрим, как разделить тесно связанные компоненты в проектах на независимые, для того, чтобы хранить и использовать для компоновки когда и чего угодно, независимо от контекста.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
GraphicsJS

GraphicsJS - библиотека для работы с графикой, основанная на SVG. Позволяет генерировать анимированную графику. Подробный обзор по ссылке.

👉 @sWebDev
Media is too big
VIEW IN TELEGRAM
Space globe - Three.js

Анимация космической сферы, выполненная на CSS и Three.js.

👉 @sWebDev
Разработка Angular-приложений и построение их архитектуры

Разработчик из компании SimbirSoft делится опытом по созданию архитектуры приложений на Angular. Узнаем как разработать приложение, чтобы специалист любого уровня, зная Angular мог легко разобраться в коде и структуре приложения.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
ApexCharts

ApexCharts предоставляет интерактивные диаграммы, которые можно использовать на сайтах, работающих на JavaScript-фреймворках. Вместе с библиотекой идут интерактивные диаграммы с простым API.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Card Slider

Интерактивный слайдер, написанный на SCSS и библиотеке swiper.js

👉 @sWebDev
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Multiple.js

С помощью Multiple.js можно повысить визуальную привлекательность вашего веб-приложения. Библиотека позволяет создавать впечатляющие фоны для содержимого веб-страницы и использовать одно и то же фоновое изображение для различных элементов. Особенности:
легкая настройка элементов, фона, непрозрачности;
простой способ обновления фонового изображения;
один вызов функции может отменить изменения, сделанные multiple.js.

👉 @sWebDev
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Лого NASA

NASA Worm logo - проект анимированного лого, выполненный на CSS и GSAP.js

👉 @sWebDev
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
SVG Debit Card Animation 4

Анимированная банковская карточка. Небольшие доработки и код можно использовать в собственном проекте.

👉 @sWebDev
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
3D-эффекты на Lunchbox.js

Lunchbox.js — пользовательский рендерер для Three.js. Также сочетается и с Vue. По ссылке узнаем, как создавать собственные 3D-эффекты.

👉 @sWebDev
👍1
Media is too big
VIEW IN TELEGRAM
Spiky

Анимированный шар, выполненный на Three.js.

👉 @sWebDev
👍1
Название компонентов React

При создании компонентов хорошей практикой является их именование. Это помогает анализировать трассировку стека ошибки при использовании инструментов разработчика React.

Плохая практика:
 default () => <form>...</form>

Хорошая практика:
 default function Form() {
return <form>...</form>
}


👉 @sWebDev
👍2
Media is too big
VIEW IN TELEGRAM
Highlight.js

Highlight.js - библиотека для выделения синтаксиса. Благодаря ей можно осуществлять поиск кода между тегами pre и code.
Основными преимуществами является поддержка 197 языков, совместимость с большинством JS фреймворков, автоматическое распознавание языка.

👉 @sWebDev
👍1