Григорий Мануша

Когда я захожу на определенный сайт, провайдер видит URL?

Да.

А если я захожу на https?

Известен IP сервера и имя домена. Больше ничего.

Откуда провайдер узнает, что я скачиваю определенный фильм/программу через torrent?

Торрент-клиент общается с трекером по HTTP. Все видно насквозь: конкретные торренты + вся статистика (когда начато скачивание, когда закончено, когда пошла раздача, сколько роздано). Возможно подключение к трекеру и по HTTPS, но rutracker.org такой возможности не дает (мне тоже интересно почему).

Все пакеты которые я получаю и раздаю значит провайдер скачивает себе, чтобы узнать что это за фильм/программа?

Провайдер не хранит у себя весь трафик. Это технически невозможно. Но трафик обрабатывается, классифицируется и ведутся логи о том какой тип трафика когда входил/уходил от абонента.

Или он отслеживает факт скачивания .torrent файла, а затем делает вывод по идущим пакетам, что это скачивается?

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

Когда я пользуюсь VPN, что видит провайдер?

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

Что я зашел на определенный IP и с него идут зашифрованные потоки?

Дальнейшее направление трафика от VPN-сервера отследить невозможно (по крайней мере, на оборудовании провайдера в автоматическом режиме). Но при целенаправленной слежке за абонентом в принципе возможно по временным меткам сопоставить трафик абонента с трафиком любого сервера.

OpenVPN будет работать через VPN IP и в браузере и при обновлении Windows, драйверов, ...?

В зависимости от настройки. Но в общем случае, да, так.

Читал, что в Windows есть такая особенность, что если провайдер как-то урезает пакет, то VPN отключается и сайту показывается мой реальный IP?

Это не связанно с провайдером. Это особенность Windows. Когда VPN отваливается, весь трафик вылетает наружу в открытом виде. Опять же зависит от настроек. Но это еще одна цена "удобства" при использовании Windows.

При этом провайдер видит на каком я сайте, что скачиваю?

VPN отвалился - хацкер спалился.

Таких фишек много?

Смотря о чем речь. В сфере сетевой безопасности и анонимности различных нюансов вообще много.

Как от них защитится?

Учить мат.часть. Разбираться в сетевых протоколах и в устройстве ОС.

Если пользуюсь каким-то расширением типа ZenMate, dotvpn, провайдер аналогично как и с VPN видит что что-то отправляется и приходит на определенный VPN IP?

Расширения очень разные. Они могут базироваться на совершенно разных технологиях. Ни один специалист вам не скажет за все расширения. Не исключено, что многие из них, по сути - honeypot, то есть созданы с целью слежения за любителями анонимности, привлекают своим удобством и дают ложное чувство безопасности.

При использовании Tor, кто-то пользуется моим IP, пока я пользуюсь чужим?

Нет. Если у вас не сконфигурирован Exit Node.

Что при этом видит провайдер, что я получаю потоки данных с определенных IP и каждый раз разный IP?

У них есть система точного обнаружения использования Tor. Это факт остается в логах с теми же последствиями, что и для VPN.

Провайдер видит URL?

Через Tor и VPN - нет.

Каким образом можно полностью управлять сетью на ПК, видеть что, куда и когда отправляется или приходит на ПК (Windows, Linux)?

Видеть все: https://www.google.com/search?q=Wireshark
Блокировать все лишнее: https://www.google.com/search?q=Comodo+Firewall

Я бы рекомендовал попробовать сверстать собственный макет самостоятельно, к примеру, на том же bootstrap. На своем опыте оцените, есть ли недостатки.

Из правил:

1. Дизайн не должен мешать пользователю. Чем меньше шума, тем лучше. В идеале - ничего лишнего на экране. И как можно меньше анимации.
   
2. Функциональность превыше эффектов - сначала содержимое, только потом украшения
   
3. Мыслить от абстрактного к конкретному, мыслить модульно - чистый холст делим на части (в пропорциях), потом добавляем компоненты в виде сплошных фигур, потом детализируем компоненты. Так мыслит и верстальщик, и программист. Хранить компоненты в отдельных файлах.
   
4. Красивый дизайн - логичный дизайн. Все должно быть упорядоченно, иметь обоснованные размеры, отступы, цвета и эффекты
   
5. Постоянство - одна цветовая схема, пропорции, типографика, элементы
   
6. Стандарты и традиции. Поведение предсказуемо. Стрелка вниз на панели означает, что панель развернется вниз, а не вверх. Красный - опасное действие, зеленый - безопасное. Используйте стандартные иконки, вместо никому не знакомых.
   
7. Смотрите на дизайн чужими глазами - наложите черно-белый фильтр или размытие и убедитесь, что содержимое не растворилось, акценты на месте. Продумайте, что случится с колонкой или меню, если текста будет слишком много или мало.
   
8. Растровая графика для фотографий и многоцветных изображений. Все что может быть описано в векторе - делается в векторе.
   
9. На каждое правило бывают исключения
   

Книги и материлаы

1. Design for Hackers: Reverse Engineering Beauty - технический взгляд на элементы дизайна
   
2. Прочие книги по UX и web-design в списках бестселлеров amazon / ozon
   
3. behance и dribbble - для анализа лучших практик
   
4. Руководства по стилям: Google Material Design, Modern UI, Apple Human Interface Guidelines, ibm design. Тоже для анализа практик и правил для конкретной платформы.
   

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

На новое место работы, где не говорят нелепых фраз вроде:

у нас не гигантские проекты, что бы еще и препроцессоры задействовать

Пользуюсь bootstrap'ом

Ради всего святого, перестаньте.

Что изучать?

• Чистый JS, jQ - не панацея
  
• Gulp - позволит автоматизировать огромное количество задач (на cms или нет - абсолютно не важно)
  
• SASS/SCSS
  
• Git
  
• БЭМ
  
• Учиться верстать руками, а не собирать поделки из бутстрапа
  

$('ul:not([class])').addClass('active')

1. Нельзя использовать "много кнопок с id likes". ID должен быть уникальным. Используйте классы/data-атрибуты.
2. Оберните весь свой код в $(document).ready(function () {...});
3. Этот код должен подключаться ПОСЛЕ jquery.

1. Любой код требует поддержки, раз вы пишите комментарии, значит код будет поддерживаться еще долго и над ним будет работать команда. В международной практике является нормальным явлением, когда команды мультинациональны. В такой ситуации общепринято использовать всем понятный английский язык, который является стандартом в IT. Даже в ситуации когда команда вся русскоязычная, всегда есть вероятность обмена опытом, когда к вам на стажировку приедет иностранный специалист или просто потребуется например продать код другой компании. Так что даже палка раз в год стреляет.
2. Это хорошая практика. Конечно можно обойтись без английского языка, работая программистом в России. Но на самом деле английский очень нужен, чтобы выйти за рамки и стать по настоящему крутым спецом. Как бы много не было материалов, книг, курсов, туториалов на русском, на английском всего этого добра в сотни раз больше и очень высокого качества.

<div onclick="func_a()">
    <div onclick="func_b(event)"></div>
</div>
<script type="text/javascript">
    function func_a() {
        alert('a');
    }
    function func_b(e) {
        e.stopPropagation();
        e.cancelBubble = true; // для IE
        alert('b');
    }
</script>

Читать подробнее:
— https://developer.mozilla.org/en-US/docs/Web/API/E...
— https://msdn.microsoft.com/en-us/library/ms533545(...

попробуйте посмотреть IP в connection information и в виртуалке подставить этот IP вместо localhost. В обратную сторону (локальный сервер в виртуалке - просмотр на рабочей ОС) работает