Как добавить комментарии в JSON

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

Но, как оказалось, формат JSON не поддерживает комментарии (Douglas Crockford - создатель JSON, если что), а PHP, придерживаясь стандарта, при попытке декодировать файл с комментариями возвращает пустые данные. Вот для наглядности два простейших примера, как это (не) работает:Где-нибудь в описании объектов на JavaScript подобные комментарии воспринимались бы нормально, но только не в файле JSON. В обоих случаях возвращается пустота.

Читать статью целиком »

Парсер EXIF на JavaScript

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

Читать статью целиком »

Как на JavaScript узнать реальный размер изображения

Для работы с масштабированными изображениями в JavaScript или эффектов типа лайтбокса, необходимо знать реальную высоту и ширину изображения. Но в CSS или в атрибутах изображения width и height можно задать любые размеры. Поэтому попытка определить реальный размер из этих атрибутов вернет неправильные значения, свойства ширины и высоты покажут текущие размеры. К счастью, современные браузеры с поддержкой HTML5 позволяют обрабатывать два дополнительных свойства: naturalWidth и naturalHeight, в которых содержатся реальные размеры изображения.

Читать статью целиком »

Кроссбраузерная стилизация input type="file" с помощью CSS

Продолжаем тему извечного противостояния дизайнеров и верстальщиков. Основной конфликт возникает тогда, когда дизайнер рисует картинку сайта так, как нужно заказчику, а потом верстальщику приходится адаптировать под это изображение различные элементы HTML. Один из самых сложных для стилизации элементов - это поле выбора файлов, элемент input с типом file. В качестве наглядного примера, вот как он отображается в различных браузерах:


Дополнительную сложность создает то, что это поле попадает под различные правила безопасности браузеров, поэтому его нельзя, например, заменить каким-нибудь стилизованным div, нельзя обернуть тегом label, нельзя напрямую присвоить значение с помощью скриптов или вызвать окно выбора файла, сэмулировав нажатие через element.click(). А в некоторых браузерах даже нельзя сделать поле выбора файлов скрытым, так как после отправки формы его значение не будет передано на сервер. В разных интернетах я встречал попытки сделать кроссбраузерное решение, но все они, на самом деле, не универсальные и ограничиваются конкретными браузерами.

Читать статью целиком »

Обработка событий тачскринов на JavaScript

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

Читать статью целиком »