• TypeScript Generics: Переиспользуемый компонент?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Как и сказано в ошибке - Props - это дженерик, и нельзя написать <T extends Props>, надо писать <T extends Props<Something>>

    в list не надо передавать Props, в него надо передавать T который уже внутри использовать чтобы передать в Props
    что-то в духе
    function list<T>(props: Props<T>):
    Ответ написан
    Комментировать
  • Стоит ли переходить на React.PureComponent по-умолчанию?

    PQR
    @PQR
    React.PureComponent реализует метод shouldComponentUpdate таким образом, что он делает поверхностное сравнение props и state (не глубокое). Вот собственно код:
    https://github.com/facebook/react/blob/c8fbdac2271...
    shouldUpdate =
                !shallowEqual(prevProps, nextProps) ||
                !shallowEqual(inst.state, nextState);


    Что такое shallowEqual? Это по сути сравнение оператором === каждого элемента из prevProps с каждым элементом из nextProps. На всякий случай дам ссылку на реализацию для полного понимания: https://github.com/facebook/react/blob/6963ea4bfcd...

    В итоге всё зависит от структуры ваших props. Если в props вы передаёте объекты которые иногда мутируются, т.е. по ссылке они равны ===, но внутри какие-то данные поменялись (что само по себе выглядит странно в экосистеме redux + reselect, но вполне возможно технически), тогда использование PureComponent вам всё поломает, т.к. на экране какие-то компоненты перестанут перересовываться!

    Если же у вас всё по уму, данные которые передаются через props являются скалярными типами (string, int, float, bool) или immutable объектами, тогда смело используйте PureComponent - в некоторых случаях он поможет избавиться от лишних вызовов render.

    Важное замечание: PureComponent нужно использовать только для так называемых presentational components, т.е. для тех компонент, которые НЕ обёрнуты в вызов redux connect().

    Для container components (т.е. тех компонент, которые обёрнуты в redux connect()) нет смысла наследоваться от PureComponent, т.к. метод connect() оборачивает ваш компонент своей реализацией shouldComponentUpdate, которая также использует shallowEqual. Если вы по недосмотру унаследуете container component от PureComponent - ошибок не будет, но это не имеет никакого смыла, т.к. ваш код по сути будет дважды делать shallowEqual, а зачем делать лишнюю работу?

    Подводя итог, рецепт такой:
    - presentational components наследуем от React.PureComponent
    - container components (которые обёрнуты в redux connect()) наследуем от старого доброго React.Component
    Ответ написан
    1 комментарий
  • Не хватает ширины канала для трансляции?

    @rPman
    Как представлю этот кошмар, обеспечение стриминга 5к пользователей в одно и то же время, сразу кошельку становится грустно грустно.

    Ладно если бы речь шла о 2010г. и ранее, тогда действительно был единственный вариант заливать сетевые каналы баблом, но теперь у нас есть https://webtorrent.io на базе webrtc и p2p, попробуйте, конечно, возможно технология все еще сыровата, но у вас корпоративные клиенты, где сети не такие сломанные как мобильные (все за nat и/или p2p трафик так или иначе ограничивается) и главное, потратьте эти деньги на допиливание ее, в результате выиграют все а не только амазон (поддержка таких монополистов деньгой фактически преступление для человечества).
    Ответ написан
    Комментировать
  • Не хватает ширины канала для трансляции?

    Jump
    @Jump
    Системный администратор со стажем.
    Перешли на инстансы AWS, там та же история и к тому же там трафик платный и за 1 терабайт мы неплохо так им заплатили ($124), инстанс находился в Орегоне
    Если все юзеры у вас сидят в Орегоне, все должно прекрасно работать.
    Другое дело когда пользователи сидят где-нибудь в России, Австралии, или Китае - там понятное дело что до Орегона будет узкий и нестабильный канал.

    Каким поднять свой CDN для HLS трансляций
    Да просто поставить несколько не слишком мощных серверов в местах наибольшего скопления пользователей контента, и балансер.
    https://habr.com/ru/company/flashphoner/blog/340344/
    Ответ написан
    4 комментария
  • Почему не работает раздача hls через nginx-rtmp-module?

    Поменяйте exec_pull на exec_static
    Сейчас он у вас запускается только по первому запросу к rtmp
    Ответ написан
    1 комментарий
  • Не хватает ширины канала для трансляции?

    HLS трансляция - это же динамический плейлист и статичные видео чанки. Чанки вполне можно отдавать через cdn.
    Если геоцдн не нужен, а нужна только ширина канала - то можите просто поднять еще несколько новых проксирующих серверов на hetzner cloud.

    В идеале - вам бы kubernetus+prometheus(ну или любые их аналоги) и в них все эти проксирующие зеркала поднимать по факту нагрузки на канал. Зеркала же stateless.
    Ответ написан
    4 комментария
  • Как найти текст игнорируя теги?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Раз у вас javascript, сам бог велел использовать рекурсивный обход DOM, чтобы решить эту задачу нормально. Тогда не нужно будет вообще думать о тегах и их атрибутах. Регулярные выражения нужно использовать там, где текст имеет чёткую заранее известную структуру, это не про произвольный html.

    Код очень простой и понятный: https://jsfiddle.net/alexey_m_ukolov/nfah953z/7/
    Ответ написан
  • В чем смысл Vanilla.js?

    miraage
    @miraage
    Старый прогер
    Vanilla.js - это шутка. Подразумевается Ecmascript.
    Работодатели намекают, что Вы должны владеть всеми основными возможностями, которые предоставляет язык.
    Ответ написан
    2 комментария
  • Как исправить время в javascript, если у пользователя в системе неверная дата?

    mannaro
    @mannaro Куратор тега JavaScript
    Умею профессионально гуглить
    Очевидно, либо передавать с сервера уже обработанное время (то есть текстом, например), либо с сервера передавать время открытия страницы, на клиенте при загрузке считать разницу между клиентом и сервером и при каждом выводе времени компенсировать эту разницу.
    В moment можно даже переопределить текущее время и просто сделать его равным времени сервера.
    Ответ написан
    2 комментария
  • Как сделать зеркало для keyvalue.xyz?

    BuriK666
    @BuriK666 Куратор тега Nginx
    Компьютерный псих
    поставьте nginx и сделайте proxy_pass https://keyvalue.xyz/;
    Ответ написан
    9 комментариев
  • Как заставить addEventListener onclick() срабатывать 1 раз?

    Снимать при срабатывании
    function handler() {
      // ...
      element.removeEventListener(‘click’, handler);
    }
    
    element.addEventListener(‘click’, handler);
    Ответ написан
    Комментировать
  • Как добавить SSR к React.js проекту?

    Lumore
    @Lumore
    Front-end developer
    Есть такая штука как Next.js, много бойлерплейтов с webpack + express.js, возможно вам будет интересно
    Ответ написан
    1 комментарий
  • Ubuntu Как запустить программу?

    jcmvbkbc
    @jcmvbkbc
    "I'm here to consult you" © Dogbert
    chmod +x samp03svr
    ./samp03svr

    и не сиди под рутом.
    Ответ написан
  • Почему в jquery не работает в двух разных местах window.onresize?

    не работает в двух разных местах window.onresize

    Потому что window.onresize, как свойство объекта window, может иметь только одно значение. А вы его (пере)определяете в разных местах. Используйте addEventListener
    window.addEventListener('resize', function(event) { 
        // ...  
    })
    Ответ написан
    Комментировать
  • Как правильно удалять нужный элемент из массива?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Так как вам всегда нужно возвращать новый массив, задачу можно разделить следующим образом:
    1) в новый массив копируете* все с начала до index
    2) в этот же новый массив копируете все с index+1 до конца

    * - для копирования отлично подходит spread operator. В теории выглядит так:
    const arr = [{a:1},{b:2},{c:3},{d:4}]
    //допустим, вы прислали index 1 и сохранили его в переменную index, например
    const newArr = [
      ...arr.slice(0, index), // клонируем все элементы до индекса
      ...arr.slice(index+1), // клонируем все элементы после индекса
      // итого: индексный элемент удален
    ]


    Хазрат Гаджикеримов вам верно подсказал так же про filter. В комментарии привел верное решение. Давайте теперь рассмотрим ваше:
    if(action.type === 'REMOVE_STUDENT') {
            let newArr = state; // сохранили в newArr ссылку(!!!) на старый массив. Если вы хотели скопировать массив, то нужно было писать: let newARr = [...state] (если в state просто массив)
            newArr.splice(action.payload, 1); // здесь вы из newArr ( и из state, так как сохранили ссылку) удалили с ИНДЕКСА один элемент. Так же, внимание, вы используете sPlice, а не slice. Разницу нужно уточнить! (подсказка ниже как)
            return newArr.filter(element => element !== action.payload); // а здесь вы что вообще написали? вы сравнили element (что там? объект?) с action.payload (в которой как вы говорите индекс). Что должно быть в итоге? ;)
        }


    Очень легко гуглить все незнакомые функции по типу: name MDN
    в вашем случае запросы в гугл:
    slice MDN (первая ссылка выдачи)
    filter MDN (первая ссылка выдачи)

    Теория из-за которой не происходит понимания: копирование объектов по ссылке
    Ответ написан
    2 комментария
  • Зачем нужен redux-thunk?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если я правильно понял вашего коллегу, то речь была не о том, что нужно асинхронные функции через setTimeout вызывать, а это был просто пример, как сделать какой-то кусочек "типа асинхронным".
    Его довод был в том, что вместо вызова dispatch из замыкания (полученного с помощью redux-thunk, например) он вызывал store.dispatch напрямую (то есть у объекта store, и этот store импортировал бы в каждом файле).

    В таком случае, у redux-thunk - одно преимущество явное - не нужно импортировать store в каждом файле.

    В остальном, все очень четко расписано в ответе Дэна Абрамова, который привел holymotion.
    Если быть кратким, то вам нужна функция dispatch, ведь именно через нее вы "диспатчите" свои экшены. Вы не можете в асинхронном ответе написать:
    ...
    axios.get('/user')
          .then(res => {
            // успешно получили данные
            dispatch({ // <-- здесь вы вызываете функцию dispatch, а если она к вам не пришла в анонимной функции, с помощью redux-thunk, то октуда вы ее возьмете?
              type: GET_PROFILE_SECCUESS
              payload: res.data
            })
          })
    ...


    Поэтому вы были бы обязаны в каждый action creator, который является асинхронным, передавать бы помимо нужных вам аргументов, еще и функцию dispatch из своего контейнера. Что не удобно. (это все есть по ссылке на stackoverflow, но более подробно)
    Ответ написан
    1 комментарий
  • Как сделать высоту iframe по содержанию, полученному с другого домена?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Для решения задачи «в лоб» можно использовать общение между окнами.

    Исходный документ
    var iframe = document.createElement('iframe');
    
    window.addEventListener('message', function (e) {
    	iframe.height = e.data;
    });
    iframe.src = '...';
    iframe.scrolling = 'no';
    iframe.width = 300;
    iframe.height = 300;
    document.body.appendChild(iframe);

    Загружаемый документ
    window.addEventListener('load', function () {
    	parent.postMessage(document.documentElement.scrollHeight, '*');
    });

    Во втором аргументе postMessage можно указать домен исходного документа.
    Пример
    Ответ написан
    7 комментариев
  • Чем опасна загрузка в iframe с постороннего сайта?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Ничем. Кросдоменный iframe исполняется в отдельном изолированном контексте, а в последних версиях хрома в отдельном потоке
    Ответ написан
    Комментировать
  • Как иммутабельно удалить свойство из массива в редьюсере?

    Ниже пример решения, но насколько оно иммутабельно?


    Это идеально: filter создает новый массив.

    может быть только одна чистая функция, которая возвращается по умолчанию, или можно плодить там (естественно самое необходимое) функции


    Можно использовать хелперы (тот же lodash\ramda). Главное, чтобы в результате у вас редьюсер был чистой функцией без сайд эффектов (это значит, что все функции, которые используете внутри - также должны быть чистыми).
    Ответ написан
    Комментировать
  • Как разделить webpack код от кода проекта?

    mr_T
    @mr_T
    Web-разработчик
    Задаёшь в entry столько элементов, сколько нужно. Потом в output задаёшь filename с подстановкой имени нужного entry. Entry со всеми зависимостями добавляешь в CommonsChunkPlugin, чтобы они не дублировались в entry исходников приложения. Типа того:

    entry: {
    	app: './src/app.js',
    	vendor: ['lib1', 'lib2', ... ] // перечисляем тут все зависимости, которые нужно вынести в отдельный файл
    },
    output: {
    	filename: '[name].js?[chunkhash:6]' // получаем 2 файла: app.js, vendor.js
    },
    plugins: [
    	new webpack.optimize.CommonsChunkPlugin({ // убираем дубли зависимостей из app.js
    		names: ['vendor']
    	}
    ]


    Ну и дальше по необходимости шатать конфиги entry и CommonsChunkPlugin, про них всё подробно в документации webpack расписано.
    Ответ написан
    2 комментария