Във Сряда някъде след 19 часа във VarnaLab ще говоря за Backbone.js. Входа е свободен.
Презенатация ще е от две части. Първо ще има кратко представяне какво е Backbone.js и как може да направи живота ни по-лесен и приятен. И втората част ще е live-coding на някакво примерно приложение.
Измина и 2010 година, като цяло това не беше много добра година (като изключим първия и последния месец от нея). Затова се радвам че свърши.
Въпреки, че смятам тази година за не много успешна, в професионално отношение напреднах доста. И там като цяло се случиха доста хубави неща като:
Едно от многото неща, които не можах да направя през годината, бе да по-съживя блога. Но както казват хората нова година – нов късмет. Мисля от догодина да отделям повече време на NeXt.
Също така започвам да блогвам на английски.
От една страна имам нужда да си оправя английския, и в това виждам добър “повод”. Също така доста пъти, са ми се включвали хора които не знаят български да ме разпитват за някои постове. Kоито само по кода в тях им са се сторили интересни. От друга страна, нещата за които пиша, който се интересува от тях трябва да знае английски така или иначе.
В Събота и Неделя в бизнес център Интерпред в София ще се проведе OpenFest 2010. Входа е свободен.
Това което ме радва, освен че със страшно много хора най-сетне ще се запозная на “живо”, е и че ще имам презентация там.
Темата е “JavaScript event-driven architecture”. Тя ще е от 12:15 – 13:00 в Събота в зала София.
Ще се радвам да ви видя там.
Предполагам всички сте чували за Raphael (ако не сте ви препоръчвам това видео, както и да видите демотата на сайта). Наскоро все по-често започнах да използвам svg чрез Raphael, вместо flash, и резултатите поне до този момент са просто страхотни. Svg като технология я има от сумати време, въпреки че доста хора я слагат в графата на HTML5. Което не е много правилно.
В един svg файл има страшно много информация, но реално поне на този етап това което ме интересува от него са така наречените path-вете, който грубо казано са нещо такова:
"m 582.90435,347.34481 -0.875,0.99993 -0.625,1.18741 -0.49999,1.2499 -0.25,1.43739 -0.125,1.3749 0.0625,1.56238 0.1875,1.62488 0.43749,1.81237 0,0.62495 -0.37499,0.49996 -28.37474,18.87358 -0.375,0.125 -0.3125,0 -0.93749,-0.0625 -0.81249,0.0625 -0.81249,0.18748 -0.6875,0.43747 -0.68749,0.43747 -0.625,0.68744 -0.56249,0.81244 -0.4375,0.99993 -0.56249,1.18741 -0.5,1.3749 -0.43749,1.49988 -0.3125,1.68738 -0.375,1.81236 -0.24999,1.99985 -0.1875,2.18734 -0.125,2.37482 0,0.0625 0,0.18748 0,0.12499 -0.1875,1.93736 0,2.06234 3.12497,0.18749 1.49999,0.18749 1.49998,0.31247 2.81248,0.68745 1.31249,0.43747 1.37498,0.56246 1.74999,0.62495 1.68748,0.81244 1.56249,0.87493 1.49998,1.06242 1.37499,1.06242 1.31249,1.24991 1.18749,1.3124 1.12499,1.43739 1.125,1.68738 0.99999,1.93735 6.99993,0 0.24999,0 0.3125,0.18749 2.37499,1.87486 1.18749,0.87493 1.24999,0.93743 4.87495,3.49974 4.87496,3.12476 4.87495,2.99978 2.62498,0.74995 1.31249,0.24997 1.37498,0.18748 1.24999,0.0625 1.37499,0 1.31249,-0.12499 1.37499,-0.12499 1.24999,-0.31247 1.24998,-0.37498 1.24999,-0.43746 1.37499,-0.49997 1.24999,-0.62495 1.24999,-0.68745 1.24999,-0.81244 1.31248,-0.87493 0.25,-0.18749 0.4375,0 0.31249,0.12499 0.375,0.24999 9.18742,10.24922 0.62499,-0.31247 0.625,-0.24999 1.18749,-0.49996 0.0625,-0.12499 0.125,-0.0625 0.25,-0.125 0.5,-0.24997 0.0625,-0.12499 0.12499,-0.0625 0.25,-0.12499 0.4375,-0.24998 0.3125,-0.37498 0.12499,-0.18748 0.1875,-0.12499 0.5625,-0.62496 0.125,-0.37497 0,-0.12499 0,-0.0625 0.0625,0 0.12499,-0.12499 0.25,-0.62496 0.0625,-0.43746 0.25,-0.18749 0.25,-0.18749 0.31249,-0.0625 15.31236,-1.3749 0.375,0.0625 0.74999,0.12499 0.375,0.0625 0.4375,0.12499 1.49998,0.37498 0.6875,0.12499 0.74999,0.18748 1.37499,0.37497 0.25,0 0.12499,0 0.0625,0 0.125,0.0625 0.625,0.12499 1.18749,0.24998 0.49999,0.0625 0.5625,0.12499 0.99999,0.24997 0.56249,0 0.25,0 0.125,0 0.0625,0 0.125,0.0625 0.87499,0.12499 0.25,0 0.24999,0.0625 0.1875,0 0.125,0.0625 0.1875,-0.31247 0.4375,-0.18749 0.62499,-0.31247 0.62499,-0.37498 1.24999,-0.99992 0.625,-0.62495 0.62499,-0.68745 1.24999,-1.62488 1.12499,-1.99985 1.24999,-2.24983 1.12499,-2.6248 0.25,-0.74994 0.125,-0.37498 0.0625,-0.18748 0.125,-0.12499 0.625,-1.43739 -0.125,-6.56201 -0.125,-3.18726 0,-2.93728 -0.25,-5.68708 -0.125,-2.68729 -0.125,-2.56231 -0.24999,-2.56231 -0.1875,-2.37482 -0.25,-2.31233 -0.1875,-2.18733 -0.31249,-2.12484 -0.25,-1.93736 -0.3125,-1.93735 -0.25,-1.74987 -0.43749,-1.49989 -0.4375,-1.3124 -0.56249,-1.24991 -0.6875,-1.12491 -0.87499,-1.12492 -0.93749,-0.93743 -1.06249,-0.93743 -1.18749,-0.74994 -0.0625,0 -0.81249,-0.37497 -0.93749,-0.31248 -1.06249,-0.24998 -1.06249,-0.18749 -1.24999,-0.24998 -1.31249,-0.12499 -1.43749,-0.12499 -1.49998,-0.0625 -1.68749,-0.12499 -1.74998,-0.0625 -1.87499,0 -1.93748,0 -2.06248,0 -2.18748,0.0625 -2.24998,0.12499 -2.31248,0.12499 -4.06246,0.24998 -3.81247,0 -3.68746,-0.24998 -3.43747,-0.37497 -3.31247,-0.68745 -3.06247,-0.87493 -1.49999,-0.56246 -1.37499,-0.56246 -1.37498,-0.68745 -1.24999,-0.68745 -2.56248,-1.62487 -2.31248,-1.87486 -1.12499,-1.06242 -0.99999,-1.06242 -0.99999,-1.12492 -0.87499,-1.12491 -0.93749,-1.31241 -0.8125,-1.3124 -0.81249,-1.37489 -0.68749,-1.3749 -0.75,-1.49989 -0.62499,-1.49989 -0.62499,-1.62487 -0.5,-1.62488 -2.49998,0.37497 -2.24998,0.56246 -2.06248,0.56246 -1.81248,0.81244 -1.68749,0.81243 -1.43748,0.99993 -1.3125,1.06242 -0.99999,1.18741 z"
Красота нали (ей такива неща ни изкарват лошо име на разработчиците, но това е друга тема) ?
Та дизайнера ми дава един svg файл със 60-70 такива path-a и аз трябва да ги вградя в сайта. Както и сами се досещате се налагат промени, за което се изисква да се подава нов файл с променените path-ве. Защото няма как да се променят директно (или не познавам някой който може да го направи).
Path-вете поне до сега съм ги ползвал в два формата:
И вече с Raphael ги обхождам и правя това което ми трябва. Като това обръщане ми трябва да го правя доста често затова за удобство си направих две Rake задачи:
rake svg2js:array from=some.svg to=svg_data_in_array.js rake svg2js:object from=some.svg to=svg_data_object.js
Като ето го и кода на самите задачи в gist – http://gist.github.com/618608
Тези двете сигурно са ми спестили часове излишна работата, надявам се и на вас да са ви полезни.
п.п. И един допълнителен съвет, ако svg-то което ползвате в сайта е изместено спрямо подадения svg файл проверете дали нямате наложена матрица.
Наскоро прочетох – “A couple of interesting UI techniques at Flickr” от Signal vs Noise. И особенно ми хареса номера с използването на unicode за визуализирането на стрелки. Като винаги ме е дразнело това че трябва да се прибягва до картинки за елементарни неща. Напоследък гледам да избягвам колкото мога използването на каквито и да е било картинки. Малко съм улеснен от това че там където ми се налга да пиша CSS не се налага да се подържа нито едно IE, така че мога да се възползвам от неща като border-radius / box-shadow / text-shadow / gradients и други.
Но да се върна на темата. По принцип за това за което yahoo са ползвали стрелката аз ползвам този номер – “iPhone back button“. Обаче веднага след като видях това за unicode – ▲ (буквално след 5 мин) вече му намерих първото приложение. Заменяйки цели 3 картинки (normal / hover / active ) за един бутон.
Малко по късно използвах тази техника и за нещо за което си мисля от доста време. Когато се отвори папка стрелкичката с ефект да се завърти от една до друга позиция. Това сега става изключтелно лесно само чрез
.arrow {
/* цвят и размерите на бутона, както и вертикално как да се разположи */
font-size: 10px;
color: #000;
vertical-align: 2px;
/* без подчертаване и outline */
text-decoration: none;
outline: none;
/* това е важно зада може да трансформираме елемента */
display: inline-block;
/* завърти стрелката на 90 градуса */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
/*
това мисля че не се потдъжа от никой още,
но много скоро мисля че стане стандарт
*/
transform: rotate(90deg);
/* анимирай всички промени по стрелката за 0.3 секунди */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
/*
тъй като не искам да пиша в кода си unicode синволи,
е по-добре да се добави автоматично от css
*/
.arrow:after {
content: "▲";
}
/*
когато е отворена стрелката тя се завърта на 180 градуса
*/
.arrow.opened {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
За задействането на ефекта е необходимо само да се сложи или премахне клас “opened” от “.аrrow” елемент. Това ще работи при Chrome, Safari, Opera и Firefox. Като само при Firefox за ефектите ще се почака малко.
Ето и 2 примерни JavaScript кода за стрелките с Prototype и jQuery (който са “доста” подобни):
// Prototype
document.on('click', '.arrow', function(e, element){
e.preventDefault();
element.toggleClassName('opened');
});
// jQuery
$('a.arrow').live('click', function(e){
e.preventDefault();
$(this).toggleClass('opened');
});
Ето и примерен arrows.html
Тук може да се сложат :hover , :focus, :active където примерно да се сменя цвета на бутона или сянката. И това ще става анимирано по презумция. И няма да се налага да се ходи до Photoshop, после да се генерират sprite-тове (между другото за тяхното генериране, мисля скоро ще open-source-на едно мое tool-че за работа с тях) и да се позиционират при най-малките промени.
Комбинациятата от unicode синволи и CSS3 е страшно мощна. И може да елиминира 2 от най-големите причини за “бавни” сайтове – ненужни картинки и javascript за ефекти.
Аз имам късмет че там където правя такива неща не се подържа IE и просто мога да кажа че си е цял рай. Особенно хубавото на css ефектите е че не трябва да се грижите за конфликти в анимцията и други дребни промени. Още повече в много Java Script код съм виждал излишно много писаници за ефекти, вместо да Java Script да се грижи само за логиката.
Ако някой има идей и предложение по темата ще се радвам да ги чуя, тъй като това е доста нова територия.
п.п. Ако ви трябва и за IE да работи, аз лично бих направил отделен файл ie-only.css и там бих ползвал картинки (няма как) и не бих правил ефектите. Който ползва IE едно че не е свикнал да вижда добре работещи ефекти, две че и не заслужава такива неща.
