Иван Ефимов

Не зачем а почему. Полагаю главная причина - политика монополизации рынка Microsoft, которая на любой чих вместо использования существующих стандартов, изобретает ни с чем не совместимый свой, чтобы добавить как минимум лицензионные ограничения, а так же чтобы среда в организациях была не смешанная (т.е. было сложно одновременно использовать не microsoft решения).
А еще по умолчанию почти любой инструмент удаленного управления требует особой настройки сети и фаервола (либо работает без проблем только в локальной сети).

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

Существует еще xwinows протокол, используемый xserver в linux (есть реализации под windows но с ними будут работать приложения заточенные только под его использования, т.е. пришедшие из linux/unix). Это даже не протокол для удаленного подключения, а штатная работа самой системы вывода изображения на экран мониторов - она изначально предполагает работу по сети, даже если работает локально, подключение идет через сокеты. Жутко не эффективный протокол, не умеет подстраиваться под сетевой канал и т.п. например его открытие - понижение уровня безопасности, злоумышленник может навредить или даже проникнуть на сервер (до недавних пор сам сервис xserver даже работал по root со всеми вытекающими от сюда рисками). Благодаря особенности работы, его в т.ч. используют для запуска даже отдельных приложений под разными логинами, подключившись к терминалу удаленно (тот же ssh), мало того возможны обратное направление - вы подключаетесь к серверу и перенаправляете порты своего локального пользовательского xserver на сервер в открытую сессию, и запущенные серверные приложения отображаются у вас (только в пределах вашего нового подключения).

Поверх xvindow под linux есть протоколы, от почившей NX nomachine и открытый x2go, на порядок уменьшающие требования к сети и терминалу,позволяющие удаленно работать с linux машинами, на мой взгляд наилучшие для слабых сетевых каналов.

vnc - открытый протокол, это копирование экрана пользователя без блокирования, у него есть различные расширения от того же tightvnc и т.п. главное его отличие - изображение передается не один к одному, возможны пропуски изменений на экране. Используется по умолчанию (но само собой не обязательно) для удаленного управления ubuntu (сервер vino). По умолчанию очень не эффективный протокол, изображение сильно отстает и т.п.

Еще в windows 7 и выше штатно есть фича - удаленный помощник, работает так - вы отправляете файл настроек администратору, с помощью которого он подключается к вашему экрану, не блокируя его. У инструмента куча ограничений (только администратор может подключиться), есть какие то проблемы при работе на терминальном сервере с пользовательскими сессиями, в остальном - то обычный проприетарный аналог vnc

teamviewer и тот же anydesk - это комбайны, которые содержат в себе не только удаленное управление но и голосовой и не только чат, vpn, передачу файлов и главное - сервис-прокси для подключения между клиентами без необходимости настройки того же фаервола, т.е. содержат инструменты обхода NAT. Это главная причина популяризации этих утилит - удобная работа, которая не вынуждает клиентов что то где то настраивать (что обычно очень сложно или даже невозможно).
Будьте осторожны, открывая доступ к машине, вы даете полный доступ разработчикам/администраторам этих решений к вашим машинам. У teamviewer была даже проблема, то ли используя ее уязвимость, толи пароли угадывали, информации было мало, злоумышленники подключались к машинам, выводили деньги из paypal и криптовалюты (обычно у людей локально пароли сохранены). Понятно что возможно это не проблема протокола, но это очередные открытые двери к вашей машине, ключ к которым тоже нужно охранять.

Во первых:
RDP != VNC, TeamViewer - так как RDP работает в отдельной сессии.
На одном сервере может быть несколько подключений под RDP, они не видят экранов друг друга, их клавишы/мышь передаются независимо, у каждого в свою сессию.

Во вторых:

http передавать, например команды, нажатые клавиши и т.д. через JSON, картинки типа рабочий стол в png/jpg. Зачем для этого использовать отдельный протокол?

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

В третьих:
http текстовый протокол, не бинарный. Он довольно много передает лишней информации.
Для того чтобы обеспечить комфортную работу через сеть, чтобы нажал кнопку и увидел отзыв - лишние звенья в передаче данных ни к чему.

В четвертых:
http не очень хорош как протокол оперативного двустороннего обмена (что и вызвало появление WebSocket).

В пятых:

Team Viewer - http

Это не так

В шестых:

Зачем они используют разные протоколы?

Ну давайте все будем использовать ту технологию что придумана когда-то.
Ну например, ездить на автомобилях без пневматических шин, с деревянными колесами.
Множество протоколов возникает:
а) как процесс совершенствования, как решение каких то дополнительных уникальных проблем.
б) некоторые протоколы, как протокол TeamViewer - закрыты и недоступны для других разработчиков.

Но, к примеру, тот же VNC (это единственных из трех вами упомянутых TeamViewer, VNC, RDP - открытый протокол) - используется в разном софте. Например, в локально запущенных виртуальных машинах для подключения к консоли или у хостеров для подключения к "локальной" консоли сервера клиента.

А вообще:

$merged = [];
foreach ($arr as $item) {
  $key = $item['id_user'].'/'.$item['price'];
  if (array_key_exists($key, $merged)) {
    $merged[$key]['count'] += $item['count'];
  } else {
    $merged[$key] = $item;
  }
}
$merged = array_values($merged);

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

Обычно так и делают. Это классическое решение, которое применяется практически везде. Используют слаг или id.
Что-то вроде

SELECT ... FROM ... WHERE `id`='event-name' OR `slug`='event-name'

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

Есть альтернативный вариант, когда хранится внутренняя таблица соответствий url1 -> url2. Это вариант менее удобен с точки зрения разработчика, т.к приходится прилагать много усилий по поддержанию актуальности и т.д. Такой вариант имеет плюс при правильной реализации - можно хранить цепочку редиректов со старого адреса на новый. Например, если у вас страница 3 раза получала новый адрес, то в этой таблице будет 4 варианта редиректов. Один актуальный и 3 устаревших. При этом при переходе по старому адресу будет происходить редирект на новый. Поддержание такого реестра ссылок дело не очень удобное, но подойдет для приложений уровня крупных компаний, которые не могут себе позволить отправить клиента на пустую страницу.

jPlayer ?

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

оборачиваешь изображение в див типа .img-wrap и ему задаешь

:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 2;
}

а самому

.img-wrap {
  position: relative;
  z-index: 1;
}