Carousel with drag and wheel

Карусель с перетаскиванием и прокруткой колеса. Реализована с помощью CSS и JS

https://codepen.io/supah/pen/xxJMbbg

@react_tg

🛠Job Search Platform UI

Красивый пользовательский интерфейс платформы поиска работы. Реализован с помощью CSS и JS

https://codepen.io/TurkAysenur/pen/jOqdNbm

@react_tg

⚛ Как реализовать feature gate в React

Feature gate — это высокоуровневый инструмент, позволяющий командам настраивать доступные пользователю функции без обновления кода приложения.

• В современной разработке программного обеспечения feature gate, часто называемый feature toggle или feature flag, является важным инструментом для управления релизом новых функций. Посмотрим, как реализовать feature gate во время сборки в React-приложении.

Что такое feature gate?
Feature gate, также известный как feature toggle или feature flag, — это метод разработки программного обеспечения, позволяющий командам контролировать доступность определенных функций и возможностей в приложении без явного внесения изменений в код. Он предоставляет альтернативу поддержанию нескольких функциональных ветвей в исходном коде, поскольку разрабатываемый код или функция могут быть объединены с основной ветвью путем отключения соответствующего feature gate.

Настройка React-проекта
Для реализации feature gate в приложении будем использовать React и TypeScript с шаблоном ESLint для настройки шаблонного кода. Если у вас уже есть разработанное ранее React-приложение, шаблон можно не использовать.

Реализация feature gate
Необходимо реализовать feature gate таким образом, чтобы он позволял переключать как определенный раздел приложения, так и всю маршрутную страницу.

Конфигурация feature gate
Конфигурация feature flag представляет собой набор пар ключ-значение, которые будут доступны всему приложению, а логика построения маршрутов будет использовать заданные флаги для определения набора маршрутов, доступных пользователю. Можно представить его как объект, в котором ключи будут выступать в качестве имен флагов, а соответствующее значение может быть либо true, либо false. Таким образом, конфигурация будет выглядеть примерно так:
const featureFlags = {
featureA: true,
featureB: false,
featureC: true,
};

Но данная конфигурация должна быть настраиваемой без необходимости изменения кода, верно?

☝️Одним из способов достижения этой цели является определение файла констант featureFlag.ts, который будет считывать конфигурацию из .env— или json-файла. Мы будем использовать .env-файл для управления флагами функций, а в дальнейшей части статьи рассмотрим, как получить конфигурацию из API и сделать ее динамической в подлинном смысле этого слова.

📌 Далее

@react_tg

🚀Services Section | Learn CSS Garden - интерактивная анимация раздела услуг сайта. Реализована с помощью CSS и JS

https://codepen.io/ahmadnasr/pen/KKpvNGY

@reacttg

Refs в React: от доступа к DOM до императивного API

Одна из полезных особенностей React — абстрагирование от сложного взаимодействия с объектной моделью документа (DOM, Document Object Model). Вместо того чтобы запрашивать элементы, пытаться добавить к ним классы и устранять несоответствия браузера, можно просто писать компоненты, сосредоточившись на взаимодействии с пользователем. Однако иногда все же появляется необходимость в доступе к реальному DOM.

И здесь самое важное — разобраться в особенностях Ref и его окружения, научиться их правильно использовать. Сначала рассмотрим, зачем нужен доступ к DOM, как при этом помогает Ref, что такое useRef, forwardRef и useImperativeHandle и как их правильно использовать. Кроме того, посмотрим, как без forwardRef и useImperativeHandle получить подобные результаты.

А в качестве бонуса рассмотрим реализацию в React императивных API.

📌 Читать дальше

@react_tg

📌 Infinite scrollable and draggable (WebGL)grid - интерактивная бесконечная сетка с возможностью прокрутки, выполненная с помощью SCSS и JavaScript

https://codepen.io/ReGGae/pen/eYGyLrP

@react_tg

⚡Легкий способ получать свежие обновлении и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь:


Машинное обучение: @ai_machinelearning_big_data
Go: @Golang_google
C#: @csharp_ci
Базы данных: @sqlhub
Python: @pythonl
C/C++/: @cpluspluc
Data Science: @data_analysis_ml
Devops: @devOPSitsec
Rust: @rust_code
Javascript: @javascriptv
React: @react_tg
PHP: @phpshka
Docker: @docker
Android: @android_its
Мобильная разработка: @mobdevelop
Linux: linuxacademy
Big Data: t.iss.one/bigdatai
Хакинг: @linuxkalii
Java:@javatg
Собеседования: @machinelearning_interview


💼 Папка с вакансиями: t.iss.one/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.iss.one/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.iss.one/addlist/eEPya-HF6mkxMGIy

🔥ИТ-Мемы: t.iss.one/memes_prog

🇬🇧Английский: @english_forprogrammers

📕Ит-книги https://t.iss.one/addlist/BkskQciUW_FhNjEy

🔥 Дайджест полезных материалов из мира : React за неделю

Почитать:
— Под капотом анимаций в React Native. Часть 2/2: Reanimated and JSI
— Подборка VS Code-плагинов для Frontend-разработчиков и не только
— Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса
— Считаем «a=1; b=2; x=pi/3; abcos(x)»
— JavaScript повсюду или почему веб-технологии захватили мир
— DOM, DI и View: деревья в Angular
— Как уменьшали размер VS Code, используя name mangling — сокращение идентификаторов во время сборки
— Как показать миллион зданий на карте — и не сломать браузер
— Одно PWA, чтоб править всеми
— Как запретить разработчику делать не то что нужно?
— SysCorp Technology PVT LTD
— What is PWA - Progressive Web App?
— The Future of Module Federation
— I want your opinion!
— React Custom Hooks: useDebounce
— Rspack 0.3 Release Announcement
— Announcing Rspack 0.2
— Full Stack Web Application
— Optimizing Performance in React: Best Practices for Speedy Apps
— React Custom Hook: useRenderCount

Посмотреть:
🌐 NEW Way To Create Variables In JavaScript (⏱ 12:13)
🌐 Help Me Teach You TypeScript (⏱ 00:45)

Хорошего дня!

@react_tg