• Как сделать кнопку копировать в буфер обмена?

    @vladdimir
    Верстальщик
    Как-то так можно:
    //...
    	function copyResult() {
    	    navigator.clipboard.writeText(result.textContent)
                    .then(() => console.log('Done'))
                    .catch((err) => console.log(err))
    	}
    Ответ написан
    Комментировать
  • Как пронумеровать поля в записях?

    @vladdimir
    Верстальщик
    Что-то я красиво написал слишком

    Точняк, я даже кровавую слезу пустил от умиления!

    Я так понял, что порядок не имеет значения, а я это понял из этого фрагмента красоты:
    запись number=100 имеет pr=1; запись number=101 имеет pr=2; запись number=223 имеет pr=4; запись number=190 имеет pr=5
    Должно стать:
    запись number=100 имеет pr=1; запись number=101 имеет pr=2; запись number=223 имеет pr=3; запись number=190 имеет pr=4

    То, можно так:
    const numbered = records.map((el, index) => ({...el, pr: index + 1}) ) // numbered - новый массив с нужной нумерацией pr
    // если нужно изменить на месте, то через forEach изменить свойство pr
    Ответ написан
    Комментировать
  • Как записать результат функции в переменную?

    @vladdimir
    Верстальщик
    Есть функция возвращающая строку
    ...
    если написать let abc = function(arg), то abc равняется undefined

    Попробуйте
    let abc = /* please give me a string */ function(arg)

    Если не получится, то возможны только 3 варианта:
    1. Наиболее вероятный: это баг языка, придется смириться и никогда не пользоваться этими багнутыми строками и функциями.
    2. Функция асинхронна. Функция возвращает строку когда-нибудь потом.
    3. Функция не возвращает строку. Но, постойте, этого ведь не может быть!
    Ответ написан
    Комментировать
  • Как запустить gulp таск с параметром?

    @vladdimir
    Верстальщик
    Но таск не перестал запускаться как Starting 'anonymous'...

    Потому что функция анонимная.
    const html = (lang) => {  // (1)
    // 1 - первый вызов происходит, когда вы подключаете таску и передаете ей свои аргументы.
      return () => { // (2)
    // 2- эта функция возвращается после передачи аргументов
    // и вызывается, когда вы таску запускаете.
    // как видите, у нее нет имени.
        return gulp.src("source/*.njk")
          .pipe(rename({suffix: lang}))
          .pipe(gulp.dest("build"));
      };
    }
    exports.html = html;


    const html = (lang) => {
    // объявляем функцию
      const html = () => {
        return gulp.src("source/*.njk")
          .pipe(rename({suffix: lang}))
          .pipe(gulp.dest("build"));
      };
      return html;
    }
    exports.html = html;
    Ответ написан
    1 комментарий
  • Когда создавать служебный блок в БЭМ?

    @vladdimir
    Верстальщик
    Присоединяюсь к ответу выше — с дизайном проще.
    Можно сделать так:
    <div class="hero-section__grid">
      ...
        <div class="hero-item hero-section__hero-item">
          <h2 class="hero-item__header">Hero Item 1</h2>
          ...
        </div>
    </div>


    Или так:
    <div class="hero-section__grid">
      ...
        <div class="hero-section__content">
          <div class="hero-item">...</div>
        </div>
        <div class="hero-section__pagination">...</div>
        <div class="hero-section__footer">...</div>
    </div>

    Или еще как, выбирая оптимальный вариант для конкретного проекта.

    Учитывая, что вам хочется делать элементы элементов, стоит перечитать руководство, методология отлично документирована. Хорошие статьи про БЭМ рассказывают про опыт и набитые шишки других разработчиков, и подразумевают, что вы методологией уже владеете. Если вы не владеете, они вас только запутают. Вводные статьи — вольный и урезанный пересказ официальной документации, причем часто гораздо худшего качества.
    Ответ написан
    Комментировать
  • Как скрыть элементы при прокрутке блока?

    @vladdimir
    Верстальщик
    Вот он какой - интерфейс для людей!)))

    А по теме: событие scroll и размер прокрутки страницы в помощь) Код не дам, лень.
    Ответ написан
    Комментировать
  • События MouseEvent: вешать на каждый объект или делать роутер аля switch (classname)?

    @vladdimir
    Верстальщик
    Смотрите по ситуации, для однотипных элементов лучше использовать второй вариант, делегирование событий. Главное следите за сложностью логики обработчика, чтобы сами в нем не запутались со временем.
    Ответ написан
  • Как лучше подключать картинки/стили: в js или в html?

    @vladdimir
    Верстальщик
    Почитайте подробнее доку, вот по теме: https://webpack.js.org/loaders/file-loader/
    После описания апи, внизу есть примеры разного использования. Не обязательно через js вставлять, вы в настройках вебпака указываете откуда и куда копировать картинку, в html вписываете текущий урл, при сборке пути заменяются на необходимые.

    Вот еще неплохой ресурс по вебпак: https://survivejs.com/webpack/foreword/
    Покрывает очень многие вопросы в достаточно сжатой форме, возможно знакомство будет удобнее как раз по этому ресурсу, чем по офф доке.
    Ответ написан
    1 комментарий
  • Как работает Map и WeakMap?

    @vladdimir
    Верстальщик
    Вы же знаете, что объекты по ссылкам хранятся?
    map.get(k1) // ссылается на тот же объект, которым вы задали значение в set
    map.get({a:1}) // уже совершенно другой объект
    
    {a:1}, {a:1} // это два разных объекта
    map.set({a:2}, 'oops') // вы не сможете достать или удалить это значение, потому как единственная 
    //ссылка на ключ лежит в самом Мапе

    Почитайте больше о том, как работают объекты.

    Поправка, вы можете достать подобный ключ, например так:
    for (let key of map.keys()) {
      console.log(map.get(key))
    }
    Ответ написан
    Комментировать
  • Правда ли, что гарантия на исправление ошибок на год - это стандартная практика?

    @vladdimir
    Верстальщик
    Я как-то вечную гарантию давал на бесплатное исправление багов, с пометкой, что баги - это поведение и вид противоречащий тех. заданию или мешающий работе приложеньки. И при условии, что в коде не копались левые дяди, после которых и перестало работать. Тоесть, большинство доработок и изменений через меня, и не бесплатно.

    Можно просто прописать срок реагирования на запрос на исправление большой. Будет клиент ждать 2 недели, пока вы ему 10 минутную хотелку внедрите?)

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

    Стандартной практикой такие общие условия, как вы описали, я бы не назвал. Больше похоже на рабский контракт.
    Ответ написан
    Комментировать
  • Программирование деформирует человека как личность?

    @vladdimir
    Верстальщик
    Вы так пишите, будто кто вас заставил программировать, и сейчас заставляет, прям из под палки. Но вы же сами выбираете кем, когда, как и сколько работать, заниматься спортом и чем угодно еще.
    Вопрос ваш не корректен. В конкретно вашем случае, вас не профессия деформирует, а вы сами себя гробите. Своими жизненными выборами. Вам бы в себе разобраться, а это к психотерапевту.
    Ответ написан
    Комментировать
  • Стоит делать разметку так?

    @vladdimir
    Верстальщик
    От диватоза к дивафобии...
    цель, как можно меньше дивов - плохая цель. Дивы вообще это неплохо, а нейтрально. Плохо != нейтрально. С таким же успехом можно вместо дивов использовать секции и гордится своей семантичностью 80 уровня. Вполне нормально использовать дивы, если они вам нужны, для группировки или оформления или еще чего, что вам надо выразить и что не имеет какого-либо выраженного контекста.
    Конструктивная цель - изучить семантические значения тегов, как пример.

    На счет структуры - норм, но я бы ввел дополнительные обертки для группировки логотипа заголовка с текстом в отдельные секции (не обязательно этим тегом). Потому что, вместе они образуют законченные блоки, и имеют сильные связи между собой.
    div.logo
      img.logo-img
      p.logo-caption
    ...
    div.banner
      h1
      p
    Ответ написан
  • Какую важность имеет параметр "семейное положение" в составление портрета пользователя?

    @vladdimir
    Верстальщик
    Ну, может иметь важность, когда вы знаете, что продукт интересен только окольцованным. Например, маркетологи увидели, что двуспальные кровати обычно покупают вместе и не принимают решения о покупке в одиночку. Или покупателя интересуют разные авто в зависимости от того, женат ли он и есть ли у них дети. Тогда имеет смысл говорить с покупателем не только о том, что важно ему, но и подкинуть парочку аргументов для жены\мужа.
    Это просто примеры, не воспринимайте их как реальность.

    Любые данные имеют значение, если вы можете их использовать (во-первых, знаете как ими пользоваться. Во вторых, есть место для их использования). Если вы не умеете ими пользоваться, не понимаете, зачем они вам, что с ними делать и как, то лучше не трогайте. Обозначьте, что они есть и достаточно. Главное, поймите, что стать рекламщиком по ответам на тостере не получится.
    Ответ написан
    Комментировать
  • Как работает вот это место: [...rangeOfNumbers(startNum, endNum - 1), endNum]?

    @vladdimir
    Верстальщик
    [...rangeOfNumbers(startNum, endNum), endNum];
    этот код ставит последним элементом массива endNum, а перед ним разворачивает рекурсивные вызовы самой себя. Три точки просто разворачивают массив, который возврашает функция.
    const arr1 = [1,2]
    
    const arr2 = [ ...arr1, 3,4] // [1,2,3,4]

    C пониманием тернарного оператора, так понимаю все норм?
    Ответ написан
    Комментировать
  • Можно ли сделать мвп при этом не наговнокодив?

    @vladdimir
    Верстальщик
    Имхо, тут нет объективных метрик. Время само по себе понятие субъективное, потому как для нас, людей, обладает ценностью.
    Возможно, если ваш мвп сегодня не выйдет, то он потеряет свой потенциал, потребность закончится или ее покроет кто-то другой. А возможно, он сегодня как раз и не нужен, а вот завтра понадобится.

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

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

    Я пытаюсь сказать, что сколько вы по времени выйграте или проиграете зависит сугубо от вашего проекта и вашего понимания требований проекта. В одном случае, вы ускоритесь вдвое, если изначально заложитесь в архитектуры и обозначите жесткие рамки качества кода. В другом, достаточно заложить минимальные стандарты качества, и это будет быстрее всего. В третьем, Рахул победит.
    И никто из посторонних не скажет вам, какой ваш случай, просто потому что мы не вовлечены в проект и не несем за него хоть какую-либо ответственность.
    Ответ написан
    1 комментарий
  • Как правильно отсортировать объекты по дате в формате "240389"?

    @vladdimir
    Верстальщик
    Сначала нормализуете данные, чтобы можно было работать через объект Date (слева список методов, справа общее описание) , а потом делаете то, что вам нужно.

    Подумал, что редко работаю с датами, решил потренироваться, набросал небольшой топорный пример того, как это можно реализовать:
    https://jsfiddle.net/e8ct1kza/7/
    Ответ написан
    Комментировать
  • Как вставлять разметку в js код, чтоб не было уязвимости XSS?

    @vladdimir
    Верстальщик
    Если ваши данные artist.value и song.value контролируемы и вы им доверяете - получаете с бэка или храните на фронте, и никогда они не приходят от пользователя через формы, то делайте как хотите.
    Если нет, createElement это один из вариантов. Если он вам кажется громоздким, лишнее всегда можно спрятать в функцию.
    Можно хранить шаблоны прям в html, в теге template, брать оттуда, подставлять данные в нужные места и отрисовывать.
    Ответ написан
    Комментировать
  • Чем плохо массовое использование async функций?

    @vladdimir
    Верстальщик
    Вы вот когда рашили, что асинх там не нужен, чем руководствовались? Подумайте об этом, вспомните и будут вам доводы, которые вы ищете.
    Конечно, можно просто ждать, когда вопрос увидит телепат, который по аватарке узрит, что там за код и почему он не нужен.
    Ответ написан
    Комментировать
  • Что не так с этим кодом?Вроде бы ссылается на json гугла и должен собирать информацию,но input не работает?

    @vladdimir
    Верстальщик
    У вас в скрипте нет обработчика событий на этом инпуте, вроде такого:
    document.querySelector('.search-input').addEventListener('change', makeSearchGoogle);
    Ответ написан
  • Переменные (variables) или Привязки (bindings)?

    @vladdimir
    Верстальщик
    Глава 2. Структура программы. Привязки (стр 42)
    ... Чтобы получать и сохранять значения, в JavaScript
    есть штуки, называемые привязками или переменными: ...

    Похоже, что томат, что помидоры.
    Ответ написан
    Комментировать