Постове 1 - 5 от 35 в категория Javascript

Като цяло тази седмица мина под знака на Rails 3, на който излезе бета версия.

Понеделник 01.02.2010

SafeBuffers and Rails 3.0 – в Rails 3 има вградена xss защита, и Yehuda Katz обяснява последните промени по тази система и защо са се наложили.

8 Chrome Extensions For Web Developers – Напоследък Firefox започва да се държи все по зле и леко да изостава от браузъри като Chrome и Safari. И докато в Safari все още ми липсват 2-3 малки неща, то Chrome може в много скоро време да стане предпочитания ми браузър.

Вторник 02.02.2010

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. За повече подробности самия пост и това видео.

Явно вторник е бил много “натоварен” ден.

Сряда 03.02.2010

YUI Theater — Douglas Crockford: “Crockford on JavaScript — Volume 1: The Early Years” – Когато Douglas Crockford, говори и Чък Норис слуша . В случая говори за история на JavaScript и програмните езици като цяло. Първите 10-15 са необичайно скучни. Главно защото говори за първите компютри и темата е повече насочена към хардуера от колкото към софтуера. Но после нещата се оправят.

Stop Being an Idiot – Колкото пъти сме се оправдавали с това че потребителите са “идиоти”, е време е да спрем.

Четвъртък 04.02.2010

The Rails Module (in Rails 3) -  Rails 3 идва с доста променен Rails module, в който има доста полезни методи. От тази статия може да се научат доста странични неща за Rails като цяло.

Също интересен факт е и че Basecamp стана на 6 години. Като един ден преди това стори и Facebook.  Което като се замисли човек е много странно съвпадение. Защото никои не може да се отрече че и двата продукта косвено или директно промениха мрежата.

Петък 05.02.2010

SD Ruby – Episode 077: Building Your Own Hosting Environment – това стои във readera ми от доста време, но чак в Петък имах време и повод да го гледам. Доста добро ми се стори и ако някои мисли сам да си хоста Rails приложенията ( и даже каквото и да е друго сам да си хоства) е много добра начална точка.

Преч седмица най-сетне намерих една от най-запомнящите реклами, който съм гледал (незнайно защо бях останал с впечатлението  че е за Ferrari, а тя била за Porsche ):

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

Понеделник 25.01.2010

Yehuda’s – evented programming with jQuery – това се явява като (макар и само косвено) продължение на Creating UI Elements With Low-Coupling And Conditional Event Handling, за което писах миналата седмица. Което за пореден път ми показва, че май javascript компонентите на там са се насочили.

In praise of git’s index – много добра статия за git index-ите.

Вторник 26.01.2010

The Path to Rails 3: Approaching the upgrade и rails-upgrade: Automating a portion of the Rails 3 upgrade process. Rails 3 е почти готов след малко повече от година разработка. И от където и да го погледнеш си е огромна стъпка на пред, даже няколко. В постовете се обяснява за проблеми и съвети при преминаването към Rails 3.

JRuby за Аndroid – време беше. Как ви се струва едно ruby приложение за телефон през JRuby за Android, през MacRuby за iPhone и … (не че някой ще ползва windows mobile), но IronRuby за Windows Мobile. Преди време си бях говорил с познати за такава идея и че на теория е възможно (а според тях на практика не). Но това е още една стъпка в тази посока. Въпреки че анатомиите на iPhone / Android приложенията са доста различни, все повече си мисля, че е възможно да стане нещо такова.

Answering Baranovskiy’s JavaScript quiz – Явно Вторник е бил доста мързелив ден.  Nicholas C. Zakas показва отговорите на js теста на Dmitry  Baranovskiy. Аз с радост мога да се похваля, че само за единия въпрос се подвоумих малко (на този с arguments[2] = 10).

Сряда 27.01.2010

Put that data-* attribute away, son…You might hurt someone – Dan Webb е страшно уважаван от мен дивелопър. Беше част от PrototypeJs Core и беше работил по един от първите Rails плъгини за Unobtrusive JavaScript. Да не говорим колко идеи почерпих от неговата LowPro за моя CD3.Behaviors.  За нещастие, доколкото разбрах, вече работи главно с jquery.

Но да се върнем на темата, че малко се отнесох. Тук той обяснява за data-атрибутите и че колкото и да са яки, не трябва да се използват прекомерно. Поста му се явява като отговор на Yehuda’s – evented programming with jQuery.

Четвъртък 28.01.2010

Emile.js talk (video & slides) – Thomas Fuchs обяснява неговия mini css animation framework – Emile.js. Който е само 51 реда (+ празните редове и Copyright-а ). Много полезно и абсолютно задължително за тези, които не искат цял живот само да ползват неща, които не разбират.

