Причината да пиша този пост е, защото най-сетне се намери проект, който меко казано ме впечатли. HTML5 и CSS3 отдавна са нещо повече от блян сред разработчиците и започнаха масово да се налагат като техники, на които може да се разчита. Създателите на The Expressive Web са направили чудеса и са съчетали каймака на двете технологии и са направили брилянтен начин за презентацията им. Приветствам всеки, който иска да научи “какво ново”, а и всеки, който иска да направи кратка справка, да посети експеримента.

И тъй като няма как с вълшебна пръчица да накараме големите корпорации да използват по-модерни браузъри (Google Chrome, Mozilla Firefox, Opera или Internet Explorer 9) ще трябва да се съобразяваме с потребителите. Защото в края на деня, най-важното е потребителят / клиентът да са доволни от продукта.

От друга страна не може да се съобразяваме вечно с по-слабите и да ги бутаме напред, защото така няма да се види края скоро. Единият от начините да се съчетаят модерното с корпоративното е прогресивното подобряване. (б.а. прогресивно подобряване е термин, който обединява редица технологии, с чиято помощ потребителите на по-модерни браузъри получават по-добър продукт, докато се запазва използваемостта за браузърите, които не поддържат нужните технологии). Ето защо белгийският колега Mathias Bynens е направил чудесен подбор на най-популярните и най-стабилните начини за таргетиране / прихващане на Internet Explorer в статия наречена “В защита на CSS хаковете – представяване на “безопасни” хакове“.

Аз предпочитам използването на отделени CSS правила за конкретната версия на Internet Explorer (conditional comments), но само при крайна нужда! Ако основният markup и css код са написани по стандартите, то остава малко до почти никаква допълнителна поддръжка. Имайте го това предвид!

Ако има услуга, от която да съм много доволен, то това е epay.bg. Ползвам ги от години за разплащания и до сега не съм имал проблеми (поне не и такива, за които да си спомням в момента). Поддържат повечето (ако не и всички) банки в България и техните карти (с изключение на Банка ДСК и ОББ, които имат лимитиран достъп). Имат голям списък с битови сметки: електрозахранване, мобилни оператори, интернет и кабелни доставчици, кредитни дружества – the whole nine yards!

Като разработчик съм изключително развълнуван от факта, че интегрирането на тяхната разплащателна система е много лесно. Имат демо сървър, на който да се извършват тестове, а превключването към реалния сървър е безболезнено. Както казах – много съм доволен. PayPal имат същата процедура, но при тях е далеч по-тромава!

Keep the good work!

Специализираният сайт за изработка на уеб форми Wufoo е изработил чудесна таблична извадка за текущото състояния на поддръжка в различните браузъри както и информация за отделните атрибути и предлага JS полифили за постигане на същият ефект в по-старите версии.

Но тази статия не е с цел критикуване на пичовете от Vbox7, а с цел да покаже че и техният player може да бъде направен единствено и само с помощта на HTML 5, CSS3 и малко Java Script.

Разработеният от мен player е в изключително начален стадий (работил съм не повече от 5, 6 часа) и в следващите няколко дена ще го подобрявам и обновявам. Част от функциите към момента са:

1. Play/Pause
2. Показване на колко време е изминало от началото на клипа
3. Преместване на slider-а за seek на клипа

Какво НЕ може да прави? Всичко останало и най-вече да показва клипове от сайта на Vbox7 (за сега!).

Важно е да отбележа, че започнах разработката с идеалната цел да науча по-добре за новите възможности на CSS3 и HTML 5 и не целя да подронвам авторитета на Vbox7 по какъвто и да е начин.

Към момента има добра поддръжка за Firefox 3.6.7, Chrome 5.0.375 и Safari 4.0.5. IE-тата не подлежат на коментар (за сега!)

Следете блога. Скоро ще публикувам следващата версия, с включени повече опции като контрол на звука, свободен seek, цял екран и fallback за по-старите браузъри. Също така съм предвил и подробна статия за работа с видео контрола.

