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

Preferences/Settings | Editor | Code Style | JavaScript | Spaces | Within | ES6 import/export braces.

function getA() {
  return {
    a: 10,
  }
}

let a = 'string';

({ a } = getA());

console.log(a);// 10

mdn → regex → using named groups

Любой. Что там на бэкенде фронту совершенно не важно. 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';