Andrey Bazykin

Внутри каких элементов надо переключать класс, и что это за класс:

const parentSelectors = [ '.maplabels', '#map' ];
const activeClass = 'active';

Вот jquery, как вы и хотели:

$(document).on('click', parentSelectors.map(n => `${n} >`).join(','), e => {
  const index = $(e.currentTarget).index();
  parentSelectors.forEach(n => $(n)
    .children()
    .removeClass(activeClass)
    .eq(index)
    .addClass(activeClass)
  );
});

Или, к чёрту jquery:

const parents = parentSelectors.map(n => document.querySelector(n));

document.addEventListener('click', ({ target: t }) => {
  const parent = parents.find(n => n !== t && n.contains(t));
  if (parent) {
    const index = [...parent.children].findIndex(n => n.contains(t));
    for (const { children } of parents) {
      for (let i = 0; i < children.length; i++) {
        children[i].classList.toggle(activeClass, i === index);
      }
    }
  }
});

вывести обработчик оплаты на страницу можно таким образом

$orderObj = Sale\Order::load($order['ORDER']['ID']);
												$paymentCollection = $orderObj->getPaymentCollection();
												$payment = $paymentCollection[0];
												$service = Sale\PaySystem\Manager::getObjectById($payment->getPaymentSystemId());
												$context = \Bitrix\Main\Application::getInstance()->getContext();
												$service->initiatePay($payment, $context->getRequest());

Можно вывести компонентом

<?$APPLICATION->IncludeComponent(
    "bitrix:sale.order.payment",
    "",
    Array(
    )
);?>

Но судя по коду компонента он выполняет примерно тоже, что код выше

Если хотите вывести с шаблоном сайта, то можно так сделать через буферизацию

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
$APPLICATION->SetTitle("Оплата заказа");
ob_start();
?>
<?$APPLICATION->IncludeComponent(
    "bitrix:sale.order.payment",
    "",
    Array(
    )
);?>
<?
$formPay = ob_get_contents();
ob_end_clean();
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_after.php");
$APPLICATION->SetTitle("Оплата заказа");
?>
<div class="formPayment">
<?
echo $formPay;
?>
</div>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

1. Сначала сделайте простой запрос (без авторизации) для получения произвольного кода (на сервере генерируем случайный ключ и возвращаем)
2. Полученный ключ (code) кодируем на клиенте через SHA256 (code+username+password)
3. Делаем запрос авторизации отправляя шифрованный код
4. На Сервере проверяем в базе комбинацию SHA256(ключ+полеUSER+полеPASSWORD). Если нашли - Вуаля! и убиваем ключ

Таким образом будет отправляться всегда новый код для авторизации и снифферы не уловят ваши данные.

apt-get install python-software-properties и все будет хорошо

print preg_replace( '/^(\d{3})(\d+)$/iu', '+7($1)$2', '921123456789' ); // +7(921)123456789

Пожалуйста.

Всё построено на animation.

Для картинок может использоваться SVG.
Инфо где можно изучить SVG?

Для сложной графики canvas.
Какую книгу посоветуете по Canvas HTML5?

Примеры
Полно реализаций с анимацией как HTML, так и SVG.

Как написать одностраничное веб-приложение на javascript?

О, владейте:
briefbusters.com

Вёрстка в духе БЭМ получается, когда используется простая и понятная разработчику структура. То, во что она превращается при разворачивании структуры — HTML, CSS, разработчик не трогает вручную, да и не должен.
Не сомневаюсь, что вы знаете фреймворки для работы с БЭМ, но когда люди вручную пишут крокодилы «как в БЭМ», меня просто умиляет:)) Как котята. Хотя нет, котята — отстой.

И, как мне кажется, серьёзная часть разработки уже базируется на Node.js. Включая всевозможные grunt, gulp etc.

ПыСы Яндекс перешёл на Stylus.

Пример codepen.io/cleric/pen/mfyaE
Самый простой способ — просто повернуть сам холст. Так сделано для второго эллипса.
Если же поворачивается добавочный элемент, как у третьего эллипса, то нужно просто применить матрицу поворота.

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

В наше время для этого используют готовые фреймворки. Я привиду несколько самых используемых отсортированых по популярности.

Angular.js
backbone.js
Ember.js
Knockout.js

Я бы обратил особое внимание на Ангуляр. Это самый трендовый фреймворк на сегодня с большим и понятным будующим.

AngularJS, REST. остальное как и везде.

А если так попробовать:

server {
    listen              80;
    server_name "~^(www\.)?(.*)$" ;
    return 301 https://$2$request_uri ;
}
server {
    listen              443 ssl;
    server_name "~^www\.(.*)$" ;
    return 301 https://$1$request_uri ;
}
server {
    listen              443 ssl;
    server_name domain.ru domain.com;
    # основная секция
}

Для особых извращенцев:

server {
    listen              80;
    listen              443 ssl;
    server_name server_name "~^(www\.)?(.*)$";
	if($scheme = https) {
		if($1 = www) {
			return 301 http://$2$request_uri;
	    }
    }
	if($scheme = http) {
		return 301 http://$2$request_uri;
	}
    # основная секция
}

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

server {
    listen              80;
    server_name www.domain.com domain.com;
    return 301 https://domain.com$request_uri ;
}
server {
    listen              80;
    server_name www.domain.ru domain.ru;
    return 301 https://domain.ru$request_uri ;
}
server {
    listen              443 ssl;
    server_name www.domain.ru;
    return 301 https://domain.ru$request_uri ;
}
server {
    listen              443 ssl;
    server_name www.domain.com;
    return 301 https://domain.com$request_uri ;
}
server {
    listen              443 ssl;
    server_name domain.ru domain.com;
    # основная секция
}