Статьи

Affinity Designer – новый графический редактор для Mac OS

Мир графических редакторов на компьютерах пользователей и разработчиков чаще всего ограничивается Adobe Photoshop и его бесплатной альтернативой – Gimp. Недавно на рынке этих программ для Mac OS появился еще один игрок – Affinity Designer.

Пока проект находится в стадии разработки, но его бета-версия уже доступна для скачивания. Программа имеет ряд неоспоримых преимуществ:

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

К ознакомлению рекомендуется.

08 августа 2014
3.9 тыс.
24 сек

Резиновая карусель на CSS

Карусели, несмотря на всю свою ущербность, продолжают отсаватся очень востребованным компонентом на тысячах сайтов. Чаще всего для из создания используется Javascript. В этой статье я попробую описать технику создания отзывчивой (резиновой, responsive) карусели на чистом CSS.

Для начала ДЕМО.

04 августа 2014
17.9 тыс.
4 мин

Ускоряем загрузку сайта

Любой веб-сайт с годами становится все больше и больше. Не смотря на рост скорости интернета, сайт все равно грузится все дольше и дольше. Что же делать?

02 августа 2014
3.8 тыс.
3 мин

Про Белавиа и билеты

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

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

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

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

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

Cypher – чемпион мира по Quake Live

© Cypher

Вчера белорус Алексей Cypher Янушевский выиграл чемпионат мира по игре Quake Live QuakeCon 2014, проходивший в Далласе, США.

Проиграв по ходу плей-оф всего одну карту.

Искренние поздравления!

21 июля 2014
3.3 тыс.
10 сек

Телефонное

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

21 июля 2014
2.4 тыс.
4 сек

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

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

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

16 июля 2014
3.6 тыс.
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.2 тыс.
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 тыс.
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.3 тыс.
1 мин