Владислав Алеев

Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?

Кроме синтаксических конструкций, математических и логических выражений, нужно знать:

• Область видимости переменных
  
• Замыкания
  
• Объектно-ориентированное программирование, в частности наследование через прототипы
  
• Шаблон проектирования "модуль"
  
• Операции над DOM
  
• Понимание принципов событийно-ориентированного программирования
  

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

Важно - инструменты программиста JavaScript
У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.

Хотелось бы узнать что это за задачи(упомянутые вами 80%)

Реальные задачи джунов:

1. Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает.
   Важно - читать и понимать чужой код намного важнее, чем писать свой. И на работе тебе это приддётся делать чаще, чем ты думаешь. Чтобы подключить к своему проекту чужую JS либу, нужно понимать что она делает, как она конфигурируется, как управлять её поведением. Скажу точно, что написать свой скрипт, который строит графики, намного сложнее, чем понять, как настраивается highcharts.
   
   
2. Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно
   
   1. Усложнение: удалять можно только буквы в словах, а знаки пунктуации и цифры удалять нельзя
      
   2. Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)
      
   3. Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность
      
   Важно - этим обычно все и занимаются - ищут баги. Только в реальной жизни они и без этого скрипта появляются. И не по одному, а прям пачками.
   
   
3. На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из своего скрипта для построения графиков.
   
   1. Усложнение: на одном графике должны быть два курса, по разным шкалам. Наприме, курс доллара к евро и курс юаня к рублю
      
   2. Усложнение: первоначально график вывести в детализации по месяцам, но чтобы можно было "приблизить" (drilldown) детализацию до дней
      
   3. Усложнение: первоначально график вывести текущем месяце, но чтобы можно было загрузить данные для предыдущего месяца без перезагрузки страницы (AJAX)
      
   
   
4. При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки.
   
   1. Усложнение: в всплывающем окне сделать навигацию по картинкам, вперёд/назад и к нужной картинке
      
   2. Усложнение: в всплывающем окне вместо картинки показать видео-ролик с Youtube
      
   3. Усложнение: в всплывающем окне показать текст HTML
      
   
   
5. По клику на кнопку "Click me" показать всплывающую форму.
   
   1. Усложнение: реализовать проверку данных на корректность перед отправкой формы (непустое значение, минимальное количество символов, максимальное количество символов, минимальное числовое значение, максимальное числовое значение)
      
   2. Усложнение: если в значении текстового поля встретилась гиперссылка, то считать её за 22 символа при любой длине этой ссылки (как в твитере)
      
   3. Усложнение: реализовать отправку формы на сервер через AJAX, без перезагрузки страницы
      
   4. Усложнение: саму форму в виде HTML загрузить с сервера через AJAX, в момент клика по кнопке "Click me", правила проверок данных должны как-нибудь "извлечься" из самой загруженной формы, например из аттрибутов полей ввода
      
   
   
6. К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты.
   
   1. Усложнение: сделать форму календаря мультиязычной. Хотя бы через настройки на том же JavaScript
      
   2. Усложнение: сделать так, чтобы с помощью календаря можно было выбрать диапазон дат, чтобы она была привязана к двум полям формы "дата начала" и "дата окончания", и чтобы значение в поле "дата начала" обязательно была меньше чем в поле "дата окончания"
      
   3. Усложнение: сделать так, чтобы с помощью в календаре можно было видно визуально этот диапазон
      
   4. Усложнение: диапазон может быть открытым, но не пустым, то есть пользователь должен задать хотя бы дату начала или дату окончания.
      
   
   
7. Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме.
   
   1. Усложнение: сделать селектор "тип устройства", чтобы менять размер фрейма (например, "iPhone 5c 1136x640") и "чекбокс" для смены ориентации страницы "горизонтальная" или "вертикальная" (соответственно 1136x640 или 640x1136)
      
   2. Усложнение: в селекторе тем предусмотреть поиск тем по подстроке, и аналогично поиск устройств по части названия (авто-дополнение, auto-complete)
      
   3. Усложнение: тема страницы должна меняться без перезагрузки фрейма
      
   
   

