Простая и красивая PHP капча на сайт

А вот и реализация одной очень простой и легкой капчи на php:

 //path to font:
 $font = '/var/www/font.ttf';

 session_start();
 
 // generate random number and store in session
 
 $randomnr = rand(1000, 9999);
 $_SESSION['randomnr2'] = md5($randomnr);
 
 //generate image
 $im = imagecreatetruecolor(100, 38);
 
 //colors:
 $white = imagecolorallocate($im, 255, 255, 255);
 $grey = imagecolorallocate($im, 128, 128, 128);
 $black = imagecolorallocate($im, 0, 0, 0);
 
 imagefilledrectangle($im, 0, 0, 200, 35, $black);
  
 //draw text:
 imagettftext($im, 35, 0, 22, 24, $grey, $font, $randomnr);
 
 imagettftext($im, 35, 0, 15, 26, $white, $font, $randomnr);
 
 // prevent client side  caching
 header("Expires: Wed, 1 Jan 1997 00:00:00 GMT");
 header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
 header("Cache-Control: no-store, no-cache, must-revalidate");
 header("Cache-Control: post-check=0, pre-check=0", false);
 header("Pragma: no-cache");
 
 //send image to browser
 header ("Content-type: image/gif");
 imagegif($im);
 imagedestroy($im);

Только нужно лишь таскать с собой какой-нибудь шрифт в TTF. И, поигравшись с параметрами, можно кастомизировать капчу как угодно на своё усмотрение - свой набор символов/слов, цвета символов, цвет фона сделать такой же, как на сайте - вообщем всё, что угодно.

SPLIT в JavaScript а также в JScript и IE6-8

Оказывается в методе String.split(), реализованном в JavaScript (по сравнению с реализацией этого метода в JScript и в IE6-8) есть отличие, заключающееся в том, что если в качестве разделителя задать регулярное выражение и обрамить разделитель в скобки, то он добавится в качестве элемента в выходной массив:

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

А для того, чтобы в JScript и Internet Explorer'ах разделители добавлялись в массив, можно переопределить метод String.prototype.split, который будет корректно работать везде (в соответствии со спецификацией ECMA-262 v3)

О том как это сделать можно прочитать тут -
http://blog.stevenlevithan.com/archives/cross-browser-split

Бешенный скролл jCarousel Lite.

Есть такая очень удобная js библиотека 
jCarousel Lite, которая позволяет очень просто делать анимации и карусели. И вот после очередного обновления сервера карусель начала бешено двигаться то вперёд, то назад.

А дело заключалось в том, что случайно в шапке сайта два раза подгружался скрипт инициализации и в том числе инициализации карусели. И таким образом заместо одной карусели появляется две - и обе листают практически одинаково и незаметно что их две. Но стоит переключиться на другую вкладку в браузере или свернуть - как карусель бешено крутится.
Отпишусь создателю библиотеки об этом issue.

Ширина макета с фиксированным контентом

Если макет веб-страницы фиксирован и должен корректно вписываться по ширине в окно браузера при разрешении 1024x768, то максимальная ширина для wrapper'а (или обёртки контента) должна быть 996px или меньше. При указании ширины больше этого числа (1000px например) в некоторых недобраузерах появляется горизонтальный скролл.

Пример макета - http://dl.dropbox.com/u/1218489/web/markup_996.html

HTML формы и опера

Обнаружил в Опере интересную особенность, при которой jquery serialize() не получала данных из формы:

- Между тегами<form> и </form>
не должно быть неполных или пересекающихся таблиц
- Между тегами <form> и </form>
не должно быть другой формы (что очень логично).


Для следующего, не очень валидного кода:

<form id="firstform">
    <input type="text" name="firstname" value="MyName" />
    <input type="text" name="lastname" value="LastName" />

    <form id="secondform">
        <input type="text" name="age" value="21">
    </form>

    <input type="text" name="gender" value="male">
</form>

результатом операции $('#firstform').serialize() будет:

firstname=MyName&lastname=LastName&age=21

Закрывающая форма #secondform будет являться завершающим тегом для #firstform и поле gender будет опущено.

Впрочем это особенность не только Оперы, а самого jquery и его механизма выполнения операции serialize()