Настройка экземпляра компонента Vue

У вас есть компонент, который вы хотите повторно использовать. Например, для создания списка покупок, но каждый экземпляр компонента ссылается на один и тот же объект с данными. Какой вариант правильный для решения данной задачи? Если забыли, то вернитесь к посту за 05.12.

Вариант 1:

      Vue.component('some-comp', {
                data: {
                foo: 'bar'
                }
            })
            export default {
                data: {
                foo: 'bar'
                }
            }

Вариант 2:

  Vue.component('some-comp', {
                data: function() {
                  return {
                    foo: 'bar'
                  }
                }
              })
              export default {
                data() {
                  return {
                    foo: 'bar'
                  }
                }
              }

👉 @sWebDev

useContext React

Рассмотрим хук React useContext, который принимает объект контекста (значение, возвращённое из React.createContext) и возвращает текущее значение контекста. Текущее значение контекста определяется значением ближайшего <MyContext.Provider> над вызывающим компонентом в дереве. Когда ближайший <MyContext.Provider> над компонентом обновляется, этот хук вызовет повторный рендер с последним значением контекста, переданным этому провайдеру MyContext.

Запомните, аргумент для useContext должен быть непосредственно сам объект контекста:

Правильно: useContext(MyContext)
Неправильно: useContext(MyContext.Consumer)
Неправильно: useContext(MyContext.Provider)

👉 @sWebDev

Beat Burger

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

👉 @sWebDev

React vs Vue.js: что лучше для разработки мобильных и веб-приложений?

Когда дело доходит до создания мобильного или веб-приложения, то наступает время выбора нужной JavaScript библиотеки. Как правильно выбрать исходя из ваших целей и задач узнаем в статье. Рассмотрим моменты, которые стоит учитывать при выборе нужного фреймворка.

👉 @sWebDev

❔❔❔ JS-разработчик?

А насколько хорошо ты знаешь Vue.js? JS-разработчик? А насколько хорошо ты знаешь Vue.js?

✔️ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js Developer" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене!

⏰ Время прохождения теста ограничено 30 минут

🤑 Сейчас действуют новогодние скидки -23% на все курсы

✍️ПРОЙТИ ТЕСТ: https://otus.pw/1aDNC/

Remotion

Видеоредакторы не нужны. Для создания видео вы можете использовать Remotion - библиотеку, работающую в связке с React. Благодаря ей можно создавать видео в формате MP4. Полный функционал и особенности библиотеки доступны по ссылке.

👉 @sWebDev

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