Vadim Bogomazov

В vue-cli есть команда
npm run build
которая создаст минифицированные файлы в ./dist

var a = new F();
var b = new F();

alert(a == b);

function F() {
	if (F.instance) {
		return F.instance
	}
	F.instance = this;
}

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-собеседования вопросы.

Оберните в тэг ссылки и добавить нужный href:
<a href="tel:+79000000000">+79000000000</a>

Мне кажется, самый простой пример замыкания - это счетчик.

var counter = (function () {
	var current = 0;
	return function () {
		current++;
		return current;
	}
})();

console.log(counter()); // 1
console.log(counter()); // 2

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

var current = 0;
var counter = function () {
	current++;
	return current;
}

console.log(counter()); // 1
current = 5;
console.log(counter()); // 6

А это уже нарушает принцип "черного ящика", т.к. переменной можно присвоить другое значение в любом месте.

Замыкание - это функция, содержащая в себе ссылки на переменные из внешней области видимости. Т.е. она "замыкает" внешние переменные в себе.

Собственно, это один из двух видов анонимных функций: есть лямбда-функции, есть замыкания (clojures). В этом их отличие.

замыкание js - это функция внутри другой функции ("обертки")

Нет, замыкание не обязательно является вложенной функцией.

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

Но само решение придумывает программист, а не язык программирования.

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

Например, взять какую-нибудь игрушку с множеством товара и найти самый выгодный или дешевый товар. Вам будет понятна цель - найти нужный вам товар
При этом не будет важно в каком виде - в виде веб-странички, в виде простого текста на экран, или в виде заполненной таблички в базе данных.
При этом не будет важно какими инструментами вам нужно воспользоваться.
Главное, что вы осознаете что именно хотите получить. И пишете программу, которая выдает вам результат, используя имеющиеся знания.
Чем больше знаний, тем удобнее в конечном счете пользоваться тем что вы написали и тем быстрее и проще вам это писать.

Этот процесс называется определение milestones. Вы сперва определяете MVP (minimal valuable product) — то есть тот уровень завершённости (без рюшечек и плюшек), при котором можно получать выгоду и дальше вы уже строите отталкиваясь от MVP

Это БЭМ, бэйба)

Рекомендую почитать замечательную статью "Разбор параметров командной строки в Python". Она в свое время расставила для меня все точки над "і" при работе с параметрами скриптов.

Есть codementor.io , там можно отсортировать по "русский" и "javascript", например. Потом думаю сможете договориться работать без системы.

p.s. в целом сложно найти ментора. Обычно два пути: платить больше чем человек получает по ставке в час на "подработках", либо пройтись по знакомым разработчикам, которые смогут порекомендовать кого-нибудь (но тут неизвестно, насколько хорош или плох уровень будет)

Чувак, идешь сначала сюда https://learn.javascript.ru/
Пока Илья с товарищами по команде тебе надоедают, учишь английский.
Потом переключаешься на бритоголового https://egghead.io/
Потом, если покажется мало, начнешь курить спеки. К этому времени уже освоишь гугл и сможешь сам их найти.

Лучшие практики SPA

1. KISS - использовать только то, что действительно нужно. Например вам не нужен Javascript, если нужно просто сделать выпадающее меню. Достаточно просто CSS. Тоже самое применяется и к JS, вам не нужен Angular, если есть просто форма обратной связи. Такая задача решается на vanillajs.
   
2. Использование фреймворков, например bootstrap, foundation и т.д. Обычно из них берется типография и сетки. Иногда формы. Я обычно беру bootstrap-stylus и собираю из него.
   
3. Critical rendering path - минимальный набор CSS, который требуется для отображения первого экрана страницы, который потом будет встроен внутрь html-файла. Пример.
   
4. Применение систем сборки, например gulp. Основной смысл заключается в том, что сначала вы дробите SPA на множество мелких компонентов/модулей/блоков. Затем унифицируете их. В итоге получается набор небольших файлов. Затем из этого набора собирается два больших файла (css, js) и они прогоняются через оптимизатор и минификатор.
   
5. Использование CDN. CDN позволяет ускорить загрузку для часто-посещаемых и популярных страниц за счет уменьшения времени доставки контента. Особенно актуально для SPA, поскольку они представляют собой статический контент, который можно кэшировать без последствий.
   

Системы сборки

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

Модули AMD, CJS, UMD

Они предназначены для управления зависимостями. Например, когда у вас есть два десятка компонентов и один зависит от другого. Суть их в том, чтобы просто объявлять зависимости в компонентах используя тот или иной способ описанный в документации. Начните отсюда.

Сборка и подключение css

