imko

Лайфхак для создания коллекции файлов FileList:

// Создадим простой текстовый файл:
var data = 'Здесь текст для файла или положите в переменную Blob';
var file = new File([data], 'primer.txt', {type: 'text/plain'});

// Создаем коллекцию файлов:
var dt = new DataTransfer();
dt.items.add(file);
var file_list = dt.files;

console.log('Коллекция файлов создана:');
console.dir(file_list);

// Вставим созданную коллекцию в реальное поле:
document.querySelector('input[type="file"]').files = file_list;

В переменную data вместо текста, можно положить в том числе и Blob - это особенность функции new File() которая первым параметром может принять как массив из текстов, так и массив из Blob.

Фактически лайфхак выше позволяет нам JavaScript-ом скачать любой какой угодно файл со своего сайта и вставить его абсолютно в любое поле <input type="file"> - что просто архиполезно для браузерных ботов.

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

Огромное спасибо пользователю Mmx Symfony, который нарыл это решение где-то в недрах иностранных сайтов. Сам я в свое время сколько не искал везде был ответ, что это невозможно, а оказалось, что нихрена подобного =)

раз хочется именно с reduce() – то можно редьюсить массив аргументов до одного результирующего объекта:

const mergeObjects = (...args) => args.reduce((acc, c) => Object.assign(acc, c));

Использование:

mergeObjects({a: 'A'}, {b: 'B'}, {c: 'C', a: 'AAA'})
// { a: "AAA", b: "B", c: "C" }

Или так, чуть почище, чтобы не менять первый исходный объект:

const mergeObjects = (...args) => args.reduce((acc, c) => ({...acc, ...c}), {});

Фрэймворк:
https://mjml.io/

Расширение для vscode где можно сразу live превью смотреть результата и компилировать в html
https://marketplace.visualstudio.com/items?itemNam...

vw/vh - это довольно специфичный кейс для указания размера шрифта. Он не всегда и не везде нужен.
А вот за использование пикселей надо уже наказывать =)

Самое простое - ну хотя бы rem использовать.
Как?

Ну опять же самое простое решение, это задать для корня размер 62,5%

:root{
  font-size: 62.5%
}

Это даст вам базовый размер шрифта в 10 пикселей (1rem = 10px) и вам будет удобно, без вычислений, задавать любые размер в rem.

body { font-size: 1.4rem; /* 14px */ }
h1 { font-size: 3.2rem; /* 32px */ }

Ну логика понятна, надеюсь.

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

@function toRem($px) {
  /* 16px – это значение шрифта по умолчанию в большинстве агентов */
  @return $px / 16px * 1rem;
}

body { font-size: toRem(14px); }
h1 { font-size: toRem(32px); }

HTML, CSS, JS, WEB api ....

что делать на фронтенде

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

На серьёзном хайлоад проекте это была бы, условно, смерть серверам по трафику.
Но клиенты с не самым хорошим интернетом отлетели бы ещё раньше. А не самый хороший это даже мобильный 4g в средних условиях приёма сигнала. 470кб это очень, очень много для всего лишь одного запроса. Тяжелее запрос - дольше время до отрисовки.
Ну и мобильный интернет далеко не у всех безлимитный. А не в России и подавно.

А ещё есть лимиты на длину строки. В разных движках причём разные. Так что, теоритически, наверное, можно упереться в лимит строки и картинка не отобразится или будет битая.

Вывести данные для опций один раз, и положить их в константу:

Вот такая JS функция динамически создаёт из этих options полноценный элемент select со всеми опциями:

createSelect = () => {
  const select = document.createElement('select');
  options.forEach(([value, title]) => {
      const option = document.createElement('option');
      option.innerText = title;
      if (value) {
        option.value = value;
      } else {
        option.setAttribute('disabled', true);
        option.setAttribute('selected', true);
      }
      select.appendChild(option);
    });
  return select;
};

Создали селект – одновременно создаём кнопку, но пока её прячем. Референс на созданный селект и кнопку держим. По событию выбора в свежесозданном селекте – показать изначально скрытую кнопку "Добавить".

Нажатие на кнопку создаёт ещё один селект-с-кнопкой.

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

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

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

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

Советую изучать с низов, самостоятельно, чтобы было понимание каждого шага, всего что происходит.
* операционные системы, процессор и многопоточность, сети,...
глубоко изучать это не требуется но базовые понимания нужны чтобы не получать медленное приложение только потому что не знал что каждый твой запрос в tcp это 'туда-сюда', и это медленно (десятки миллисекунд), что одновременно два человека пытающиеся что то изменить на сайте нужно разруливать чтобы не было конфликтов и т.п.
* бакэнд и фронтэнд
буквально что значит запрос и генерация ответа, какие бывают способы организации этого бакэнда (http rest и к примеру websocket), не понимание разницы между бакэндом и фронтэндом у новичков рождает абсурдные вопросы как из javascript изменить переменную php (и наоборот)... в чем разница между генерацией страницы на сервере и в браузере.
* html, css,..
верстка и дизайн, отдельный мир браузерных стандартов, исторических наслоений,. когда стоит применять фреймы, почему шрифты по разному выглядят, разные устройства и размеры экранов, разные способы взаимодействия (сенсорный экран, мышь, клавиатура)...
* базы данных
еще более огромный мир атомарных транзакций, индексов, нормальных форм и прочего
* девопс
без умения выбрать инструмент, настроить тулчейны, среду разработки, среду исполнения (веб сервер), настроить бакапы и прочее пытаться что то разрабатывать это как в слепую гулять по лесу, будешь постоянно на ветки натыкаться
...
это я еще про системную аналитику не сказал, обычно прежде чем что то создавать, нужно продумать как это все делать, что такое технический долг и т.п., а еще есть тестирование, обслуживание, работа с отказами (сервер сдох, база упала, как все восстановить), обновление на живую и прочие веселья

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

@keyframes arrow {
  0% {
    width: 60px;
  }
  
  25% {
    width: 260px;
    transform: translateX(0px);
  }
  
  50%, 75% {
    width: 60px;
    transform: translateX(200px);
  }
}

как можно исправить эту проблему??

Ровно так, как написано в тексте ошибки: Не использовать "&" на верхнем уровне.

UPD

main.scss

@mixin example() {
  &::hover { color: red; } // Так можно
  // но миксин можно использовать только внутри родительского селектора
}

&::hover { color: red; } // Так нельзя, нет родителя

.block {
  &::hover { color: red; } // Так можно, есть родительский селектор (.block)
}

@include example(); // Так нельзя, внутри обращение к родителю, а его нет

.block {
  @include example(); // Так можно
}

try { 
    const rq = JSON.parse(data)
} catch (err) {
    console.log('error:', err)
}