Статьи

Мальтийский орден, Ватикан, Италия

По делам семейным имел острую необходимость лететь в Италию. Конечным пунктом моего прибывания в стране пиццы, макарон и коррупционного футбола был г.п. Идзано. В связи с такой возможностью и тем, что ни в жизни не был в этой стране, было решено посетить по пути Рим и Милан.

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

16 июля 2014
3.9 тыс.
1 мин

Про Microsoft, IE 11 и Pointer events

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

Окей, идея не нова, майкрософт богата – должно что-нибудь получиться. Да и разрабатывать должно стать как бы легче. Но...

Вот с майкрософт всегда есть какие-то «но». Вместо того, чтобы взять чужие наработки, общепринятые стандарты и иже с ними, решили изобрести велосипед и добавили префикс MS к Pointer Events. Все смирились и в коде появились вот такие строки:

 $('.selector').on('MSPointerDown', function () {
    //...
 });

 $('.selector').on('MSPointerMove', function () {
    //...
 });

 $('.selector').on('MSPointerUp', function () {
    //...
 });

И снова НО. В своем последнем браузере, в одной из последних версий, майкрософт без всяких предупреждений просто взяли и выкинули поддержку своего собственного молодого стандарта. Все то, что написано выше перестало работать.

А все вот почему, в корпорации решили, что префикс MS и camelCase никому не нужны, плюнув на обратную совместимость. Нынче делать надо так.

 $('.selector').on('pointerdown', function () {
    //...
 });

 $('.selector').on('pointermove', function () {
    //...
 });

 $('.selector').on('pointerup', function () {
    //...
 });

Теперь самое интересное. Если вы не используете какие-либо библиотеки, то:

document.querySelector('.selector').addEventListener('MSPointerDown', function() {
    //...
}, false);

работать будет! Вопрос: ПОЧЕМУ и ЗАЧЕМ?

Немного полезного. Определить одно или другое можно вот таким нехитрым образом:

var supports = (function() {
    return {
        msPointerEvents: window.navigator.msPointerEnabled || false,
        pointerEvents: window.navigator.pointerEnabled || false
    };
})();
30 июня 2014
3.4 тыс.
2 мин

Мой CSS начала века

Вот тот 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
}

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

25 июня 2014
3.3 тыс.
1 мин

Как использовать SVG и не забывать про старые браузеры

Сейчас повсеместно ставят всякие Retina и другие экраны с большой плотностью пикселей. Обычные картинки смотрятся архаично. Можно конечно ставить изображения увеличенные в два раза, а можно просто ипользовать векторные картинки формата SVG. Но, несмотря на 2014 год, иногда все еще можно встретить компьютеры, в которых утсановленны браузеры, неподдерживающие эту технологию. По этой причине многие ищут способы использования SVG, но чтобы IE тоже мог что-то показать вместо белого квадратика.

На самом деле все легко. Если SVG используется в качестве фонового изображения, то можно делать вот так:

.block-with-svg {
    background-image: url(/path/to/image.png);
    background-image: url(/path/to/image.svg), none;
}

А если вы просто вставили картинку, то:

<img src="/path/to/image.svg" onerror="this.src='/path/to/image.png'" />

Работает везде.

02 июня 2014
3.6 тыс.
1 мин

Мобильные устройства и задержка в 300 милисекунд

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

При разработке таких веб-приложений часто возникает множество вопросов. Один из самых важных – задержка между нажатием на какую-либо ссылку и срабатыванием события click. И чем больше устройств выходит на рынок, тем более острым становится этот вопрос. Если для Android и iOS просто необходимо было обрабатывать события на touchstart, touchmove, touchend, то с выходом новой Windows Mobile появились MSPointer events.

В данный момент существует большое количество решений этой проблемы. Однако Илья pukhalski Пухальский, с моей посильной помощью (очень маленькой), написал библиотечку tap, которая просто добавляет к стандартным событиям в JavaScript новое событие tap.

Теперь, подключив эту библиотеку, можно вешать обработчики на событие tap и все будет работать быстро и красиво.

Вот пример для Vanilla JS:

document.getElementById('any-element').addEventListener('tap', function (e) {
    // All the magic happens here
});

А вот для Jquery:

$('#any-element').on('tap', function (e) {
    // All the magic happens here
});

Посмотреть и скачать можно здесь: github.com/pukhalski/tap. Там же примеры для Zepto, Dojo, YUI, ExtJS.

20 мая 2014
3.6 тыс.
1 мин

Браузеры, куда и зачем

Safari

Это мой основной браузер, им я пользуюсь чаще всего для празного «шатания» по интернету.

18 мая 2014
4 тыс.
1 мин

Бобруйск во время Великой Отечественной войны

На календаре очередное 9 мая. По этой причине решил вот напомнить про то, как Великая Отечественная война «прошлась» по любимому Бобруйску.

09 мая 2014
7.9 тыс.
1 мин

Все боятся

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

Не хочу жить в такой стране, хочу жить в стране смелых и открытых людей!

05 мая 2014
2.9 тыс.
14 сек

Офицерские сборы в белорусской армии

Служба в белорусской армии - это не год или полтора, а почти «пожизненное» наказание. С 2010 по 2011 год я отслужил свой положенный по закону год, затем получил офицерское звание и по собственной глупости решил, что на том мои мучения в военной форме закончились. Но прошли три неполных года, и военкомат вспомнил обо мне. Армия позвала на офицерские сборы. Срочную службу я проходил в 103-й бригаде сил специальных операций в Витебске. Сборы же переквалифицировали меня в сапера и проходили в Печах. Главной и, пожалуй, единственной пользой стала та информация, которую удалось получить в результате разговоров с военными и другими призванными на сборы людьми. Но обо всем по порядку.

03 мая 2014
7.2 тыс.
11 мин

Спорт, занимательная физика и Red Bull

30 апреля 2014
3.1 тыс.
1 сек