Сергей delphinpro

Разные товары за разную стоимость и все.

Помимо случайной задержки нужно еще ограничить количество одновременных запросов, примерно так:

function randomDelay(min = 250, max = 750) {
  return new Promise((resolve) => {
    const ms = Math.random() * (max - min) + min;
    setTimeout(resolve, ms);
  });
}

function downloadAll(urls, limit = 4) {
  return new Promise((resolveAll, rejectAll) => {
    const result = [];
    const iter = urls.entries();
    let fulfilled = 0;

    const next = () => {
      const { done, value } = iter.next();

      if (done) {
        if (fulfilled === urls.length) {
          resolveAll(result);
          return;
        }

        return;
      }

      const [index, url] = value;
      const onFulfilled = (val) => {
        result[index] = val;
        fulfilled += 1;
        next();
      };

      randomDelay()
        .then(() => fetch(url))
        .then(onFulfilled, rejectAll);
    };

    for (let i = 0, l = Math.min(limit, urls.length); i < l; i++) {
      next();
    }
  });
}

const urls = Array.from(
  { length: 100 },
  (_, i) => `https://jsonplaceholder.typicode.com/todos/${i + 1}`
);

(async () => {
  const responses = await downloadAll(urls, 2);
  const data = await Promise.all(responses.map((r) => r.json()));
  console.log(data);
})();

Можно в N параллельных «потоков» скачивать. В каждом случайная пауза перед очередным URL:

const N = 3;

const delay = ms => new Promise(res => setTimeout(res, ms));

const next = () => {
  if (items.length > 0) {
    return download(items.shift())
      .then(delay(500 + Math.floor(Math.random() * 500))) // случайная пауза между закачками
      .then(next);
  }
};

const works = Array.from({ length: N }, () =>
  Promise.resolve()
    .then(next)
    .catch(console.error)
);

Promise.all(works).then(() => console.log('All Done'));

document.querySelector('form')?.addEventListener('submit', (event) => {
    const form = new FormData(event.currentTarget);
    let isValid = true;
    
    if (form.get('name').length <= 2) {
        isValid = false;
    }
    
    if (!isValid) {
        // Отмена отправки формы
        event.preventDefault();
    }
    
    alert(`Is Valid: ${isValid}`);
});

Да всё довольно просто - шаблонизатор просто сохраняет вашу собственную табуляцию.
Возьмём для примера header. В базовом файле у вас перед include идёт отступ в 8 пробелов - он сохраняется. Потом читается файл заголовка, в котором перед <header class="header"> отступа нет, а перед <div class="container"> отступ в виде 4 пробелов есть - он тоже сохраняется. Шаблонизатор просто не добавляет дополнительные отступы, которые были перед директивой @@include ко всем строкам подключаемого шаблона.
Используйте дополнительно какой-нибудь beautify-пакет, если хотите красоты.

К чему относятся эти «приемы»

К "модульной архитектуре". Правда не понятно что подразумевается под "и т.д."

Webpack

Лишь сборщик. Не безальтернативный. Помогает собирать проект и используемые модули в единый бандл, или на несколько чанков (пакетов), которые потом улетают в продакшен. Разделение на чанки для того, чтобы пользователь грузил только то, что нужно для текущей страницы.

Npm

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

что именно мне нужно учить

Модули, в частности, es6 модули, это если хотите понимать что действительно происходит.

Но если детали Вам не интересны, то всё очень на самом деле просто.
Представьте что один файл вам предоставляет функции(то есть делает export из себя), а в другом файле Вы эти функции потребляете(то есть делает import в себя). А нужно это, чтобы написать какой-то модуль один раз, и потом переисползовать. А не делать постоянно ctrl+c - ctrl+v. Вот и всё.

Список расширений php - https://www.php.net/manual/en/extensions.membership.php
Как видите curl входит в категорию "External Extensions" и значит может быть не установлен или недоступен на целевой системе.
Поэтому вы явно указываете в зависимостях в composer.json что для запуска вашего кода требуется ext-curl и при его отстутствии composer install выдаст об этом соответствующее сообщение с ошибкой

Вызвать функцию можно только 2мя способами. Один из способов из двух вариантов.

1. Как обычно, через круглые скобки ().
2. Через вызов метода .call или .apply

Других вариантов вызова функции что-то не приходит в голову.

Способов объявления функций тоже всего два:
- function expression - expression - выражение, то есть такая строчка, у которой есть знак =
- function declaration - классическое объявлений функций через function name() {}.
Между этими двумя вариантами одно основное кардинальное отличие, которое запомнить очень просто. Всплытие declaration.

Все ли они нужны? Да.
Можно ли обойтись без expression на первых этапах обучения и будет ли достаточно declaration? Да.
Что ещё Вы хотите запоминать?

P.s. можно ещё создавать функцию через конструктор Function, но так никто не делает, поэтому опустим этот вариант.

$categrories = Category::query()
            ->with(['products', 'products.ingredients', 'products.options'])
            ->get();

@foreach($categrories as $categrory)
{{$category->name}}
@foreach($categrory->products as $product)
{{$product->name}}
@endforeach
@endforeach

swiper

<template>
  <div>
    <input type="text" v-model="form.templatename" />
    <pre>{{ form }}</pre>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      form: {
        templatename: 'Тест'
      }
    };
  }
};
</script>

Не установлен yarn. Всё написано русским по чёрному.

Повторяющимся радиальным градиентом
https://jsfiddle.net/Ankhena/h21s4o0m/