AOS – Animate On Scroll

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

👉 @sWebDev

Возвращаем значение с состоянием в React

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

const [state, setState] = useState(initialState)

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

setState(newState)

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

👉 @sWebDev

Анимированная сфера на Anime.js

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

👉 @sWebDev

Glimmer

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

👉 @sWebDev

Silkscreen Squiggles

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

👉 @sWebDev

Будущее рендеринга React

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

👉 @sWebDev

Карточка товара на Three.js

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

👉 @sWebDev

Granim.js

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

👉 @sWebDev

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

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

👉 @sWebDev

Как вернуть значение с состоянием в React?

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

👉 @sWebDev

Fox in the wind

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

👉 @sWebDev

Создание экземпляра приложения Vue.js

Создание любого приложения Vue начинается с создания нового экземпляра приложения с помощью createApp :

   const app = Vue.createApp({
     /* опции */
   })

Экземпляр приложения используется для регистрации «глобальных» вещей, которые будут затем использоваться компонентами внутри этого приложения.

👉 @sWebDev

Editor.js

Editor.js - библиотека, которая может прийти на помощь, если в проекте часто возникает необходимость в текстовом редакторе. Её можно использовать в проектах, написанных на чистом JavaScript, и в проектах, основанных на каких-либо фреймворках, вроде React.

👉 @sWebDev

Методы выборки данных с помощью React

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

👉 @sWebDev

Остался в РФ и думаешь о своем будущем? Посмотри на IT! Это отличный шанс для всех, ведь в 2022 году на рынке освободилось место для новых специалистов после оттока айтишников из страны.

Поступай в Kata Academy на Frontend-разработчика и плати за обучение только после гарантированного трудоустройства с зарплатой от 80 000₽.

Тебя ждут 9 месяцев интенсивного обучения: ты изучишь только нужный стек технологий и будешь полностью подготовлен к выходу на работу в Москве или Санкт-Петербурге, куда тебе предстоит переехать после выпуска по условиям договора со школой.

По окончании обучения школа продолжит поддерживать тебя и участвовать в развитии твоей карьеры в течение 2-х лет после выпуска.

Поступай в Kata Academy, чтобы стать Frontend-разработчиком уже в июле!

Push.js

Библиотека для удобной работы с push-уведомлениями. Push.js имеет хорошую документацию,а установка в проект занимает не более 10 минут. Познакомиться со всеми особенностями библиотеки можно по ссылке.

👉 @sWebDev

DgrmJS

DgrmJS - это редактор диаграмм, с прицелом на трансформацию в карту знаний.
Отличительные особенности:
простота и аскетичность,
работает на телефонах,
открытый исходный код.

👉 @sWebDev

WebGL - Morphing Ball

Проект анимированной сцены, реализованный на SCSS и Three.js.

👉 @sWebDev

Jest

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

👉 @sWebDev

Vaporwave Sketchbook

Vaporwave Sketchbook - это генератор фигур, выполненный на CSS, SVG и GSAP.js.

👉 @sWebDev