Saint_Byte\'s Blog

У меня сложилось впечатление что jQuery сейчас стал популярен. Его хотят работодатели , его использует яндекс в картах. А mootools ни кто не хочет – его просто используют тот же самый w3c (по информации mootoools.net ) . Я попробую стравнить эти два фреймворка (но я пользую mootools) и двинуть свое мнение какой из них какой. Начнем со слогана:
jQuery – more do , write less (больше делать, пиши меньше) – звучит как мы самые лучшие. Наверно из-за слогана его так и любят. MooTools – a compact javascript framework( компактный javascript фреймворк) – нечего лишнего.
Текущая версия JQuery – 1.4.4 ; Mootools 1.3 . У jQuery больше релизов.
Задачи фреймоворка (цитаты из википедии):

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

MooTools — это свободный JavaScript фреймворк для разработки кроссбраузерных веб-приложений и веб-сервисов. MooTools является модульным, объектно-ориентированным фреймворком, созданным для помощи разработчикам JavaScript.

Как видно из цитат Mootools создан для более серьезных вещёй чем jQuery.

Размеры:

jQuery: PRODUCTION (26KB, Minified and Gzipped) и DEVELOPMENT(179KB, Uncompressed Code)

MooTools:
1.3 with compatibility Uncompressed 138 kb
1.3 without compatibility Uncompressed 129 kb
1.3 with compatibility YUI Compressor 84 kb
1.3 without compatibility YUI Compressor 78 kb

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

События
jQuery:

$(document).ready(function(){
alert(‘The DOM is ready!’);
});

mootools:

window.addEvent(‘domready’, function() {
alert(‘The DOM is ready!’);
});

Одно и тоже событие , один и тот же результат , но ИХМО mootools понятнее – что создается событие а не делается вызов функции.

Создание дополнений:
В jQuery дополнения называются плугины и делаются примерно так:

(function($){
$.fn.backgroundHover = function(options) {
return this.each(function () {
// Код плагина
});
};
})(jQuery);

В Mootools все проше :

var NewClass = new Class({
Implements: [Events],
initialize: function(){
},
someMethod : function(){
}
});

ИХМО этого уже достачно чтоб сделать вывод – что mootools качественнее , продуманный и нормальных программистов а не эникейшиков веба. Пользуйте mootools

Фунция проверяет валидность email адреса. Самая простая и очень понятная . Пользуйте

function verf_email(email)
{
var at = ‘@’;
var max_user_len = 64;
var max_host_len = 255;
if (email.indexOf(at) == -1 ) {
return false;
}
var email_arr = email.split(‘@’);
var user = email_arr[0];
var host = email_arr[1];
// Проверяем юзера по размерам =)
if (user.length == 0) {
return false;
}
if (user.length > max_user_len) {
return false;
}
if (host.length == 0) {
return false;
}
if (host.length > max_host_len) {
return false;
}
// Создаем регекс – регекс, тк регексы поддерживаются от IE 4
var user_regexp = /^([a-zA-Z0-9_\.\-\+])+$/;
var inet_host_regexp = /^(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,4})+$/;
//————————————————-
if (!user_regexp.test(user)) {
return false;
}
//————————————————
if (!inet_host_regexp.test(host)) {
return false;
}
return true;
}

Раньше javascript разработчики не любили oper’у c её проблема по работе с ajax – теперь подозреваю очередь дошла до IE. Не говоря о том что IE довольно тормозной при работе с javascript – так он и работает ещё по своему =) . Как я понял у IE по своему реализована работа с событиями. Собственно по этому вот вам исправленная версия фунции для динамической загрузки javascript файла.

//———————————————————————–
function include_js(src, callback)
{
var head = document.getElementsByTagName(‘head’)[0];
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == «loaded» || script.readyState == «complete») {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}

script.src = src;
head.appendChild(script);
}

Поле в настройках заполнены, viewer_id записывается – все вроде хорошо – вот только злобному хакеру некто не мешает – изучить исходный ход страницы с приложение вконтакте – найти в нем адрес iframe’а и зайти по нету (можно даже просто firebug’ом изучить запросы в сеть). Соответственно встает вопрос как однозначно идентифицировать пользователя вконтакте в своем приложение. Для начала стоит запустить сессию , что использовать этот довольно простой механизм идентифицировать а не отправлять каждый раз с JSON , AJAX запросами копию данных от вконтакте делается это просто:

Session_start();

Главное предварительно нечего не выводить – а то php попробует установить кукисы=). Далее – я как ленивый собираю все полученные данные от Вконтакте в переменные:

