Игорь Морев

Какие задачи нужно уметь решать на чистом 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

Разобрался с проблемой. Дело в том, что на маке работаю вторую неделю, и я не знал, что при закрытии приложения на крестик, закрывается окно приложения, а не само приложение. Если закрывать приложение через cmd+q, то при следующем запуске откроются последние открытые файлы.

Любой, который знаете. Веб тем и хорош, что клиенту все равно, что на сервере, и наоборот.

Побуду диванным критиком, что-ли.

1. Обратите внимание на шрифты - они у Вас на сайте ужасны. Если с фронт-эндом работаете, то это важно.
2. Верно выше подметили, что не надо указывать навыки в процентах. Что это вообще должно значить? Лучше обычным перечнем, примерами - что могу, что не могу. А так - вроде красиво, но толку ноль.
3. В опыте работы долго не мог понять что за бредовое слово "Констракшин". Думал-думал что за скилл такой, оказалось это часть названия конторы. Может, логичнее было бы всё название в скобки засунуть и сделать ссылкой на их сайт?
4. Личные навыки: Целеустремлённость, быстро-обучаемость, ответственность, усидчивость." - люблю такое, вроде молодец, а вроде все такие. Если позиционируете себя как новичка в фронт-энде - пишите об этом, типа "За полгода перешел на 100% валидный бутстрап-хтмл5-ксс3 код с говно-табличной верстки на коленке". Это более важный факт, чем усидчивость - она в туалете хороша, а верстальщику важнее работу свою любить и стандарты уважать.
5. Портфолио, конечно, смех да и только. 3 готовых чужих темы и сайт кремлевского дворца, который выглядит как поделка с урока информатики в школе. Это всё, серьезно? 30.000 рублей с таким портфолио предложит только совершено конченный руководитель.

Повышайте скилл, работайте на фрилансе. Любите, прежде всего, своё дело, а не деньги. Тогда, может, и получится найти хорошую работу. Сейчас - нет.

Я бы посоветовал вам устроиться на некоторое время работать в офис. Работа в команде очень сильно помогает поднять свой уровень. В этом есть несколько плюсов:
1. У вас всегда под рукой есть ментор, который может подсказать как решить поставленую перед вами конкретную задачу. Знания, получаемые таким образом, усваиваются намного лучше. Вы лучше понимете, как применять свои навыки.
2. К окманде работает несколько человек, каждый со своим мнением и кругозором. Общение на обеде, за кофе и на обсуждениях проектов поможет ваам расширить свой профессиональный кругозор. Вы узнаете про многие технологии. В данный момент они вам не понадобытся, но вы будете знать о них, во время принятия решений в будущем.
3. Устраиваясь на работу в офис стажером (или новичком, в общем неопытным специализстом), вы ставите в известность своего работодателя. Он в замен на пониженый оклад (у начинающего программиста ЗП, конечно ниже), помогает вам обучаться, выделяя вам ментора и давая практику.
4. Вы преобретаете опыт решения реальных кейсов. В дальнейшем вы будете знать, как решается большинство типовых задач.
5. В спокойной, но реальной обстановке получите опыт обучения "на лету" и поиска нужного материала.

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

Мой вам совет: поработайте некоторое время в команде.

Часто применяется для:

1. Локальные приложения и утилиты командной строки

• Сборщики и трансляторы
  
• Пакетная обработка и сценарии отложенной обработки
  
• Скрипты, CLI (интерфейсы командной строки)
  
• Генерация документации, отложенное формирование отчетов
  
• Сценарии тестирования для других систем
  

2. Серверы

• Серверы веб-приложений и SPA
  
• Серверы и API для мобильных приложений
  
• Любые другие веб-API (RPC, JSON, REST)
  
• Серверы сообщений и трансляция событий (чаты, игры, интерактив)
  
• Заплаты на уже готовые системы, написанные на других языках, для реализации вебсокетов, SSE, лонг-пулинга и т.д., т.е. для затыкания дыр, для решения проблем в узких местах уже работающих систем.
  

3. Клиенты

• Оконные приложения (nw.js, node-webkit)
  
• Кравлеры, парсеры и сбор данных
  

4. Железо

• Программирование микроконтроллеров (arduino, espruino, tessel)
  
• Промышленная автоматизация
  

Редко применяется (но подходит) для:

• CMS, публикация контента (просто ниша уже занята и в этой задаче нода не дает чего-то принципиально нового или сверх соблазнительного).
  
