Делаем крутую командную строку в Windows как в zsh

Я занимаюсь фронтенд-разработкой уже довольно длительное время (больше года) и работа под Windows меня удовлетворяла абсолютно всем, кроме некоторых неудобств в командной строке. Я конечно же смотрю большое количество обучающих видеороликов от профессиональных программистов и вижу, что большинство разработчиков использует в качестве своей основной рабочей системы MacOS и командную оболочку zsh со специальными настройками oh-my-zsh (это целый фреймворк, который позволяет максимально гибко кастомизировать оболочку). В Windows 10 давно нет никаких проблем с командным оболочками: можете использовать устаревшую cmd, можете установить PowerShell Core, а можете скачать Git SCM и без проблем использовать bash для Windows из её поставки (вы обязательно её скачаете для использования git на компьютере с Windows). И это не говоря про замечательную подсистему WSL2, которая позволяет установить вам полноценный дистрибутив Linux на выбор и получать оттуда доступ к ресурсам Windows (прямой доступ к вашей файловой системе в первую очередь).

Лично я остановил свой выбор на git bash, PowerShell Core, а в качестве терминала использую новую версию Windows Terminal и встроенный терминал в редактор кода VS Code. Каково же было моё удивление, когда я узнал, что существует проект oh-my-posh, который запросто позволяет вам сделать из PowerShell подобие zsh (да подобие, но так как фронтендеры используют командную строку в качестве вспомогательного инструмента запуска скриптов, консольных утилит и работы с git, то мне данный вариант вполне подойдёт). Самое основное, что мне нужно было от командной строки это индикация параметров git и она там ничем не отличается от подобной в oh-my-zsh. Ну и поддержка тем на закуску,  потому что все хотят сделать красоту.

Установить oh-my-posh довольно просто и я это сделал буквально за несколько шагов с помощью вот этого гайда. Первым делом, конечно, стоит установить последнюю версию PowerShell Core с репозитория github. В отличии от Windows Terminal, который самостоятельно устанавливается и обновляется из Microsoft Store, PS Core пока так не умеет. Не лишне будет прописать использование именно PowerShell Core для встроенного терминала VS Code. Делается это через редактирование соответствующего параметра в настройках settings.json (в новых версиях редактора этот параметр устареет, но под Windows пока работает):

Устанавливаем модули поддержки git и oh-my-posh:

Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser

Включаем приглашение командной строки и выбираем тему oh-my-posh (список тем и их названия вы можете посмотреть и выбрать здесь):

Set-Prompt
Set-Theme Sorin

Если вы в это время находились в своём репозитории git, то вы уже должны были увидеть указание на ветку и другие параметры git, но возможно вы увидели в командной строке какие-то кракозябры и прямоугольники вместо понятных символов. Ничего страшного, просто ваш шрифт консоли не поддерживает вывод символов Powerline и надо его сменить. К счастью, дизайнеры шрифтов давно поняли нужды программистов и все последние версии популярных шрифтов для программистов идут уже с поддержкой лигатур и powerline (обычно такие можно отличить по приписке PL в конце). Например версия шрифтов Cascadia идёт с вариантом PL, в Fira Code уже есть эти символы, а все шрифты из набора Nerd Fonts пропатчены специальным образом. Так же можете сами пропатчить любой шрифт символами Powerline с помощью специального скрипта, но вряд ли этим будут заниматься все (просто знайте о такой возможности). Сменить шрифт в Terminal можно через редактирование профиля темы в текстовом файле (не очень удобно для новичков, зато крайне просто и наглядно), а в VS Code в настройках, введя в поиск "terminal font". В новых версиях терминала сделали полноценное меню для редактирования настроек.

Редактирование настроек оформления в Terminal

Все эти изменения, которые вы сделали, действуют только в рамках одного сеанса и неплохо было бы их сохранить на постоянной основе в настройки пользователя. Для этого вам нужно запустить любой редактор и внести изменения в файл профиля. Я сделал это командой "code $PROFILE" (команда code это сокращенная команда для запуска VS Code), куда внёс следующие строки:

Import-Module posh-gitImport-Module oh-my-posh
Set-Theme SorinImport-Module PSFzf

Последний модуль PSFzf отвечает за удобный поиск команд и файлов в строке (т.н. fuzzy search, написан на языке программирования Go). Установка его слегка замороченная, так что можете его пока не ставить, тем более я сам пока не разобрался как им пользоваться и какая мне от него польза. Сначала вам надо найти и скачать скомпилированную версию PSFzf (ссылка на неё вывалится при попытке установить командой Install-Module PSFzf -Scope CurrentUser)  и закинуть её в системный каталог типа system32, чтобы она была доступна через PATH. После этого надо зарегистрировать сочетания клавиш для неё и загрузить:

Remove-PSReadlineKeyHandler 'Ctrl+r'

Remove-PSReadlineKeyHandler 'Ctrl+t'
Import-Module PSFzf

И вот, после все этих манипуляций (достаточно несложных даже для начинающего программиста) у вас на компьютере с Windows будет превосходная командная строка, которая будет радовать глаз. Кстати, некоторые программисты "виндузятники" даже используют Vim и программируют именно в нём, отрицая другие редакторы кода или полноценные IDE для Windows. Лично я предпочитают для быстрых правок консольный редактор micro, который в дефолтном состоянии очень похож на линуксовый nano. Надеюсь вы поняли, что любая операционная система для программиста лишь инструмент для решения задач, а внешний вид и функциональность можно настроить дополнительно по своему желанию. 

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

Update: недавно обнаружил аналогичный проект от известного программиста, который похожим образом "прокачивает" PowerShell и другие командные оболочки. Называется проект - Starship и под капотом он использует язык программирования Rust. 

