Search
Write a publication
Pull to refresh
0
0
Бутыльский Илья @Butylski

User

Send message

Создание одностраничного ajax-приложения с поддержкой History API (и без нее)

Reading time4 min
Views52K
Судя по комментариям в этой статье, создание веб-приложений с возможностью аякс-навигации является интересной для сообщества темой и пока еще немногие сталкивались с подобной задачей. Я расскажу о ее решении с помощью небольшой библиотеки под названием jQuery-Pjax (либо моего форка ее).

Моя мотивация: в проекте нужно было реализовать mp3-плеер, играющий независимо от навигации на сайте. Далее потребовалось добавить поддержку браузеров без pushState — и я сделал форк библиотеки.

Основные особенности

  • навигация по сайту и обработка форм без полной перезагрузки страниц
  • чистые url, доступные для прямого доступа
  • поддержка #!/hash для устаревших браузеров (добавлено в моей версии)
  • работа с кнопками «назад» и вперед» для современных браузеров
  • а теперь и для старых — благодаря benalman.com/projects/jquery-hashchange-plugin
  • похоже, есть проблемы с ИЕ7 (спасибо Nc_Soft) (тем более, большое спасибо за участие Nc_Soft) и, возможно, opera 11.5 (пока не могу подтвердить, но нахожу крайне удивительным из-за dev.opera.com/articles/view/introducing-the-html5-history-api) — сообщение artishok — проверено и работает на сборке 1074 (not_ice)
  • imsamurai (https://github.com/imsamurai) предложил улучшения библиотеки (и я радостью слил изменения): встроенная функция для отправки форм, улучшения работы с хешами и более развитая система триггеров. (у imsamurai, к сожалению, нет аккаунта на хабре — будем рады помощи)

Ссылки


Принцип работы Pjax

Читать дальше →

В поисковой строке Рамблера можно не только писать — но и говорить

Reading time2 min
Views20K
Привет %USERNAME%!

Google Chrome начиная с 11 версии получил возможность распознавания речи в тегах input;
Раз уж возможность есть, грех ее не использовать :)

Теперь в поисковой строке рамблера можно не только писать — но и говорить.


Как это работает

HBase + Thrift + PHP

Reading time4 min
Views11K
Видимо так сложилось исторически, но на хабре не очень много статей о HBase, Thrift и тем более о том как их связать для работы с PHP клиентом. Давайте же ликвидируем этот пробел и пройдемся от инсталяции HBase до получения PHP клиентом примитивных данных из HBase.
Читать дальше →

Нечёткий поиск в тексте и словаре

Reading time13 min
Views270K

Введение


Алгоритмы нечеткого поиска (также известного как поиск по сходству или fuzzy string search) являются основой систем проверки орфографии и полноценных поисковых систем вроде Google или Yandex. Например, такие алгоритмы используются для функций наподобие «Возможно вы имели в виду …» в тех же поисковых системах.

В этой обзорной статье я рассмотрю следующие понятия, методы и алгоритмы:
  • Расстояние Левенштейна
  • Расстояние Дамерау-Левенштейна
  • Алгоритм Bitap с модификациями от Wu и Manber
  • Алгоритм расширения выборки
  • Метод N-грамм
  • Хеширование по сигнатуре
  • BK-деревья
А также проведу сравнительное тестирование качества и производительности алгоритмов.
Читать дальше →

Реализация нечеткого поиска

Reading time6 min
Views43K


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

В данной статье описывается возможная реализация нечеткого поиска, которая была применена для поиска на сайте edatuda.ru.
Читать дальше →

cssHooks — расширяем множество CSS свойств

Reading time5 min
Views3.3K
В этой статье я расскажу об объекте jQuery.cssHooks, который по умолчанию содержится в jQuery. Расширение этого объекта позволяет добавлять новые свойства или значения, прописываемые в методе .css(), которые изначально не поддерживаются теми или иными браузерами. Возможно, для многих наличие CSS хуков не является новостью, но для меня это стало небольшим открытием.
Для тех, кому лень дальше читать, привожу основную мысль. Допустим, вы хотите в jQuery добавить CSS свойство chuck-norris:
$.cssHooks.chuckNorris = {
	get: function(elem) {
		//проводим манипуляции с узлом elem, получаем value
		return value;
	},
	set: function(elem, value) {
		//проводим манипуляции с узлом elem, устанавливаем value
	}
}

