Игорь Воронов

Занимаюсь front-end. Пишу на JavaScript, изучаю Node.js. Но понимаю что нужно знать как что работает. Протоколы и прочее.

Как что работает надо знать и фротендеру и бекендеру.
0)Самое главное понимать какой технологией лучше воспользоваться, для того чтобы сделать ту или иную задачу, нода - не серебрянная пуля
1) Асинхронность, синхронность
2) Протоколы http 1.1/http2 - в чем разница в них
3)вебсокеты
4)такие вещи как redis,memcached, уметь сочетать их работу,с реляционными базами
5)хорошие знания SQL
6)Почитать все что вам интересно, вы не найдете книги прочитав которую вы станете все понимать, и хорошо во всем разбираться, самая лучшая книга это документация(но бывают исключения), и конечно же опыт чем больше пишете тем быстрее приходит понимание определенных вещей.

Это все в пределах конкретной компании ведь. Тимлид в конторке по разработке сайтов != тимлид большой международной компании. В целом примерно так:
Джуниор не может сам полностью выполнять таски, ему нужны советы и контроль.
Мидл может сам выполнять таски без контроля и советов, кроме исключительных случаев.
Сеньор - тот, на ком все держится и к кому все обращаются.
Тимлид может быть мидлом или даже джуном в другой компании.
Что конкретно нужно знать вам никто не скажет, да и всего знать невозможно. Если речь идет именно о каких-то технологиях, то это не важно, важно уметь находить решения, а не знать их наизусть.
И еще, лучше быть крутым джуниором/мидлом, чем хреновым тимлидом. Очень смешно смотреть, как человек с двумя годами опыта гордо рассказывает всем, что он тимлид. Этим любят пользоваться хитрые начальники, типа: "Давай ка мы тебя тимлидом называть будем, а ты поработай сверхурочно и по выходным, ты ведь теперь сеньор-помидор!", а молодежь ведется.

Чувак, идешь сначала сюда https://learn.javascript.ru/
Пока Илья с товарищами по команде тебе надоедают, учишь английский.
Потом переключаешься на бритоголового https://egghead.io/
Потом, если покажется мало, начнешь курить спеки. К этому времени уже освоишь гугл и сможешь сам их найти.

Лучшие практики SPA

1. KISS - использовать только то, что действительно нужно. Например вам не нужен Javascript, если нужно просто сделать выпадающее меню. Достаточно просто CSS. Тоже самое применяется и к JS, вам не нужен Angular, если есть просто форма обратной связи. Такая задача решается на vanillajs.
   
2. Использование фреймворков, например bootstrap, foundation и т.д. Обычно из них берется типография и сетки. Иногда формы. Я обычно беру bootstrap-stylus и собираю из него.
   
3. Critical rendering path - минимальный набор CSS, который требуется для отображения первого экрана страницы, который потом будет встроен внутрь html-файла. Пример.
   
4. Применение систем сборки, например gulp. Основной смысл заключается в том, что сначала вы дробите SPA на множество мелких компонентов/модулей/блоков. Затем унифицируете их. В итоге получается набор небольших файлов. Затем из этого набора собирается два больших файла (css, js) и они прогоняются через оптимизатор и минификатор.
   
5. Использование CDN. CDN позволяет ускорить загрузку для часто-посещаемых и популярных страниц за счет уменьшения времени доставки контента. Особенно актуально для SPA, поскольку они представляют собой статический контент, который можно кэшировать без последствий.
   

Системы сборки

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

Модули AMD, CJS, UMD

Они предназначены для управления зависимостями. Например, когда у вас есть два десятка компонентов и один зависит от другого. Суть их в том, чтобы просто объявлять зависимости в компонентах используя тот или иной способ описанный в документации. Начните отсюда.

Сборка и подключение css

Здесь и так ясно, что нужно сначала освоить сборщики. postcss - это когда обычный css скармливается фильтру, который разбирает его, добавляет префиксы к свойствам, оптимизирует наименования цветов и т.д. Убирает дублирующие свойства.

В целом очень толково про оптимизацию расписано здесь https://developers.google.com/web/?hl=ru

WebStorm используйте, Notepad++ это явно не для быстрой верстки, кофе не поможет, это когда однажды нужно сделать срочную работу, сдать ее, и пойти пить совсем другой напиток, с обратным эффектом, а долговременно кофе не поднимет производительность, зато привыкание вызовет.

https://github.com/zualex/devmap
images.vfl.ru/ii/1466366676/e324255d/13079149.png
www.webdesigndegreecenter.org/learn-to-code

1 - то, что показывает браузер, он уже скачал в %temp%
2 - можно запихнуть картинку во flash, с пессимизацией от яндекса, за не мобильный контент
3 - можно класть картинки как background-image:url(http://.............);
Но ни что не помешает юзеру нажать PrtScr

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

Откройте chrome://apps/ и там удалите.

Это не расширения, а chrome-приложения.

А что Вы уже предприняли для решения этой задачи и в чём сложность?

Градиент наклонён css-ом, легко смотрится через devtools
А если Вы про белый треугольник внизу, то это не связано с ним, во второй секции - .homepage-app есть span в форме треугольника, который накладывается поверх первого блока

Вынесите JS за цикл php и напишите там нормальный код, который берет все элементы с такими классами и пробегает по ним и проверяет ваши условия. Что-то типо:

window.onscroll = function() {
  document.getElementsByClassName( 'class' ).forEach( function( el, id ) {
      if ( isVisible( el ) ) {
        doSmthWithEl()
    }
  } );
}

с jquery это делается за пару строк

Для чего составлять такую подборку? Вы просто перечислили практически все книги на русском по JS. При чем однотипные.
Большинство из них описывают одно и тоже. Я прочитал почти все из этого списка. По опыту могу сказать, что читать всю подборку не нужно.
Посоветовал бы прочитать книгу Ильи Кантора и книгу "Javascript для профессиональных веб-разработчиков", автор Николас Закас вроде.(Вместо второй можно прочитать Фленагана. Подробное руководство., но Заказ мне больше нравится, по моему мнению гораздо лучше объясняются многие вещи). Две эти книги, достаточно объемные и информативные, всю основу прекрасно преподносят.
Также посоветовал бы книгу по оптимизации производительности, автор также Николас Закас и любую книгу по регулярным выражениям, но это уже после некоторой практики. А также книгу "Веб-приложения на JavaScript". Сам ее только вот начну читать, но по содержанию и отзывам достаточно хорошая.

Достаточно будет чтобы довольно хорошо освоиться в языке.
Не нужно читать однотипные книги. С 3 по 6 включительно пункты не стоит читать. Только зря потратите время.

ООП объясняется в первых двух книгах которые я упомянул. Также книга про паттерны - largescalejs.ru/.

Но главное не просто читать а повторять все примеры и выполнять все задания, попутно придумывания задания для себя самому. Чем больше практики, тем лучше будет откладываться информация в голове и будет намного лучшее понимание что да как.
Я читать некоторые книги по несколько раз, потому что не сильно парился сначала о практике, просто читал, выполнял некоторые задания, по ходу было понятно, но через главу, уже все забывалось... Поэтому практикуйте, практикуйте и еще раз практикуйте.
Удачи в обучении!