• Npm, Webpack, NodeJs с чего начать?

    @deliro
    Фронт развился в какую-то неправильную сторону, это правда
    Вкатиться на фронт очень сложно, это тоже правда. Причём, необоснованно сложно.

    Я бы выделил два пути, как можно въехать во всё это:
    1. Создать приложение на Vue или React по туториалам, затем разобраться, как и зачем оно всё
    2. Разобраться как и зачем оно всё (aka Vanilla JS), потом заняться реактами

    Имхо, вариант №2 предпочтителен и более прост, потому что на варианте №1 есть огромный шанс застрять, никогда не разобравшись, как оно работает а при любых нешаблонных ошибках поднимать лапки.

    Что здесь нужно понимать:
    1. Есть разные версии ES (ecmascript), они все обратносовместимые. Программист может писать на любой версии, какая ему нравится. Обычно берут последнюю стабильную

    2. Для проекта обычно есть две версии ES: та, на которой пишут программисты и та, которая исполняется в браузере или в ноде (об этом позже). Например, программист пишет на ES8, а код транслируется на ES5. Это позволяет использовать последние предсмертные хрипы писки моды JS при этом запуская всё на древнейшем говне вроде IE11. Перегонкой кода из JS/TS одной версии в JS другой версии занимается транспилятор: babel / esbuild / swc

    3. Новые версии JS содержат расширения стандартной библиотеки, которых нет в старых браузерах (например Array.from, Object.entries и т.п.). Эти дырки затыкают полифиллы, они же shims. Самая популярная дырозатыкательная машинка — corejs

    4. Весь код очевидно не пишется в одном файле и может быть написан на TypeScript (он же TS), JSX/TSX (реактовый синтаксис). Всё это нужно собрать в один или несколько файлов, то есть скомпоновать. Этим занимается bundler: часть webpack / esbuild / spark / etc.

    5. Этот же парень отвечает за то, чтобы та тысяча библиотек, что лежит в node_modules, попала в итоговый условный main.js, но не целиком, а только то, что используется. Последнее называется tree shaking (типа навозную кучу node_modules потрясли как дерево, что упало — то не нужно)

    6. (то самое "позже) Код может исполняться не только в браузере пользователя, но и на сервере без браузера вообще. Это нужно для SSR aka Server Side Rendering. SSR — это такой глобальный вонючий костыль для SEO. Дело в том, что стандартные SPA приложения содержат один DOM элемент, куда цепляется всё остальное приложение вроде реакта или вью, которое уже содержит всю вёрстку прямо в JS. Но не все поисковики согласны с таким подходом и некоторые (не будем показывать пальцем на яндекс) не умеют выполнять JS и индексируют только тот самый единственный DOM элемент, который существует на этапе отдачи страницы в браузер. Это уже потом к нему JS движком дорисовывается весь остальной сайт. Соответственно, сайт индексируется от слова "никак", а некоторым это важно. Например, когда SPA — это не админка. Для этого есть два выхода: страницы, важные для SEO, рендерить чем-то не-реактовым или сделать SSR — делать за яндекс работу на сервере (на ноде), представляя в уме, что у нас есть DOM и браузер (на самом деле нет), на выходе получать начальное состояние HTML, отдавать его клиенту (браузеру или поисковому роботу), а JS'ом её т.н. "гидрировать", иными словами — оживлять.

    7. webpack отвечает за всё вот это сверху в том или ином виде. Это такой кухонный комбайн, в который вкидываешь кучу хлама в одном виде, а получаешь другую кучу хлама в другом виде.

    Начать советую с parceljs, который сильно проще в освоении, чем webpack. И на написании кода максимально без библиотек.
    Ответ написан
    1 комментарий
  • Как понять когда ставить указатель?

    EvgenyMamonov
    @EvgenyMamonov Куратор тега Go
    Senior software developer, system architect
    Указатель, по сути, хранит адрес каких то данных (переменной, структуры, слайса и т.д.).
    Иными словами он "указывает" на область данных.

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

    Например:
    type BigStruct struct {
        field1 int
        filed2 string
        field3 uint
        field4 []byte
        ...
        field50 string
    }

    Предположим, что после создания этой структуры и заполнения всех её полей она занимает в памяти 300мб.

    Если вы сделаете функцию, которая будет принимать такую структуру как агрумент, например вот так
    func Report(s BigStruct)
    то при каждом вызове этой функции вся структура (300мб) каждый раз будут копироваться.
    Пример:
    s := BigStruct{}
    // заполняем поля
    Report(s)


    Чтобы избежать такой мега нагрузки - можно передавать не копию данных, а указатель, т.е. адрес в памяти, где хранится сама структура.
    Для этого нужно объявить агрумент функции как указатель, т.е. ставим *.
    func Report(s *BigStruct)
    А код уже будет выглядеть вот так.
    s := BigStruct{}
    // заполняем поля
    Report(&s) // тут добавился & - берём адрес структуры, а не саму структуру

    Или второй вариант
    // создаём переменную s сразу с типом указатель на BigStruct
    s := &BigStruct{}
    // заполняем поля
    Report(s) // поскольку s уже является указателем - & тут не нужен


    В общем * используется:
    - когда нужно объявить переменную
    var s *BigStruct
    - когда нужно прочитать/записать значение, которое храниться по адресу указателя
    var i *int
        i = new(int)
        *i = 10 // пишем значение
    
        fmt.Printf("i: %v\n", i)
        fmt.Printf("*i: %v\n", *i)

    Вывод будет примерно таким
    i: 0xc0000160d8 (это адрес памяти, где лежит значение переменной i)
    *i: 10 (а это её значение)


    & (амперсанд) используется когда нужно получить адрес переменный.

    Еще один вариант применения - если нужно иметь возможность модифицировать данные у параметра функции. Если нужны примеры - дайте знать, я напишу.
    Ответ написан
    12 комментариев
  • Дайте совет, куда и как двигаться дальше?

    @mkone112
    Начинающий питонист.
    Если отрыть сейчас hh, и посмотреть первые десятки резюме, то окажется что 99% из них - дерьмо (простите за мой французский). 99% людей не способны связать даже несколько слов в осмысленный текст, а гитхаб который они прикладывают - скорее минус чем плюс. Вангую что у тебя тоже самое, и то что ты считаешь за резюме и нормальный код - скорее всего ими не являются. Ты даже не сообразила приложить их чтобы получить конструктивную критику. Какого ответа ты ждешь? "Старайся лучше"?
    Ответ написан
    1 комментарий
  • Обязательно ли высшее образование именно в топ 100 вузе страны для релокации?

    @mkone112
    Начинающий питонист.
    Образование обязательно, вуз и диплом - нет. Но боюсь шансов у тебя немного, ведь воспользоваться поиском - слишком сложно для тебя.
    Ответ написан
    Комментировать
  • Как исправить Warning: A component is changing an uncontrolled input to be controlled?

    1) Почему изначально ты присваиваешь пустую строку, если потом у тебя там лежит объект useState('')? Если ты знаешь структуру объекта contact, сделай пустую структуру с nullами в полях. Если я не прав, и в contact в итоге лежит строка, тогда совсем непонятно зачем ты пытаешся деструктуризировать ее как объект.
    2)Ты изначально присваиваешь пусту. строку в contact и тутже пытаешся ее деструктуризировать {...contact} ты книжки читал как эт оработает или чужой код копируешь? https://developer.mozilla.org/en-US/docs/Web/JavaS...
    3) В сообщении об ошибке обычно пишется компонент, который вызвал ошибку, и в твоем случае это явно какойто input елемент, а ты пишешь что проблема на уровне формика.
    4) //initialValues={'' || {...contact}} не работает Почитай как работает оператор || и к чему равно Boolean("") этот код никогда не будет работать.
    Проблема в том, что ты не знаешь элементарных вещей в JS Core а пытаешся использовать деструктуризацию, сайд еффекты в операторах стравнения, начни с книжки, просто почитай базу Javascript
    Ответ написан
    2 комментария
  • Для чего нужны redux-thunk?

    mmmaaak
    @mmmaaak
    Чтобы не делать асинхронные вызовы в других местах, а делать их при диспатчинге экшна
    Ответ написан
    2 комментария
  • Где делать ajax запросы: в хуках или в redux actoins?

    если используешь thunk или saga там и продолжай делать запросы, ничего не поменялось.
    Ответ написан
    Комментировать
  • Какие требования к junior front-end разработчику на 2020-2021 год?

    fomenkogregory
    @fomenkogregory
    Юниор софтварный инженер
    Так вы же смотрите вакансии и сами не можете ответить от чего впадаете в ступор? Тогда как вам другие на это ответят?
    П.с. бутстрап и жиквери мусор, не трать время.
    Ответ написан
  • Почему появляется ошибка console.log is not a function?

    lazalu68
    @lazalu68
    Salmon
    Давайте оставим в коде только строки имеющие отношение к проблеме, тогда всё будет понятно:

    console = false;
    ...
    console.log('something');
    // Uncaught TypeError: console.log is not a function
    Ответ написан
    Комментировать
  • Где готовить данные для визуализации?

    alex4answ
    @alex4answ Автор вопроса
    Дополнительно к ответу Vladimir Lewandowski .

    Я забыл основной посыл связки умный + глупый - Переиспользуемость в том числе между разными проектами.т
    Глупый не должен ничего знать о redux и тд, может делать что угодно, если это позволит переиспользовать его в другом проекте, где например не используется redux
    Ответ написан
    Комментировать
  • Альтернатива гита для Unity?

    gbg
    @gbg
    Любые ответы на любые вопросы
    Это вопрос не git, а вопрос выбора утилиты для мерджа. Посмотрите, что сами разрабы Unity предлагают
    Ответ написан
    Комментировать
  • Зачем во Vue запросы выносят в services?

    Kozack
    @Kozack Куратор тега Vue.js
    Thinking about a11y
    1. Для упрощения кода. Скажем, чтобы не писать каждый раз всю конструкцию аля
      axios.get(ENDPOINT + '/api/' + API_METHOD, {
        params: {
          id
        }
      })
      .catch
      ...

      Делается обёртка, условная функция getUser(id). В неё выносится вся логика по работе с запросом, определение маршрутов АПИ, обработка ошибки и так далее. Наружу торчит только одна функция и параметр.
    2. При работе с TS это проще типизировать. Намного легче описать типы принимаемых параметров и возвращаемый тип для нескольких функций, чем описывать универсальную конструкцию для доступа к любым методам апи.
    3. Ну и наконец: сервис можно вызывать прямо в компонентах. Вызывать методы АПи не обязательно внутри Vuex. Доже чаще это должно выполняться внутри отдельных компонентов, каждый из которых работает с одним-двумя апи, а не со всем набором.
    Ответ написан
    4 комментария
  • Какие знания требуются для js trainee?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Чё-то смеюсь. Раньше вы хотели быть джуном. То, что за прошедшие два с лишним года вы свои амбиции поумерили - это хорошо. Правда, не до конца - ну да это ничего, ещё через два года наверняка дозреете до осознания того факта, что не бывать вам программистом. Отсюда кстати и ответ на непосредственно заданный вопрос - вам никакие знания не требуются. Успокойтесь, и идите работать в такси.
    Ответ написан
    2 комментария
  • Возможно ли упростить код?

    cannibal_corpse
    @cannibal_corpse
    Верстальщик руками
    Возможно! :)
    Ответ написан
    4 комментария
  • Потеря this в mapDispatchToProps. Почему dispatch не имеет его?

    Krasnodar_etc
    @Krasnodar_etc
    fundraiseup
    Блин, я даже не знаю, что сказать... Давайте по-порядку
    1) По каким материалам вы учите? Они точно не устарели? Меня очень смущает ваш constructor, потому что пропсы и так автоматически записываются в this.props. Получается, что вместо всего метода можно написать просто
    class Interface extends React.Component{
      elements = null;
    ...
    }


    2) Тут я могу быть не прав, но, насколько я помню React.createRef можно использовать только внутри классового компонента. Функция mapStateToProps никак не связана с вашим классом Interface, у неё совсем другой контекст

    3) Теперь непосредственно о вашей проблеме. Редьюсер, в котором находится switch/case никак не связан с вашим классом Interface. Советую ещё раз перечитать в документации как работает this. У вас он указывает на функцию, в которой вы к нему обращаетесь. Не могу подсказать точнее, потому что меня немного вводит в ступор строка dispatch(action){

    Могу сказать только три вещи:
    - Никогда не обновляйте стейт вот так: this.state.SOME_FIELD = ... . Используйте для этого только this.setState({ SOME_FIELD: ... }) . Иначе компонент может не отрисовать новые данные
    - Редьюсер и redux никак не связаны со стейтом и вашими классами. У них абсолютно разный контекст выполнения. this в Реакте работает точно так же, как и должен работать в JS-e
    - Очень советую пройти официальный туториал по реакту - ссылка
    Ответ написан
    2 комментария
  • Prompt условие для пустого значения и для отмены?

    max_shane
    @max_shane
    Javascript / Node.js dev
    Если нужно, то могу порекомендовать начать изучать Javascript. С помощью него можно выполнить эту задачу.
    Что еще тут сказать то.
    Могу также порекомендовать сайт kwork.ru, там можно за дешево найти исполнителя заданий.
    Этот сайт не для того чтобы для вас выполняли задания, а для ответов на вопросы.
    Ответ написан
    8 комментариев
  • Как правильно выстроить "композицию" компонентов в приложении?

    kirbi1996
    @kirbi1996
    1 вариант не очень, зачем верстать два компонента если можно обойтись одним.
    2 зачем что то прикидывать опять таки с новым компонентом.
    3 да хороший вариант, все сверстал и в зависимости от state например сделал проверку если {state && (<>контент>)}
    3 вариант выйгрышнее всего потому что не нужны лишние компоненты, сразу показываешь то что нужно. Хотя в некоторых случаях например если проверка на то авторизованный ли пользователь то можно отображать разные компоненты как в первом случае, где первый компоненты это навигация по авторизации, а второй это навигация по личному кабинету
    Ответ написан
    Комментировать