Vlad Chepel

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

Текст ты читаешь в удобном для себя темпе, легко пересматривая и перечитывая абзацы.
Остановившись на странице книги, ты можешь просто просмотреть глазом предыдущую страницу и продолжить чтение. С видео так не получается - из головы вылетает все, и надо просматривать как минимум пару минут перед этим, если отлучился на час-два.

В любой момент можно в тексте что-то найти, что-то подсмотреть в быстром темпе, и даже в бумажном варианте для этого достаточно просто содержания. А в электронном виде оттуда легко копируется текст, команды, код, конфиги.
Перемотка в видео так не работает. Закладки на видео в виде справочника не работают. Сам себе заметки в виде видео ты не пишешь, не выписываешь, и переписать из книги проще, чем из видео.

Также видео делать сложнее, чем писать текст. Гораздо дольше. Гораздо дороже.
Редактирование видео вещь в разы более муторная, поэтому чаще просто переснимают короткие блоки, а это опять таки непросто.
То есть сделать видео с таким же качеством материала и с такой же плотностью материала - в десятки раз дороже по всем ресурсам - деньги, время, оборудование.
И при этом никто не будет смотреть месяц видео (160 часов, например). Никто не будет делать поиск внутри видео, закладки на нужные отрывки и использовать видео как справочник.

Перенести материал из книги перенести в видео - это непомерный труд с одной стороны и совершенно невостребованный с другой стороны.
А поэтому никто не делал, не делает и не будет делать видео с таким же наполнением материалом, как это можно сделать в тексте.

Видео - это разок посмотреть на чей-то практический материал, разок посмотреть как это делает кто-то другой.

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

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

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

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

P.S. Одним из самых важных минусов видео я считаю то, что ты не можешь получать информацию в комфортном для себя темпе, с возможностью быстро перечитать слово/фразу и обдумать ее. Сам читаю множество лекций, и эта проблема, когда скажешь 2-3 предложения быстрее, чем обычно и половина учеников отваливается с бессмысленным взгядом. Так на живом курсе ты можешь обратить на это внимание и перефразировать, а записанное видео уже не изменишь.

Да, это полезно - написать свой фреймворк и/или CMS.
Потом полезно сравнить его с laravel или symfony, найти чем ваш фреймворк лучше.
Если ничем не лучше - можете его смело забросить, и переходить на что-то общеизвестное, и вот почему:

Представим, что у вас заказали лендинг по заказу насосов, например, и вы сделали его на своем фреймворке. Через 5 лет вы сменили род деятельности, и водите экскурсии по Тасмании. Или вас укусил радиоактивный паук, и теперь вы спасаете мир, а поддержкой сайтов не занимаетесь.

Сервис с насосами за это время вырос, они теперь еще и бурят скважины, и фильтры устанавливают и колодцы копают, и у них филиалы в 20 городах. Им нужно доработать сайт. И при поиске разработчика выясняется, что сайт ваш доработать невозможно, т.к. документации по фреймворку нет, готовых модулей совместимых нет, интеграций с 1C, google docs, microsoft sharepoint нет, и никогда не будет. И проще переписать с нуля, чем разбираться как оно у вас там устроено.

А если бы сайт был на общеизвестном фреймворке, то гораздо проще найти и специалистов и найти готовые интеграции.

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

Как вы и просили, Николай Чуприк, я решил написать ответ:

Если скрипт зависнет, то FF должен показать вам окно о том, что его надо остановить. Вы можете понизить время ожидания результата выполнения скрипта.
За это отвечает параметр: dom.max_script_run_time

В других браузерах я не нашёл подобной опции. Зато мне понравилась цитата отсюда:

“JavaScript that executes for whole seconds is probably doing something wrong...” says Brendan Eich, creator of JavaScript.

update 03.07.2018: я решил почитать, что новенького в Хроме 67. Посмотрите, пожалуйста, наверное это то, что вы просили: What's New In DevTools (Chrome 67) - Stop infinite loops.