Задачи повышенной сложности, исходя из личного интереса

1. Реализовать форму для многошагового мастера: форма должна состоять из нескольких страниц (шагов), пользователь может переключать страницы через какие-нибудь элементы управления "вперёд/назад" или "перейти на страницу".
   
   1. Усложнение: реализовать функциональную связь значений, когда некоторые данные зависят друг от друга (ввёл число в поле "количество" и в поле "сумма" значение пересчиталось)
      
   2. Усложение: доступность некоторых полей ввода должна зависеть от данных (например, если указал "есть личный самолёт", то значит можно ввести "марка самолёта")
      
   3. Усложение: видимость некоторых страниц должна зависеть от данных из предыдущих страниц (например, если указал "есть личный самолёт", значит появилась страница "ТТХ самолёта"; иначе страница должна скрыться)
      
   
   
2. Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
   
3. Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat"
   
   1. Усложнение: два игрока на разных компьютерах, ходы передаются по websocket
      
   2. Усложнение: ограничение на ожидания окончания хода 15 секунд, по окончании ожидания автоматически делается случайный ход
      
   
   
4. Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включен, строка зачёркивается.
   
   1. Усложнение: пользователь может переименовывать, удалять, добавлять строки
      
   2. Усложнение: список хранить в localStorage браузера, чтобы при перезагрузке страницы он восстанавливался
      
   3. Усложнение: пользователь может иметь несколько независимых списков todo
      
   
   
5. Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул.
   
   1. Усложнение: добавить переключатель режимов "точка"/"линия", в режиме "линия" рисуются линии между двумя последовательно кликнутыми точками
      
   2. Усложнение: можно менять толщину, цвет линий, размер точек
      
   3. Усложнение: последовательность кликов можно воспроизвести ещё раз с самого начала, равномерно или с реальной задержкой между кликами, с обычной скоростью или ускоренно
      
   4. Усложнение: можно выгрузить получившийся рисунок в формате PNG или SVG, причём SVG c анимацией воспроизведения
      
   
   

Можно использовать любую существующую библиотеку.
Например,
для построения графиков www.highcharts.com
для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox и https://jqueryui.com/dialog/
для валидации форм rickharrison.github.io/validate.js
для календаря https://jqueryui.com/datepicker/
для автодополнения https://jqueryui.com/autocomplete/
для передачи данных между несколькими пользователями socket.io или обычный AJAX

1 - Не нужно работать по 8 часов для денег. Тут вопрос в том, какой вы профессионал в своем деле. Оплачивается на рынке Ваша стоимость. Если допустим Вася профессионал то он работает 2 часа и получает 20 000, хочет, работает 8 часов в день и получает 80000, а вот Пете надо работать по 10 часов в день, чтобы заработать 80000. так что Оплата зависит от Вашей стоимости. Станьте профессионалами своего дела.

2- Спать - да, обязательно 8 часов, но каждый день в одно и то же время, и главное обеспечить ранний подъем - в 6 утра. Тогда времени будет достаточно много, чтобы выполнить любую работу.

3- Полезная еда. Скажу так - готовить можно 1 раз на 1-2 дня. Разбивая потом на порции в контейнеры, далее просто микроволновка - 3 мин и обед, ужин и т.д. готовы. Для примера, я 3,5 года прожил в Доминикане, где из рациона был рис макароны, курица и говядина. Готовка занимает час и все. а свежие фрукты и овощи дома должны быть всегда.

4- Спорт - Купите домой штангу и 2 гантели, разборные. И занимайтесь в перерывах - Кстати которые Реально необходимо делать в работе - Сидеть и писать код 8 часов не реально. Точнее реально - но это сильная нагрузка для глаз. Обязательно нужно прогуливаться по парку. Ибо работая год в таком режиме можете потом работать на оплату лекарств для глаз) ну в лучшем случае Носить очки) (Я говорю о фанатеющем сидении за ПК реально не отходя от него.) Есть еще одни вариант - запишитесь в зал где есть бассейн. И ходите 1 раз в 3-4 дня.

