Задать вопрос
  • Как реализовать вращение массива?

    @awenn2015
    Веб-разработчик самоучка
    Если кто-то будет гуглить и не найдет для себя ответа на вопрос, то вот универсальная реализация, перемещение элемента со смещением соседей по индексам whom и where, может быть полезно в ui где с помощью drag&drop перемещаются элементы в списке или карточки, для вывода сортируясь по полю order

    interface Todo {
      id: number
      order: number
      title: string
    }
    
    interface Test {
      whom: number
      where: number
      expected: number[]
    }
    
    const data: Todo[] = [
      { id: 1, order: 1, title: 'delectus aut autem' },
      { id: 2, order: 2, title: 'quis ut nam facilis et officia qui' },
      { id: 3, order: 3, title: 'fugiat veniam minus' },
      { id: 4, order: 4, title: 'et porro tempora' },
      { id: 5, order: 5, title: 'laboriosam mollitia et enim quasi adipisci quia provident illum' },
      { id: 6, order: 6, title: 'qui ullam ratione quibusdam voluptatem quia omnis' },
      { id: 7, order: 7, title: 'illo expedita consequatur quia in' },
      { id: 8, order: 8, title: 'quo adipisci enim quam ut ab' },
      { id: 9, order: 9, title: 'molestiae perspiciatis ipsa' },
      { id: 10, order: 10, title: 'illo est ratione doloremque quia maiores aut' },
    ]
    
    function swapTodos(todos: Todo[], whom: number, where: number) {
      if (whom === where) return todos
    
      const result = (() => {
        if (whom < where) {
          const start = todos.slice(0, whom)
          const neighbors = todos.slice(whom + 1, where + 1)
          const tail = todos.slice(where + 1, todos.length)
    
          return [...start, ...neighbors, todos[whom], ...tail]
        } else {
          const start = todos.slice(0, where)
          const neighbors = todos.slice(where, whom)
          const tail = todos.slice(whom + 1, todos.length)
    
          return [...start, todos[whom], ...neighbors, ...tail]
        }
      })()
    
      return result.map((it, i) => ({ ...it, order: i + 1 }))
    }
    
    const tests: Test[] = [
      { whom: 1, where: 5, expected: [1, 3, 4, 5, 6, 2, 7, 8, 9, 10] },
      { whom: 0, where: 9, expected: [2, 3, 4, 5, 6, 7, 8, 9, 10, 1] },
      { whom: 4, where: 9, expected: [1, 2, 3, 4, 6, 7, 8, 9, 10, 5] },
      { whom: 8, where: 3, expected: [1, 2, 3, 9, 4, 5, 6, 7, 8, 10] },
      { whom: 9, where: 0, expected: [10, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
      { whom: 9, where: 4, expected: [1, 2, 3, 4, 10, 5, 6, 7, 8, 9] },
    ]
    
    function runTests() {
      console.log('-----------------')
    
      for (const [i, { expected: expect, whom, where }] of tests.entries()) {
        console.log(`[Test ${i + 1} start]`)
    
        const result = swapTodos(data, whom, where)
        const compare = result.map((it) => it.id)
    
        if (JSON.stringify(compare) !== JSON.stringify(expect)) {
          console.warn(`[Test ${i + 1} failed]: Результат не соответствует тому что ожидалось`)
          console.log('Result => ', JSON.stringify(compare))
          console.log('Expected => ', JSON.stringify(expect))
        } else {
          console.log(`[Test ${i + 1} passed]: Тест успешно пройден`)
        }
    
        console.log('-----------------')
      }
    }
    
    export default runTests


    Ps: Обновление сортировки было моим личным требованием, если нужно можно убрать
    Ответ написан
    Комментировать
  • Как вывести сумму двух текстовых полей?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Это базовые особенности языка. Объясняются в любом учебнике.
    В джаваскрипт оператор "+" является двойственным. В зависимости от ситуации он может быть как оператором сложения (чисел), так и оператором конкатенации (склеивание строк).

    Здесь оба операнда являются строками, поэтому знак плюс будет оператором конкатенации.
    let s1 = '1';
    let s2 = '2';
    console.log(s1 + s2); // '12'


    Здесь оба операнда являются числами, поэтому знак плюс будет оператором сложения.
    let n1 = 1;
    let n2 = 2;
    console.log(n1 + n2); // 3


    Могут быть ситуации, когда один из операндов будет числом, а другой – строкой.
    В этом случае числовой операнд будет преобразован в строку
    let s1 = '1';
    let n2 = 2;
    console.log(s1 + n2); // '12'


    Когда вы получаете значения инпутов со страницы, они всегда будут строчного типа, во всех ситуациях. Поэтому, прежде чем выполнять над этими значениями математические операции, их нужно преобразовать в числа
    parseInt() - в целое число
    parseFloat() - в число с плавающей точкой
    Number() - можно еще так
    +n2 - или так (это уже своего рода хак, основанный на приведении типов)

    Number(element1.innerHTML) + Number(element2.innerHTML)


    Все подробности здесь https://learn.javascript.ru
    Ответ написан
    Комментировать
  • Как сконвертировать sass в scss?

    Softwider
    @Softwider
    https://github.com/ManuelSch/sass-scss-converter

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

    Спасибо Николю Николай Шабалин
    Ответ написан
    Комментировать
  • На хостинге не могу обновить папку с css даже удалил ее, а сайт опять на прошлом css как исправить?

    space2pacman
    @space2pacman Куратор тега CSS
    Просто царь.
    59ef4ea21088c952123419.png
    Ответ написан
    Комментировать
  • Лучший способ распределить загрузку изображений в html для разных устройств?

    peterzubkoff
    @peterzubkoff
    Если надо ускорить загрузку:

    1. CDN, например, Cloudflare + получите бесплатный SSL-сертификат (https).

    2. Nginx перед апачем, для посетителей с узким каналом.

    3. Оптимизация самих картинок через любые удобные инструменты. Я использую ImageOptim, в нём несколько инструментов из командной строки сразу.
    Есть ещё optimizilla.com

    4. Прогрессивный джипег: dfbd0a0544f9.jpg Конвертируется в фотошопе (при сохранении как jpg надо выбрать «Прогрессивный, 3») или в командной строке с помощью ImageMagick:
    convert -strip -interlace Plane -quality 80 input-file.jpg output-file.jpg


    Статья про ImageMagick на хабре

    5. Включите Gzip сжатие, хотя оно мало поможет, ибо .jpg — уже сжатый формат.

    6. PageSpeed Insights
    Ответ написан
    Комментировать
  • Jade. Как передать переменную из одного шаблона в дргой, подключаемый?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    В Jade нет такой красивой конструкции, но есть миксины.
    // container.jade
    mixin container(modifier)
        .container(class=modifier)
    
    // index.jade
    include ./container // надо явно заинклюдить файл с миксином
    
    +container('container-one')
    +container('container-two')
    +container('container-three')


    В данном конкретном случае можно даже проще:

    // container.jade
    mixin container()
        .container&attributes // http://jade-lang.com/reference/attributes/
    
    // index.jade
    include ./container
    
    +container().container-one
    +container().container-two
    +container().container-three
    Ответ написан
    1 комментарий
  • Как организовать процесс создания собственного css-фреймворка?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    normalize.css нужен, ибо его задача невилировать различия в оформлении в различных браузерах. И что вы подразумеваете под "не ставился с задачей"?

    Организуйте фреймворк максимально модульно, разделите на независимые компоненты и используйте less. У вас там будут и переменные, и возможность собрать css под нужные параметры с нужными компонентами, и сборщик на js.
    Ответ написан
    4 комментария