Парсер 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.

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

Правильное поле для ввода паролей

Исторически так сложилось, что символы в полях для ввода пароля в программах и на сайтах заменяют "звездочками" или какими-нибудь другими символами. Хорошо это или плохо, однозначно сказать сложно. На эту тему было уже немало споров, но к единому мнению оппоненты так и не пришли. С одной стороны вроде бы все логично, вводимый пароль никто не видит, безопасность, приватность, паранойя и все такое. Но с другой стороны это ужасно неудобно, можно ошибиться буквой, ввести пароль не в том регистре или не в той раскладке, часто при копировании паролей из текста писем или с сайтов в конце захватывается лишний пробел или перенос строки, где-то не вовремя проявит инициативу Punto Switcher, при регистрации на сайтах надо заводить еще одно поле для подтверждения пароля, ну и так далее. В открытом текстовом поле для ввода пароля такие ошибки были бы видны сразу.

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