Bubblegum on hover

Эффект наведения, сделанный на SVG, SCSS и GSAP.js.

👉 @sWebDev

Какой метод в React рендерит запасной интерфейс?

Ошибка JavaScript не должна прерывать работу вашего React приложения. Хорошей практикой будет создать предохранитель, в котором мы сможем рендерить резервный интерфейс. Какой метод для этого использовать? Если забыли, то вернитесь к нашему посту 21.11.

👉 @sWebDev

Анимированная смена состояния в Angular

Angular имеет свой собственный механизм реализации анимаций, в основе которого лежит стандарт Web Animations API.

Подробно рассмотрим функцию transition(), которая является аналогом одноименного CSS-свойства и описывает при смене с какого на какое состояние должна срабатывать анимация. Первый параметр - строка с указанием изменяемых состояний, второй - параметры и (или) стили анимации, указываемые функциями animate() или style().

Если Angular анимация должна отрабатывать для двух состояний в обе стороны (например, с on на off и с off на on), можно использовать краткую запись:

    transition('initial <=> expanded', animate('0.3s'))

👉 @sWebDev

Lerna

Lerna — это инструмент для управления монорепозиториями и проектами JavaScript, состоящими из нескольких пакетов. Монорепозиториями бывает сложно управлять, поскольку последовательные сборки и публикация отдельных пакетов занимают много времени. Узнать все подробности можно по ссылке.

👉 @sWebDev

Устранение debounce и throttle в Vue

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

👉 @sWebDev

Sencha Ext JS

Фреймворк отличается хорошей работой и позволяет оперативно создавать качественные посадочные страницы и динамические сетки для статических web-страниц.
Преимущества библиотеки:
большое количество виджетов;
упрощение работы и возможность внесения изменений;
развитое сообщество и хорошая документация;
стабильная база проверенных компонентов интерфейсов пользователей.

👉 @sWebDev

🔥Пройди хардкорный тест по JavaScript+Angular🔥

⭕️ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать — пройдёшь на продвинутый курс "Angular Developer" по специальной цене.

❌ТЕСТ СМОГЛИ ПРОЙТИ ТОЛЬКО 40% УЧАСТНИКОВ

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

✏️ПРОЙТИ ТЕСТ: https://otus.pw/pnTX/

▪️ 13 декабря в 20:00 открытый урок «Реактивное программирование в Angular».

CSS Illustration

Анимированная сцена, выполненная с использованием библиотеки GSAP.js.

👉 @sWebDev

Добавление ESlint в Angular приложение

Используя последнюю версию Angular создадим приложение. Затем добавим ESLint, который позволит анализировать JS для поиска проблем.

👉 @sWebDev

Игровой автомат на GSAP.js

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

👉 @sWebDev

Infinity Curves

Анимированная сцена, реализованная на SVG, PUG и Sass.

👉 @sWebDev

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