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

Какие паттерны в React нужно знать JS-разработчику? ✔️Разберем основные паттерны на открытом уроке 16 мая в 20:00 мск в OTUS. Занятие пройдет в рамках онлайн-курса «React.js Developer» в OTUS. На занятии мы также применим несколько часто встречающихся паттернов на практике. Больше навыков работы с React.js вы сможете получить на курсе. Хороший разработчик всегда думает о качестве и удобстве использования кода, особенно при написании библиотек компонентов. Сообщество React разработало несколько классных паттернов, которые помогут создать идеальные компоненты с лучшей контролируемостью и расширяемостью. ✍️Для участия пройдите вступительный тест https://otus.pw/VtQo/ Курс доступен в рассрочку. Нативная интеграция. Информация о продукте www.otus.ru

Angular Material Sidebar Проект админки, выполненный на Angular. 👉 @sWebDev

Как получить доступ к реактивным данным и активным событиям Vue.js? Каким хуком воспользоваться для получения доступа к реактивным данным и активным событиям? 👉 @sWebDev

Pinball Physics Реализация известной игры, выполненная с применением библиотеки Matter.js. 👉 @sWebDev

Если вы работаете с долгоживущим проектом, то знаете эту боль, когда нужно поменять примерно всё, чтобы удовлетворить новые требования. В пятом выпуске курса «Паттерны и практики написания кода» Юра Афанасьев из Авито рассказывает, как наконец перестать переписывать старый код. Примеры с реальным кодом и советы бэкендера с 10-летним опытом — всё там, смотрите. Реклама. ООО «Авито Тех». LdtCK3YMS

Sortable.js Библиотека для создания интерактивных списков и таблиц, которые можно перетаскивать и сортировать при помощи мыши или сенсорного экрана. Sortable.js имеет широкий выбор функций и настроек, таких как возможность блокировки элементов, анимации перетаскивания и поддержку событий drag и drop. 👉 @sWebDev

Разработка одностраничного приложения с помощью Flask и Vue.js Пошаговое руководство по настройке CRUD при помощи Vue и Flask. Начнем с создания Vue-приложения и перейдем к выполнению CRUD операций. 👉 @sWebDev

React Animated BB-8 Отслеживание курсора в стиле Star Wars. Проект с анимированным BB-8, выполнено на React. 👉 @sWebDev

Микросервисы — популярный способ создания и поддержки современных веб-сервисов. Развиваетесь в веб-разработке? Узнайте, как создавать микросервисы при помощи NodeJS и GRPC 18 мая в 20:00 состоится вебинар «NodeJS + Microservices». За 1,5 часа вы узнаете, как создавать микросервисы с использованием протокола gRPC. На занятии мы разберем: — Плюсы и минусы микросервисного подхода — Как мигрировать монолит на микросервисы — Решение на базе NodeJS + протокола GRPC. В результате у вас будет база для создания своего микросервиса на NodeJS. Открытый урок бесплатный и состоится в рамках онлайн-курса «Node.js Developer» в OTUS. Продолжить обучение вы сможете уже на курсе, на него действуют разные способы оплаты. Для участия пройдите вступительный тест https://otus.pw/xFvO/ Нативная интеграция. Информация о продукте www.otus.ru

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

Новый способ передачи данных в динамически создаваемые компоненты Рассмотрим новый функционал Angular, позволяющий передавать данные в динамически создаваемые компоненты более эффективно и удобно. В статье приведен пример использования, который демонстрирует простой способ создания динамических компонентов и передачи им данных. 👉 @sWebDev

LIVE: React Gallery with Keyboard Control Проект анимированной галереи, выполненной на React. 👉 @sWebDev

React хук для изменения ширины и длины элемента use-resize-observer  —  React-хук, который позволяет измерять ширину и высоту элемента . Этот хук невероятно удобен при работе с обрезкой, редактированием, обработкой изображений и т.д. Пример:

    import React from "react";
    import ReactDOM from "react-dom";
    import useResizeObserver from "use-resize-observer";
    import "./styles.css";

    const App = () => {
    const { ref, width, height } = useResizeObserver<HTMLDivElement>();
    return (
    <div>
    <div className="instructions">Try resizing this div!</div>
    <div ref={ref} className="box">
    {width}x{height}
    </div>
    </div>
    )};

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

👉 @sWebDev

React Calculator По ссылке проект калькулятора, выполненного на React. 👉 @sWebDev

Как вернуть отложенную версию переданного значения React? В React 18 появился хук, который позволяет вернуть отложенную версию переданного значения, что это за хук? 👉 @sWebDev

Game of Life (React + Redux) Необычная игра, выполненная на React и Redux. 👉 @sWebDev

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

5 способов определить компонент в Vue 3 Vue развивается и в настоящее время существует несколько способов определения компонента. По ссылке определяем простой компонент и проводим рефакторинг всеми доступными методами. 👉 @sWebDev