TheSnegok

Решение первой проблемы: добавить "type": "module" в package.json.
Решение второй проблемы: запускать локальный сервер, т.к. просто открытые html-файлы не могут грузить модули из-за "безопасности".

тегу р примените стиль
white-space: pre
или уберите пробелы из текста)

Потому что html не учитывает переносы строк и лишние пробелы. Ты должен их указать явно как br или использовать тег\css pre.
Те переносы что есть - они есть не потому что ты их указал, а потому что строчки достаточно длинные.

It depends.

Страница отображается в браузере по мере загрузки. Если в ней встретится скрипт без спец. атрибута типа async\defer отображене будет остановлено пока не загрузится И выполнится скрипт.

Вот собственно почему советуют сдвигать скрипты вниз. Но если без скрипта у тебя ничего не заработает, то это не имеет смысла.

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

В чём отличие от присваивания a = requestAnimationFrame(anim) и от обычного вызова requestAnimationFrame(anim)?

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

Почему идёт каждый раз вызов функции anim()

Первый раз потому, что в конце кода стоит вызов requestAnimationFrame(). Последующие — потому, что в конце очередной отработки anim() есть вызов a = requestAnimationFrame(anim); при условии, что счётчик не превышен.

<Switch>
    <Route path='/landing' component={() => {
                        window.location.href = 'https://example.com/1234';
                        return null;
                    }}>
        
    </Route>
</Switch>

Лучше сделать более точный тип:[string, string, string[]][]
https://www.typescriptlang.org/play?#code/MYewdgzg...

Да, если это псевдослучайные числа.
Только нужно знать алгоритм генерации этих самых псевдослучайных чисел. Собственно, он и будет решением.

Главное, что для псевдослучайных чисел такой алгоритм существует. Даже если его не знать, его в теории можно угадать. А значит ответ на вопрос - всё-таки возможно.

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

Это не css, это 3D модель, вставленная в браузер с использованием библиотеки three.js


wiki о three.js
статья на хабре про three.js
примеры того что может three.js
а это сама модель из вашего примера

Генерируются они так:

Есть у вас список уже сгенеренных чисел, изначально содержит только 1.

Вы добавляете в список сделющее число, пока не наберете необходимое количество.

Поддерживайте 3 указателя (изначально на первое число), которые указывают на первые неиспользованные числа для домножения на 2, 3 и 5.

Каждый раз берете и сморите что лучше - взять число из первого указателя, домножить на 2, взять число из второго домноженное на 3 или из последнего указателя и домножить на 5. Кладете это число в список и сдвигаете указатель.

Пример:
шаг 1.
указатели: 1, 1, 1
список: {1}
варианты:1*2, 1*3, 1*5. Лучший - 2.

шаг 2.
указатели: 2, 1, 1
список: {1, 2}
варианты:2*2, 1*3, 1*5. Лучший - 3.

шаг 3.
указатели: 2, 2, 1
список: {1, 2, 3}
варианты:2*2, 2*3, 1*5. Лучший - 4.

шаг 4.
указатели: 3, 2, 1
список: {1, 2, 3, 4}
варианты: 3*2, 2*3, 1*5. Лучший - 5.

Не 2i3j5k, а 2ⁱ×3^j×5^k
Это означает, что при разложении числа на простые множители мы получим только 2, 3 и 5.
1 = 2⁰×3⁰×5⁰
3 = 2⁰×3¹×5⁰
15 = 2⁰×3¹×5¹
30 = 2¹×3¹×5¹
60 = 2²×3¹×5¹
90 = 2¹×3²×5¹
и т.д.

Не показали HTML-разметку. Где там элемент canvas, с какими атрибутами?
По умолчанию у элемента размеры 300х150. Стилями вы его растягиваете до 450х450, вот он и вытягивается, изумлённо, по вертикали.

Поможет указать размер: <canvas width="450" height="450"></canvas>

p.s. толщина линий по краям canvas будет вполовину меньше от остальных, т.к. пол-линии оказывается за кадром.

Используйте классы для управления состоянием. И классы меняйте кодом.

.menu {
  opacity: 0; /* по умолчанию скрыто */
}
.menu-opened {
  opacity: 1; /* при добавлении класса - открыто */
}

@media (min-width: 992px) {
  .menu {
    opacity: 1; /* на больших экранах – всегда открыто */
  }
}

//...
burger.classList.toggle('open');
burger.classList == 'open'
  ? menu.classList.add('menu-opened')
  : menu.classList.remove('menu-opened');

Кстати, что это такое: burger.classList == 'open'?
Проверку так делают:
burger.classList.contains('open');

https://codepen.io/alekcena/pen/ExmraQe
Поворот идёт от 0 до 60%
Вам нужен поворот с середины
Значит первоначально он должен быть равен 0 в центре

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

interface FishProps {
  imgName: string;
  random: number;
}

const Fish: React.FC<FishProps> = (props) => {
...

Внутри Fishes передавать в Fish ещё проп key={el.name}

И вообще, я удивлен, что на этом сайте есть подсветка синтаксиса для никому нахрен не нужного CoffeScript, но нет TS. Это охренительно.

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



P.S. Так как список чисел довольно большой, запихнул его как текст в HTML, чтоб парсер js не подох.

function sumNumbers(maxNumber) {
    const buf = new Int8Array(maxNumber);
    let answer = maxNumber > 2 ? 2 : 0;
    for(let i = 3; i < maxNumber; i += 2) {
        if (buf[i] === 1) {
            continue;
        }
        answer += i;
        const i2 = i * 2;
        for(let j = i * i; j < maxNumber; j += i2) {
            buf[j] = 1;
        }
    }
    
    return answer;
}