Out-of-Bounds

Генерация теннисных мячей по клику. Выполнено на Three.js и Cannon.js.

👉 @sWebDev

Как создавать 3D-сцены, используя React Three Fiber?

React Three Fiber позволяет создавать продвинутые 3D-сцены. В статье пошагово изучим создание анимаций: настройку сцен, создание геометрии, освещение и эффекты постобработки.

👉 @sWebDev

Tricky Loop Animation

Проект анимации загрузки, выполненный на GSAP.js.

👉 @sWebDev

Parsley

Parsley — это библиотека JavaScript, которая используется для валидации форм прямо во фронтенде. Это делает приложение более мощным, быстрым и простым в использовании.
Особенности:
интегрированный интуитивно понятный DOM API;
фокус на пользовательском опыте с динамической проверкой формы;
большое количество встроенных подтверждений.

👉 @sWebDev

Приглашаем JavaScript фронтенд и бэкенд-разработчиков прокачать навыки на вебинаре в OTUS!

🟡 22 декабря в 20:00 пройдет открытый урок «Pinia vs Vuex: Является ли Pinia хорошей заменой Vuex?» в рамках онлайн-курса «Vue.js разработчик».

На занятии мы разберем

1. Проведём сравнение между Pinia и Vuex.
2. Проанализируем настройку и сильные стороны: сообщества и производительность обоих стейт менеджеров.
3. Рассмотрим новые изменения в Vuex 5 по сравнению с Pinia 2.

Не упустите возможность протестировать курс и пообщаться с Михаилом Кузнецовым, fullstack разработчиком в международной финансовой корпорации ING.

✍️ Для регистрации на вебинар пройдите вступительный тест https://otus.pw/j6po/

Yeti 404 Sayfası

Забавное оформление 404-ошибки с использованием GSAP.js

👉 @sWebDev

Как правильно использовать useContext в React?

12.12 мы рассматривали хук useContext, который принимает объект контекста (значение, возвращённое из React.createContext) и возвращает текущее значение контекста. Как правильно его использовать? Если забыли, то вернитесь к нашему посту.

Вариант 1: useContext(MyContext.Consumer)

Вариант 2: useContext(MyContext)

Вариант 3: useContext(MyContext.Provider)

👉 @sWebDev

Сложная анимация Angular

Под сложной анимацией в Angular понимается одновременная или последовательная работа нескольких простых анимаций. Например, она позволяет сделать анимированным появление/исчезание последовательности элементов.

Реализуется подобное с помощью следующих функций:
query() - находит один и более дочерних HTML-элементов по заданному критерию в пределах элемента, к которому применяется анимация, и применяет ее к каждому из них;
stagger() - устанавливает задержку для найденных функцией query() элементов;
group() - запускает все составляющие анимации параллельно;
sequence() - запускает все составляющие последовательно.

👉 @sWebDev

React: работа с 3D-графикой

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

👉 @sWebDev

Snowing Outside Window

Проект с новогодней анимацией, выполненной на GSAP.js.

👉 @sWebDev

JS Framework qooxdoo

Фреймворк Qooxdoo подходит для создания кроссбраузерных, многофункциональных приложений. По словам разработчиков для этого не понадобится знание CSS, HTML, DOM. Фреймворк имеет объектно-ориентированную архитектуру. Работает со всеми современными браузерами.

👉 @sWebDev

Elastic Accordion GSAP

Аккордеон для изображений с эластичным эффектом на GSAP.js.

👉 @sWebDev

Лучшие практики React

В статье собраны лучшие практики по использованию React в 2022 году.

👉 @sWebDev

Flickity + GSAP carousel

Карусель товаров, выполненная на GSAP.js.

👉 @sWebDev

Nest.js

Nest.js — популярный фреймворк для создания серверных веб-приложений Node.js. Nest.js работает с основой express.js и значительно расширяет его функциональность, добавляя декларативности, а также помогая разработчику строить приложения в соответствии с лучшими архитектурными практиками.

👉 @sWebDev

Как я создал магазин на Vue.js с серверной частью на Node.js

По ссылке руководство по созданию коммерческого проекта с фронтендом на Vue.js и бэкендом на Node.js. В материале раскрыты все тонкости данного процесса.

👉 @sWebDev

Как найти несколько дочерних HTML-элементов в анимации Angular?

Представим, что у вас в проекте есть сложная Angular анимация, в которой вам необходимо найти несколько дочерних HTML-элементов. Какой встроенной функцией вы воспользуетесь? Если забыли, то вернитесь к посту за 19.12.

👉 @sWebDev

Композиция против наследования React

React имеет мощную модель композиции, поэтому для повторного использования кода между компонентами рекомендуется использовать композицию вместо наследования.

Например, некоторые компоненты не знают своих потомков заранее. Это особенно характерно для таких компонентов, как Sidebar или Dialog, которые представляют из себя как бы «коробку», в которую можно что-то положить. Для таких компонентов рекомендуется использовать специальный пропс children, который передаст дочерние элементы сразу на вывод:

        function FancyBorder(props) {
            return (
                <div className={'FancyBorder FancyBorder-' + props.color}>
                {props.children}
                </div>
            );
            }

👉 @sWebDev