Дмитрий Беляев

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

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

Один момент - не все принципы одинаково полезны и применимы в веб-разработке, но знать и понимать их все в любом случае на пользу.

У вас не установлен лоадер для typescript.

Есть 2 варианта, 1ый - ts-loader, 2ой - babel-loader c typescript пресетом.

Я предпочитаю второй, но в таком случае напрямую бабель не будет производить проверку типов и нужно использовать плагин fork-ts-checker. Проверка типов будет происходить параллельно с процессом компиляции вебпака.

Вот пример для бабель-лоадера.

// webpack.config 

module.exports = {
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.(js|jsx|ts|tsx)$/,
                        exclude: /(node_modules|bower_components)/,
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                        },
                    },

                    {
                        use: 'file-loader',
                        exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
                    },

                    // ** STOP ** Are you adding a new loader?
                    // Make sure to add the new loader(s) before the "file" loader.
                ],
            },
        ],
    },

    plugins: [
        new ForkTsCheckerWebpackPlugin({
            async: true,
            useTypescriptIncrementalApi: true,
            checkSyntacticErrors: true,
            eslint: true,
        }),
    ],
};

// babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
}

Не забудьте установить пресеты, лоадеры и плагин.

PS, можете подсмотреть конфиг для create-react-app, там можно выудить много интересного.

Вы можете выпустить ПО с использованием нескольких лицензий:

• Некоммерческое использование
  
• Коммерческое использование
  

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

https://en.wikipedia.org/wiki/Multi-licensing
https://ru.wikipedia.org/wiki/%D0%94%D0%B2%D0%BE%D...

const groupBySum = (arr, key, max) => arr
  .reduce((acc, n) => (
    acc[acc.length - 1]?.[1] + n[key] <= max || acc.push([ [], 0 ]),
    acc[acc.length - 1][0].push(n),
    acc[acc.length - 1][1] += n[key],
    acc
  ), [])
  .map(n => n[0]);


const result = groupBySum(arr, 'count', 500);

arr.flatMap(n => n.split(', ').map(Number))

или

`${arr}`.split(/\D+/).map(n => +n)

или

String(arr).match(/\d+/g).map(n => parseInt(n))

или

eval('[' + arr + ']')

или

JSON.parse('['.concat(arr, ']'))

Вы же можете сами проверить

const arr = [true, false, true, false, false];
const f = (item) => item === true;
const fn = (f, list) => list.filter(f);
const res = fn(f, arr);
console.log(res);

Вы не понимаете как это работает. Раз уж у вас вебпак, то и используйте экспорт/импорт.

const links = document.querySelectorAll('.link-to-search');
links.forEach((link) => link.addEventListener('click', (e) => {
	document.querySelector('input.searcher-inp').value = e.target.textContent;
	document.querySelector('form').submit();
}))

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

Наиболее часто проверяют CN - Сommon Name. Для серверов в это поле вписывают имя сервера, для почтовых сертификатов - обычно имя пользователя (его по идее можно проверять, но я так не делал).
Менее часто проверяют Email. Для серверов в это поле вписывают адрес ответственного и оно информационное, для почтовых сертификатов - адрес электронной почты.

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

function drawMyLine(x,y,angleDeg,length){//Угол в градусах
	var angle = angleDeg * Math.PI/180;
	ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(x + Math.cos(angle)*length,y + Math.sin(angle)*length);  
  ctx.stroke();
}

Потому что на этапе исполнения пути @/assets/images/image.jpeg не существует. Это не волшебство. На этапе компиляции vue-compiler проходится по известному списку атрибутов, а postcss по стилям и заменяют такие пути на результаты loader'a(по умолчанию: data-uri для мелких файлов и внутренние пути относительно spa для остальных). Простые произвольные строки(которой и является `url(@/assets/images/image.jpeg) no-repeat center`) само собой анализу и замене не подвергаются.
Надо явно получить результат loader'a(через require('путь')) и использовать его где нужно.

Условно так:

:style="`background: url(${require('@/assets/images/image.jpeg')}) no-repeat center`"

Пролистал свои вопросы - нет, нисколько. Там были реально сложные для меня вопросы, а ответы, которые получались тривиальным гуглением, были... ну, не в тему. Так что каждый раз решение спросить на Тостере было оправданным. Пару раз были случаи, когда задав вопрос, я позже сам находил ответ, вписывал его в форму ответа, и честно сам себе ставил "Отметить решением". Были у меня вопросы, на которые удовлетворительного ответа тут я не получил. Так и висят неотвеченные.
Сейчас моя статистика - более 500 ответов и всего 31 вопрос.

Повесить event.preventDefault на submit. Обратите внимание что событие происходит у формы, а не у кнопки

Группируем и уникализируем данные:

const groupedAndUnique = Object.entries(arr.reduce((acc, n) => {
  (acc[n.category] = acc[n.category] ?? new Set).add(n.type);
  return acc;
}, {}));

Затем собираем html:

document.body.insertAdjacentHTML('beforeend', `
  <ul>${groupedAndUnique.map(([ k, v ]) => `
    <li>
      ${k}
      <ul>${Array.from(v, n => `
        <li>${n}</li>`).join('')}
      </ul>
    </li>`).join('')}
  </ul>`
);

Или, создаём элементы напрямую:

const ul = document.createElement('ul');

ul.append(...groupedAndUnique.map(([ header, items ]) => {
  const li = document.createElement('li');
  li.append(header, document.createElement('ul'));

  for (const n of items) {
    li.lastChild.append(document.createElement('li'));
    li.lastChild.lastChild.textContent = n;
  }

  return li;
}));

document.body.append(ul);

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

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

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

P.S. Речь идёт не о сайтах, которые должны побеждать на Awwwards, а об обычных сайтах, которые делаются для людей, а не для конкурсов.
P.P.S. Если всё-таки очень хочется, то нужно гуглить по запросам "hover effects" и "canvas animation", остальное без конкретной дизайнерской задумки вреда несёт куда больше, чем пользы.
Юзабилити - это про то, чтобы "работает быстро и понятно (как у всех)".

Думаю механизм ясен.