pChart — это PHP-библиотека для создания графиков, гистограмм и диаграмм. В отличие от большинства схожих библиотек, pChart бесплатна (распространяется под GPL лицензией). Из бесплатных главный соперник — Google Chart API.

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

В этом топике хочу рассказать про мой новый сайт. Идея в голове крутилась давно, но не было возможностей для реализации. Совсем недавно, эти возможности появились. Точнее я узнал об их существовании. Встречайте – сервис поиска музыки и составления плейлистов OnePage.ru.

Что это такое.

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

Практически весь функционал доступен без регистрации. Но чтобы вы смогли сохранить созданные плей листы ее (регистрацию) все-таки придется пройти.
Собственно что тут говорить — заходите, смотрите, слушайте.

Проект не затевался как коммерческий или для выжимания n-ных сумм. Изначально делал для себя и друзей, но потом решил доработать и показать вам.

Еще раз напомню адрес )): OnePage.ru
P.S Спасибо за поддержку пользователю ecl, благодаря которому состоялся данный анонс.

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

Почему PDF? Формат PDF позволяет создавать документы с целым рядом неоспоримых преимуществ: открытость, кроссплатформеность, распространенность и, что очень важно, точностью и неизменностью передачи данных по цепочке создание, просмотр и печать.

В чем соль? В использовании SVG файлов как шаблонов с возможностью подстановки необходимых полей с последующим преобразованием в PDF.

Какие преимущества? Возможность создания и быстрого редактирования очень сложных шаблонов в привычных векторных редакторах, таких как Adobe Illustrator, Corel Draw или Inkscape. Простота программирования и использование только бесплатных программных средств. Еще одним важным преимуществом является возможность прозрачно использовать UTF-8 для вставляемых текстов.

Что для этого надо? Для использования данного метода нужен выделенный сервер с возможностью установки своих приложений (Inkscape и GhostScript) и выполнением system-команд. При этом всё будет работать как на Windows платформе, так и на Linux.

Моя статья на Временно.нет

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

Здесь представлен обзор 38 статей, разбитых на 4 категории по способам реализации.

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

В W3Cast #3 Денис ( CurlyBrace) затронул тему использования styleguides, а у меня как раз уже была статья по этой теме. Поэтому я решил поделиться ей, чтобы показать наглядные примеры, демонстрирующих возможности «стилевых гидов».
«Стилевые гиды» — это свод правил и соглашений, предоставляющих разработчикам информацию о структуре кода и принятых правилах оформления. Чаще всего используется группой разработчиков, при совместном участии в проекте или же для самодисциплины при разработке кода.
Если проект большой, то он обрастает многочисленными файлами CSS с различными цветовыми схемами, типографикой и другими стилевыми установками. Чтобы избежать путаницы в структуре кода и не забыть что да как, нужно разрабатывать структурированный код, который впоследствии будет проще использовать, править и частично использовать в других проектах.

Пару лет назад была задача написать для одного из сайтов такой поиск, который бы распознавал опечатки и предлагал бы исправленные запросы. Было перепробовано несколько вариантов, об одном из которых я и хотел тут написать. Поиск на основе звучания слов может стирать языковые границы, поскольку имена собственные на разных языках созвучны. Например, ищешь «Арнольд Шварцнеггер» на русском — находишь «Arnold Schwarzenegger» на английском, или ищешь «Michael Jordan» — находишь «Майкл Джордан», или ищешь «Чак Норрис» — и вдруг он сам тебя находит. Помимо поиска созвучных слов этот метод нивелирует большое количество опечаток. А то че-то задолбала попса, надо больше про инсайд…

© shamansir.wordpress.com

Представляю вам набор функций, которые у меня лежат в отдельном файле utils.js — это функции, которые я использую чаще всего. Они стараются быть кроссбраузерными и проверены на IE6/7, FF2 и Safari 2 и на боевой, сложной системе, в XHTML документах. Должны, по идее, работать, и на других, но не очень старых версиях браузеров — проверку браузера я использовал только в исключительных случаях. Некоторая часть из них, конечно же, просто нарыта на просторах интернета (где — обычно указано) и заимствована ввиду открытости, а большая часть — сконструирована из многих ресурсов и своих идей (и советов коллег), дабы работать на ура — поскольку часто в разных скриптах не учитываются разные тонкости, которые, тем не менее — при ближайшем рассмотрении — оказываются общностями :), ну и быть довольно читабельными.

