Игорь Перегудов

Вообще полной убедительности в этом добиться сложно. В порно-режиме кэш и локальное хранилище всегда пусты. Лучший способ добиться этого, не прибегая к backend - это localStorage.
Click here to see the truth
В нём не следует хранить данные, которые представляют какую-либо ценность. Об этом стоит помнить

Плюсы 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. Редактирования векторных изображений.
   

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

UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

не включая основы js

Извините, но стандартная задача, про "напишите функуцию add, которая при вызове add(1)(2) вернет 3" - многих положила на лопатки =) Поэтому будьте готовы..

React
0) Какую проблему решает react ?
1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...
3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?
4) Что будет если вызвать this.setState в render методе компонента?
5) зачем нужен componenWIllUnmount, приведите пример..
6) Контролируемые, не контролируемые компоненты
7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
8) Зачем нужны propTypes? Что происходит с ними в production сборке?
9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)
...

Redux
0) Какую проблему решает redux?
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)
4) Как компоненты приложения получают "пропсы" из "стора"?*
5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
6.5) А так же, "как в js вообще это работает?". Например:

let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

Что будет в obj1, почему? В каких случаях объекты могут быть равны?
7) Что возвращает функция connect (из react-redux)?
...

Общее:
0) package.json
1) Webpack, gulp, etc...
2) node.js
3) promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер..
2) Почему не работает следующий код, сделайте чтобы работало
...
На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна - не беда, многие и на половину ответить не могут.

p.s. возможно дополню...
p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.

C MVC фреймворками все понятно, но они меня не интересуют. А что делать с инструментами, нацеленными больше на фронтенд (React, Angular) ?

Открою вам страшную тайну - MVC фреймворки как раз на фронтэнд и нацелены, а не на бэкэнд.

ReactJS - библиотека, а не фреймворк. Это вопервых. И решает эта библиотека задачу оптимизации взаимодействия с DOM при связывании данных между представлением и моделью данных.

Angular - полноценный фреймворк, к которому можно подключить тот же React для вьюх. Используют его в основном при реализации Single Page Application-ов.

Были ли у вас практические задачи, с которыми мог справиться только js фреймворк? Какие?

Все задачи можно решить на чем угодно. Вопрос в сроках и кривости. Angular позволяет организовать структуру приложения, разделить его на слои, предоставляет ViewModel... все то что писать с нуля маленький ад и скучно. Ну и опять же все можно покрыть тестами и т.д.

Могут ли быть полезны данные инструменты в совместной работе с Rails, например?

Если брать ангуляр - я его использую только в контексте SPA. Это может быть не все приложение а только какая-то его часть но все же... А для SPA разницы нет вообще на чем бэкэнд реализован. От бэкэнда нужна только апишка.

Реакт же можно использовать в принципе для построения view на клиенте. Так что можно и его юзать. Зависит от задачи. Скажем если в задачи входит организация работы жирной формы - то лучше взять knockout.js. А если вам нужно рендрить какие-то данные в реалтайме - можно вооружиться реактом.

Нужно ли вообще тратить время и искать себе задачи, которые можно решить привычным jQuery, который в большей степени знают все (вопрос дальнейшей поддержки) ?

Куча народу знает jQuery но не знает JS. И это грусть и печаль. Скорее всего если у вас в задачах стоит реализовать слайдер какой или что-то такое то ни Angular ни React вам не нужны. Ну или в контексте сайтиков тоже не особо есть от них польза (только в специфических случаях). А вот если пишите приложения какие-то, можно уже задуматься ибо если вам придется реализовывать весь бойлерплейт, да еще и не будет DI то с высокой долей вероятности (все же нормальные разработчики существуют) вы получите шматок гуано дико связанный и приносящий боль при рефакторинге. А еще использование только jQuery это на 99% отсутствие каких-либо тестов на фронтэнде.

p.s. Я на ангуляре пишу админки к примеру для своих проектов. Ну и все все все что вписывается в концепцию SPA. Реакт планирую использовать как альтернативу phonegap (react-native вышел), поскольку он является слоем абстракции над формированием представления (за счет промежуточного виртуального DOM).

Варианты:

1. личное сообщение сообщение от вашего «запасного» аккаунта ВК;
   
2. сообщение от Сообщества (группы);
   
3. уведомление от Приложения ВК;
   
4. смс (платно).
   

Метод messages.send() отправляет сообщение от пользователя или сообщества; secure.sendNotification() – уведомление от приложения; secure.sendSMSNotification() – эсэмэсина от приложения. Наверное, лучше сделать сообщение от Сообщества.

Создайте себе новую закрытую группу, где будете только вы. Включите сообщения сообщества и получите ключ (просто скопируйте его из Настроек сообщества – Работа с API.

При событии в лендинге откройте скриптом ссылку API ВКонтакта, например, так:

$url = "https://api.vk.com/method/messages.send";
$params = [
	'user_id' => 123456, // ваш user_id в ВК
	'message' => 'Новая заявка!',
	'access_token' => $TOKEN, // токен сообщества
	'v' => 5.62
];
$url = $url . '?' . http_build_query($params);
file_get_contents($url);

Получаете Nan т.к. 2 + undefined это NaN
else можно убрать, но оставить return 1;

function sumTo(n) {
      if(n > 1) {
        return (n + sumTo(n-1));
      }
      return 1;
    }

Решение проблемы таилось в другом. Оказалось, что фаервол резал 3000 порт, у нас в компании первым делом безопасность. После того как мне открыли порт, я без особых усилий смог настроить browser-sync.

'use strict';
const browserSync = require('browser-sync').create();

gulp.task('bs', function(){
    browserSync.init({
        proxy: "http://example.com/", // проксирование вашего удаленного сервера, не важно на чем back-end 
        logPrefix: 'example.com', // префикс для лога bs, маловажная настройка 
        host:      'example.com', // можно использовать ip сервера
        port:      3000, // порт через который будет проксироваться сервер
        open: 'external', // указываем, что наш url внешний 
        notify:    true,
        ghost:     true,
        files:     [/*массив с путями к файлам и папкам за которыми вам нужно следить*/]
    });
    browserSync.watch([/*массив с путями к файлам и папкам за которыми вам нужно следить*/]).on('change', browserSync.reload); //вотчер для команды перезагрузки bs
});

gulp.task('build', gulp.series('compile', gulp.parallel('watch', 'bs')));

Заходим по ssh на наш сервер и запускаем сборку.
Открываем http://example.com:3000/, и наслаждаемся всеми фишками browser-sync.

оборачиваешь изображение в див типа .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;
}

идешь сюда: kenwheeler.github.io/slick
берешь который "Center Mode"
настраиваешь его чтобы при current показывался правый блок с текстом.
и суешь стрелки абсолютом в этот промежуток

А что мешает поместить навигацию, логотип и т.д. внутри дива с градиентным бэкграундом?

<header>
  <div class="bg_header">
    <nav>
      <ul>
         <li><a href="#">Пункт1</a></li>
         <li><a href="#">Пункт2</a></li>
         <li><a href="#">Пункт3</a></li>
         <li><a href="#">Пункт4</a></li>
         <li><a href="#">Пункт5</a></li>
       </ul>
     </nav>
  </div>
</header>

header - задаете бэкграунд картинкой
.bg_header - задаете бэкграунд градиент и не забываете указать ему высоту во весь хедер.
nav - остается поверх и картинки и бэкграунда.

Вот как-то так: codepen.io/anon/pen/bwNmvr

codepen.io/anon/pen/pEoxJx