• Как отловить скролл до нужного элемента на React?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега React
    как проверять что доскроллили до очередного элемента?
    Сравнивать позицию скролла и этого элемента на странице. В чём вопрос-то конкретно?

    Допустим скролл можно слушать так:
    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }

    Лучше для этого использовать Intersection Observer там, где он доступен.
    Ответ написан
    4 комментария
  • React, где лучше хранить такие данные?

    oui
    @oui
    Front-end developer
    Доброго.
    Посмотрите на это - https://github.com/r-park/soundcloud-redux
    Здесь есть плеер, изменение уровня громкости с хранением в Redux. Да и сама структура проекта сделала достаточно грамотно.
    Ответ написан
    Комментировать
  • React, где лучше хранить такие данные?

    edli007
    @edli007
    full stack, team lead
    Redux. Просто не используйте их в верстке, а чтобы не было ререндера, используйте shouldComponentUpdate
    Ответ написан
    Комментировать
  • Как лучше сделать api call, зависящий от current state?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    1. В вашем случае сюда:
    this.setState((prevState) =>({
      currentPage : prevState.currentPage + 1 
    }), this.updateOrders);

    2. Я бы реализовал нормальный пагинатор отдельным компонентом и передавал бы в него текущую страницу, количество страниц из состояния родительского компонента и колбек getActivePage. В который бы пагинатор передавал новую страницу. Вот в колбеке уже и смотрите если страница та же то return, а выход за границы пагинации( страница меньше минимальной и больше максимальной) должен обрабатывать сам пагинатор.
    Вашу функцию showNextPage надо преобразовать в getActivePage, которая будет передаваться в пагинатор:
    getActivePage = activePage => {
      if (this.state.currentPage === activePage) return;
    
      this.setState({
        currentPage : activePage,
      }, this.updateOrders);
    };

    3. Хранить state в компоненте абсолютно нормально и надо если другие части приложения(не дочерние компоненты) ничего не должны об этом состоянии знать. Пагинация как раз тот случай. fetch лучше вынести в каталог api и передавать компоненту как свойство. Но еще лучше использовать redux + redux-saga и передавать в компонент экшен fetchOrders через mapDispatchToProps и connect. В результате в компоненте останется:
    fetchOrders = () => {
      const {
        currentPage,
        ordersPerPage,
        sortBy,
        sortDirection,
      } = this.state;
    
      this.props.fetchOrders({
        page: currentPage,
        limit: ordersPerPage,
        sortBy,
        sortDirection,
      });
    };

    Параметры запроса условные. Написал типичные для кейса пагинация + сортировка.

    Еще название updateOrders не совсем корректное, я бы назвал функцию fetchOrders.
    А инлайновые функции используйте только если они будут вызываться другим компонентом.
    Ответ написан
    Комментировать
  • Как моделировать дорожный трафик?

    @GreatRash
    Вот тут, можно нажать CTRL+U, промотать в самый низ и почитать скрипты.
    Ответ написан
    1 комментарий
  • Не говнокод ли я пишу?

    @huwesu
    Он родимый.
    Но не самого крайнего пошиба.
    Не корите себя.
    Ответ написан
    Комментировать
  • Как НЕ дать пользователям скачать изображения сайта?

    longclaps
    @longclaps
    Не дадим.
    Вдруг ты скачаешь.
    Ответ написан
    Комментировать
  • Как уйти от callback hell в node.js?

    @emp1re
    callback наше все, остальное тлен
    Ответ написан
    Комментировать
  • В чем преимущества сайтов на node.js?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    • Изоморфные приложения и SSR. Мы хотим очень динамический вебсайт, который почти весь рисуется на клиенте, но пауки до сих пор не умеют в JS, да и людям долговато ждать, пока сайт отрисуется. Выход -- рендерим HTML на сервере тем же самым кодом, что и на клиенте. Альтернативы есть, конечно, но на nodejs это выглядит проще всего.
    • Многозадачность без ручного управления параллельностью. Пока у нас лог в Redis пишется, данные из Postgre достаются, картинка с диска читается, мы уже принимаем следующий запрос от другого клиента. Все это безо всяких усилий с нашей стороны (разве что понять, наконец, что такое callback). Опять же, есть альтернативы (go с горутинами, акторы в Scala).


    Ну и да, вопрос вкуса и знаний:) Я могу сделать сайт на PHP, Python и C#, но не буду. Ибо зачем, если nodejs справляется ровно так же, а код я напишу на порядки быстрее.
    Ответ написан
    6 комментариев
  • Node.js(как вариант для хранения временных данных)?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    В БД (или быстрый кэш, типа Redis). Причин несколько:
    • Ваше приложение может упасть. Игрокам не понравится, если у них вдруг пропадут карты. БД тоже падают, но вероятность этого гораздо меньше (у них больше разработчиков и тестеров).
    • Массивы в памяти не масштабируются. Положим, пару десятков одновременных партий в памяти держать можно, но когда счет пойдет на тысячи, это будет жрать RAM, плюс тормоза на GC. А БД можно вынести на отдельный сервер и даже на отдельный кластер.


    Ну, понятно, что в учебном примере пофиг на надежность и масштабируемость, но почему бы не делать сразу правильно?
    Ответ написан
    7 комментариев
  • Как свернуть таблицу после 10 строки?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Можно вообще без скриптов сделать через :nth-child()codepen.io/paulradzkov/pen/VbpNGM?editors=1100

    Рассмотрим этот селектор:
    table tbody > tr:nth-child(n + 11) {
        display: none;
    }


    Он выбирает все ряды, начиная с 11-го, внутри tbody и скрывает их.
    Шапка таблицы должна лежать в thead, тогда она не учитывается и может иметь любое количество рядов.

    В последнюю строку таблицы обычно пишут какой-то суммарный результат, для этого есть тег tfoot.
    Если поместить последнюю строку в него, то она будет видна в любом состоянии.

    Структура таблицы получится такой:
    <table>
        <thead>
            <tr>
                <th></th><th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th><td></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th></th><td></td>
            </tr>
            ...
            <tr>
                <th></th><td></td>
            </tr>
        </tbody>
    </table>
    Ответ написан
    1 комментарий
  • Как очень быстро отправить POST?

    ThunderCat
    @ThunderCat Куратор тега JavaScript
    {PHP, MySql, HTML, JS, CSS} developer
    все дело в параметрах:
    $.makePost({
    url: somesite.com,
    speed: fast,
    onTrippleClickSpeed: superfast
    })
    Ответ написан
    Комментировать
  • Node.js в качестве server-side для enterprise приложения?

    Stdit
    @Stdit
    По моему опыту, nodejs — удобная, стабильная и быстрая штука, имеющая отличное сообщество и много хороших библиотек в npm. Преимущества можно перечислять долго, лучше сразу перейти к проблемам.

    — Сложно найти готовых к работе толковых программистов, даже среди фронтендщиков. Но можно обучить. На обучение и понимание среды nodejs, API, асинхронности, замыканий, калбэков, событий, функционального подхода — уходит примерно месяц-два.
    — Библиотеки из форнтендов использовать можно, но только если они грамотно написаны и оптимизированы для перманентной работы. Иначе есть риск, что они сожрут всю память или повесятся.
    — Сервер nodejs обычно однопоточный, со всеми вытекающими. Имеется возможность форкать и открывать дочерные процессы, на это нужны дополнительные затраты труда. Но это требуется только в исключительных случаях.
    — Код пишется в основном легко, если следовать чёткому стандарту, который обычно навязывается используемым фреймворком. Однако javascript, ввиду своей нестрогости, неустойчив к коррозии, в спешке или по неопытности можно наделать рака и превратить жизнь своей команды в ад.
    — При сложной логике со множеством вызовов можно без злого умысла нагородить «лестниц» из калбеков. Однако, проблема решается разными вариантами библиотек управления задачами (async, Q, и т.д.). Вообще лучше делать максимальную декомпозицию кода, создавать бесчисленные функции внутри функций — не очень хорошая практика.

    По поводу камней:
    — Обычно, всякие руководства и мануалы типа «hello world» используют один сокет для соединения с БД. На практике оказалось, что если этот сокет зависает под тяжёлым запросом, то все остальные запросы прилежно ждут его освобождения. Поэтому первое, что нужно сделать в новом проекте — это подключить database connection pool.
    — Случилось так, что количество одновременных подключений к серверу перевалило за тысячу, и внезапно возникли необъяснимые аномалии и отказы. Как выяснилось, страшного ничего не произошло, и нужно было просто в операционной системе разрешить открывать на порядок больше файловых/сокетных дескрипторов.
    — Память для nodejs лучше ограничивать ключами запуска и отдавать больше для БД (если они на одной машине). В противном случае nodejs не спешит запусктать сборщик мусора (это ведь затратная операция) и разрастается.
    — Перезагрузки nodejs из-за внезапных падений от багов решаются специальными библиотеками, например forever.
    — Чтобы nodejs не вылетал из-за исключений, нужно ставить глобальный обработчик uncaughtException, который пишет их в лог или сразу шлёт на мыло ответственному лицу.
    — Нужно не забывать отвязыватсь обработчики от событий по окончании работы подписанного на событие объекта (removeListener()).

    По поводу фреймворков, используем express, потому что он красивый, простой и мы к нему привыкли.
    Ответ написан
    2 комментария
  • О какой скорости идёт речь, если react этот тот же самый js?

    devellopah
    @devellopah
    реакт и другие решения - это слои абстракции поверх языка. это не одно и то же.
    Ответ написан
    4 комментария
  • Как сделать такой эффект?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Ответ написан
    Комментировать
  • Как сделать такой эффект?

    @ont0shko
    Тебе нужна такая фотка с чистой майкой как задник. Поверх нее накладываешь с помощью canvas грязную майку выглядеть будет аналогично текущей картинке. Губкой будешь стирать грязную майку с холста под ней начнет появляться чистая майка задника
    Ответ написан
    Комментировать
  • Как сделать подобный интерактивный 3D план?

    Ni55aN
    @Ni55aN
    Выделить в отдельный класс, назовем его SVGMap, который будет отображать SVG, в котором будут кликабельные path'и и фото как фон. Добавить обработчики кликов к path, по которым будет:
    1. загружаться видео и следующий SVGMap
    2. по окончанию его загрузки удалять текущий SVGMap и воспроизводить видео
    3. после окончания воспроизведения видео отображать текущий SVGMap
    Ответ написан
    Комментировать
  • Как сервис 1whois.ru определяет server type, version?

    @AtaZ
    кто знает, тот поймет
    Тип сервера передается в каждом ответе сервера при посещении сайта.
    CMS и особенности их определения зависят от самой cms. Какие-то по адресу админки, какие-то по папкам в адресах картинок например, какие-то в коде прямым текстом пишут и т.д. Версия зачастую именно на странице админки написана, либо есть xcrf уязвимости показывающие дополнительную инфу.
    Ответ написан
    Комментировать
  • Какую библиотеку/фреймворк выбрать?

    astec
    @astec
    Разработчик https://debtstracker.io/
    Вот это расписание сделано на JQuery+Bootstrap 3:

    timetable.myclasses.co

    Если бы начинал делать с нуля скорее всего выбрал бы Angular (не первый). Но и Реакт и Вью тоже хорошо справятся.

    Я бы рекомендовал подумать не только о JS фрэймворке, но и о вёрстке. Bootstrap например сильно облегчает поддержку под разные платформы.
    Ответ написан
    1 комментарий
  • Как правильно организовать маршрутизацию Express?

    @rustler2000
    погромист сикраш
    Не скажу как надо "точно".
    Но скажу как не надо.

    0. Не надо регистрировать медленные и редкоиспользуемые обработчики раньше чаще вызываемых и более критических. Но надо блюсти зависимости. Помните - роутер регистрирует обработчики в листе(ок - массиве) и вызывает последовательно, в том порядке - в котором они были зарегистрированны.

    1. Не надо ставить express-static/serve-static перед осовной логикой как советует dummyman (реальный ник). Выже не хотите, чтобы нода ходила на диск проверяя наличие файла каждый раз, даже когда надо всего лишь вернуть находящийся в памяти объект?

    2. Не надо упускать обработчики 404 и 500. А то клиенту будет больно, а вам чуднО.

    3. Не надо упускать, что nginx раздает статику офигенно быстро - ведь он использует sendfile тогда как нода будет
    читать с диска и писать в сокет по кускам.
    Не надо верить dummyman что nginx не умеет кэшировать статику.
    Не надо верить мне - освойте ab (можно и strace чтобы офигеть как круто работает nginx со статикой).

    4. Тут еще было про SO_REUSEPORT но это будет немного оффтопик.
    Ответ написан