Ссылки о веб-разработке за февраль 2012

кнопка, точно кнопка

сегодня с некоторым удивлением обнаружил в разделе «the button element» спеки html5 такие слова:

The missing value default is the Submit Button state.

значит, если вам нужна просто кнопка, которая не отсылает форму на сервер, недостаточно кода . Для пущей надёжности и тех, кто с первого раза не понял, нужно писать вот так:


тогда каждый дурак поймёт, что это просто кнопка. А ведь при Путине такого не было, тогда наоборот было, верно я помню?

JSONP, статика и CDN

поскольку CORS ещё отсутствует в большинстве пользовательских браузеров, для загрузки информации с посторонних доменов нам всё ещё приходится использовать JSONP. Думаю, абсолютное большинство JSONP-сервисов, которые вы видели или проектировали, ожидают от клиента, что тот укажет имя функции-обработчика в параметрах запроса. Запрос придёт в скрипт, который обернёт данные в вызов этой функции и отдаст результат клиенту.

но что, если у вас на сервере нету скриптов? Что, если вы отдаёте статические файлы через CDN и не собираетесь отказываться от быстрой доставки данных в браузер пользователя и сниженной нагрузки на свои сервера? С некоторыми предпосылками решение такой проблемы довольно очевидно, хотя и вступает в противоречие с привычным шаблоном использованием JSONP.

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

используя этот подход в картах нокии, мы решили, что имя обработчика должно быть универсальным, чтобы этот же код можно было повторно использовать и в других местах. Поскольку исходная задача — всё-таки загрузка JSON в браузер, логично разместить функции в глобальном объекте JSON, прицеливаясь на стандартизацию. В итоге запрос данных и файл ответа выглядят примерно вот так:

JSON.request({
    uri: 'http://example.com/static.jsonp',
    notify: true
});

JSON.notify(
    'http://example.com/static.jsonp',
    {crossDomain: true}
);

пробел против фиксированных элементов

ни для кого не сюрприз, что пробел — самая большая и потому самая удобная кнопка на клавиатуре. Поэтому её довольно часто пытаются приспособить для действий, отличных от ввода символа пробела. В частности, любой «настольный» браузер при нажатии этой кнопки прокручивает страницу на один экран вниз. Этакий удобный Page Down. (А Shift-Space прокручивает страницу на экран вверх, аналогично Page Up.)

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

честно говоря, этот пост обязан своим появлением совпадению. Совпали моё настроение побрюзжать и «плавающая панель» фейсбука. Поскольку для неё задан стиль position: fixed, она остаётся видимой наверху страницы независимо от прокрутки, и закрывает пару строчек содержания. Поэтому, если дочитать видимый на экране текст и нажать пробел, на следующем экране продолжение у текста будет неожиданным. Ещё бы, две строчки выпали.

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

← предыдущий месяц