Кстати, сама Microsoft на своём портале учит как красиво раскрашивать коммандную строку. Вот здесь ещё один гайд про то, как навернуть свой терминал улучшениями.

Джентльменский набор расширений для веб-разработки в VS Code

На Ютубе уже есть неимоверное количество видеороликов про "самые лучшие расширения для редактора кода VS Code", поэтому я решил, что этому миру нужен ещё один топ - на этот раз от меня. Шучу: вам совершенно не нужно смотреть все эти видеоролики, потому что они на 90% будут состоять из самых популярных расширений, которыми пользуются все. Этот набор одинаковый, однако не все программисты пристально следят за развитием VS Code, поэтому в их наборе иногда попадаются старые расширения, которые уже либо давно не нужны (функциональность введена в редактор), либо вообще вредны из-за глюков и тормозов (да, попадаются и такие расширения). Недавно я провёл ревизию среди своих расширений, удалил десяток неиспользуемых тем и расширений, и не могу сказать, что достиг совершенства, но мне точно удобно в таком редакторе работать. 

Работа с учебным react приложением в VS Code и Firefox Nightly

Итак, мой список расширений для VS Code, которые облегчают повседневное программирование, экономят время и нервы (жирным выделены must have расширения для меня). 

1. Prettier Plus. Prettier это гениальный форматтер кода, который после нажатия на кнопку сохранения (ctrl+s) превращает ваш как попало написанный код в прекрасно форматированный по всем правилам, которые вы можете ему определить (какие кавычки использовать, какие отступы). Просто не представляю как можно в 2020 году писать код без этого расширения! В маркетплейсе есть оригинальный Prettier с 6,5 миллионами скачиваний, но мне больше понравился форк Prettier+, потому что он лучше настроен на работу вместе с современным javascript и фреймворками. 
2. All Autocomplete. Умное расширение, которое сканирует открытые в проекте файлы и добавляет их в автодополнение (например названия классов из вашего css или функции из модуля js). 
3. Auto Rename Tag. Маленькое, но очень полезное расширение, которое автоматически изменяет закрывающий тег, если вы редактируете открывающий. И почему такой функциональности нет из коробки? Работает вообще с любыми тегами. 
4. Bracket Pair Colorizer 2. Расширение, которое раскрашивает открывающую и закрывающую скобку одним цветом, а так же остальные скобки разными цветами. Выглядит просто, но на самом деле это крайне важная штука. Без неё я бы давно сошёл с ума, пытаясь разобраться в хитросплетениях скобок javascript. В дополнение к нему есть расширение Indent Rainbow, которое раскрашивает отступы в коде по глубине, но мне оно не понравилось, потому что код превращается в цветные горы. *устарело
5. Code Runner. Добавляет в VS Code кнопку "Запустить", которую я безуспешно искал, когда только начинал учиться программировать. Просто подразумевается, что редактор кода это вам не IDE и он не будет вам ничего запускать или компилировать - всё это обычно вы делаете сами из терминала (именно так все и делают обычно). Code Runner понимает множество языков программирования: например он знает как запустить скрипт python или файл typescript через node.js. Кроме того он умеет запускать выделенный фрагмент кода, а не весь файл целиком, что бывает очень полезно при обучении и отладке.
6. Settings Sync. С помощью этого расширения вы можете сохранить и синхронизировать все настройки редактора в ваш gist на github (это такая записная книжка для программиста). В экспериментальных сборках VS Code уже тестируется встроенная аналогичная функция. *устарело функция теперь встроена в редактор.
7. EditorConfig for VS Code. EditorConfig это такой полезный файл, в котором вы можете хранить настройки редактора кода для каждого отдельного проекта. Этот файл можно передать, хранить в репозитории или просто скопировать себе в новый проект ваши любимые настройки.
8. ES7 React/Redux/GraphQL/React-Native snippets. Если вы программируете на React, то вам будет крайне полезен этот набор сниппетов (заготовок кода, шаблонов). Например, вы можете написать "rfc", а редактор кода по нажатию tab развернёт заготовку для функционального компонента. VS Code, конечно же, имеет встроенную систему хранения пользовательских сниппетов, но тут уже всю работу сделали за вас.
9. Guides. Улучшенная отрисовка линий отступов. Особенно полезно при работе в Python, ведь там отступы имеют важное значение. 
10. Highlight Matching Tag. Полезное при работе с тегами расширение (помогает не только при работе с html, но и в React). В редакторе Sublime эта функция есть "из коробки" (подчеркивает открывающий и закрывающий тег), а в VS Code это тоже есть (нужно нажать ctrl+d, чтобы выделились парные теги), но мне не нравится как это сделано - подчеркивание цветной линией выглядит красивее.  
11. Live Server. Любимое расширение и основной инструмент всех верстальщиков. Запускает локальный сервер с "горячей перезагрузкой" при изменении файлов проекта. Раньше для таких возможностей надо было поднимать gulp (или использовать стороннюю программу), настраивать функциональность, а тут всё это работает просто при нажатии "Go Live" внизу страницы.
12. NPM intellisense. Если у вас в проекте есть папка node_modules, то это расширение вам поможет. 
13. Output Colorizer. Расширение от IBM, которое раскрашивает ваш лог. К сожалению, конфликтует с Code Runner, который тоже "раскрашивает" текст в окне вывода (это ограничение редактора - только одно расширение может изменять там форматирование). 
14. Rainbow CSV. Если вы любите рассматривать CSV файлы, то это расширение скрасит вам времяпрепровождение. Лично я перешёл на json для хранения и передачи данных. 
15. Svelte intellisense. Это расширение для тех, кто программирует на javascript фреймворке Svelte. 
16. Vetur. Расширение, если вы программируете на фреймворке Vue. *проблемное С выходом третьей версии Vue, Vetur начал работать крайне нестабильно и многие vue-шники стали использовать расширение Volar.
17. CSS Navigation. Вы можете выделить класс в вашем html и нажать F12, и тогда вы попадёте в определение класса в вашем css. Позволяет быстро перемещаться по коду без поиска. 
18. ESLint. Большое и глобальное расширение, которое поможет вам писать код правильно. Нет, оно не отформатирует его за вас (хотя может работать в связке с Prettier), но укажет вам на места ошибок. Имеет гибкие настройки правил, но особой популярностью у разработчиков javascript пользуется стайлгайд от ребят из Airbnb.
19. Image Preview. Очень полезное расширение, которое помогает при вёрстке. Если вы правильного написали путь до картинки, то оно вам покажет превью на полях. Таким образом вы всегда может легко увидеть участки кода, где применяются изображения. 
20. Babel Javascript. Специальная подсветка для javascript, где учтены все особенности современного диалекта и использования JSX. Если пишите на React, то это расширение будет полезным. 
21. NPM. Позволяет запускать скрипты npm из встроенной консоли редактора (не терминала, а та, что вызывается по нажатию ctrl+shift+p). 
22. REST Client. Очень простое и эффективное расширение, которое заменяет популярный Postman для работы с запросами к API. Храните ваши запросы или логи в простых текстовых файлах, которые могут находиться вместе с кодом приложения. Требует минимального изучения документации, чтобы писать запросы, но всё окупается простотой использования расширения. 
23. Visual Studio IntelliCode. Умное автодополнение от Microsoft. Да, может и не самое умное в мире, если сравнивать с полноценными IDE типа Jetbrains. Есть различные автодополнения для VS Code, но не все они полезны. Например есть крутейшая вещь типа TabNine с машинным обучением на основе текстов программ с github, благодаря чему оно может угадывать просто куски кода и названия переменных (всё уже написано до вас тысячи раз), но, к сожалению, это расширение периодически тормозит и глючит.

