Вадим

css:
#project_first:target { display: block }

Как из одного компонента после после отправки запроса внутри него вернуть результат промиса (resolve/reject), чтобы в другом компоненте обработать его через then

Ну нужно значит вернуть Promise или Promise.resolve(response). (хотя это что-то сомнительное)

Компоненты при этом могут находиться не рядом и не иметь общего родителя.

Ну, на этот случай есть 2 основных подхода.
1) Глобальное хранилище - vuex.
1.1) Инициализируете стор
1.2) В компоненте, которому нужны данные - делаете вычисляемое свойство на свойство стора.
1.3) В компоненте, в котором делаете запрос - кладёте в then данные из ответа в стор в соответствующее свойство по средствам экшена(ну или мутации на худой конец). (Одна из практик делать запрос данных в экшене, тогда в экшене по результату выполнения запроса и вызовете мутацию для изменения стора, а в компоненте просто вызовете экшен)

2) Глобальная шина событий EventBus (считается сомнительным паттерном) - Один компонент подписывается на событие с произвольным именем - второй компонент диспатчит событие с произвольным именем и передаёт полезную нагрузку. В итоге компонент-подписчик в обработчике получит эти данные.

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

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

Блочно-строчная концепция уже не так важна, как раньше.
Контентная модель документа притерпела значительные изменения в современном стандарте.
https://html5book.ru/kontentnaya-model-html5/
https://html.spec.whatwg.org/dev/dom.html#content-...

Есть тег p Прочел, что он блочный. Для чего его сделали блочным, а не строчным? По логике, если в элементе текст, то он должен быть строчным.

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

Ведь мы можем так же присвоить элементу p нужные стили и он нам заменить тот же button

