Persisting React State in localStorage

In this tutorial, Josh Comeau walks though how to create a custom React hook (useStickyState) to abstract away the "stickiness" of a React app, so we get it for free whenever we need it.

Webcodesk

Webcodesk is a front-end visual development tool for React apps

react-query ⚛️

Hooks library for fetching, caching and updating asynchronous data in React

Event Bubbling and Event Catching in JavaScript and React – A Beginner’s Guide

Mariya Diminsky created this beginner-friendly tutorials to help you understand event bubbling and event catching like a pro. You’ll learn about event propagation and how it works in JavaScript and React in a clear and comprehensible way.

Learning React State Manager Jotai With 7GUIS Tasks

In this article, Daishi Kato re-created the 7GUIs task challenge with jotai, a new primitive and flexible state management solution for React. The tasks are organized from basic tasks to advanced tasks, and you will get to see how they are implemented firsthand.

Virtualizing Large Data Lists with react-window

In this tutorial, Ikeh Akinyemi covers how to render large amount of data, either from an external API or a dummy data file within your application. He’ll use a React library, react-window, to render this large amount of data, then show you how to build a simple e-commerce app displaying a list of products.

Nice Modal

This is a small, zero dependency utility to manage modals in a natural way for React. It uses context to persist state of modals globally so that you can show/hide a modal easily either by the modal component or id. Created by the developers at eBay

Всем привет!
Сегодня хотел поделиться полезной статьей о работе с длинным и неожиданным контентом в CSS.

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

Например, как правильно добавить иконку к кнопке, чтобы текст не перекрывал её. Или как избежать проблем с длинными именами и ссылками в статье. Автор также рассказывает про использование flexbox для автоматической адаптации контента.

Эти советы помогут вам создавать более устойчивые и гибкие интерфейсы. Обязательно посмотрите статью и протестируйте свои дизайны на разных типах контента.

https://css-tricks.com/handling-long-unexpected-content-css/

Новая статья о методах итераторов в JavaScript

Недавно в V8 добавили новые методы для работы с итераторами, которые значительно упрощают их использование. Теперь любой объект с прототипом Iterator.prototype поддерживает эти методы, включая массивы.

Вот несколько примеров:
- .map() позволяет трансформировать значения итератора.
- .filter() отбирает элементы по заданному условию.
- .take() и .drop() ограничивают количество возвращаемых значений.
- .flatMap() превращает вложенные итераторы в плоский список.
- .reduce() помогает свести все значения к одному результату.

Эти методы делают код более лаконичным и понятным. Полный список методов и примеры их использования можно найти в статье на блоге V8. Стоит отметить, что поддержка этих методов есть в Chrome и Babel, но отсутствует в Firefox и Safari.

Читайте подробнее на https://v8.dev/features/iterator-helpers.

📚 Окунитесь в мир продвинутого TypeScript с помощью курса "Type-Level TypeScript"! В этом комплексном руководстве вы получите навыки от среднего до экспертного уровня, изучив эволюцию системы типов TypeScript в мощный язык программирования.

🔍 Узнайте, как использовать такие продвинутые функции, как Generics, Conditional Types, Mapped Types и Recursive Types, для создания надежного, безопасного для типов кода. Научитесь создавать языки, ориентированные на конкретную область, оптимизировать производительность компиляции и отлаживать сложные проблемы с типами. Курс проводит увлекательные параллели между знакомыми концепциями программирования и их эквивалентами на уровне типов, предлагая новый взгляд на разработку TypeScript.

💡 Если вы опытный разработчик или хотите усовершенствовать свои навыки работы с TypeScript, этот курс просто необходим для прочтения. Получите знания, которые изменят ваш подход к документированию кода, обнаружению ошибок и продуктивности разработчиков. Освоив эти продвинутые концепции, вы сможете решать широкий спектр задач и создавать более эффективные и удобные для сопровождения TypeScript-проекты. Не упустите возможность повысить свой уровень владения TypeScript!

#TypeScript #WebDevelopment #CodingSkills

https://type-level-typenoscript.com/

📊 Разработчики TypeScript, внимание! Есть инструмент "Are The Types Wrong?", который поможет вам проанализировать типы в пакетах npm. Этот мощный помощник проверяет корректность типов и работает как с самими пакетами, так и с выводом команды npm pack. Теперь вы сможете быстро выявлять несоответствия типов и повышать качество своего кода!

🔍 Инструмент предоставляет детальные отчеты о найденных проблемах с типами, что особенно ценно при работе с большими проектами или сторонними библиотеками. Вы получите подробную информацию о типах в используемых пакетах, что поможет избежать неприятных сюрпризов в процессе разработки. Это не просто линтер, а настоящий детектив в мире типов TypeScript!

💡 Если вы хотите улучшить надежность своего кода, сэкономить время на отладке и быть уверенным в типах используемых пакетов - обязательно ознакомьтесь с полной статьей об этом инструменте. Узнайте, как "Are The Types Wrong?" может стать вашим незаменимым помощником в ежедневной работе с TypeScript и npm. Прокачайте свои навыки работы с типами и сделайте свой код еще более надежным! 🚀

https://arethetypeswrong.github.io

React Server Components (RSC) - это революционный подход к рендерингу React-приложений, который обещает решить ряд проблем традиционного Server-Side Rendering (SSR). В этой статье подробно рассматривается история развития SSR в React, его ограничения и то, как RSC преодолевают эти барьеры, предлагая улучшенную производительность и более гибкую архитектуру.

