This media is not supported in your browser
VIEW IN TELEGRAM
🛠Job Search Platform UI
Красивый пользовательский интерфейс платформы поиска работы. Реализован с помощью CSS и JS
https://codepen.io/TurkAysenur/pen/jOqdNbm
@react_tg
Красивый пользовательский интерфейс платформы поиска работы. Реализован с помощью CSS и JS
https://codepen.io/TurkAysenur/pen/jOqdNbm
@react_tg
👍9❤3
⚛ Как реализовать 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. Таким образом, конфигурация будет выглядеть примерно так:
Но данная конфигурация должна быть настраиваемой без необходимости изменения кода, верно?
☝️Одним из способов достижения этой цели является определение файла констант featureFlag.ts, который будет считывать конфигурацию из .env— или json-файла. Мы будем использовать .env-файл для управления флагами функций, а в дальнейшей части статьи рассмотрим, как получить конфигурацию из API и сделать ее динамической в подлинном смысле этого слова.
📌 Далее
@react_tg
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
👍9❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🚀Services Section | Learn CSS Garden - интерактивная анимация раздела услуг сайта. Реализована с помощью CSS и JS
https://codepen.io/ahmadnasr/pen/KKpvNGY
@reacttg
https://codepen.io/ahmadnasr/pen/KKpvNGY
@reacttg
👍13🔥2❤1
Refs в React: от доступа к DOM до императивного API
Одна из полезных особенностей React — абстрагирование от сложного взаимодействия с объектной моделью документа (DOM, Document Object Model). Вместо того чтобы запрашивать элементы, пытаться добавить к ним классы и устранять несоответствия браузера, можно просто писать компоненты, сосредоточившись на взаимодействии с пользователем. Однако иногда все же появляется необходимость в доступе к реальному DOM.
И здесь самое важное — разобраться в особенностях Ref и его окружения, научиться их правильно использовать. Сначала рассмотрим, зачем нужен доступ к DOM, как при этом помогает Ref, что такое useRef, forwardRef и useImperativeHandle и как их правильно использовать. Кроме того, посмотрим, как без forwardRef и useImperativeHandle получить подобные результаты.
А в качестве бонуса рассмотрим реализацию в React императивных API.
📌 Читать дальше
@react_tg
Одна из полезных особенностей React — абстрагирование от сложного взаимодействия с объектной моделью документа (DOM, Document Object Model). Вместо того чтобы запрашивать элементы, пытаться добавить к ним классы и устранять несоответствия браузера, можно просто писать компоненты, сосредоточившись на взаимодействии с пользователем. Однако иногда все же появляется необходимость в доступе к реальному DOM.
И здесь самое важное — разобраться в особенностях Ref и его окружения, научиться их правильно использовать. Сначала рассмотрим, зачем нужен доступ к DOM, как при этом помогает Ref, что такое useRef, forwardRef и useImperativeHandle и как их правильно использовать. Кроме того, посмотрим, как без forwardRef и useImperativeHandle получить подобные результаты.
А в качестве бонуса рассмотрим реализацию в React императивных API.
📌 Читать дальше
@react_tg
❤9👍5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
📌 Infinite scrollable and draggable (WebGL)grid - интерактивная бесконечная сетка с возможностью прокрутки, выполненная с помощью SCSS и JavaScript
https://codepen.io/ReGGae/pen/eYGyLrP
@react_tg
https://codepen.io/ReGGae/pen/eYGyLrP
@react_tg
👍12❤7🔥1
RxDB — это реактивная автономная база данных ,разработанная специально для JavaScript-приложений. Библиотека предоставляет комплексный API для выполнения действий с базой данных и синхронизации данных между клиентами и серверами.
Основная философия RxDB строится на наблюдаемости (observability), что позволяет разработчикам оперативно управлять изменениями данных и создавать динамический UI.
📌 Читать
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤1🔥1
⚡Легкий способ получать свежие обновлении и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь:
Машинное обучение: @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: www.tg-me.com/bigdatai
Хакинг: @linuxkalii
Java:@javatg
Собеседования: @machinelearning_interview
💼 Папка с вакансиями: www.tg-me.com/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: www.tg-me.com/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: www.tg-me.com/addlist/eEPya-HF6mkxMGIy
🔥ИТ-Мемы: www.tg-me.com/memes_prog
🇬🇧Английский: @english_forprogrammers
📕Ит-книги https://www.tg-me.com/addlist/BkskQciUW_FhNjEy
Машинное обучение: @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: www.tg-me.com/bigdatai
Хакинг: @linuxkalii
Java:@javatg
Собеседования: @machinelearning_interview
💼 Папка с вакансиями: www.tg-me.com/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: www.tg-me.com/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: www.tg-me.com/addlist/eEPya-HF6mkxMGIy
🔥ИТ-Мемы: www.tg-me.com/memes_prog
🇬🇧Английский: @english_forprogrammers
📕Ит-книги https://www.tg-me.com/addlist/BkskQciUW_FhNjEy
🔥4👍1😱1
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25❤3🔥2💯1
🔥 Дайджест полезных материалов из мира : 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
Почитать:
— Под капотом анимаций в 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
👍12🔥3❤1
▪Используйте JSX-подобный синтаксис в простом JavaScript (транспилятор не требуется)
▪Пишите код с помощью React/Preact прямо в браузере, а затем компилируйте htm для продакшена
▪Он использует стандартные JavaScript tagged templates и работает во всех современных браузерах
🚀 GitHub
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2👎2🔥2
В сфере фронтенд-разработки встречаются сложные термины и парадигмы. “Безголовый пользовательский интерфейс” (“headless UI”) или “безголовые компоненты” (“headless components”) вполне можно отнести к этой категории. Не одни вы ломаете голову, пытаясь понять, что они означают. На самом деле, несмотря на названия, эти понятия представляют собой впечатляющие стратегии, способные значительно упростить управление сложными пользовательскими интерфейсами.
Безголовые компоненты обладают внушительным потенциалом: гибкостью, возможностью многократного использования и способностью улучшить организацию и чистоту кодовой базы. Эта статья поможет разобраться в том, что представляет собой данный паттерн, чем полезен и как может изменить ваш подход к проектированию интерфейсов.
Для наглядности начнем с рассмотрения простого, но эффективного применения безголовых компонентов: извлечения хука “useToggle” из двух похожих компонентов для уменьшения дублирования кода.
Хотя этот пример может показаться тривиальным, он облегчает понимание основных принципов работы безголовых компонентов. Выявление общих закономерностей и выделение их в многократно используемые части позволит упорядочить кодовую базу и проложить путь к более эффективному процессу разработки.
Но это только вершина айсберга! По мере углубления мы столкнемся с более сложным примером применения этого принципа: использованием Downshift — мощной библиотеки для создания продвинутых компонентов ввода.
Надеюсь, что к концу статьи у вас будет не только понимание безголовых компонентов, но и уверенность в том, что вы сможете интегрировать этот мощный паттерн в свои проекты. Итак, избавимся от путаницы в голове, чтобы воспользоваться преобразующим потенциалом безголовых компонентов.
Компоненты Toggle (тумблеры) являются неотъемлемой частью многочисленных приложений. Они являются “молчаливыми исполнителями” таких функций, как “запомнить меня на этом устройстве” (“remember me on this device”), “активировать уведомления” (“activate notifications”), а также популярного “темного режима” (“dark mode”).
Компонент ToggleButton
Создать такой тумблер в React легко. Рассмотрим его.
c
onst ToggleButton = () => {
const [isToggled, setIsToggled] = useState(false);
const toggle = useCallback(() => {
setIsToggled((prevState) => !prevState);
}, []);
return (
<div className="toggleContainer">
<p>Do not disturb</p>
<button onClick={toggle} className={isToggled ? "on" : "off"}>
{isToggled ? "ON" : "OFF"}
</button>
</div>
);
};▪Читать дальше
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19❤4🔥1
Бесплатные сертификационные курсы для изучения веб-разработки
▪️ Web Development Courses and Tutorials (Udemy)
https://udemy.com/topic/web-development/free
▪️ Web Development Courses (Coursera)
https://coursera.org/courses?query=web%20development
▪️ Web Development Programs (Udacity)
https://udacity.com/courses/all?field=school-of-programming&price=Free
▪️ Web Development Tutorials (freeCodeCamp)
https://freecodecamp.org
▪️ Become a Web Developer (CodeAcademy)
https://codecademy.com/learn/paths/web-development
▪️ Web Development Training (LinkedIn Learning)
https://linkedin.com/learning/topics/web-development
▪️ Front End Web Development Courses (Udemy)
https://udemy.com/topic/front-end-web-development/free
▪️ Web Development Courses by Khan Academy
https://khanacademy.org/computing/computer-programming
▪️ Complete Free Web Development Course (YouTube)
https://youtube.com/embed/U-JhRjRaD4A
▪️ Web Development Courses (edX)
https://edx.org/learn/web-development
@react_tg
▪️ Web Development Courses and Tutorials (Udemy)
https://udemy.com/topic/web-development/free
▪️ Web Development Courses (Coursera)
https://coursera.org/courses?query=web%20development
▪️ Web Development Programs (Udacity)
https://udacity.com/courses/all?field=school-of-programming&price=Free
▪️ Web Development Tutorials (freeCodeCamp)
https://freecodecamp.org
▪️ Become a Web Developer (CodeAcademy)
https://codecademy.com/learn/paths/web-development
▪️ Web Development Training (LinkedIn Learning)
https://linkedin.com/learning/topics/web-development
▪️ Front End Web Development Courses (Udemy)
https://udemy.com/topic/front-end-web-development/free
▪️ Web Development Courses by Khan Academy
https://khanacademy.org/computing/computer-programming
▪️ Complete Free Web Development Course (YouTube)
https://youtube.com/embed/U-JhRjRaD4A
▪️ Web Development Courses (edX)
https://edx.org/learn/web-development
@react_tg
❤9👍3🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Share Widget — крутой виджет "Поделиться", внутри которого расположены ссылки на соцсети. Реализован с помощью JavaScript.
https://codepen.io/quinlo/pen/NWdMGmq
@react_tg
https://codepen.io/quinlo/pen/NWdMGmq
@react_tg
👍8👎3🔥3❤2🤡1
🔥 Дайджест полезных материалов из мира : React за неделю
Почитать:
— react-query vs SWR и избавимся ли мы от Redux?
— Абстрактные типы данных. Изложение для начинающих
— Генерируем простой web интерфейс для просмотра таблиц PostgreSQL
— Паттерны реактивности в современном JavaScript
— Ликбез по распространенным Client-Side уязвимостям
— Подробная настройка Content Security Policy (CSP)
— RxJS: как операторы высшего порядка упрощают код
— Задачи про PEG-парсеры
— Просто о Deep #1
— Добавление server side Open Graph и прочего SEO в существующую SPA
— JU Query: Web App for community based learning (Project)
— React interactive Components | Tabs
— React Content Rendering
— How to start building a Next.js project
— Sync Files to Public Folder in Next.js using Chokidar
— Deep dive into understanding Props in React
— 👹🔥 How to Escape JS Framework Hell (Including React) 🔥👹
— Crie um modelo de interface Login / Sign Up (UI) em React utilizando Bootstrap 5
— 🚀 Mastering Advanced Complex React useContext with useReducer ⭐ (Redux Style) ⭐
— Talks from SeattleJS Conf 2023 (free)
Посмотреть:
🌐 CSS Anchor Is The Best New CSS Feature Since Flexbox (⏱ 15:39)
🌐 New useFormStatus React Hook (⏱ 01:00)
Хорошего дня!
@react_tg
Почитать:
— react-query vs SWR и избавимся ли мы от Redux?
— Абстрактные типы данных. Изложение для начинающих
— Генерируем простой web интерфейс для просмотра таблиц PostgreSQL
— Паттерны реактивности в современном JavaScript
— Ликбез по распространенным Client-Side уязвимостям
— Подробная настройка Content Security Policy (CSP)
— RxJS: как операторы высшего порядка упрощают код
— Задачи про PEG-парсеры
— Просто о Deep #1
— Добавление server side Open Graph и прочего SEO в существующую SPA
— JU Query: Web App for community based learning (Project)
— React interactive Components | Tabs
— React Content Rendering
— How to start building a Next.js project
— Sync Files to Public Folder in Next.js using Chokidar
— Deep dive into understanding Props in React
— 👹🔥 How to Escape JS Framework Hell (Including React) 🔥👹
— Crie um modelo de interface Login / Sign Up (UI) em React utilizando Bootstrap 5
— 🚀 Mastering Advanced Complex React useContext with useReducer ⭐ (Redux Style) ⭐
— Talks from SeattleJS Conf 2023 (free)
Посмотреть:
🌐 CSS Anchor Is The Best New CSS Feature Since Flexbox (⏱ 15:39)
🌐 New useFormStatus React Hook (⏱ 01:00)
Хорошего дня!
@react_tg
👍12🔥6❤3🥰1
Замыкания — пожалуй, одна из самых пугающих концепций JavaScript. Даже всезнающий ChatGPT скажет вам это. Во всяком случае, это одна из самых скрытых особенностей языка. Вы используете замыкания, когда пишите какой-либо React-код, чаще всего даже не осознавая этого. Но в конечном итоге от этой фичи никуда не деться: чтобы разрабатывать сложные и производительные React-приложения, придется овладеть ею.
Попробуем проникнуть в очередную тайну JavaScript-кода, чтобы выяснить:
Предупреждение: если вы никогда не сталкивались с замыканиями в React, эта статья может взорвать ваш мозг. Рекомендую запастись достаточным количеством шоколада, чтобы стимулировать клетки мозга во время чтения.
Представьте, что вы реализуете форму с несколькими полями ввода. Одно из полей представляет собой очень тяжелый компонент из какой-то внешней библиотеки. У вас нет доступа к его внутренним элементам, поэтому вы не можете устранить проблемы с его производительностью. Но этот компонент очень нужен в форме, поэтому вы решили обернуть его в React.memo, чтобы минимизировать повторные рендеринги при изменении состояния формы. Как-то так:
const HeavyComponentMemo = React.memo(HeavyComponent);
const Form = () => {
const [value, setValue] = useState();
return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo />
</>
);
};Пока все хорошо. Тяжелый компонент принимает только одно строковое свойство, например title, и коллбэк onClick. Это происходит при нажатии кнопки “done” (“готово”) внутри компонента. Отправить данные формы также довольно просто: достаточно передать title и onClick.
const HeavyComponentMemo = React.memo(HeavyComponent);
const Form = () => {
const [value, setValue] = useState();
const onClick = () => {
// сюда передаем данные формы
console.log(value);
};
return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="Welcome to the form"
onClick={onClick}
/>
</>
);
};А вот теперь перед вами встает дилемма. Как известно, каждое свойство компонента, обернутое в React.memo, должно быть либо примитивным значением, либо постоянным между повторными рендерами. В противном случае мемоизация не сработает. Поэтому технически нужно обернуть onClick в useCallback:
const onClick = useCallback(() => {
// здесь передаем данные
}, []);Но, как известно, хук useCallback должен иметь все зависимости, объявленные в его массиве зависимостей. Поэтому, чтобы отправить данные формы в компонент, нужно объявить эти данные как зависимость:
🚀Смотреть
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤4🔥3