5- Самообразование - читайте перед сном, слушайте аудиокниги в дороге. Допустим пошли в магазин, слушайте книгу. Сейчас можно найти все что хотите.

6 - этот пункт на самом деле прост. Как описал в первом пункте, становясь профессионалом, Вы сможете больше зарабатывать ИЛИ уменьшать время работы.И тогда Для хобби будет не 1-2 часа, а 3-4. И так далее. И если хобби действительно хорошее, и будет приносить Вам радость в первую очередь, то и в других сферах Вам будет комфортнее. Если уделять хобби много времени - то Вы станете в этом профессионалом. и люди захотят платить Вам т.к. Вы знаете больше их, с Вами будут советоваться и т.д. И чем больше этим заниматься, тем больше денег будет это приносить, и тогда придет момент, когда доход от хобби будет небольшим, но достаточным, чтобы прожить. И тогда надо решиться полностью этому посвятиться, и отказаться от прежней работы.

Для начала пробуйте так - Делайте выходные от работы (субботу и воскресенье) и посвящайте хобби полностью. Так будет работа продуктивнее.
Ведь что такое отдых - это смена Вида деятельности.

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

Это мой собственный опыт.

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

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

Рекомендую Вам прежде всего надо спросить себя "А что именно хочу?" и "Какие у меня мечты?". Ежедневно спрашивать себя "Какие задачи должен сегодня сделать чтобы хоть на чуть чуть приблизиться к моим мечтам?".

Первый путь.
На Гитхабе поискать по ключевым словам (BEM, SMACSS, OOPCSS) — найдутся бойлерплейты и стартеркиты, которые по определению должны быть хорошего качества.

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

Второй путь.
Искать в Гугле людей, которые пишут про BEM, SMACSS, OOPCSS и прочих крутых фронтендеров. Искать их профили на гитхабе, изучать их проекты. Если они пишут про методологии, то они явно их используют в работе.

С IDE все нормально как раз. Лучше продукции от JetBrains ничего не видел. В купе с ним, можно использовать какой нибудь WinSCP, ибо на сервак необходимость залезть бывает.
Все Вы делаете нормально.

HTML, CSS – база для верстальщика
Желательно интересоваться UIX частью, тоесть как делать "человекоудобно", что не всегда красиво в коде.

Переходим во фронтенд:
JQ (?) - надобность его падает пропорционально написанным велосипедам по работе с домом, анимациями и пониманием Ajax.
EcmaScript (чистый js, он же "ванилла", но боже упаси произносить это вслух в приличном месте) + паттерны программирования – я бы выделил это все двойным болдом и тройным подчеркиванием. Это база фронтендера.
Немного bash-а для терминала.
NodeJS – суть тот же JS, но с привкусом бэкенда, полезно для понимания, как ваши странички вообще доставляются пользователю, какие самые банальные проблемы это в себе таит, и снова понятнее, как работает Ajax.
Идем дальше и глубже –Stylus | LESS | SASS - препроцессоры, лучше уже хорошо владеть нативным CSS, пониманием атомарного дизайна, модульности и тп. Ощущения от использования словно получил суперсилу для верстальщика, хорошо сочетается с общим пониманием программрования. Есть еще постпроцессоры – их суть в том, что они работают с готовым кодом, когда препроцессоры компилируются в тот самый "готовый" код.
Шаблонизаторы разметки – Mustache, Handlebars, Jade, EJS, React.