Why Arel – ActiveRecord 3.0 ( който е част от Rails 3 ) е изграден върху Аrel. Като наскоро  излезе и Active Record Query Interface 3.0. Но какво е Arel, ами Relational Algebra (и моята първа реакция като го чух беше – ЪЪъъ). В поста се обясняват мотивите за написването на Аrel. Важно е да се каже, че Arel е напълно отделно от Rails и може се ползва независимо.

The HTML 5 sandbox Attribute Improves iFrame Security – Една от критиките към html5 е, че не помага на този етап за сигурността на мрежата. Това е една малка стъпка напред. Жалко, че май никой не е чувал за <module> тага предложен от Douglas Crockford още в далечната вече 2006.

New ActionMailer API in Rails 3.0 – Голямото пренаписване в Rails 3 върви с пълни сили и сега ActionMailer си намери майстора. (Все пак май ActionMailer си е като недоносеното дете в Rails пакета).

Петък 29.01.2010

По-рано през седмицата Apple обявиха така дългоочаквания iPad. И общо взето никой не го харесва. Като за мен си е просто играчка. На който ако и бяха сложили просто MacOsX щяха да разбият всички, но такъв е живота. Общо взето в Петък имах много работа и нищо интересно не ми попадна. Само 2-3-4… статии за iPad. Всичките еднакви от една страна Apple хейтърите го нареждат от всякъде, Аpple феновете леко разочаровани, поради големите очаквания и само неутралните наблюдатели с положителни оценки (леко резервирани, но положителни като цяло).

Бонус

Седмицата беше много изморителна и затова нямах много време да си прегледам Google Reader-a (все още имам към 200 не прочетени статии). Затова чак днес видях серия от 3 поста от Amix, създателят на Todoist и Plurk, и първият блог, който започнах да следя.

• Comet with node.js and V8
• Comet (long polling) for all browsers using ScriptCommunicator
• Plurk: Instant conversations using Comet

Накрая ще сложа едно футболно клипче, на което попаднах тази седмица, за голове вкарани чрез отборна игра:

Наскоро в проект използвах Sortable от Script.aculo.us и имах следната html структура:

  <ul id="category_products">
    <li id="product_1"><a href="/product/1/edit"><img src="/products/1/thumb.png" /></a></li>
    <li id="product_2"><a href="/product/2/edit"><img src="/products/2/thumb.png" /></a></li>
    <li id="product_3"><a href="/product/2/edit"><img src="/products/3/thumb.png" /></a></li>
    <!-- ... и така нататък ... -->
  </ul>

Това е списък със снимки на продукти, които може да се подреждат с провлачване. Също така при натискане на снимката на продукта, се отваря страница за промяна му. И тук се появява проблем, когато потребителя провлачи някоя снимка за да и смени реда, се отваря страницата за промяна на продукта. Това е меко казано е досадно.

Защо става така?

Много просто. Самото drag&drop работи така – на mousedown събитие върху li. При mouseup събитие li-то се пуска. Но в същият момент се получава и click събитие, което идва от картинката към връзката a, защото тя реално си е била натисната. И затова се получава този неприятен ефект.

Как може да се оправи това?

В Script.aculo.us има един обект Draggables, който е помощен обект грижещ се за Draggable обектите. Каквито са и нашите li-та. Той подъжа обзървъри. Като един обзървър може да има следните методи:

• onStart – вика се, когато Draggable обект започне да се влачи
• onDrag – вика се, докато Draggable се мести
• onEnd – вика се след края на драгването

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

И така, аз си направих един мой обзървър – DisableLinksOnDragObserver (който ползва моя Event.delegate метод).

