• Arctext.js - Искривления текста с CSS3 и JQuery

    При помощи CSS3 Вы можете вращать вокруг своей оси отдельные буквы, однако довольно сложно будет выстроить каждую букву по некой криволинейной траектории. Arctext.js является JQuery плагином, который делает именно это. Основанный на Lettering.js, он вычисляет угол вращения каждой буквы и распределяет буквы одинаково по всей мнимой дуге заданного радиуса.

    Arctext.js - искривления текста с CSS3 и JQuery

  • HTML5 локальное хранилище данных на стороне клиента

    Из таких web приложений, как Google Wave, Gmail и т.п.  мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем трафика. Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.  

    До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB  или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что  в стандарте должны были появится средства для более практичного хранения данных в браузере. 

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

    Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:

    1. Session storage.
    2. Local storage или Global Storage
    3. Database storage

     

  • Используем datepicker из jquery ui

    Более удобный DateTimePicker разработка автора xdan.ru

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

    Вот так виджет Datepicker выглядит из под коробки в стандартном jQuery UI

    Стандартный Dateicker из jQuery UI

     Все лаконично и просто. Но есть один большой минус. В нем нет редактирования времени. Собственно потому виджет и называется DatePicker, аналогичный виджет со временем должен был бы называться DateTimePicker) К сожалению такого виджета в библиотеке нет. Для простоты Datepicker,TimePicker и dateTimePicker обычно обобщают в одно понятие DatePicker.

    К слову в html5 появились новые элементы ввода, в том числе Date и DateTime Picker'ы. Но мало того, что поддерживаются они не во всех браузерах, так еще и эта самая поддержка оставляет желать лучшего. Приведу пример, как выглядит html5 datepicker в разных браузерах

  • Как сделать HTML5 загрузчик изображения

    Стандарт HTML5 привносит новое, удивительное API. Если вы соедините это API с элементом <canvas> то вы можете получить супер современный загрузчик изображений. Эта статья расскажет, как это сделать. Все эти советы хорошо работают в Firefox 4. Также будут описываться некоторые альтернативные способы, чтобы убедиться, что они работают на Webkit-браузерах. Большинство из этих API, не работают в IE, но это довольно простой способ в использовании, и вполне годиться в качестве запасного варианта. 

    Было бы неплохо, если бы кто-то отписал в комментариях, как он использует ту или иную технологию уже сейчас в своих проектах.

  • Как убрать встроенное в Chrome распознавание голоса x-webkit-speech из input

    Если вы пользуетесь браузером Chrome, то вы наверняка заметили нововведение, которое придумала Google - это иконка микрофончика в правой стороне однострочного поля ввода. 

    chrome x-webkit-speech disable

    При клике на нее, начинается запись голоса, как только после фразы произошла пауза, запись отправляется на сервер для распознавания, в ответ сервер возвращает текст(Надо заметить редко верный). Всеобщему ликованию по этому случаю я в одном из проектов противопоставил желание дизайнера непременно разместить на форме input type="text" шириной 20px. В результате на форме остался лишь 'микрофончик', просто ввести в поле текст стало невозможно. Я начал искать, как же его убрать. В результате, что удивительно ничего не нашел. На большинстве сайтов, объясняется, как его включить принудительно.  Виной всему атрибут x-webkit-speech, который chrome вставляет каждому input'у на странице автоматически.

    Отсюда первый способ избавится от x-webkit-speech:

    window.onload = function(){
    	//убираем x-webkit-speech только у одного input
    	document.getElementById('textfieldid').removeAttribute('x-webkit-speech')) 
    	//ну или удалим атрибут сразу у всех инпутов на странице
    	var inpts = document.getElementsByTagName('input')
    	for(var i in inpts)
    		inpts[i].removeAttribute('x-webkit-speech')
    }

    сделаем тоже самое на jquery

    jQuery( function(){
    	//убираем x-webkit-speech только у одного input
    	$('#textfieldid').removeAttr('x-webkit-speech')) 
    	//ну или удалим атрибут сразу у всех инпутов на странице
    	$('input').removeAttr('x-webkit-speech')) 
    })

    все это работает, но мне хотелось более изящного решения и оно было найдено через css:

    input#textfieldid::-webkit-input-speech-button {
    	display:none;
    }
    /* или у всех инпутов на странице*/
    input::-webkit-input-speech-button {
    	display:none;
    }

    Система распознавания голоса Google Chrome работает даже на самых маломощных ноутбуках, так как использует для этого облачные вычисления серверов google. Это отчасти оправдано для слабого железа, так и для смартфонов. Но когда у Вас нет интернет соединения, эта функция бесполезна. Стоит заметить, что ноутбук без интернета, это большой mp3-плеер =) 

  • Работа с файлами в JavaScript, Часть 1: Основы

    При всем бурном развитии web, и стандартов html в частности, работа  с файлами, практически никогда не менялась. К счастью, с приходом HTML5 и связанных с ним API, сейчас у нас гораздо больше возможностей для работы с файлами, чем когда-либо в предыдущих версиях браузеров(iOS до сих пор нет поддержки File API).

    Тип Файл - File

    Тип File определен в спецификации File API[1] и является абстрактным представлением файла. Каждый экземпляр File имеет следующие свойства:
     name – имя файла
     size – размер файла в байтах
     type –  MIME тип файла

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

    Получение ссылок на файлы

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

     Когда вы используете элемент <input type="file">, Вы даете веб странице (и серверу) разрешение на доступ к файлу.  Так, что первое, как вы можете получить объект File, это поле <input type="file">.

    HTML5 определяет файловые ссылки для всех <input type="file"> управления. Эта коллекция FileList, которая представляет собой структуру в виде массива под названием FileList содержащую объекты типа File для каждого выбранного файла в поле <input type="file">  (помните, HTML5 позволяет выбрать несколько файлов в этом элементе управления). Так что в любой момент времени, Вы можете получить доступ к файлам пользователя, которые он  выбрал, с помощью кода вроде этого: