DeniSidorenko

Нельзя забиндить стрелочную функцию.

if (strtotime('20.12.2021') <= time() && time() <= strtotime('11.01.2022'))
    $logoName = 'logo-newyear.png';

$simpleDate = date('m-d');
if ($simpleDate >= '12-20' || $simpleDate <= '01-11') {
    ...
}

P.S. А вообще, можно сделать гораздо универсальнее. Описать в конфиге интервалы и соответствующие им логотипы.

class Config
{
    public const LOGOS = [
        ['from' => '01-01', 'to' => '01-11', 'logo' => 'logo-newyear.png'],
        ['from' => '04-25', 'to' => '05-03', 'logo' => 'logo-firstmay.png'],
        ...,
        ['from' => '12-20', 'to' => '12-31', 'logo' => 'logo-newyear.png']
    ];
}
...
$simpleDate = date('m-d');
$logoName = 'logo-standard.png';
foreach (Config::LOGOS as $logoDef) {
    if ($simpleDate >= $logoDef['from'] && $simpleDate <= $logoDef['to']) {
        $logoName = $logoDef['logo'];
    }
}

Вероятный ответ.

Вы можете переименовывать переменные при деструкторизации.

const person = {
  name: 'John',
  age: 23
};

const { name } = person;
const { name: personName } = person;
console.log(name); // John
console.log(personName); // John

Довольно накладно менять стиль в списке стилей, чтобы они поменяли бякграунд у единственного элемента. Не проще ли явно менять стиль у этого самого элемента? Явно будет эффективнее.

Ну а по сути вопроса - вот так можно без дополнительных сущьностей. 10 строк и никакого мошенничества с npm ...

function moveBg(evt){
    if(!!moveBg.timeout){ // функция недавно вызывалась  - запоминаем параметр и ждем;
        moveBg.evt=evt;
        return ;
    }
    // начинаем засечку времени 1 сек. По окончании таймаута вызываем функцию с  последним актуальным параметром, если надо
    moveBg.timeout=setTimeout(function(){moveBg.timeout=null; if(!!moveBg.evt){moveBg(moveBg.evt); moveBg.evt=null}},1000 );
    // дальше без изменений и коррекций
    var totalWidth = $('.home-shadow').width()
    var rect = evt.target.getBoundingClientRect()
    var x = evt.clientX - rect.left;
    var percent = x*100 / totalWidth
    console.log(percent)

    var styleElem = document.head.appendChild(document.createElement("style"));

    styleElem.innerHTML = `#home-shadow:before {background-position: ${percent}% 50%`;
}

$('body').mousemove(function(evt){
    if(evt.target.classList[0] == 'home-shadow'){
        moveBg(evt);
    }
});

https://medium.com/nuances-of-programming/%D1%87%D...

onClick={(event: any) => onChangeHandler(event, Category.id)}

Если бездумно фигачить по принципу "так что там у нас бутстрап сейчас воткнем (плевать что дизайн совсем не про бутстрап), фонтавесоме сразу весь из-за 2 иконок, жиквери чо бы нет" то конечно будет "перегруз".

Я задаю себе 3 вопроса:

1) Могу ли я "сделать руками" лучше/быстрее/надёжнее/легче того, что есть в npm?
2) Достаточна ли имеющаяся библиотека (плагин)? Не избыточна ли она?
3) Сколько будет стоить разработка и отладка своего решения?

Так что всё индивидуально. Надо подходить взвешено, разбираться. Например, есть такая либа для работы с датами moment.js. Оказывается, он тащит в бандл сразу все локализации. Можно найти как это поправить на уровне конфига вебпака (если не изменяет память). А если еще чуток поискать, то можно найти более современный и удобный date-fns и импортнуть из него только нужную функцию.

И https://www.npmjs.com/package/webpack-bundle-analyzer в помощь, оценить вес модулей в общем объёме бандла

Да, это полезно - написать свой фреймворк и/или CMS.
Потом полезно сравнить его с laravel или symfony, найти чем ваш фреймворк лучше.
Если ничем не лучше - можете его смело забросить, и переходить на что-то общеизвестное, и вот почему:

Представим, что у вас заказали лендинг по заказу насосов, например, и вы сделали его на своем фреймворке. Через 5 лет вы сменили род деятельности, и водите экскурсии по Тасмании. Или вас укусил радиоактивный паук, и теперь вы спасаете мир, а поддержкой сайтов не занимаетесь.

Сервис с насосами за это время вырос, они теперь еще и бурят скважины, и фильтры устанавливают и колодцы копают, и у них филиалы в 20 городах. Им нужно доработать сайт. И при поиске разработчика выясняется, что сайт ваш доработать невозможно, т.к. документации по фреймворку нет, готовых модулей совместимых нет, интеграций с 1C, google docs, microsoft sharepoint нет, и никогда не будет. И проще переписать с нуля, чем разбираться как оно у вас там устроено.

А если бы сайт был на общеизвестном фреймворке, то гораздо проще найти и специалистов и найти готовые интеграции.

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

Если стили привязаны к компоненту, вынеси их в отдельный файл, а в компоненте делай
import "./styles.css";
если у тебя есть общий файл со стилями можешь сделать в модуле app
import "./main.css";
Инлайновых стилей в боевых проектах не видел вообще, единственная похожая на инлайновые стили штука
https://styled-components.com/
Лично я за разумный микс стайлед компонентс и общих стилей
Или вопрос в чем то другом?

Не знаю кстати какие туториалы вы смотрели
https://reactjs.org/docs/faq-styling.html#gatsby-f...

const categoriesPossible = GetAllCategories.map((tower:any) => ({value: tower.id, label: tower.name}))

Ну и лучше не юзать any

Если Вы не пишите внешнее или публичное API, то GraphQL и REST - будут крайне отвратительным выбором. Они ограничивают Вас в низкоуровневом CRUD, создавая больше проблем, чем решают, а главное затрудняют выражать Ваше API в терминах доменной области.
Посмотрите в сторону RPC протоколов, и посмотрите как элегантно на них можно описать конкретно Ваш домен. Да и выбор тут огромен: Apache Thrift, gRPC, JSON-RPC, а так же мой любимый, но почему-то малоизвестный в русскоязычном интернете E/A/?T (расшифровывается как entity/action/optional-target)

REST это вообще не "метод" а описание архитектуры. включает в себя несколько базовых принципов и все.
GraphQL напротив, это конкретный протокол взаимодействия .

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

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

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

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

const closedHours = [[06, 11], [06, 08], [06, 08], [06, 08], [06, 08], [06, 08], [06, 11]];

const workTime = () => {
  const date = new Date();
  const day = date.getDay();
  const hour = date.getHours();
  setWorking(hour < closedHours[day][0] || hour >= closedHours[day][1]);
}

Можно

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

Код выглядит так, как будто должны было быть так:

<>
	{cart.map(item => (
		<div className="catalog-mobile__counter" key={item.product._id}>
			<button className="catalog-mobile__minus"></button>
			<input type="text" defaultValue={item.quantity || ''} />
			<button className="catalog-mobile__plus"></button>
		</div>
	))}
</>

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

Достаточно будет получить координаты начала и конца поездки и отправить запрос на https://taxi.yandex.ru/3.0/routestats