Интенсивной работы в день 5-6 часов максимум. Больше - только на ограниченное время, с обязательной компенсацией отдыхом. В офисе 9-18 работают в целом так же, кулер, поболтать, что-то обсудить 10 раз в день, почитать статьи. По моим личным ощущениям на удаленке работа интенсивнее, даже с учетом меньшего количества часов. Поэтому работаю по часам и на ставке больше чем в офисе на 8 часовом рабочем дне.
Пробовал помодоро - не зашло.
Бывает что накапливается и какие-то дни работа вообще не идет - даю себе отдохнуть, могу поработать часа два-три.
Что-то новое изучаю иногда в формате перерывов - поработал - почитал. Так как график и учет времени гибкий, это не считается рабочим временем, и совесть не мучает. Могу посередине дня отдохнуть пару часов если совсем не идет, или сходить прогуляться или еще что.
Свои проекты сначала пилил "по вечерам и выходным", особенно когда работал 9-18 потом понял что так не пойдет, на долгий срок это провальный подход, поэтому сейчас больше работаю как часть рабочего времени. Уменьшаю основную работу (при этом естественно уменьшается доход).

Самое главное - правильно оценить свои силы и исходя из этого решать сколько куда их потратить. Может у вас сил хватит и на работу и на проекты и на хобби и еще перед сном почитать - без проблем, делайте все это. А если их не хватает даже на 8 часовой рабочий день - стоит это признать и не пытаться себя нагрузить сверх меры, получите новый срыв. Или отказаться от чего-то или искать другие способы кроме как "работать больше". Тут главное быть честным с собой и не "добавлять себе очки".

В целом выгорание не зависит от объема работы - объем работы влияет на усталость, на выгорание влияет нервное напряжение и оно может быть и при 2 часах работы в день а может и не быть при 10.
Если у вас реально начинается истощение - то определитесь это усталость или выгорание, если усталость - то организовать рабочее время и контролировать нагрузку, может даже в ущерб доходу, свое состояние очень важно.
Если выгорание - то надо искать причины, если их не устранить - то ничего не поможет.

Если вы уже один раз проходили через все это - ищите общее, анализируйте и поймите что вы сейчас делаете так же как и тогда и что надо поменять.

Поддержу большую часть выше сказанного. Во-первых, работать с адекватным качеством можно не больше 6 часов в день. Я стараюсь брать по 4-5 часов (хотя это не отменяет того факта, что при какой-нибудь аварии на сервере нужно собраться и устранить проблему не глядя на часы, но такие ситуации крайне редки). Во-вторых, как только вы набьёте руку и будете интересовать клиентов больше чем они вас, уходите на фриланс. Ну или как минимум гибкий график жизненно необходим. В-третьих, подумайте, сколько денег вам нужно и чем для вас вообще является работа - способом заработка или призванием. Если первое, то работайте меньше. Лично я понял что для меня это именно способ заработка. Хотя в целом работа мне нравиться, но я не из тех кто готов по 12 часов писать код для работодателя, а остальные 12 часов - для pet-проектов. IT-субкультура навязывает что это не круто, но если вы сможете справиться со стереотипами, то станете продуктивнее и счастливее. Денег скорее всего станет меньше, но это на самом деле не так критично влияет на жизнь. Хотя сначала кажется что будет ужас, но у страха глаза велики.

В сухом остатке, оценивайте работу в первую очередь по комфортности для вас, а не по доходу, известности компании и прочим побочным факторам. Если вы не создадите себе комфортных условий, то с гарантией выгорите, не смотря на психологов, доход, лекарства и репутацию как специалиста. Я, например, в качестве одного из главных критериев беру адекватность клиентов и доверительные отношения с ними. В результате мне не нужно писать гигантские отчёты по каждому потраченному часу, высылать пачки скриншотов с открытой IDE и выбивать заработанные деньги. Я просто говорю сколько они мне должны, они просто платят. Можно было бы нахватать больше клиентов и по большей ставке, но зачем? Всех денег не заработаешь, а удовлетворённость жизнью в текущем режиме выросла гораздо больше, чем просел бюджет.