Уже были статьи про основы гита (0, 1, 2), были и статьи про внутреннее устройство репозитория. Сегодня поговорим, как простому смертному работать с гитом на автопилоте и не морочить себе голову.

Во-первых, шорткаты (в порядке убывания популярности):

alias gst='git-status'
alias ga='git-add'
alias gc='git-commit -m'
alias gp='git pull && git push'
alias gull='git pull'
alias gush='git push'
alias gb='git-branch'
alias gco='git-checkout'
alias gd='git-diff'

Во-вторых, отображение текущей ветки в командной строке:

export PS1='`__git_ps1 "%s"` \w \$ '

Выглядит так:

lazy-args-in-futures ~/Work/io/oleganza-io.git $

(Как установить: ericgoodwin.com/2008/4/10/auto-completion-with-git)

Типичный поток работы в одной ветке

То, о чем так долго говорили большевики — свершилось :)

Итак, рад вам представить сайт русской документации API Drupal — api.drupal.ru

Сайт сделан на основе англоязычного api.drupal.org, поэтому все пути с ним совпадают. Оказавшись из гугля на .org-е вы можете перейти на ту же страницу к нам, всего лишь изменив домен на .ru

Сайту всего 3 дня отроду, поэтому моими стараниями переведен только лишь Справочник Forms API для пятой ветки Друпала.

Но, главное в том, что поучавствовать в переводе сможет каждый из вас. Для этого стоит всего лишь зарегистрироваться на сайте (интеграции с друпал.ру пока еще нет, но работы ведуться), и приступить переводу — это очень просто.

обсуждение на drupal.ru»

Заглянем в прошлое

Не так давно в статьях раздела JavaScript были представлены широкой публике трекбары:



Проект неожиданно получил продолжение. К разработке присоединились камрады abarmot и 1602, а активное обсуждение привело к улучшению текущего и реализации нового функционала. Поэтому, появилось желание сделать проекту свой собственный «дом», где он будет жить и развиваться, что было успешно реализовано на sourceforge.net. Теперь вместо того, чтобы писать статью на каждое изменение в трекбарах автор может спокойно обновлять архивы и описания, а вы самостоятельно скачивать последние версии.

Последние время мне часто приходится искать разнообразные текстуры. Поэтому я решил опубликовать несколько сайтов с большим выбором текстур.

Первым в этом списке я выбрал http://www.textureking.com/ — красивый и понятный дизайн сайта, а также хороший выбор текстур которые разделены на 14 категорий.

Следущим будет http://www.cgtextures.com/ — огромное количество текстур и их категорий (вожможно он и получше textureking :), вам решать.

Примечание: ниже перевод заметки John Resig «How JavaScript Timers Work», в которой автор jQuery ясно и подробно излагает тонкости работы различных методов отложенного исполнения функций. Мои комментарии по клиентской производительности далее курсивом.

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

• var id = setTimeout(fn, delay); — создает единичный таймер, срабатывание которого выливается в вызов определенной функции после указанной задержки. Данный метод возвращает уникальный ID, с помощью которого можно в дальнейшем отменить таймер.
• var id = setInterval(fn, delay); — похож на предыдущий метод setTimeout, но совершает вызовы заданной функции постоянно (каждый раз с заданной задержкой), пока не будет отменен.
• clearInterval(id);, clearTimeout(id); — принимают в качестве параметр ID таймера (возвращаемый двумя предыдущими методами) и предотвращают дальнейшие вызовы таймера.

Для того чтобы уяснить внутренние аспекты работы таймеров, стоит учесть одну важную деталь, которую стоит осветить: задержка при выполнении таймера не гарантируется. Так как весь JavaScript исполняется в браузере в один поток, то асинхронные события (например, клики мышкой или таймеры) запускаются только по возникновению «окна» в этом основном потоке (обработчики событий и вызываемые функции, фактически, «встраиваются» в основной поток выполнения, подробнее об организации тяжелых вычислений). Лучше всего это можно продемонстрировать с помощью следующей диаграммы:



Рисунок 1. Схема работы таймеров в JavaScript

читать дальше на webo.in →

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

К делу

Внешне задумка выглядит так:

Сегодня дебютировал ECMAScript фреймворк, созданный для работы с SVG документами в интернете.
Из их блога:

SVG мощный формат, нуждающийся в представление публике. Уже было доказано, что svg имеет потенциал (хабр), и мы нацелены представить его с помощью фрэймворка revecter

Между тем этот релиз всего-лишь демонстрация функциональности ядра фреймворка, нежели прямого исполнения, он показывает свой потенциал.
Фрэймворк обеспечивает наследование с помощью прототипов (prototype-esque), упрощает перемещение объектов и выполнение других основных задач. Кроме этого он имеет мощный класс анимации, используемый для кроссбраузерной анимации, или формально несуществующих вещей.
Досадно, что не поддерживается IE на данный момент, но поддержка планируется.
http://revecter.googlecode.com/

Похоже, компания Google изобрела новый вид бета-тестирования. Сначала новый сервис обкатывают на корпоративных клиентах, а после этого открывают для широкой публики. По крайней мере, именно такой путь проделал конструктор сайтов Google Sites. Это весьма качественный сервис (фактически, готовая CMS со встроенным WYSIWYG-редактором и бесплатным хостингом), созданный на базе разработок купленной полтора года назад компании Jotspot.

В феврале 2008 года сервис включили в набор корпоративных приложений Google Apps, так что конструктор сайтов был доступен только для корпоративных заказчиков (конечно, Google Apps можно было установить на любой домен, но главными пользователями Google Apps всё-таки являются именно коммерческие организации). И вот несколько часов назад появилась приятная новость: отныне Google Sites доступен для всех желающих, у кого есть аккаунт Google.

Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:

• О плохих приемах современной верстки;
• О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

Я вряд ли ошибусь, если предположу, что язык РНР достаточно популярен, если не самый популярный в веб-разработке. Мы не будем анализировать причины этого (а тем более, следствия), а сконцентрируемся на одном небольшом аспекте, а именно — как на РНР разрабатывать сложные AJAX веб-приложения. И не просто так разрабатывать, а использовать в своей работе библиотеку ExtJS, которая позволяет создавать интерфейсы для этих веб-приложений. Конечно, все это можно разнести и серверная сторона, на РНР или на любом другом языке, совершенно ничего не будет знать о клиентской части и AJAX-библиотеке, просто оперируя JSON данными и обычным HTML. Но можно сделать и по-другому — этот подход, аналогичен популярной сегодня технологии Google Web Toolkit. Мы ничего не разделяем, а просто пишем приложение, используя одну среду, один язык и все возможности (и языка и среды), а уже сервер самостоятельно генерирует код для клиента, полностью автоматически. Таким образом можно совсем (ну или почти) не знать и не разбираться в верстке, JavaScript и ExtJS, но писать приложения, которые будут использовать этот фреймворк.

Для языка Java подобные решения существуют, а недавно такой проект, EXT GWT, даже перешел под крыло самой компании-разработчика ExtJS, превратившись в вполне серьезное профессиональное решение. Ну а как в других языках? Java, конечно, хорошо и даже отлично, но душа и тело хотят разнообразия, или просто не хотят переучиваться. Для таких случаев есть свои решения. И одно из них, для РНР, так и называется — PHP-Ext.

Blueprint — довольно интересный фреймворк для верстки сеткой, который я лично считаю удобным, потому как он позволяет довольно просто создавать весьма сложные страницы, при этом не думая об IE.

Со страницы проекта на Google Code скачиваем архив.

В архиве будет папка blueprint/ там и содержатся основные файлы фреймворка, их и подключаем к странице:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> 
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

Вторая часть моего доклада на конференции UA WEB про социальные сети. Тема части: перспективы развития социальных сетей.

Для пропустивших, советую сначала прочитать первую часть