$in_vk_api_url = $_REQUEST['api_url'];
$in_vk_app_id = intval($_REQUEST['api_id']);
$in_vk_api_settings = intval($_REQUEST['api_settings']);
$in_vk_viewer_id = intval($_REQUEST['viewer_id']);
$in_vk_viewer_type = intval($_REQUEST['viewer_type']);
$in_vk_sid = $_REQUEST['sid'];
$in_vk_secret = $_REQUEST['secret'];
$in_vk_user_id = intval($_REQUEST['user_id']);
$in_vk_group_id = intval($_REQUEST['group_id']);
$in_vk_is_app_user = intval($_REQUEST['is_app_user']);
$in_vk_auth_key = $_REQUEST['auth_key'];
$in_vk_language = intval($_REQUEST['language']);
$in_vk_parent_language = intval($_REQUEST['parent_language']);
$in_vk_lc_name = $_REQUEST['lc_name'];

Подробнее о этих данных читайте в предыдущем посте на эту тему. Далее можно проверить $in_vk_app_id и ИД приложение заданного уже на сервере где выполняется ваш php (например в конфиги) и если они не совпадают прекратить работу. Это будет полезно в том случае если всякие умные люди решат заработать на вашем приложение без вашего ведома. По крайней мере подобные случаи известны с flash приложениями Вконтакте.

if ($in_vk_app_id != $vk_app_id) {die(‘VK_APP_ID’);}

Где $vk_app_id – ид приложения из вашего конфига.
Далее проверяем самое важно действительно ли пользователь запустил приложение как приложение Вконтакте и пришедшие данные соотвествуют действительности.
По полученым данным вычисляем auth_key:

$calc_auth_key = md5((string)$in_vk_app_id . ‘_’ . (string)$in_vk_viewer_id . ‘_’ . $vk_app_secure_key);

где $vk_app_secure_key – это Защищенный ключ . Подробнее об этом тут

И сравниваем его с пришедшим от Вконтакте ключом :

if ($in_vk_auth_key != $calc_auth_key) {
$_SESSION[‘user_auted’] = false;
die(‘VK_auth_key’);

} else {
// Все в порядке
$_SESSION[‘user_auted’] = true;
}

Теперь надо во всех скриптах где создаются данные для ответов в интерфейс приложения запускать сессию и проверять ключ user_auted .

Session_start();
If (!$_SESSION[‘user_auted’]) die(‘not authed’);

