Владимир Проскурин

Вы не так много экономите символов (в плане ввода, для размеров бандла минификаторы все сами сделают), то почему не писать отдельно?

var element = document.querySelector('.domElement');
var ctx = element.getContext('2d');

На мой взгляд, это лаконичнее, легче поставить точку останова на любой переменой, добавить проверку (как в вашем случае). Да и в большинстве команд, что я работал, всегда стоит eslint правило one-var.

Safari не поддерживает behavior: 'smooth' и даже scroll-behavior. Нужно делать через полифилы на JS (конкретный не скажу, гуглите и смотрите какой удобнее, я использую велосипед нашей команды).
Надеюсь я ошибаюсь, и кто-то сейчас предложит нативное решение, т.к. я уже намучался с этим safari, на iOS полифилы дико тормозят.

Изучил основы HTML и CSS и начало приходить понимание, что во фронтенде (это еще на стадии изучения верстки) очень много нюансов. У меня даже голова кругом пошла..

Как и во всем программировании в принципе, и в любой другой профессиональной области. Невозможно знать все нюансы, можно лишь ошибочно полагать, что знаешь.

На тот момент я думал, что я попробую фронт, и потом посмотрю, куда дальше двигаться.

Но фронт это не только верстка, верстка это малая часть работы front-end'ера.

Хочется перепрыгнуть в другую сферу программирования, но при этом меня не покидает ощущение, что я бросаю изучение верстки как только мне попались проблемы связанные с изучением нового материала (по CSS)

Можете попробовать. Но точно скажу, проще не будет. Верстка это даже не программирование, в фронте программирование начинается с JavaScript.

Пытался представить себя в будущем во фронтенде - не ощутил ничего.

А почему именно ИТ? Тут не будет просто, вопреки тому, что говорят во всяких рекламах курсов.

С целью сжатия или обусфакции файла? Если с целью сжатия, то это нетривиальная задача. В ZIP используют разные алгоритмы сжатия без потерь, судя по вики, чаще всего это Deflate, его реализацию можно подглядеть в zlib https://github.com/madler/zlib/blob/master/deflate.c посмотрите сколько там строк, и решите, нужно ли вам тратить столько времени. Лучше воспользуйтесь библиотеками JSZip или тем же zlib на ноде.

В тему нежен/не нужен ВУЗ. Считаю заочку лучшим вариантом. Опробовал на своем опыте.

1. Позволяет работать на полную ставку, просто нужно будет два раза в год сдавать сессии, для которых положен законный учебный отпуск.
   
2. Сможете общаться с умными преподавателями, с работающими коллегами как вы (студентами), в некоторых вузах также разрешается свободно посещать очные лекции, есть есть желание и возможность. Дипломную работу можно будет связать с текущей работой, это довольно интересный опыт.
   
3. Прокачивает самообучение. В заочке вас не будут учить, вам будут давать материал, который вы должны учить до следующей сессии, на которой изученный материал будет проверяться экзаменами, зачетами и лабами.
   
4. На выходе получите диплом, и за плечами будет уже 4-5 лет опыта работы. Будете смотреться в глазах будующего работодателя лучше очников или тех, кто не получал образование, а просто работал эти 4-5 лет.
   

Там нативный код браузера, в разных браузерах будет разный код. Если интересен принцип работы промисов изнутри, то можно посмотреть на исходный код какого-нибудь полифила, например вот https://github.com/stefanpenner/es6-promise

Мне для front-end удобно ультраширокий. Нет рамок, можно девтулзы в браузере не отделять в отдельное окно (чтобы не терять фокус окна), все в поле зрения, еще фильмы очень круто смотреть (т.к. киношный формат). Единственное, что на macos не так удобно (на мой взгляд) через клавиатуру управлять окнами, да и такое нестандартное разрешение у меня макбук принял не сразу, а после спящего режима иногда переходит в FullHD, приходится вытаскивать и в вставлять кабель. На винде спокойно работаю, Win+Left/Right и окна занимают половину экрана и легко меняются фокусом по Alt+tab.
Еще у LG еще можно мониторы делить на два виртуальных монитора https://www.lg.com/kz/support/product-help/CT20162...

Можно вынести переменную с id таймера за пределы функции, тогда при вызове clearTimeout будет доступна актуальная ссылка. Но удобнее и корректнее хранить id таймера в замыкании, таким образом, код можно будет использовать много раз.

let el = document.getElementById('a');

function func(){
  let timeId;
  
  const handleScroll = () => {
    let scrollPos = window.pageYOffset;
    document.getElementById('z').innerHTML = scrollPos;
    if(scrollPos > 600) {
      if(!el.classList.contains('timer')) {
        el.classList.add('timer');

        let b = 60;
        timeId = setInterval(() => {
          b--;
          el.innerHTML=b;
          if(b == 0){
            el.classList.remove('timer');
            clearInterval(timeId);
            alert('Отлично!');
          }
        }, 1000);
      }  
    } else {
      console.warn('stop');
      clearInterval(timeId);
    }
  }
  window.addEventListener('scroll', handleScroll); 
}

func();

Вот этот код

soup.find_all('a', class_='home-link list__item-content home-link_black_yes')

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

<a class="home-link list__item-content home-link_black_yes" ...

А тот, что у вас на странице яндекса, не будет найден

<a class="home-link list__item-content list__item-content_with-icon home-link_black_yes"

Почитайте тут https://www.crummy.com/software/BeautifulSoup/bs4/... там описано, что нужно делать в вашем случае.

Вопрос: насколько это правильное решение? Не замедляю ли я таким образом код? Ведь я заставляю его постоянно вызывать функцию. Может быть это как-то сказывается на ОЗУ?

Если функция вызывается не сотни/тысячи раз в секунду, то не критично. Такие микропотимизации не должны плохо влиять на качество кода. Разница скорости выполнения будет в пределах погрешности.

Почему раньше, когда я видела js код, постоянно писали getElementById или getElementsByClassName

Так делали тогда, когда была плохая поддержка браузерами. И даже на данный момент с ней есть проблемы, например, NodeList который querySelectorAll возвращает, в старых браузерах не имеет метод forEach. Поэтому часто добавляют полифил или преобразуют NodeList в массив, который уже имеет forEach.

Подскажите, как быть с функцией, которая бы делала forEach?

Функция должна принимать либо другую функцию
qsf('.elements', el => el.classList.add("red"));

либо она должна внутри себя в замыкании хранить ссылку на список элементов, и возвращать публичные методы, которые будут производить операции над этими элементами (как такое написать, попытайтесь сами разобраться, если проходили тему с замыканиями).
qsf('.elements').addClass('class-name');

Определить третий useCallback, и в нем по условию вызывать один из callback'ов. Ну, или в месте передачи callback'а передавайте его по условию.