• Как корректно обработать клик вне компонента в react js?

    @kova1ev
    нужно юзать порталы
    Ответ написан
    Комментировать
  • Сложно ли учить новый язык программирования после JavaScript?

    tundramani
    @tundramani
    JS это вершина развития программирования, я серьёзно
    нет ничего проще и эффективнее, в этом он схож с Си
    можно делать всё - сайты, моб и десктоп приложения, серверы, мк

    Любое приложение, которое можно написать на JavaScript, будет в итоге написано на JavaScript


    возвращаться назад в прошлое тяжело и бессмысленно

    а если например на сервере недостаточно node.js - попробуй Go
    он вроде бы такой же минималистичный

    простота и минимализм это очень хорошо
    хорошо когда твой код работает везде и быстро
    Ответ написан
    3 комментария
  • Сложно ли учить новый язык программирования после JavaScript?

    @frozen_coder
    Java-developer
    Меньше слушайте всех, больше делайте руками. "Вам будет очень сложно" - это субъективная оценка. Подходите к новому языку как к новому (не смотрите на него как на свой старый с другим синтаксисом). Не пытайтесь притащить свои старые привычки на новый язык. Есть некоторые аналогии, но всегда интересуйтесь, а как тут принято делать "это".

    Далее, вам какую задачу решать? Язык выбирают под проект, под задачу, под требования, а не проще. Если говорить о коне в вакууме, то попробуйте Python
    Ответ написан
    Комментировать
  • Почему Prettier в VS Code не форматирует при сохранении?

    @S_Corvin
    1. Выберите VS Code -> View -> Command Palette и введите: Format Document With
    2. Затем Configure Default Formatter... , а затем выберите Prettier - Code formatter .
    Ответ написан
    1 комментарий
  • Как правильно использовать интерцепторы в axios?

    owl1n
    @owl1n
    fullstack developer
    Покажу немного практик, как интерцепторы упрощают жизнь мне, да и многим, в целом.
    Здесь и далее покажу именно использование интерцепторов при работе с авторизацией по JWT (токены).

    1) Подстановка хедера авторизации

    const createSetAuthInterceptor = options => config => {
      if (options.access) {
        config.headers.Authorization = options.access;
      } else {
        delete config.headers.Authorization;
      }
      return config;
    };
    
    const setAuthCb = createSetAuthInterceptor(store.state.auth);
    axios.interceptors.request.use(setAuthCb);


    Здесь мы проверям наличие доступа из стора, а точнее, наличие токена. Далее, подставляем, либо удаляем заголовок.

    2) Следующая практика, это обновление токена (то, о чем вы спросили в комментарии, при окончании сессии и т.д.)

    let refreshTokenPromise;
    
    const createUpdateAuthInterceptor = (store, http) => async error => {
      const message = get(error, 'response.data.message');
      if (!['Token expired', 'Invalid token'].includes(message)) {
        return Promise.reject(error);
      }
    
      if (!refreshTokenPromise) {
        refreshTokenPromise = store.dispatch('refreshToken');
      }
    
      await refreshTokenPromise;
      refreshTokenPromise = null;
    
      return http(error.config);
    };
    
    const updateAuthCb = createUpdateAuthInterceptor(store, axios);
    axios.interceptors.response.use(null, updateAuthCb);


    Здесь мы можем видеть, что при каждом ответе проверяем наличие ошибок и если ошибка соответствует ошибке с токеном, то отправляем обновлять токен и далее снова отправляем тот же самый запрос, который к нам вернулся с ошибкой. Тут грамотно будет проверять не само сообщение об ошибке, а код ответа (401 и т.д.), но тут используется такое решение уже из за специфики бэка.

    В этом же решение, вместо обновления токена, можно отправлять юзера авторизовываться самому, на страницу авторизации. Для этого, конечно же, стоит передавать не экземпляр store, а экземляр роутера, чтобы редиректить юзера. Надеюсь, помог и хоть как то наглядно показал способы применения :)
    Ответ написан
    1 комментарий
  • Какой выбрать node.js фреймворк под небольшой проект?

    YuriyVorobyov1333
    @YuriyVorobyov1333
    Software Developer
    Используйте Express.js это самый простой в освоении фремфорк, под который написано куча библиотек:
    1. авторизация - Passport.js
    2. работа с файлами - multer
    3. ORM - sequelize
    4. сокеты - socket.io
    5. настройка typescript - тут статья
    6. безопасность - helmet


    Плюс у фреймворка есть генератор, который поможет очень быстро поднять приложение без лишних проблем
    Ответ написан
    3 комментария
  • Как работает метод render() в React?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    return возращает в скобках html код

    return не возвращает html код. JSX это лишь синтаксический сахар над JavaScript.

    JSX вида:
    render() {
      return (
        <h1 className="greeting">
          Hello, world!
        </h1>
      );
    }

    транслируется в JS вида:
    render() {
      return React.createElement(
        'h1',
        { className: 'greeting' },
        'Hello, world!'
      );
    }

    результат выполнения render в этом случае будет следующий:
    {
      $$typeof: Symbol(react.element),
      key: null,
      props: { className: "greeting", children: "Hello, world!" },
      ref: null,
      type: "h1",
      _owner: null,
      _store: { validated: false },
      _self: null,
      _source: null,
      __proto__: Object,
    }

    Возвращаемый объект это Virtual DOM Node. По ней библиотека создает элемент в реальном DOM.


    React компилятор перед сборкой парсит данные в файлах компонентов...
    ...Я понимаю что реакт собирает все в ES2015...

    React ничего не собирает. Никаких компиляторов библиотека не имеет. Процесс преобразования JSX в JS называется не компиляцией, а транспиляцией. Транспиляцию JSX в JS выполняют с помощью babel/TypeScript, а сборку обычно осуществляют с помощью библиотеки webpack.

    или же это нормально для ES6

    Нет. JSX не входит в спецификацию ECMAScript 2015
    Ответ написан
    3 комментария
  • Как передать переменную из php файла в tsx файл react + typescript?

    yarkov
    @yarkov
    Помог ответ? Отметь решением.
    declare global {
        interface Window {
            list: string;
        }
    }
    Ответ написан
    2 комментария
  • Как работает websocket на низком уровне?

    bingo347
    @bingo347
    Crazy on performance...
    Вопрос 1
    Браузер инициирует новое tcp соединение на тот же 80 порт сервера или бывают случаи что на другой ?
    WebSocket работает не поверх голого tcp, а поверх http (а тот уже поверх tcp или tls -> tcp). 80 порт стандартный для http, а 443 - для https (http поверх tls). WebSocket по умолчанию использует те же 80 и 443 порты для ws и wss протоколов соответственно. Но никто не мешает использовать кастомный порт. Конкретные порты для конкретных протоколов - это не более соглашения. Порты работают на IP уровне, который ничего не знает о прикладном уровне.

    Вопрос 2
    Что сервер делает с ws пакетами - проксирует их к СП как есть в обертке, или же обертку раскрывает и передает "чистые/сырые" данные далее ?
    Если речь идет о nginx как о реверси прокси, то для него это обычный http запрос, просто клиент очень долго шлет тело запроса, а сервер тело ответа (главное таймауты тут выключить). Так как http в принципе не запрещает серверу начать слать ответ не закончив чтение запроса, все вполне прекрасно работает.

    Вопрос 3
    Как сервер отличает ws от http - по некой сигнатуре - типа по последовательности первых пришедших байт, по которым можно распознать что это именно ws а не http ?
    По http заголовкам. В частности клиент шлет заголовок upgrade в котором говорит, что хочет WebSocket и еще несколько специфичных для WebSocket заголовков, а сервер отвечает статусом 101 и своим набором заголовков. Это и есть WebSocket рукопожатие. Само общение происходит уже в теле запроса и теле ответа.

    Вопрос 4
    Как эти данные передаются в сторону СП - через переменные окружения, или через unix-socket или через tcp стек?
    Если используя последние два варианта, то получается что сервер держит внутри системы соединения с СП до тех пор пока "наружное" tcp соединение между клиентом и сервером не буде закрыто?
    На уровне tcp вообще пофиг сколько времени открыто соединение, какая из сторон в какой последовательности и сколько данных отправляет. Тут лишь то, что клиент может попробовать открыть соединение, сервер его может принять (или отклонить), а после любая из сторон может слать данные другой или закрыть соединение. Ну и плюс есть гарантии, что потерянные данные будут отправлены повторно и порядок получения совпадет с порядком отправки. На уровне http у нас обычный запрос-ответ, просто клиент слишком долго шлет тело запроса, а сервер - тело ответа. На уровне WebSocket у нас в обе стороны ходят MessageFrame'ы, содержащие данные + метаданные и имеющие четкие границы.

    Вопрос 5
    В свою очередь СП это отдельный unix процесс отличный от основного бекенд приложения, которое работает по принципу "спросили - запустился - обработал - сформировал ответ - отправил - завершился" Или же это все то же бекенд приложение только в том случае если с ним установлено ws-соединение, оно не прекращает свою работу?
    Как реализуете, так и будет. Но одно можно сказать точно, соединение должно быть открытым на протяжении всего сеанса обмена сообщениями.
    Важно еще понимать, что в контексте WebSocket нет понятий запрос и ответ (хотя их могут реализовывать нижележащие протоколы), есть лишь понятие сообщение. Каждая из сторон, пока открыто соединение, может в любой момент времени отправлять любое количество сообщений.

    P.S. если обе стороны (и клиент и сервер) не ограничены только http протоколом для общения через tcp (как например это происходит у браузерных приложений), то WebSocket будет лишней нагрузкой как на сеть, так и на вычисления. Лучше взять какой-нибудь бинарный сериализатор, с четкими границами (msgpack, flatbuffer) и гонять данные по raw tcp или tls.
    Ответ написан
    2 комментария
  • Как решить проблему с концентрацией?

    saboteur_kiev
    @saboteur_kiev Куратор тега Организация работы
    software engineer
    Мозг работает так, как он привык работать.

    Все, чего вы сейчас достигли (отвлекаться на свои мысли вместо того, чтобы заниматься текущей задачей), вы нарабатывали долгим и упорным трудом всю предыдущую жизнь.

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

    P.S. С детства такие вещи тренируются. Чем взрослее тем сложнее, и даже факт того что ты осознаешь конкретный недостаток не облегчает того, что избавиться от него тяжело.
    Ответ написан
    2 комментария
  • Как правильно работать с форком github в данном случае?

    @res2001
    Developer, ex-admin
    Сделайте свою ветку от последнего релизного коммита. Когда выйдет новый авторский релиз сделает ребэйз вашей ветки на новый коммит. Но, конечно, никаких гарантий, что не будет конфликтов никто вам не даст. Когда автор изменит тот же код, что и в вашей ветке, то будет конфликт.
    Ответ написан
    Комментировать
  • Как грамотно сохранить локальные изменеия в GIT?

    VladimirAndreev
    @VladimirAndreev
    php web dev
    git checkout -b my_local_branch
    git add .
    git commit -m 'нычка #100500'
    git checkout master
    Ответ написан
    6 комментариев
  • Как сверстать блок с непрозрачным фоном и галочкой?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Фон прозрачный. Непрозрачный = полная заливка.
    2. Бери SVG, не прогадаешь.

    UPD, чтобы не возиться с расчетами, ты можешь сделать закругление псевдоэлементами и использовать тогда gif\png\svg (актуально, если высота не меняется, а только ширина надписи).
    Ответ написан
    Комментировать
  • Какой тег для создания текста лучше использовать?

    Всегда использую тег p но при определенных стилях.
    p {
      font-size: 1.4em;
      font-weight: 600;
    }

    Эти стили конечно не для заголовок)
    Ответ написан
    Комментировать
  • Как более лаконично решить эту несложную проблему?

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y
    return axios.post(`https://api.vk.com/method/${method}`, baseParametres)
      .then(answer => answer.request)
      .catch(answer => Promise.reject(answer.error))

    Или так, что почти то же самое
    return axios.post(`https://api.vk.com/method/${method}`, baseParametres)
      .then(({request}) => request)
      .catch(({error}) => Promise.reject(error))
    Ответ написан
    2 комментария
  • Выдержит ли связка DataTable + editcell.js много записей?

    coderisimo
    @coderisimo Куратор тега JavaScript
    Если речь идет о DataTables , то в районе 1000 работало довольно шустро. Можно использовать пагинацию , чтобы единовременно не перегружать браузер. Вот тест, здесь используют scroller - 5000.000 элементов.
    Ответ написан
    Комментировать
  • Что считается лучшей практикой для динамически созданных объектов?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Установка класса будет менее затратной. И устанавливать его нужно не setAttribute(), а classList.add()
    Ответ написан
    Комментировать