Sep 19

Сутринта видях това в builderau.com:

Firefox 3.1 Alpha 2 developer features

Тук става дума за новите неща в Firefox 3.1, която се очаква съвсем скоро да излезе. Основните функции които се споменават тук са:

  • Web worker threads - най-важното от всички, според мен. Това че по-тежките javascript действия, ще бъдат отделени в нова нишка, е страхотно. И май в скоро време Firefox, може да последва примера на Google Chrome.
  • HTML5 Video tag -  добре е че все повече браузъри почват да го поддържат и дано до 1-2 години да може да спокойно да се ползва в production сайтове.
  • CSS2.1 селектори ::before ::after - Страхотно е че ги има тези двете вече, защото във internal нещата, които ползвам работят само под Firefox така че тези ще са полезни
  • CSS3 атрибути -moz-border-image, Word-wrap, Text-shadow, box-shadow and column rule

Като цяло си мисля само, че web work threads и TraceMonkey, за който  John Resign доста говори напоследък, са нещата които могат да бъдат използвани от developer-ите още сега. А пък поддръжката на CSS2.1/CSS3/HTML5 е важна в дългосрочен план, защото колкото повече браузъри вградят тези технологии, толкова по бързо ще може наистина да ги използваме.

Sep 15

Днес ми се наложи да направя нещо такова:


function action(){ /* ... code ... */ };
$(element).observe('click', action);
action.call($(element));

да декларираш функция която да се извика само един път, и при това, че я има като event-handler, е нещо, което винаги съм мразил да правя.
Но за щастие се сетих за “The “other” problem”, и по точно за тази част от поста:

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

Така че само с това малко парче код:


Element.addMethods({
	fire: Event.fire.wrap(function(proceed, element, eventName, memo) {
		element = $(element);
		var w, event, eventID;
		// ако eventName е например "click mouseover custom:event",
		// ще се симулират деиствията: click mouseover custom:event
		$w(eventName)._each(function(name) {
			// просто ако диствието е custom:event
			// си се вика нормалния Еvent.fire
			if (name.include(':'))
				return proceed(element, name, memo);

			// тук е първо се взема eventID-то на елемента
			// после ако е имало такова eventID се вземат event.cache всичките
			// event handle-и за този event
			eventID = (element._prototypeEventID || [null])[0];
			if (!eventID || !(w = Event.cache[eventID][name])) return false;

			// просто се прави "лъжлив" event обект
			event = Event.extend({ });
			event.eventName = name;
			event.memo = memo || { };

			// извикват се event handle-и
			w._each(function(wrapper) { wrapper(event) });
		});
		return element;
	})
});

Горния проблем се решава просто така:


$(element).observe('click', function action(){ /* ... code ... */ }).fire('click');

Което освен, че е по-кратко, е и по-красиво. / За по-разбираемо, не знам, защото аз си го разбирам де :) /

Sep 09

/ Много лошо заглавие но не измислих по-добро, ако някои се сети да каже, веднага го сменям /

BGDev е интересно място, преди години го следих, но нито имаше какво да питам, нито какво да отговарям. Затова въпреки че имам регистрация от 11.05.04 имам само 142 поста(0.1 на ден). Имаше период в който беше в Feed Reader-a ми и доста редовно го следях, но сега само от дъжд на вятър минавам през форума и главно гледам на главната страница дали има нещо интересно за четене.

Та днес видях една “стандартна” тема за Нов Български университет и както винаги темата се измести от Нов Български на Софийски - Технически университети, нивото на българското образование, трябва ли математика да се учи за да станеш добър програмист и т.н. Както винаги става с подобни теми в последните години (или поне в тези който аз съм виждал). Ох, да линка да дам:

Нов български университет

Общо взето доста далече съм от София и нямам голямо желание да участвам във поредните сплетни.

Това което ми направи впечатление беше един случаен линк:

http://www.fmi.uni-sofia.bg/id-08-09-zimen ( ФМИ: Изборни дисциплини 08/09, зимен семестър )

От чисто любопитство исках да видя какво учат в Софийския университет, все пак те трябва да са най-добре подготвените в България.

На слуки натиснах първия линк който видях. Връзката, която имаше късмета да бъде избрана беше - “Езици и среди за програмиране и разработка в Интернет, доц. П. Павлов” (често така беше, съвсем случайно я избрах) и тя водеше до:

http://www.fmi.uni-sofia.bg/eleten/47.pdf

И си викам: Еи, моята специалитет ;)
Чета:

1. Интернет. Основни информационни услуги. Браузери. Машини за търсене на информация. 2. Езикът HTML. Структура на HTML документ. Елементи в секция HEAD. 3. Елементи в секция BODY. Управление на текстовия поток. Списъци. 4. Хипервръзки. Графика. Таблици. 5. Формуляри. Фреймове. 6. Независима каскада от стилови формати. 7. JavaScript. Типове данни. Оператор за присвояване.Операции и изрази. 8. Условен оператор. Оператори за цикъл. 9. Функции в JavaScript. 10. Обекти в JavaScript. Масиви. Обект Date, Math, document, Window, navigator. 11. Събития в JavaScript.

Викам си: Е нищо ново стандартни приказки, сигурно от 10 години седи като текст (нямах си и представа, колко съм бил прав)
И после видях:

Препоръчана литература:
1. Маджаров, И., Интернет за персонален компютър. София, 1997
2. Как да си направим лична Web страница, като използваме HTML. София, 1997
3. Дончева, Р., Програмиране в Интернет. Част I- HTML. София, 1998
4. Дончева, Р., Програмиране в Интернет. Част II - JavaScript. София, 1999

Честно щях да падна от стола!
Първите 3 книжки не ги знам, но 97, 97, 98 - и HTML и програмиране в Интернет ~ коментарът излишен.
Но книга за JavaScript от 1999 - когато всички са мислели че този език е просто играчка! Че такова нещо просто …. Не че аз в университета бях с по-нови книги ( то аз JS учебника ми 1 път го видях само, като казвах че за нищо не става) Но все пак се надявах че поне с нещо от 2002-2003 ще учат, нещо по-новичко, в което ще има нещо полезно и актуално.

За мен най-добре JavaScript може да се научи учи като се гледат лекциите който са тук( и се прегледат книгите който са там):

http://next.pixeldepo.com/2008/06/23/%D1%83%D1%87%D0%B5%D0%BD%D0%B5-%D0%BD%D0%B0-javascript/

Бих добавил (или повторил ):

  • Douglas Crockford: JavaScript: The Good Parts ( просто задължителна )
  • Dustin Diaz: Pro JavaScript Design Patterns
  • ( още не излязлата книга на ) John Resig: Secrets of the JavaScript Ninja, в нета хвърчат глави от нея и те изглеждат доста обещаващи
  • John Resig — “Advancing JavaScript with Libraries” Part 1 и Part 2
  • Glenn Vanderburg -  The Power of Javascript ( на това специялно внимание, особенно ако някои е чел книжки за JavaScript от създаването му до към 2006 или 2007)
  • + някоя по-нова книга за Jquery / Prototype Scriptaculous , за Mootools / YUI / ExtJS не знам дали има написани, но от google може да се събере доста материял.

п.п. Останалите дисциплини който прегледах във ФМИ ми се сториха интересни, поне 2-3 пъти по интересни от 70% от нещата които учих до сега ( и май ще уча следващите години :( ) в Университета. Само това за програмирането в интернет е …#$@

п.п. Ехе излишно дълъг стана поста и ако някой е стигнал до края, и се е сетил за по-добро заглавие …. ;)

Aug 21

Преди 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” но за потребителя да е всеки избран език ;)

Aug 09

Наскоро, един приятел ме помоли да му направя проста програмка, няма да изпадам в подробности за това какво точно трябваше да има в програмката. И аз реших да я направя по най-простия начин, за който се сетих - Adobe AIR( винаги ми е било странно защо му викат Adobe AIR, защото до колкото знам AIR e Adobe Integrated Runtime…). Някой хора биха се сетили за нещо от типа на JAVA или Flash/Flex подобни, но за мен някак си AIR-a е доста по-интересен и удобен.

Та реших още и да не ползвам стандартната си JavaScript библиотека Prototype, още повече че малко през зъби бих казал че за момента Prototype и AIR не се разбират на 100% (което до версия 1.6.1, да се надявяме, ще се оправи). И така ми останаха 2 избора - jQuery и Mootools. Предпочетох Mootools защото ми е някак си по-близо до сърцето, а и Prototype и Mootools за мен са като 2 разклонения на една идея, така че почнах.

