Два селекта, при выборе в первом определенный пункт, показываем во втором селекте привязанные пункты к варианты первого селекта, как сделать?

Это будет самостоятельная работа для страждущих.

Как улучшить навыки в построении архитектуры БД и проектирования систем?

Не знаю, я бы поиском воспользовался.

Два селекта, при выборе в первом определенный пункт, показываем во втором селекте привязанные пункты к варианты первого селекта, как сделать?

Тут надо думать, я не знаю.

Как улучшить навыки в построении архитектуры БД и проектирования систем?

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

Два селекта, при выборе в первом определенный пункт, показываем во втором селекте привязанные пункты к варианты первого селекта, как сделать?

(function self(sopts,popt,ltr) {
  ltr = popt.selectedOptions[0].innerText[0];
  sopts.forEach( op=> op.disabled = op.innerText.startsWith( ltr ) );
  setTimeout( self, 1000, sopts, popt );
})( document.querySelectorAll( 'select#pto option' ), document.querySelector('select#catts') );

Как реализовать сортировку блоков с сохранением в input?

document.querySelectorAll( '.b1' ).forEach( (d,i) => d.querySelector('input').value = i )

Как сделать такую анимацию на css или в каком направлении искать?

transition можно добавить на анимируемые свойства.

Как сделать такую анимацию на css или в каком направлении искать?

Фон с круговым градиентом, анимация с ключевыми кадрами с указанием координат положения фона и цветов градиента. Для наклона transform skew в отдельном блоке.

Как узнать крутит ли пользователь скроллом?

https://learn.javascript.ru/onscroll

Лучше условием ставить значение внутреннего скролла в чат-контейнере. Потому что пользователь может остановиться где-нибудь, и события скролла пропадут, и чат продолжит грузится и пролистает в конец контейнера.

Как оставить в массиве объектов только элементы с не уникальным значением конкретного свойства?

испытать в консоли браузера

[
{
props1: '123',
props2: 'string1'
},
{
props1: '123',
props2: 'string2'
},
{
props1: '123654',
props2: 'string3'
},
{
props1: '123',
props2: 'string4'
},
].filter( (e,i,a) => a.some( (d,j) => i !== j && e.props1 === d.props1 )  )

Как заменить части текста в notepad++?

к испытанию
(диаметр (\d+) см[\s\S]+?\/)xx/
$1D-$2/

Keyframes с box-shadow. Как сделать?

Анимацию вообще убрать, здесь хватит одного transition.

.portfolio_photos .port_img {
    position: relative;
    float: left;

    height: 400px;
    width: 400px;
    box-shadow: 8px 10px #595959;
    transition: box-shadow 2s;   
    margin: 30px;
}

.portfolio_photos .port_img:hover {
    box-shadow: 16px 18px black;
    cursor: pointer;
}

Как сделать так что-бы тень показывалась не по блоку а по картинке?

В принципе, если картинка уже png, то тень можно добавить прямо в неё.

Как экранировать кавычки внутри кавычек?