$(el).css(‘chuck-norris’, Infinity);
//или $(el).css({‘chuck-norris’: Infinity});
alert($(el).css(‘chuck-norris’)); //Infinity


Далее будет подробно описана «модификация» свойства background-color для поддержки rgba в старых версиях IE и добавление нового, несуществующего в спецификации свойства background-alpha для удобной установки прозрачности фонового цвета. В IE прозрачность цвета будет реализована с помощью использования свойства filter, добавляя элементу градиент, состоящий из двух одинаковых цветов.
Читать дальше →

Размытие изображений по Гауссу с помощью SVG

Reading time6 min
Views16K


В этом топике я хотел бы рассказать, как добавить изображениям на веб странице эффект размытия по Гауссу без использования флеша. Статью я планировал написать еще год назад, и, к моему большому удивлению, меня никто не опередил, хотя тема достаточно проста и интересна как с точки зрения веб дизайна, так и с точки зрения клиентской разработки. Для создания эффекта будем использовать уже ставшую популярной технологию SVG, которая работает во всех последних версиях браузеров. Для IE8- воспользуемся CSS фильтрами (Blur в частности), которые работают только в продуктах Microsoft. Для начала, предлагаю ознакомиться с итоговым вариантом здесь (наведите на любое изображение). Скрипт представлен в виде jQuery плагина, но выдернуть его для использования вне jQuery не составит труда.

Очевидно, целью работы являетя не только размытие картинки, а и анимация этого размытия.

Из простейшего примерамы видим, что интенсивность размытия зависит от атрибута stdDeviation в теге feGaussianBlur.
Читать дальше →

Как мы начинали бизнес со 100 000 руб. и за год превратились в компанию с оборотом в десятки миллионов

Reading time5 min
Views46K
Что представляет собой компания Fprints? Это сеть магазинов в Санкт-Петербурге, крупнейший интернет магазин по продаже расходных материалов для печати в России, но самое важное, это крепкая, сплоченная команда единомышленников, которая каждый день стремится воплотить в жизнь свою цель. А цель проста, как все гениальное – дать возможность покупателям со всей России приобретать абсолютно все расходные материалы для печати в одном месте, по низкой цене. Но 5 мая 2009 цели были другими.
Читать дальше →

Трансляция рынка — нужны идеи

Reading time2 min
Views13K
Мы давно присматриваемся к Китаю

Почему?

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

Китайцы даже, когда спрашивают, где ты работаешь, обычно прямо сразу спрашивают именно про производство — «Что ты производишь?»
Чувствуете разницу с нашей страной?

Район Hua Qiang Bei. Гигантский рынок электроники. Изображение из wiki.
Район Hua Qiang Bei. Гигантский рынок электроники. Изображение из wiki-статьи.

Перейдём к сути.

Читать дальше →

Groovy за 15 минут – краткий обзор

Reading time8 min
Views407K
Groovy — объектно-ориентированный язык программирования разработанный для платформы Java как альтернатива языку Java с возможностями Python, Ruby и Smalltalk.

Groovy использует Java-подобный синтаксис с динамической компиляцией в JVM байт-код и напрямую работает с другим Java кодом и библиотеками. Язык может использоваться в любом Java проекте или как скриптовый язык.

Возможности Groovy (отличающие его от Java):

— Статическая и динамическая типизация
— Встроенный синтаксис для списков, ассоциативных массивов, массивов и регулярных выражений
— Замыкания
— Перегрузка операций