Това, което DisableLinksOnDragObserver прави е, че когато започне да се драгва някой елемент, се слага маркер drag, и с него индикира, че в момента има влачене. След като се приключи влаченето, маркерът се прави false (тук е важно да се отбележи използването на Function#defer). Същевременно при всяко натискане на a елемент, ако drag е true, спираме събитието.

  // начин на ползване
  Draggables.addObserver(new DisableLinksOnDragObserver('category_products'));

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

От много време не ми харесва как работя със key събития в javascript. Общо взето в по-голямата част от случаите  съм писал нещо такова:

document.observe('keyup', function(e){
	switch(e.keyCode || e.charCode){
		case Event.KEY_UP:		up();		break;
		case Event.KEY_DOWN:	down();		break;
		case Event.KEY_RIGHT:	right();	break;
		case Event.KEY_LEFT:	left();		break;
		case Event.KEY_SPACE:	fire();		break;
	}
});

Което е меко казано досадно и затова реших да направя нещо по въпроса. Реших да използвам custom събитията на Prototype.js, на които ставам все по-голям фен в последно време. И така, взех нормалните key събития – keyup / keydown / keyup и към тях добавих натиснатия бутон. Като за сега се поддържат – backspace, tab, return, esc, left, up, right, down, delete, home, end, pageup, pagedown, insert. И така горния код става така:

document.observe('keyup:up',	up);
document.observe('keyup:down',	down);
document.observe('keyup:right',	right);
document.observe('keyup:left',	left);
document.observe('keyup:space',	fire);

Кey custom събитията може да намерите тук. Ето и 2 малки демонстрации на това как работят – test1 и test2. Също така и в моя javascript playground в github ги има.

За момента само на Firefox и Safari съм ги пробвал, защото за тях ми трябваха. Но не виждам причина да не работят и под други браузъри.

Ако някои има идеи и предложения как това може да се подобри, ще се радвам да ги чуя

п.п. Докато работех с keypress, разбрах че имало проблем със keypress в Safari, за повече информация – http://ejohn.org/blog/keypress-in-safari-31/

Преди малко по-малко от година в един пост озаглавен “Малко JavaScript refactoring“, бях описал как работи прост таб панел. Части от него използвам и до сега. Но е време за промяна.

Това което не ми допада в тогавашната версия е, че когато в страницата се добавя нов таб панел трябва да се вика отново TabPanel. А ако трябва да се трие нещата стават доста сложни. Също така и добавянето и/или изтриването на табчета става доста трудно. Затова реших да напиша нещо малко по-бързо и по-лесно.

В последните ми няколко проекта по които работя, ще поддържат само Firefox 3.5 и Safari 4, и  нагоре. Браузъри като IE (6/7/8) и даже Opera, въобще не влизат в картинката. Това ми дава възможност да се насладя на работата със html5 / css3. Затова структурата на един таб панел изглежда така:

<div class="tab_panel">
	<nav>
		<ul>
			<li class="tab selected">tab 1</li>
			<li class="tab">tab 2</li>
			<li class="tab">tab 3</li>
		</ul>
	</nav>
	<section></section>
	<section style="display: none;"></section>
	<section style="display: none;"></section>
</div>

А javascript, който задвижва нещата е:

function changeTab(){
	this.up('.tab_panel').select('section').invoke('hide')[this.previousSiblings('.tab').length].show();
	this.up().select('.selected').invoke('removeClassName', 'selected');
	this.addClassName('selected');
}
document.delegate('.tab_panel .tab', 'click', changeTab);

Как работи кода?

Под ‘this’ се има предвид избрания таб. На ред първи, се “качваме” до елемента, съдържащ таб панела и крием всички ’section’ елементи. И след това показваме само избрания от нас елемент. Като this.previousSiblings(‘.tab’).length, ни връща колко таб бутна има преди избрания таб, което е и индекса на избрания елемент.
На втори ред.  Просто избирам всички елементи който имат клас “selected” (което отбелязва кое е избрания таб) и махам този клас от тях. Тук само искам да отбележа, че бих могъл да ползвам Element.down и после само Element.removeClassName на един елемент. Но съм предпочел да взема малко по “jquery” решение на въпроса.
И третия последен ред е просто слага ’selected’ клас на избрания таб, маркирайки го като активен.

И след това моят Event.delegate, слуша за натискания на таб бутна и след това просто стартира changeTab.

На фокус

До преди няколко дни използвах този код при click събитие, но напоследък след по-голямото популяризиране на focus:in/focus:out и атрибута tabindex реших и да пробвам нещо малко “по-нестандартно” и така да направя таб панела достъпен и чрез “tab” бутона.

<div class="tab_panel">
	<nav>
		<ul>
			<li class="tab selected" tabindex="1">tab 1</li>
			<li class="tab" tabindex="2">tab 2</li>
			<li class="tab" tabindex="3">tab 3</li>
		</ul>
	</nav>
	<section></section>
	<section style="display: none;"></section>
	<section style="display: none;"></section>
</div>

function changeTab(){
	this.up('.tab_panel').select('section').invoke('hide')[this.previousSiblings('.tab').length].show();
	this.up().select('.selected').invoke('removeClassName', 'selected');
	this.addClassName('selected');
}
document.delegate('.tab_panel .tab', 'focus:in', changeTab);

Най-хубавото тук е че ‘click’ не ни трябва защото при натискане на елемент-а focus събитието се изстрелва така или иначе. Също така ако не искате се чудите за tabindex-а в какъв ред да е, просто може да се сложи навсякъде да е 1.

Примерен таб панел съм качил тук. Той изисква 2 неща (освен Prototype.js) – Event.delegate и focus:in.

За момента съм го тествал само в Firefox 3.5 / Safari4  и работи страхотно. За другите браузъри не би трябвало да има проблеми, но ако някои има проблеми с удоволствие бих помогнал.