ВИЖТЕ ДЕМОТО

Но колкото повече свойства изискват, толкова повече си задаваме въпроса: “Какво друго може да ни се предложи?”. Ето част от моите хрумвания по въпроса.

1. Избирателна повторяемост на фона
   Винаги съм искал да вкарам всичко в една картинка или така нареченият “sprite”. Когато елемента, на който трябва да се сложи фон, е с точно определена ширина и височина всичко е ОК. Но ако трябва една картинка да се разпростре по цялата дължина или височина на елемента трябва да се прави отделен sprite или отделна картинка. Чудесено би било ако можеше да указваме от коя картинка да се отреже, какво да е името на сектора (за да може да се обръщаме към него и занапред), откъде да се отреже и с какви размери.  Ако въпросният сектор се и кешира за следващо използване всичко би било на шест. Ето един пример как би изглеждала подобна директива.

   background-crop: url( ‘/path/to/sprite.jpg’ ), name( ‘footerbg’ ), from( 10px 20px ), size( 5px 10px );
   background: use( ‘footerbg’ ) repeat-x top left
   

   За: Намаляват се броя на заявките към сървъра. В най-добрият случай ще трябва само едно сваляне.
   Против: Това временно отрязване на картинката ще бави рендването на страницата.

2. Константи!
   В общия случай не е толкова фрапантна липсата на константи в CSS. Може да се направят множествени селекти на елементите, които трябват да имат еднакъв цвят,  фон или рамка. Но какво ще стане ако искаме елементите от header-а да имат определен цвят (на текста), който да е същият както border-а на footer елементите? Трябва два пъти да дефинираме този цвят – един път за border-а и един път за color-а. А какво става когато този цвят трябва се замени. Find and replace? Може би. Но защо не е по-културно решение с константа? Пример:
   
   /* Define a simple constant */
   constant {
   name: ‘mainColor’;
   value: ‘#FF00FF’;
   }

   /* Usage */
   #header {
   background-color: $mainColor;
   }

   Прекрасно, нали?

   За: По-добре поддържан код.
   Против: Ако се вкарат константи, някой ще поиска и условни конструкции и CSS от описателен език, ще се превърне в изпълним. И тук пак идва проблема с производителността.

3. Еднаквост на размерите на два и повече елемента.
   Най-баналният пример за това свойство е многоколоннта решетка. Две колони – лява и дясна, като дясната трябва винаги да е с височината на лявата. Въпреки че има добри решения на този проблем и сега, би било далеч по-лесно ако се добави правило за уеднаквяване на размерите на избраните елементи. Пример:
   
   #leftColumn, #rightColumn {
   eq-height: true;
   }
   #header, #footer {
   eq-width: true;
   }
   
   За: Изграждането на колонни и грид структури ще бъде много по-лесно.
   Против: Е, тук нещо против тази директива не мога да се сетя

Ако и вие се сещате за подобни добри идеи, споделете ги в коментарите. А на мен ако ми дойдат още идеи и аз ще ги споделя.

Забележка: Това не са валидни CSS правила!

Първо – трябва задължително да се пише по стандартите. Въпреки, че това изобщо не е гаранция, че ще успеем да накраме Internet Explorer и Firefox да заговорят на общ език, това ни дава по-голяма възможност да намерим решение на проблема с няколко търсения в Google. Ако всички пишем по наши или фирмени стандарти – оправия няма.

Второ – използвайте нулиращи CSS файлове. Помагат много! Тяхната цел е да премахнат всички свойства, които browser-ите задават по подразбиране. Дали отклонението при едни е 1 пиксел, а при други 2 – проблема си е проблем и ще си спестите много нерви, ако просто нулирате всичко. Може да ползвате нулиращия CSS скрипт на Yahoo , а също така и решението на Ерик Майер. Ползвал съм и двете, но съм повече доволен от предложението на Yahoo.