[http://ru.wikipedia.org/wiki/Groovy]

Более того, почти всегда java-код — это валидный groovy-код.
Читать дальше →

Kango — фреймворк для создания кроссбраузерных расширений

Reading time4 min
Views8K

Вступление

Kango позволяет создавать расширения для популярных браузеров используя только JavaScript, причем код един для всех браузеров. На данный момент поддерживается Chrome, Firefox, Internet Explorer (в публичном доступе только версия с поддержкой Chrome и Firefox) и ведется работа над поддержкой Opera и Safari. Ниже будет рассмотрено как можно быстро создать простой кроссбраузерный Gmail Checker

Что должно получиться в итоге:



Читать дальше →

Техники сжатия кода

Reading time5 min
Views5.7K
Джед Шмидт, Томас Фухс и Дастин Диаз — достаточно известные в JavaScript-коммьюнити ребята в последнее время нашли себе новую развлекуху — писать полезные штуки размером не больше одного твита, то есть 140 байт. Даже домен зарегали — 140byt.es, куда приглашаются все желающие попробовать свои силы в написании супер-компактных функций.

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

Сразу оговорюсь, что читаемость обработанного таким образом кода стремится к нулю, так что использовать эти трюки стоит только в случаях, когда размер действительно превыше всего. Например, при участии в конкурсе JS1k.

Читать дальше →

Пять способов вызвать функцию

Reading time5 min
Views374K
Мне часто приходится сталкиваться с JavaScript-кодом, ошибки в котором вызваны неправильным понимаем того, как работают функции в JavaScript (кстати, значительная часть такого кода была написана мной самим). JavaScript — язык мультипарадигменный, и в нем имеются механизмы функционального программирования. Пора изучить эти возможности. В этой статье я расскажу вам о пяти способах вызова функций в JavaScript.
Читать дальше →

CoffeeScript в деле — Пять вещей, которые можно сделать и с JavaScript

Reading time3 min
Views13K
От переводчика: В статье есть несколько JavaScript нюансов, которые могут быть интересны и тем, кто далек от CoffeeScript

Как и все программисты, я осторожен в отношение CoffeeScript. Как может, немного синтаксического сахара, оправдать дополнительный шаг компиляции?

Но, после того как я поиграл с CoffeeScript, всего несколько дней, я понял, я никогда не вернусь назад. Синтаксический сахар — это только начало. Я стал писать код быстрее, и с меньшим количеством ошибок, потому что он, стал намного чище. CoffeeScript помогает придерживаться хорошего стиля в написание кода. Ниже я приведу несколько примеров на Javascript и опишу их более изящное решение с помощью CoffeeScript.
Читать дальше →

Написание сложных интерфейсов с Backbone.js

Reading time13 min
Views100K
image

Backbone.js это каркас для создания RIA JavaScript приложений, его автором является Jeremy Ashkenas, создатель CoffeeScript, Backbone является частью компании Document Cloud ей же «принадлежит» Underscrore.js. Backbone — очень легкая библиотека, помогающая вам создавать интерфейсы. Она может работать с любыми библиотеками, к которым вы привыкли.
Backbone это набор классов, размером менее 4Кб, которые формируют структуру вашего кода и помогают создавать качественные MVC веб-приложения.
Backbone формирует структуру тяжелых JavaScript приложений, внесением моделей с key-value подобным хранилищем и своими событиями, коллекций с богатыми API, видов (ориг. views) с декларативной обработкой событий и соединяет все это в в одно приложение, поддерживающее RESTful JSON интерфейс.

Backbone не может работать без Underscore.js. Для поддержки REST API и работы с DOM элементами в Backbone.View настоятельно рекомендуется подключить json2.js и jQuery-подобную библиотеку: jQuery или Zepto

В статье будет рассмотрена структура Backbone.js, будет поэтапно создано простое Todo приложение.
Читать дальше →

Разработка мультитач веб-приложений

Reading time6 min
Views59K
Мобильные устройства такие как сматрфоны или планшеты обычно имеют емкостный экран, чувствительный к прикосновениям для расширенного взаимодействия с пользователем.

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

Apple ввел свое touch events API в iOS 2.0, вскоре устройства на Android тоже получили такую возможность и touch events API стал стандартом де-факто. Недавно была собрана рабочая группа W3C для работы над touch events specification.
В этой статье я рассмотрю touch events API, которое нам предоставляют устройства на iOS и Android, мы изучим какие приложения можно создавать, используя touch events API. В статье куча полезных примеров и техник, которые позволяют упростить написание приложений с touch events API.
Читать дальше →

Готовим HTML5 видео в VLC и подаём с помощью jPlayer

Reading time2 min
Views13K
Тег HTML5 video, уже поддерживается всеми основными браузерами.

imageКак видно из таблицы, текущие версии Firefox, Chrome и Opera поддерживают продвигаемый Google открытый WebM, а Safari (включая IOS версию) и IE проприетарный H.264, для остальных же браузеров можно использовать flash плеер, который умеет проигрывать тот же H.264, и таким образом для кроссбраузерности будет достаточно перекодировать видео в эти 2 формата.

В этой небольшой заметке я расскажу как перекодировать видео в эти самые форматы (этот вопрос освещён в интернете на удивление плохо) в VLC плеере и как использовать jPlayer для его кроссбраузерного воспроизведения.

Читать дальше →

Разработка мобильных приложений на PhoneGap и jQuery Mobile

Reading time10 min
Views148K


PhoneGap — это OpenSource платформа, позволяющая разрабатывать мобильные приложения на HTML, JavaScript и CSS под различные платформы (практически без изменения кода приложения) в их число входят: iOS, Android, Blackberry, WebOS, Symbian и Windows Mobile на подходе. Прелесть его в том, что он не требует навыков разработки под конкретную платформу. Вы пишете свое приложение на JavaScript, используете HTML и CSS для разметки. Вы пишете мобильное приложение как обычный сайт или веб-сервис.
Движок PhoneGap расширяет API браузера и добавляет следующие возможности: доступ к акселометру, доступ к камере (пока только фото), доступ к компасу, доступ к списку контактов, запись и прослушивание аудио файлов, предоставляет доступ к файловой системе, позволяет работать с разными HTML5 хранилищами localStorage, Web SQL и т.п а также позволяет безболезненно обращаться к любому кросс-доменному адресу.
Кроме платформы PhoneGap имеет, пока бесплатный, билдер приложений под все устройства в один клик.

jQuery Mobile


Думаю все знают, но напомню ещё раз. jQuery Mobile — это надстройка над jQuery, позволяющая безо всяких проблем разрабатывать мобильные веб сайты и мобильные веб приложения.

Если вы знаете HTML, JavaScript, CSS, jQuery и испытываете проблемы с Java, Objective-C и другими, но желаете попробовать свои силы в мобильной разработке, то эта статья для вас.
Читать дальше →

Как вернуть иконки в трей в 11.04

Reading time1 min
Views5.4K
Наверное, многие уже знают что в 11.04 сильно переделали оформление рабочего стола. Также многие заметили, что пропал системный трей в верхней панели. Вот только не все знают как его вернуть. А делается это легко.

  1. В консоли набираем:
    gsettings set com.canonical.Unity.Panel systray-whitelist "['all']"

  2. Релогинимся
  3. Продолжаем жить как раньше


И зачем они подёргали весь трей и апплеты, если у приложений на замену трею ничего и нет сейчас.

«Переезжаем» в офлайн: Web Storage, Application Cache и WebSQL

Reading time11 min
Views28K
Чтобы делать приложения, которые могут работать в полностью автономном режиме, нам нужно познакомиться со следующими технологиями: HTML5 Application Cache, Web Storage и WebSQL.
Мной уже были опубликованы вводные статьи, касающиеся Web Storage и HTML5 Application Cache. Рекомендую их к прочтению если вы еще не знакомы с основными понятиями. В данной статье будут пересмотрены эти технологии, в том числе и WebSQL, и описаны варианты их совместного эффективного использования. Все эти технологии поддерживаются настольной версией браузера Opera 11.10, Opera Mobile 11, браузерами на движке WebKit (в iOS и Google Android).
Читать дальше →

Information

Rating
Does not participate
Location
Новосибирская обл., Россия
Date of birth
Registered
Activity