Так выглядит редактор кода у меня

Украшательства. Это очень важная сторона настройки свой среды для редактирования, но тут очень трудно советовать что-то для всех, потому что у всех вкус разный (о, каких только диких расцветок я не повидал у программистов на Ютубе). Просто опишу несколько популярных и моих текущий расширений:

1. Моя текущая тема это - Plastic. Ещё могу посоветовать The Best Theme и One Monokai Theme.
2. В сообществе крайне популярна Material Theme. Вам обязательно стоит попробовать её - это классика. Кстати, не удивляйтесь, если некоторые темы попросят вас купить их - всё таки это считается профессиональным продуктом, но никто не заставляет вас это делать и вы всегда можете найти аналогичный бесплатный форк. Вторая по популярности тема это - One Dark Pro, пришедшая к нам из редактора Atom (тема так же имеет множество форков и вариаций). 
3. Заслуживает внимание тема Dracula от дизайнера, который поставил своей целью донести это графическое оформление до мира. Несмотря на название, это довольно мягкая по цветам тема и ничего красного там нет. 
4. Если вам понравилась какая-то популярная тема, то определённо стоит поискать менее популярные форки этой темы. Таким образом, например, я нашёл отличную тему Snazzy Plus, которая является доработанной и улучшенной темой Snazzy Operator. 
5. Текущая тема иконок файлов у меня - Material Icon Theme. Ещё популярны VS Code Great Icons.
6. Есть особое направление в темах для тех, кому хочется минималистичных тем без обилия цветов. Имеется целый набор минималистичных тем: например Min Theme. Или вот светлая тема Alabaster от нашего соотечественника и создателя шрифта Fira Code.
7. Некоторые известные программисты имеют собственные темы подсветки кода, которые вы можете часто увидеть в их редакторах. Wes Bos (автор популярных курсов по фронтенду) разработал фирменную тему Cobal2, а Дэн Абрамов (из команды React) Subliminal. 
8. Если вам нравятся необычные цвета, то имеется классная тема Pop N' Lock.

update по состоянию на 2021 год, версия VS Code 1.60:

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

1. Bracket pair colorization теперь встроен прямо в редактор кода и работает очень быстро. Раскрашивание скобок можно включить в настройках. Соответственно оригинальное расширение можно удалить и забыть.
2. Аналогичным образом разработчики Microsoft написали собственную реализацию Live Server, которая работает как внутри редактора кода, так и с внешним браузером. Отличается от оригинального live server тем, что реально live - способен перерисовывать страницу прямо на лету, пока вы переписываете код (после каждого нажатия), а не после сохранения страницы. 
3. Так как GitHub это теперь тоже собственность Microsoft, то таким образом фирменную тему оформления можно считать официальной. Странно, что её не добавили в дистрибутив, учитывая что у неё 2 миллиона скачиваний. 

А нужно ли учить Bootstrap?

Многие начинающие веб-разработчики, насмотревшись многочисленных обучающих видеороликов от старых фрилансеров на Ютубе ("старый" в данном контексте означает, что уровень навыков может быть не совсем актуален в текущих условиях), очень сильно убеждены, что обязательно надо знать такой CSS фреймворк как Bootstrap и тогда тебя ждёт успех, а верстать станет очень просто. И они обычно очень удивляются, что на профессиональных курсах их этому и не собираются учить.

