Как я делал загрузчик файлов на react и выложил на npm

 classNames={{
    "file-drop-zone_box": myClassNames.myFileDropZoneBoxClass,
    "file-drop-zone_button": myClassNames.myButtonClass,
    "file-icon": myClassNames.myFileIconClass,
    "file-box": myClassNames.myFileBoxClass,
    "file-box__file-button": myClassNames.myFileButton
    }}

Имена классов выглядят достаточно странно, где-то есть нижние подчеркивания, где-то нет, где-то подчеркивание одиночное, где-то двойное (привет БЭМ). Я бы сделал как в material ui

classNames={{
  root: '...',
  box: '...',
  button: '...',
  icon: '...',
}}

Я бы ещё добавил слоты, чтобы было можно полностью заменять реализацию компонента на кастомную. Как в material ui

https://mui.com/material-ui/api/slider/#slider-prop-slots

А так выглядит не плохо. Хотя на статью, конечно, не тянет. Для статьи было бы полезно описать как это реализовывалось и с какими трудностями столкнулись. И почему не подошли готовые библиотеки.

$mol — лучший мемогенератор во фронтенде

Там есть кнопка комментариев, внизу, она мне помогла быстро их открыть)

⚛️ React 19 — useOptimistic useOptimistic — новый хук,...

Попробуйте использовать с новыми Form Actions будете неприятно удивлены

⚛️ React 19 — useOptimistic useOptimistic — новый хук,...

Вы точно пробовали использовать useOptimistic? Ваш хук работает один в один, как и мой. И компонент обновляется только тогда, когда асинхронная функция выполнилась, а не мгновенно как в случае с useOptimistic.

⚛️ React 19 — useOptimistic useOptimistic — новый хук,...

WAT? Да причём тут async / await. Убрав await перед promise вы просто не дожидаетесь его выполнения и обновляете setState мгновенно. 

Вот тут песочница а тут исходники, можете поиграться.

Я имел в виду, что для useOptimistic важно чтобы метод обработчик возвращал промис. Ссылаясь на свой пример, я говорил об async/await. Вот здесь видно, как оптимистичные обновления перестают работать, если метод не возвращает промис https://app.screencast.com/6WIPVTltHTnlz.

Дык стоит разобраться, что там пошло не так. Полагаю, никакой связи именно с <form/> там нет.

Пока не понятно куда копать, создал вопрос на stack overflow.

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

Это была моя первая мысль, непонятно зачем он вообще нужен и я пошёл и написал свой хук для сравнения. В итоге выяснил, что если вызывать setState до того, как асинхронный метод завершится, ре-рендера не произойдёт, он произойдёт только, если использовать useOptimistic.

https://app.screencast.com/RvQny4z0YB9Ny

import { useCallback, useEffect, useState } from 'react';

export function useOptimistic<State, Action>(
    state: State,
    updateFn: (state: State, optimisticValue: Action) => State
): [State, (action: Action) => void] {
    const [optimisticState, setOptimisticState] = useState(state);

    useEffect(() => {
        setOptimisticState(state);
    }, [state]);

    const addOptmistic = useCallback(
        (value: Action) => {
            const optState = updateFn(optimisticState, value);
            setOptimisticState(optState);
        },
        [optimisticState, updateFn]
    );

    return [optimisticState, addOptmistic];
}

Где изучать C# в 2024. Бесплатные курсы и полезные ресурсы

очень странный вопрос, Microsoft ввёл санкции на использование C# в России?

Лучшие практики RuStore: правила хорошего Code Review для Android

А вы используете гитлаб? В гитлабе, насколько я помню, автоматически на основании CodeOwner'ов формируется список ответственных в видео таблицы, где напротив каждого измененного файла написан ответственный. Получается, что автору достаточно выбрать ревьюеров из списка.

Как из браузера открыть папку в проводнике Windows используя ExpressJS

Это не уязвимость! Это фича! Поздравляю вы успешно используете Remote Code Execution уязвимость https://cqr.company/ru/web-vulnerabilities/rce/

Явное управление ресурсами в TypeScript — using Недавно,...

Ну зачем так сразу(

Явное управление ресурсами в TypeScript — using Недавно,...

Ну там, где поддерживается это всё, конечно лучше использовать встроенные решения. Мы используем Zustand и там такого нет.

Честно говоря, пока хз, где это применять на фронте.

Явное управление ресурсами в TypeScript — using Недавно,...

Но там же всё равно придётся вызывать что-то типа setLoading, не имеет значения используются хуки или менеджер состояний 🤔

Явное управление ресурсами в TypeScript — using Недавно,...

Библиотеки скорее используют, чтобы отрисовать сам скелетон или спиннер. А управлять его состоянием нужно самому.

Мифы no-code разработки

Прежде всего, хочу отметить, что я с командой разрабатываем инструмент no‑code, и считаю, что no‑code платформа имеет хорошие перспективы своего развития.

@jura-49А что за no-code продукт разрабатываете?

Если процесс нельзя роботизировать, то он кривой

А как продукт называется?

Дизайн-система Gravity UI: как легко построить свой интерфейс

Похоже нашёл https://gravity-ui.com/libraries/navigation

Дизайн-система Gravity UI: как легко построить свой интерфейс

@AlexeyW100 а есть шаблон какой-то чтобы быстро сгенерировать подобный UI? Чтобы Сразу была шапка и боковая панель?

Анонимные опросники в проектном менеджменте

Классная стать, спасибо 👍

Свифт умирает или как получать валютные платежи в 2023 году

Да, это был наш запасной вариант. Оплакивали его вчера.

Как автоматизировать использование дизайн токенов с помощью Stylelint и PostCSS

Мы добавляем вручную в наши *.less файлы. Но я видел примеры, где это можно делать прямо из фигмы. То есть дизайнеры могут добавить/изменить токен в фигме, а изменения отправятся в репозиторий.

Вот тут описываются такие подходы:

• Дизайн-система на токенах в Figma, коде и проде – Константин Подрубный, Wrike

• Design token automation from Figma to Storybook

Как автоматизировать использование дизайн токенов с помощью Stylelint и PostCSS

А там есть какой-то способ валидировать используются ли дизайн токены или значения захардкожены?