https://github.com/zalog/placeholder-loading

Какую книгу посоветуете к прочтению по css или начать изучение js?

Отложить в сторону книги, взять 3 дизайна в psd - лендинг (одностраничный сайт), корпоративный(многостраничный, с более сложной структурой), интернет-магазин - начать с лендинга и дальше по увеличению:

1. Сверстать ручками, без использования бутстрапа и других библиотек(с учетом семантики, доступности, адаптивности под все экраны, прикрутить несложную анимацию - карусели, popup, разобраться в анимации с помощью css и js(что можно сделать с помощью css, а где лучше написать на js) - в чем профит - (поможет разобраться как работает css без библиотек и фреймворков, начнет развиваться логика построения хороших интерфейсов, как перестраиваются блоки, дизайнерские ошибки, свои ошибки).

2. После первого-второго пет проекта - используете все элементы автоматизации - препроцессоры, сборщики, библиотеки которые вы точно не напишите сами, и пишите интерфейс с нуля в 2-5 раз быстрее - в чем профит - зная, что под капотом, не задавая глупых вопросов, почему иногда проще написать сетку с нуля, чем использовать сетку бутстрапа(в случае если дизайнер придумал "СУПЕР-МЕГО-САЙТ на 100000000 шекелей, не заморачивась о сетке и не думая о тех людях, которые будут верстать его шедевр), познакомитесь с gulp\grunt\pug,sass\scss\less и еще кучи прикладных инструментов.

3. Посадить его на любую из популярных CMS(для лендинга\корпоративного - WP, Modx, Joomla, Drupal, для магазина (WP, Bitrix, OpenCart) - в чем профит - поймете что нужно клиенту на рынке(не в каждую дырку заталкивается SPA(очень много бизнеса работает на стандартных инструментах), как организована работа контент менеджеров, которые наполняют сайты, оптимизация, плюсы и минусы)

4. Проделав все этапы - у вас есть хорошая база(отличный html и css, вы знаете что такое семантика, кроссбраузерность, адаптивность, знаете базу js, jquery и пишите простые скрипты без подключения библиотеки в 100кб, для того что бы вывести в меню "гамбургер" на мобилках.
Дальше вы решаете - либо делаете упор на JS(и углубляетесь в React\Vue, Angular) участвуя в проектах по разработке SPA и становитесь после года тяжкой работы джуном), либо делаете упор на PHP(CMS, Laravel, Symfony и тд и тп) и так же через год тяжкой работы становитесь джуном.

5. Через 3-4 месяца пытаетесь устроится на работу, особо не заморачиваясь на деньгах.

Нашёл решение!
Выручил тег "outline-offset": https://jsfiddle.net/5b3c0bnp/1/

(обновлено)

Действительно, IE этот тег не поддерживает.
Сделал с помощью ":before": https://jsfiddle.net/nn0owgfy/

body {
  padding: 50px;
  background: white;
  text-align: center;
}

ul {
  max-width: 800px;
  margin: auto;
  background: grey;
  flex-wrap: wrap;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

ul:before {
  content: "";
  border: 1px solid white;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

li {
  padding: 100px 0px;
  background: white;
  margin: 0px 1px 1px 0px;
  -webkit-box-flex: 1 220px;
  -moz-box-flex: 1 220px;
  -webkit-flex: 1 220px;
  -ms-flex: 1 220px;
  flex: 1 220px;
}

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

Удобная штука scrollmagic.io/examples/advanced/parallax_sections.html
Для разбора пригодился в своё время урок: https://habrahabr.ru/post/142137/
может что-то лучше:
www.w3schools.com/howto/howto_css_parallax.asp
https://habrahabr.ru/post/280738/

Если не особо заморачиваться, то можно так сделать. Прочие плюшки и рюшки, уже сами добавляйте.

Да, html include возможно как минимум двумя способами:
1) Использовать плагин типа gulp-file-include
2) Использовать Jade или какой-нибудь другой шаблонизатор.

https://www.freecodecamp.com/