Хочу выразить своё отношение к этому вопросу. Дело в том, что для начинающего разработчика популярный Bootstrap представляет собой некий "костыль", который помогает делать первые шаги и особо не разбираться в том как работает css, одновременно вводя новый уровень абстракции, заставляя учить его многочисленные классы. Как только у человека появляется хотя бы немного понимания layout страницы, появляются навыки располагать элементы на странице и понимание адаптивности (media запросы), то следует эти костыли сразу же отбрасывать. Тем более ни в какой серьёзной компании с CSS фреймворками не работают, ну кроме совсем маленьких студий, которые свои сайты верстают буквально на коленках. И даже в последнем случае есть исключения, когда с Bootstrap работают на профессиональном уровне (с исходниками), подгоняя его под конкретные нужды и делая собственные UI наборы для него. Так же я видел, как от bootstrap подключают отдельные компоненты из исходников в scss и компилируют в свой общий css, но все эти заморочки с автоматизацией вёрстки не для новичков. Кроме того, следует различать как минимум три версии Bootstrap:

1. Bootstrap 3, которая до сих пор используется в устаревших проектах. Она прекрасно работает на старых версиях Internet Explorer и сделана на устаревших float. 
2. Современная версия Bootstrap 4 работает уже на flexbox, которые так себе отображаются даже в последней живой версии IE 11. 
3. Новейшая версия Bootstrap 5 (сейчас находится в стадии альфа-версии, но переход уже начат), в которой выброшены на помойку истории все старые технологии типа jQuery и поддержка любых версий Internet Explorer. Кроме того он изначально полностью сделан на SASS, позволяя вам брать от него нужные части и очень просто кастомизировать под себя (с помощью custom свойств CSS и utility API). А ещё они сделали собственный сет иконок, так что их можно использовать в своих проектах вместо Font Awesome, которые от которых, по большому счёту, сплошной вред. В новой версии они действительно сделали очень много, чтобы предоставить вам инструменты для кастомизации и делать непохожие друг на друга сайты (главная претензия противников Bootstrap). 

Разумеется Bootstrap не стал бы настолько популярным, если бы не обладал положительными сторонами. CSS фреймворки это отличная вещь, если вы собираетесь быстро сделать для себя какой-то прототип (например "админку" для сайта или форму), а заморачиваться с вёрсткой и отрисовкой всяких кнопочек и форм ввода вам никак не хочется - вот тогда на помощь придут фреймворки и сделают красиво почти без особых затрат. Ну разве только затрат на подключение лишнего css, который увеличит время загрузки вашего сайта. Именно поэтому стоит избегать фреймворков на сайтах, где важна оптимизация и быстродействие. CSS фреймворки незаменимая вещь при обучении программированию на javascript фреймворках, где всё ваше внимание должно быть направлено на программирование, а не на дизайн. 

А теперь расскажу о CSS фреймворках с которыми я познакомился. 

1. Bootstrap. Это классика от компании Twitter и её стоит знать, но вовсе не заучивать, как думают новички. Самые важные для понимая вещи это сетки (разделение на ряды, контейнеры и знаменитая 12-колоночная система) и некоторые классы-утилиты (отступы, размеры, работа со шрифтами). Все эти вещи примерно похожи во всех остальных фреймворках и если вы выучите их использование у Bootstrap, то без проблем сможете пользоваться и в других фреймворках, которые отличаются лишь названиями классов и дизайном элементов интерфейса. В школе W3C имеется отличное пособие на английском языке (автоматический переводчик Google тоже неплохо переводит), которое учит основам Bootstrap на простых примерах. Кстати, для популярных фреймворков вы обязательно найдёте приличный перевод документации на русский язык. Имеется он и для документации Bootstrap.
2. Bulma CSS. Прекрасный небольшой фреймворк, который я рекомендую использовать в качестве замены огромному Bootstrap. Документация не очень большая, так что с изучением проблем не будет. В качестве названий классов использует предложения на английском языке, а не аббревиатуры. Не тащит с собой огромного количества элементов, позволяет модульность из коробки, когда вы подключаете в свой проект только то, что вам непосредственно нужно: например, вам нужны только кнопки и формы, так зачем тащить за собой всё остальное? 
3. Materialize CSS. Большой и крутой фреймворк от программистов Google. Позволяет делать интерфейсы в стиле Material Design как на Android. Ваше приложение будет одинаково выглядеть как в вебе, так и на мобильном устройстве. Документация мне показалась попроще, чем у Bootstrap. Много элементов интерфейса завязано на javascript, так что небольшое понимание его работы стоит иметь. Material design это не собственность Google, а концепция в дизайне, поэтому любые сторонние разработчики могут создавать свои фреймворки. Вы можете попробовать Material Lite от сторонних разработчиков, преимущество которого в том, что он не завязан на javascript. 
4. Sematic UI. Большой фреймворк с поддержкой тем. Похож на UIKit. 
5. Pure CSS. Крайне минималистичный фреймворк в 3,8 КБ, да ещё и с модульностью. Можете скачать исходники и полностью перенастроить его под свои нужды. 
6. Picnick CSS. Небольшая CSS библиотека в которой уже переопределены стандартные свойства оформления. Подойдёт вам, если вы не хотите вообще писать какой-либо CSS, а вам нужно просто украсить вывод в html. Такие фреймворки ещё называются "class-less" (без классов). 
7. Mustard UI. Ещё один простой и минималистичный фреймворк в 5 КБ. Документация занимает всего 10 экранов. Разумеется можно скачать все модули и легко перенастроить через переменные. 
8. Tachyons CSS Toolkit. Если вам мало минималистичных фреймворков, то вот вам ещё один. Обладает большими возможностями по настройке и использует что-то вроде атомарного CSS, когда много всяких классов, которые заменяют свойства css. 
9. Foundation. Большой коммерческий фреймворк, который любят всякие крупные корпорации и сайты. Прямой конкурент "бутстрапу". Имеет возможности по гибкой настройке. 
10. Tailwind CSS. Особый фреймворк "без фреймворка", который основан на идее атомарного css. Не всем такой подход вообще нравится, лично я был в шоке, когда впервые увидел - меня учили не складывать html и css вместе в один код, потому что это похоже на inline css. Тем не менее такой подход позволяет очень быстро кодить сайты и делать прототипы, не влезая в дебри css стилей. Особо любим фронтендерами, которые используют фреймворки - им как раз удобнее держать логику и дизайн в одном компоненте. 

