Михаил Р.

Мой вопрос состоит в том, действительно он так хорош и не устарел ли он?

hh.ru посмотрите.

Знакомый посоветовал мне учить React.js по видео с YouTube канала IT-KAMASUTRA

вы мне посоветуете?

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

Как организовать и где хранить это все

Git?

Засунуть это все в сборку gulp думаю глупо так как будет храниться куча файлов которые мы не используем и потом это все еще придется отдать 3 лицам

Если будет использоваться сборщик, то все "не используемое" можно не класть в итоговую сборку.

Скопилось куча кусочков кода по верстке к примеру 20 карточек товара или 15 видов 404 страницы и прочего

У меня таких под 1000 блоков. Приватный гит лучше всего.

Проверил, у меня работает.

Выдаёт ошибку в препроцессоре Undefined mixin.

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

UPD:

https://jsitor.com/6TIiVdjvt3

Ваш миксин выполняет корректно, другой вопрос, что внутри него вызываются миксины media-breakpoint-only и media-breakpoint-between, которые у Вас не объявлены. Если их закомментить, то затем будет ошибка wrong number of arguments (4 for 3) for `rgb', но ее можно решить используя ответы от сюда https://stackoverflow.com/questions/16581791/wrong... .

(и насколько востребовано?)

Хайп по ноде закончился несколько лет назад, исходя из количества вакансий в "послехайповый период" - нода не очень популярна.

https://hh.ru/search/vacancy?no_magic=true&L_save_...
Node 81 вакансия

https://hh.ru/search/vacancy?text=Php&from=suggest...
Php 676 вакансий

https://hh.ru/search/vacancy?text=Python&from=sugg...
Python 679 вакансий

https://hh.ru/search/vacancy?text=Golang&from=sugg...
Go 208 вакансий

Удалите папку с нодой, почистите кеш ноды и заново установите все пакеты. Если не прокатит, то может версия ноды старая?

индексируются ли сайты, задеплоеные на бесплатные тарифы Netlify || Vercel || Heroku

По умолчанию, сам хостинг индексации не препятствует. Но нужно принимать во внимание и директивы в самом сайте, которые могут препятствовать индексации (подробнее - https://yandex.ru/support/webmaster/adding-site/in... ), а также саму технологию разработки фронта, ибо сайты в формате SPA, PWA итп. до сих пор явно проигрывают в индексации SSR и SSG сайтам.

то разумно ли выкатывать на них сайты с маленькой аудиторией

Не понятна единица измерения "маленькая аудитория", если она равна ~ 100 визитам в час, то вполне. Но нужно принимать во внимание и сам сайт, ибо 1 запрос на криво написанный сайт - нагрузит сервер гораздо больше, чем 10-99x визитов с хорошо оптимизированным сайтом.

или лучше все-таки не заниматься ерундой и взять хостинг за 150 р/месяц

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

Что это может быть?

Вероятно, крутят ПФ (поведенческие факторы).

И повлияет ли это на выдачу?

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

Есть ли способы борьбы с этим?

Ранее, я задавал вопрос в смежной области, но в комментах мы ушли в накрутку ПФ https://qna.habr.com/q/1187714#comment_3112676 .

Если резюмировать, то здесь одно из:
- Это лох, который крутит Вам ПФ с НЕ с мобильных прокси + слабо маскируется под реального пользователя - банить по ip, заголовкам и множеству остальных параметров.
- Если это не лох, то он использует мобильные прокси, а значит отбиться по ip будет невозможно, либо потеряете львиную долю посетителей.

Iframe либо парсинг сайта

https://imask.js.org/

https://clientjs.org/
https://github.com/jackspirou/clientjs
https://github.com/fingerprintjs/fingerprintjs

Перечень того, что "можно узнать о пользователе", используя js:
ClientJS Methods
Fingerprint Methods
User Agent Methods
Browser Methods
Engine Methods
OS Methods
Device Methods
CPU Methods
Mobile Methods
iOS Methods
Screen Methods
Plugin Methods
Mime Type Methods
Font Methods
Plugin Methods
Mime Type Methods
Font Methods
Storage Methods
Time Methods
Language Methods
Canvas Methods
Additional Info

Насколько сложно устроиться во Frontend начинающему в 2023?

Учитывая, что конкуренция стала еще больше, а вакансий все меньше и меньше

Очевидно, сложнее, чем было ранее.

то каков шанс в 2023 году попасть на работу во Frontend

От 0% до 100%. Открывайте hh.ru, сходите на 100 вакансий, если офферов будет 0, то Ваш шанс 0%. Как ответить еще на этот вопрос - хз.

Выставляйте как один из альтернативных ответов. Отмечу решением.

Выставил:

Так вроде продолжает жить оффлайн версия.
Онлайн есть, но это вроде не тот самый фотошоп.

А нужны ли вообще препроцессоры в 2к22, уже почти 2к23 году

Да.

Переменные давно реализованы в нативном CSS

Рили? Ниже переменная (она же map), можно пример в "нативном CSS"?

$palette: (

  light: (
    1: "0deg 100% 99%",
    2: "0deg 100% 98%",
    3: "0deg 100% 96%",
  ),
  
  dark: (
    1: "0deg 0% 0%",
    2: "0deg 0% 0%",
    3: "0deg 0% 0%",
  ),

);

вложенность также

Можно пример вложенности ниже в "нативном CSS" (не строкой `.car .car--model`, а именно, как "Nesting" в Sass)?

.car {
  color: red;
  
  &--model {
    background: black;
    
    &-tesla {
      color: blue;
    }
  }
}

Какие преимущества остались у препроцессоров?

Преодполжим, в переменную выше (она же map) залетает 99 палитр, разных оттенков, реализуйте в "нативном CSS" автоматическую генерацию css классов на основе этой переменной, чтобы получать на выходе примерно такое (по дороге, желательно вешать брекпоинты для дисплеев разных размеров и наследоваться от пользовательских цветовых тем, чтобы например, темное было на темном):

.palette--light-1 { color: hsl(0deg 100% 99%) }
.palette--light-2 { color: hsl(0deg 100% 98%) }
// ...
.palette--dark-3 { color: hsl(0deg 0% 0%) }

setTimeout
https://developer.mozilla.org/en-US/docs/Web/API/s...

После истечения счетчика - выполнить у окна:
modal.style.display = "none";

https://strapi.io/

https://ghost.org/
https://payloadcms.com/
https://keystonejs.com/
https://www.netlifycms.org/

https://topvisor.com/