Yustas Alexu

Можно использовать babel-standalone. Но вообще jsx обычно компилируется в бандл, который затем подключается как скрипт. Делать это напрямую в браузере можно для себя, но для серьезного проекта такой подход не подойдет.

P.S. Есть еще один способ, вместо JSX использовать близкий ему по синтаксису HTM. HTM может работать напрямую в браузере без транспиляции.

Открыв сайт Instagram в браузере и посмотрев код, заметил, что классы имеют очень странные и нелогичные имена наподобие "McUv5" или "Cfe3N". Причем имена классов для одних и тех же элементов иногда меняются на другие, но такие же бессмысленные. Как мне кажется, это сделано, чтобы препятствовать парсингу страницы. Если я неправ, то зачем элементам даются такие классы? И еще. Как это реализовывается? С помощью чего? И где можно про это подробнее прочитать?

Instagram написан на React. Названия классов генерируются автоматически, это называется css-in-js.

https://github.com/wilddeer/stickyfill

<button id="sort" type="button">Sort</button>
  <br><br>
  
  <div id="body">
    <div class="listing-item" data-event-date="2017-05-02">2017-05-02</div>
    <div class="listing-item" data-event-date="2018-01-07">2018-01-07</div>
    <div class="listing-item" data-event-date="2017-06-05">2017-06-05</div>
    <div class="listing-item" data-event-date="2018-01-03">2018-01-03</div>
    <div class="listing-item" data-event-date="2017-08-08">2017-08-08</div>
  </div>

=============================================================

const items = [...document.querySelectorAll('.listing-item')];

function compare(a, b) {
	const aData = new Date($(a).data('event-date'));
  const bData = new Date($(b).data('event-date'));
  if (aData < bData) {
    return -1;
  }
  if (aData > bData) {
    return 1;
  }
  return 0;
}

$('#sort').on('click', () => {
	items.sort(compare);
  $('#body').empty();
	items.forEach(item => {
  	$('#body').append(item);
  });
});

https://github.com/softvar/secure-ls

transform: translate спасут отца русской демократии.

Это называется image comparison slider. Работает судя по названию только с картинками. Вот пример.

<div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>

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

.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

Использовать platform.js для определения нужного устройства:

if(platform.product === 'iPad') {
    document.body.classList.add('is-tablet');
}

@media(min-width: 1280px) {
    .is-tablet {
       // код CSS
    }
}