середа, квітня 29, 2009

Искусство JavaScript ошибок: JavaScript error handling anti-pattern

Есть одна область в javascript программировании, где я ощущаю недостаток дискуссии - это отслеживание ошибок. В то время как многие девелоперы занимаются дебагом ошибок в серверных языках, в JS это делают не многие. Я постараюсь поднять интерес разработчиков к обработке javascript ошибок.

Одно из решений, это введение дебаг мода для приложения на JS. Идея такая, что если дебаг мод установлен в false, ошибки происходят сами собой, если же дебаг мод true - ошибки могут логироваться на сервере или алертом показывать свое присутствие с указанием строки и причины ошибки. Очень полезно для IE.


Пример:
function doSomething(value){
try {
process(value);
} catch (ex){
if (debugMode){
throw ex;
} else {
log(1, "doSomething(): " + ex.message);
}
}
}
Идея примера такова, что если возникла ошибка, то в зависимости от установленного дебаг мода ошибка или логируется или просто показывается. Сейчас, я постараюсь объяснить всю уязвимость данной идеи.

Если ошибка возникнет в функции process(), она будет перехвачена в функции doSomething() и в зависимости от дебаг мода сгенерируется или залогируется, тем самым разрушит call stack. Ошибка будет слишком далека от актуального события, которое нам и нужно отдебажить. Вся полезная информация, которая могла бы быть решением будет утеряна, так как мы выйдем из функции process(). Используя этот код, ваш дебагер будет обрывать выполнение программы в строке содержащей throw ex, в то время как вы хотите оборвать выполнение в самой функции process().

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

1 (Галимый):
function doSomething(value){
if (!debugMode){
process(value);
} else {
try {
process(value);
} catch (ex){
log(1, "doSomething(): " + ex.message);
}
}
}
2 (Нормальный):
var doSomething = debugMode ?
function(value){
process(value);
} :
function(value){
try {
process(value);
} catch (ex){
log(1, "doSomething(): " + ex.message);
}
};
Второй метод более предпочтительнее, так как он предотвращает проверку дебаг мода каждый раз, когда функция исполняется. Еще его легче автоматизировать. Предполагается, что у вас есть один или несколько обьектов и вы хотите, что бы все их методы имели враппер для отлова ошибок на продакшине. Вот вам пример такого кода:

Пример:
//by Nicholas C. Zakas (MIT Licensed)
function productionize(object){

var name,
method;

for (name in object){
method = object[name];
if (typeof method == "function"){
object[name] = function(name, method){
return function(){
try {
return method.apply(this, arguments);
} catch (ex) {
log(1, name + "(): " + ex.message);
}
};

}(name, method);
}
}
}
Этот код пробегает по всем методам объекта и заменяет его функции на другие, которые уже содержат в себе механизм отлова ошибок. Вот пример использования:
var system = {
fail: function(){
throw new Error("Oops!");
}
};

function log(severity, message){
alert(severity + ":" + message);
}

if (!debugMode){
productionize(system);
}

system.fail(); //error is trapped!
Всегда убеждайтесь в том, что ошибка сгенерировалась именно там где нужно - это первая проблема дебага JS ошибок. Удачи!

По материалам: Nicholas C. Zakas

понеділок, квітня 27, 2009

YUI 3 революция...

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

Мотивация:
Теперь когда YUI 3 анонсировано, возникло много дискуссий вокруг дальнейшего направления библиотеки. Я как разработчик программного обеспечения был одновременно взволнован и взбешен. Взволнован, потому что вижу массу возможностей, взбешен потому что не принимаю участия в разработке библиотеки.

Хотя Yahoo позиционирует YUI 3 как основную библиотеку, все таки стабл версия остается YUI 2. Но. Многие разработчики уже начали наслаждаться теми преимуществами, которые таит в себе новая библиотека. Я слышал, что некоторые разработчики ругают YUI 3 в том, что она настолько отличается от второй версии и называют это направление ошибочным. Но я считаю, что это дает огромный стимул разработчикам совершить революцию в мире програмного обеспечения. Добиться верного результата и сделать YUI еще лучше.

В последнее время, а именно где-то 4 года, веб разработка развивается скачками. Был момент когда все встало, пока не появился новый термин - "Ajax". Это заставило разработчиков переосмыслить разработку, переписать то, что было, повысить свои требования к программному обеспечению.

Как и другие библиотеки, YUI в своей разработке руководствуется только требованиями разработчиков. Требования изменились, а почему не измениться библиотеке? Программисты YUI взяли все преимущества второй версии, соединили их с наработками и идеями, которые они желают увидеть в следующей версии ядра и начали. Результат - это лучшие моменты YUI 2 + некоторые хорошие идеи из других библиотек (из jQuery например).

