🟢TypeScript (TS, TScript или «тайпскрипт») — это язык программирования
для веб-разработки, основанный на JavaScript. Делает код понятнее и
надежнее, добавляет статическую типизацию (переменные привязаны к конкретным типам данных),
а также может быть скомпилирован в JavaScript. TypeScript используют frontend и backend разработке.

⚙️Docs: тут

#technology #frontend #backend

🟢 useEffect vs useLayoutEffect

💡useEffect: асинхронный и не задерживает отрисовку DOM в браузере.

💡useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера.
Он выполняет свой код непосредственно перед отрисовкой в браузере.

#frontend #react

🟢DayPicker — компонент React для создания календарей и
полей для ввода дат в веб-приложениях и т.д.

⚒️Установка:

npm install react-day-picker date-fns

📚Особенности DayPicker:
— Минималистичный дизайн для легкой настройки.
— Масса возможностей для настройки и конфигурирования календаря.
— Поддерживает выбор 1 дня, нескольких дней и других временных диапазонов
— Может быть локализован на любой язык.
— Включает настраиваемые внутренние компоненты для сложных случаев использования.

💾GitHub: тут
🟡Docs: тут

#frontend #react

👁‍🗨Все темы на канале:

🔍#memes
🔍#task
🔍#frontend
🔍#backend
🔍#python
🔍#algorithms
🔍#data
🔍#github
🔍#rust
🔍#c
🔍#java
🔍#js
🔍#framework
🔍#lib
🔍#technology
🔍#article
🔍#service
🔍#computerSince
🔍#vscode
🔍#CSharp
🔍#web
🔍#Linux
🔍#cpp
🔍#job
🔍#books
🔍#go
🔍#soft
🔍#articles
🔍#devOps

🟢CSS Battle — это интерактивная платформа, где разработчики
соревнуются в решении задач на минимизацию CSS-кода,
создавая визуальные элементы с наименьшим количеством символов.

👁‍🗨Ссылочка: тут

#frontend

🟢Remotion — инструмент для создания видео с использованием React!

📚Он позволяет разработчикам использовать привычный стек технологий фронтенда, таких как JavaScript/TypeScript и JSX, для
анимации и создания медиа-контента. Вместо традиционных видеоредакторов вы пишете код, который описывает ваши сцены, а затем
генерируете видео с помощью рендеринга.

💡Основные возможности Remotion включают управление таймлайном через компоненты React, поддержку анимаций, интеграцию с библиотеками,
такими как Three.js, и возможность рендерить видео с использованием FFMPEG.

Github: тут

#web #frontend

🟢Zustand библиотека управления состоянием.

📚Zustand — это библиотека управления состоянием для JavaScript и TypeScript,
которая позволяет создавать глобальное состояние для ваших приложений с минимальными
усилиями. Она часто используется в экосистемах, таких как React, и предоставляет
простой API для создания и управления состоянием в приложении.

⚙️Особенности:
➖ Минимальный и гибкий API
➖ Реактивность
➖ Производительность
➖ Без провайдеров/контекста

⛓️Источники:
📑Doc: тут
💾GitHub: тут

#frontend #lib #js

📰Статья посвященная оптимизации React app.

📑Статья объясняет, как уменьшить количество ненужных рендеров
компонентов, используя такие методы, как мемоизация с помощью
React.memo, useMemo и useCallback. Автор также обсуждает, как
правильно управлять состоянием и оптимизировать работу с компонентами,
чтобы приложение оставалось быстрым и масштабируемым.

📚Читать: тут

#data #frontend

🟢React Bits 

📓Это библиотека с анимированными UI-компонентами,
которые можно легко интегрировать в проекты.

⚙️В коллекции более 30 компонентов, включая кнопки,
карточки, модальные окна и другие элементы интерфейса.
Каждый компонент можно настроить под свои нужды, благодаря
гибким пропсам и настройкам.

⚙️Документация на сайте подробная и понятная, с примерами
использования и возможностью взаимодействовать с компонентами
прямо в браузере.

🔗Doc: тут

#frontend #lib

🟢Ключевые паттерны проектирования React app

📚В статье приводятся примеры практического применения,
включая создание компонентов, разбиение бизнес-логики и UI,
использование пользовательских хуков для обработки данных и у
правление сложным состоянием с помощью useReducer.

📰Читать: тут

#articles #frontend

🟢Статья про "Архитектуру frontend app"