На днях меня осенила мысля что мне надо сокращать ссылки – а то получаются он просто огромные ( Например: http://twmap.ru/#lat=67.28213519263817&lng=159.82991603922082&zoom=11&mt=satellite )

Короткие ссылки собственно они нужды юзеру чтоб дальше их передать народу поэтому я решил что раз короткие ссылки юзеровские то пускай они и «вычисляются у юзера». А язык пользовательской стороны – javascript . А мой любимый фреймворк – mootools (кстати недавно вышел его релиз 1.3 )- поэтому javascript + mootools.

t.co – не подошел сразу потому что добрые разработчики твиттера встроили его к себе – и довольны. Следующий bit.ly – оказался гораздо веселее даже с API и более коротким адресом – j.mp (jmp – это из ассемблера или сокращение от jump ?) . Для работы с их API надо завести пользователя и получить Ключ API .

Класс MoobitLy реализует пока одну возможность – сокращает ссылки. Нечего сложно нет и код там чуть-чуть. Собственно как он работает:
Для начала создаем экземпляр класса :

var mb = new Moobitly(‘saintbyte’,’3ry78ffyudsyfiudsyfiusdfyisduf’);

Первый параметр это логин на bit.ly , второй – ключ API Bit.ly
Затем надо поставить обработку событий , если делать по другому – они могут происходить раньше чем будут связанны с обработчиком :

mb.addEvent(‘start’, function() {alert(‘start’)});

Событие start происходит когда запрос к API начинается. По он происходит когда вызывается метод shorten. Очень удобно если надо врубить какой-нить индикатор процесса.

mb.addEvent(‘url’, function(txt) {alert(txt);});

Получен сокращенный адрес – в качестве параметра адрес.

Функции mb.Shorten(lurl); запускает процесс сокращения , после него начинат происходить события описанные выше.

Вот такой класс скачать его можно тут

11 Октября 2010 вышел в свет релиз моего любимого javascript фреймворка mootools. Из новшеств Slick – новый движок селекторов, в Request появилась поддержка авторизации и OnProgress , больше кроссбраузерности, новый domReady, исправлены проблемы с IE прозрачностью, многочисленные улучшения стабильности,function.prototype.bind и Element.get с несколькими аргументами

Начало тут
Итак приложение настроено и в iframe открывается нужное вам приложение.
Для того чтоб разобраться чего передает вконтакте вашему сайты используем простой код:

<?php  print ‘<pre>’: print_r($_REQUEST); print ‘</pre>’;

Запускаем и узнаем чем Вконтакте делиться с нами в виде параметров к вашей страниц  получаем примерно такое:

Array
(
[api_url] => http://api.vkontakte.ru/api.php
[api_id] => 1977571
[api_settings] => 1
[viewer_id] => 4270794
[viewer_type] => 0
[sid] => a0ee7f239df1f61bceba9ec74fd6cbc7a334bf4a8ccda32f0d55bea47c
[secret] => 8e5a85e554
[user_id] => 0
[group_id] => 0
[is_app_user] => 1
[auth_key] => 4bdd98e538584beb475349b807178dbb
[language] => 777
[parent_language] => 0
[lc_name] => 7c5f0738
)

api_url адрес к которому отправлять различные запрос API Vkontakte обычно http://api.vkontakte.ru/api.php предусмотрели скорее всего чтоб в будущем распределять нагрузку
api_id Ид приложения.
api_settings – показывает к чему пользователь дал  доступ.
viewer_id – ИД пользователя который в данный момент просматривает приложение.
viewer_type – Тип пользователя который просматривает приложение
sid – ИД сессии
user_id – ИД пользователя на со страницы которого запушено приложение
group_id -ИД группы со страницы которой запущено приложение
is_app_user – Пользователь установил себе приложение
auth_key – Ключ авторизации. Следует проверять чтоб быть уверенным что страница открыта как приложение вконтакте.
language – Язык приложения

Начало тут

Все очень просто для начала надо базу цитат поместить в тестовый файл простого формата одна цитата – одна строка. Затем выбрать место в шаблоне который собираетесь использовать и вставить в это место следующий код:

<? if (function_exists(‘Random_phrase’)) { Random_phrase(); } ?>

Файл с цитатами сохранить как 1.txt и сохранить в корень сайта , в каталоге с плугинами создать файл randph.php и вставить в него следующие содержимое:

<?php
/**
* @package randph
* @version 0.1
*/
/*
Plugin Name: randph
Plugin URI: http://dotblog.ru
Description: Show random phrase based on Hello Dolly =))
Author: Saint_Byte
Version: 0.1
Author URI: http://dotblog.ru
*/

function Random_phrase()
{
$data = file(’1.txt’);
print $data[ mt_rand(0, count($data) - 1) ]; return true;

}
?>

Теперь в панели управления блогом найти плугины и активировать плугин Random phrase. Все готово . теперь выводятся цитаты из 1.txt .
Так же этот пост можно рассматривать как руководство с примером по писанию под WordPress

Для начала: оно вам надо? Модераторы ИХМО как хотят так и отклоняют.
Но собственно инструкция:
1. Зарегиться вконтакте , войти в вконтакт. Прокрутить в самый низ страницы:

[Читать полностью...]

Бывает надо чего-то перевести , но переводчик качать копипастить туда сюда данные. И вообще как-то хочется все автоматизировать. И заграница в виде гугла помогает нам в это – они сделали API для Google Переводчика . В Списке Ajax API API для Google Переводчика почему-то обозвали AJAX API языков Google – видно трудности перевода есть и в Google =)) . В основном их API заточено под работу с Javascript’ом – что несомненно прикольно. Но обычно не текст письма надо перевести по-этому вот решение на PHP:

function translate_en2ru($text)
{
$ch = curl_init();
$ref_url = ‘http://dotblog.ru’;
$url = ‘http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=’.urlencode($text).’&langpair=en’.urlencode(‘|’).’ru’;
curl_setopt($ch, CURLOPT_USERAGENT, «Mozilla/4.0 (compatible; MSIE 7.01; Windows NT 5.0)»);
curl_setopt($ch, CURLOPT_TIMEOUT, 40);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_REFERER, $ref_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$data = curl_exec($ch);
curl_close ($ch);
unset($ch);
$obj = json_decode($data);
return $obj->responseData->translatedText;
}

Функция переводит с английского на русский. Качестве параметра принимает исходный текст для перевода – в результате возвращает результат. Требует Curl и json .