Алексей Уколов

1. Увеличивается размер ресурса.
2. Теряется атомарность изменений - поменяли какое-то свойство в CSS, весь файл инвалидировался в кеше, клиенту нужно заново качать картинку, хотя она и не изменилась.
3. Дизайнер не сможет просто отредактировать изображение.
4. Нельзя посмотреть изображение в редакторах.

\DB::table || use DB;

Проблема у вас в том, что вы после удаления снова читаете значения из инпутов добавления и заново добавляете этот ключ. Самое простое - чистить инпуты после добавления:

function renderObj(e) {
    e.preventDefault();
    let str = '';
    let inputKey = document.querySelector('.input-key').value;
    let inputValue = document.querySelector('.input-val').value;

    if (inputKey !== '' && inputValue !== '') {
      obj[inputKey] = inputValue;

      for (let key in obj) {
        str += `Ключ: ${key}, Значение: ${obj[key]} <br>`
      }
    }
    output.innerHTML = str;    
    
    document.querySelector('.input-key').value = '';
    document.querySelector('.input-val').value = '';
  }

Но вообще, конечно, ваш код нужно переделать. Должно быть три функции - одна на добавление ключа в объект, другая на удаление и третья на рендеринг объекта. Сейчас у вас первая и третья смешаны в одну, отсюда и проблемы.

Вы не там поставили immediate invocation. Должно быть так, чтобы получилось замыкание:

$('#elem').click((() => {
  // Основное тело функции будет исполнено один раз при установке обработчика
  // Таким образом создастся замыкание для переменной count
  let count = 0;

  // А вот здесь уже вернётся настоящий обработчик клика,
  // который будет вызваться при каждом нажатии
  return () => {
    count++;
    console.log(count)
  };
})());

Ваш текущий код, по сути, является вот этим:

$('#elem').click(() => {
    let count = 0;
    count++; 
    console.log(count);
});

"use strict";
let aa = [[2020,'01','01'],[2019,'01','01']];
console.log(aa[1][1]);

Эта ошибка не имеет никакого отношения к размерности массива.

var obj = {
    collect_debt_in_court: "",
    debt_repayment_or_repayment: "1", 
    sell_debt: ""
};

import Component1 from './Component1';

onChange={this.handleSearch.bind(this)}

Просто использовать widgets.map() - массив же уже отсортирован и будет обработан по порядку.

Assert.Throws

Зависит от проекта, поэтому нужно пробовать разные варианты и измерять. Готового рецепта нет.
Я делал на эту тему доклад в разрезе HTTP/2: https://www.youtube.com/watch?v=rQDd5kCwDj8 Но там и в принципе про лучшие практики фронтенда много всего полезного.
В презентации куча ссылок.

<button type="button" value="+">+</button>{el.quantity}<button type="button" value="-">-</button>

Нужно явно указать значение инпута (по-умолчанию используется on). А чтобы приходил 0, нужно добавить скрытый инпут, потому что если чекбокс не выбран, браузер вообще не отправит это поле.

<input type="hidden" name="status" value="0">
<input type="checkbox" name="status" value="1" id="status" class="form-check-input">

Потому что после DATE_FORMAT вы сортируете не даты, а просто строки.
Попробуйте так: ORDER BY orders.date DESC

https://unsplash.com/documentation#get-a-collectio...

[...credits.cast, ...credits.crew].map((person) => person.name)

Итак, nginx настроен правильно, проблема со сборкой фронтенда. Её нужно решать в отдельном вопросе.

Никак.
Тостер - коллективный ресурс, поэтому участие в отметке решением могут принимать все.
Миссия Тостера - создание базы знаний, в первую очередь и только потом решение конкретных проблем конкретных людей. Поэтому отметки сообществом имеют приоритет* над отметками задающих вопрос.

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

* концептуально, не помню как технически это всё организовано.