ApexCharts

ApexCharts предоставляет интерактивные диаграммы, которые можно использовать на сайтах, работающих на JavaScript-фреймворках. Вместе с библиотекой идут интерактивные диаграммы с простым API.

👉 @sWebDev

Card Slider

Интерактивный слайдер, написанный на SCSS и библиотеке swiper.js

👉 @sWebDev

Multiple.js

С помощью Multiple.js можно повысить визуальную привлекательность вашего веб-приложения. Библиотека позволяет создавать впечатляющие фоны для содержимого веб-страницы и использовать одно и то же фоновое изображение для различных элементов. Особенности:
легкая настройка элементов, фона, непрозрачности;
простой способ обновления фонового изображения;
один вызов функции может отменить изменения, сделанные multiple.js.

👉 @sWebDev

Лого NASA

NASA Worm logo - проект анимированного лого, выполненный на CSS и GSAP.js

👉 @sWebDev

SVG Debit Card Animation 4

Анимированная банковская карточка. Небольшие доработки и код можно использовать в собственном проекте.

👉 @sWebDev

3D-эффекты на Lunchbox.js

Lunchbox.js — пользовательский рендерер для Three.js. Также сочетается и с Vue. По ссылке узнаем, как создавать собственные 3D-эффекты.

👉 @sWebDev

Spiky

Анимированный шар, выполненный на Three.js.

👉 @sWebDev

Название компонентов React

При создании компонентов хорошей практикой является их именование. Это помогает анализировать трассировку стека ошибки при использовании инструментов разработчика React.

Плохая практика:

 default () => <form>...</form>

Хорошая практика:

 default function Form() {
  return <form>...</form>
}

👉 @sWebDev

Highlight.js

Highlight.js - библиотека для выделения синтаксиса. Благодаря ей можно осуществлять поиск кода между тегами pre и code.
Основными преимуществами является поддержка 197 языков, совместимость с большинством JS фреймворков, автоматическое распознавание языка.

👉 @sWebDev

QR-коды на Next.js

QR-кодов в нашей жизни становится с каждым днём все больше. В статье узнаем, как используя библиотеку Next.js добавить QR-код в собственное веб-приложение.

👉 @sWebDev

Another Datepicker

Анимированный выбор даты, созданный на библиотеке GSAP. Код проекта по ссылке.

👉 @sWebDev

Пет-проект на React. Как мы «озвучивали» интернет

Сталкивались ли вы с отсутствием подкастов на нужную тему одновременно с большим количеством текстовой информации по этому вопросу? Думаю, многие да. Не исключением является и герой статьи - Антон Малыгин, который решил создать собственный проект по озвучке интернета на React. Все подробности доступны по ссылке.

👉 @sWebDev

ReSvelte

ReSvelte - инструмент разработчика Svelte и визуализатор дерева компонентов. По мере того, как разработчики создают приложения на Svelte, дерево компонентов становится все более объемным. Ненужный повторный рендеринг компонентов и некорректное размещение компонентов в дереве — проблемы, преследующие многих разработчиков. Рассмотрим, как благодаря ReSvelte их решить.

👉 @sWebDev

Давать имена компонентам React или нет?

Нужно создать компонент в React. Но, как правильно это сделать?

Вариант 1:

 default function Form() {
  return <form>...</form>
}

Вариант 2:

 default () => <form>...</form>

Если сомневаетесь, то подсказка в посте за 03.10.

👉 @sWebDev

Quiz App with React + GSAP

CSS викторина, созданная на библиотеке React и Gsap. Ознакомиться с кодом можно по ссылке.

👉 @sWebDev

Тестирование компонентов React

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

👉 @sWebDev

Hole

Анимация обрушающегося пола, выполненная на Three.js.

👉 @sWebDev

Создание директив Angular

Довольно часто при разработке Angular приложения приходится создавать пользовательские директивы (Angular custom directive). Создание самой простой директивы атрибута ограничивается классом, обернутым декоратором @Directive() с заданием необходимой конфигурации. Выглядит так:

  selector: '[zoom]',
})
export class ZoomDirective {}

Квадратные скобки являются указателем того, что это именно директива атрибут. Созданная в примере Angular директива уже может использоваться, но на данный момент она ничего не делает.

👉 @sWebDev

Анимированное сердце на React

Проект анимированной кнопки в форме сердца, выполненный на React.

👉 @sWebDev