Дмитрий Лузанов

Итак. По порядку. Задача: иметь возможность установить и одновременно запустить PS и AI + Figma.
Первые две - крайне требовательны к памяти. Бюджет - до 30 тысяч.

Решение - отказываемся от Intel, так как в производственных задачах (не в играх) они хуже на условные 10-12%. Берем AMD. Ввиду вашего отказа от видеокарты, стоит выбор между процессорами с встроенным видеоядром.
Ryzen 3 или Ryzen 5.
Ryzen 5 лучше тройки благодаря следующим параметрам: частота турбобуста на 200 единиц больше, плюс 8 потоков, вместо четырех на процессоре предыдущего поколения.
Цена при этом больше на 3 тысячи рублей. Полагаю, что стоит взять Ryzen 5.
Далее.
К процессору Ryzen нужно брать обязательно 2 плашки памяти. Можно взять 1 на восемь и докупить через месяц еще одну такую же. Это увеличит производительность на 8-30% в зависимости от задачи благодаря (из-за) шине Infinity Fabric (которая, несмотря ни на что, кривая).

Итого, я бы взял:
Ryzen 5 2400G BOX
8 GB Samsung DDR4 2400MHz.
ASRock AB350M-HDV
Chieftec TPS-500S / Thermaltake TR2-S 500W
1 TB HDD
Корпус на сдачу, например, от Accord.

Дальнейшие улучшения: первым делом докупаем еще одну плашку памяти. Абсолютно такую же, как и первая. Далее - SSD, на который ставим систему и программы. После всего - видеокарту. Предел - GTX 1060.
Итого. Данная конфигурация вытянет на начальном этапе все программы, если докупить еще памяти и SSD - получишь неплохую конфигурацию, которой хватит для работы еще лет на 5-6.
Докупишь видеокарту - будет возможность играть в любой AAA проект в FullHD не менее, чем на средних настройках графики ближайшие два-три года.

Запускаем коллективный выбор решений

Javascript - это одна из реализаций ECMA-262. Если вам нужно именно "официально-стандартно" - вам именно сюда.
Обратите внимание, это девятая редакция, которая вышла в июле. В следующем году скорее всего выйдет новая редакция. Ну и в этом СТАНДАРТЕ вы не найдете всяких новых экспериментальных штук. Экспериментальные штуки обычно описаны в черновиках.

BOM и DOM - это на самом деле не часть javascript, это API браузеров.

В 99% случаев вам будет удобнее всего ориентироваться на MDN, там все неплохо структурировано, и поддерживается в довольно актуальном состоянии.

Почему удаление элемента осуществляется в дочернем компоненте, который ни про какую collection знать не знает? Почему в родительском компоненте в качестве обработчика события указывается несуществующий метод?

Наверное, метод removePost из дочернего компонента надо разделить на два: removePost в дочернем компоненте эмитит id элемента, а removePost в родительском компоненте по этому id осуществляет удаление элемента из массива. Т.е., в дочернем:

removePost(picId: number) {
  this.remove.emit(picId);
}

В родительском:

removePost(picId: number) {
  this.collection = this.collection.filter(p => p.id !== picId);
}

зачем передавать: @my-event="myEvent" ?

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

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

Я же делаю из потомка this.$emit('my-event', this.isActive) которое слушает родитель.

Никто ничего просто так не "слушает". Чтобы "слушать", надо назначить обработчик соответствующего события. Что и происходит посредством @my-event="myEvent".

эмит выше вроде бы не нужен, но без него не работает

Чё? Какой ещё "эмит"? Нет "выше" никакого "эмита". Вы в родителе событие обрабатываете, а не порождаете.

И еще вопрос. Что делает:

myEvent: function(isActive) {
  this.isActive = isActive
}

Почему оно должно что-то принимать? Можно же просто значение из data взять.

"Значение из data" брать бессмысленно - это и есть this.isActive. Который вам обновить надо. Обновить значением, которое присылает диалоговое окно. Значением, которое передаётся в (т.е., которое принимает) обработчик события.

Во-первых - вы явно путаете ширину с высотой. Во-вторых - [attr.viewBox]="'0 0 100 ' + bla".

document.querySelector(".my").classList.contains("on") // true/false

Чуть ниже вашей стрелочки стоит "чекбокс" в котором написано "Применить шаблон ко всем подпапкам. Выставляете нужный вид ставите галочку и жмете применить. И все.
P.S. чтобы не было эскизов, выбираете шаблон "Общие элементы".

Вот как это выглядит с т.з. работодателя

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

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

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

function shortNumber(val) {
  const numSymbol = [ '', 'K', 'M', 'B', 'T' ];
  let symbolIndex = 0;

  while (val >= 1000) {
    val = Math.round(val / 1000);
    symbolIndex++;
  }

  return val + numSymbol[symbolIndex];
}


shortNumber(96); // 96
shortNumber(22222); // 22K
shortNumber(4951476); // 5M

Вопрос конечно больше вкуса, но все же SASS в синтаксисе SCSS
Из плюсов могу сказать:
- Самый богатый функционал (ИМХО)
- CSS - это валидный SCSS
- Многие библиотеки написаны сегодня на нем, что позволяет подгружать их по частям или использовать на уровне миксинов и функций
- Возможность переопределить загрузку import'ов
- Возможность писать функции на языке сборки - в большинстве случаев не надо, но все же полезно
- Единое ядро на C и байндинги ко множеству языков

Замените текущее регулярное выражение на /[^+\d]/g.

Ну а вообще, как я понял, вы хотите реализовать ввод телефона. Рекомендую посмотреть в сторону таких вещей как inputmask, например.

Как делать надо: [...new Set(arr.map(n => n.id))].

И как не надо:

Object.values(arr.reduce((acc, n) => (acc[n.id] = n.id, acc), {}))

// или

Array.from(new Map(arr.map(({ id }) => [ id, id ])).values())

// или

arr.map(n => n.id).filter((n, i, a) => i === a.indexOf(n))

// или

arr.reduce((acc, n) => (acc.includes(n.id) || acc.push(n.id), acc), [])