• Как убрать встроенное в 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 парсер при помощи Google Chrome Extension

    Большой интерес пользователей к статье Учимся парсить сайты с библиотекой PHP Simple HTML DOM Parser показал, что тема парсеров очень актуальна. В продолжении темы, хочу рассказать, как можно парсить сайты используя JavaScript и всю мощь библиотеки jQuery, взамен Simple HTML DOM Parser.

    Нет, мы не будем использовать для обработки js, какой-нибудь серверный интерпретатор,  весь парсинг и обработка данных будет происходить на Вашей машине, в Вашем браузере. Браузером будет Google Chrome, а парсер мы реализуем в виде расширения Google Chrome Extension. 

     Почему  Google Chrome, трудно сказать, самым верным ответом наверное будет: "А почему бы и нет?!". Не сомневаюсь, что тоже самое можно будет сделать и для Opera. Однако, эта статья не про написание расширений для браузера( хотя возможно Вы почерпнете для себя и здесь, что-то новое), а про то, как писать client-side парсеры на JavaScript.

    Также хочу рассказать про преимущества, которые дает такой подход к написанию парсера.

    Во первых:  jQuery и JavaScript в целом обладает фантастическим  набором методов для  работы с DOM документа, Simple HTML DOM Parser тихо курит в сторонке. Навигация по дереву DOM браузер априори обрабатывает очень быстро, это собственно его нативный функционал.

    Второе: по планете давным давно шагает WEB 2.0. Для тех кто в танке:  веб  второй версии подразумевает динамически меняющийся контент сайта. AJAX или просто замена определенного участка страницы через JS сводит на нет работу любого php парсера. Проиллюстрирую на примере:

    <html>
<body onload="document.body.innerHTML='Страница была создана динамически! Так нужный Вашему парсеру email равен leroy@xdan.ru'">
email:leroy*****.ru
</body>
</html>

    Полагаю Вы догадываетесь, что увидит написанный на php парсер, загрузивший данную страницу, и тупо проверяющий содержание тега body.

    Использование браузера  в качестве парсер-машины позволяет, обмануть сайт, и выполнить подобные скрипты, получив результирующую страницу. 

  • Улучшаем навыки работы с Google Chrome Developer Tools

    google chrome developer toolsКак часто вы используете отладчик браузера при разработке? Я использую его ежедневно/ежечасно/ежеминутно. Не только в разработке, но и в повседневной жизни. Посмотреть размер фото, размер шрифта, шрифт, отладить CSS, найти ошибку в JS, найти причину медленной работы скрипта, узнать какая из картинок не грузится - все это и многое другое, позволяет отладчик браузера. Я использую Google Chrome. На мой взгляд в нем  самый удобный отладчик из всех Developer Tools. Это целая система разработки с подсветкой синтаксиса и отладчиком кода. Как более эффективно работать с Developer Tools читайте ниже. Собрал все в одном месте, чтобы и самому не забыть и вам, уверен пригодится. 

  • Чем же так хороша Опера и почему я не могу перейти на другие браузеры

    В холиварах с пользователями Хрома и FF часто приходится вспоминать, чем же так хороша Опера и почему я не могу перейти на другие браузерыВ холиварах с пользователями Хрома и FF часто приходится вспоминать, чем же так хороша Опера и почему я не могу перейти на другие браузеры. По мотивам статьи http://habrahabr.ru/company/opera/blog/185352/ решил собрать в одном месте все то, что делает этот браузер лучшим.

    Речь, конечно же, идет о 12-ой ветке.

  • Этот волнительный момент когда Opera перейдет на webkit

    Переход Opera с Presto на WebkitЯ давний фанат браузера Opera. Так уж сложилось исторически, во первых - это всегда был самый удобный браузер, таким остается и поныне, а во вторых во времена GPRS интернета с моей Motorolla C350 и 8 руб/Мб, ее кнопка отключения картинок и невероятно шустрый кеш, были настоящим подспорьем.  Не стоит наверно рассказывать и о том, что именно в опере первой появились всеми любимые вкладки и панель, на которой отображались миниатюрные фрагменты сайтов, для быстрого запуска. А волшебство управления жестами, мои менее преданные опере коллеги, до сих пор лицезреют  с восторгом в глазах.  Собственный движок Presto, свой движок обработки JavaScript, делали этот браузер уникальным по сравнению с другими популярными браузерам (IE, FireFox), чьи корни растут с одного забытого всеми браузера.