Здесь и так ясно, что нужно сначала освоить сборщики. postcss - это когда обычный css скармливается фильтру, который разбирает его, добавляет префиксы к свойствам, оптимизирует наименования цветов и т.д. Убирает дублирующие свойства.

В целом очень толково про оптимизацию расписано здесь https://developers.google.com/web/?hl=ru

Вы не совсем верно подошли к процессу. Важно не только сделать "аккордеон". Кто знает, как вы там его сделали, насколько он у вас наворочен и т.д.

Важно сделать его так, чтобы другие пользовались, находили баги, предлагали изменить и т.д.
1. Создаем проект
2. Выкладываем на GitHub
3. Пишем хорошее описание и документацию к нему
4. Создаем сайт (на том же гитхабе можно сделать бесплатно)
5. На этом сайте создаем набор демок под этот плагин
6. Профит! Теперь у вас есть рабочий проект.

Далее начинаем его поддерживать и обновлять. Рефакторинг, добавление нового функционала, исправление багов. Переписывание с нуля, когда упретесь в потолок и потребуется что-то кардинально менять, чтобы улучшить расширяемость и возможность поддержки.

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

https://github.com/zualex/devmap
images.vfl.ru/ii/1466366676/e324255d/13079149.png
www.webdesigndegreecenter.org/learn-to-code

Добрый день.

1. "Куда двигаться дальше, после изучения основ?"

— Скажите, пожалуйста, куда мне отсюда идти?
— А куда ты хочешь попасть? — ответил Кот.
— Мне все равно… — сказала Алиса.
— Тогда все равно, куда и идти, — заметил Кот.
Льюис Кэрролл, "Алиса в стране чудес"

Объективно, самым востребованным направлением в Python остается web/backend. А это значит фреймворки: Django, Flask, Pyramid, Bottle, Web2py и т.д. Из них, если в первую очередь интересует поиск работы - Django либо Flask (как наиболее востребованные). В противном случае - выбирайте любой, который по душе. Справедливости ради, в последнее время в требованиях вакансий часто мелькает "...знание ЛЮБОГО фреймворка..." или "...знание Django или ЛЮБОГО другого фреймворка...".

В случае, если ваш выбор иной, погуглите требования к технологиям, используемым в выбранном вами направлении и вперед!

2. "Какие модули самые важные из стандартной библиотеки?"

Ответ на этот вопрос тесно связан и зависит от ответа на предыдущий.

3. "Какие книги почитать, желательно, чтобы практика в них была, а не только разбор написанного кода?"

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

Теперь по существу и максимально, с моей точки зрения, соответствующее вашему запросу:
1. Python - Python Cookbook (пожалуй, самая практическая книга по Python; конкретные небольшие задачи из реальных практик и способы их решения; и да, Python 3 конечно)
2. Django - Django by Example (на основе этой книги вы сможете, при желании, сделать свой собственный проект)

4. "С техническим английском более менее нормально, читать книги на английском могу."

Это огромный плюс для вас, бесспорно.

Как-то так...

(кратко про себя)
Все лежит в папках: компонент + стиль. Собирается webpack'ом. Но у меня react-проекты.

(длинно, но вроде бы по делу)
Если относительно долго занимаетесь - у вас скорее всего уже выработались части, которые похожи - их выносите. Так же скорее всего у вас есть одинаковая структура (обычно это js/css/images и html, либо как вы пишите компонентами (отдельными папками) внутри котороых html + стили и может js ). Делайте шаблон для будущих проектов, в первую очередь удобным для себя - ведь вам с ним работать, а в нем реализуйте то что умеете по-максимуму (жмите картинки, оптимизируйте js и т.д)

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

кажется, что не использовал это все на 100%

Всем так кажется, поэтому когда не хочется заниматься работой, идем в гугл и смотрим опен-сорс проекты других людей: gulp, wepback, затем если нашли что-то любопытное идем в npm/github читаем доку. Пытаемся применить в работе.

Что имеем в итоге?
1) если все работает и вас устраивает (скорость сборки, удобство проверки в разных браузерах ...) - "работу работать";
2) если есть время и желание - гуглите опен-сорс решения, читайте твиттер интересных людей / новостную подписку;
3) если хочется услышать мнение коллег, но при этом коллег рядом нет - пишите статью на хабр. Просто статья: я использую такие-то плагины в своем "шаблоне" - вряд ли получит лестные отзывы, но возможно кто-то напишет: вот в этом месте у вас плохо, сделайте иначе. Возможно, вы придумаете, как написать статью интересно - тогда честь и хвала. И критика. А обоснованная критика всегда хорошо.

P.S. если используете Jade и следуете BEM-методологии, то я бы порекомендовал посмотреть на этот проект