Clever_Coyote

1. Миксины полезнее для свойств с префиксами и параметрами. В вашем примере в миксине нет параметров, просто набор свойств. Для списка свойств можно просто создать класс, а потом его вписать так: @extend .classname; в нужном месте. Или прописать этот класс элементу в разметке.
2.не стоит создавать излишней конкретики вложенности , если этого не требуется. в будущем, если понадобится, можно обертку добавить. Это к тому же лишит возможности использовать классы повторно в других элементах.
3.Лучше присвойте классы каждому элементу, хотя кажется, что header nav ul li писать быстрее, классы придуманы для стилизации, а теги для структуры документа. Вы сможете потом использовать их повторно, поставив другому элементу.

Плюсы Canvas:

• Высокая производительность при отрисовке любых 2D объектов.
  
• Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения.
  
• Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т.п.), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
  

Плюсы SVG:

• Нет зависимости от разрешения — SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана.
  
• SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью JavaScript.
  
• Можно получить полный контроль над каждым элементом, используя SVG DOM API в JavaScript.
  
• SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению доступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений.
  

Минусы Canvas

• Отрисовка основана на пикселях.
  
• Не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы.
  
• Слабые возможности по рендерингу текста.
  
• Возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2D и 3D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью JavaScript. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas.
  
• HTML 5 Canvas не подходит для создания веб-сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе.
  

Минусы svg

• Низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM
  
• Скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG.
  

Вывод
HTML 5 Canvas следует использовать для:

1. Редактирования изображений: обрезки, изменения размеров, фильтров (удаления эффекта красных глаз, создания эффекта сепии, изменения цветности или яркости)
   
2. Создания растровой графики: визуализации данных, создания фракталов и графиков функций.
   
3. Анализа изображений: создания гистограмм и т.п.
   
4. Создания игровой графики, такой как спрайты и фоны.
   

SVG следует использовать для:

1. Создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана.
   
2. Высокоинтерактивных анимированных пользовательских интерфейсов.
   
3. Графиков и диаграмм.
   
4. Редактирования векторных изображений.
   

честно скопипастил

Этот подход "псевдоооп", хотя у вас и есть какие-то объекты, вы лишаете себя целой кучи полезных вещей - наследования, полиморфизма, не очень оптимально работаете с памятью.

В JS ооп принято варить через прототипы. Например, вот так:

(function (my) {
my.Form = function () {
  $(document).on('submit', 'form', function (evt) {
    // это же просто пример, так?
  });
};
my.Form.prototype.submit = function () {
  // ...
};
})(MY);

В дальнейшем, если вам понадобится не просто форма, а, например, валидируемая форма, или даже AJAX-форма, вы сможете без проблем отнаследоваться от этой формы и добавить ништяков. Например.

(function (my) {
my.ValidatedForm = function () {
  // something
};
my.ValidatedForm.prototype = new my.Form();
my.ValidatedForm.prototype.isValid = function () {
  // ...
};
})(MY);

Также у вас появится доступ к состоянию инстанса через ключевое слово this: для этого потребуется создавать экземпляры через оператор new. Будет выглядеть как-то так:

var myForm = new MY.Form();
myForm.submit();

Это не всегда нужно делать именно так, но все зависит только от того, чего вы в конечном счете пытаетесь достичь. Я очень советую почитать статьи Ильи Кантора, автора сайта javascript.ru про ООП в JS. Он прилично пишет и хорошо разбирается в предметной области.

Конечно можно. Например, вот так: codepen. Элементы, которые будут создавать тень сверху и снизу, нужно «сперспективить». Для этого нужно задать свойство perspective их родителю, а их самих повернуть относительно оси X с помощью transform.

codepen.io/podorozhny/pen/xVRXRp

Картинки лучше вынести в спрайт.

Transition не анимирует свойство display, а у вас выпадающее меню как раз на его основе. Попробуйте реализовать меню по другому, например с помощью margin или opaсity. Тогда можно будет применить transition.

GSAP и обычные css анимации

https://jsfiddle.net/dwz83vea/1/

Попробуй так:

canvas {
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  margin: auto;
  transform: translateX(-50%) translateY(-50%);
  width: 20%;
}

У вас изначально неправильная реализация, которая рассчитана на определенные разрешения, у меня Full HD разрешение, и у меня пробелы между линией.
А подобные вещи лучше делать через ul li, где в качестве линии выступает ul, а ваши steps это li, надеюсь суть ясна.

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

1) Wireframe.cc: пожалуй, самый простой сервис, находка для быстрых набросков
https://wireframe.cc/

2) Balsamiq: простой и интуитивно понятный ресурс
balsamiq.com

3) Axure: идеальный ресурс для проектировщиков и менеджеров
www.axure.com

4) Invision: мощный онлайн-сервис, с огромным набором дополнительных функций
www.invisionapp.com

5) POP: приложение, бумага и карандаш - это все, что вам требуется для создания интерактивного прототипа
https://popapp.in/

6) Moqups: Помимо прототипов можно создавать карты сайта, диаграммы и многое другое
https://moqups.com/

7) Mockflow: удобный инструмент, с неперегруженным функционалом
www.mockflow.com

8) Proto.io: незаменим для проектирования интерактивных прототипов приложений
https://proto.io/

9) UXPin: полезный и интересный сервис для профессионалов
www.uxpin.com

10) Omni Graffle: излюбленный сервис для приверженцев iOS
www.omnigroup.com/omniGraffle

Язык надо выбирать под задачу, которую он может решить. А не по мейнстриму.

скайп браузерный запилить

стримить налево направо без тормозов

Erlang (Elixir)

быстро считать "страшную аналитику".

парсить "стопятьсоттыщ" файлов от юзеров

Crystal, Ruby

статысячам сопливых девочек фоточки из "туалетов да кафе" фильтрами обмазывать

Javascript

Для инструментов
Node.js, Gulp.js

Для MVP, контентных, маркетинговых и ecommerce сайтов
Ruby on Rails

Второй вариант предпочтительнее.
При использовании минификаторов в первом варианте код сломается, во втором нет.

• БЭМ. Независимые блоки.
  
• Препроцессоры
  
• Постпроцессоры
  
• Семантическая верстка
  
• Целиком и полностью адаптивная верстка
  
• Грамотное использование тегов HTML5
  
• Оптимизация скорости загрузки страниц
  
• Меньше бессмысленных JS-плагинов и библиотек
  
• Относительная кроссбраузерность
  
• Деление сайта на 2 версии - сжатую (без мусора и воды, ту, что реально сервер будет отдавать) и обычную (для человеко-понятного редактирования).
  
• И еще: Тык
  

Какие задачи нужно уметь решать на чистом 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. т.к. все файлы сайта были помещены в папку /home/user/www/mysite.zz то добавил пользователя в группу www-data sudo adduser user www-data
2. www-data сделал владельцем корневой папки
chown user:www-data -R www
3. Дал доступ к папкеchmod -R 775 www
4. в файле /etc/apache2/apache2.conf
добавил

<Directory /home/user/www/>
  AllowOverride All
  Require all granted
</Directory>