Современный сайт трудно представить без запросов к серверу. Все большее и большее количество страниц не требуют перезагрузки страницы при переходе по ссылкам, а всего лишь получают новые данные и перерисовывают необходимые блоки. Использование XMLHttpRequest уже не «торт», так как большинство современных браузеров поддерживают fetch API.

Недавно у меня возникала необходимость показывать прелоадер каждый раз, когда в проекте отправляется запрос на удаленный сервер. Так как мы используем Babel для конвертации кода из ES6 в ES5, то fetch превращается в XMLHttpRequest. Это значит, что можно легко переписать два метода и задача будет решена.

var _oldSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function () {
  var _oldReadyStateChange = this.onreadystatechange;

  // Ваш код вначале Ajax-запроса

  _oldSend.apply(this, arguments);
  this.onreadystatechange = function () {
    if (this.readyState === 4) {

      // Ваш код, когда Ajax-запрос завершен

    }
    if (typeof _oldReadyStateChange === 'function') {
      _oldReadyStateChange.apply(this, arguments);
    }
  };
};

Для того, чтобы показать индикатор закгрузки, я переписал метод send, сохранив предварительно старую функцию в переменную _oldSend. Ну а onreadystatechange сообщает нам когда запрос завершен.

Этот способ отлично подойдет, если вы используете jQuery.

Видеозапись всех докладов с Girls Not Bombs #5. Мероприятие состоялось в субботу в минском коворкинге Imaguru. Список докладов:

1. Настя Рыбик: «Yeoman: пишем свой собственный генератор»
2. Machiko Yasuda: «Learn with friends: how to organize meetups around projects & code»
3. Jacob Lowe: «SVG: Such vector goodness»

Трехчасовое видео воркшопа по MeteorJS от Webnotbombs.

Текст – всему голова. Конечно, классно рассматривать картинки и смотреть видео в интернете, но, все же, большинство материалов в сети представляют из себя текст. Обращали ли вы внимание, что читать статьи на одном сайте удобнее, чем на другом? Это происходит от того, что один дизайнер (если он был) подумал об удобстве восприятия информации, а второй вовсе не задумывался об этом.

Новый тренд в дизайне - милые цветные кружочки (квадратики) различного цвета с первой или двумя первыми буквами имени. Так сейчас делают все: браузер Сафари, почтовые клиенты, социальные сети.

Здесь я покажу как это сделать с помощью JavaScript. Главный вопрос – подбор цвета?

Цвет мы будет генерировать из строки с именем. На самом деле подойдет абсолютно любая строка, но так как и букву мы берем из имени, то и цвет будет генерировать из него же.

Вот так будет выглядеть наш HTML:

<div class="user-info">
    <div class="user-info-avatar" id="avatar"></div>
    <div class="user-info-name" id="name"></div>
</div>

Добавим немного CSS-стилей:

.user-info-avatar {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    margin-right: 10px;
    color: white;
}
.user-info-name {
    display: inline-block;
}

А теперь JavaScript:

var stringToColor = function stringToColor(str) {
    var hash = 0;
    var color = '#';
    var i;
    var value;
    var strLength;

    if(!str) {
        return color + '333333';
    }

    strLength = str.length;

    for (i = 0; i < strLength; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }

    for (i = 0; i < 3; i++) {
        value = (hash >> (i * 8)) & 0xFF;
        color += ('00' + value.toString(16)).substr(-2);
    }

    return color;
};

var name = 'Михаил';
var letter = name.substr(0, 1);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar');
var elementName = document.getElementById('name');

elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor;

За генерирование цвета отвечает функция stringToColor. Она принимает строку с именем (любую строку), переводит ее в биты и уже из них в HEX-цвет. Если мы не передадим в функцию ничего, то получим в ответ цвет по умолчанию – в данном примере, #333333.

Вот таким нехитрым образом можно делать такое модное нынче оформление при отсутствии аватара.

В грядущем обновлении Mac OS, с номером 10.11 и названием El Capitan, придет и новая версия браузера Safari – 9.0.

Список нововведений не слишком чтобы внушительный, но интересные вещи там присутствуют. Одна из них – возможность добавить кнопку airplay в любое видео, вставленное с помощью тега video.

Иногда сделать простые вещи очень непросто. Например, добавить условный комментарии для 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>
  );
}

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

© Автор Maks Nemisj

Сделать чекбоксы input[type="checkbox"] и радиокнопки input[type="radio"] красивыми – задача не сложная. Однако, чаще всего, за этим следует добавление новых элементов, а следовательно и усложнение DOM-структуры документа.

Для современных мобильных браузеров, а также декстопных браузеров на основе WebKit и Blink (Chrome, Opera, Vivaldi и т.д.), для некоторых типов инпутов можо создавать псевдо-элементы after и before.

Кто видел Material Design от Google, тот знает, что там есть довольно забавное поведение placeholder-а для поля ввода. Я решил попробовать сделать такое на CSS, но столкнулся с некоторыми проблемами (легко решаются с JavaScript).

Давайте посмотрим, что у меня получилось – ДЕМО.