Програмката стана доста бързо и доста добре :) и като цяло Mootools-a се оказа доста удобен, въпреки че имахме някои пререкания. Като например:

  • addEvent в Mootools e observe в Prototype
  • addClass, removeClass, hasClass в Mootools са addClassName, removeClassName, hasClassName в Prototype
  • new Class({ … }) в Mootools e Class.create({ … }) в Prototype
  • getNext, getPrevious, getParent, getFirst, getChildren в Mootools са горе-долу next, previous, up, down, select
  • …. общо взето такива са разлики

Естествено има неща който в Mootools ги има а в Prototype ги няма, но те не са толкова сложни, че да не може да се добавят от Prototype в Mootools и обратно. Например нещата който най-много ми харесаха в Mootools бяха:

  • Class.Extra - наистина страхотна идея, много полезни и даже си мисля да си ги вложа във версията на Prototype, която ползвам
  • Assets.image - това не го ползвах в AIR, но просто е безценно, защото не мога да кажа колко пъти аз и колеги сме имали проблеми с не заредени снимки (под IE6 главно)
  • Array.link - наистина интересен метод, който доста ми помогна във функциите с “неясни” аргументи
  • DomReady - и това в AIR не го ползвах, а и в Prototype си имаме dom:ready но той под IE6 не работи добре
  • FX - ефектите в Script.aculo.us са доста повече и са ми по-удобни, но тези са по-бързи и доста по “стабилни” като се говори за preformance. Това ще се промени със Script.aculo.us 2.0 / Scripty, … но то още не е готово, а и поне за сега ги няма стандартните ефекти и трябва да се правят ръчно.

Поне това са основните неща който настина ми харесаха в Mootools (сигурно и други щеше да има ако бях работил повече).

Но и доста неща с който бях свикнал в Prototype, а в Mootools ги нямаше. Няма да ги изреждам защото не са малко. Но както казах по-горе и Mootools и Prototype позволяват да се добавят extendet и то по доста лесен начин и за това си port-нах 2-3 неща:

Тъй като много ми липсваше Enumerable модула от Prototype и особено invoke метода реших да си го добавя:


Array.implement({
	invoke: function(method){
		var args = $A(arguments).slice(1);
		return this.map(function(value) {
			return value[method].apply(value, args);
		});
	}
});

Тук искам да кажа само, че много ми харесаха implement методите който са вградени към по-голямата част от Mootools Native обектите, за което в Prototype се използва Оbject.extend и prototype атрибута на съответния обект.

Mootools има Element.inject(el[, where]) и Element.grab(el[, where]), но Prototype има Element.insert което според мен е доста по-добра от 2те функции който са в Mootools


Element.implement({
	insert: function(insertions){
		if ($type(insertions) == 'element' || insertions.toElement)
			insertions = { bottom: insertation };

		for(var insert in insertions){
			var element = insertions[insert];
			Element.Inserters.get(insert, this, $(element.toElement ? element.toElement() : element, true));
		}

		return this;
	}
});

Това е само елементарта форма на Protoype фунцията защото в истинската Element.insert се приемаха и само html елементи и класове, и чист html код. Но, това не ми се наложи да го ползвам и за това не си играх да го port-вам.

Други две малки “подобрения”, който сложих бяха:


Event.implement({
	findElement: function(pattern){
		return this.target.match(pattern) ? this.target : this.target.getChildren(pattern)[0];
	}
});

function $w(string){
	if ($type(string) != 'string') return [];
	string.trim();
	return string ? string.split(/\s+/) : [];
}

Общо взето това са моите наблюдения (малко по-дълги се оказаха от колкото си мислех :) ). Поне за сега за мен Prototype си е номер 1, но и Mootools е много добра алтернатива (особено ако Prototype, не си оправят Adobe AIR съпорта ). А и Mootools ми е някак си твърде “лъскав”, докато prototype ми се струва по “hardcore”, но това си е мое мнение.

То дефакто дали човек избере Mootools, jQuery, Prototype, YUI, ExtJS, …. все ще е прав :)

п.п. ако някой има намерение да се занимава със Adobe AIR и Mootools непременно да погледне Snippely от кода му и от него като цяло могат да се научат безценни неща :)