/(?<="[a-z_]+":\s+")[\s\S]+?(?=",\n\s*"[a-z_]+":|"\n\s*\})/g

Так можно найти строковые значения в этом json-е, дальше проще, обычной заменой при наличии кавычек в строке и так далее.

в консоли браузера

`{
  "data": {
    "user": {
      "edge_followed_by": {
        "count": 2708,
        "page_info": {
          "has_next_page": true,
          "end_cursor": "QVFDbjdlV2tibE5GWDhsRDg1cUY1SmF2SGpmdVdQejM3OWZzemNibkdjNS05UXZnOHZXV1VYeUhyMVVrWk9JclB1MzM3UGF5aHJLMHNWV0dnQVUtSE95YQ=="
        },
        "edges": [{
            "node": {
              "id": "5690572303",
              "username": "agrousadba_marusina_xata",
              "full_name": "Агроусадьба "
              Марусина Хата ",",
              "profile_pic_url": "https://scontent-hel3-1.cdninstagram.com/v/t51.2885-19/123771093_390861228705850_6648654081536577492_n.jpg?stp=dst-jpg_s150x150&_nc_ht=scontent-hel3-1.cdninstagram.com&_nc_cat=110&_nc_ohc=u4hKqGgSDPYAX_0VGNX&edm=AOG-cTkBAAAA&ccb=7-4&oh=00_AT_UASzWU4DV8ty289dHGPSLRVvDHE5U60ke1X99Ul33cQ&oe=621E9693&_nc_sid=282b66",
              "is_private": false,
              "is_verified": false,
              "followed_by_viewer": false,
              "requested_by_viewer": false,
              "reel": {
                "id": "5690572303",
                "expiring_at": 1645785603,
                "has_pride_media": false,
                "latest_reel_media": 1645629165,
                "seen": null,
                "owner": {
                  "__typename": "GraphUser",
                  "id": "5690572303",
                  "profile_pic_url": "https://scontent-hel3-1.cdninstagram.com/v/t51.2885-19/123771093_390861228705850_6648654081536577492_n.jpg?stp=dst-jpg_s150x150&_nc_ht=scontent-hel3-1.cdninstagram.com&_nc_cat=110&_nc_ohc=u4hKqGgSDPYAX_0VGNX&edm=AOG-cTkBAAAA&ccb=7-4&oh=00_AT_UASzWU4DV8ty289dHGPSLRVvDHE5U60ke1X99Ul33cQ&oe=621E9693&_nc_sid=282b66",
                  "username": "agrousadba_marusina_xata"
                }
              }
            }
          },
          {
            "node": {
              "id": "46661128679",
              "username": "mama.joom",
              "full_name": "mama.joom",
              "profile_pic_url": "https://scontent-hel3-1.cdninstagram.com/v/t51.2885-19/210249865_567961194365899_3439202724409136248_n.jpg?stp=dst-jpg_s150x150&_nc_ht=scontent-hel3-1.cdninstagram.com&_nc_cat=107&_nc_ohc=RwJwbSdg5SMAX-Wvqgm&edm=AOG-cTkBAAAA&ccb=7-4&oh=00_AT8Jo9d7VG3VEXEHFDsJZL5heiEY7ZvSRrGreT2nhNJZUw&oe=621E2DF0&_nc_sid=282b66",
              "is_private": false,
              "is_verified": false,
              "followed_by_viewer": false,
              "requested_by_viewer": false,
              "reel": {
                "id": "46661128679",
                "expiring_at": 1645785603,
                "has_pride_media": false,
                "latest_reel_media": 1645696422,
                "seen": null,
                "owner": {
                  "__typename": "GraphUser",
                  "id": "46661128679",
                  "profile_pic_url": "https://scontent-hel3-1.cdninstagram.com/v/t51.2885-19/210249865_567961194365899_3439202724409136248_n.jpg?stp=dst-jpg_s150x150&_nc_ht=scontent-hel3-1.cdninstagram.com&_nc_cat=107&_nc_ohc=RwJwbSdg5SMAX-Wvqgm&edm=AOG-cTkBAAAA&ccb=7-4&oh=00_AT8Jo9d7VG3VEXEHFDsJZL5heiEY7ZvSRrGreT2nhNJZUw&oe=621E2DF0&_nc_sid=282b66",
                  "username": "mama.joom"
                }
              }
            }
          }
        ]
      }
    }
  },
  "status": "ok"
}`.match( /(?<="[a-z_]+":\s+")[\s\S]+?(?=",\n\s*"[a-z_]+":|"\n\s*\})/g )

Как при активации чекбокса прибавлять к общей сумме в корзине 20%?

oninput

Как при активации чекбокса прибавлять к общей сумме в корзине 20%?

Подмешивать серверный php в клиентский js чтобы обеспечить интерактивность - плохая, а в данном случае нерабочая идея. Php здесь не нужен.

Как сделать абстрактный сервер или просто обработчик, для проверки отправки формы?

нету

Как сделать абстрактный сервер или просто обработчик, для проверки отправки формы?

fetch заменить на заглушку.

Как экранировать кавычки внутри кавычек?

а пример json от инстаграмма можно?

Как правильно фильтровать объекты с множественными условиями?

Глобально, это вложенные циклы. Детально, здесь цикл перебора объектов, цикл перебора свойств фильтра и цикл перебора множеств значений.