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

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

Scattering hexagons Анимированная сцена с рассеиванием, выполненная на JQuery. 👉 @sWebDev

Blotter.js Blotter.js - это библиотека для создания текстовых анимаций на WebGL. Она позволяет создавать сложные и красивые текстовые анимации, используя шейдеры и эффекты, которые обрабатываются на GPU. Библиотека имеет простой API, который позволяет легко создавать и настраивать текстовые анимации, поддерживает различные типы текстовых элементов, включая 2D и 3D тексты. 👉 @sWebDev

Освоение React: методы, которые выведут ваш пользовательский интерфейс на новый уровень В статье представлены рекомендации по улучшению пользовательского интерфейса в React приложениях. От стиля к функциональности: советы и примеры кода для создания панели навигации мирового уровня. 👉 @sWebDev

🎯 Тест по Node JS от OTUS 🚀 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript 🔥 РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js Время прохождения теста ограниченно 30 минут 👉 ПРОЙТИ ТЕСТ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

GSAP FLIP image grid modal Галерея с анимацией, созданная на GSAP.js и SCSS. 👉 @sWebDev

Добавление события на элемент Vue Добавление события на элемент реализуется директивой v-on. Аргументом директивы после двоеточия передается название события. Названия событий аналогичны событиям JavaScript. В примере мы навесили обработчик click, на кнопку, которая увеличивает переменную counter на единицу.

    
        <template>
        <div class="counter">{{counter}}</div>
        <button v-on:click="increaseCounter">+1</button>
        </template>
        
        <script>
            export default {
                name: 'App',
                data() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    increaseCounter: function () {
                        return this.counter++;
                    }
                }
            }
        </script>

C версии Vue 2.4.0 доступна возможность навесить несколько событий на элемент. 👉 @sWebDev

Vue-controlled Wall-E Проект с героем мультфильма WALL-E, следящим за движением курсора. Выполнено на Vue.js. 👉 @sWebDev

Новый функционал React для оптимизации производительности? В React 18 появился функционал автоматической группировки нескольких вызовов обновления в один этап рендера. Что это за функционал? 👉 @sWebDev

The Movie Database База данных с кино, реализованная на React. 👉 @sWebDev