Urlcat

Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки. Для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, чтобы просто создать URL.

👉 @sWebDev

Несколько способов организовать удобную структуру проекта на Vue.js

При разработке крупного проекта важно уметь находить нужные куски кода, для этого необходимо правильно организовывать архитектуру веб-приложения. В статье рассмотрим несколько полезных советов и способов, которые помогут правильно структурировать приложение на Vue.js.

👉 @sWebDev

Orange Juice

Сцена с наполнением стакана, выполненная с применением библиотеки Pixi.js.

👉 @sWebDev

React Hot Toast

React Hot Toast - это легкая и настраиваемая библиотека, которая добавляет красивые уведомления в приложение React.

👉 @sWebDev

Тестируйте свои React-компоненты с помощью Nightwatch и Testing Library

Nightwatch и Testing Library — инструменты для тестирования компонентов. Библиотека Nightwatch написана на Node.js и позволяет осуществлять сквозное тестирование веб-приложений, написанных на JS. Testing Library — инструмент, созданный для тестирования React-компонентов.
В материале рассмотрим:
1. Установим новый проект React с помощью Vite, который также используется внутри Nightwatch для компонентного тестирования.
2. Установим и сконфигурируем Nightwatch и Testing Library.
3. Сымитируем API запросы с помощью плагина @nightwatch/api-testing Н
4. Напишем комплексный React-компонентный тест, используя Nightwatch и Testing Library.

👉 @sWebDev

Как влиять на ширину и длину элемента React?

Представьте, что вам нужно поправить ширину и высоту элемента в вашем React приложении. Для выполнения данной задачи можно воспользоваться встроенным хуком, каким?

👉 @sWebDev

Magnetic hotspots w connecting lines | gsap | PIXI.js

Анимированная карточка товара, выполненная на GSAP.js и Pixi.js.

👉 @sWebDev

Условное отображение элементов Angular

Одной из интересных директив в Angular является *ngIf. Она используется для условного отображения элементов на основе выражения.

Например, следующий код показывает кнопку "Нажми меня" только если значение переменной showButton равно true:
<button *ngIf="showButton">Нажми меня</button>

Если showButton равно false, кнопка будет скрыта. Это удобно при создании динамического пользовательского интерфейса, когда нужно изменять отображение элементов на основе определенных условий.

👉 @sWebDev

Рефакторинг вашего приложения Vue с помощью сценариев установки

Рассмотрим способы рефакторинга Vue-приложений с использованием скриптов настройки. Материал объясняет, как такой подход может улучшить организацию и управление приложением, сделав код более понятным и легко расширяемым.

👉 @sWebDev

KUTE.js

KUTE.js - это компактная библиотека для анимации SVG-изображений и DOM-элементов. KUTE.js имеет множество возможностей, таких как изменение размера, положения и цвета элементов, а также позволяет создавать сложные анимации с несколькими шагами.

👉 @sWebDev

BB8 from Starwars – with SVG & GSAP

Анимированный персонаж из вселенной Звездных Войн — BB-8. Выполнено на SVG и GSAP.js.

👉 @sWebDev

Как добавить уведомления в ваше приложение Angular

Добавляем уведомления внутри приложения в Angular. Автор начинает с обзора двух библиотек: Toastr и ngx-toastr, рассказывает о настройке и создании уведомлений. В материале подробный код и пошаговое руководство.

👉 @sWebDev

Lighthouse at Night | HTML + CSS + ParallaxJS

Анимированный маяк, выполненный на HTML, CSS и ParallaxJS.

👉 @sWebDev

Papa Parse

Библиотека позволяет парсить CSV-файлы в JavaScript. Простой API и поддержка разных форматов данных: строки, файлы и URL-адреса. Еще одной особенностью является гибкая настройка парсинга: разделители столбцов и строки, настройки кодировки и т.д.

👉 @sWebDev

10 распространенных ошибок при разработке Angular

Ещё один обзор распространенных ошибок при создании Angular приложений.

👉 @sWebDev

Как повысить производительность приложения React?

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

👉 @sWebDev

Раскрытие волшебства: изучение реактивности в различных средах

Никогда не задумывались о том, как работает реактивность в вашем любимом фреймворке? В статье мы подробно изучаем особенности работы и сравниваем популярные библиотеки.

👉 @sWebDev

Создание React-приложения с использованием инструмента Create React App

npx create-react-app myReactApp — это команда, которую вы можете выполнить в командной строке, чтобы создать новое React-приложение с использованием инструмента Create React App.

Create React App (CRA) — это набор средств, предоставляемых Facebook, который упрощает начало работы с разработкой React-приложений. Он настраивает основную структуру проекта и предоставляет необходимые инструменты для разработки, тестирования и сборки приложения.

Когда вы выполняете команду npx create-react-app myReactApp, инструмент Create React App загружается с использованием npx (который является частью Node.js) и создает новое React-приложение в папке myReactApp. Он создаст все необходимые файлы и настроит проект, чтобы вы могли начать разрабатывать приложение сразу после завершения команды.

👉 @sWebDev

Эффект карандашного наброска с помощью постобработки Three.js

Руководство по созданию эффекта карандашного наброска с помощью библиотеки Three.js.

👉 @sWebDev