Заметки

Полазил в интернете и нашел чуть-чуть снимков Минска 80-х – 90-х годов. Очень интересно на самом деле.

Продолжение

Самый популярный сайт страны водрузив знамя Министерства обороны публикует у себя на сайте «дневники солдата». Я их почитываю от нечего делать. После очередной части я понял, что ничего толкового от этой серии статей не выйдет.

Попробую описать, почему у меня сложилось такое мнение.

Если внимательно читать стаьи, то можно заметить, что вместе с Антоном Суряпиным (автором дневников) в части иногда присутствует фотограф тутбая. Становится понятно, что написание этих статей было согласовано с начальством воинской части, а те в свою очередь получили согласие из Министерства обороны. А это значит, что будут предприняты все меры, чтобы журналист не увидел той настоящей армии, которая существует в нашей стране.

Могу точно сказать, что он не увидит:

• дедовщины
• пьянства в частях
• разного рода воровства
• неуставных взаимоотношений между офицерами и солдатами
• порванной армейской одежды в бане
• много другого

Все это присутствует в современной белорусской армии, и, безусловно, с этим столкнутся другие солдаты срочной службы, не имеющие за спиной поддержки крупного информационного ресурса.

Всплывающие при наведении подсказки перестают быть популярными. Причиной этому можно назвать развитие мобильного интернета, а на мобильных устройствах, как известно, не такого понятия как наведение, там есть либо «нажать», либо «не нажать». Однако существуют такие ситуации, в которых без всплывающих подсказок не обойтись.

Многие для такого рода функцилнала используют различные JavaScript библиотеки. Но зачем? Достаточно только CSS с псевдо-элементами и использования значения аттрибутов в них.

Сразу скажу, что поддержка у всех этих фич есть, начиная с Internet Explorer 8.

Теперь код.

<abbr 
    data-title="Белорусская Федерация Компьютерного Спорта" 
    class="popover">
        БФКС
</abbr>

В данном примере я использовал тэг abbr, но использовать можно абсолютно любой, какой вам нравится.

В аттрибуте data-title хранится текст всплывающей подсказки, а класс popover необходим для написания стилей.

abbr {
  font: 16px 'Trebuchet MS';
  border-bottom: 1px dashed #666;
}
.popover {
  position: relative;
}
.popover:after {
  display: inline-block;
  font-size: 8px;
  content: '?';
  vertical-align: top;
  margin-left: 10px;
}
.popover:before {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #000;
  color: #fff;
  content: attr(data-title);
  padding: 5px;
  border-radius: 4px;
}
.popover:hover:before{
  display: block;
}

Здесь внимания заслуживает только вот этот псевдо-элемент .popover:before, а конкретнее строка content: attr(data-title). В не мы указываем, что хотим, чтобы содержимым content нашего :before было значение аттрибута data-title – attr(data-title);

Периодически возникает необходимость дать пользователю работать с веб-сайтом / веб-аппом без интернета. Тут на помощь разработчику приходят всякие браузерные хранилища: localStorage, WebSQL, IndexedDB. И если хранить текстовую информацию легко, то как быть с изображениями? Зачастую из API приходит только ссылка на фотографию или картинку. Один из способов конвертировать изображение в base64 и хранить это код, вставляя его потом в аттрибут src нашего тега img. Вот небольшая функция, которая делает такую конвертацию:

function saveImage(url) {
    var img = document.createElement("img");
    img.src = url;
    img.onload = function() {
        var key = encodeURIComponent(url),
            canvas = document.createElement("canvas");

        canvas.width = img.width;  
        canvas.height = img.height;  
        var ctx = canvas.getContext("2d");  
        ctx.drawImage(img, 0, 0);
        localStorage.setItem(key, canvas.toDataURL("image/png"));
    }
}

Она конвертирует изображения в base64-код, используя canvas, затем сохраняет его в localStorage с ключем key. key – это наш адрес изображения (url). Теперь в любой момент мы можем достать нашу картинку из локального хранилища и показать пользователю. Интернет для этого не нужен.

Иногда возникает необходимость с помощью JavaScript определить online/offline статус. Например, для того, чтобы показывать эту информацию пользователю или загружать какие-то данные из offline-хранилища. Вот как выглядит эта проверка в JS:

if(navigator.onLine) {
    // Устройство в интернете
} else {
    // Устройство не подключено к интернету
}

Это свойство поддерживается всеми современными браузерами кроме Opera Mini.