Как видите, Bootstrap лишь один из инструментов и далеко не самый главный, хотя и самый популярный, потому что именно в нём придумали сетку и систему именования классов, которыми сейчас пользуется половина веб-разработчиков мира. В любом случае вам необходимо на достаточно хорошем уровне знать HTML и CSS, чтобы уметь работать с любым фреймворком профессионально и чтобы они были для вас реально полезными инструментами в разработке, а не костылями, которые ограничивают вашу фантазию. Удачи в работе! 

P.S.: Вот ещё один список фреймворков на любой вкус и для любых целей. 

Мой личный чёрный список онлайн-преподавателей курсов по программированию

За последний год я проделал путь от изучения вёрстки (снова в школу) до разработки небольших приложения на React, Vue или Svelte (последний фреймворк мне особенно понравился за свою простоту и лаконичность, но возможно я напишу о нём в другой раз). Прошедшие этот путь программисты были правы: информации по веб-разработке в интернете просто океан. Но тут встаёт другая проблема - проблема выбора. Как выбрать знающего преподавателя, хорошие курсы и не утонуть в море информации? Неужели стоит забегать на торрент-трекер или Udemy и качать/скупать все курсы, которые ты видишь по своей тематике? Конечно же нет. 

Спустя пару месяцев непрерывного просмотра видеоуроков у меня появились свои фавориты, а с ростом навыков и получением знания появилось мнение о тех преподавателей, которых стоит избегать из-за невысокого уровня контента. Нижеизложенный список моё личное субъективное мнение, я не могу по каждому их курсу писать докладную с их ошибками (а ошибки бывают у всех преподавателей) и ни в коем случае не хочу повредить их бизнесу. Если они не понравились мне, то возможно именно вам понравится их подача материала и они научат вас чему-то новому, а после их курсов вы найдёте работу. Большинство из этих курсов я не досмотрел дальше начала, какие-то смотрел выборочно, так что возможно я ошибаюсь и в остальных частях лекций всё круто и замечательно (хотя это сомнительно, если видно как "лектор" начинает путаться в терминологии в самом начале). Кроме того я смотрел старые лекции, которые я нашёл в условно "свободном" доступе (привет пиратам), а в новой программе они могли уже подтянуть свои знания и качество материала. А ещё я видел курсы иностранных преподавателей (как бесплатные на Ютубе, так и платные лекции) и наши отечественные преподаватели по сравнению с ними далеко не на высоте. Кстати, вот вам ещё одно важное отличие "так себе преподавателя" от профессионала: у последнего все лекции проводятся в режиме онлайн - он не продаёт свои видеозаписи. 

1. Webformyself. Помню начал смотреть их курс по javascript и каждые 30 секунд исправлял лектора. Мне это очень быстро надоело. После этого травмирующего опыта я избегаю изучать какие-либо их учебные материалы. А ещё у них адский дизайн сайта, в то время как они предлагают научить верстать. Научитесь и сверстайте себе сайт сами, в конце концов. 
2. Типичный верстальщик Анна Блок. Приятная девушка, которая ведёт одноименный youtube-канал и паблик в ВК. Я смотрел её курсы по вёрстке и боже, какая же там нудная подача материала практически без объяснений и погружения в суть процесса. Впрочем это не отменяет того факта, что Анна опытный верстальщик и умеет этим зарабатывать деньги на фрилансе. У неё популярный канал на Ютубе и телеграмм-чат, где помогают новичкам научиться верстать.
3. Иван Петриченко. Тут вроде и с подачей материала всё нормально (говорит бодро, в темах не плавает), без воды и только практические знания для работы. Тут другая проблема: Иван застрял на уровне типичного фрилансера с биржи и это очень заметно. Крайне мало теории и глубины погружения, а без этого нормально javascript не понять и учёба превращается в зубрёжку магических кодов. Javascript и так не самый понятный язык программирования в мире, чтобы такое прощать. Вообще многие часто жалуются на преподавателей платных курсов из онлайн-школ, что мол у них в лекциях очень много воды и они искусственно растягивают хронометраж, чтобы слупить побольше денег. Это вовсе не так и многим людям действительно нужны 2-х-часовые лекции, чтобы понять и усвоить все нюансы какой-то темы. 
4. Алекс Лущенко. У него очень много недостатков: он мало знает сам (для преподавателя и программиста), даёт поверхностные знания, плавает в основах, часто ошибается на своих лекциях (его код не работает, либо устарел лет на 5), но он хотя бы не боится открыто признаться в этом. С другой стороны зачем вам преподаватель, который сам не очень в предметной области? Я посмотрел целиком его курс "Практический javascript" и половину лекций просто сидел с фейспалмом (сейчас на его Ютуб-канале доступна бесплатна вторая версия курса). Ещё он украинец (не подумайте что это плохо, а я очень уважаю украинских программистов) и с русским языком у него иногда проблемы. Вообще среди преподавателей и фрилансеров очень много людей с Украины, потому что в этой стране IT-отрасль очень развита на всех уровнях от начинающих фрилансеров до солидных аутсорс-контор. Некоторым нравятся мотивирующие видео Лущенко о том, как стать программистом. 
5. Владилен Минин. Есть мнение, что весь его учебный материал это пересказ сайта Ильи Кантора и других преподавателей у которых он невозбранно позаимствовал контент. Неоднократно был замечен в поверхностном пересказе официальной документации и в переделанных чужих учебных проектах (грех многих айти-ютуберов, которым лень заморачиваться с уникальным контентом). Лично я бросил его смотреть после того, как он упорно в начале курса называл React фреймворком, а это библиотека. Это было в старых версиях лекций и в новых курсах он самые дикие ляпы исправляет, что однако не слишком повышает ценность знаний, которые он доносит. А ещё он путает компиляцию и транспиляцию (через Babel) и таких оговорок у него огромное количество. Минин публикует мотивирующие видеоролики на Ютубе в духе "если вы несчастливы, то просто станьте счастливыми", а к таким мотиваторам и прочим инфобизнесменам я отношусь с подозрением, однако у него есть очень много действительно полезных роликов на Ютубе по технической тематике, где можно быстро почерпнуть массу базовой информации, если вам лень читать официальную документацию. По уровню навыков он чуть выше всех вышеперечисленных преподавателей, которые обеспечивают подготовку на уровне "трейни" (в конце концов Минин работал в аутсорсинговой компании, где решал самые разные задачи клиентов и делал это очень быстро, как того требовали заказчики). Наплодил чудовищное количество разных роликов по самым "хайповым" технологиям, так что если вы будете что-то искать по тематике Javascript на Ютубе, то обязательное наткнётесь на его видеоролик. Вот Илья Климов, чей профессионализм и опыт в разработке известен всем, делает часовой разбор одного из курсов Минина, после конфликта с ним. 
6. Все курсы от компании Skillbox. Они активно рекламируются почти у всех ютуберов, но их курсы полны воды, а ученики очень часто оставляют отрицательные отзывы. Их курсы предлагают со скидкой, но поверьте, на той же Udemy вы найдёте зачастую намного более качественные и интересные курсы за меньшую стоимость. Проблема только в том, что на Udemy большинство качественных курсов на английском языке. 
7. "Masters of Code" за воровство чужого материала и полное непонимание того, как преподносить информацию. Мало того, что он (или они) взял чужой курс на английском языке про Typescript и дословно перевели на русский язык, так там ещё ничего и не видно на экране (ну можно ведь было догадаться увеличить размер шрифтов в редакторе кода?). Да, они предлагают курс за копейки (13$) и перевод на русский внушительного курса это тоже серьёзная работа, но так обманывать всё равно нельзя. Кстати, по такому же принципу работают некоторые "школы IT" - не попадитесь на мошенников. 
8. "Диджитализируй!". Данного блогера советуют многие другие ютуберы-программисты, но я смотрел его курсы, много его видеороликов и мне показалось, что его знания в курсе довольно поверхностные. Но как развлекательный контент, почему бы и нет. 
9. ...список будет дополняться по возможности.

