Frontender Libs - обзор библиотек JS / CSS
8.29K 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
Back2School

Проект забавной анимации школьника, выполненной на Anime.js.

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

Anime.js - это библиотека для создания анимаций, работает с CSS, SVG, атрибутами DOM и объектами JavaScript.

👉 @sWebDev
👍6
Гибкая ORM для Node.js – Sequelize

При создании очередного проекта, появляется желание упростить себе жизнь и лишний раз не писать SQL-запросы. В таком случае было бы неплохо познакомиться с технологией ORM.

👉 @sWebDev
👎5👍3
Media is too big
VIEW IN TELEGRAM
Algolia Places

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

👉 @sWebDev
👍6👎1
Media is too big
VIEW IN TELEGRAM
Art Gallery

Проект анимированной галереи, выполненный на CSS и Three.js.

👉 @sWebDev
👍4🤔1
Tremor

Tremor - Библиотека React для быстрого создания дашборд-панелей на вашем сайте.

👉 @sWebDev
👍8
Можно ли использовать в Angular private переменные в шаблоне?

Представим, что в своем Angular шаблоне вы использовали private переменную.
Например, в таком формате:
  selector: 'private-error',
template: ` <div>{{ message }}</div> `,
})
export class PrivateErrorComponent {
private message: string = 'Variable should be public'
constructor() {}
}

Повлечет ли это какие-то проблемы в приложении? Не уверены? Можно подсмотреть в наш пост за 24.10.

👉 @sWebDev
👍5
Можем ли использовать private переменные в этом случае?
Anonymous Quiz
33%
Да
48%
Нет
19%
Допустимы оба варианта
🔥4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
AOS – Animate On Scroll

Отличный вариант библиотеки для одностраничного сайта. Animate on Scroll добавит приятную анимацию при прокручивании страницы. Библиотека поможет создать привлекательный дизайн со множеством элементов: эффекты затухания, размещение статических привязок и многое другое.

👉 @sWebDev
👍7👎2
Возвращаем значение с состоянием в React

Хук useState возвращает значение с состоянием и функцию для его обновления.

const [state, setState] = useState(initialState)

Во время первоначального рендеринга возвращаемое состояние (state) совпадает со значением, переданным в качестве первого аргумента (initialState). Функция setState используется для обновления состояния. Она принимает новое значение состояния и ставит в очередь повторный рендер компонента.

setState(newState)

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

👉 @sWebDev
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированная сфера на Anime.js

Проект анимированной сферы, выполненный с применением библиотеки Anime.js. Кстати, подобная сфера используется на сайте данной библиотеки.

👉 @sWebDev
👍8
Glimmer

Библиотека, которая помогает при работе с компонентами пользовательского интерфейса и отрисовкой DOM. Построена на базе Ember CLI и использует Git, Node.js, npm и Yarn. Если требуется инструмент для создания компонентов и оптимизации их работы, то присмотритесь к Glimmer.

👉 @sWebDev
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Silkscreen Squiggles

Анимация появляющихся элементов, выполненная на CSS, SVG и GSAP.js.

👉 @sWebDev
👍41
Будущее рендеринга React

Статья с наглядными примерами и пояснением к существующим и грядущим паттернам рендеринга React.

👉 @sWebDev
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Карточка товара на Three.js

Анимированная карточка товара, выполненная с применением библиотеки Three.js.

👉 @sWebDev
👍91
Media is too big
VIEW IN TELEGRAM
Granim.js

Хотите украсить фон сайта красочным градиентом? Воспользуйтесь Granim.js. Эта небольшая библиотека JavaScript идеально подходит для добавления плавных и интерактивных градиентов.

👉 @sWebDev
👍51
Адаптивный фавикон для современных веб-приложений на React

Вы, вероятно, стараетесь использовать возможности современных браузеров по максимуму, чтобы обеспечить оптимальный уровень пользовательского опыта. Поэтому необходимо заменять традиционные фавиконы адаптивными иконками, интересными современным пользователям. Поговорим о том, как разработать и использовать в React-проекте адаптивные SVG-фавиконы, а также об их преимуществах.

👉 @sWebDev
👍72
Как вернуть значение с состоянием в React?

React имеет функционал хуков, которые могут быть полезны в некоторых ситуациях. Например, в нём существует хук, который возвращает состояние и функцию для его обновления. Какой это хук? Если не уверены, то вернитесь к нашему посту за 31.10.

👉 @sWebDev
👍5
Какой хук нужно использовать для возврата состояния и функции для его обновления?
Anonymous Quiz
19%
useEffect
8%
useContext
73%
useState
👍3
Media is too big
VIEW IN TELEGRAM
Fox in the wind

3D модель лисицы, выполненная на SCSS и Three.js.

👉 @sWebDev
👍81