Дмитрий Понькин

Confluence one love :-)

Используйте инструмент Coverage в chromium-браузерах.
Я собираю статистику по всем типовым страницам, включая попапы/медиа запросы, затем чищу css на основании её анализа. К сожалению, полностью автоматических корректно отрабатывающих инструментов я не встречал.

Для глубоко изучения JS

Вряд ли есть что-то лучше серии книг Kyle Simpson - You don't know JS, где одной только теме про thisили замыканию уделена целая книга

Интересен супер подробный разбор event loop

Помимо книг выше, есть также отличное видео на YouTube после которого отпадут все вопросы как оно работает

Что можно считать лучшим источником

Собственно Standard ECMA-262

С помощью Дисковой утилиты вам нужно создать ещё один раздел (никакие данные при этом не пострадают, вы просто откусите кусочек дискового пространства). Потом скачиваете дистрибутив Yosemite (например, с Rutracker) и при установке указываете устанавливать на созданный раздел. В дальнейшем при перезагрузке зажимаете кнопку Option и появится список разделов, с которых можно загружаться.

Это полноразмерное приложение и в рамки его вообще загонять не нужно. Ограничь по ширине контент и это все, что требуется.

Ну это дизайнерские косяки))
Как бы по хорошему это делал я:
1. адаптив (но это отдельная тема)
2. для десктопа минимальная ширина в которую влезает конент, Уже - либо адаптив, либо горизонтальный скролл
3. хэдер на всю ширину
4. сайдбар прибит к левому краю
5. контент (сам дэшборд) растягивается на всю оставшуюся ширину
6. ну а вот содержимое контента уже надо смотреть... в терминологии флексбоксов: или flex-flow: row wrap, или width:25%, или justify-content: space between.

UPD: Назло ленивому дизайнеру можно сделать экран фиксированной ширины и отцентровать его на сером фоне (того же цвета что и бэкграунд в Фигме).