📓В этой статье автор рассказывает о разных подходов к архитектуре
frontend app: React, React Native, Angular.

🔗Читать: тут

#data #frontend

🟢Flexbox Labs — интерактивный тренажёр по CSS Flexbox!

🌐Web site: тут
💾GitHub: тут

#frontend #service

🟢HeroUI (ранее известная как NextUI) —
это современная, быстрая и красивая библиотека компонентов
пользовательского интерфейса для React, предназначенная для
создания доступных и настраиваемых веб-приложений!

📚Она построена на основе Tailwind CSS, что обеспечивает отсутствие стилей
во время выполнения и минимизацию лишних классов в вашем проекте. HeroUI
предоставляет плагин для настройки тем, позволяя изменять семантические токены
или создавать совершенно новые темы. Компоненты HeroUI полностью типизированы,
что упрощает процесс обучения и обеспечивает лучший опыт для разработчиков.
Кроме того, библиотека автоматически распознает темный режим и переключает тему
при изменении соответствующего свойства в HTML.

📑Docs: тут

#frontend #lib

✅Крутая кнопка «удаления» с анимацией для твоего проекта

⌨️Код: тут

#frontend #data

✅6000 компонентов UI.

📚Сайт с 6000 UI компонентами.
Написанные на HTML/CSS

#service #frontend

Animate.css

⚙️Это библиотека CSS-анимаций. Она предоставляет
множество готовых эффектов анимации для элементов
веб-страниц.

#frontend #lib

#data #frontend

✅Jotai библиотека для React-приложения.

📚Jotai — это библиотека для управления состоянием в React-приложениях.
Она позволяет легко управлять состоянием с минимальным количеством кода
и без необходимости в сложных концепциях. В отличие от Redux или других
более крупных решений, Jotai ориентирован на простоту и гибкость. Он использует
атомы (отсюда и название), которые представляют собой единицы состояния.
Эти атомы могут быть использованы в компонентах React и связаны друг с другом.

⚙️Особенности:
➖ Подходит для небольших и средних проектов
➖ Стиль написание "Атом"
➖ Простота
➖ Производительности

📑Doc: тут
💾Github: тут

#frontend #lib #js

✅Виды Рендеренга web

1. Client-Side Rendering (CSR)
Рендеринг на клиенте (в браузере).
• HTML загружается минимальный, затем JavaScript "оживляет" страницу.
• Примеры: React (CRA), Vue, Angular (SPA).
• Плюсы: Высокая интерактивность, быстрое переключение между страницами.
• Минусы: Долгая первая загрузка, проблемы с SEO без дополнительных костылей.

2. Server-Side Rendering (SSR)
Рендеринг на сервере, HTML генерируется там и отправляется уже готовым.
• Примеры: Next.js (React), Nuxt.js (Vue), обычные Django, Rails и т.д.
• Плюсы: Быстрый первый показ, SEO-дружелюбность.
• Минусы: Серверная нагрузка, чуть медленнее интерактивность после загрузки.

3. Static Site Generation (SSG)
Статическая генерация во время сборки (build time).
• HTML создаётся заранее и отдается как обычный файл.
• Примеры: Next.js (getStaticProps), Hugo, Gatsby.
• Плюсы: Мгновенная загрузка, минимальная нагрузка на сервер.
• Минусы: Нельзя динамически менять содержимое без ре-сборки.

4. Incremental Static Regeneration (ISR)
Гибрид SSG и SSR — статические страницы пересоздаются на сервере по запросу с интервалами.
• Примеры: Next.js (revalidate).
• Плюсы: Обновляемость без полной пересборки.
• Минусы: Сложнее в настройке и понимании.

5. Hybrid Rendering
Смешение CSR, SSR и SSG на уровне разных страниц или компонентов.
• Пример: в Next.js на одной странице используется SSR, на другой — SSG.
• Плюсы: Гибкость.
• Минусы: Повышенная сложность поддержки.

6. Edge Rendering / Middleware Rendering
Рендеринг происходит ближе к пользователю — на edge-серверах CDN.
• Примеры: Vercel Edge Functions, Cloudflare Workers.
• Плюсы: Мгновенный отклик, персонализация на лету.
• Минусы: Ограничения на окружение и ресурсы.

🌐Источник: читать

#data #web #frontend

✅UI-компонентов

📚Это огромная библиотека готовых UI-
компонентов компонентов для ваших React-проектов

🌐Doc: тут

#frontend #lib