Если хотите добиться уважения среди профессионалов, то забудьте про подобные утверждения.
https://www.youtube.com/watch?v=ssJsjGZE2sc
https://www.youtube.com/watch?v=MWJKwn_gKR4
А так же тема для изучения: семантическая разметка (например: https://habr.com/ru/company/htmlacademy/blog/546500/)

И для чего сделали тег a строчным элементом... где мы можем хранить текст или другие блоки.

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

теги img, imput, video - замещаемые элементы

Читая книжку и немного удивляюсь

Думаю стоит всё же задавать вопросы когда дочитаете до конца, особенно если потом ещё пойдёте на спец ресурсы, типа MDN, и ознакомитесь с современной информацией. Уверен найдёте ответ на большую часть своих вопросов.

editor.occurrencesHighlight: false в settings.json
или occurrences highlight в обычных настройках - галочка

Итак, что я хотел предложить.
Допустим есть файл с указанным текстом.
Проанализировав текст мы видим шаблон что весь текст, который нужно перевести начинается с "\" и заканчивается на \"".
соответственно, нам нужно выделить все такие кусочки в тексте.

Для этого нам помогут стандартные возможности редактора и регулярные выражения и всего 5 секунд времени, после того как приноровитесь:
1. Нажимаем CTRL+F - поиск по тексту.
2. Переключаем поиск в режим регулярных выражений, нажав ALT+R (или на третий значок, который со звёздочкой, после поля ввода)
3. Вводим соответствующее регулярное выражение: \\"(.*)\\"
4. Нажимаем ALT+Enter чтобы все найденные участки выделились в режиме мультивыделения.

5. Нажимаем горячую клавишу плагина гугл транслейта для перевода ALT+SHIFT+T
6. Так как в некоторых местах мог добавиться лишний пробел в начале между: \" -> \ ", то нам осталось это починить.
7. Нажмём CTRL+H
8. Выключим режим поиска по регулярным выражениям (см пункт 2)
9. В первом поле введём текущее состояние того, что хотим заменить - \ "
10. В нижнем - на что хотим заменить - \"
11. Нажмём CTRL+ALT+Enter (или правую нижнюю иконку - заменить всё).

12. Готово. Текст переведён, лишний пробел исправлен. Никаких плагинов - 5 секунд времени.

а где Вы применяете json непосредственно к fetch?
И fetch и json возвращают промис.
json Вы применяете к данным, которые этот промис возвращает когда резолвится.

fetch().then(response => response.json()) != fetch().json()

То есть fetch делает запрос, возвращает промис.
Когда этот запрос возвращает данные, то промис, который вернул fetch, резолвится по средствам вызова своей внутренней функции resolve(), в аргумент которой передаёт специальный объект, у которого уже есть методы .json, .text и тд.

Скорее всего Вам стоит погрузиться более глубоко в промисы, перечитать что это за объект такой, когда fetch резолвится, ну и что такое по существу async\await и причём тут промисы.

Что касается async функций, то они тоже возвращают промис. Всегда. Независимо от кода внутри.

Не совсем понятно что Вам нужно, но тут либо так


Либо так https://html5book.ru/gradient-dlya-teksta/

1. Нужно из one делать return x. (ну и resolve всё же вызвать)
2. one().then(tow)

Если с async\await,
1. То же самое
2. await one(); tow() (Но тогда вызов этих функций должен быть внутри функции, помеченной как async)

Почему на разных мониторах пропадают бордеры

Такое чаще всего проиходит из-за того, что у всех разные браузеры и разные дисплеи и, как следствие, из-за того, что у элемента "странные" габаритные размеры.
Например, у Вас у слайдов 202.5px ширина и 242.86px высота.

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

Например: Я сделал как предложил Lynn «Кофеман».
У меня по умолчанию всё ок.
Сделал масштаб 80% - пропали границы, как и у Вашего заказчика.
Сделал 90% - границы вернулись.
Сделал как было по умолчанию - 100% и границы опять пропали.
То есть по умолчанию в 100% показываются, а после изменения масштаба туда сюда - пропадают.

и как это вообще фиксится

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

Тут можно почитать про физические и логические пиксели https://habr.com/ru/post/150071/

Сейчас консоль выдаёт

Где выдаёт? В скинутом фидле ничего консоль не выдаёт.

Ожидаю такой результат

Так а вопрос то в чём?
У Вас есть класс, по видимому, Вам нужно при нажатии на кнопку "добавить" создавать новый объект этого класса и сохранять в массив, и добавлять элемент в таблицу.

Никаких обработчиков нажатий на какие либо кнопки в коде у Вас нет.

У Вас выключено поведение по умолчанию, если клик-элемент не дочерний для определённого блока.

if (ev.target.closest(".painting-style__dropdown_show")) return;
  ev.preventDefault(); // вот тут всё ломается

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

Приведённый Вами пример со списком - устоявшийся, практически повсеместно используемый, шаблон реализации. То есть правильный.

Как прикрутить SessionStorage и чтобы на сохраненные элементы работал AddEventListener

Так как Вы сохраняете в session storage строку с разметкой, то обработчики кликов в таком случае должны быть не на элементах, а на их родительском контейнере. Этот приём называется делегирование суть которого заключается в том, что Вы вешаете один обработчик на родительский элемент и так как большая часть событий всплывает вверх, то в обработчике события смотрите на каком конкретно элементе произошло событие и в зависимости от этого выполняете соответствующее действие.

Альтернативный вариант - сохранять в session storage не строку разметки, а массив объектов, где каждый объект - это информация о конкретном "деле" в списке дел.
Например:

const todos = [
  {
    id: 0,
    text: 'Набросать первую версию todo на лапшичном коде',
    isDone: true,
  },
  {
    id: 1,
    text: 'Освоить делегирование событий',
    isDone: false,
  },
  {
    id: 2,
    text: 'Почитать про простые структуры данных и их применение',
    isDone: false,
  },
]

И через JSON.stringify(todos) сохранять в storage, а через JSON.parse(sessionStorage.getItem('todos')) - считывать обратно в массив объектов, на основе которого заново генерировать разметку.

https://habr.com/ru/post/520104/
https://developer.mozilla.org/ru/docs/Learn/Forms/...

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

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

Если бы Вы писали main__wrapper, footer__wrapper, то это означало бы, что у этих wrapper разные стили.

iphone спокойно справляется с mp4 видео, если оно было закодировано поддерживаемым кодеком, например h.264.

Но никакое видео на iphone не будет автоматически воспроизводиться без атрибута playsinline (muted тоже обязательный)
То есть:

<video autoplay loop muted playsinline class="video video-desktop">
  <source src="/video/video-hero.mp4" type="video/mp4">
</video>

Вот тут можно ознакомиться с поддержкой кодеков и выбрать подходящие
https://developer.mozilla.org/en-US/docs/Web/Media...

видимо, при закрытии файла у Вас открывается другой файл из этой же папки, а в настройках по умолчанию файл показывается в сайдбаре при открытии.
Соответственно, идём в настройки и там ставим false

Давайте начнём с

requestAnimationFrame(() => {
 cursor.style.left =  `${event.pageX}px`
 cursor.style.top =  `${event.pageY}px`  
})

А вообще тормозит из-за того, что событие вызывется супер часто, а там стоит transition на курсор.

И можно ещё добавить на .cursor will-change: position;

p.s. ну а ответ на поставленный вопрос есть в самом вопросе.

в разных средах

Кто его знает что у Вас там ещё локально и сколько там контента и тд.