Трето – тестове, тестове и пак тестове. Не може да се провери всеки един браузер, който някой пиян студент е написал 5 минути преди крайния срок за предаване на дипломна работа, но поне трябва да се прегледат основните мастодонти. Не е държавна тайна кои са те – Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox 3, Chrome, Safari, Opera и Netscape. Повече за това кой и до каква степен ни причинява нерви може да прочетете в Wikipedia и в страницата на Net Applications. Изброените от мен 8 browser-а заемат 98.65 процентен дял от пазара ( към моментан на писане на статията ). За всеки един от тях си има изградени методи и практики за обичайните им проблеми. Тук няма да се спирам на тяхното решение.

Как обаче да направим толкова много тестове? Ще ви разочеровам – има един начин и това е трудния начин. Инсталирате ги, подреждате ги в редичка и почвате да преглеждате всяка страница. И докато с Opera, Chrome, Safari и Firefox няма да срещнете проблем при инсталацията, то при Internet Explorer ( ха! ) ще се сблъскате с проблема, че не може да имате по-ниска версия едновременно. И тук пак има десетки програми, които ги комбинират, но от моя опит мога смело да заявя, че те … не стават! Най-доброто решение, което съм намерил аз е следното. Имам Internet Explorer 8, който има backward compatibility с Internet Explorer 7 ( с малки изключения ). Отделна от това съм си свалил Microsoft Virtual Machine с XP Mode и на него държа чисто копие на Internet Explorer 6.

Това обаче не е достатъчно. Ами MAC потребителите? Ами Linux потребителите? Освен, че има разлика между два различни браузъра, има разлика и между еднакви брандове, на различни операционни системи ( OMG!!! ). И затова има решение Тъй като намирам инсталирането на допълнителни виртуални и не толкова виртуални машини, за да разбера как точно ще изглежда нещо на Konqueror, за напълни излишно, аз съм се спрял на няколко сайта, които вършат тази работа вместо мен ( Cheater ).

1. Adobe Browser Lab
2. Browsershots
3. Browser Sandbox
4. Browsrcamp – Mac OS X тестове

Повече техническа информация може да намерите при котките, които кодват.

Много колеги го ненавиждат, а други ( Facebook ) презират и изобщо не се занимват с неговата ползваемост. Лошото е, че все още е с лъвски пай сред използваните browser-и, най-вече, защото върви по подразбиране с Windows XP.  И докато има над 5% ( в момента са 17% ) ползваемост, аз няма да спра да правя шаблоните си, така че да работят 1:0.99 с IE6. Това, което правих последните два дена, показва ясно, че с малко трикове може да се докара резултат, който да е ОК.

Именно това, че при него се използват алтернативни начини за показването на исканият от вас резултат е предизвикателство.  И аз отправям към хората, които четат блога ми – дайте ми шаблон, който вие не можете да направите да работи при IE6 и аз ще направя всичко възможно, за да може. Правя го за удоволствие, но всякакви материални стимули са добре дошли

На 11-ти април, в клуб “Три Уши”, гр. София, рок група Епизод, ще изнесат поредното си представление пред родна публика. Всики знаем, кои са Епизод, и какво са направили и дали на рок музиката в България, така че няма какво повече да ги рекламирам. Началото е от 22:00 часа. Ако Soto е свършил до тогава, ще отскоча да ги видя за пореден път. “Цар Иван Шишман” нема да умре

По-интересното, от чисто музикална гледна точка, е събитието, което ще се проведе на 8-ми май в клуб Blue Box. Драгомир Драганов, лидерът и китарист на споменатите по-горе юнаци от Епизод, ще представи своят първи самостоятелен албум, “Alter Ego“. Ще чуете изключителна смесица от лирични мелодии и агресивни китарни сола, по малко Yngwie Malmsteen и по малко Joe Satriani. Някои от приятелите ми не харесват музиката на Епизод и няма как като се чуе “Драго от Епизод”, да не се направи връзката, но всъщност Драгомир Драганов се е разграничил доста добре от миналите си изпъленения, работил е изключително здраво ( до колкото знам целият албум е записан изцяло от него ) и на 8-ми май ще видим поредният опит на гениален български творец да пробие през мъглата наречена “български шоубизнес”. Пожелавам успех на Драго в това негово смело начинание.

