Стильный слайдер для сайта

#html #css #js #slider

https://codepen.io/theseventh/pen/LYVqMYb

@javascriptv

⚛ Создание UI-компонентов React на продвинутом уровне

React — хорошая библиотека. Так давайте сделаем ее еще лучше, создавая многоразовые компоненты на высокопрофессиональном уровне.

Для использования этого руководства достаточно базовых знаний о React, TypeScript и Tailwind CSS.

В качестве примера поработаем с button, но принципы, которым будем следовать здесь, применимы к любому HTML-тегу.

const Button = ({children, className}) => {
return (
<button className={className}>{children}</button>
)
}

Приведенный выше код работает, но что, если понадобится ввести ARIA (accessible rich internet application attribute — доступные полнофункциональные интернет-приложения), ссылки или любые другие свойства обычного тега button?

Можно просто добавить больше свойств и на этом закончить.

const Button = ({children, className, ref, type}) => {
return (
<button className={className} ref={ref} type={type}>{children}</button>
)
}

Это одно из решений, но оно не эффективно. Чтобы сделать его более действенным, поработаем с TypeScript и React. Быстро создать проект с использованием React и TypeScript поможет документация Vite.

Первым шагом будет импорт необходимых типов из React и создание интерфейса для свойств кнопки (button).

📌 Продолжение

@react_tg

Искусство манипулирования массивами JavaScript: исследование метода Array.prototype.filter()

Такие методы, как Array.prototype.filter(), Array.prototype.map() и Array.prototype.reduce(), являются неотъемлемой частью парадигмы функционального программирования JavaScript. Но достаточно ли хорошо вы понимаете, как работает метод filter? Не будем вдаваться в подробности реализации, а рассмотрим только внутренний механизм этого метода. “Дьявол кроется в деталях” — попробуем копнуть поглубже и поискать этого “дьявола” в языке JavaScript.

В JavaScript массивы не являются “примитивными значениями”, а рассматриваются как “объекты”, а при слове “объект” на ум приходит другое слово — “метод”. В этой статье хочу обратить ваше внимание на неизменяющие (Non-Mutating ) и изменяющие (Mutating) методы массива. На простом языке разницу между ними я бы объяснил так: методы, которые не изменяют исходный массив, а создают или возвращают новый массив с необходимыми изменениями, называются неизменяющими, а изменяющие методы — это те, которые изменяют исходный массив.

Array.prototype.filter() — один из неизменяющих методов, возвращающий новый массив. Возвращаемый массив содержит элементы, отфильтрованные из исходного массива на основе теста, реализованного функцией обратного вызова, переданной в качестве входного аргумента методу .filter().

Сигнатура метода “filter” выглядит следующим образом:

📌Смотреть

@react_tg

Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 1

Визуализация данных — важнейший компонент процесса принятия обоснованных решений и представления информации в удобном для пользователя виде. Она позволяет преобразовывать сложные данные в четкие и осмысленные визуальные картины, благодаря чему организации могут решать различные задачи и повышать эффективность своей работы.

Для визуализации данных существует множество платформ бизнес-аналитики (BI). В качестве примера можно привести Tableau, Power BI, QlikView и Looker. Однако они могут иметь ограничения и отличаться высокой стоимостью. Альтернативным подходом к использованию BI-инструментов является применение библиотек визуализации данных, таких как Nivo, при веб-разработке фронтенда.

В этом цикле из трех частей мы рассмотрим, как создавать дэшборды, отслеживающие производительность сайта, с помощью React, Tailwind CSS, Material UI и Nivo. Если вы разработчик, желающий усовершенствовать навыки визуализации данных, владелец бизнеса, стремящийся получить представление о данных, или просто человек, интересующийся миром React и визуализации данных, рекомендуем приступить к работе после прочтения серии этих статей.

Итак, начнем!

📌 Читать

@react_tg

8 советов, которые сделают JavaScript-код чище

Прежде чем перейти к теме, выясним, что такое чистый код.

ЧИСТЫЙ КОД — это концепция в разработке программного обеспечения, подчеркивающая важность написания кода, который легко понять, поддерживать и тестировать. она включает в себя такие принципы, как читабельность, простота, избегание избыточности, осмысленное именование, единственная ответственность функций или методов, эффективная обработка ошибок, четкая коммуникация через код и тестируемость.


ЦЕЛЬ ЧИСТОГО КОДА — сделать исходный код понятным как для нынешних, так и для будущих разработчиков, что способствует сотрудничеству и облегчает постоянное сопровождение и оптимизацию программного обеспечения. принципы чистого кода наиболее подробно изложены в книге роберта к. мартина “чистый код: руководство по гибкой разработке программного обеспечения”.

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

Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым.

📌 Смотреть

Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 2

Продолжаем серию статей из 3 частей по визуализации данных с помощью React, Material UI, Tailwind CSS и Nivo.

В 1-й части мы создали каркас для веб-приложения, содержащий 3 отдельные страницы: Home, About и Insights.

В этой, 2-й части, будем использовать Tailwind CSS в качестве фреймворка для работы со стилями веб-приложения.

Предварительные условия
Если у вас еще нет каркаса веб-приложения, выполните шаги, указанные в 1-й части. Затем интегрируйте в проект Tailwind CSS.

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

Задачи данного туториала будут сведены только к разработке цветовой схемы.

📌Читать
📌Часть 1

@react_tg

🚀 useLocation - #React TS хук, который предоставляет данные о геолокации в реальном времени, а также метрики курса движения и скорости. 🗺️📍

Используйте его для получения информации о близлежащих местах или для определения местоположения пользователей поблизости.

▪Демо
▪Код

@react_tg

🌐🚀 #React hook - UseNetwork

Информация о сети в реальном времени! 📡✨

Вы можете узнать скорость передачи данных, тип соединения и статус сети прямо в вашем приложении.

Отлично подходит для адаптации контента вашего приложения в зависимости от качества соединения пользователя! 📶💻

👉 Demo: https://grayscal.es/hooks/use-network

@react_tg

⚡️ Locofy.ai — полезная утилита для конвертирования дизайна сайта в его код.

Вы можете переносить креативы из Figma/Adobe XD сразу в React, React Native, HTML-CSS, Next.js или Gatsby. Есть функция синхронизации кода с GitHub и Visual Studio.

@react_tg

🚀Попробуйте TextSelection - #React TS хук, который отслеживает выделение текста пользователем и его положение на экране!

Идеально подходит для создания интуитивно понятных функций пользовательского интерфейса, таких как всплывающая подсказка "Поделиться", подобно Medium. ✨

▪ Демо: https://grayscal.es/hooks/use-text-selection

▪Код: https://gist.github.com/KristofferEriksson/8acb9b3eb241507eb0f6232938bf4ec7

@react_tg

💫 Огромный выбор инструментов для веб-разработки.

Автор классифицировал их на 30 категорий и представил несколько десятков сервисов в каждой категории.
Таким образом, можно найти решение практически для любой задачи.

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

👀 Смотреть

@react_tg

Реализация React Query в веб-приложении

В этом уроке рассмотрим, как интегрировать React Query в базовое веб-приложение.

React Query — мощная библиотека для управления, кэширования и синхронизации состояния сервера в приложениях React. Мы создадим простое приложение, получающее данные из API с открытым исходным кодом, и используем Bootstrap для применения стилей.

Цели проекта

Создать веб-приложение для получения данных из нижеуказанного API с помощью React Query.

📌Читать

@react_tg