• При клике на карточку товара осуществляется переход на страницу с описанием товара. Как передать информацию через localStorage?

    Rst0
    @Rst0
    localStorage.setItem( 'name',  value );  // пишите что хотите
    localStorage.getItem( 'name' );  // читайте

    localStorage.setItem( 'name',  JSON.stringify( object ));  // пишите в т.ч. объект 
    let  object = JSON.parse( localStorage.getItem( 'name' ) );  // читайте в т.ч. объект

    добавьте в функцию product(кстати где она?) запись в хранилище
    $('a1').on('click', product);
    Ответ написан
  • Как в input type='range’ сделать прокрутку видео?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Если сразу после объявления элемента видео пытаться прочитать продолжительность видео, то браузер не успевает извлечь из видеофайла эту информацию. Чтобы обойти эту ситуацию, достаточно чтение video.duration обернуть функцией onloadeddata или onloadedmetadata. Т. е., строку
    range.setAttribute('max', video.duration);
    переписать так:
    video.onloadeddata = () => range.setAttribute('max', video.duration);
    Ответ написан
    Комментировать
  • Случайно добавил видео в commit. Как удалить из commit только видео?

    SagePtr
    @SagePtr
    Еда - это святое
    Если вы не запушили изменения, но хотите из последнего коммита выкинуть некоторые файлы, то можете это сделать командой
    git rm --cached [filename]
    При этом файл не будет удалён из директории, а только помечен на удаление (без --cached удалит и сам файл, если он не нужен), затем сделайте
    git commit --amend
    В результате вместо нового коммита это удаление применится к старому коммиту и аннулирует предыдущее добавление этого файла, по итогу в него не попадёт файл.
    Ответ написан
    Комментировать
  • Как пропускать через split() символы?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно сторонней библиотекой, например, he.js ("he" — от "HTML Entities"), декодировать все эти конструкции в символы.
    Ответ написан
    Комментировать
  • Как использовать переменные js-а в css в react?

    Kentavr16
    @Kentavr16
    long cold winter
    В реакте все javascript.нет темплейтов. Значит любой инлайновый стиль к примеру можно редактировать как скрипт
    Ответ написан
    Комментировать
  • Как правильно использовать паттерн MVC?

    black1277
    @black1277
    Вольный стрелок
    Касательно вашего случая - напишите схематично каркас вашего приложения, оптимально с вашей точки зрения, без конкретной реализации методов. А затем задайте себе вопрос - в скольких местах потребуется править уже готовый код, если понадобится добавить нового персонажа, или новое действие, или новый предмет, или изменить свойства уже существующего объекта или изменить его поведение. Чем меньше потребуется правок при изменениях и расширениях - тем ближе код к оптимальному.
    А пытаться применить некий паттерн ради паттерна - значит загнать себя в угол.
    Ответ написан
    Комментировать
  • Как убрать checked с input radio при клике на него?

    0xD34F
    @0xD34F Куратор тега JavaScript
    А что за задача-то решается? Нужен гибрид радиокнопки и чекбокса?

    Вариант раз, радиокнопки:

    let checked = null;
    
    $('input').click(function() {
      checked = checked === this.value ? null : this.value;
      this.checked = !!checked;
    });
    
    // или
    
    document.querySelectorAll('input').forEach(function(n) {
      n.addEventListener('click', this);
    }, function({ target: t }) {
      t.checked = !!(this[0] = this[0] === t ? null : t);
    }.bind([]));

    Вариант два, с заменой радиокнопок чекбоксами:

    const $checkboxes = $('input').change(function() {
      if (this.checked) {
        $checkboxes.not(this).prop('checked', false);
      }
    });
    
    // или
    
    const checkboxes = document.querySelectorAll('input');
    const onChange = e => checkboxes.forEach(n => n.checked &&= n === e.target);
    checkboxes.forEach(n => n.addEventListener('change', onChange));

    Вариант три - вместо того, чтобы изменять значение свойства checked вручную, добавьте ещё одну радиокнопку, которая будет обозначать отсутствие выбора.
    Ответ написан
    1 комментарий
  • Как в .filter() использовать несколько условий?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    .filter должен возвращать булево значение. TRUE - оставить элемент, FALSE - удалить

    Если все условия должны совпасть, то:
    function Validation(arr) {
      return arr.filter((el) => {
        return typeof el.age === "number"
          && el.full_name !== undefined
          && el.full_name.charAt(0) === el.full_name.charAt(0).toUpperCase()
          && el.gender !== undefined
          && el.gender.charAt(0) === el.gender.charAt(0).toUpperCase()
          && el.note !== undefined
          && el.note.charAt(0) === el.note.charAt(0).toUpperCase()
          && el.state !== undefined
          && el.state.charAt(0) === el.state.charAt(0).toUpperCase()
          && el.city !== undefined
          && el.city.charAt(0) === el.city.charAt(0).toUpperCase()
          && el.country !== undefined
          && el.country.charAt(0) === el.country.charAt(0).toUpperCase()
    }


    function firstLetterIsUpper(str) {
      return typeof(str) === 'string'
        && str.length
        && str.charAt(0) === str.charAt(0).toUpperCase()
    }
    function Validation(arr) {
      return arr.filter((el) => {
        return typeof el.age === "number"
          && firstLetterIsUpper(el?.full_name)
          && firstLetterIsUpper(el?.gender)
          && firstLetterIsUpper(el?.note)
          && firstLetterIsUpper(el?.state)
          && firstLetterIsUpper(el?.city)
          && firstLetterIsUpper(el?.country)
    }
    Ответ написан
    6 комментариев
  • Как в кнопках bootstrap убрать/уменьшить рамку при нажатии?

    black1277
    @black1277
    Вольный стрелок
    измените свойство
    outline: none;
    Если bootstrap 5-й версии - можно добавить кнопкам класс shadow-none
    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
      <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
      <label class="btn btn-outline-primary shadow-none" for="btnradio1">Radio 1</label>
    
      <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
      <label class="btn btn-outline-primary shadow-none" for="btnradio2">Radio 2</label>
    
      <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
      <label class="btn btn-outline-primary shadow-none" for="btnradio3">Radio 3</label>
    </div>
    Ответ написан
    Комментировать
  • Как в кнопках bootstrap убрать/уменьшить рамку при нажатии?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    https://github.com/twbs/bootstrap/blob/main/scss/_...

    А если уберёте, то как вы будете отличать отличать состояние "в фокусе"? Это затруднит навигацию по странице с помощью клавиатуры.
    Ответ написан
    2 комментария
  • Какую литературу посоветуете по паттернам проектирования?

    black1277
    @black1277
    Вольный стрелок
    Швец А. Погружение в паттерны проектирования (2018) - современное продолжение темы банды четырех с примерами на разных языках.
    The Clean Architecture - by Robert C. Martin (Uncle Bob) - но это не совсем новенькое
    Ответ написан
    3 комментария
  • Как можно сократить этот код?

    @n1ksON
    мидл
    let arr = [10, 20, 30, 50, 235, 3000];
    arr.forEach(item => ['1', '2', '5'].includes(String(item)[0]) && console.log(item))
    Ответ написан
    8 комментариев
  • Почему у стрелочной функции из объекта контекст виндоу?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    На learn.javascript, например, неплохо написали:
    Стрелка => ничего не привязывает. У функции просто нет this.
    При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения.


    В вашем примере с литералом объекта можно добавить для понимания:
    const obj = {
      w() {
        console.log('w', this);
      },
      x: function () {
        console.log('x', this);
      },
      y: this,
      z: () => {
        console.log('z', this);
      },
    };
    
    obj.w(); // obj
    obj.x(); // obj
    console.log('y', obj.y); // Window
    obj.z(); // Window


    Запись литерала объекта не создаёт свой контекст: на момент записи this тот же, что и снаружи:
    const a = this; // Window
    const obj = {
      b: this, // тоже Window 
    }
    
    a === obj.b // true
    Ответ написан
    1 комментарий
  • Почему нельзя писать transition в hover?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    <div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam est fugit mollitia nisi quam qui! Aliquam aliquid consequatur dolorem ea, expedita ipsam laborum, mollitia praesentium, quidem sed voluptas?</div>
    
        <style>
            #test {
                color: red;
            }
            #test:hover {
                color: green;
                transition: color 3s ease;
            }
        </style>

    Просто запустите этот код. И поймёте разницу.

    Или лучше так:

    #test {
                color: black;
                transition: color 1s ease;
            }
            #test:hover {
                color: red;
                transition: color 5s ease;
            }


    Переход, указанный в hover, будет применён именно в этом состоянии – когда мышь наведена.
    Переход, указанный в обычном состоянии будет применён при уходе мыши с элемента.
    В данном примере видно разницу скорости анимации.
    Если для hover переход не указан, будет применён переход обычного состояния и при наведении мыши, и при ее уходе. Если переход указан только для hover, то при отведении мышки плавного перехода не будет.
    Ответ написан
    Комментировать
  • Как отправить все файлы из папки на сайт с сервера?

    black1277
    @black1277
    Вольный стрелок
    Скорее всего вам нужен метод для раздачи статичных файлов:
    app.use(express.static(path.join(__dirname, 'public')))

    все файлы, лежащие в папке public (можно задать свою) могут быть получены клиентом. Нужно только сформировать список существующих файлов и выдавать их url на фронт.
    Ответ написан
    1 комментарий
  • Когда вы используете type, а когда - intefcace, в React?

    profesor08
    @profesor08
    Если надо описать некоторый перечень значений, то type:

    type ResponseStatus = "error" | "success";

    Если надо описать объект, то intefcace:

    interface ApiResponse {
        status: ResponseStatus;
    }


    И никто не запрещает написать через type:

    namespace Api {
        type Status = "error" | "success";
    
        type Response = {
            status: Status;
        };
    }
    Ответ написан
    1 комментарий
  • Где этот код можно запустить?

    Seasle
    @Seasle Куратор тега JavaScript
    Этот код написал для Node.js с использованием стандартного модуля crypto. Для запуска Вам потребуется установить среду исполнения Node.js, создать директорию для работы, в которую необходимо будет поместить Ваш файл и package.json (npm init -y). В приведённом Вами коде используются ES6-импорты (ESM-импорты), которые сразу не будут работать в Node.js, т.к. в нём используются CommonJS-импорты. Для решения данной проблемы у Вас есть два пути:
    1. Добавить "type": "module"в package.json:
    {
      ...
      "type": "module",
      ...
    }

    2. Изменить подключение модулей в исходных кодах:
    - import * as crypto from 'crypto';
    + const crypto = require('crypto');

    Вывод:
    $ node .
    cVoADkhcldK+mYC3Id5vhkxOr4NwVspTcgF56RiRG0CzcnOcBwcELKi1YnBNySmZugpjJNHuCU7ePjwVadqfAw==
    Ответ написан
    Комментировать
  • Стандарты сообщений коммитов?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Это точно не `chore`, так как относится к продакшен коду.
    `chore` - это всё что угодно вокруг кода, если не заведено более узкого типа.
    Линтеры (если не используете `style`), настройка CI (если не используете `ci`), всевозможный дополнительный тулинг вроде `husky` или `lint-staged`, незначимое обновление зависимостей и так далее.

    Ваш список типов коммитов по ссылке - это лишь один из популярных вариантов договорённости между разработчиками (я к тому, что есть и другие).
    Более того, он может быть спокойно расширен другими типами, если вам это нужно, камнями никто не закидает.

    Если хотите строго следовать, то ваша правка - либо `fix`, либо `feat`.
    Я же для себя и для команды ввёл дополнительный тип `temp` (от `temporal`) как раз для такого толка изменений.
    Когда "приходит время", можно просто поиском по этому типу быстро его найти и сделать `revert`.

    Ещё расширил типом `nvm` (от `nevermind`) для исправлений в духе "забыли пробел в readme" и прочего незначительного.
    Хоть формально это может быть выражено через `docs`, `refactor`, `style` или `fix`, от наличия таких коммитов в changelog'e никому ни горячо, ни холодно, поэтому они просто в него не включаются.

    Расширяйте конфигурацию до необходимого вам и вашим изменениям, и всё будет хорошо.
    * Однако, опыт и здравый смысл подсказывает, что чем типов меньше, тем меньше вероятность ошибки и тем больше шанс, что ими будут пользоваться. Без фанатизма, короче :)
    Ответ написан
    1 комментарий