• Как строить карьеру senior разработчику?

    opium
    @opium
    Просто люблю качественно работать
    вам 33 года уже поздно спрашивать пора уже самому решать что делать в жизни.
    Ответ написан
    3 комментария
  • Почему svg спрайт не отображается в Chrome на локале?

    monochromer
    @monochromer
    DIVeloper
    Для обращения к svg через xlink:href нужен HTTP, локально не работает. Если только не встраивать svg инлайново.
    Ответ написан
    1 комментарий
  • Нужна помощь в настройке gulp + webpack + babel + browsersync + react?

    Alovinglol
    @Alovinglol
    front-end developer
    А почему не использоваться create-react-app?
    Этот инструмент специально сделан для того чтобы можно было легко развернуть react окружение, окружении предоставляет все что нужно чтобы начать быстро работать над React приложением:
    https://github.com/facebook/create-react-app
    Ответ написан
    Комментировать
  • Как в React закрыть фильтры по клику момо?

    yanis_kondakov
    @yanis_kondakov
    https://codesandbox.io/s/jv7p4xj87v

    Я не претендую на правильную организацию стэйтов и прочего. Очевидно, что openSection не должен храниться в OutsideClicked и прочее. Главное, чтобы было понятно, как сделать то, что вы спрашивали
    Ответ написан
    1 комментарий
  • Сохраняют ли порядок ключи в объекте JSON?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    Порядок ключей в объекте JS не гарантируется
    Ответ написан
    Комментировать
  • Как сделать исчезающую/появляющуюся стрелочку "вверх" на React?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    class ArrowUp extends Component {
      state = {
        isVisible: false,
      };
    
      componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
      }
    
      componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
      }
    
      handleScroll = () => {
        if (window.scrollY >= SOME_VALUE  && !this.state.isVisible) {
          this.setState({ isVisible: true });
        } else if (window.scrollY < SOME_VALUE && this.state.isVisible) {
          this.setState({ isVisible: false });
        }
      };
    
      render() { /* ... */ }
    }
    Ответ написан
    Комментировать
  • JS последний элемент массива?

    alvvi
    @alvvi
    export default apathy;
    Как сеньер разработчики бы выбрали последний эллемент массива?

    Наверное, как и все остальные
    array[array.length - 1]

    Чтобы без лишних операций в виде поиска длины массива

    Если тут и есть лишняя операция, то это как раз -1, длина массива - это свойство, ничем от вашего array.last оно не отличалось бы, если бы второе существовало, конечно.
    Ответ написан
    Комментировать
  • Как отследить появление новых элементов в DOM?

    mlnkv
    @mlnkv
    JavaScript Developer
    https://developer.mozilla.org/ru/docs/Web/API/Muta...

    // выбираем нужный элемент
    var target = document.querySelector('#some-id');
    
    // если jQuery
    var target = $('#some-id')[0];
     
    // создаем новый экземпляр наблюдателя
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        console.log(mutation.type);
      });    
    });
     
    // создаем конфигурации для наблюдателя
    var config = { attributes: true, childList: true, characterData: true };
     
    // запускаем механизм наблюдения
    observer.observe(target,  config);
     
    // позже, если надо, прекращаем наблюдение
    observer.disconnect();
    Ответ написан
    7 комментариев
  • Не могу понять принцип работы в react с setInterval & setTimeout?

    dpigo
    @dpigo
    Front-end developer
    Интервалы автоматически не могут остановиться, если не был сохранен их идентификатор и явно не был вызван clearInterval.

    В реакте - тоже самое. Даже если компонент стал неактивным интервалы будут выполняться. Поэтому если не хотите утечек - сохраняйте идентификаторы и явно вызывайте clearInterval в componentWillUnmount.

    Вот посмотрите пример: https://jsbin.com/zefopuw В консоли будет видно, что несмотря на то, что компоненты были удалены - интервалы все еще работают.
    Ответ написан
    1 комментарий
  • Как из js перехватывать субтитры к youtube ролику?

    @Dorothy
    Вообще по хорошему все субтитры можно получить по такой ссылке
    https://www.youtube.com/api/timedtext?hl=ru_RU&v=7Y7LGxinPH0&caps=asr&key=yttt1&expire=1486219007&asr_langs=en%2Cja%2Cfr%2Cde%2Cko%2Cit%2Cnl%2Cpt%2Ces%2Cru&sparams=asr_langs%2Ccaps%2Cv%2Cexpire&lang=en&fmt=srv3


    Это можно сделать для любого видео, для которого есть субтитры. В параметр v надо подставить идентификатор видео из URL, например для https://www.youtube.com/watch?v=7Y7LGxinPH0 в ссылку для получения субтитров нужно подставить 7Y7LGxinPH0, а дальше уже относительно полученного XML обрабатывать субтитры по времени.

    Но можно и просто слушать их. Подключим JQuery к странице с видео:
    var jq = document.createElement('script');
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(jq);


    Подождем когда загрузится библиотека, и можно прописать событие на получение субтитров:
    jQuery.noConflict();
    
    jQuery('body').on('DOMNodeInserted', 'span.captions-text span', function () {
          console.log(jQuery(this).text());
    });
    Ответ написан
    1 комментарий
  • Как вывести на страницу вложенные комментарии на React?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вы в компоненте при вызове самого себя не передаете комментарий. Еще бы хорошо сделать так, чтобы вызов Comment происходил только при наличии комментариев. Да и в комменте вы один раз вызываете Comment, а не список комментов.
    Я бы сделал так. Создал компонент CommentList, в нем сделал вызов текущих комментов Comment в цикле. И в компоненте Comment сделал проверку на наличие комментов, если они есть, вызывал бы CommentList (передавая ему список комментов), тот в свое время опять циклом пройдет по комментам и вызовет компонент Comment, и.т.д.
    Ответ написан
    5 комментариев
  • Как в atom вызвать Web Inspector?

    surefire
    @surefire
    CTRL+SHIFT+I
    Ответ написан
    Комментировать
  • Как связать приложение на React с back-end?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Связь с бекендом по REST API. Отправляете запрос, получаете ответ. Все просто.
    Вообще список задач можно и в localstorage сохранять.
    Но если решили сохранять в базу, то примерно так должно происходить сохранение задач:
    1. Пользователь заполнил форму и нажал "Добавить"
    2. POST запрос на сервер
    3. В случае успеха ответ и сохранение данных в store redux
    4. список обновляется и задача отображается в интерфейсе

    Если нет эндпоинтов на сервере можно написать заглушки на фронте, например, инъекцию липовых данных через connect.
    Или можно сразу написать эндпоинты на сервере. Если работаешь один можно использовать оба варианта. Я обычно сразу пишу эндпоинты.

    Бандл в режиме разработки собирать не надо, webpack dev server его пересобирает налету при каждом изменении. Советую настроить hot reload.

    Так же в современных приложениях часто реализуют server side rendering. Тут масса своих тонкостей и об этом лучше почитать соответствующие статьи.
    Ответ написан
    3 комментария
  • Как заменить символ в строке js?

    zona7o
    @zona7o
    Веб-разработчик
    var str = '../images/patterns/0/0/1/1.png';
    str.replace('1.png', '2.png');
    Ответ написан
    Комментировать
  • Как сделать случайный порядок в массиве?

    SagePtr
    @SagePtr
    Еда - это святое
    Самый простой способ:
    [1,2,3,4,5,6].sort(function(){ return 0.5-Math.random() });
    Ответ написан
    3 комментария
  • В чем отличие cms от framework?

    GM2mars
    @GM2mars
    Сначала рождается бинарный код, потом он идет в школу и становится обычным скриптом. Свою юность он проводит в институте где складывается в "библиотеку". Потом все больше обрастает библиотеками, обычные функции складываются в классы и выходит уже сформировавшийся фреймворк, готовый пробовать себя в деле. Опробовав себя в различных сферах, он останавливается на чем то конкретном и становится CMS, потому что уже не ищет приключений и новых свершений, его устраивает то, чем он занимается, и некоторые считают его профессионалом в своем деле.
    Ответ написан
    2 комментария
  • В чем отличие cms от framework?

    CMS - это "полуфабрикат" сайта, т.е. немного настроил и готов сайт.
    Framework - это надстройка над языком программирования, т.е. более "крутой" инструмент для создания продукта.
    Ответ написан
    2 комментария
  • JQuery parents().get(2) против parent().parent().parent()?

    Smileek
    @Smileek
    Спасибо, веселенькая задачка получилась.:)
    Тестим вот на этом:
    <div id="i1"><div id="i2"><div id="i3"><div id="i4"></div></div></div></div>
    <div id="info"></div>

    Вот так:
    var x, dt, dt2;
    var iter = 100000;
    dt = new Date();
    for (var i = 0; i < iter; i++)
    {
        x = $("#i4").parent().parent();
    }
    dt2 = new Date();
    $("#info").text(dt2 - dt);
    				
    dt = new Date();
    for (var i = 0; i < iter; i++)
    {
        x = $("#i4").parents().get(2);
    }
    dt2 = new Date();
    $("#info").text($("#info").text() + ":" + (dt2 - dt));
    

    На заданном примере выигрывает parents().get(2). 3398:2910
    Далее делаем 12 вложенных элементов и прогоняем пример из комментария — пять parent()-ов против parents().get(5): с огромным перевесом выигрывает get(5) — 5374:3954.
    А вот get(3) проигрывает parent().parent().parent() — 3406:3880.

    Получается, что выбрать все 12 элементов и в них найти третий, дольше, чем три раза прыгнуть вверх по дереву.

    Наконец, вернемся к первому варианту с четырьмя элементами, и попробуем воспользоваться полученным родителем.
    var x, dt, dt2;
    var iter = 10000; /* <-- В 10 раз уменьшим, а то зависнем */
    dt = new Date();
    for (var i = 0; i < iter; i++)
    {
       $("#i4").text($("#i4").parent().parent().attr("id")); /* <-- Запишем id родителя в текст потомка */
    }
    dt2 = new Date();
    $("#info").text(dt2 - dt);
    				
    dt = new Date();
    for (var i = 0; i < iter; i++)
    {
       $("#i4").text($("#i4").parents().get(2).attr("id"));  /* <-- Попробуем сделать то же самое */
    }
    dt2 = new Date();
    $("#info").text($("#info").text() + " " + (dt2 - dt));
    

    И вот тут нас ждет сюрприз: $("#i4").parents().get(2).attr is not a function
    arr.get(i), по сути, то же, что и arr[i], то есть мы получим просто Object.
    Для того, чтобы воспользоваться jQuery-функциями, придется обернуть его в денежный знак:
    $("#i4").text( $( $("#i4").parents().get(2) ).attr(«id»));
    От этого мы и потеряем в производительности: 2665:2973.

    Мораль:
    1) Всегда найдутся варианты использования, которые лучше для одного варианта и хуже для другого.
    2) Эффект от производительности или ее потери будет только на больших числах — в самом первом примере мы выиграли 0,4 секунды за 100000 (!) итераций.
    3) Поэтому поступайте, как велит эстет внутри Вас: мне, скорее всего, в реальном примере было бы удобнее получить jQuery-объект и дважды воспользоваться parent()-ом. С другой стороны, восемь раз я бы писать parent() не стал: религия не позволяет.
    Ответ написан
    2 комментария
  • Как верстать страницы с уникальными стилями и анимацией?

    rim89
    @rim89
    программист-велосипедист
    И какие вообще есть практики верстки в таких случаях?

    варианта , собственно 2 - 1 раз загрузил и тянешь его везде , но уже из кэша браузера
    либо грузится постоянно свой кусок для каждой страницы.
    artlebedev.ru - плохой пример, почему не отдавать все минифицированным
    Как это выглядит на бэкенде?

    что именно? в вопросе ничего про бэк нету , только фронт затрагивается
    Ответ написан
  • Проверять вёрстку на переполнение?

    qork
    @qork
    { background: #F00B42 }
    https://habr.com/company/htmlacademy/blog/254171/
    Вёрстка проходит тест на переполнение контентом. Вёрстка не ломается:
    • При добавлении в элементы большего количества текста.
    • При использовании картинок с неподходящими размерами.
    • Текст не должен выпадать из объектов.
    • Переполнение контентными блоками не приводит к нарушению сетки.


    Тоже по теме:
    https://habr.com/company/2gis/blog/246831/
    https://isqua.ru/blog/2016/06/19/crash-test-viorstki/

    Можно быстро смотреть результат при включенном designMode
    https://developer.mozilla.org/ru/docs/Web/API/Docu...
    Ответ написан
    Комментировать