Придадох малко личен привкус на последният абзац, затова посетете сайтът на Драгомир Драганов, за повече информация за билети и за да чуете каквото всъщност ще чуете

След кратък спор с дизайнера ми дали може да се използва определен шрифт, реших да проверя колко и какви са шрифовете, които могат да се използват безопасно т.е. кои са най-широко разпространените в операционните системи. Най-често до сега съм използвал Verdana и Arial, но се оказа, че има приличен избор.

Не забравяайте, че за заглавия и за по-малки количества от текст, може спокойно да използвате и javascript алтернативи, като Facelift и sIFR.

Има метод, който работи без посочените горе проблеми. Метода се нарича ExternalInterface, а в посочената по долу таблица е описано, в кои browser-и работи.

Както вече споменах, метода се казва ExternalInterface и можете да прочетете повече за него, на официалната документация на Adobe.

С няколко думи за какво служи и как работи.

Предполагам, че на всеки, който се е занимавал малко или много с Flash му се е искало да използва регулярни изрази, но ActionScript не ги поддържа. Или искате да разберете какво се случва по страница, чрез ваша си собствена JavaScript функция? Или чисто и просто имате по-добри JavaScript отколкото ActionScript такива.

Които и отгорените случаи да имате ето какво трябва да направите.

Във actions панела, където описването събитията, импортирайте external библиотеката.

import flash.external.*;

Във следващият ред става магията:

ExternalInterface.call( “JavaScript функцията, която ви вълнува”, “Параметри разни” );

Трябва разбира се и във HTML документа да напишете функцията и какво точно ще прави, но това е бял кахър Публикувате си флаша и е готово.

В следващата статия ще разкажа и как се прави обратното, а именно да се извика ActionScript функция от JavaScript. Готино, нали?

По-късните фенове на Savatage, които са леко разочеровани от Poets & Madmen, първият албум на групата без вокалиста им Зак от дълги години, ще имат много поводи за радост с албума Watching in Silence – първият албум на групата на Стивънс. Всъщност това може да мине и за албум на Savatage, като се има впредвид, че клавиририста/вокалистa/композиторa на Savatage – Jon Oliva и китариста Chris Caffery също Savatage имат пръст в написването и на 10-те песни.

Тези нови песни звучат като песните на старите ни приятели – тъй като Стивънс е подбрал стегната банда от музиканти, които са повлияни от музиката на Savatage – използвайки гласовите техники, които Стивънс е научил през престоят си в Savatage, а именно нежното започване на песните с нежни вокали, които постепенно се увеличават докато достигнат своят бум ( Out of Reach ), влизайки в сложни контрапунктове ( Fields of Sorrow ) и изполвайки огнестрелно стакато, за да направи ефекти ( Forgiven ). Гласът на Стивенс, силен както никога до сега, може буквално да обикаля в кръг около този на Jon Oliva, които поема вокалите за Poets & Madmen.

Имайки впредвид музикантите, които са замесени в тази творба Watching In Silence, можем смело да заявим, че завръщането на един от най-драматичните метал вокалисти на всички времена, ще донесе на слушателите часове наслада.

01. Out Of Reach
02. Sea Of White
03. Into The Wind
04. Watching In Silence
05. Forgiven
06. Lies
07. Face To Face
08. Walls
09. The Circle
10. F.O.S. (Fields Of Sorrow)

За източник е използван Sea Оf Тranquility.

2005 – The Middle of Nowhere

След добрият старт с Watching in Silence, Circle II Circle издават техният втори албум – The Middle of Nowhere. Този албум е повлиян по-слабо от творчеството на Savatage ( за добро или лошо ). Композициите са по-добри от първите, за което огромно влияние оказва смяната на целият състав, без Закари. Не може да се отрече, че има много близко звучене с първият албум, но поне The Middle of Nowhere е по-личностен – има по-голям характер.

