Сегодня очень модно показывать текущее положение прокрутки страницы вверху этой самой страницы. Кому-то из разработчиков пока недостаточным наличие «лифта справа» и, вот он новый элемента дизайна многих страниц в интернете. Ну да ладно, не стану пытаться искать причины столь наличия столь странного элемента, а лишь покажу как легко он делается.

Все большее и большее количество людей предпочитай сидеть в интернете, используя мобильные устройства и планшеты. С недавних пор в некоторых браузерах появилась поддержка API батареи устройства для JavaScript. А в Хроме реализована поддержка в виде промисов. Давайте посмотрим как это работает...

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

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

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

Здесь я покажу как это сделать с помощью 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.

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

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

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

Отличная статья Ильи Пухальского:

Если вы ещё не знакомы с техникой отзывчивых иконок Джо Харрисона, то, скорее всего, будете впечатлены так же сильно, как и я, когда впервые открыл её для себя. В этой статье я бы хотел исследовать, что мы можем делать с SVG, кроме традиционной практики замены PNG. В частности, мы можем рассматривать SVG как независимый модуль, который включает в себя CSS для кастомизации вариантов отображения; также как и правила для отзывчивого поведения, SVG может содержать в себе JavaScript для логики взаимодействий. Теперь давайте рассмотрим эту технику детальнее.

Продолжу серию статей о том, что принято делать на JavaScript, но можно сделать на чистом CSS с использованием чекбоксов. Расскажу как сделать всплывающее окно popup.

ДЕМО.

Немного комментариев к коду.

HTML:

<div class="popup-wrapper">
  <input type="checkbox" class="popup-checkbox" id="popupCheckboxOne">
  <div class="popup">
    <div class="popup-content">
      <label for="popupCheckboxOne" class="popup-closer">&#215;</label>
      Popup text
    </div>
  </div>
</div>

<label for="popupCheckboxOne" class="popup-shower">Show Popup</label>

Все просто, на странице есть блок popup-wrapper, в котором лежит чекбокс popup-checkbox, рядом с ним всплывающее окно, а в конце кнопка-ссылка для вызова это окна. Сделана она на основе label.

CSS для всплывающего окна и кнопок открытия и закрытия «попапа»:

.popup-checkbox, .popup {
  display: none;
}

.popup {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.popup:before {
  display: block;
  content: ' ';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: .5;
}

.popup-content {
  width: 200px;
  height: 200px;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 20px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.popup-shower {
  color: #00f;
  cursor: pointer;
  text-decoration: underline;
}

.popup-shower:hover {
  color: #00a;
  text-decoration: underline;
}

.popup-closer {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #999;
  font-size: 20px;
  border: 1px solid #999;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

.popup-closer:hover {
  background-color: #eee;
}

И чекбокс и всплывающее окно спрятаны (чекбокс никогда и не появится).

Теперь CSS-стиль, который непосредственно влияет на отображение всплывающего окна:

.popup-checkbox:checked + .popup {
  opacity: 1;
  display: block;
}

Здесь все банально, если чекбокс выбран - показать «попап».