Vadim Bogomazov

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

PHP
PHP. The Right Way
Сборник советов и фактов по оптимизации PHP-скриптов
40 советов по оптимизации вашего PHP-кода
github.com/ziadoz/awesome-php

JavaScript
JavaScript. The Right Way
JavaScript. Оптимизация: опыт, проверенный временем
24 совета javascript-разработчику
superherojs.com
github.com/sorrycc/awesome-javascript

HTML, CSS
HTML CSS: The Right Way
Советы front-end разработчику
Руководство по оформлению HTML/CSS кода от Google

1. Создаю каталог для проекта
   
2. Инициализирую Bower
   
3. Устанавливаю нужные пакеты, например, Twitter Bootstrap, Angular, jQuery и т.д.
   
4. Ставлю Grunt, плагины для него и т.д.
   
5. Запускаю EMACS и создаю index.html
   
6. С помощью Emmet создаю шаблон, который уже начинаю заполнять.
   
7. В каталоге src создаю папки less, js и т.д.
   
8. Попутно пишу задачи для Grunt
   
9. Если в выбранном фреймворке не хватает какого-либо класса для стилизации элемента, сначала описываю стили прямо в шаблоне, в свойстве style. Затем при необходимости выношу их оттуда в LESS в виде одного или нескольких классов.
   
10. ??????????
    
11. PROFIT!!!
    

Как-то так: ( jsfiddle.net/DelphinPRO/vfhcdu2q/ )

<div class="bubble">
    <div class="bubble-in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ipsa quisquam deserunt rerum repellendus consequuntur iste inventore et dolorum natus. Suscipit saepe facilis fugit reprehenderit earum. Quibusdam expedita iusto mollitia!
    </div>
</div>

.bubble {
    width: 300px;
    border-radius: 15px;
    border: 3px solid #1AA0D2;
    display: inline-block;
    position: relative;
}
.bubble::after {
    content: '';
    width: 39px;
    height: 50px;
    border-left: 3px solid #1AA0D2;
    border-bottom: 5px solid #1AA0D2;
    position: absolute;
    bottom: -20px;
    left: 40px;
    background: white;
    transform: skewX(-30deg) skewY(-48deg);
}
.bubble-in {
    border-radius: 12px;
    padding: 30px;
    background: white;
    position: relative;
    z-index: 2;
}

Как-то так:

<video autoplay poster="test.jpg" id="vidos">
    <source src="test.mp4" type="video/mp4">
</video>

#vidos {
    position: fixed; 
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -1;
    background:  url(test.jpg) no-repeat;
    background-size: cover;
}

На данный вопрос, можно сразу дать ответ в стиле "В России нет ВУЗов, которые могли бы подготовить тебя достойно к вступлению в IT рынок".

Пока ты будешь зубрить материал с учебников от 89-99 годов, реальная ситуация прыгнет так, что после того как ты выйдешь из ВУЗа ты будешь чувствовать себя "Тупым"

Я думаю что изначально, ты неправильно сформировал вопрос. Подумай не над тем, в какой ВУЗ тебе нужно поступить, а над тем, чем ты собираешься заниматься в жизни. Быть успешным сотрудником в какой либо компании или начать свой IT бизнес или как и сотни других алая специалистов с дипломами без опыта ходить и биться лбом о закрывающиеся перед тобой двери работодателя.

В 99% на данный момент, статус твоего диплома не играет никакой роли. Когда я в СПб искал работу web разработчиком, работодателя интересовал мой опыт, а не бумага.

Когда ты сможешь правильно сформировать вопрос, ты сразу поймешь на что тебе следует потратить следующие свои 5 лет жизни!

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

Просто сразу пойми одну вещь, если тебе кто то говорит что в МСК или в СПб или еще где есть ВУЗ который просто ваще пипец крут крут крут и там профессора и так далее, все это пиар. Я учился 2007-2013 как раз момент активного развития различных сфер IT рынка. Все пары сводились к тому, что препод стоял у доски и читал лекцию с учебника от 88 года по Delphi 7. Pascal был приделом мечтания, а C/C++ преподавали на уровни 1+1=2 про web разработку вообще молчу, круче ie6 на краном XP и html - js - php на уровне 2+2=4 ничего не было.

