Тег: EA

React Day Berlin 2017

Холодным субботним днем провели в Берлине конференцию React Day Berlin 2017. Прошло все гладко – слушатели довольны. Только мне вот показалось, что мало супа было на обед.

Фотографии из твиттера за авторством разных людей.

04 декабря 2017

3.3 тыс.

12 сек

Песенка предвыходного дня

24 декабря 2015

2.6 тыс.

1 сек

Там, где делают спортивные симуляторы

Бёрнаби, восточный пригород Ванкувера. Здесь на площади в 37 тысяч квадратных метров (5 футбольных полей) располагается одно из самых технологичных представительств Electronic Arts – компании, в видеоигры которой играют по всему миру.

21 июня 2015

3.8 тыс.

5 мин

Условные комментарии для Internet Explorer в React

Иногда сделать простые вещи очень непросто. Например, добавить условный комментарии для IE в html. Этим я сегодня и занимался.

В моем текущем проекте нам нужно было поддерживать css медиа-запросы в IE9. Для этого было решено использовать библиотеку media-match.

Что может быть проще? Пара строк кода с условным комментарием:

<!--[if lte IE 9]>
   <script src="/public/media.match.js">
<![endif]-->

Но все оказалось намного сложнее, так как мы используем React.js и делаем изоморфное одностраничное приложение. Кто бы знал, что React не рендерит на странице комментарии, помещенные в .jsx-файлы. Показынный ниже способ не работает:

renderHead: function() {
  return (
    <head>
      <!--[if lte IE 9]>
      <script src="/public/media.match.js"/>
      <![endif]-->
    </head>
  );
}

Единственный способ, который мне удалось найти – dangerouslySetInnerHTML для head, внутрь которого я поместил комментарий и все заработало:

renderHead: function() {
  return (
    <head dangerouslySetInnerHTML={{__html: '<!--[if lte IE 9]><script src="/public/media.match.js"></script><![endif]-->'}}>
    </head>
  );
}

Следует также отметить, что тэг script должен быть закрыт отдельно <script></script>, так как сокращение <script /> не работает в React.

Последняя, но, при этом, большая проблема – если надо поместить несколько таких комментариев в head. Конечно, можно все просто написать в одну строку, но это выглядит «убого».

Поэтому я, да простят меня парсерсы HTML в браузерах, положил условные комментарии внутри тэга meta:

renderHead() {
  return (
    var comment = '<!--[if lte IE 9]><script src="/public/media.match.js"></script><![endif]-->';
    <head>
      <title>Website title</title>
      <meta name="react-comment-hack" 
          dangerouslySetInnerHTML={{__html: comment}}>
      </meta>
    </head>
  );
}

Успешного «реакта».

07 мая 2015

4.3 тыс.

1 мин

HTC Dream – первый коммерческий телефон на Android

В 2007 году Apple представила первый iPhone. Осенью 2008 вышел iPhone 3G. В течение года между двумя первыми яблочными смартфонами Google упорно разрабатывала свою мобильную операционную систему и в сентябре все того же 2008-го показала миру первый коммерческий телефон на Android 1.5 – HTC Dream (у нас почему-то называется везде HTC G1). Телефон даже по тем временам получился не самый удачный, да и операционная система была сырой и работала не очень стабильно.

14 февраля 2015

3.6 тыс.

3 мин

« Назад

Вперед »