Frontender Libs - обзор библиотек JS / CSS

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

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

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

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

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

Тест по JavaScript от OTUS Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе «JavaScript Developer. Professional». Сможете сдать — пройдёте на продвинутый курс по специальной цене, а также получите видео-курс по Git в подарок ПРОЙТИ ТЕСТ https://otus.pw/UmCM/

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

Стать сотрудником Яндекса быстрее и проще, чем кажется. Участвуйте в днях быстрого найма: решите тестовое, пройдите несколько секций собеседования и получите офер за несколько дней. Теперь дни быстрого найма будут проходить регулярно. Чтобы вам было удобно следить за расписанием, собрали все мероприятия на отдельной странице. Ближайшие мероприятия: • 10 декабря - Fast Track для ML-аналитиков в Маркет • 19–25 декабря — Week Offer для backend, frontend, mobile-разработчиков и аналитиков в команду Рекламы Узнать подробнее и зарегистрироваться

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

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

Предварительный рендеринг в Angular с помощью Angular Universal: стоит ли это учитывать? Мы часто говорим о рендеринге на стороне клиента и рендеринге на стороне сервера, но есть еще один вариант, называемый предварительным рендерингом. При правильном использовании предварительный рендеринг может повысить производительность вашего сайта и рейтинг SEO, особенно если вы не можете позволить себе затраты на рендеринг вашего приложения на стороне сервера. Все особенности данного процесса в статье по ссылке. 👉 @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

Что такое GRPC и как его использовать в среде Node.js? 21 декабря в 20:00 мск состоится вебинар «GRPC Микросервисы в Node.js». На открытом уроке онлайн-курса «Node.js Developer» мы рассмотрим протокол GRPC, технические характеристики и области применения. В ходе обучения мы научимся создавать простейшие GRPC клиенты и серверы на Node.js, а также микросервисы с NestJS. Это занятие будет полезно тем, кто хочет познакомиться со стандартом GRPC, сравнить этот подход с традиционным REST API и использовать его в среде Node.js. Для участия пройдите вступительный тест https://otus.pw/u7bE/

Frontend! Frontend! Frontend! Много FRONTEND’a! Зачем платить за курсы, если они есть в открытом доступе? Выучи такие языки бесплатно: >JavaScript (56 уроков) >Figma (44 видеоурока) >Web Design (57 видеоуроков) >HTML/CSS (41 курс) >UI/UX (33 урока) >Верстка (71 курс) >React (32 курса) >Другие (144 Курса) Подпишись, что бы не потерять возможность выучиться бесплатно!❤️

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

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

Infinity Curves Анимированная сцена, реализованная на SVG, PUG и Sass. 👉 @sWebDev

Хотите профессионально разрабатывать бэкенд на Node.js? Приглашаем Frontend- и Backend-разработчиков на Javascript прокачать свои навыки. ❗️6 декабря в 20:00 состоится открытый урок «NodeJS и performance. Поиск узких мест в NodeJS серверах». На занятии мы обсудим, какая может быть причина проблем с производительностью в NodeJS, как ее найти, и какие есть способы решения этой проблемы. Не упустите возможность познакомиться с форматом обучения на онлайн-курсе «Node.js Developer» и преподавателем OTUS. Регистрация https://otus.pw/n3D8/