Alex_87

• Так как у нас одна или несколько практически идентичных страниц, логично собрать весь функционал (скрипты, стили) для всего в один файл. Вместо того, чтобы создавать отдельные файлы для каждой страницы.
  
  
• Так как весь контент статический, нет нужны в каких либо CMS или серверной генерации. Весь сайт можно скомпилировать в готовые html файлы которые будут максимально быстро отдаваться клиенту.
  
  
• Так как предполагается, что пользователи будут время от времени возвращаться на ваш сайт, нужно настроить кэширование файлов.
  
  
• Так как на сайте предполагается размещение контактов, важно предоставить возможность доступа к сайту offline.
  

Как подходить к организации кода для сайта?

Мне непонятно, как в зависимости от типа сайта, мы подбираем технологию для организации кода. Как понять, какая технология и для какого сайта уместна. И вообще, какие технологии существуют?

В сети нет нормальной статьи/видео по этой теме. Чуть ниже, я напишу просто список непонятных слов, фраз, которые многих вгоняют в ступор.

"подходы разделение кода, шаблонизация, модули, МVC, state, организация кода, биндинг, реактивное программирование, SPA, MPA, Virtual DOM, Нода, Веб-компоненты, Templates, Custom Elements API.” … Что и откуда выходит? Есть ли какие-то блок схемы, на которых это можно увидеть... книги? Можно ли это всё описать одни словом - Паттерны?"

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

Можно ли дойдя с помощью цикла до свойства hosts понять, что оно является объектом?

console.log(typeof({}));
// object

for (var key in data) {
  if(typeof(data[key]) == "object") {
    console.log (key + " is object");
  }
}

Просто мне необходимо в этом случае, добавлять в тело цикла(или условия) после самого объекта(в данном случае data), или .объект или [свойство].

Кстати, с помощью какого метода, я смогу это всё добавлять? Мне нужно добавить либо data.hosts либо data[свойство]

data["hosts"][data["hosts"].length] = {name: 'web3'}
// или
data["hosts"].push( {name: 'web3'} );

const data = {
  user: 'ubuntu',
  hosts: {
    0: {
      name: 'web1',
    },
    1: {
      name: 'web2',
      null: 3,
    },
  },
};

// классически на if
function getIn(obj, parr) {
  if(typeof(obj[parr[0]]) == "undefined") {
    return null;
  } else {
    if(typeof(obj[parr[0]]) == "object") {
      if(parr.length > 1) {
        return getIn(obj[parr[0]], parr.slice(1))
      } else {
        return obj[parr[0]]
      }
    } else {
      return obj[parr[0]];
    }
  }
}


// защита от дурака (когда некорректные параметры) + switch case
function getIn(obj, parr) {
  if (
    typeof(obj) != "object" ||
    typeof(parr) != "object" ||
    parr.length == "undefined" ||
    parr.length == 0
  ) return null;
  switch (typeof(obj[parr[0]])) {
    case "undefined":
      return null;
    case "object":
      return (parr.length > 1)? getIn(obj[parr[0]], parr.slice(1)):obj[parr[0]]
    default:
      return obj[parr[0]];
  }
}

// еще короче 
function getIn(obj, parr){
  return !(
    typeof(obj) != "object" ||
    typeof(parr) != "object" ||
    parr.length == "undefined" ||
    parr.length == 0
  )?
    typeof(obj[parr[0]]) == "object" ?
      (parr.length > 1)?
        getIn(obj[parr[0]], parr.slice(1)):obj[parr[0]] :
         obj[parr[0]] ?
          obj[parr[0]]: null:
          null
}

// и стрелочной функцией
const getIn = (obj, parr) => !(
    typeof(obj) != "object" ||
    typeof(parr) != "object" ||
    parr.length == "undefined" ||
    parr.length == 0
  )?
    typeof(obj[parr[0]]) == "object" ?
      (parr.length > 1)? getIn(obj[parr[0]], parr.slice(1)):obj[parr[0]] :
       obj[parr[0]] ? obj[parr[0]]:null :
    null;

function getIn(obj, parr) {
  let o = obj;
  for(let i=0; i< parr.length; i++) {
    o = o[parr[i]];
    if(typeof(o)=="undefined") return null;
  }
  return o;
}

1. цикл в цикле – лучше обойтись одним, если можно. Поиск можно заменить на indexOf()
   
2. в качестве накопителя уникальных строка как-то нетрадиционна. Обычно массив, или ключи объекта. Или, изысканно, Set – и потом будет интересовать его длина (размер, size, кардинальность : )
   

const text2 = 'You know nothing Jon Snow';

function countUniqChars(str) {
  return new Set(str.split('')).size;
}

countUniqChars(text2) // 13

const countUniqueChars = str =>
  new Set(str).size;

const countUniqueChars = str => [...str]
  .reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])
  .length;

const countUniqueChars = str => Array
  .from(str)
  .reduce((acc, n, i, a) => acc + (i === a.indexOf(n)), 0);

const countUniqueChars = str => Object
  .keys(Object.fromEntries([].map.call(str, n => [ n, 1 ])))
  .length;

const countUniqueChars = str => str
  .split('')
  .sort()
  .filter((n, i, a) => n !== a[i - 1])
  .length;

const countUniqueChars = str =>
  (str && str.match(/(.)(?!.*\1)/g)).length;

Как настроить localStorage?

он смотрит по индексу

он отмечал

Он прекрасно работает с простым индексом

var btns = document.querySelectorAll('.btn');
  var clipboard = new ClipboardJS(btns);

var btns = document.querySelector('.btn');
  var clipboard = new ClipboardJS(btns);

$('#viewed').on('click', function() {
  
 $(this).removeClass("forImg");
});

$(".groups tr").click(function(){
	$(this).css( "background", "red" );
})