React Hooks

В материале по ссылке подробно и просто познакомимся с функционалом React Hooks и напишем кастомные.

👉 @sWebDev

Как показывать анимацию при смене состояния в Angular?

В Angular есть функция, которая описывает с какого и на какое состояние должна возникать анимация. Что это за функция? Если забыли, то вернитесь к нашему посту за 28.11.

👉 @sWebDev

Данные компонента Vue

При использовании свойства data в компоненте (везде, за исключением new Vue), значением всегда должна быть функция, возвращающая объект.
Можно повторно пользоваться компонентом. Но, нужно помнить, что каждый экземпляр компонента ссылается на один и тот же объект данных. Нужно чтобы экземпляр компонента управлял только своими данными. Для этого каждый экземпляр должен создать уникальный объект данных.
В коде это выглядит так:

    Vue.component('some-comp', {
      data: function() {
        return {
          foo: 'bar'
        }
      }
    })
    // В .vue-файле
        export default {
      data() {
        return {
          foo: 'bar'
        }
      }
    }
    // Допускается использовать объект напрямую
    // в корневом экземпляре Vue, поскольку только
    // один экземпляр будет существовать.
    new Vue({
      data: {
        foo: 'bar'
      }
    })

👉 @sWebDev

Предварительный рендеринг в Angular с помощью Angular Universal: стоит ли это учитывать?

Мы часто говорим о рендеринге на стороне клиента и рендеринге на стороне сервера, но есть еще один вариант, называемый предварительным рендерингом. При правильном использовании предварительный рендеринг может повысить производительность вашего сайта и рейтинг SEO, особенно если вы не можете позволить себе затраты на рендеринг вашего приложения на стороне сервера. Все особенности данного процесса в статье по ссылке.

👉 @sWebDev

Face Button

Анимированная эмодзи-кнопка, выполненная с использованием Gsap.js.

👉 @sWebDev

AG Grid

AG Grid одна из лучших библиотек JavaScript для создания таблиц с данными. Особенности: производительность, отсутствие зависимости от сторонних библиотек и плавную интеграцию со всеми основными средами JavaScript, такими как Angular, React и VueJS. Полный обзор в репозитории по ссылке.

👉 @sWebDev

Оптимизация Vue приложения

Приоритет производительности при создании веб-приложений улучшает взаимодействие с пользователем и помогает обеспечить их использование большим количеством людей. В статье Мишель Баркер — старший frontend разработчик в Ada Mode поделиться некоторыми советами по оптимизации внешнего интерфейса веб-приложений на Vue.

👉 @sWebDev

Pig Minecraft

Проект одного из NPC из вселенной Minecraft.

👉 @sWebDev

Handsontable

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

👉 @sWebDev

React приложение и DALL-E API

DALL-E - это нейросеть, которая генерирует изображения по описанию. В статье подробное руководство по созданию собственного приложения React с использованием DALL-E API.

👉 @sWebDev

RamBear

Анимированный проект, напоминающий "Рэмбо", выполненный на GSAP.js.

👉 @sWebDev

Настройка экземпляра компонента 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