Greensock SVG Search Animation

Забавная анимация загрузки, выполненная на GSAP.js.

👉 @sWebDev

Рендерим элементы Vue на основе булевого значения

Vue директива v-if позволяет условно рендерить элементы на основе значения булевой переменной. Пример кода:

        <template>
        <div>
            <p v-if="showText">This text will only show if showText is true.</p>
        </div>
        </template>

        <script>
        export default {
        data() {
            return {
            showText: true
            };
        }
        }
        </script>

👉 @sWebDev

Controlled Clock

Управляемые часы, выполненные с применением библиотеки Anime.js.

👉 @sWebDev

Создание компонентов Vue 3 с помощью Tailwind CSS

Рассмотрим руководство по использованию Tailwind CSS для создания компонентов Vue 3.

👉 @sWebDev

Tone.js

Tone.js представляет собой инструмент для создания и управления звуковыми эффектами и аудиофайлами в веб-приложениях. Предоставляет мощный набор инструментов и функций для создания музыкальных произведений и звуковых эффектов в реальном времени. Tone.js имеет легкую структуру и открытый исходный код, что делает ее доступной для разработчиков всех уровней.

👉 @sWebDev

Angular — API композиции директив

Композиция директив очень похожа на паттерн Компоновщик Composite. Он входит в семейство Структурных паттернов программирования, которые отвечают за создание удобных объектов. В этой статье разберемся с API композиции директив Directive composition API в Angular.

👉 @sWebDev

ERROR

Вариант оформления страницы с ошибкой, выполненный на GSAP.js.

👉 @sWebDev

Как узнать была ли прокрутка элемента React?

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

👉 @sWebDev

Как использовать React в приложениях Angular

React в приложениях Angular может понадобится в двух случаях:
в экосистеме React есть компонент, на разработку которого, вероятно, уйдут недели, например компонент Timeline;
cотрудничество с компанией, использующей React, которой необходимо интегрировать его в существующее приложение;
В этой статье рассмотрим, как интегрировать React в обоих сценариях.

👉 @sWebDev

Rough.js

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

👉 @sWebDev

Basketball Hoop Loop

Проект с анимацией вращающегося баскетбольного мяча, выполненный на GSAP.js.

👉 @sWebDev

Состояние компонента при помощи функции-редьюсера в React

useReducer в React дает управлять состоянием компонента с помощью функции-редьюсера. Пример:

         import React, { useReducer } from 'react';
         const initialState = { count: 0 };

         function reducer(state, action) {
          switch (action.type) {
           case 'increment':
            return { count: state.count + 1 };
           case 'decrement':
            return { count: state.count - 1 };
           default:
            throw new Error();
           }
         }

         function Counter() {
           const [state, dispatch] = useReducer(reducer, initialState);
            return (
            <>
            Count: {state.count}
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
            </>
            );
            }

👉 @sWebDev

Icosahedron: Perlin Noise + Isolines + SelectiveBloom

Анимированная сфера, выполненная с применением библиотеки Three.js.

👉 @sWebDev

Решено: Не работает ввод — React

Рассмотрим проблему, когда пользователь не может вводить текст в поле ввода React. Автор статьи описывает причину и предоставляет простое решение. Если вы столкнулись с такой проблемой, то материал будет полезным для вас.

👉 @sWebDev

Umbrella JS

Umbrella JS - JavaScript библиотека для работы с DOM-элементами. Она предоставляет чистый и простой API, который можно использовать для создания, поиска и манипулирования элементами на странице. Код библиотеки легко читаем и понятен. Основным преимуществом является небольшой размер.

👉 @sWebDev

Donuts Paradise

Генератор пончиков, выполненный с применением библиотеки Three.js.

👉 @sWebDev

Менеджер задач на 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