Переход со второй версии на третью:
Будет ли больно перейти со второй версии YUI на третью? Да! Многие шаги при переходе будут болезненными, но революция никогда не бывает простой и мирной. Вопрос не в том, как больно перейти на YUI 3, а в том, что вы в итоге получите?

Решение разработчиков YUI было принципиальным. Ведь переписывание/дописывание старой библиотеки ведет только к разбуханию кода, поэтому было принято решение написать все заново (lol =) ). Вот в этом и есть отличие Эволюции от Революции.

Тем кто занимается разработкой на YUI 2, можно не беспокоиться, эта ветка будет также доступна на GitHub для скачивания и даже будет совершенствоваться. Так что выбор между второй и третьей веткой лежит полностью на разработчике.

Все!
Источник: NCZOnline

Связанные статьи:

John Resig презентовал Processing.js

processing.jsПривет!
Очень интересную идею на днях презентовал John Resig, это: "Processing.js".

Хотя идея не нова и была зарелизена еще в мае 2008 года, сайт для языка вышел буквально на днях, об этом Джон Резиг сообщает на своем официальном блоге.

Немного справки:
Processing.js - свободный язык программирования для людей, которые хотят программировать картинки, анимацию и интерактивность для веба, без использования Flash или Java апплетов.

Он использует Javascript для манипуляции изображениями и прорисовки очертаний и блоков. Все это происходит благодаря элементу Canvas в HTML 5.

Язык простой и легко учится. Благодаря ему можно идеально разработать тулзы для визуализации даты, создать пользовательские интерфейсы, а также разработать игры для веб.

Processing.js работает в Firefox, Safari, Opera и Chrome, работает в Internet Explorer при условии использования Explorer Canvas.

Вышло довольно интересно, просмотрев примеры был очень удивлен и обескуражен.
Но пугает то, что IE6 до сих пор имеет 20% пользователей в интернете, так что про скорый успех у нас говорить не приходится и вряд ли мы вскоре увидим полноценные веб-приложения Processing.js на просторах уанета.

четвер, квітня 23, 2009

YUI карусель за 10 минут.

yui карусельБыстрое howto или как запустить javascript карусель у себя на сайте за 10 минут.

Компонент карусель был добавлен в YUI билиотеку для быстрого скролла контента на сайте в привлекательном и удобном интерфейсе. Последние тенденции показывают, что карусели все чаще становятся необходимым атрибутом каждого сайта. Конкретно В данном туториале мы расмотрим стандартную имплементацию yui библиотеки для реализации поставленной задачи.

Посмотрим?
В вашем текстовом редакторе создайте следующую html-страничку:





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>YUI Carousel Example 1</title>

</head>

<body class="yui-skin-sam">

<div id="scientists">

<ol>

<li><img src="img/scientists/bohr_thumb.jpg" alt="Niels Bohr"></li>

<li><img src="img/scientists/darwin_thumb.jpg" alt="Charles Darwin"></li>

<li><img src="img/scientists/einstein_thumb.jpg" alt="Albert Einstein"></li>

<li><img src="img/scientists/galileo_thumb.jpg" alt="Galileo Galilei"></li>

<li><img src="img/scientists/newton_thumb.jpg" alt="Isaac Newton"></li>

<li><img src="img/scientists/maxwell_thumb.jpg" alt="James Clerk Maxwell"></li>

</ol>

</div>

<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>

<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>

<script type="text/javascript">


//create carousel control

var carousel = new YAHOO.widget.Carousel("scientists");


//render to page

carousel.render();


//display

carousel.show();


</script>

</body>

</html>
Все! Сохраните ее, только картинки сами добавьте. Карусель готова. Результат можно наблюдать на изображении.

YUI карусель

flickrОбратите внимание на очень оригинальную YUI карусель.
Такую не везде встретишь и кто бы мог подумать, что в карусели можно сделать целый мини видео ролик!

http://public.resource.org/ntis.gov/

середа, квітня 22, 2009

Регулярные выражения php

regexpЯ надеюсь все знают, что такое регулярные выражения, публикую полезную таблицу и полезные примеры для web-разработчиков:


Ниже приведена таблица паттернов и их соответствий:

