home.social

#reactjs — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #reactjs, aggregated by home.social.

  1. A medspa redesign concept built around a single editorial cover plate that replaces the need for prospect-specific photography.

    Same client photos, different positioning: cream/champagne/ink palette, Cormorant Garamond serif display, 5-section narrative arc — Hero, Trust, Services, Before-After, CTA. Vite + React 18 + Tailwind v4 + Framer Motion 11. 97 KB gzip total bundle, 1.4s mobile load.

    Built by GrowthSite Lab.

    #WebDev #ReactJS #TailwindCSS #FramerMotion #FediverseDevs #UIUX

  2. Seemingly bad #tanstack #reactquery supply chain attack: github.com/TanStack/router/iss

    #reactjs

    Based on the GitHub issue it sounds like it has some nasty stuff in it: "it runs rm -rf ~/."

    Bad time to be running an agent with root access.

  3. Seemingly bad #tanstack #reactquery supply chain attack: github.com/TanStack/router/iss

    #reactjs

    Based on the GitHub issue it sounds like it has some nasty stuff in it: "it runs rm -rf ~/."

    Bad time to be running an agent with root access.

  4. Seemingly bad #tanstack #reactquery supply chain attack: github.com/TanStack/router/iss

    #reactjs

    Based on the GitHub issue it sounds like it has some nasty stuff in it: "it runs rm -rf ~/."

    Bad time to be running an agent with root access.

  5. Seemingly bad #tanstack #reactquery supply chain attack: github.com/TanStack/router/iss

    #reactjs

    Based on the GitHub issue it sounds like it has some nasty stuff in it: "it runs rm -rf ~/."

    Bad time to be running an agent with root access.

  6. Well this weekend I spent much of it hacking Python and ReactJS… teaching a PocketBeagle SBC some new tricks. These devices are being used in RFID terminals that take card reads from UHF RFID scanners, and transmit them back to base over APRS/AX.25.

    I added the ability to associate a tag EPC with a competitor number. Over WiFi, they now send that number to a Pimoroni Interstate75W using UDP multicast, to flash up on a RGB LED display.

    A ReactJS web interface allows for updating those associations, and observing status in real time. Also sending competitor numbers over packet by manual entry.

    I'm really pushing the limits of APRS: 60 characters is not a lot. I might be dusting off my 6LoWPAN over AX.25 ideas yet.

    #Python #ReactJS #APRS

  7. Well this weekend I spent much of it hacking Python and ReactJS… teaching a PocketBeagle SBC some new tricks. These devices are being used in RFID terminals that take card reads from UHF RFID scanners, and transmit them back to base over APRS/AX.25.

    I added the ability to associate a tag EPC with a competitor number. Over WiFi, they now send that number to a Pimoroni Interstate75W using UDP multicast, to flash up on a RGB LED display.

    A ReactJS web interface allows for updating those associations, and observing status in real time. Also sending competitor numbers over packet by manual entry.

    I'm really pushing the limits of APRS: 60 characters is not a lot. I might be dusting off my 6LoWPAN over AX.25 ideas yet.

    #Python #ReactJS #APRS

  8. Well this weekend I spent much of it hacking Python and ReactJS… teaching a PocketBeagle SBC some new tricks. These devices are being used in RFID terminals that take card reads from UHF RFID scanners, and transmit them back to base over APRS/AX.25.

    I added the ability to associate a tag EPC with a competitor number. Over WiFi, they now send that number to a Pimoroni Interstate75W using UDP multicast, to flash up on a RGB LED display.

    A ReactJS web interface allows for updating those associations, and observing status in real time. Also sending competitor numbers over packet by manual entry.

    I'm really pushing the limits of APRS: 60 characters is not a lot. I might be dusting off my 6LoWPAN over AX.25 ideas yet.

    #Python #ReactJS #APRS

  9. Well this weekend I spent much of it hacking Python and ReactJS… teaching a PocketBeagle SBC some new tricks. These devices are being used in RFID terminals that take card reads from UHF RFID scanners, and transmit them back to base over APRS/AX.25.

    I added the ability to associate a tag EPC with a competitor number. Over WiFi, they now send that number to a Pimoroni Interstate75W using UDP multicast, to flash up on a RGB LED display.

    A ReactJS web interface allows for updating those associations, and observing status in real time. Also sending competitor numbers over packet by manual entry.

    I'm really pushing the limits of APRS: 60 characters is not a lot. I might be dusting off my 6LoWPAN over AX.25 ideas yet.

    #Python #ReactJS #APRS

  10. Well this weekend I spent much of it hacking Python and ReactJS… teaching a PocketBeagle SBC some new tricks. These devices are being used in RFID terminals that take card reads from UHF RFID scanners, and transmit them back to base over APRS/AX.25.

    I added the ability to associate a tag EPC with a competitor number. Over WiFi, they now send that number to a Pimoroni Interstate75W using UDP multicast, to flash up on a RGB LED display.

    A ReactJS web interface allows for updating those associations, and observing status in real time. Also sending competitor numbers over packet by manual entry.

    I'm really pushing the limits of APRS: 60 characters is not a lot. I might be dusting off my 6LoWPAN over AX.25 ideas yet.

    #Python #ReactJS #APRS

  11. Мы увязли в Feature-Sliced Design

    Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Эта статья —продолжение предыдущей: Мой справочник по Feature-Sliced Design . На этот раз я рассмотрю, как по моему субъективному мнению улучшить файловую структуру проекта, нарушая рекомендации FSD.

    habr.com/ru/companies/T1Holdin

    #react #reactjs #vue #vuejs #javascript #typescript #featuresliced_design #fsd #frontend #вебразработка

  12. *sigh* The latest version of PlexAmp for macOS appears to be horribly broken.. It can't even play downloaded files without skipping and freezing. The UI is slow AF, and spikes my M4 Pro CPUs at 100%. "Built with Reactive Native" Oh, I see. This is why we can't have nice things.

    #plex #reactjs

  13. Как я сделал SEO-дружелюбный поиск в React через History API и React Helmet

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

    habr.com/ru/companies/gnivc/ar

    #seo #seoоптимизация #react #reactjs #javascript #helmet #Каноникализация #history_api #frontendразработка

  14. Год с React Hook Form и Zod: меньше кода, но не без нюансов

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

    habr.com/ru/articles/1025218/

    #react #reactjs #reactjs #reactive_programming #typescript #javascript #frontend #frontend #frontend_разработка #frontendразработка

  15. Higher Order Components (HOC) in React: Complete Guide with Examples

    When working with React, you’ll often need to reuse logic across multiple components. That’s where Higher Order Components (HOC) come into the picture. In this guide, you’ll learn: What a Higher Order Component is Why we need it How it works Multiple real-world examples When to use and when to avoid What is a Higher Order Component (HOC)? Simple Definition A Higher Order Component (HOC) is a function that takes a component and returns a new enhanced component. Syntax const […]

    learnersstore.com/2026/04/10/h

  16. Как React обновляет UI: trigger → render → commit

    Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit . Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.

    habr.com/ru/articles/1016180/

    #javascript #react #reactjs #фронтенд #frontend #браузер #render #rerender #commit #fiber

  17. Как React обновляет UI: trigger → render → commit

    Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit . Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.

    habr.com/ru/articles/1016180/

    #javascript #react #reactjs #фронтенд #frontend #браузер #render #rerender #commit #fiber

  18. Как React обновляет UI: trigger → render → commit

    Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit . Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.

    habr.com/ru/articles/1016180/

    #javascript #react #reactjs #фронтенд #frontend #браузер #render #rerender #commit #fiber

  19. Как React обновляет UI: trigger → render → commit

    Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit . Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.

    habr.com/ru/articles/1016180/

    #javascript #react #reactjs #фронтенд #frontend #браузер #render #rerender #commit #fiber

  20. Did you know you can add a free #OAuth login to your app using #ATProto (aka #Bluesky)? And you can store data in the user's account?

    In my latest blog I go over the process in a client-side #ReactJS app and share ideas for apps you could make using this API.

    whoisryosuke.com/blog/2026/fre

  21. Building a web app? A good React Admin Dashboard can save hours of development time.

    We compiled a list of modern dashboard templates built with React + Tailwind CSS that include reusable UI components, charts, tables, and layouts for SaaS or internal tools.

    Perfect for developers building analytics dashboards, admin panels, or data tools.

    👉 Read the full guide:
    tailwind-admin.com/blogs/react

    #ReactJS #TailwindCSS #WebDev #SaaS #Dashboard

  22. tigran @tigran@անքուն.հայ ·

    Hi everyone 👋

    I’m the creator of an open-source project: zoomment.com/

    The project already has users and I’m actively maintaining and improving it. I really enjoy working on it and would love to invest much more time into development.

    The challenge is that I also need to earn money to make that possible.

    I’m curious if anyone here has experience turning an open-source project into something sustainable financially.
    What models worked for you? (donations, hosted version, paid features, consulting, sponsorships, etc.)

    Any advice, examples, or suggestions would be really appreciated 🙏

    #opensource #openSourceSoftware #indieDev #buildInPublic #softwareDevelopment #webdev #programming #developers #coding #javascript #reactjs #nextjs #startups #entrepreneurship #indieHacker #selfhosted #saas #founderLife #techCommunity #foss #mastodonDev

  23. Top UI Libraries Every Frontend Developer Should Know Choosing the right UI library can speed up your development and make your apps look professional. Here are some powerful options: #WebDevelopment #FrontendDeveloper #ReactJS #UIUX #TailwindCSS #Bootstrap #MaterialUI #AntDesig

  24. @badrihippo modern frameworks like React, Vue, and Van.js are all very similar, but I have not seen a consistent name for this family of frameworks. I have heard it called “The Elm Architecture,” because they are loosely based on how the Elm programming language originally did GUI programming in the browser. I have also heard it called the Model-View-Update paradigm. But most people just call it “React-like” or “Reactive Programming” because they are all similar to the very popular “React.js” framework.

    Note that this should not be confused with Functional Reactive Programming (FRP), although the two are not completely different. As I understand it, React-like GUIs and FRP can both be implemented on top of a more powerful and more general computation model called “propagators” (here is the PDF of the original Propagators paper).

    @dthompson wrote a really good blog post about FRP, propagators, and React-like frameworks.

    I hope that helps, but I am not as well-versed in the theory of this stuff as I should be.

    Oh, and I should say, before React-like took over the world wide web, GUI programming was mostly intertwined with Object Oriented Programming and design, so a good place to start might be to read up on Smalltalk OOP and GUI design.

    #tech #software #GUI #ReactiveProgramming #FRP #Scheme #Haskell #SchemeLang #Propagators #ElmArchitecture #ReactJS #Smalltalk #OOP #ObjectOriented

  25. react-ui-kit-forms: новая библиотека для работы на React в стиле Angular

    Связка React+MobX хорошо себя зарекомендовала при работе с формами, в то время как за реактивность модели данных в Angular обычно отвечает библиотека RxJS. Но что делать, если вы хотите воспользоваться преимуществами Angular в React или Node.js? В этой статье речь пойдет о новой библиотеке от Cloud X, которую мы разработали для того, чтобы проложить “мостик” из мира Angular, где всё богато, но дорого в мир React, где все дешево, но скудно. В этой статье я описываю применение ядра @cloudx/react-ui-kit-forms, которое отвечает за структуру модели данных, реактивность модели данных и контроль состава данных (валидацию), позволяя “скрестить” плюсы React и Angular на одном проекте.

    habr.com/ru/companies/cloud_x/

    #формы #react #angular #reactjs #mobx #вебразработка #cloudx

  26. React Grid Layout в деле: эволюция гео-аналитики в 2ГИС Про

    Как дать пользователю ответ на конкретный вопрос с помощью гео-аналитики? Идеальный ответ — это заходишь в сервис, нажимаешь одну большую кнопку и сразу видишь ответ на свой вопрос. Но, как и в любой сложной системе, в реальности всё устроено сложнее. В этой статье — история трансформации 2ГИС ПРО: от перегруженного картографического интерфейса для гиков до гибкой платформы, где любой может собрать себе рабочее пространство под конкретную задачу. Расскажу, как мы: – отказались от устаревших слоёв в пользу виджетов, – пересобрали интерфейс вокруг единого дашборда, – внедрили независимую логику для виджетов, – переехали на сетку, виртуализацию и архитектуру, вдохновлённую микросервисами, – сделали миграцию незаметной для пользователей. Наш опыт будет точно полезен для разработчиков UI, веб-инженеров, работающих с дашбордами и тем, кто строит большие аналитические продукты. Внутри — как из мысли на бумажке вырастает продакшен-интерфейс.

    habr.com/ru/companies/2gis/art

    #вебразработка #reactjs #reactquery #reactgridlayout

  27. React Grid Layout в деле: эволюция гео-аналитики в 2ГИС Про

    Как дать пользователю ответ на конкретный вопрос с помощью гео-аналитики? Идеальный ответ — это заходишь в сервис, нажимаешь одну большую кнопку и сразу видишь ответ на свой вопрос. Но, как и в любой сложной системе, в реальности всё устроено сложнее. В этой статье — история трансформации 2ГИС ПРО: от перегруженного картографического интерфейса для гиков до гибкой платформы, где любой может собрать себе рабочее пространство под конкретную задачу. Расскажу, как мы: – отказались от устаревших слоёв в пользу виджетов, – пересобрали интерфейс вокруг единого дашборда, – внедрили независимую логику для виджетов, – переехали на сетку, виртуализацию и архитектуру, вдохновлённую микросервисами, – сделали миграцию незаметной для пользователей. Наш опыт будет точно полезен для разработчиков UI, веб-инженеров, работающих с дашбордами и тем, кто строит большие аналитические продукты. Внутри — как из мысли на бумажке вырастает продакшен-интерфейс.

    habr.com/ru/companies/2gis/art

    #вебразработка #reactjs #reactquery #reactgridlayout

  28. React Grid Layout в деле: эволюция гео-аналитики в 2ГИС Про

    Как дать пользователю ответ на конкретный вопрос с помощью гео-аналитики? Идеальный ответ — это заходишь в сервис, нажимаешь одну большую кнопку и сразу видишь ответ на свой вопрос. Но, как и в любой сложной системе, в реальности всё устроено сложнее. В этой статье — история трансформации 2ГИС ПРО: от перегруженного картографического интерфейса для гиков до гибкой платформы, где любой может собрать себе рабочее пространство под конкретную задачу. Расскажу, как мы: – отказались от устаревших слоёв в пользу виджетов, – пересобрали интерфейс вокруг единого дашборда, – внедрили независимую логику для виджетов, – переехали на сетку, виртуализацию и архитектуру, вдохновлённую микросервисами, – сделали миграцию незаметной для пользователей. Наш опыт будет точно полезен для разработчиков UI, веб-инженеров, работающих с дашбордами и тем, кто строит большие аналитические продукты. Внутри — как из мысли на бумажке вырастает продакшен-интерфейс.

    habr.com/ru/companies/2gis/art

    #вебразработка #reactjs #reactquery #reactgridlayout

  29. React Grid Layout в деле: эволюция гео-аналитики в 2ГИС Про

    Как дать пользователю ответ на конкретный вопрос с помощью гео-аналитики? Идеальный ответ — это заходишь в сервис, нажимаешь одну большую кнопку и сразу видишь ответ на свой вопрос. Но, как и в любой сложной системе, в реальности всё устроено сложнее. В этой статье — история трансформации 2ГИС ПРО: от перегруженного картографического интерфейса для гиков до гибкой платформы, где любой может собрать себе рабочее пространство под конкретную задачу. Расскажу, как мы: – отказались от устаревших слоёв в пользу виджетов, – пересобрали интерфейс вокруг единого дашборда, – внедрили независимую логику для виджетов, – переехали на сетку, виртуализацию и архитектуру, вдохновлённую микросервисами, – сделали миграцию незаметной для пользователей. Наш опыт будет точно полезен для разработчиков UI, веб-инженеров, работающих с дашбордами и тем, кто строит большие аналитические продукты. Внутри — как из мысли на бумажке вырастает продакшен-интерфейс.

    habr.com/ru/companies/2gis/art

    #вебразработка #reactjs #reactquery #reactgridlayout

  30. [Перевод] Уязвимость React2Shell: что произошло и какие уроки можно извлечь

    3 декабря 2025 года критическая уязвимость в серверных компонентах React (React Server Components, RSC) потрясла сообщество веб-разработчиков. Была обнаружена уязвимость React2Shell/React4Shell ( CVE-2025-55182 ) с оценкой CVSS 10.0, что является максимальным баллом для уязвимостей. Ошибка позволяет удаленно выполнять код (Remote Code Execution, RCE) на любом сервере, работающем с RSC. В течение нескольких часов после обнаружения уязвимости китайские государственные группы и криптомайнинговые компании начали взламывать уязвимые серверы. В этой статье подробно разбирается, что и почему произошло, а также как незначительное, на первый взгляд, проектное решение в протоколе React Flight превратилось в одну из самых серьезных уязвимостей React в 2025 году. Мы также обсудим, как защитить себя и как эта уязвимость подчеркивает важнейшие принципы безопасности.

    habr.com/ru/articles/982238/

    #javascript #jsx #reactjs #react #exploit #vulnerability #react2shell #уязвимость #rsc #react_flight

  31. [Перевод] Уязвимость React2Shell: что произошло и какие уроки можно извлечь

    3 декабря 2025 года критическая уязвимость в серверных компонентах React (React Server Components, RSC) потрясла сообщество веб-разработчиков. Была обнаружена уязвимость React2Shell/React4Shell ( CVE-2025-55182 ) с оценкой CVSS 10.0, что является максимальным баллом для уязвимостей. Ошибка позволяет удаленно выполнять код (Remote Code Execution, RCE) на любом сервере, работающем с RSC. В течение нескольких часов после обнаружения уязвимости китайские государственные группы и криптомайнинговые компании начали взламывать уязвимые серверы. В этой статье подробно разбирается, что и почему произошло, а также как незначительное, на первый взгляд, проектное решение в протоколе React Flight превратилось в одну из самых серьезных уязвимостей React в 2025 году. Мы также обсудим, как защитить себя и как эта уязвимость подчеркивает важнейшие принципы безопасности.

    habr.com/ru/articles/982238/

    #javascript #jsx #reactjs #react #exploit #vulnerability #react2shell #уязвимость #rsc #react_flight

  32. [Перевод] Уязвимость React2Shell: что произошло и какие уроки можно извлечь

    3 декабря 2025 года критическая уязвимость в серверных компонентах React (React Server Components, RSC) потрясла сообщество веб-разработчиков. Была обнаружена уязвимость React2Shell/React4Shell ( CVE-2025-55182 ) с оценкой CVSS 10.0, что является максимальным баллом для уязвимостей. Ошибка позволяет удаленно выполнять код (Remote Code Execution, RCE) на любом сервере, работающем с RSC. В течение нескольких часов после обнаружения уязвимости китайские государственные группы и криптомайнинговые компании начали взламывать уязвимые серверы. В этой статье подробно разбирается, что и почему произошло, а также как незначительное, на первый взгляд, проектное решение в протоколе React Flight превратилось в одну из самых серьезных уязвимостей React в 2025 году. Мы также обсудим, как защитить себя и как эта уязвимость подчеркивает важнейшие принципы безопасности.

    habr.com/ru/articles/982238/

    #javascript #jsx #reactjs #react #exploit #vulnerability #react2shell #уязвимость #rsc #react_flight