Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
theobroma

Александр Серый

javascript developer (ReactJS)
  • 44
    вклад
  • 5
    вопросов
  • 29
    ответов
  • 48%
    решений
Ответы
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как это понять?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    1)let arr = str.split(' ');
    Возьмет строку, в данном случае 'aa bb cc aa bb aa', разобьет на части используя пробел как разделитель. В результате получим:
    let arr = ['aa', 'bb', 'cc', ' aa', 'bb', 'aa']
    2) Следующий кусок кода просто произведет подсчет одинаковых частей.
    return arr.reduce((acc, rec, index) => {
        return (typeof acc[rec] !== 'undefined')
          ? { ...acc, [rec]: acc[rec] + 1 }
          : { ...acc, [rec]: 1 }
      }, {});
    Рассмотрим его подробнее. Начнем с аргументов:
    acc – последний результат вызова функции, он же «промежуточный результат».
    rec – текущий элемент массива, элементы перебираются по очереди слева-направо.
    index – номер текущего элемента.

    Что собственно происходит:
    -typeof acc[rec] !== 'undefined' проверит есть ли в объекте 'acc' ключ 'rec'.
    - и если мы уже встречали такой( например когда "aa", но уже во второй раз ), тогда изменить значение этого ключа прибавив 1.{ ...acc, [rec]: acc[rec] + 1 }
    - если же такого ключа еще не было, то создадим его со значением 1, ибо он в первый раз попался{ ...acc, [rec]: 1 }
    Ответ написан 19 мар.
    6 комментариев
    Нравится 18 6 комментариев
  • Что мне надо учить, чтобы я смог работать?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Считаю, что таким вот желающим устроиться давно пора "сбиваться в стаи" и вместе прокачивать нужные скилы. Допустим если кто-то захочет выйти на связь , а нету даже почты в описании.
    Добавь в описание профиля хотя бы ссылки на почту и на github. Чтобы можно было оценить приблизительно твой уровень
    Ответ написан 08 янв.
    Комментировать
    Нравится Комментировать
  • Как организовать файловую структуру проекта со стеком MERN?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Создайте третий package.json в основании проекта. Подробнее тут.
    Вот пример содержания package.json
    "scripts": {
            "dev": "concurrently \"cd server && npm start\" \"cd client && npm start \"",
            "build": "cd client && npm run build",
            "install": "(cd server && npm install) && (cd client && npm install)",
            "start:prod": "cd server && npm run start:prod",
            "heroku-postbuild": "npm run build"
        },
        "dependencies": {
            "concurrently": "^3.5.1"
        }
    }
    Ответ написан более двух лет назад
    Комментировать
    Нравится 3 Комментировать
  • Как выбраться из теоретика?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Смотришь это видео и начинаешь писать TodoList как на TodoMVC
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать
  • Хорошие каналы по вёрстке и фронтэнду?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Прям от сердца отрываю:
    1.Jilio Video.
    2.Jilio Stories.
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать
  • Когда начать изучать JavaScript фреймворки?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Пиши без фреймворков сколько сможешь. Например, сначала напиши TodoMVC c помощью JQuery, или вообще на VanillaJS. Потом пробуй писать приложение какое-нибудь, но все еще без фреймворков. Усложняй до тех пор, пока не возникнет чувство, что может быть это можно делать как-то легче. Тогда смотри тот же TodoMVC с React, Angular/ Vue и т.д.
    Для начала с Angular можно посмотреть Tour of Heroes(есть на русском).
    По React - Крестики-нолики.
    Здесь нечто похожее отвечал.
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать
  • Как разобраться в языках программирования?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    1. Нужно научится учиться. Это приходит с опытом, постепенно. Это достаточно индивидуально.
    • Например мне не подходит изучение по книгам вообще. Просматриваю их уже после того, как разобрался в вопросе:) .
    • "Телега не должна ехать впереди лошади". Если что-то пытался смотреть, и оно не вызвало хотя бы малейшего понимания, то откладываем в "длинный ящик", то есть на потом. Ибо явно пропущены ступени в кривой обучения. Ищем их и устраняем. Постепенно опускаемся до того уровня, на котором возникает интерес и понимание.
    • Когда одновременно происходит получение новой информации и легкость ее усвоения- это апофеоз обучения. Другими словами - нужно искать что-то "прущее"

    Это просто пару примеров. Различных подходов и методов есть много...
    2. Теперь по существу. Меня наверно скоро обвинят в скрытой рекламе Codewars. Регистрируемся на ресурсе и парочку месяцев решаем задачки на нужном языке. Например вот простая: "Вам дано два угла треугольника в градусах. Напишите функцию, что возвращает третий угол." Проще некуда...Беремся за уровень сложности 8-7kyu, выше смысла особого нету.
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать
  • Есть ли вырезанная сетка bootstrap 4?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Можно вырезать самостоятельно, как здесь
    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать
  • Где взять халявный хостинг?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Heroku
    Java
    Python
    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать
  • Как поместить в сетку bootstrap 12 колонок 5 блоков?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    scss в помощь
    /* =======================================================
                    Responsive 5 Columns Grid
    ======================================================= */
    .col-lg-2-4{
      @include make-lg-column(2.4)
    }
    .col-md-2-4{
      @include make-md-column(2.4)
    }
    .col-sm-2-4{
      @include make-sm-column(2.4)
    }
    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать
  • Почему gulp собирает pug и scss по 5 - 10 секунд?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Советую разделять таски на девелопмент и продакшин. Вот что я нашел в одном из моих gulpfile:
    gulp.task('compile', ['sass','pug','concat']);
    gulp.task('build', function(callback) {
      runSequence('cleanBuildDir','compile',['jsBuild', 'cssBuild', 'fontsBuild', 'htmlBuild', 'imgBuild','libsBuild'], callback);
    });
    gulp.task('default', ['compile','browser-sync','watch']);

    Команда "gulp" запускает дефолтные(девелопмент) таски.
    Команда "gulp build" делает продакшин версию. Вот сюда (в моем случае это "cssBuild' ) и нужно запихивать rename, minify и т.д. Аналогичный подход и к js, картинкам и прочее.
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать
  • Лучший ресурс для изучения React?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Rem Zolotykh
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 2 Комментировать
  • Обьясните как работает замыкание?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Я понимаю замыкание так: "дочерняя" функция имеет доступ к переменным функции "родительской".
    Другими словами переменная "uniqueID" объявлена внутри функции "celebrityIDCreator", а значит в глобальной области видимости этой переменной нет. В цикле отрабатывает анонимная функция (5 строчка в коде), она же, можно сказать , что "дочерняя". Но эта анонимная функция имеет доступ к переменной "uniqueID"! Хотя переменная и не глобальная, и не была объявлена внутри анонимной функции!
    Ответ написан более трёх лет назад
    4 комментария
    Нравится 1 4 комментария
  • Какой код начать писать на JS?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Был в похожей ситуации чуть более года назад. Очень помогло вот это видео. После него меня "прорвало" в JS и смог уже что-то сам писать-сочинять...Попробуйте вдумчиво посмотреть это видео и написать обычный TodoList используя jquery, только сделать это самостоятельно. Потом конечно можно подглядеть в TodoMVC jquery и vanilla версии.(сначала jq- она легче). Дальше можно смотреть фрейморки( todolist делаем обязательно уже используя их), а потом уже думать про более-менее полезные приложения...Считаю, что такой путь самый гладкий вариант кривой обучения. Попытки сделать сразу нужный и полезный продукт, да еще и качественно, да еще и за деньги - это верный способ захлебнутся и не выплыть. Для подобных задач нужно окрепнуть и прокачать скилл. Всему свое время.
    Ответ написан более трёх лет назад
    5 комментариев
    Нравится 19 5 комментариев
  • Как удалить gulp?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Папку "node_modules" обычно удаляю используя rimraf:
    1.Ставлю пакет глобально через npm.
    npm install rimraf -g
    2. Захожу в консоли в нужную директорию.
    3. Ввожу "rimraf name_of_folder"(например "rimraf node_modules").
    Выше описанный способ подходит, если нужно удалить все подчистую... Если же нужно удалить конкретный пакет NPM, то через нативный uninstall.
    Как еще вариант: подредактировать package.json и сделать "npm install". NPM сейчас подчищает за собой- отсутствующее в файле пакеты удалятся.
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать
  • Как настроить gulp less?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    1. Препятствует прерыванию при ошибке gulp-plumber. Годится для многого: sass, less, pug и т.д.
    2. Интеграция с browser-sync как обычно
    browserSync = require('browser-sync').create(),
    gulp.task('less', function () {
          //здесь всякое разное
          .pipe(browserSync.stream());
    });
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать
  • Какой порядок обучения веб-верстке вы посоветуете?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Здесь проблема даже не SASS, Bootstrap и т.д., а "телеги впереди лошади". Невозможно понять предназначение инструментов не столкнувшись с проблемой, которую они решают! Нельзя понять зачем бензопила если есть ножовка по дереву, пока не начнешь пилить определенные объемы древесины! Да бензопила сложней в понимании и обращении, но ее освоение стоит того...
    Вернемся к Вебу. У меня, к примеру, быстро возникло ощущение, что чего-то не хватает в самом CSS и я начал смотреть на препроцессоры. Вам нужно просто продолжать верстать макеты. Через боль со временем начнут проявляться проблемы и возникнет желание что-то ускорить, что-то упростить. Тогда и начинают искать инструменты для этого.
    Препроцессоры
    1. Сложность будет увеличиваться и захочется, например, писать все для удобства не в одном файла . Тогда станет ясно для чего импорты препроцессоров(нативный импорт CSS лучше не использовать).
    2. Обычно в макете несколько цветов, которые повторяются во многих местах. Их можно присвоить в понятные переменные типа $my-green или $my-orange, которые легко запомнить и не искать hex значения. "$my-orange" проще запомнить чем "#FF8C00", не так ли?
    3. В макете размеры в пикселях, а нужно верстать в em и rem. На этот случай есть конечно лайфхак с 10px в основе вместо 16px, но миксины по конвертации на все случаи жизни. То есть можно применить "em(18)" и 18px скомпилятся в "1,125em" и не нужен калькулятор.
    Не стоить пытаться применить все возможности какой-то технологии сразу. Время придет для всего, но сначала используйте, что считаете нужным именно в данный момент. Попробуйте SASS на уровне "переменные, миксины, нестингы". Это уже будет норм. Рекомендую максимально просто это сделать c gulp и gulp-sass. Чисто для компиляции SASS и без всего остального, пока не созреете на большее.
    Boostrap
    Не стоить учится верстать с бутстрапом. В нем можно подсмотреть как реализована та или иная штука, просто вдохновиться, посмотреть на компоненты, которые вообще могут быть. Но применять его лучше, когда уже верстать не хочется))) А это будет, когда захочется использовать фрейморк для написания приложения. На что можно обратить внимание, так это что такое сетка(grid) и ее реализация. Вот онa используется много где.
    Начать ознакомление можно просто подключив через тэги c CDN . А потом уже можно устанавливать с NPM sass версию, кастомизировать и т.д.. Вообще приступая к изучению любой технологии нужно пытаться сгладить кривую обучения и не хвататься за все сразу.
    Javascript
    На счет JS лучше CodeWars не знаю ничего. Тут подробней отвечал. Потом нужно учить фронтэнд фрейморки, но это уже совсем другая история...
    Ответ написан более трёх лет назад
    1 комментарий
    Нравится 3 1 комментарий
  • Польза от codewars?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    2 года назад CodeWars помог мне выучить JavaScript. Сухая теория не заходила вообще, а вот с практикой совсем другое дело... Решал задачки 8-7 kyu. На уровнях выше начинаются уже не основы языка, а больше упор на алгоритмы, знание математики и т.д. На 7 уровне не должно возникать проблем точно.
    Пишу код для решение на locahost в своем редакторе или IDE. Дебажу в консоли браузера. Когда вижу, что результат похож на правду, копирую код с редактора в окно для решения CodeWars. Проганяю предложенные тесты. Если все ОК, то сабмит, а если нет, то смотрю результаты тестов и допиливаю решение.
    Результаты не открываю пока сам не решу. В топовых и хитрых решения других всегда разбираюсь.
    Не стоит сильно зацикливаться на определенной задачи, которая не получается... Возможно не хватает знаний языка программирования. Бывает, что не могу понять условие задачи как таковое... Можно немного заморочиться, но если не идет, то смело откладываю на потом. Неудачи снижают боевой дух, а это ничем не помогает.
    Ответ написан более трёх лет назад
    1 комментарий
    Нравится 27 1 комментарий
  • Где найти практику по javascript?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Отвечали уже неоднократно Как закреплять основы javascript на практике?
    Краткий ответ уже был написан многими-www.codewars.com.
    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать
  • Какие есть интересные сайты со статьями на тему Frontend?

    theobroma
    Александр Серый @theobroma
    javascript developer (ReactJS)
    Medium
    Главное тэги правильно выбрать
    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать
Оценили как «Нравится»
  • 1
  • 2
  • Следующие →
Самые активные сегодня
  • Forwatters
    Forwatters
    • 9 ответов
    • 0 вопросов
  • firedragon
    Владимир Коротенко
    • 9 ответов
    • 0 вопросов
  • opium
    Пума Тайланд
    • 8 ответов
    • 0 вопросов
  • Василий Банников
    • 7 ответов
    • 0 вопросов
  • yupiter7575
    Yupiter7575
    • 7 ответов
    • 0 вопросов
  • TNPTSYWWCC
    Uneasy Hearts Weigh the Most
    • 6 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации