Илья

ffmpeg -thread_queue_size 512 -video_size 1920x1080 -framerate 30 -f x11grab -i :0.0 /home/username/screencasts/$(date +%Hh_%Mm_%Ss_%d_%B_%Y).mp4

ffmpeg и x11grab соотвественно должны быть установлены в системе. framerate можно сделать и 60 (это fps). Разрешение скринкаста тоже. Останавливать ctrl+c.
Можно это конечно добавить в кронтаб и настроить под свою DM shortcuts/hotkeys для останова записи. Но чревато забыть, что запущена запись, не убить процесс и он забъет всё свободное место на диске, со всеми вытекающими (вплоть до фэйла при перезагрузке, если и /home на одном логическом диске c ОС, например).

Сорян, только потом внимательнее прочитал, что нужны скриншоты, а не видосы.
Тогда в сторону maim.
В i3wm я это делал так:

bindsym --release Print exec --no-startup-id "maim -s -c 1,0,0,0.6 ~/Screenshots/$(date +%Hh_%Mm_%Ss_%d_%B_%Y).png"

Это сфотает весь монитор.

В вот так предложит выделить область для скриншота:

bindsym --release $mod+Print exec --no-startup-id "maim -i $(xdotool getactivewindow) ~/Screenshots/$(date +%Hh_%Mm_%Ss_%d_%B_%Y).png"

Ну а интервал запуска вышеуказанных конструкций maim воткнуть через "crontab -e".

Вкратце:
Ответы
1. Не совсем, но, думаю, скоро будет понятно
2. Соединение всегда открыто, если одна из сторон его не закроет или не прервется связь
3. Клиент отправляет - сервер тут же получает. Сервер отправляет - клиент тут же получает.

На примере чата
1. Устанавливается соединение между сервером и клиентом 1 (handshake)
2. Сервер -> клиент1: Вы присоединились к чату
3. Сервер -> клиент1: Сейчас у нас 1 пользователь: клиент1
4. Устанавливается соединение между сервером и клиентом 2 (handshake)
5. Сервер -> клиент2: Вы присоединились к чату
6. Сервер -> клиент2: Сейчас у нас 2 пользователя: клиент1 и клиент2
7. Сервер -> клиент1: Присоединился клиент2
8. Клиент1 -> сервер: Скажи клиент2 "Привет!"
9. Сервер -> клиент2: Клиент1 сказал "Привет!"
10. Клиент2 -> сервер: Скажи клиент1 "Здасте!"
11. Сервер -> клиент1: Клиент2 сказал "Здасте!"

То есть клиенты могут когда угодно посылать сообщение серверу, он сразу же его прочитает, но не другим клиентам (минус сокетов). Сервер может послать сообщение любому клиенту, они сразу же его прочитают.

Добавить select'ам атрибут name, как у input'ов.

const data = Array
  .from(document.querySelectorAll('.input-container'))
  .reduce((acc, el, i) => (
    acc[`input${i + 1}`] = [
      'parameter',
      'result',
      'select',
      'range',
    ].map(name => el.querySelector(`[name="${name}"]`).value),
    acc
  ), {});

Я чуть переписал твой js, но теперь как ты хотела так и работает

let interval = null

class Slider {
    constructor(elemID, onLoad) {
        this.elem = document.querySelector(`#${elemID}`);
        this.slidesMain = this.elem.querySelectorAll('.slide');
        this.currentSlide = 0
        this.onLoad = onLoad

        this.changeSlideOnHover()
        
        if (onLoad) {
          this.changeSlideOnLoad()
        }
    }

    nextSlide() {
        this.slidesMain[this.currentSlide].classList.remove("showing");
        this.currentSlide = (this.currentSlide + 1) % this.slidesMain.length;
        this.slidesMain[this.currentSlide].classList.add("showing");
    }

    changeSlideOnHover() {
        this.elem.addEventListener("mouseenter", () => {
            clearTimeout(interval)
            this.nextSlide()
            interval = setInterval(() => {
                this.nextSlide()
            }, 6000);
        });
        this.elem.addEventListener("mouseleave", () => {
            clearTimeout(interval)
        });
    }
    
    changeSlideOnLoad() {
        this.nextSlide()
        interval = setInterval(() => {
            this.nextSlide()
        }, 6000);
    }
}

const slider1 = new Slider('slidesLeft', true);
const slider2 = new Slider('slidesRight', false);

И в css измени .presentation-title на такой:

.presentation-title {
    position: relative;
    padding-bottom: 124px;
    font-size: 75px;
    color: #ffffff;
    z-index: 2;
    font-weight: 800;
    pointer-events: none;
}

const obj = {className: 'test'}
let str = `<ul class="{{ className }}"/<ul>`
for (let key in obj ) {
    str = str.replace(new RegExp(key, 'g'), obj[key]);
}

Если строка действительно такого простого вида, то регулярки - непростительное расточительство ресурсов.
'2020-09-30'.split('-').reverse().join('.')
Ну а если в большой строке заменить, то:

'2020-09-30'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3.$2.$1')

Тоже долго вкуривал про querySelector.
Вот как его легко понять:
К примеру, у тебя есть каскад из блоков или несколько блоков с одинаковым классом.

<ul>
  <li>Elem</li>
  <li>Elem</li>
  <li>Elem</li>
  <li>Elem</li>
</ul>

С помощью querySelector ты можешь добраться например до 2 или 3 элемента по css селектору, не добавляя лишних классов в HTML
Вот так

var a = document.querySelector('ul > li:nth-child(3)'); // берем 3 элемент li в списке ul. 
a.classList.add('active');  // добавляем класс active 3 элементу

Запись повторяет точь в точь как в css

ul > li:nth-child(3) {
  color: red;
}