Сейчас повсеместно ставят всякие 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'" />

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

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

При разработке таких веб-приложений часто возникает множество вопросов. Один из самых важных – задержка между нажатием на какую-либо ссылку и срабатыванием события 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.

Safari

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

Как-то раз столкнулся с необходимостью сгенерировать в Javascript хэш из строки. Да не просто сгенерировать, а так, что бы он полностью совпал с хэшем, сделанным в Java. Полазил в интернете и нашел.

String.prototype.hashCode = function() {
    var hash = 0;
try {

    if (this.length == 0) return hash;

    for (i = 0; i < this.length; i++) {
        char = this.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // Convert to 32bit integer
    }
    return hash;

} catch (e) {
    throw new Error('hashCode: ' + e);
}
};

Ссылка в gists.

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

Вот видео с этого мероприятия.

Часто возникает необходимость в JavaScript найти данные в массиве или объекте по ключу и значению. Стандартной функции или метода к сожалению не существует. Ниже пример такой функции, в которую нужно передать параметр arr (массив или объект) и keyObj (ключ и значение, например {id:10}).

Всем давно и доподлинно известно, что использовать глобальные переменные в JavaScript не принято. Почему? Существует масса причин, все они, конечно же, глупы, но давайте придерживаться такой теории.

Однако иногда возникает необходимость иметь и пользовать глобальную переменную. Но как тогда быть? А если вдруг мы пишем для Node.js, там ведь нету глобального объекта window, там root? А если я хочу использовать свой код и во фронтенде и на сервере?

За сим предлагаю такое решение, которое знатно растиражированно, но никто о нем никогда не помнит.

var global = (function () {
    return this || (1, eval)('this');
}());

Теперь у нас есть глобальный объект global, который обладает всеми свойствами window / root. Элегантное и просто решение.

Придумал не я, украл вот тут.

Однажды один мой товарищ попросил сделать для одного его проекта кнопку удаления, которая содержала бы внутри себя подтверждение. Т.е. как это сделано обычно? Нажимаешь удалить - выскакивает окно с вопросом "Вы уверены, что ходите удалить то-то и то-то?" - нажимаешь "Да", после чего удаляется то, что надо. Так вот, он хотел чтобы нажимаешь "Удалить", внутри кнопки меняется текст на "Вы уверены?", нажимаешь еще раз и происходит удаление.

Идея показалась мне интересной, и я решил поделиться способом простой реализации.

Тут CNews сообщает:

Дыра в безопасности браузера Safari, которую в «Лаборатории Касперского» назвали «катастрофической», позволяет хакерам без лишних усилий узнавать логины и пароли пользователей к различным сайтам. Пары логин-пароль хранятся в plist-файле в незашифрованном виде.

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

«Для того чтобы браузер знал, на чем пользователь закончил прошлую сессию, эту информацию надо где-то сохранить. Очевидно, что это надо сделать в месте, которое не будет легко доступно кому угодно, и уж точно информация должна быть в зашифрованном виде», - рассказал эксперт «Лаборатории Касперского» Вячеслав Закоржевский.

Согласно исследованию эксперта, Safari хранит данные последней рабочей сессии (включая пары логин-пароль для авторизации на посещаемых сайтах) в незашифрованном виде в обычном plist-файле в свободном доступе. «Из него легко добыть учетные данные пользователей», - говорит Закоржевский. «Мы считаем, что хранение конфиденциальной информации в открытом виде с неограниченным доступом - это катастрофическая дыра в безопасности, позволяющая злоумышленникам беспрепятственно воровать пользовательские данные, затрачивая при этом минимум усилий. На данный момент мы не можем подтвердить или опровергнуть существование реального вредоносного кода, обращающегося к этому файлу. Но готовы биться об заклад, что такое ПО не заставит себя долго ждать», - добавил аналитик.

Функция восстановления сессии (Reopen All Windows from Last Session») работает в следующих версиях OS X и Safari: OS X 10.8.5, Safari 6.0.5 (8536.30.1), OS X 10.7.5, Safari 6.0.5 (7536.30.1).

Ну так нефиг давать компьютер людям, которые могут полезть в plist за вашими паролями!

Ниже несколько интересных CSS-хаков и свойств, о существовании которых забывают, а то и вовсе не знают.

html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Вы знаете, что если для html жестко указать скролл по вертикали, то при динамическом добавлении контента у вас не будет неожиданного ресайза, когда скролл понадобиться, а мобильные браузеры не будут подстраивать размер шрифта если задать text-size-adjust.