boga-net

const obj = {
  a: 1,
  b: this,
  с: this.a,
}

"scripts": {
    "dev": "webpack-dev-server --mode development --open"
}

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS
            ]
        }]
    }
};

вот пример - https://codepen.io/pespantelis/pen/ojwgPB?editors=1010,
но здесь используется версия vue/0.12.16/vue.min.js

Получается, что объявляем две переменных <...> То есть это равносильно

function toMatrix(arr) {
  const len = arr.length;
  const side = Math.ceil( Math.sqrt(len));
  if( side * side - len !== 1) throw "Bad array length";
  let result = [], index;
  for(let row = 0; row < side; row++) {
    result.push([]);
    let currentRow = result[result.length - 1];
    for(let col = 0; col < side; col++) {
      index = side * row + col;
      if(index > len) break;
      if(index === len) {
        currentRow.push(0);
      } else {
        currentRow.push(arr[index]);
      }
    }
  }
  
  return result;
}


toMatrix([1,2,5]) // [[1,2],[5,0]]
toMatrix([1,2,3,4,5,6,7,8]) // [[1,2,3],[4,5,6],[7,8,0]]

function toMatrix(arr) {
  const len = arr.length;
  const side = Math.ceil( Math.sqrt(len));
  if( side * side - len !== 1) throw "Bad array length";
  let result = [];
  for(let row = 0; row < side; row++) {
    result.push( arr.slice(side * row, side * (row+1))); // выкусываем подряд строку, side элементов
  }
  result[side - 1].push(0); // в последниюю строку дописываем 0
  
  return result;
}

toMatrix([1,2,5]) // [[1,2],[5,0]]
toMatrix([1,2,3,4,5,6,7,8]) // [[1,2,3],[4,5,6],[7,8,0]]

setTimeout(function(){
  console.log($('.slide').width())
}, 4);

1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

<div id="sound-btn-wrapper">
  <div class="btn btn-start">On</div>
  <div class="btn btn-stop">Off</div>
</div>

const audio = new Audio('...');

$('#sound-btn-wrapper').on('click', '.btn', function() {
  audio.pause();

  if ($(this).hasClass('btn-start')) {
    audio.currentTime = 0;
    audio.play();
  }
});