Vasyl Semilyak

Мозг работает так, как он привык работать.

Все, чего вы сейчас достигли (отвлекаться на свои мысли вместо того, чтобы заниматься текущей задачей), вы нарабатывали долгим и упорным трудом всю предыдущую жизнь.

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

P.S. С детства такие вещи тренируются. Чем взрослее тем сложнее, и даже факт того что ты осознаешь конкретный недостаток не облегчает того, что избавиться от него тяжело.

Стоит. Каждой задаче свой инструмент. Если ангуляр и реакт вошли в моду, это не значит, что способы упрощённой манипуляции домом из неё вышли. Если тебе кто-то говорит, что jQuery - костыль для людей, не умеющих нативно перебирать ноды или писать xmlhttprequest - скажи им, что компьютер - это костыль для людей, не умеющих жить без гугла и социалок. jQuery всегда будет популярен. Он упрощает простые обмены данных, классов в пределах DOM, умеет работать с ajax и значительно упрощает синтаксис.

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

Будьте конкретны:
- "Моя цель на ближайшие 6 месяцев - вырасти до позиции XXX в текущей компании". И далее:
- "Что мне нужно сделать для того, чтобы в течение 6 месяцев в моей компании вырасти до XXX ?"

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

- "Что мне нужно для того, чтобы узнать ЭТО и научиться делать ТО ?". Cоставляете план действий (разбиваете необходимые шаги на месяцы, недели, дни) с дежурными сроками (для проверки запланированного и достигнутого, внесения в связи с этим необходимых корректировок и т.п.) - и вперед.

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

Успехов.

Как исполнитель, заработавший больше 100К$ (PHP, JS) на апворке и как заказчик, потративший больше 300K$ (тоже PHP и JS), скажу, что cover letter - это 90% успеха.

Cover letter в стиле "быстро, дёшево, качественно" - сразу отправляются в топку. Когда фрилансил, то 10 из 10 заказчиков мне отвечали и почти всегда нанимали. Просто потому что в cover letter я сразу рассказывал как буду решать их задачу и задавал дополнительные вопросы по проекту. Когда нанимал сам, то хороший cover letter, где рассказывали что будут делать и задавали правильные вопросы, я получал, примерно один раз из 20 в случае с бэкендом (PHP) и ни разу за всю практику в случае с фронтендом (JS). Вообще грамотных фронтендеров на апворке я нашел ровно 0 (предлагая 35$ в час за ПОСТОЯННУЮ неограниченную работу), поэтому пришлось отказаться от услуг фриланса.

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

Такие дела

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

В последнее время сам себя тыкаю в замечательную статью - UX/UI Best Practices: 125 Easy Tweaks to Optimize .... Там обо всем простыми словами и с примерами.

Лучшее объяснение Redux что я видел.
getinstance.info/articles/react/learning-react-redux

Изучил html, css процентов так на 70.

это еще не тот уровень, который даст Вам возможность быть востребованным на фриласнсе, кроме того что такое 70%? Это Ваше субъективное мнение, покажите работ 10 сверстанных Вами, и я скажу насколько Вы готовы.

Когда я доучу JS - могу идти верстать за зелёные?

вы может даже сейчас идти себя пробовать на фрилансе, но понятно не за зеленные, а за деревянные и начинать с мелких подработок. Поверьте, даже если Вы изучите все на 100% на бирже Вы полный ноль без завршенных проектов, и что бы набить себе рейтинг, Вам придется очень много всякой мелочи сверстать за гроши. Никто новичку не даст проект в работу, это 100%.

Личная подборочка. На здоровье ;)

Dev. IT
https://vk.com/jsraccoon
https://vk.com/frontendinspiration
https://vk.com/forwebdev
https://vk.com/webtackles
https://vk.com/iteapro
https://vk.com/it__daily
https://vk.com/wtools
https://vk.com/proglib

UX. UI. Web design & graphic design
https://vk.com/nonamechik
https://vk.com/iam.designer
https://vk.com/behance_vk
https://vk.com/ins.pire
https://vk.com/graphic_designers
https://vk.com/allaboutdesign

All
https://vk.com/dejurka
https://vk.com/flatro

Typo. Fonts
https://vk.com/typoeverytime
https://vk.com/fontface
https://vk.com/ilovepokras
https://vk.com/ru_fonts
https://vk.com/ilove.typography
https://vk.com/kiriliza
https://vk.com/shrift
https://vk.com/myfont

Lessons
https://vk.com/soraxcss
https://vk.com/fwschool
https://vk.com/design.school
https://vk.com/4wwweb

PSD. Sketch
https://vk.com/sketchapp
https://vk.com/psdeu
https://vk.com/adobefuckers
https://vk.com/mockuppsd
https://vk.com/psd_download

Other
https://vk.com/itsobytie
https://vk.com/freelansim
https://vk.com/codelnaya
https://vk.com/tttimon
https://vk.com/geometrism
https://vk.com/toster_ru
https://vk.com/logomachine
https://vk.com/minimalism
https://vk.com/weirdslides

