Менеджер задач на React + Hygraph

В статье описано создание полноценного приложения по управлению задачами с помощью React и библиотеки Hygraph. Рассмотрим основы создания CRUD-приложений, реализацию базовых функций и использование Hygraph для управления состоянием приложения.

👉 @sWebDev

Sacred geometry 3D - 2

3D-анимация, выполненная с помощью Three.js.

👉 @sWebDev

Barcode Writer in Pure JavaScript

JavaScript библиотека для генерации штрих-кодов. Не требует установки сторонних программ или плагинов, работает в браузере. Библиотека поддерживает множество типов штрих-кодов, включая EAN, CODE128 и QR-коды, и позволяет настраивать многие аспекты генерируемого кода.

👉 @sWebDev

Как задать интервал функции React?

Представьте, что вам нужно отложить вызов функции в React приложении. Каким хуком это можно сделать?

👉 @sWebDev

Новые возможности Angular Router

Автор описывает новые возможности и улучшения в Angular Router. Например, переходы на несколько URL-адресов, сохранение состояний маршрутов и поддержку браузерной истории.

👉 @sWebDev

Откладываем загрузку компонента в React

React.lazy() - функционал, который позволяет отложить загрузку компонента до момента, когда он будет необходим для отображения. Например:

        import React, { lazy, Suspense } from 'react';

        const MyComponent = lazy(() => import('./MyComponent'));

        function App() {
        return (
            <div>
            <Suspense fallback={<div>Loading...</div>}>
                <MyComponent />
            </Suspense>
            </div>
        );
        }

👉 @sWebDev

Управление состоянием в Vue с Pinia ORM

Гайд по использованию Pinia ORM для управления состоянием в Vue.js. В материале достаточно примеров и объяснений, которые помогут разработчикам эффективнее управлять состоянием приложения и упростят код.

👉 @sWebDev

Анимированный фон на Pixi.js

Реализация анимированного фона с использованием библиотеки Pixi.js.

👉 @sWebDev

Immer

Библиотека предоставляет удобный способ изменения неизменяемых объектов в JavaScript. Immer предоставляет метод produce, который позволяет создавать неизменяемые копии объектов и изменять их, не нарушая принцип неизменяемости.
Например, следующий код создает неизменяемый объект и изменяет его, используя метод produce:

        import produce from 'immer';

        const state = { value: 0 };

        const newState = produce(state, (draftState) => {
        draftState.value += 1;
        });

Immer будет полезен для разработчиков, которые занимаются созданием приложений React и Redux.

👉 @sWebDev

Переходы между страницами В ReactJS с React Router V6 И встроенным View Transitions API

Узнаем, как использовать новое встроенное API переходов в React Router v6. Это поможет при создании эффектных переходов между страницами в React приложении.

👉 @sWebDev

Таймер на Vue и Gsap.js

Проект анимированного таймера, выполненного с использованием библиотек Vue и Gsap.js.

👉 @sWebDev

X5 Frontend Meetup #2 – митап по фронтенду, который состоится 12 апреля

В программе:
- «Что нам стоит блог построить?», Никита Дубко, доброжелюбный бородач из подкаста «Веб-стандарты»

- «Мобильное приложение за три дня! Самый быстрый старт!», Андрей Поляков, руководитель фронтенд-разработки в команде торговой сети «Чижик»

- «State Of A11y 2023», Лена Райан, фронтенд-разработчица в команде «Обратной связи» в X5 Tech

Онлайн и бесплатно
12 апреля в 18:00 по мск
Регистрация на мероприятие

Nano ID

Легковесная библиотека для генерации уникальных идентификаторов с использованием криптографически безопасного случайного числа. Nano ID может генерировать идентификаторы различной длины и с разными параметрами, такими как использование только символов верхнего или нижнего регистра, цифр, а также символов из пользовательского набора.

Пример использования библиотеки Nano ID для генерации случайного идентификатора длиной в 10 символов с использованием символов верхнего, нижнего регистра и цифр:

        import { nanoid } from 'nanoid';

        const id = nanoid(10);
        console.log(id);
        // "g5U5Fzv1iR"

Библиотека будет полезна для различных задач, связанных с генерацией уникальных идентификаторов. Например, для генерации ID для элементов интерфейса, идентификации пользователей, создания временных токенов и т.д.

👉 @sWebDev

Как условно рендерить элементы на основе булевого значения Vue.js?

Используя одну из директив Vue мы можем рендерить элементы на основе булевого значения. Какая это директива?

👉 @sWebDev

Использование хуков React

Материал по работе с хуками в React. Автор рассказывает о работе с хуками жизненного цикла, хуками контекста и кастомными хуками React.

👉 @sWebDev

Vanilla JS Snake

"Змейка", выполненная при помощи библиотеки Vanila.js

👉 @sWebDev

Настраиваем объект, передаваемый родительскому компоненту React

Хук useImperativeHandle в React используется для передачи определенных функций из компонента-родителя. Он позволяет родительскому компоненту вызывать методы вложенного компонента. Пример:

    import { forwardRef, useImperativeHandle } from 'react';

    const ChildComponent = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        focus: () => {
        inputRef.current.focus();
        }
    }));

    const inputRef = useRef(null);

    return (
        <input type="text" ref={inputRef} />
    );
    });

    export default ChildComponent;

Мы экспортируем дочерний компонент ChildComponent, имеющий метод focus. Мы используем хук useImperativeHandle, чтобы экспортировать этот метод через ref.

👉 @sWebDev

5 ошибок начинающих разработчиков в React

В материале перечислены распространенные ошибки начинающих разработчиков React. Авторы советуют не использовать несколько элементов в корневом компоненте, избегать условных операторов в JSX и дают другие советы, которые помогут избежать распространенных ошибок при начале работы с библиотекой.

👉 @sWebDev

PixiJS

PixiJS часто используют в качестве игрового движка, но у библиотеки более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas.

👉 @sWebDev