Упрощаем работу:
GIT – система версионирвоания – порядок в работе и бекапы. Качественный левелап даже для команды из одного.
Сборщики Gulp, Grunt, ... и их плагины + пакетные менеджеры (NPM, Bower, ...) - автоматизация тех действий которые набили оскомину, сборка проекта, автоматическая генерация стилей из препроцессора, сборка бандлов, минификация и прочая томуподобная рутина (в которой, однако, не вредно по началу натереть мозолей)

Чувствуем себя крутым:
Учим MV* – Ember, Angular, Knockout
Фреймворки вроде d3.js и работа с канвасом.

Когда более менее освоетесь с JS:
Попробовать поучить С++, Java, ... – это не так важно что, к чему душа ляжет. Для общего развития и понмиания программирования.

alvarotrigo.com/fullPage

Вариант с обучением через верстку .psd макетов вас до "пика" не доведет. Максимум до уровня рядового "верстальщика". Сверстать статику может каждый второй, кто хоть иногда этим занимается. Если вы нацелены на реальный "пик", то вам надо учиться на основе живых примеров уровня www.awwwards.com www.cssdesignawards.com и www.thefwa.com
Копайтесь, смотрите что как сделано, пытайтесь сами воссоздавать отдельные куски "не смотря под капот" (то есть только на основе того, что вы видите, не залезая в F12). Но перед этим вам надо будет нагнать основы, то есть все что связано с css трансформами, нестандартными лэйаутами и другими трендами дизайна, а то иначе когнетивный диссонанс вам обеспечен. После этого будете долго практиковать анимации, свг, 2d-canvas и в самом конце возможно даже WebGL. Обязателен к употреблению codepen.io
Ну а если прочитав все это вы вдруг поняли, что вас на самом деле не интересуют всякие нестандартные промо-сайты, а вам просто надо уметь верстать странички для стандартных интернет-магазинов или еще чего подобного, то вам достаточно будет потратить 1-2 месяца на чтение вводных статей и начать штамповать сайты на бутстрапе. Вот.

Препроцессоры (LESS, SCSS, SASS, Stylus), всякие фреймворки типа Angular и React.js, сборщики типа Grunt или Gulp. Node.js, чтобы это всё замутить в автоматическую сборку. Bower ещё какой-нибудь.
Нативный JavaScript — это основное и неотъемлемое требование.

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

Javascript язык довольно специфический, может для начала ruby + ruby on rails для изучения стройной объектной модели + немного js для рюшечек-фишечек на клиенте, потом какие-нибудь SPA на angular/backbone/нужное подставить и API на тех же рельсах, а там можно и node.js попробовать, имея понимание, чего не хватает в рельсах.
В качестве базы сильно советую postgre, хорошо поддерживается рельсами, есть много интересных фич (mongo-образные поля в jsonb с индексами по ним же чего только стоят).
Такой стек технологий на мой взгляд очень хорош для фриланса - грамотных специалистов меньше, заказы интереснее, чем, прости господи, сайтики на джумле пилить).

Есть куда более быстрые способы стать фрилансером, но и финансовый потенциал ниже.
Например:
seo, вёрстка (html+css), простенькие сайты на бесплатных движках (wordpress)...
Если выбирать между java и javascript, то я бы выбрал второе. Области применения намного шире

Я перешел с винды на Ubuntu 3 месяца назад. Все ок и все работает должным образом. Начиная от командной строки и заканчивая редактором. А то что нет полноценного Photoshop это миф. Посмотри тут https://www.youtube.com/watch?v=wjmQJckOATM И собственно зачем Photoshop верстальщику, понятно что для посмотреть макет и нарезать, все. Правда все это можно сделать и на gimp, но тут дело вкуса. Лично я за продукт Adobe assets.adobe Все остальное настраивается и работает на Linux в разы проще и быстрее. node, npm, bower, gulp, grunt, git ... да собственно все, что нужно фронт-энд разработчику. Тот же looftblog выложил видео с настройкой среды разработчика на Linux https://www.youtube.com/watch?v=DfSm7SVq4LA

UPD: и да сейчас вообще Avocode рулит