• Массовая электронная коммерция и торговля (не применяется для массовых движков магазинов, но используется отдельными крупными компаниями для торговых и платежных задач в качестве дополнительного средства к уже имеющемуся ПО, по сути закрывает узкие места).
  

И плохо подходит:

• Вычисления и моделирование, со скоростью математических операций нода и JS, как не типизированный язык, не дают хороших показателей
  
• Научные приложения (по тем же причинам)
  

Дочитал до "ряд cms", дальше не стал.

Тут выбор только за тобой. Если тебе нужен тупо ограниченный функционал, позволяющий тупо "штамповать" статьи одна за одной и ты хочешь, чтобы все было "готовенькое"? Пожалуйста, твой выбор cms. А потом, когда тебе понадобится написать самому что-нибудь, там тебе уже cms не помогут. У них только ограниченный функционал.

Вывод: забей на cms, нажать кнопку и "установить" сайт может даже обезьяна. А вот написать свой код, пусть с костылями, велосипедами и говнокодом, зато свой, это многого стоит.

Если по делу - то практикуйся очень много в написании частей для своего сайта (ну, я про html и css, про js не забывай (как это сделал я)), а потом берись (или сейчас, просто все совмещай, так даже лучше, думаю) за серверную часть. Советую PHP. Отличные мануалы на оф сайте, много локализованной поддержки. Не гонись сразу за "алмазами", сразу придется начать с hello, world. Все приходит с практикой и опытом.

1) если приложение не большое, то да, phonegap подойдет. Но сразу предупрежу что без опыта оптимизации под мобильные девайсы, ваша верстка/js скорее всего будут подтормаживать на большинстве девайсов. Правда есть еще штуки типа steroids.js, которые являются ответвлением phonegap, предоставляя возможность использовать некоторые фишки нативного ui... Правда проект этот с закрытыми исходниками, сборка происходит на их cloud сервере сразу под нужные вам платформы. Для вас это может быть плюсом, но я допустим только по этой причине не могу использовать оный проект при коммерческой разработке.

2) phonegap ничего не конвертирует. По сути phonegap представляет собой ничто иное как отдельный компоненты webview с api для взаимодействия нативного кода и js, и набора дефолтных проектов под каждую из платформ, где уже настроено все (как грузить webview, как подключать файлики, что загружать а что нет...). Ваше же приложение будет представлять собой

3) обязательно использовать html и css. Что оттуда вы используете - решать вам. Но вам так или иначе придется верстать. Есть правда проект для построения приложения исключительно на нативном ui, но он сырой и там не так много возможностей.

И да, без некоторых фишек css3 вы никак не обойдетесь (css анимации, если нужны хоть какие-то плавные анимации, штуки типа bordeer-raduis... словом не так важно знать весь стандарт). А html5 это скорее dom api, а не сама спецификации разметки.

4) нет. Вы будете реализовывать приложения смутно напоминающее web-сервис, но локальный. Почитайте про single-page apps, про angular.js... про фонгап в конце концов. web сервис вам нужен доступные по сети, только если вам нужен этот сервис (api для приложения, хранение базы данных пользователей или какого-то контента).

Если смотреть на вашу задачу (чат), почитайте как реализуют чаты для браузеров, и перенесите это в phonegap (у вас страничка клиент находится на девайсе и подключается через websockets к серверу для обмена сообщениями).

5) mysql нужен только для хранения каких-то данных. Нужна она вам или нет зависит от задачи. Для простого чата она не нужна.

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

7) ответ на это был приведен выше.

Вообще больше гуглите и пробуйте. Начать писать на phonegap легко, есть миллион уроков и статей. Пробуйте и ищите. Правда возможно сначала вам стоит задаться вопросом "а надо ли это мне?".

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

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

Для начала заходите на любой каталог плагинов для JavaScript или jQuery. Находите интересный, не очень сложный на вид плагинчик (например карусель, лайтбокс, слайдер и т.п.) и пытаетесь сделать похожий, только лучше. Поначалу будет выходить черти что, но, это будет уже реальная задача, где вы начнете сталкиваться с реальными особенностями языка. Вот тут то знания и начнут обретать какую-то структуру у вас в голове.

Не пытайтесь брать сразу сложные вещи, начинайте с малого. Как заметили выше, не смотрите пока что на очень сложные книжки, их читать сейчас почти бесполезно.