Филипп Гапоненко

Хорошей практикой будет разбивка кода покомпонентно.
Это даст вам более четкое понимание структуры проекта и позволит в случае необходимости переиспользовать эти компоненты в будущем.

Примерная структура может быть такой:

./
index.html
src/
  /scss
    _header.scss
    _slider.scss
    ...
  /js
    /header.js
    /slider.js
    ...

После этого собираете эти модули любимым сборщиком и радуетесь структуре)

Нашел:

Можно использовать scrollmagic

Это происходи по следующей причине:

.delete_message_link
у вас находятся внутри
#messages_area

При загрузке страницы скрипт отрабатывает и навешивает обработчик на каждый элемент с классом: .delete_message_link

После этого вы перезаписываете содержимое $('#messages_area').html(data); и, соответственно, на новых элементах обработчиков события уже нет.

Решением может быть навешивание обработчиков повторно после изменения содержимого $('#messages_area').html(data);

На понимание как они работает можно почитать эту статью

Вот описание похожей методики, думаю можно использовать эту идею для вашего случая: https://medium.freecodecamp.org/using-svg-as-place...

Если в css на элементе нет cursor:pointer то клик в js на айфоне не будет обрабатываться.
*spongebob_rainbow.jpg*

Можно сделать спрайт из двух логотипов для светлого и для темного фона и переключать их в зависимости от контента.
Надежно и кроссбраузерно.
Минус: надо точно знать какой контент на слайде (например навешивать на такие слайды соответствующий класс и при переключении слайда смотреть есть ли этот класс и если есть туглить логотип).

Я бы сконкатенировал все скрипты в один файл (ну или в два: vendors.js – сторонние библиотеки и main.js – ваши скрипты) если речь идет об оптимизации.
Естественно с учетом их взаимной зависимости, как советуют выше.
https://www.npmjs.com/package/gulp-concat