Если есть список учебных материалов, которых я стараюсь избегать, то очевидно есть и качественный контент от профессиональных преподавателей, которых любо дорого смотреть. Тут опять же всё очень субъективно. Не хотелось бы, чтобы это всё было похоже на рекламу (тем более я всеми руками за бесплатные материалы), но я заметил, что учебный материал крупных онлайн-школ сделан действительно профессионально, подробно и там преподают очень опытные лекторы, у которых за плечами годы практической работы в крупных компаниях, а не годы фриланса с однотипными задачами (извините, ребята). Моя любимая онлайн-школа это HTML Academy. Я прошёл все их бесплатные курсы, потом пересмотрел лекции платных интенсивов и теперь мечтаю выиграть бесплатный интенсив и пройти его по настоящему с учебным проектом и наставниками. А Вадим Макеев даже стал моим кумиром в вёрстке. Рекомендую к просмотру его канал, многочисленные лекции (наберите в поиска на Ютубе "Вадим Макеев") и подкаст с новостями. Вообще, профессиональные школы очевидно выигрывают в качестве преподавания у фрилансеров, некоторые из которых просто решили "склепать по-быстрому" курсы в дополнении к своей основной работе в надежде на прибыль. К сожалению, учебные курсы приносят очень мало денег своим авторам, особенно в России. Преподавание это больше про призвание, а не про заработок огромных денег, если конечно вы не Тони Роббинс. Кроме того, могу сказать, что я с опаской отношусь к курсам на Udemy, потому что мусора там тоже предостаточно, а своих покупателей они привлекают безумными распродажами по -95% (там все курсы таким образом продаются, так что не вздумайте что-то покупать по полной стоимости без скидки). 

В список хороших преподавателей могу добавить людей, по которым видно, что они не просто преподают, а реально работают в компании, стартапе или постоянно практикуют свои навыки. Например открыл для себя недавно курсы Антона Ларичева (видеозаписи стоят не очень дорого) и видно, что человек работает в качестве фуллстека и погружен в тему современной разработки. Ещё мне хвалили Михаила Непомнящего за доходчивые объяснения основ Javascript. Он много лет работает преподавателем, так что имеет опыт в донесении знаний до слушателей, подача его мне нравится, но курсы у него в основном начального уровня. 

Я долго не хотел писать этот пост, но решил, что моим знаниям после просмотра сотен часов видеокурсов не стоит пропадать и я их должен систематизировать хотя бы для себя. Надеюсь упомянутые преподаватели и их фанаты не прибегут разбираться в мой уютный бложик, потому что всё сказанное здесь это моё субъективно мнение, составленное зачастую после 30 минут или часа просмотра лекций (и я их зачастую не покупал, так что не могу рассказать про платную поддержку и дополнительное менторство), и всё это наверняка недостаточно для оценки профессиональных навыков конкретного преподавателя и качества целого курса. Учтите, что зачастую к обучающим курсам идут услуги в виде доступа к совместному чату с преподавателем и проверка ваших домашних заданий, а это уже совсем не то же самое, что просмотр лекций, коих в интернете действительно полно. 

