4 поста с таг JQuery

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

Понеделник 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

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

Преди една година (ехе толкова ли много време мина от тогава) бях започнал да пиша за интересни неща, които съм видял през изминала седмица и които според мен не са получили подобаващото им се медийно представяне. Само че с времето спрях тази традиция, още преди да се превърне в такава даже. Но тъй като съм решил тази година да отделям малко повече на блога. Ще започвам да по съживявам някои стари идеи и да видим какво ще стане

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

Понеделник 18.01.2010

A successful Git branching model – От доста време вече ползвам само git и съм супер доволен от него. Въпреки това все още ползвам само една малка част от възможностите му.  Затова този пост ми беше много полезен.

Jemini – В Понеделник попаднах и на Jamini това е (J)Ruby famework за правене на игри. Нещо което ми беше мечта когато за пръв път започнах да пиша код.

Вторник 19.01.2010

Creating UI Elements With Low-Coupling And Conditional Event Handling – Не използвам jQuery, но понякога от там излизат доста полезни неща. Този пост на Ben Nadel като цяло е много полезен. Основната идея да се използва нещо като MCV и event архитектура и така да се правят компоненти които взаимодействат по между си, но без да знаят, че го правят. Като от личен опит мога да кажа, че правенето на компоненти които взаимодействат само с custom event-и по между си е страшно яко.

За развитие на темата бих препоръчал и да се гледа Satyen Desai — A Widget Walkthrough, от yahoo винаги са правили страхотни видеота.

Cappuccino On Rails – това не е от Вторник, но тогава го видях. А Cappuccino ( и  SproutCore ) са два проекта, който следя с особен интерес. Още повече интеграцията им с Ruby става все по-лесна

Сряда 20.01.2010

Stanford’s Entrepreneurship Corner: David Heinemeier Hansson -  От Stanford Entrepreneurship Corner винаги са вадили интересни материали ( все пак са Stanford ). Забавно беше и началото, един монотонен глас съобщи – “Този запис, може да съдържа език не подходящ за всеки”

Интересно беше да го слушаш това и да учиш за поредния безсмислен изпит.

Четвъртък 21.01.2010

Четвъртък го прескочих, все пак учих за изпит, или поне се опитвах. Въпреки това:

Firefox 3.6 is here! – новата версия е тук. Като потребител това което ми харесва е че се усеща колко по-бърза. Също така все повече почва да свиквам с това че като дадеш “open in new tab”  табулацията се отваря до сегашния ти там. Като разработчик няма как да не се зарадвам на CSS3 градиентите, Drag and Drop и File API -то.

Петък 22.01.2010

Fusebox – jdalton направи серия от четири видеота за това какво представляват sandboxed natives и как той ги е реализирал. Като в края на седмицата пусна и самия Fusebox, което е част от от FuseJs, за която все още няма много информация освен че скоро ще се появи. И като гледам списъка с хората които работят ще е нещо добро.

И на края искам да сложа едно видео на Louis CK – “Everythings amazing nobody is happy” ( което го видях от презентацията на Dion Almaer от JSConf – Future of the Web )

Преди 2 дни видях в Ajaxian – A simple solution to the “other” problem with select boxes, което представлява решение на “другия” проблем, както би се превело буквално. Всъщносто там е представен jquery код с който когато от даден html select избереш “друг(other)” ти се появява input поленце където да кажеш какво точно е това другото. Вижте демо-то, защото май не го обясних добре.

Като идея е добре, но нещо jquery кода не ми се вижда много читав:

$(document).ready( function () {
	$('.leader').each( function () {
		var name = $(this).attr('name');
		if ($(this).val()!='other') {
			$(this).next().removeAttr('name').hide();
		 }
	});

	$('.leader').change(onChange);

	function onChange(){
		var desiredName = $(this).attr('name');
		if ($('#'+desiredName).val()=='other') {
			$('#'+desiredName).next().attr('name',desiredName).fadeIn('fast');
		} else {
			$('#'+desiredName).next().removeAttr('name').fadeOut('fast');
		}
	}
});

Много бях изненадан, че това стигна до Ajaxian (въпреки че доста са свалили летвата напоследък). В този код има няколко неща, които не ми харесват:

1. 2 пъти прави почти едно и също,  избира всичките елементи с клас “leader” и проверява дали е избрана като стойност “other”, за да покаже/скрие следващия елемент.
2. 2 пъти прави $(‘.leader’), като явно е забравил, че едно от най-яките неща в jquery e changing-a. Спокойно е можел да направи просто $(‘.leader).each( … ).change( … )
3. на 3тия ред ( var name = $(this).attr(‘name’) ), защо го има това и какво прави така и не разбрах, никъде в този scope не ползва name променливата, а и аз лично бих ползвал getAttribute за извличане на атрибута.
4. в each-a се вика 3 пъти $() за един и същ елемент ( this в случая), по-добре е добре да се вземе jQuery инстанцията и да се запише в променлива – ще бъде доста по-бързо, когато се ползва.
5. аз лично нямаше да сложа скобите на if-a в each-a, защото когато се пише javascript всеки байт е важен
6. така и не ми стана ясно защо декларира функция onChange като може да ползва директно анонимна функция при $(‘.leader’).change( … ).
7. тук добре е направил, че е взел desiredName и го сложил в променлива, но ако някой ми каже защо при положение, че има this му трябва цели 3 пъти да вика jquery css selector с #id (и даже да не го записва в поменлива) ?!?
8. малко ме подразниха и излишните празни редове и разстояния

Това са горе долу лошите неща, които видях, въпреки че не пиша много jquery код ми се струва че ако напише кода по този начин ще е доста по-добре:

$(document).ready(function(){
	$('.leader').change(function(
		var select = $(this);
		if(select.val() == 'other')
			select.next().attr('name', select.getAttribute('name')).fadeIn('fast');
		else
			select.next().removeAttr('name').fadeOut('fast');
	)).triggerHandler('change');
});

естествено и моята версия не е перфектна, даже davecardwell е написал доста по-добра версия.  Даже John-David Dalton е направил и Prototype версия : http://pastie.org/255119, от която най-много ми хареса допълнението на Element.fire, която я очаквам в новата версия на Prototype

п.п. Някои хора виждат и проблем, че само при стойност “other” се появява полето “други” и ако имаш два или повече езика би било проблем. Обаче аз виждам нещата така – това би бил селекта за български език например:

<select name="language">
	<option>Български</option>
	<option>Английски</option>
	<option value="other">Друг ...</option>
</select>

т.е. value може и да е “other” но за потребителя да е всеки избран език

Наскоро ми се наложи в едни проект да има малко каре където се сменят през определен период от време няколко div елемента. По принцип съм фен на Prototype, но за този проект това щеше да е всичкия JavaScript и малко безсмислено ми се виждаше да слагам целия Prototype. И затова реших да пробвам йQuery, която е доста популярна напоследък. И затова, написах това парченце код, целта беше да е малко, затова е малко неразбираемо.

$(document).ready(function(){
	var interval = setInterval(function(){
		var next = $('#news .current').css('display', 'none').removeClass('current').next();
		(next.length  ? next : $('#news .article').eq(0))
			.css('display', 'block').addClass('current');
	}, 5000);
});

Синтаксиса е на JQuery е доста интересен и лесно се свиква с него, въпреки че има 2-3 места където се различава от Prototype.

След като направи JQuery версията си викам: “Я да видим колко ще е различна Prototype версията “, и написах това:

document.observe('dom:loaded', function(){
	new PeriodicalExecuter(function(){
		var news = $('news');
		(news.down('.current').hide().removeClassName('current').next() || news.down('.article'))
			.show().addClassName('current');
	}, 5);
});

Няма голяма разлика като PeriodicalExecuter можи да си е прост setInterval. Разликите който усетих най-осезателно са че JQuery обекта е колекция от обекти и всички операции който се правят се правят за колекцията. Докато Prototype просто допълва native обектите и прави кода да изглежда като все едно се работи със стандартното API на JS.

Кое ви се вижда по-нормално според мен е въпрос на навик и стил.

p.s. Тази статия от Дъстин Диаз, доста добре нагледно показва как работи JQuery от вътре. Въпреки че статията не за jquery, основния принцип на работа на jquery е подобен (До колкото знам).