• Не добавляются contributions на гитхабе, как исправить?

    magerrrr
    @magerrrr
    JS Software Engineer
    Варианта два:

    1. Там, где статистика есть "Contribution settings" и стандартно активна опция только Activity Overview, можете включить Private Contributions, если коммитите в приватный репозиторий чей-то

    2. Если вы создали свой репозиторий, например, приватный, создали ветку (не мастер) и запушили такую ветку - пока вы не смержите с мастером свою ветку в статистике не увидите
    Написано только что
    Ответ написан
  • Почему возникает TypeError?

    magerrrr
    @magerrrr
    JS Software Engineer
    В Вашем случае когда в массиве значение под индексом 0 равно undefined функция вылетает с ошибкой.
    Для того, чтобы избежать такого поведения необходимо добавить проверку на undefined

    В вашей функции это будет выглядеть следующим образом:
    const convertText2 = (text) => {
    
      if (text[0] === undefined) {
        return 'Undefined value!';
      }
    
       return text[0].toUpperCase() === text[0] || text === '' ? text : reverse(text)
    };


    по хорошему перед тем как писать логику функции Вам необходимо проверить что text это массив (text.isArray()), раз Вы обращаетесь к его первому элементу.
    + раз уж это массив, а Вы дальше будете писать логику по прохождению каждого элемента массива, то перед этой логикой для каждого элемента проверку на undefined и null необходимо добавить
    Ответ написан
  • Что означает конструкция var Name = (function(){})()?

    magerrrr
    @magerrrr
    JS Software Engineer
    В прошлом в JavaScript не было лексического окружения на уровне блоков кода.

    Так что программистам пришлось что-то придумать. И то, что они сделали, называется «immediately-invoked function expressions» (аббревиатура IIFE), что означает функцию, запускаемую сразу после объявления.
    Это не то, что мы должны использовать сегодня, но, так как вы можете встретить это в старых скриптах, полезно понимать принцип работы. (продолжение на learn.javascript.ru)

    Также можно прочитать на medium с примерами и подробным объяснением.
    Ответ написан
  • Как адаптивно выровнять элементы списка?

    magerrrr
    @magerrrr
    JS Software Engineer
    Делаем меню (класс .list_none) flex элементом и указываем ему свойство justify-content как использовать доступное пространство, кстати о доступном пространстве - его (в данном случае ширину элемента) надо указать в классе меню - .header_menu как 100% например)

    Другие значения CSS свойства justify-content смотри по ссылке.
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        background: #783c11;
    }
    
    .header {
        width: 100%;
        height: 100px;
        margin: 0 auto;
        background: #fcf3e3;
        display: flex;
        align-items: center;
    }
    
    .header_logo {
        height: 100px;
    }
    
    .header_menu {
        margin-left: 25px;
        width: 100%;
    }
    
    .list_none {
        list-style: none;
        display: flex;
        justify-content: space-around;
    }
    
    .menu_item {
        margin-left: 7%;
    }
    
    .link {
        text-decoration: none;
        color: #000;
        font-size: 30px;
    }
    Ответ написан
  • Закрытие тега в JSX?

    magerrrr
    @magerrrr
    JS Software Engineer
    Это правило существует, но не у Prettier, а у ESlint.

    Дело в том, что у prettier есть 21 правило, которое можно указать в конфигурационном файле. Эти правила описаны тут. Их так немного, так как у prettier свой узкий круг задач, так сказать своя философия (о ней можно почитать тут).

    То, что интересует Вас у ESlint называется self-closing-comp)

    Документация по добавлению и настройке ESlint тут
    Ответ написан
  • Как в React брать значения из адресной строки и отправлять запрос?

    magerrrr
    @magerrrr
    JS Software Engineer
    Query-string создана для упрощения работы с адресной строкой всех браузеров.

    Использование:

    const queryString = require('query-string');
     
    queryString.parseUrl('https://foo.bar?foo=bar');
    //=> {url: 'https://foo.bar', query: {foo: 'bar'}}
     
    queryString.parseUrl('https://foo.bar?foo=bar#xyz', {parseFragmentIdentifier: true});
    //=> {url: 'https://foo.bar', query: {foo: 'bar'}, fragmentIdentifier: 'xyz'}
    Ответ написан
  • Как проверить равенство элементов?

    magerrrr
    @magerrrr
    JS Software Engineer
    Для решения задачи важно, чтобы код был читабельным и понятным.

    const arr = [1, 2, 3, 2, 3, 4];
    
    const replaceTheSameElementsToX = array => {
        const result = [];
        let coincidence = 0;
    
        for(let i = 0; i < array.length; i++) {
            array.map(el => el === array[i] ? coincidence++ : coincidence);
    
            if (coincidence === 1) {
                result.push(array[i]);
            } else if (coincidence > 1) {
                result.push('x');
            }
            coincidence = 0;
        }
        return result; 
    }
    
    replaceTheSameElementsToX(arr); // [1, "x", "x", "x", "x", 4]


    или тоже самое с помощью методов массива:

    const arr = [1,2,3,2,3,4];
    
    const findTheSameNumbers2 = array => array.map((elementOfBaseArray,i,baseArray) => baseArray.reduce((coincidence, currentValue, index, elementAsArray) => elementOfBaseArray === elementAsArray[index] ? coincidence + 1 : coincidence, 0) === 1 ? elementOfBaseArray : 'x');
    
    findTheSameNumbers2(arr); // [1, "x", "x", "x", "x", 4]
    Ответ написан
  • Насколько хорошей практикой считается использование и классового и функционального подходов в одном проекте?

    magerrrr
    @magerrrr
    JS Software Engineer
    С точки зрения React, эти два компонента эквивалентны. В официальной документации React ничего не сказано о планах отказываться от компонентов классов в ближайшем будущем. Поэтому можете не беспокоиться  —  переписывать весь код вам не придётся. Но отвечая на Ваш вопрос, изучив документацию React и Medium, а также поучавствовав в коммерческих проектах, хочу отметить, что хорошей практикой будет поддержка кодовой базы в едином стиле насколько это возможно. Пусть не сразу, пусть постепенно, но переход к функциональным компонентам будет верным. Функциональные компоненты позволяют писать код элегантнee.

    Советую почитать интересную свежую статью, где сравниваются функциональные и классовые компоненты и рассматриваются Хуки.

    Более новые версии React могут начать добавлять в функциональные компоненты возможности несовместимые с классовыми, оставляя последние в невыгодном положении, как это было с первыми до версии 16.8.

    "Мы намерены охватить все возможные варианты использования классов в хуках, но мы всё ещё будем поддерживать классовые компоненты в обозримом будущем. В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов их переписывать. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами" — документация React
    Ответ написан
  • Как сделать рендер на реакте при первой загрузке?

    magerrrr
    @magerrrr
    JS Software Engineer
    Для этого в React есть хук useEffect (https://ru.reactjs.org/docs/hooks-effect.html)

    Чтобы получить JSON при первой загрузке страницы нужно импортировать хук useEffect. У этого хука (хук = функция) есть 2 обязательных параметра - первый это функция (callback) и второй массив зависимостей (если его оставить пустым, хук сработает всего один раз, как Вам и требуется в задании).

    Предлагаю пример кода ниже:
    С помощью fetch делаем get запрос за данными, сервер вернет данные и после мы из них получаем json с помощью соответствуюего метода и затем выводим в консоль

    import React, { useEffect } from 'react';
    
    const Page = () => {
      useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(response => response.json())
          .then(json => console.log(json))
      }, []);
    
    export default Page;
    Ответ написан