Във Сряда някъде след 19 часа във VarnaLab ще говоря за Backbone.js. Входа е свободен.
Презенатация ще е от две части. Първо ще има кратко представяне какво е Backbone.js и как може да направи живота ни по-лесен и приятен. И втората част ще е live-coding на някакво примерно приложение.
В Събота и Неделя в бизнес център Интерпред в София ще се проведе 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 едно че не е свикнал да вижда добре работещи ефекти, две че и не заслужава такива неща.
Като цяло тази седмица мина под знака на Rails 3, на който излезе бета версия.
SafeBuffers and Rails 3.0 – в Rails 3 има вградена xss защита, и Yehuda Katz обяснява последните промени по тази система и защо са се наложили.
8 Chrome Extensions For Web Developers – Напоследък Firefox започва да се държи все по зле и леко да изостава от браузъри като Chrome и Safari. И докато в Safari все още ми липсват 2-3 малки неща, то Chrome може в много скоро време да стане предпочитания ми браузър.
Google Apps Drop IE6 Support – Е време беше. След скорошната атака срещу Google извършена с IE6, Google решиха да дръпнат шалтера на това нещо. В Германия вече го забраниха, така че още малко живот му остава. И усещам как скоро ще се вдигнем мерника към IE7.
One-click Minifier Gadget (OMG) – initial checkin – Българското Yahoo! гуру Стоян Стефанов пусна много полезен инструмент за минимизиране. Кода го има в github. ( Статията е от 31 Януари, но чак във Вторник я видях )
Basic Cappuccino Tutorial - Добър на урок за Cappuccino. Което е добре защото, един от най-големите проблеми на Cappuccino, според мен, е липсата на добра документация и уроци.
How Internet Explorer 8 document mode affects JavaScript – Оказва се че в IE8 имало доста промени по самия JavaScript. Nicholas C. Zakas разяснява голяма част от тях.
The touch action – В България до голяма степен сме 1-2 години назад в IT отношение. Така че е доста лесно да се предскаже че в следващите години и у нас както навън ще навлязат все повече “умни телефони” и особено такива с touch screen (то май всички са такива). Затова е важно да се знае как може да се работи със touch събитието. В Quirksmode имаше цяла серия за тези събития през седмицата.
an HTML5 offline image editor and uploader application – Наскоро започнах да правя първите залежи за новата ни cms система ControlDepo 4. И мисля в нея да вградя нещото такова в една или друга степен.
HipHop for PHP: Move Fast – Това беше новината на деня. Facebook пуснаха HipHop, което компилира (или по-точно трансформира) PHP кода до оптимизиран C++ код, който след това се компилира с g++. От което е излишно да казвам какви са ползите като скорост и CPU. За повече подробности самия пост и това видео.
Явно вторник е бил много “натоварен” ден. 
YUI Theater — Douglas Crockford: “Crockford on JavaScript — Volume 1: The Early Years” – Когато Douglas Crockford, говори и Чък Норис слуша . В случая говори за история на JavaScript и програмните езици като цяло. Първите 10-15 са необичайно скучни. Главно защото говори за първите компютри и темата е повече насочена към хардуера от колкото към софтуера. Но после нещата се оправят.
Stop Being an Idiot – Колкото пъти сме се оправдавали с това че потребителите са “идиоти”, е време е да спрем.
The Rails Module (in Rails 3) - Rails 3 идва с доста променен Rails module, в който има доста полезни методи. От тази статия може да се научат доста странични неща за Rails като цяло.
Също интересен факт е и че Basecamp стана на 6 години. Като един ден преди това стори и Facebook. Което като се замисли човек е много странно съвпадение. Защото никои не може да се отрече че и двата продукта косвено или директно промениха мрежата.
SD Ruby – Episode 077: Building Your Own Hosting Environment – това стои във readera ми от доста време, но чак в Петък имах време и повод да го гледам. Доста добро ми се стори и ако някои мисли сам да си хоста Rails приложенията ( и даже каквото и да е друго сам да си хоства) е много добра начална точка.
Преч седмица най-сетне намерих една от най-запомнящите реклами, който съм гледал (незнайно защо бях останал с впечатлението че е за Ferrari, а тя била за Porsche ):