Със сигурност този албум е по-добър от първият. Записването и мастерирането са добри. Обложката не е лоша, класическа, но е ОК. Албумът е добър, но му липсва заряд, който да го изтреля от класически, към нещо нечувано досега.

01. In This Life
02. All That Remains
03. Open Season
04. Holding on
05. Cynical Ride
06. Hollow
07. Psycho Motor
08. Faces in the Dark
09. The Middle of Nowhere
10. Lost

2006 – Burden of Truth

Следвайки добрите отзиви от първите два албума Зак и компания намират нов начин да задоволят както феновете на Savatage така и да съберат нови такива. “Burden of Truth” е базиран на същите теми, както и доста популярната книга “The DaVinci Code” от Дан Браун – тъмната история на Йисус и Мария Магдалена. Ако не сте човек, който харесва концептуалните албуми то няма защо да се притеснявате – няма прекъсвания на песните, нито започване или свървашване със сух глас. Целият албум е с чиста метъл музика от началото до края, а посланието е закодирано дълбоко в текстовете на песните.

Трябва да се отбележи, че има огромно развитие от старите албуми до сега. Музиката е баланс между електрическа и акустична китара, а също така и клавири. Всичко си е намерило точното място, което прави разликата със старите албуми. Тук няма “запълвачи”, а всяка песен си е отделна сама за себе си, което е огромен плюс. Китаристите Пол Стюард и Андрю Лии трябва да бъдат поздравени за работата им тъй като и ритъм секцията и солата са великолепни. Двете отварящи песни ( Who Am I To Be, A Matter of Time ) са чудесен пример за тяхната брилянтност. Трябва ли да се споменава, че и тук Закари се е справил повече от добре?

Песните са много различни и всяка има какво да покаже. Очевидно е, че някои песни ще бъдат по-добри от други. Първите две и последните три са най-добрите от целият албум, а като че ли и от цялото творчество на Circle II Circle до сега. “Who Am I To Be” включва много акустични китари, което дава изключителната възможност да се покаже колко точно са добри вокалите. “Revelations” е тежка песен с брилянтни барабани, а заглавната песен ( Burden of Truth ) съдържа запазената марка на Зак – многослойните вокали. Текстовете са писани в екип и са много вдъхновяващи и смислени.

Както песните, така и продукцията е претърпяла голямо развитие от предишните албуми с изчистен звук където акустичната китара има същият заряд както и електрическите. Това е албума, които отделя Circle II Circle от Savatage и показва, че групата е намерила своят стил на музика.

01. Who Am I To Be?
02. Matter Of Time
03. Heal You
04. Revelations
05. Your Reality
06. Evermore
07. The Black
08. Messiah
09. Sentenced
10. Burden Of Truth
11. Live As One

2008 – Delusions of Grandeur

Поредният албум на Circle II Circle изпълнен с добри песни. Прави се кръстоска между европейсият и американският метъл, като се намират доста от прогресивните елементи на Savatage. Песен като “So many reasons” с големият и риф е пример за южноамерикански метъл, докато “Fatal Warning” показва европейското звучене – големи и силни двойно басови барабани и много комерсиален припев.  Това е чист хеви метъл с елементи на мелодични рифове и отлични вокали.

01. Fatal Warning
02. Dead Of Dawn
03. Forever
04. Echoes
05. Waiting
06. Soul Breaker
07. Seclusion
08. So Many Reasons
09. Chase The Lies
10. Every Last Thing
11. Stay

Б.а – След кратка битка със себе си между това да използвам професионалните ревюта на албума и да ги преведа на български или да използвам свои думи, то аз се спрях на първото. Ако използвах свои думи всичките щяха да имат “О, да. Велик албум. Най-добрият на Circle II Circle”.  Последните три  ревюта са взети от Мetal Storm, но съм съкратил голяма част от тях, тъй като авторите изполват изключително много личносто си мнение за албумите, а то не съвпада с моето

Всички искаме това!

Circle II Circle – Edge of Thorns

1. Изтеглете subversion и libapache2-svn

