Заметки


🔥 Как использовать 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'" />

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

Читать 1 мин | 02.06.2014 14:24

🔥 Мобильные устройства и задержка в 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.

Читать 1 мин | 20.05.2014 13:39

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

Safari

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

Продолжение

Читать 1 мин | 18.05.2014 19:57

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

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

Продолжение

Читать 1 мин | 08.05.2014 23:31

🔥 Все боятся

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

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

Читать 14 сек | 05.05.2014 19:29