P.S.: Дополнение про HTML Academy, откуда ушло много старых преподавателей, в том числе и Вадим Макеев, который уехал из России, а основатель школы Александр Першин уже давно лично не появляется на вебинарах. Сильно ли это ударило по качеству материала? Я смотрел их курсы по вёрстке за 2021 год и они довольно сильно переработаны, появились новые темы про флексы и гриды, убраны неактуальные темы, подача стала местами бодрее, так что я всё равно рекомендовал бы их и сейчас. Кроме того они очень сильно переработали курсы по Javascript, наконец начали преподавать React. Не реклама, просто мне их подача материала и основательность очень нравится - там не учат как использовать конкретные операторы языка программирования, там учат архитектуре, структуре данных и как разработать что-то новое. 

P.P.S: вот мой рейтинг онлайн-школ сейчас, когда познакомился с некоторыми поближе (чистая субъективщина, не кидайте тряпками):

Яндекс.Практикум - сложно, круто, качественно, дорого. Только для мотивированных специалистов и желающих таковыми стать, для зачисления на курсы надо сдавать тестовое задание (которое местами тянет на тестовое в веб-студию). Единственный диплом, который не стыдно показать работодателю. 

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

Hexlet - что-то среднее между Я.Практимумом и большими онлайн-школами, есть годные курсы. Там же рядом маленькие школы, некоторые из которых ведут занятия в оффлайне или по модели "буткемп", но такое обучение не всем подходит. 

RS School - полностью бесплатная школа от EPAM, которая держится только на волонтёрах. Учиться действительно можно бесплатно, обучение тяжелое, необходимо знать английский язык. С вас будут требовать домашние задания, много отправлять в Гугл и документацию, а так же отчислят за неуспеваемость. От полностью автономных проектов по самообучению типа FreeСodeСamp отличается тем, что ваш код будет проверять человек, а не бездушные автотесты, вы будете общаться с ментором. 

Полезное видео на 4 часа (используется нецензурная лексика). В нём рассказывают про признаки инфоцыган (не обязательно относительно онлайн-школ программирования) и по этим признакам вы легко опознаете людей, которые "льют вам в уши". 

Мой рейтинг шрифтов для программирования

Наблюдая за профессиональными программистами, увлечёнными разработкой (а я пересмотрел очень много обучающих видеороликов от самых разных людей), я заметил, что далеко не всем интересна тема настройки своего редактора кода. Люди просто открывали редактор и начинали программировать: никому не интересно какая там тема установлена, какие шрифты и какие расширения можно установить для удобства. Чего уж там говорить, я видел пару десятков видеороликов, где VS Code сигнализировал о новом скаченном обновлении, но "учитель" даже не заморачивался, чтобы это обновление применить. И так на протяжении нескольких уроков, которые он очевидно писал на видео за один раз.
Лично я такого дзена и отрешенности от внешнего мира во время программирования не познал, поэтому потратил некоторое время на выбор самого удобного шрифта, самой симпатичной темы оформления (этот процесс может продолжаться вечно, потому что темы надоедают). В конце концов редактор кода это рабочее место программиста, а значит оно должно быть красивым и удобным, а строчки кода, набранные специальным шрифтом, это именно то, на что смотрит программист много времени (в реальности он больше смотрит в документацию, а не в свой код, но не будем об этом).

Шрифт: JetBrains Mono, тема редактора: Dracula

Итак, мой личный рейтинг шрифтов, которые сделают ваш код красивым (с визуальной точки зрения) и легко читаемым.
1. JetBarins Mono. Этим шрифтом в VS Code я начал пользоваться всего две недели назад и уже успел его полюбить. Данный шрифт давно применяется в профессиональных IDE от JetBrains, но вот недавно его сделали доступным для всех. Естественно шрифт с лигатурами, потому что это сейчас модно в шрифтостроении для программистов.
2. Fira Code. Очень популярный сейчас во всём мире шрифт от отечественного программиста Никиты Прокопова. Данный шрифт демонстрируется на официальной странице VS Code в документации и примерах, то есть им пользуются в самой Microsoft. Шрифт отлично читаемый и любим программистами за лигатуры.
3. Hack Nerd Font. На этом шрифте я просидел больше года и он меня абсолютно всем устраивал, пока я не отправился искать новых ощущений с другими шрифтами. Шрифт реально классный и разработан так, чтобы не раздражать своего пользователя при повседневном использовании - с этой задачей он справляется прекрасно.
4. Consolas. Это уже классика от Microsoft и он используется по умолчанию на системах с Windows в VS Code. Использовать шрифт Consolas для кода я начал почти 10 лет назад, когда писал свои первые проекты на PHP (тогда я использовал забытый ныне редактор Komodo Edit). Сейчас шрифт, конечно же, смотрится не так круто по сравнению с современными, специализированными шрифтами для программистов, но кто сказал, что классика должна удивлять? В конце концов, очень много программистов вообще сидят на Courier New или на похожих древних mono-шрифтах и им ничего новее не нужно. Аналогичным шрифтом в MacOS является San Francisco, который и используется по умолчанию в VS Code, а большего программистам на MacOS и не нужно, потому что от добра добра они не ищут (маководы вообще не любят что-то настраивать, а чтобы красиво было сразу из коробки).

5. Cascadia. Новый шрифт от Microsoft для программистов (лигатуры есть). Пока не снискал большой популярности, лично я его не использовал, но это точно очень качественный шрифт от профессионального дизайнера. Шрифт открытый и исходники выложены на github. Данный шрифт используется по умолчанию в новом Terminal Windows 10 и для командной строки он очень хорош.