По этому я бы н твоем месте сделал бы так, взял како нибудь средний ВУЗ по IT с не высокой нагрузкой на голову и все остальное время абсолютно все свое время кинул бы на гугления современных трендов в IT и их изучение, по прошествию 5 лет у тебя будет и диплом и подкованность в текущей ситуации IT рынка. Еще будет огромным плюсом если за эти 5 лет пока учишься ты еще будешь пробовать какие либо свои проекты, только не в рамках универа, потому что все что ты делаешь в универе является собственностью универа!

Ну вот наверное как то так )))

Вот по быстрому накидал:
HTML:
<div class="wrapper"></div>
CSS:

body,html {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
  transition: background 1s;
  background: none;
}

JS:

(function (w, d) {
	w.onload = function () {
		var wp = d.querySelector('.wrapper'),
        colors = ['yellow', 'red', 'green', 'blue'],
        ln = colors.length;
    
    var changeColor = function (i) {
      if (i < ln) {
        setTimeout(function () {
          wp.style.cssText = "background: " + colors[i] +";"; 
          i++;
          changeColor(i);
        }, 2000);
      } else {
        changeColor(0);
      }
    };
    
    changeColor(0);
  };
}(window, document));

Это на чистом js, его легко можно заменить на jQuery.
Рабочий пример.

var x = 'some string with {curly} braces'.replace(
    /{(.*?)}/g,
    function(a, b) { return b.toUpperCase(); }
);
console.log(x); // some string with CURLY braces

И так, с чего начать обучение:
1.Самый низкий порог вхождения у языка PHP. Начинайте именно с него
2.Изучите популярные CMS: WP, DLE, Joomla и т.д. Очень много заказов есть типа "Создать сайт", причем экзотики в 2 из 3 проектах не нужно. Здесь минус в том, что школоты тут полно и цену они сбивают весьма сильно...
3.Далее категория заказов "А можно ли сделать вот так". Сводится все это к разработке/переработке модулей на все тех же CMS. Нужно учить PHP + API этих самых CMS. Возьмите один движок и копайте по нему в эту область, не рвитесь сразу за всеми. Порог вхождения тут тоже не велик, но здесь больше голодные студенты обитают
4.Когда перерастете уровень дополнений/модулей, переходите к фреймворкам. Сейчас самый популярный Yii. Фреймворк позволяет Вам делать какие-то уникальные приложения, которые достаточно тяжело реализовать на готовых системах. Здесь ценник по существеннее, чем в первых двух, т.к. школота в силу своих умственных способностей сюда влезть не может.

Теперь расскажу как вообще этому обучаться на своем примере. Я делаю так:
1.Открываю тоненькую книжечку по языку(листов 100, не более), смотрю на основы
2.Делаю примеры из этой книжке в IDE/блокноте. Это дает мне определенную базу
3.Далее у меня есть список из примерно 20 задач(любую методичку по программированию откройте), которые я всегда делаю на новом языке. Это позволяет мне "привыкнуть" к новому коду и начать изучать стандартную библиотеку языка
4.Затем я начинаю брать низкобюджетные заказы на фрилансе по этому языку
5.После этого начинаю учить самый популярный фреймворк языка, опять же на низкобюджетных проектах.
6.Сделать с 12-15 проектов я могу уже браться за что-то более менее серьезное с почасовой оплатой на фултайме.

Вот это мой путь. По срокам - базу я себе нарабатываю за 1,5-2 месяца, на это время у Вас должна быть какая-то "подушка".

P.S. надеюсь помог. ))

Денис Каракчиев Могу ошибаться, поэтому выскажу всего лишь свое мнение, которое может быть ошибочным.

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

Блог вести надо, по след. причинами:
1. Помогаете другим
2. Получаете критику "Да ктож так пишет-то? Надо ...." и через аргументированную критику учитесь тому, что в книгах едва ли пишут!
3. Пиаритесь. Кто-то решив свою задачу, может порекомендовать Вас своему руководству в качестве нового сотрудника "А давайте-ка попробуем его в нашу компанию позвать?"
4. Это Ваш собственный справочник. Написанный тем человеком, который лучше всех Вас понимает! И тем языком и речевыми оборотами, которые Вы лучше понимаете. При этом следует учесть "Вы сейчас" != "Вы вчера".

Программирование это процесс мышления, очень часто приходится принимать различные решения . Примеры: "А что если если я объект std::string передам в виде... ?" или "Насколько Важно здесь поставить ... ?" и др. Все это может быть основано на Вашем же опыте изложенном в блоге! Отсюда п.5.

5. Блог это Ваш описанный опыт.