-------------------

CSSTricks (англ.)
https://css-tricks.com

Smashing Magazine (англ.)
https://www.smashingmagazine.com

Designer News (англ.)
https://www.designernews.co

Nettuts+ (англ.)
code.tutsplus.com

CSS Wizard (англ.)
csswizardry.com

CSS-live (рус.)
css-live.ru

Frontender magazine (рус.)
frontender.info

Поток “Разработка” на Хабрахабр (рус.)
https://habrahabr.ru/posts/frontend/

Прогрессор (рус.)
prgssr.ru

Если задача изучить nodejs:

По быстрому на nodejs + express
Для более углубленного nodejs

Это такая штука, которая выдает (или принимает, или и то и другое) данные кусочками (chunk). Чтобы объяснить, зачем они нужны, нужно немного отвлечься и вспомнить, как работает nodejs.

Преимущество nodejs состоит в том, что пока БД или ФС реагирует на команду, мы можем запустить другой коллбэк. За счет этого мы можем обработать много запросов какбэ параллельно, но с точки зрения программиста параллельности нет, потоков нету, race condition не возникает и башка у него об этом не болит. И у нас все быстро работает, пока ни одна функция не занимает процессор слишком надолго, пока она не работает слишком долго. А если она займет, то, в силу однопоточности, у нас все остальные запросы зависнут.

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

P.S. В данном ответе речь идет о stream (не путать с thread).

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

Но само решение придумывает программист, а не язык программирования.

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

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

https://jsfiddle.net/fc488pgw/2/ - просто подредактируйте под свой дизайн

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

https://dcrazed.com/free-photoshop-psd-website-tem...
(Поменял пример сайта так как по прошлому уже увы ничего уже не скачаешь)
Зайди сюда или на подобный сайт выбери 3-4 макета и сверстай желательно в адаптиве а затем смело включай их в резюме.

Коротко
Карта развития Web Разработчика

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

Живой пример: Есть толковый фронтендер(или бекендер по JS) пишет морду сайта на JS Фреймворке. Есть гуру бэкенда пишет API сайта. В случае с фулстаком(образно) он пишет обе задачи сам, но заведомо понятно, что он пишет это дольше и не факт что по последнему слову будет сделано.

Что нужно для развития дальше:
- Читайте блоги зарубежных программистов, они делают отличные архитектуры как в самом коде, так и решения в DB.
- Фреймворки PHP и JS - чем больше их будет тем лучше. Все они ускоряют разработку. Все чаты, соц авторизации, регистрации,и прочие первоочередные задачи давно уже написаны. Вы можете концентрироваться на более важных задачах.
- ООП тут очень спорный вопрос, на определенных этапах разработки оно решает, но когда этот уровень появляется, чаще всего прибегают к другому языку программирования и переписывают проект в угоду скорости (С++, Java, Python). Понимать нужно, поскольку фреймворки построены на этих парадигмах, но самостоятельно придумывать вам гибкие решения вряд ли придется(по крайней мере до Senior-а точно).
- Не изобретайте велосипеды. Разбирайтесь в чужом коде(Этот навык очень ценен после "решить/найти решение любую задачу"). Любой магазин чаще всего будет написан в лучшем случае на фреймворке, в худшем на OpenCart, Woedpress - что просто идиотизм, это блоговая система БЛОГОВАЯ. из за тренда выкручивают яйца.
- Учить английский и работать не на СНГ, Укр или места постсоветского пространства. Искать фирмы зарубежных филиалов и работать там. Поскольку так или иначе там уже работают профессионалы и знакомы с западным рынком, европейским. Там пишутся интересные проекты и появляются интересные решения.

Распределить работу покомпонентно.
Любые макеты можно разобрать на следующие компоненты и этапы.

0. Создается общий репозиторий для проекта.
Все работы ведутся сразу в нем. Чем чаще делаются коммиты, тем раньше вылезут и будут исправлены проблемы. У каждого компонента есть свой css/less/sass файл, чтобы легче управлять кодом и избегать merge-конфликтов.

1. Основные строительные блоки:
- Типографика и стили для контента (таблицы, цитаты)
- Элементы форм + стили валидации
- Декоративная графика (иконки, плашки)
- Модульная сетка (сразу респонсив)

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

2. Повторяющиеся компоненты:
- Навигация
- Ленты новостей, событий, блогпостов, результатов поиска, чего угодно
- Типовые формы (логин, регистрация, поиск)
- Табы
- Слайдеры
- и так далее

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

После этих двух этапов у команды готов UI-kit проекта.

3. Предварительная сборка всех шаблонов страниц с реальным контентом

Работа распределяется постранично. Каждый верстальщик копипастит блоки из UI-кита и наполняет реальным контентом. В конце команда оценивает, где что еще нужно доделать.

4. Редкие кастомные компоненты и модификации

На основе проблем, которые вылезли на третьем этапе, каждый верстальщик допиливает блоки, за которые он отвечает.

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

Обо всем этом говорят Atomic Design, ITCSS и многие другие методологии.