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

Создание 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

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

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

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

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

Lighthouse at Night | HTML + CSS + ParallaxJS Анимированный маяк, выполненный на HTML, CSS и ParallaxJS. 👉 @sWebDev

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

BB8 from Starwars – with SVG & GSAP Анимированный персонаж из вселенной Звездных Войн — BB-8. Выполнено на SVG и GSAP.js. 👉 @sWebDev

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

Прием-прием, фронтендеры! Помните мы звали Вас на мероприятие TeamSnack.workshop Подведем итоги: ✅ Эксперты Cloud обсудили 17 проблем микрофронтов; ✅ Бургеры, пицца, ламповая атмосфера, крутой движ;  ✅ Мерч, стикеры, пила...;  ✅ И конечно networking. "Видели ночь, гуляли всю ночь до утра...".   Запись: TeamSnack Miro: Нажми   Хочешь не пропустить июньское мероприятие? Вступай в сообщество TeamSnack   До встречи, stay tuned🤞

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

Условное отображение элементов Angular Одной из интересных директив в Angular является *ngIf. Она используется для условного отображения элементов на основе выражения. Например, следующий код показывает кнопку "Нажми меня" только если значение переменной showButton равно true: <button *ngIf="showButton">Нажми меня</button> Если showButton равно false, кнопка будет скрыта. Это удобно при создании динамического пользовательского интерфейса, когда нужно изменять отображение элементов на основе определенных условий. 👉 @sWebDev

Magnetic hotspots w connecting lines | gsap | PIXI.js Анимированная карточка товара, выполненная на GSAP.js и Pixi.js. 👉 @sWebDev

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

ЧЕ, АЙТИШНИК, ДА? КРАСАВЧИК! Сделали для вас самую полезную подборку каналов по программированию. В ней собраны официальные русскоязычные каналы самых популярных языков. Там только топовая информация, которая потом появляется на платных курсах. Надо подписаться: @it

Тестируйте свои 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 Hot Toast React Hot Toast - это легкая и настраиваемая библиотека, которая добавляет красивые уведомления в приложение React. 👉 @sWebDev

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