sudo apt-get install subversion libapache2-svn

2. Създайте хранилище ( repository )

sudo svnadmin create /svn

3. Направете си групата на апачето да е собственик на хранилището:

sudo chown -R www-data /svn
sudo chmod -R g+rws /svn

4. Отворете конфигурационният файл на webdav модула с любимият си редактор:

sudo nano /etc/apache2/mods-enabled/dav_svn.conf

5. Редактирайте го, така че да се получи:

<Location /svn>
DAV svn
SVNPath /svn
AuthType Basic
AuthName “Can’t touch this!”
AuthUserFile /etc/apache2/dav_svn.passwd
require valid-user

<LimitExcept GET PROPFIND OPTIONS REPORT>
Require valid-user
</LimitExcept>
</Location>

6. Направете си парола:

sudo htpasswd2 -cm /etc/apache2/dav_svn.passwd <username>

7. Рестартирайте апача:

sudo /etc/init.d/apache2 restart

8. Вече трябва да имате инсталиран SVN. При мен обаче се получи един проблем: “Could not open the requested SVN filesystem“. Това се оправя така:

8.1 – Копирайте двете библиоетеки: mod_dav_svn.so и mod_authz_svn.so ( ако не може да ги намерите изтеглете си tar.gz архива от http://subversion.tigris.org, разархиврайте и ги вземете от там ) в директорията с модулите на апача:  /usr/lib/apache2/modules

class A {

public function A1() {
// DB Query
}
public function A2() {
// DB Query
}
public function A3() {
// DB Query
}
}

class B extends A {

public function B() {
parent::__construct(); // Задавам нови насройки на базата
}
}

class C extends A {

public function B() {
parent::__construct(); // Задавам нови насройки на базата
}
}

class D extends A {

public function B() {
parent::__construct(); // Задавам нови насройки на базата
}
}

class E extends A {

public function B() {
parent::__construct(); // Задавам нови насройки на базата
}
}

$B = new B();
$B->A1();
$B->A2();
$B->A3();

$C = new C();
$C->A1();
$C->A2();
$C->A3();

$D = new D();
$D->A1();
$D->A2();
$D->A3();

$E = new E();
$E->A1();
$E->A2();
$E->A3();

Така всеки нов обект задава нови настройки за връзка с база данни и използва методие на родитеслкият клас за обработка на получените данни.

До тук добре. Всичко работи, но скоростта опрделено не е оптимизирана. Дванадесет заявки са много. Затова измислих следното решение. Добавих допълнителен метод в родетелският клас, който извлича всичките суми, чрез вътрешни заявки ( sub query / queries ), създава се  инициализиращ масив, а останалите методи ще обръщат към него. Да де, ама така излиза, че пак ще се правят 12 заявки, като този път ще са и по-сложни. И да и не. Тук идват на помощ статичните данни. Инициализираме един статичен масив във всеки от дъщерните класове, който ще предваме по референция. При извикването на метода, който извлича всичките данни ще се прави проверка, дали тези данни са вече записани в статичният метод – ако да използваме тях, ако не са – извличаме ги. Ето и примера:

class A {

public function A0( &$arr ) {
if( sizeof( $arr ) == 0 ) {
// Извлечи, обработи и запиши данните в $arr масива
}
return $arr;
}

public function A1() {
$a = $this->A0();
return $a['A1Result'];
}
public function A2() {
$a = $this->A0();
return $a['A2Result'];
}
public function A3() {
$a = $this->A0();
return $a['A3Result'];
}
}

class B extends A {

protected static $arr;

public function B() {
parent::__construct(); // Задавам нови насройки на базата
}

public function A0() {

return parent::A0( &$arr );
}
}

class C extends A {

protected static $arr;

public function B() {
parent::__construct(); // Задавам нови насройки на базата
}

public function A0() {

return parent::A0( &$arr );
}
}

//  Тук кодът продължава като първият пример

Ако нещо не сте разбрали или имате предложения – чувствайте се свободни да пишете коментари.