/pattern/Соответствие
x?ноль или один символ 'x'
x*ноль или больше символов 'x'
x+один или больше символов 'x'
.*ноль или больше любых символов
.+один или больше любых символов
{m}M символов
[]символы, заключенные в []
[^]символы, кроме заключенных в []
[0-9]любая цифра от '0' до '9'
[a-z]любая буква от 'a' до 'z'
[^0-9]любой символ, не находящийся между '0' и '9'
[^a-z]любой символ, не находящийся между 'a' и 'z'
/^.../первый символ в строке
/...$/последний символ в строке
\dодна цифра, то же, что и [0-9]
\d+одна или больше цифр, то же, что и [0-9]+
\Dодна не-цифра, то же, что и [0-9]
\D+одна или больше не-цифр, то же, что и [0-9]+
\wодин alphanumeric символ (латинская буква или цифра), то же, что и [a-zA-Z0-9]
\w+один или больше alphanumeric-символов, то же, что и [a-zA-Z0-9]+
\Wодин не-alphanumeric символ, то же что и [^a-zA-Z0-9]
\W+один или больше не-alphanumeric символ, то же что и [^a-zA-Z0-9]+
\sодин space символ (пробел, табуляция, новая строка), то же что и [\n\t\r\f]
\s+один или больше space символов, то же что и [\n\t\r\f]
\Sодин не-space символ, то же что и [^\n\t\r\f]
\S+один или больше не-space символов, то же что и [^\n\t\r\f]+
a|b|c'a' или 'b' или 'c'
abcподстрока "abc"
(pattern)() запоминает группу символов, присваивая их переменным $1, $2 и т.д. См. примеры.
/pattern/iигнорировать регистр букв

Это, конечно, не понять с первого раза, поэтому вот примеры:

ПримерОписание
$str=~/perl/;проверяет, есть ли в строке $str подстрока "perl"
$str=~/^perl/;проверяет, начинается ли строка с подстроки "perl"
$str=~/perl$/;проверяет, заканчивается ли строка на подстроку "perl"
$str=~/c|g|i/;проверяет, содержит ли строка символ 'c' или 'g' или 'i'
$str=~/cg{2,4}i/;проверяет, содержит ли строка символ 'c', следующие сразу за ним 2-4 символа 'g', за которыми следует символ 'i'
$str=~/cg*i/;проверяет, содержит ли строка символ 'c', слудующие за ним 0 или больше символа 'g', за которыми следует символ 'i'
$str=~/c..i/;проверяет, содержит ли строка символ 'c', и символ 'i', разделенные двумя любыми буквами
$str=~/[cgi]/;проверяет, содержит ли строка один из символов 'c', 'g' или 'i'
$str=~/\d/;проверяет, содержит ли строка цифру
$str=~/\W/;проверяет, содержит ли строка символы, не являющиеся буквами латинского алфавита и цифрами

Использование регулярных выражений:

1) Иногда требуется узнать расширение файла по его имени. Элементарное регулярное выражение выбирает все символы после последней точки;
# Пример в  PHP

$filename = '/index.php';

$out = array();

preg_match('/\S+\.(\S+)$/', $filename, $out);

# $out[1] будет содержать расширение файла - 'php'

2) Заменяет английские закрывающие кавычки-«лапки» на русские «елочки»;
# Пример в  PHP

$text = preg_replace('/(\S)"([ .,?!])/', '$1»$2', $text);

3) Простая проверка правильности введенного адреса электронной почты;
# Пример в  PHP

$is_ok = preg_match('/^(.+@.+\..+|)$/', $text);
4) Находит в тексте и автоматически преобразует адреса, начинающиеся с ftp://, http://, https:// в активные ссылки;
# Пример в  PHP

$text = preg_replace("#(https?|ftp)://\S+[^\s.,>)\];'\&
quot;!?]#", '\\0', $text);

Бенчмарк JavaScript Frameworks.

taskspeedПривет!
Есть интересный и наглядный бенчмарк javascript фрэймворков.

Немножко перевода с источника:
Несколько месяцев назад, создатель Dojo Toolkit адаптировал SlickSpeed тест к проверке javascript фреймов, или как они справляются с наиболее типовыми DHTML задачами.

Немного о TaskSpeed.
В то время как космические корабли бороздят просторы вселенной ТаскСпид старается оценить большее количество функционала библиотек.

Цель данного меседжа: Предсказать, от какой библиотеки стоит ожидать большего перформанса когда что-то разрабатываешь в той либо иной области.

В нагрузку к каждой участвующей библиотеке добавлена колонка "PureDom" с обычным старым добрым JavaScriptом. Это для того, что бы можно было посмотреть как с задачей справляется библиотека и как обычный JS. Помоему замечательная идея.

Результаты

Вот чарт результатов с последнего браузера Microsoft IE-8:
chart
P.S. Чем меньше тем круче.

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







Немного о том, как работает данный бенчмарк:
  1. Каждый фреймворк запускается в отдельном iFrame, значит конфликтов между ними не возникнет;
  2. Тест выполняется последовательно с некоторым интервалом, что бы не подвесить бравзер;
  3. Также в каждом iFrame, где проходят тесты, кроме библиотеки, которая тестируется ничего больше нету (никакого дополнительного js);
  4. Сss-селекторы выбраны согласно учебника.
Источник: YuiBlog

Що таке база данних?

База данних — це спеціальна система зберігання, організації та пошуку інформації. Вона містить дані у вигляді таблиць, записів та інших стру...