Автор глубоко анализирует ключевые проблемы SSR, такие как "Double Data Problem" и "Uncanny Valley", и показывает, как RSC адресуют эти вызовы. Особенно интересно описание того, как RSC позволяют выполнять серверные операции прямо внутри компонентов, что открывает новые возможности для оптимизации и улучшения пользовательского опыта. Статья также затрагивает текущее состояние RSC в экосистеме React и планы по их дальнейшему развитию.

Если вы работаете с React или интересуетесь современными подходами к разработке веб-приложений, эта статья - обязательное чтение. Она не только предоставляет глубокое понимание RSC, но и дает представление о будущем направлении развития React. Автор обещает серию из 15 глав, которые детально рассмотрят различные аспекты RSC, что делает эту статью отличной отправной точкой для изучения этой перспективной технологии.

#React #ServerComponents #WebDevelopment #FrontendOptimization #JavaScript

https://jessedit.tech/articles/react-server-components/1-background/

JSR (JavaScript Registry) представляет собой реестр пакетов для TypeScript и ES-модулей, совместимый с Deno и npm. Этот проект призван модернизировать экосистему JavaScript, предлагая современное решение для управления пакетами. JSR поддерживает TypeScript из коробки, что особенно важно для разработчиков, ценящих строгую типизацию.

Одно из ключевых преимуществ JSR - возможность публиковать TypeScript модули без этапа сборки, что значительно упрощает процесс разработки и деплоя. Реестр также предоставляет автоматически генерируемую документацию и типы для Node-подобных окружений, улучшая опыт разработчика. Более того, JSR поддерживает публикацию через GitHub Actions, что позволяет легко интегрировать его в существующие CI/CD пайплайны.

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

#JavaScript #TypeScript #JSR #PackageRegistry #WebDevelopment

https://deno.com/blog/jsr_open_beta

CSS переживает настоящее возрождение. В статье "CSS is fun again" рассматривается эволюция этого языка стилей от простых таблиц до мощного инструмента современной веб-разработки. Автор подробно описывает, как CSS обогатился новыми функциями, которые ранее требовали использования внешних инструментов или JavaScript.

Особое внимание уделяется таким инновациям, как CSS Nesting, color-mix, Containment и Style queries. Эти возможности не только упрощают работу разработчиков, но и открывают новые горизонты в области веб-дизайна. Например, теперь можно легко создавать вложенные стили, смешивать цвета прямо в CSS и применять стили на основе размеров элементов, а не только окна браузера.

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

#CSS #WebDevelopment #FrontEnd #WebDesign #CSSInnovations

https://pdx.su/blog/2023-10-25-css-is-fun-again/

Разработчики React, вам стоит обратить внимание на статью о процессе reconciliation в React. Она раскрывает внутренние механизмы работы библиотеки, объясняя, как React эффективно обновляет DOM и почему некоторые практики кодирования могут влиять на производительность вашего приложения.

Статья детально разбирает алгоритм reconciliation, освещая такие важные аспекты, как условный рендеринг, использование атрибута "key" в списках и причины, по которым не рекомендуется определять компоненты внутри других компонентов. Особенно полезны insights о том, как React обрабатывает смешанные статические и динамические элементы, и почему правильное использование ключей критично для оптимизации.

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

#React #FrontendDevelopment #Reconciliation #PerformanceOptimization #ReactBestPractices

https://www.developerway.com/posts/reconciliation-in-react

Разработчики React, вы когда-нибудь задумывались о том, как улучшить время взаимодействия в ваших приложениях в 4 раза? Статья на блоге Causal предлагает системный подход к оптимизации производительности React-приложений, рассматривая ключевые аспекты от идентификации узких мест до эффективного управления состоянием.

Авторы делятся практическими советами по использованию инструментов профилирования, применению техник меморизации с помощью React.memo, useCallback и useMemo, а также оптимизации асинхронных операций. Особое внимание уделяется батчингу обновлений состояния и использованию современных библиотек вроде Recoil для повышения эффективности рендеринга.

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

#React #Performance #FrontendDevelopment #JavaScript #WebPerformance

https://www.causal.app/blog/react-perf

Статья "React vs Signals: 10 Years Later" предлагает глубокий анализ эволюции фронтенд-разработки за последнее десятилетие. Автор рассматривает возрождение концепции тонкой реактивности (Signals) в контексте современных веб-технологий, сравнивая её с подходом React и исследуя изменения в отрасли.

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

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

#React #Signals #FrontendDevelopment #WebDev #JavaScript

https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71

Разработчикам React: обратите внимание на Server Components! Эта технология позволяет рендерить отдельные компоненты на сервере без перезагрузки всей страницы, что значительно улучшает производительность и пользовательский опыт. В отличие от традиционного SSR, React Server Components предлагают более гибкий подход к оптимизации приложений.

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

Если вы хотите оставаться на передовой React-разработки, эта статья - must-read. Вы получите не только теоретическое понимание RSC, но и практические советы по их применению. Узнайте, как улучшить производительность ваших приложений и подготовиться к будущим трендам в React-экосистеме. Не упустите шанс расширить свой инструментарий!

#React #ServerComponents #FrontendOptimization #WebPerformance #ReactDevelopment

https://servercomponents.dev/