За 20 лет непонятной экономической политики мы (граждане Беларуси) уже не первый раз сталкиваемся с ситуацией, когда правительство громко заявляет, а, на самом деле, все эти заявления выглядят как пук в воду. Вот и на этот раз, нам обещали светлое будущее и твердый рубль, а теперь под видом 30-процентного налога прячут девальвацию белорусского рубля.

Почему это беспокоит именно меня? Да потому, что моя зароботная плата привязана к курсу доллара. Если бы курс вырос на 30 процентов, я бы не обратил на это внимания, но а теперь моя зарплата в реальном долларовом эквиваленте стала на 30 процентов меньше.

Страдает малый и средней бизнес, который был ориентирован на продажу импортных товаров. Закупать их надо за валюту, розничную цену поднимать нельзя, белорусское покупать никто не будет (телевизоры, например), что делать в такой ситуации не понятно.

Мне кажется, что белорусская экономическая модель себя изжила окончательно, и единственный вариант – признать ее несостоятельность и поменять вектор развития.

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

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

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

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

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

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

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

Многие для такого рода функцилнала используют различные 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). Теперь в любой момент мы можем достать нашу картинку из локального хранилища и показать пользователю. Интернет для этого не нужен.

Составил небольшой список программ, без которых мне было бы очень плохо жить и пользоваться лэптопом.

PuntoSwitcher

Как ни крути, а раскладку клавиатуры хотя бы раз каждый из нас забывал поменять. И если поисковые системы уже давно умеют определять сие недоразумение, то операционные системы до сих пор не могут этого делать. PuntoSwitcher для этого и сделан.

Облачные хранилища

Dropbox, Copy, Mega, 4sync, Yandex.Disk, Google Drive: любая из этих программ облегчит синхронизацию файлов между различными устройствами и работу с ними в разных местах. Лично я пользуюсь тремя – Copy, Mega, iCloud Drive.

Ненароком обнаружил дома диск с фотографиями WCG 2005 (© автор всех снимков Сергей Сетун).

Но давайте по порядку.

Делать одностраничные сайты – модный нынче тренд. Но всегда встает вопрос написания плавной анимации по разделам сайта. Можно конечно взять jQuery и какой-никакой готовый плагин. Но не для всех страниц есть смысл подключать «массивную» библиотеку, проще написать свое решение.

Напишем наше меню:

<ul class="menu">
    <li><a onclick="return app.scrollTo(this)" href="#news">Новости</a></li>
    <li><a onclick="return app.scrollTo(this)" href="#about">О нас</a></li>
    <li><a onclick="return app.scrollTo(this)" href="#contacts">Контакты</a></li>
</ul>

Дабы не писать метод добавления обработчика кликов по меню, я вписал вызов функции прямо в ссылку: onclick="return app.scrollTo(this)". Не самое лучшее, но сто процентов работающее решение.

В начале каждого раздела для любого элемента должен быть проставлен id с соответствующим значением, например id="news".

var app = {
    scrolled: 0,
    newPosition: 0,
    interval: null,
    speed: 0,

    scrollTo: function(el) {
        var link = el.getAttribute('href').replace('#', ''),
            anchor = document.getElementById(link);

        var location = 0;
        if (anchor.offsetParent) {
            do {
                location += anchor.offsetTop;
                anchor = anchor.offsetParent;
            } while (anchor);
        }
        location = location >= 0 ? location : 0;

        this.animateScroll(location);
        return false;
    },

    animateScroll: function(pos) {
        document.documentElement.scrollTop = 1;
        var element = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement : document.body,
            start = element.scrollTop,
            change = pos - start,
            currentTime = 0,
            increment = 20,
            duration = 300;

        var animateScroll = function(){        
            currentTime += increment;
            var val = Math.easeInOutQuad(currentTime, start, change, duration);
            element.scrollTop = val;
            if(currentTime < duration) {
                setTimeout(animateScroll, increment);
            }
        };
        animateScroll();
    }
};      

Функция, реализующая ускоряющуюся и замедляющуюся в конце анимацию (не моя):

Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};

Я, честно, считаю, что грамотно купленные билеты из Минска – куда-либо – в Минск не намного дороже лоукоста из Литвы. Например купленные мною места в Милан и обратно обошлись мне в 106 евро в одну сторону. Но у меня был багаж, еда, напитки и мне не надо было ехать в Литву, или Польшу, или Москву, или Киев. Билеты купил, кстати, у Белавиа.

Однако в Милан я не полетел по этому билету, поперся немного позже другим рейсом. В Италии пришел в аэропрт, говорю вот у меня билет на рейс Милан-Минск. А мне в ответ. Вы сюда не полетели и Белавиа отменила ваши билеты. Оба, мать их, потому что куплены они были вместе. Какого ***, хотелось бы спросить! Где в таком случае мои деньги? Какая перевозчику разница, зарегистрировался я на рейс или нет? Пусть самолет летит с пустым местом, все равно деньги за это уплачены.

Спасибо менеджеру, который работает в Air Canada и решил мою проблему, зарегистрировав меня на рейс. А белорусскому национальному перевозчику – стыд и позор.

P.S. Перелет Минск-Лондон, Лондон-Дублин, Дублин-Минск обошелся мне в прошлом году всего в 300 баксов. Умейте искать билеты.

То, что в блог не попало, но разбавило мой инстаграм.

Вот тот CSS-файл, который я написал для сайта, сделанного в 2000-м году, поддерживаемого товарищами до 2002 года и работающему (частично до сих пор).

body {
    font-size: 15px;
    font-family: "Times New Roman", Times, serif;
}

select {
    background: #000000;
    font-size: 8pt;
    color: #FF9900;
    cursor: hand;
}

input.but {
    background: #000000;
    border-bottom: #000000 1px solid;
    border-right: #000000 1px solid;
    border-top: #777777 1px solid;
    border-left: #777777 1px solid;
    font-size: 8pt;
    color: #FF9900
}

td.menu {
    color: #FF9900;
    font-size: 12pt;
}

a:link {
    color: #FFAA00;
    font-size: 11pt;
    text-decoration:none;
}
a:visited {
    color: #FFAA00;
    font-size: 11pt;
    text-decoration:none;
}
a:hover{
    color: #CCCCCC;
    font-size: 11pt;
    text-decoration:none;
}

a.menu:link {
    color: #FFAA00;
    font-size: 12pt;
    text-decoration:none;
}
a.menu:visited {
    color: #FFAA00;
    font-size: 12pt;
    text-decoration:none;
}
a.menu:hover{
    color: #FF9900;
    font-size: 12pt;
    text-decoration:underline;
}

a.author:link {
    color: #777777;
    font-size: 8pt;
    text-decoration:none;
}
a.author:visited {
    color: #777777;
    font-size: 8pt;
    text-decoration:none;
}
a.author:hover{
    color: #CCCCCC;
    font-size: 8pt;
    text-decoration:none;
}

a.other:link {
    color: #777777;
    font-size: 11pt;
    text-decoration:none;
}
a.other:visited {
    color: #777777;
    font-size: 11pt;
    text-decoration:none;
}
a.other:hover{
    color: #CCCCCC;
    font-size: 11pt;
    text-decoration:none;
}

h3 {
    color: #FF9900;
    font-size: 15pt
}

Сам сайт вот здесь.