Владимир Голубь

Любой. Что там на бэкенде фронту совершенно не важно. REST API же можно сделать на любом хоть сколько-нибудь не эзотерическом фреймворке.
Открывайте рейтинг фреймворков и/или Хэдхантер и выбирайте. При таких расплывчатых требованиях за вас этого никто не сделает.

SELECT priority,
       SUM(time >= '2021-06-04' AND time < '2021-06-05') AS today,
       SUM(time >= '2021-06-03' AND time < '2021-06-04') AS yesterday
FROM  tableX
WHERE time >= '2021-06-03' AND time <= '2021-06-05'
GROUP BY priority

Не mixin, а mixins, наверное.

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

JPEG для фоточек, и всего такого, где много мелких разноцветностей.

Типичные примеры использования:

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

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

GIF — анимации. Ну тут вообще отдельная песня. Ему на смену пророчат APNG и MP4, но воз и ныне там.

SVG — иконки, иллюстрации. Поддерживает прозрачность, бесконечно тянется. Обычно те же иконки в SVG весят меньше, чем в PNG при одинаковом фактическом размере использования. Можно анимировать (отдельная тема и куча особенностей) и управлять с помощью CSS и JS, если встраивать inline (можно и через #use, но с ограничениями). Наверное, самый чувствительный к ошибкам формат, потому что состоит из кода: сложный SVG-файл может убить производительность. Можно очень легко зашить вредоносный код, поэтому запрещён в вёрстке писем.

P. S. Я не могу описать все случаи, бывают уникальные, так как процесс выбора формата зависит от контента вашего изображения. В каждом конкретном нетипичном случае — думайте сами. К примеру, если векторная иллюстрация весит много, то есть смысл перевести её в JPG или PNG. Иногда SVG-иконка может весить в разы больше её PNG-аналога (при одинаковом фактическом размере использования, например, 100 на 100 пикселей при 1:1 размере viewport к физическому разрешению экрана) — тут многое зависит от методов и качества создания таких иконок. Как правильно отметил @Adamosу, иногда затраты на рендеринг SVG (на стороне клиента) не окупают его преимуществ, и приходится использовать растровые изображения. Ну и т. д… Особенностей использования форматов — куча.

P. P. S. Почитайте о Retina, ибо нет никакого «для ретины следует юзать JPG».

https://github.com/naholyr/js-php-unserialize
Ну и здесь еще много вариантов.

Задайте явно дженерик для внутреннего Map

public async getContent() {

    const a = new Map([
      [
        'AA',
        new Map<string, string | string[]>([
          ['desc', [await this.i18n.t('Hello'), await this.i18n.t('Hello')]],
          ['a', 'b']
        ])
      ]
    ]);

Конечно можете. После await у вас должен идти промис, который будет ресолвиться из обработчика события. Если речь о событиях DOM, то как-то так:

HTMLElement.prototype.waitFor = function(event_name) {
    if (event_name) {
        return new Promise((res, rej) => {
        	const listener = function() {
        		res()
        		this.removeEventListener(event_name, listener)
        	};

        	this.addEventListener(event_name, listener);
        })
    } else {
        throw 'No event passed to waitFor method!';
    }
}

async function foo() {
	const start = new Date();
	await document.querySelector('body').waitFor('click');
	console.log('uspeshno dojdalis clicka, jdali celih ' + ((new Date().getTime() - start.getTime())/1000) + ' sekund');
}

foo();

Preferences | Settings | Editor | Code Style | Язык, который используете, например JavaScript | Punctuation | Use single/double quotes always/in new code.

Переменная $this.
Типичная проблема при создании self-controlled компонентов (особенно при использовании методологии BEM) — это создание селекторов внутри модификаторов.

Вместо:

.filter-block {
    &__title {
        color: black;
    }
        
    &--expandable {
        .filter-block__title {
            color: blue;
        }
    }
}

Можно:

.filter-block {
    $this: &;
    &__title {
        color: black;
    }
    &--expandable {
        #{$this}__title {
            color: blue;
        }
    }
}

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;

Реализовал через условное форматирование, может кому-то поможет:

function data(auth) {
const sheets = google.sheets({version: 'v4', auth});

var myRange = {
sheetId: 0,
startRowIndex: 1,
endRowIndex: 2,
startColumnIndex: 1,
endColumnIndex: 2
};

var requests = [{
addConditionalFormatRule: {
rule: {
ranges: [ myRange ],
booleanRule: {
condition: {
type: 'NOT_BLANK'
},
format: {
backgroundColor: { red: 1, green: 0.1, blue: 0.1 }
}
}
},
index: 0
}
}];

var body = {
requests
};
var sId='mySpreadsheetID';

sheets.spreadsheets.batchUpdate(
{
spreadsheetId: sId,
resource: body
}, function(err, response) {
if(err) {
// Handle error.
console.log(err);
}
});
}

Если кто-то знает как сделать проще на node - пожалуйста - дайте знать.

Если это webpack, то можно использовать alias-ы:

webpack.config.js

resolve: {
    alias: {
      'Components': path.resolve(__dirname, 'src/components/'),
      '@': path.resolve(__dirname, 'src')
    }
  },

SomeNestedComponent.jsx

import {Something} from '@/styles/MyUiKit';
import SomeComponent from 'Components/SomeComponent';

Вам надо использовать тег a:

<a href="/path/file_name.xml" download>Download</a>

Если вы хотите использовать file-loader для переноса файла в статическую директорию сборки, то:

<a href={require('../path/file_name.xml')} download>Download</a>

react-router используется исключительно для клиентской навигации и рендера древа в зависимости от значения location.

Достаточно простое решение нашел на kinopoisk.ru. Как и всегда в таких случаях, оно лежало на поверхности.

В переменную сохраняем текущее положение прокрутки body, на body вешаем стилями полученное значение (только отрицательное) в свойство top. Так же нужно добавить position: fixed и left: 0 (right: 0 тоже можно, хуже не будет). Да-да, всё же fixed, засим, может поломать transform.

Вот такие inline-стили для body от работы данного метода на Kinopoisk:

top: -345px;
left: 0px;
right: 0px;
position: fixed;

Проверил у себя на устройствах: работает в iOS Safari 11 и 12. Иных путей решения данной проблемы найти не удалось.

Update. Забыл добавить функции, что я написал, они не супер-гипер крутые, но рабочие:

// 1. Фиксация <body>
function bodyFixPosition() {

  setTimeout( function() {
  /* Ставим необходимую задержку, чтобы не было «конфликта» в случае, если функция фиксации вызывается сразу после расфиксации (расфиксация отменяет действия расфиксации из-за одновременного действия) */

    if ( !document.body.hasAttribute('data-body-scroll-fix') ) {

      // Получаем позицию прокрутки
      let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

      // Ставим нужные стили
      document.body.setAttribute('data-body-scroll-fix', scrollPosition); // Cтавим атрибут со значением прокрутки
      document.body.style.overflow = 'hidden';
      document.body.style.position = 'fixed';
      document.body.style.top = '-' + scrollPosition + 'px';
      document.body.style.left = '0';
      document.body.style.width = '100%';

    }

  }, 15 ); /* Можно задержку ещё меньше, но у меня работало хорошо именно с этим значением на всех устройствах и браузерах */

}

// 2. Расфиксация <body>
function bodyUnfixPosition() {

  if ( document.body.hasAttribute('data-body-scroll-fix') ) {

    // Получаем позицию прокрутки из атрибута
    let scrollPosition = document.body.getAttribute('data-body-scroll-fix');

    // Удаляем атрибут
    document.body.removeAttribute('data-body-scroll-fix');

    // Удаляем ненужные стили
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.left = '';
    document.body.style.width = '';

    // Прокручиваем страницу на полученное из атрибута значение
    window.scroll(0, scrollPosition);

  }

}

Для Bootstrap'овских модальных окон можно сделать универсальный вызов этих функций при их открытии и закрытии:

$(document).on('shown.bs.modal', function () { // открытие любого модального окна Bootstrap
  bodyFixPosition();
})

$(document).on('hidden.bs.modal', function () { // закрытие любого модального окна Bootstrap
  bodyUnfixPosition();
})

<button type="submit" class="btn btn-default"><span>Submit</span></button>

.btn > span{
  position: relative; top: 0; left: 0;
}