Задать вопрос
  • Какая нижняя планка для изучения React?

    black1277
    @black1277
    Вольный стрелок
    Нужны желание и мотивация. Изучайте прямо сейчас. Делайте много маленьких и простых приложений, чтобы усвоить основы и понять концепции этого фреймворка. Опыт будет накапливаться, в том числе и на чистом js. Если всё время откладывать и чего-то ждать - не заметите как "поезд уедет".
    Ответ написан
    1 комментарий
  • Как отключить у элемента управление с клавиатуры?

    @ZaharWeb
    Можешь задать атрибуту tabindex отрицательное значение.
    <input tabindex="-1" placeholder="" />

    Если работать не будет(у меня работало), то можно так:
    element.tabIndex = -1
    Ответ написан
    Комментировать
  • Нормально ли это, что в режиме Strict-mode в React-приложении делается 2 запроса?

    black1277
    @black1277
    Вольный стрелок
    Реакт придерживается концепции "чистых" функций. Т.е. таких функций, которые всегда дают одинаковый, предсказуемый результат при одинаковых входных параметрах. В режиме разработки, с включенным strict-mode реакт помогает выявить непредвиденные эффекты и состояния, возникающие в результате нарушения концепции, вызывая дважды все функции, которые он считает "чистыми". Как это работает?
    Предположим, вы написали функцию, которая по сигналу "свет" - включает свет. Но если свет уже включен - функция его выключает. Вы довольны и счастливы - послали сигнал "свет" - свет включился, послали еще один сигнал "свет" - выключился. Но в режиме strict-mode - вы обнаружите, что свет не включается, потому что реакт шлет второй сигнал "свет", который выключает после первого сигнала! И опять, возникает вопрос - да зачем это нужно? А затем, что вы не можете предсказать результат действия сигнала "свет", не зная текущего состояния! Возникнет острая необходимость - включить свет, а вы не знаете - включен он сейчас или нет... Пошлете сигнал "свет", когда он включен - получите выключение.
    Примерно такие варианты поведения выявляет strict-mode.
    Ответ написан
    Комментировать
  • Как конвертировать с HEX или RGB в Android color?

    RAX7
    @RAX7
    function rgbaToAndroid1(rgba) {
      const c = new Uint8Array([
        rgba[2],
        rgba[1],
        rgba[0],
        Math.round(rgba[3] * 255)
      ]);
      return new Uint32Array(c.buffer)[0];
    }
    
    // либо
    function rgbaToAndroid2(rgba) {
      let color = 0;
      for (let i = 0; i < 3; i++) {
        color += rgba[i] * 2 ** ((2 - i) * 8);
      }
    
      color += Math.round(rgba[3] * 255) * 2 ** (3 * 8);
      return color;
    }
    
    console.log(rgbaToAndroid1([255, 122, 107, 1]));
    console.log(rgbaToAndroid2([255, 122, 107, 1]));
    Ответ написан
    Комментировать
  • При клике на карточку товара осуществляется переход на страницу с описанием товара. Как передать информацию через 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, то при отведении мышки плавного перехода не будет.
    Ответ написан
    Комментировать