6. Victor Mono. Ещё один отличный, бесплатный, лёгкий шрифт с лигатурами. Мне он показался похожим на Source Code Pro от Adobe. Я не фанат тонких шрифтов, так что не использовал их.
7. Operator Mono, Source Code Pro, Iosevka, Fantasque Sans Mono (ссылка на репорзиторий с архивами всех шрифтов). Отличные шрифты для программирования, которые обязательно упомянут в любом треде, где программисты их обсуждают, но лично я ими долго не пользовался по тем или иным причинам (меня полностью устраивал Hack Nerd font). "Радость" от использования шрифта так же зависит от качества вашего монитора (HD/Retina), личного восприятия и привередливости. Некоторые программисты, например, не любят, когда буква О и 0 (ноль) трудночитаемые и этого будет достаточно, чтобы не пользоваться таким шрифтом.
Учтите, что далеко не у всех шрифтов для программистов есть поддержка кириллицы (если разработчик не русскоязычный или не корпорация, то скорее всего кириллицы не будет) и комментарии на русском языке будут выглядеть в вашем коде ужасно (ещё один повод выучить английский и не писать комментарии на русском языке, потому что это непрофессионально).

Пример лигатур в Fira Code 2

Некоторые программисты считают лигатуры блажью, которые не дают ничего для программирования в плане повышения читаемости кода: ну подумаешь стрелочка => по другому рисуется, или знаки сравнения типа "больше равно" в виде одного символа.

Включение поддержки лигатур в редакторе VS Code

Долгое время и я этой моды не понимал, но два месяца назад включил их в настройках VS Code (да, их можно запросто включать и отключать, нужно только чтобы в вашем шрифте была поддержка лигатур) и так и не отключал, потому что лигатуры меня не раздражают. В любом случае рекомендуемую всем попробовать писать код с включенными лигатурами, и возможно, вы не сможете от этого отказаться. Многие программисты даже специальным образом патчат свои любимые шрифты, чтобы добавить туда поддержку лигатур. 

Командная строка в Windows может быть удобной

Вот уже полгода я "вкатываюсь" в мир frontend разработки и пока я не начал этого делать, я даже и не подозревал, что профессиональные веб-разработчики работают с консолью "на ты" не хуже линуксоидов. "Ты же делаешь сайты, зачем тебе сидеть в консоли?" - но не всё так просто.
При разработке любого относительно сложного и комплексного проекта, веб-разработчик использует пакетный менеджер для установки библиотек и прочего, скрипты запуска или сборки проекта, поглядывает на проходящие тесты в консоли, ну и конечно периодически работает с системой контроля версий (Git, как правило), сохраняя свои труды в коммитах. Да, не для всех этих задач требуется именно консоль, но я ещё не видел ни одного профессионального разработчика, который бы ей не пользовался (большая часть веб-разработчиков пользуется MacOS, сидят на Macbook и хвалят красивую консоль там). К счастью, пользоваться консолью не страшно и не больно даже в Windows, где она до сих пор была уделом только суровых сисадминов.

Более того, вы можете даже получить консоль как в Linux в своём Windows! Настоящую bash со всеми командами оттуда (и выполнить rm -rf). Самым простым способом для этого будет использование эмулятора терминала Cmder. Программа имеет огромное количество настроек и встроенный bash для Windows (для этого нужно загрузить полную версию дистрибутива на 118 МБ). Кстати, при установке Git, вам так же устанавливается эмулятор git bash. Файловые системы в Windows и Linux разные, но эмуляторы корректно обрабатывают пути, хотя я заметил, что профессионалы этим не злоупотребляют и не пишут названия каталогов с пробелами и кириллицей (ну это так, общее правило всех программистов - даже в счастливый век UTF-8 можно запросто получить не очевидную проблему из-за этого).

В VS Code очень удобно организована работа с терминалами

Сама Microsoft давно поняла, что профессиональным разработчикам нужны профессиональные инструменты и желательно, совершенно бесплатные. Корпорация подарила прекрасный редактор кода VS Code, который сейчас является самым популярным у веб-разработчиков по всему миру. В прошлом году корпорация порадовала нас новым терминалом, новой 7-й версией Powershell и даже открытым шрифтом Cascadia с лигатурами для программистов (который весьма хорош, но о моих любимых шрифтах для программирования я напишу в другом посте). В VS Code можно удобно работать с терминалами (по клавише ctrl+~), запускать несколько штук и переключаться между ними.
Посмотрите на этот тизер нового терминала Windows - практически блокбастер! К сожалению, в реальности терминал Windows не стал таким красивым и удобным как в рекламном ролике, но вы можете скачать preview версию нового терминала и начать им пользоваться прямо сейчас (есть версия для установки из магазина MS и на github). Да, из него можно запускать команды, но он не настолько удобен как терминалы в Linux, где консоль это основа система, можно сказать её душа. Чувствуется, что терминал в Windows это вспомогательный минималистичный инструмент.

Если вам нужен максимум контроля операционной системы и Windows вам уже мало, то кроме перехода на MacOS есть ещё варианты - полноценный Linux внутри вашего Windows. И это даже не виртуальная машина, как вы могли бы подумать, а настоящий дистрибутив, который разворачивается на вашей системе и имеет полноценный доступ к "железу" и файловой системе. Да, шутки линуксоидов про "MS Windows" стали явью и за это отвечает система Windows Subsystem for Linux. Теперь нет никакой необходимости отказываться от Windows 10, если вы профессиональный программист и хотите работать именно с Linux.
Изначально можно было ставить Ubuntu, но в данный момент имеется и Suse Linux, и другие интересные дистрибутивы. Вы даже можете установить дистрибутив для взлома Kali Linux, хотя, конечно, для настоящего хакера это не труъ. WSL это не только доступ к linux консоли, но при желании вы можете запустить полноценный x-server и работать в графическом DE. Посмотрите видеоролик (на английском) от Скотта Хансельмана про то, какие чудеса можно творить с WSL. VS Code умеет переключаться в специальный режим при работе с WSL.
Как вы можете убедиться, командная строка в Windows это теперь круто.