To jak, widzimy się na Front-Trends 2010?

• Zostań lepszym programistą front-endu
• Front-end
• Szkolenie – recenzja
• Szkolenie w Szczecinie
• Szkolenie w Szczecinie – relacja
• Szkolenie w Warszawie – relacja
• Szkolenie we Wrocławiu – relacja

Nie jeździsz na konferencje – tracisz!

Przede wszystkim, zastałem w stolicy Wielkopolski mnóstwo nieprzypadowych gości. Byli tam managerowie, programiści, designerzy, blogerzy, internetowi celebryci, Czytelnicy tego bloga, uczestnicy moich szkoleń i masa innych specjalistów, którzy na co dzień tworzą nasz polski internet. Motywowały zasłyszane przeze mnie kuluarowe rozmowy, zainspirowane zapewne obejrzanymi wcześniej wystąpieniami. Wiesz, zamiast trzech buttonów dajemy jeden, a to to w ogóle porażka, nie wiem czemu tak zrobiliśmy… – spierał się siedzący za mną zespół developerów. Tym ludziom po prostu zależało, a strzelam, że takich dyskusji było tego dnia więcej.

Powiedzmy sobie głośno, jeśli jeszcze tego nie wiesz – nie bywasz na konferencjach – przegrywasz. Przegrywasz wiedzę, kontakty biznesowe, potencjalnie wartościowych, nowych znajomych. A w ogólnym rozrachunku – pieniądze, które mógłbyś zdobyć dzięki powyższym. Na sali kręciły się osoby, związane z takimi markami jak Microsoft, Opera, Nokia, Roche, czy Allegro. Pytanie “szukasz pracy?” zdecydowanie nie było tematem tabu.

Przeglądarka Twoim domem

Następna dekada to czas nowoczesnego, zgodnego ze standardami front-endu. JavaScript jest już dostępny na większości zaawansowanych urządzeń mobilnych, świat podbija niesamowity HTML5 (i krążące wokół niego nowinki), a Flash umiera. W dużych korporacjach “J2ME” zaczyna być ustawiany w parze z takimi słowami jak skansen czy muzeum, a zaawansowane, webowe aplikacje sprawiają wrażenie software’u desktopowego – są szybkie, lekkie, wygodne i działają w przeglądarce. Jest rzeczą niezwykle ważną, abyśmy nie przegapili pewnego skoku jakościowo – technologicznego, który niedługo się dokona. Tym bardziej cieszy fakt, że na horyzoncie pojawiły się wydarzenia, dzięki którym możemy poczuć się jak np. Brytyjczycy, którzy mają u siebie co roku kilkanaście (o ile nie więcej) takich konferencji.

SparkUp – jestem na tak

Nie chciałbym oceniać poszczególnych elementów konferencji SparkUp. Jak na każdej, były rzeczy, które należałoby poprawić, jak i te, za które należą się oklaski. Ogólne wrażenie było bardzo dobre. Nie będzie więc tutaj szyderczej i bratobójczej krytyki, którą z pewnością wielu blogerów by podniosło. Zresztą, najlepiej konferencję ocenią/ocenili jej uczestnicy na Blipie czy Twitterze. Jest to wręcz idealny kanał komunikacji dla takich eventów, czego kiedyś nie doceniałem.

Miałem też okazję porozmawiać dłuższą chwilę z jednym z organizatorów – Piotrem Czekałą. Wielkie gratulacje za chęci i sprawienie, że konferencja się odbyła! Miejcie świadomość, że SparkUp organizują sympatyczni ludzie z głową na karku. Przy okazji dowiedzieliśmy się kilku ciekawych rzeczy, co z pewnością przemyślimy w kontekście Front Trends.

Front Trends

No właśnie, Front Trends. Pojawiło się ostatnio mnóstwo pytań, co do konferencji, która odbędzie się w Warszawie 21 i 22 października. Wiedzcie, że pracujemy bardzo ciężko nad pełną wersją strony internetowej, a także nad cenami i ścieżkami tematycznymi. Nie chcę składać żadnych obietnic czasowych, ponieważ mamy zamiar zaoferować Wam jak najlepszą konferencję i dbamy o dopracowanie każdego szczegółu. Zbliża się najwyższy moment na podanie wszystkich, wiążących informacji, więc proszę o odrobinę cierpliwości!

Konferencji czas

Muszę przyznać, że jestem wielkim optymistą, jeśli chodzi o przyszłość konferencyjną w Polsce. Po tym, co usłyszałem i zobaczyłem we wtorek, jestem pewien, że Polska pragnie takich wydarzeń. I będzie je miała, bo taki potencjał nie może zostać zmarnowany.

Można powiedzieć, że marzenia się spełniają. Długo zapowiadana niespodzianka stała się faktem. Szykuje się największe w tej części Europy święto dla wszystkich ludzi odpowiedzialnych za kształt Internetu.

Niniejszym zapraszam na stronę informacyjną konferencji – Front-Trends.com. Jak dotąd, udało się nam zebrać samą śmietankę w postaci naukowców, ewangelizatorów i twórców popularnych frameworków. Ludzi, którzy kreują światowy web. Już wkrótce kolejne, równie gorące nazwiska!

Oficjalna strona wydarzenia ma obecnie charakter wyłącznie informacyjny. Identyfikacja wizualna wraz logo i pełną wersją strony (w tym płatnościami) pojawią się już niedługo. Jednocześnie zapraszamy na Twittera oraz Blip po najnowsze wiadomości.

Można powiedzieć, że przed całym wydarzeniem większa była ciekawość niż obawy. W zasadzie wszystko układało się po mojej myśli – świetną organizacją popisali się chłopaki z Frontend Force, a lista chętnych zapełniła się błyskawicznie i to z dość dużą rezerwą. Napiszę szczerze, że wyczekiwałem tego weekendu, ale i nie rozmyślałem zbytnio o tym, co będzie, gdy to czy tamto. Polecam to uczucie – swego rodzaju niezwykle pozytywna adrenalina! Fakt ten potęgowany był także tym, że wiedziałem, iż spotkam na żywo Czytelników tego bloga. Przyjemnie było przekonać się, że ktoś to jednak czyta i są to ludzie nie w ciemię bici. Szacun! Polecam przy okazji programik ZoomIt, który został mi z kolei zareklamowany przez jednego z Czytelników. Przetestowałem przez chwilę i jest naprawdę wygodny dla ludzi prowadzących prezentację. Można łatwo rysować po ekranie czy powiększać pewne jego obszary. Paweł – dzięki!

Na szkolenie przybyli wszyscy, czyli dziesięć osób. Programiści front-end, JAVA, PHP, Python, a niektórzy nawet z doświadczeniami w DTP. Zaczęliśmy punktualnie o 9.30. Muszę przyznać, że 8 godzin przeznaczonych na dzień szkolenia wydaje się być wystarczające. Jednak tylko na papierze. Jeśli chodzi o tak rozbudowany materiał to za mało. W efekcie robi się bardzo intensywnie i w okolicach 15-16 dało się wyczuć już nieco zmęczenia w powietrzu. Mam nadzieję, że coś pamiętacie z tego okresu ;-). Pomysły, jak temu zaradzić? Moim rozwiązaniem na kolejne szkolenia jest nieco więcej przerw i mniej materiału (choć chciałbym tego uniknąć). Postaram się też jeszcze bardziej wtrącać do wykładu różnego typu anegdoty i dialogi, co moim zdaniem nieźle sprawdzało się w niedzielę. A jak Wy myślicie?

Jeśli chodzi o warstwę merytoryczną, niestety nie udało się zrealizować w całości rozdziału o DOM. Obiecałem jednak chłopakom, że przygotuję drugie szkolenie tylko i wyłącznie o tym zagadnieniu, także kto wie, czy nie spotkamy się już wkrótce analizując getElementById i pochodne. Pomimo to jestem zadowolony. Szczególnie miło było, kiedy robiliśmy powtórkę z pierwszego dnia. Wszystkie moje pytania znalazły dobre odpowiedzi. Przyznam szczerze, że bardzo mnie to podbudowało. Starałem się, aby jak najwięcej było rozwiązywania zadań czy kodowania na ekranie. Raczej udało się to zrealizować, choć jako człowiek, który nie zna umiaru, nie jestem pewien czy było tego wystarczająco. Ale jak zwykle opinia uczestników jest tutaj najważniejsza. Więc jak, jeszcze więcej kodowania, czy wyważyliśmy jakoś te elementy?

Podsumowując, jestem bardzo zadowolony. Dużą satysfakcją było usłyszeć, że szkolenie podobało się i pokazało, jak potężnym językiem może być jest JavaScript. Oczywiście wyciągnąłem też kilka innych wniosków – typowo wykładowych – jak zachowywać się w pewnych sytuacjach, o czym i kiedy mówić, i tak dalej… Z pewnością doświadczenia te zaprocentują w przyszłości!

Co do Wrocławia. To naprawdę ładne miasto, szkoda tylko, że widziane przeze mnie głównie wieczorem. Widać, że rozwija się dynamicznie, a niezła architektura i mnóstwo kanałów wodnych tworzą niesamowity klimat, jakby niedostępny dla innych miast Polski. Wybiorę się tam jeszcze latem, na bank! Słowa uznania również, po raz kolejny, dla miejscowych. Wiele ciekawych rozmów, żartów i śmiechu choćby z Helionu, IE (a jak!), blogerskich sław i wielu innych tematów, które trudno w szkoleniowym amoku spamiętać. Kelnerki też mają ładne. ;-)

Co dalej? Przede wszystkim opublikuję rozwiązanie jednego z zadań, które było, uznajmy, pracą domową. Następnie możecie spodziewać się informacji o kolejnych szkoleniach. Następne już lutym!

Lepsza dokumentacja API

Przede wszystkim warto zauważyć metamorfozę strony z dokumentacją. Starą docs.jquery.com (pozostanie online jeszcze przez jakiś tydzień) zastąpiła nowa api.jquery.com. Od tej pory wszystkie funkcje jQuery są wylistowane na stronie głównej – nie trzeba szukać i domyślać się, do której kategorii należy to, czego szukamy. Całość działa na Wordpressie i co zauważyli twórcy – odbiło się to na szybkości działania. Z większych ciekawostek warto nadmienić, że od teraz każda funkcjonalność posiada informację, kiedy została wprowadzona do jQuery – licząc od wersji 1.0. Oprócz tego dostępny jest też dump API w XML.

Co nowego?

Wersja 1.4 wygląda teraz tak, jeśli chodzi o rozmiar:

• wersja zminifikowana i gzippowana – 23kb
• wersja developerska – 154kb

Przyspieszyły funkcje empty(), remove(), html(), css(), attr(), addClass(), removeClass(), hasClass(), append(), prepend(), before() oraz after().

Mamy wreszcie settery w funkcjach takich jak ..css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass() oraz .toggleClass(). Czym są settery? Otóż to funkcje, które możemy przekazać jako argument. Muszą one zwracać wartość, która zostanie bezpośrednio zaaplikowana do jednej z powyższych metod.

$('.inner').wrap(function() {
	return '<div class="' + $(this).text() + '" />';
});

Powyższy kawałek kodu opakuje każdy element o klasie inner w div z klasą o nazwie zwróconej przez text, uruchomionej na każdym elemencie .inner.

Ponadto wybrano funkcje, które oferują naszym setterom także aktualne wartości, w zależności od kontekstu. Są nimi .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass() oraz .toggleClass(). Działa to tak, że ta wartość jest dostępna jako drugi argument przekazywanej przez nas funkcji:

$('a').html(function(i, html){
	return html.replace(/&/gi,'&');
});

W tym wypadku pod zmienną html będziemy mieli nic innego, jakby wynik funkcji $(this).html() wywołanej na każdym znalezionym tagu a.

Zmienił się trochę obiekt ajax. Lepsze serializowanie parametrów:

{foo: ["bar", "baz"]}

zamieni się w

foo[]=bar&foo[]=baz

W poprzedniej wersji byłoby to tak:

foo=bar&foo=baz

Jeśli jednak chcemy używać nadal starego sposóbu serializowania, można go uruchomić na trzy sposoby:

// włącza tradycyjny sposób serializowania dla wszystkich operacji ajaxowych
jQuery.ajaxSettings.traditional = true;

// włącza tradycyjny sposób serializowania dla pojedynczej operacji
jQuery.param( stuff, true );

// włącza tradycyjny sposób serializowania dla pojedynczego requestu ajaxowego
$.ajax({ data: stuff, traditional: true });

Poza tym, kiedy request ajaxowy zwraca application/json, parametr dataType jest równy JSON. Jeśli jest to text/javascript lub application/x-javascript dataType przyjmuje script i kod jest automatycznie wykonywany.

Co więcej, jQuery ignoruje w zapytaniach ajaxowych flagę Last-Modified i za każdym razem dostarcza aktualną, zwróconą wartość żądania, nie sugerując się cache przeglądarki. Można zmienić to zachowanie, ustawiając ifModified: true. jQuery wspiera także nagłówek If-None-Match.

JSON!

jQuery używa teraz natywnego parsowania danych JSON, jeśli tylko takie wspierane jest przez przeglądarkę. Nasze dane są też walidowane, więc coś takiego nie przejdzie:

{foo: "bar"}

HTML5

Co ciekawe, nowe typy formularzy z HTML5, jak np.:

<input type="datetime-local" />

będą uwzględniane przy serializowaniu danych formularzy.

Ajax context

Oprócz tego, przy zapytaniach ajaxowych można teraz ustalić kontekst, w jakim mamy odpalić metodę success:

$.ajax({
	url: "test.html",
	context: document.body,
	success: function(){
		$(this).addClass("done");
	}
});

W ten sposób, po wykonaniu się zapytania, tagowi body ustawiona zostanie klasa done.

$.ajax({
	url: "test.html",
	context: $("#foobar"),
	success: function(data){
		$(this).html(data);
	}
});

Analogicznie, po tej operacji, jeśli wszystko się powiedzie, elementowi #foobar zostanie automatycznie wstawiony, powiedzmy, kawałek HTMLa, który pobraliśmy sobie z pliku test.html, i który jest dostępny pod zmienną data.

Co ważne, funkcja success przyjmuje teraz 3 argumenty:

$.ajax({
	url: "test.html",
	context: $("#foobar"),
	success: function(data, status, xhr){
		$(this).html(data);
	}
});

Pod pierwszym mamy zwróconą przez request wartość, pod drugim status operacji, a pod trzecim obiekt ajax (to co jest pod $.ajax).

Warto też zwrócić uwagę, że tym razem jQuery nie ignoruje contentType w zapytaniach ajaxowych. Jest on teraz zawsze wysyłany. Pojawiła się tez możliwość ustawienia callback‘a dla JSONP – poprzez atrybut jsonpCallback , natomiast zapytania cross-domainowe są teraz o wiele bardziej wydajne.

Szybkość tworzenia nowych obiektów

Zapomnij natychmiast o czymś podobnym:

var obj = $("<div />");
obj.css("background", "#ddd").html("something").click(function() { alert("foobar!"); }).appendTo("body");

Można to teraz zrobić o wiele bardziej kompleksowo:

var obj = $("<div />", {
	css: {
		background: "#ddd"
	},
	html: "something",
	click: function() { alert("foobar!"); }
}).appendTo("body");

.eq(-N), .get(-N)

Od teraz w funkcjach eq i get możemy użyć ujemnych wartości:

$("div").eq(-2);
$("div").get(-2);

W ten sposób wybierzemy elementy drugie od końca.

first() i last()

Jeśli mowa o końcu, developerzy dodali funkcję last, która zwróci nam ostatni element oraz first, analogicznie zwracającą pierwszy.

toArray()

Z nowych rzeczy pojawiła się także metoda toArray, która zamienia wszystko… w tablicę:

var arr = $('a').toArray();
typeof arr; // object
arr // [<a id="foo">, <a id="bar">]
arr[1].html("ustawiamy wartość html dla drugiego z kolei pobranego linka");

jQuery().ready() – nie działa!

Kod $().ready() przestał być wspierany. Zamiast tego użyj:

$(document).ready()

lub

$(function(){})

Wszystko dlatego, że $() zwraca teraz pustą tablicę.

typeof $() // object
$().length // 0

$(“tag”)

Developerzy zarzekają się dumnie, że powyższa konstrukcja znacznie przyspieszyła. Przekonajcie się sami! Co więcej, warto dodać, że przyspieszył również selektor #id tag np.:

$("#foobar div");

toggleClass

toggleClass() może ustawić teraz kilka klas naraz:

$("div").toggleClass("current active");

Efekty

Z fajnych rzeczy dodano także obsługę techniki per-property easing:

$("#clickme").click(function() {
	$("div").animate({
	width: ["+=200px", "swing"],
	height: ["+=50px", "linear"],
	}, 2000, function() {
      		$(this).after("<div>Ukończono animację!</div>");
  	});
});

Co to znaczy? Ano to, że możemy użyć różnych stylów animacji (swing, linear) dla różnych właściwości CSS (powyżej, co jasne, są to: width, height) jednocześnie.

$.proxy()

Co robi nowa funkcja proxy()? Otóż zmienia ona scope dla danej funkcji, co oznacza w gruncie rzeczy to, że łatwo możemy ustawić, co chcemy pod zmienną this:

var obj = {
	name: "John",
	test: function() {
		alert(this.name);
	}
};

$("#foobar").click($.proxy(obj, "test"));

// To także działa:
// $("#foobar").click($.proxy( obj.test, obj ));

W ten sposób funkcja test odwołuje się do obiektu obj poprzez this, stąd tez dostępna własność this.name. Porównajcie sobie to z czymś takim:

$("#foobar").click(function() {
	alert(typeof this.name);
});

Wyświetlone zostanie undefined, ponieważ w tym wypadku skrypt będzie szukal name w obiekcie jQuery.

bind i zdarzenia

W wersji 1.4 funkcja bind przyjmuje wiele zdarzeń:

$("#foobar").bind({
	click:  function() {},
	mouseover: function() {}
});

Jeśli mowa o nich to wprowadzono także zdarzenia focusin i focusout. Czym różnią się one od focus i blur? Są to bowiem zdarzenia bąbelkowe i na tym polega cały myk. Zainteresowanym polecam przeczytać na temat różnic na temat bubble oraz capture events.

Usprawnień doznały także live eventy. Teraz każde tradycyjne zdarzenie może być użyte przez live(). Wcześnie niektóre eventy były nieobsługiwane.

detach()

Nowa metoda detach usuwa dany tag z drzewa DOM, ale jQuery nadal trzyma go w pamięci, dzięki czemu możemy szybko dodać go gdzie indziej, tym bardziej, że zachowane są zdarzenia, które zaaplikowaliśmy wcześniej:

var foo = $("#foo").click(function() {});
foo.detach();
foo.appendTo("body");

W powyższym przykładzie usuwamy #foo z drzewa DOM w 2 linijce, ale nadal możemy go dodać gdzieś indziej, np. do body.

unwrap()

Co robi unwrap? Usuwa opakowanie według danego taga:

Kod:

<body>
    <div>
        <p>he</p> <p>he</p> <p>he</p>
    </div>
</body>

$('div').unwrap();

zwróci nam:

<body>
   <p>he</p> <p>he</p> <p>he</p>
</body>

Inne

Z ważniejszych rzeczy pojawiła się metoda, a w zasadzie setter offset, który pozwala ustawić offest dla elementu. Wcześniej mogliśmy tylko takowy pobrać. Jest także delay(), dzięki której możemy opóźniać animacje:

$("div").fadeIn().delay(4000).fadeOut();

W ten sposób animacja fadeOut wykona się dopiero po 4 sekundach po zakończeniu fadeIn.

Wprowadzono też clearQueue(), która czyści zdefiniwaną kolejkę. Usuwa ona tylko funkcje, które nie zostały jeszcze wykonane.

Poza tym poprawiono zachowanie metody index:

$("div.current").index();

Coś takiego zwróci 1 w podobnej sytuacji:

<p></p>
<div class="current"></div>
<p></p>

Wprowadzono także metodę has(). Dzięki niej z łatwością sprawdzimy, czy dany element zawiera w sobie inny:

<div id="foobar">
	<p class="foo"></p>
</div>

$("#foobar").has("p.foo").length; // 1

Zachowuje się tak samo jak:

$("#foobar:has(p.foo)").length;

Wprowadzono też: nextUntil(), prevUntil(), parentsUntil(). Działają one podobnie do next i analogicznych, z tym wyjątkiem, że wyszukujemy elementy aż do znalezienia tego, który podaliśmy jako argument. Np.:

$("body").nextUntil("#foobar").css("display", "none");

ukryje wszystkie elementy aż do wystąpienia tego o id foobar.

Z innych zmian (oj, napracowali się chłopaki, napracowali…) mamy funkcje takie jak:

• $.isEmptyObject() – sprawdza, czy przekazany argument jest pustym obiektem tzn. czy nie ma żadnych składowych
• $.isPlainObject() – sprawdza czy obiekt zawiera jakieś podobiekty. Np.:

  var obj = {
  	podObiekt: {}
  };
  $.isPlainObject(obj);

  Zwróci false, ponieważ zdefiniowaliśmy inny obiekt (podObiekt) wewnątrz obiektu.

• $.contains() – jeśli podamy jako parametry dwa obiekty DOM i drugi z nich mieści się w pierwszym, funkcja zwróci true
• $.noop – zwraca pustą funkcję (analogicznie do składowej frameworku Prototype – Prototype.K)
• $.unique() – szuka wśród podanej tablicy duplikatów i wyrzuca je z tablicy, zwracając nową, bez powtarzających się elementów

Z innych ciekawostek .clone(true) kopiuje także dane z funkcji data(). Nie tylko zdarzenia!

To prawdopodobnie nie wszystkie zmiany w najnowszej wersji jQuery, lecz z pewnością wszystkie najważniejsze. Jak zawsze chłopaki z teamu Resiga odwalili kawał dobrej roboty. Warto więc przyjrzeć się nowemu jQuery oraz projektowi 14 dni z jQuery. Dawno nie działo się aż tyle pozytywnych rzeczy w tym projekcie.

Naszym celem jest stworzenie przypisów dolnych tak, aby wyglądały jako boczne, zupełnie jak na tym blogu. Jeśli w jakimś akapicie znajdzie się odnośnik do przypisu, jego treść powinnna pojawić się z prawej strony akapitu (tagu <p />). Zacznijmy od semantycznego szablonu:

<div class="article">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa. Fusce sed erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse auctor neque id purus. Ut dignissim felis et velit suscipit fringilla. Aenean et est et lacus interdum rutrum.<a href="#przypis-1" class="hint"><sup>1</sup></a> Nam iaculis ipsum vel neque blandit placerat. Cras dui elit, varius at, gravida a, consectetur ut, elit. Donec turpis. Fusce quis sapien ac nisl lobortis eleifend. Morbi posuere, massa vel fermentum commodo, arcu quam fermentum turpis, vel tincidunt ante odio at arcu. Sed vitae purus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa. Fusce sed erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse auctor neque id purus. Ut dignissim felis et velit suscipit fringilla. Aenean et est et lacus interdum rutrum. Nam iaculis ipsum vel neque blandit placerat. Cras dui elit, varius at, gravida a, consectetur ut, elit. Donec turpis. Fusce quis sapien ac nisl<a href="#przypis-2" class="hint"><sup>2</sup></a>lobortis eleifend. Morbi posuere, massa vel fermentum commodo, arcu quam fermentum turpis, vel tincidunt ante odio at arcu. Sed vitae purus.</p>
	<hr />
	<ol id="notes">
		<li id="przypis-1">First note</li>
		<li id="przypis-2">Second note</li>
	</ol>
</div>

Jak widać, kontenerem dla artykułu jest .article, odnośnikami do przypisów są linki .hint. Domyślne przypisy dolne tworzy lista #notes.

Pora na trochę podstawowych CSSów. Wypozycjonujmy treść, nadajmy odpowiednie typy fontów i tak dalej:

* {
	padding: 0;
	margin: 0;
}
a {
	text-decoration:none;
	color: #7EBB1F;
	font-weight: bold;
}
a:hover {
	background-color: #7EBB1F;
	color: #fff;
}
.article {
	width: 960px;
	margin: auto;
	font: normal 14px 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
}
.article p {
	margin-bottom: 20px;
	line-height: 20px;
	width: 680px;
}

Generalnie, cel jest następujący – jeśli mamy włączony JavaScript usuwamy listę numerowaną <ol#notes />, a jej elementy zmieniamy na <p /> i umieszczamy pomiędzy stosownymi akapitami artykułu. To teoretyczny opis. W praktyce będzie to zrobione nieco inaczej.

Poszukamy akapitów, które linkują do określonych przypisów. Jeśli dany akapit zawiera link .hint to dodajemy zaraz po nim stosowny przypis. Treść przypisu pobierzemy na podstawie identyfikatora, który znajduje się po hashu (#) w linku-odnośniku.

Najpierw jednak zajmijmy się sytuacją, kiedy mamy wyłączony JavaScript:

.article hr {
	border: none;
	border-top: 1px solid #7EBB1F;
	width: 680px;
	float: left;
	margin-bottom: 10px;
}
.article #notes {
	clear: left;
}
#notes li {
	font-size: 11px;
	width: 680px;
	margin-bottom: 3px;
	line-height: 15px;
	font-style: italic;
}

Powyższym ostylowaliśmy przypisy dolne – w końcu jeśli JavaScript będzie wyłączony, to będzie trzeba jakoś je zaprezentować. Warto sprawdzić efekt.

Fajnie jednak byłoby, gdyby jakiś aktywny przypis (tzn. ten, w który kliknęliśmy) został nieco wyróżniony. Zrobić możemy to dzięki selektorowi :target:

#notes li:target {
	font-weight: bold;
}

Oznacza to, że jeśli w linku pojawi się identyfikator jakiegoś tagu <li /> np. przypis1.html#przypis-2 to treść tego tagu (tutaj: < li id=”przypis-2″ />) zostanie wyboldowana. Wynika na to, że załatwiliśmy problem wyłączonego JavaScriptu.

Zajmijmy się teraz odpowiednimi skryptami, które przeniosą elementy z listy #notes pod stosowne akapity. Skorzystamy w tym celu z jQuery.

Najpierw należy poszukać wszystkich linków .hint w obrębie artykułu .article:

$().ready(function() {
	$('.article .hint').each(function(i, element) {

Dzięki funkcji each przeiterujemy się przez wszystkie znalezione odnośniki do przypisów. Pierwsze, co powinniśmy zrobić, to znaleźć akapit, który jest rodzicem danego linku:

$().ready(function() {
	$('.article .hint').each(function(i, element) {

		var parent = $(element).parent('p');

Następnie pobieramy adres linku, by uzyskać identyfikator przypisu, do którego się on odnosi:

$().ready(function() {
	$('.article .hint').each(function(i, element) {

		var parent = $(element).parent('p');
		var id = $(element).attr('href');

Tym sposobem pod zmienną id będą następujące wartości:

• #przypis-1
• #przypis-2
• itd.

Pora pobrać treść przypisu na podstawie jego ID i uformować nowy akapit z przypisem:

$().ready(function() {
	$('.article .hint').each(function(i, element) {

		var parent = $(element).parent('p');
		var id = $(element).attr('href');

		var note = $(id).html();

		var newNote = $('<p class="note"><sup id="'+id.replace(/#/g, '')+'">'+(i+1)+'</sup>'+note+'</p>');

Szczególnie istotna jest tutaj 8. linijka:

var newNote = $('<p class="note"><sup id="'+id+'">'+(i+1)+'</sup>'+note+'</p>');

Otóż dzięki niej tworzymy nowy tag drzewa DOM jakim jest <p />. Oczywiście ubieramy go w stosowne wdzianko - nadajmy class="note" - tak, by potem można było ostylować przypis boczny. W nowym przypisie umieszczamy również indeks w <sup />, korzystając ze zmiennej i z pętli each - jej wartość zaczyna się standardowo od zera, więc należy dodać jeden, by otrzymać zwykłe odliczanie od 1. Znacznik sup musi mieć dobry identyfikator bez hasha na początku. Wyrzucamy więc "#" przez id.replace(/#/g, '').

Trzeba jeszcze zająć się pozycjonowaniem przypisu tak, by był wertykalnie nieco bliżej jego odnośnika .hint. Spróbujemy ustawić tak dobrany, ujemny margin-top, by nie było zbytnich przerw pomiędzy wspomnianym linkiem i akapitem z przypisem.

$().ready(function() {
	$('.article .hint').each(function(i, element) {

		var parent = $(element).parent('p');
		var id = $(element).attr('href');

		var note = $(id).html();

		var newNote = $('<p class="note"><sup id="'+id.replace(/#/g, '')+'">'+(i+1)+</sup>'+note+'</p>');

		newNote.css('margin-top', (parseInt($(parent).css('margin-bottom')) + ($(parent).height() + $(parent).offset().top) - $(element).offset().top) * -1);

Stosowny margines górny ustawiamy na podstawie prostego wyliczenia. Sumujemy wysokość i odległość od początku strony całego akapitu, a następnie od tej sumy odejmujemy odległość linku od początku strony. Odległość od początku strony możemy pobrać przez jQuery'owe offset().top, a wysokość przez height(). Do wszystkiego dodajemy jeszcze margines dolny akapitu, w którym mieści się link. Wszystko mnożymy razy minus jeden, by uzyskać ujemny margines dla naszego przypisu. Oto rysunek poglądowy, jak wyliczamy margines:

Pora dodać nowy przypis pod stosowny akapit i zakończyć pętlę each:

$().ready(function() {
	$('.article .hint').each(function(i, element) {

		var parent = $(element).parent('p');
		var id = $(element).attr('href');

		var note = $(id).html();

		var newNote = $('<p class="note"><sup id="'+id.replace(/#/g, '')+'">'+(i+1)+'</sup>'+note+'</p>');

		newNote.css('margin-top', (parseInt($(parent).css('margin-bottom')) + ($(parent).height() + $(parent).offset().top) - $(element).offset().top) * -1);

		newNote.insertAfter(parent);

});

Na koniec musimy jeszcze usunąć przypisy dolne, które nie są już nam potrzebne:

$().ready(function() {
	$('.article .hint').each(function(i, element) {

		var parent = $(element).parent('p');
		var id = $(element).attr('href');

		var note = $(id).html();

		var newNote = $('<p class="note"><sup id="'+id.replace(/#/g, '')+'">'+(i+1)+</sup>'+note+'</p>');

		newNote.css('margin-top', (parseInt($(parent).css('margin-bottom')) + ($(parent).height() + $(parent).offset().top) - $(element).offset().top) * -1);

		newNote.insertAfter(parent);

	});

	$('#notes').prev('hr').remove();
	$('#notes').remove();
});

Wynik naszej zabawy nie wygląda jednak zbyt atrakcyjnie.

Pora dodać stosowne style dla .note:

.article .note {
	float: right;
	background-color: #FBF1AB;
	border: 1px solid #ECD42B;
	width: 162px;
	padding: 4px;
	overflow: hidden;
	font-size: 12px;
}
.article .note sup {
	float:left;
	font-size:20px;
	vertical-align: bottom;
	margin-right: 5px;
	text-align: center;
	width: 30px;
}
.article .note sup:target {
	background: #FBEA71;
}

Jest całkiem nieźle!

Można by co prawda zwiększyć widoczność odnośników do przypisów:

.article .hint {
	margin-right: 10px;
}
.article .hint sup {
	font-size: 14px;
}

Działa wyśmienicie!

Zastosowane tutaj rozwiązanie ma w zasadzie tylko jedną wadę - nie należy nadużywać przypisów w jednym akapicie, ponieważ mogą one na siebie nachodzić, tworząc dość nieprzyjemny efekt. Oczywiście możemy nie stosować pozycjonowania względem odnośnika, usuwając linijkę odpowiedzialną za ustawianie górnego marginesu. Wtedy możemy stawiać przypisy gdziekolwiek i w jakiej ilości chcemy.

Z pomocą przychodzi funkcja data(). Jeśli użyjemy jej w kontekście obiektu jQuery w parze z argumentem events, możemy łatwo zdebugować interesujące nas zdarzenia. Przykładowe użycie:

$("a.news").data('events');

Dzięki Firebugowi proces ten jest o wiele bardziej użyteczny. Wystarczy coś takiego, by wyświetlić w konsoli interesujące nas dane:

$().ready(function() {

	$("#foobar").bind("click", function() { alert('a'); }).bind("click", function() { alert('b'); });

	var events = $("#foobar").data('events');
	$.each(events, function(i, value) {
		$.each(value, function(j, fn){
				console.log(i+": "+fn);
		});
	});
});

Efekt?

Można również skorzystać z pluginu James’a Padolsey’a.

Pokora to jedna z największych cnót

Szafowanie szeroką gamą branżowych terminów nie czyni z Ciebie specjalisty. Spotykałem osoby, które twierdziły, że wiedzą, co to dostępność, użyteczność i inne takie… No, zresztą, sami dobrze wiecie… Większość z nich, zapytana o szczegóły, rzucała jednak podstawowymi określeniami, które można bez trudu znaleźć po 30 sekundach wyszukiwania w sieci.

Bardzo często ktoś, coś tam słyszał, jednak nie przypomina sobie szczegółów. Nielsen, Don’t let me think. A! I o niepełnosprawnych coś było! Prawie jak na lekcji biologii… Problem w tym, że tak jak lekarz podczas operacji nie sięga po podręczniki, by dowiedzieć się, gdzie mieści się serce, tak programista front-end nie myśli dwie godziny nad tym, jak działa, dajmy na to, hierarchia nagłówków.

Dlatego też o wiele bardziej cenię ludzi pokornych, którzy owszem, w trakcie boomu na użyteczność słyszeli kilka podstawowych haseł, aczkolwiek otwarcie przyznają, że nie wiedzą zbyt wiele i chcieliby poszerzyć horyzonty.

Poza tym, gro osób spod znaku doskonała znajomość HTML, XHTML, CSS oraz standardów W3C, WAI tak naprawdę, co komiczne, ma w swoim portfolio strony, które przeczą współczesnym standardom. Co więcej, pewnikiem wszyscy zrobiliśmy kiedyś jakiegoś potworka. W związku z tym, sto razy bardziej docenię osobę, która jest świadoma tego faktu, niż tę, która stwierdzi, że wszystko jest w porządku, a jej kwalifikacjami powinna zająć się najlepiej komisja złożona ze Spolsky’ego, Meyer’a, Zeldmana i innych.

To nadal jest programowanie!

Jeśli chodzi o JavaScript, zważ, że to nie tylko jQuery. Wielu programistów uważa czysty JavaScript za zupełnie zbędny, kiedy jest to podejście pozbawione sensu. Chciałbym wiedzieć, ile do powiedzenia na temat optymalizacji, closures czy programowania obiektowego mają osoby, które w swoim portfolio oceniają JavaScript na “doskonały”. Sam łapałem się na tym wielokrotnie – udało mi się napisać to i owo, dlatego myślałem, że jestem w danej dziedzinie ekspertem. Nic bardziej mylnego, języki programowania to żywy twór, który z każdym dniem odsłania nowe obszary.

Kiedyś o eventach w JavaScript wiedziałem tylko tyle, że trzeba pobrać odnośnik do DOM i przypiąć stosowną funkcję. Dziś o ból głowy (z zachwytu nad rozwiązaniami) przyprawiają mnie problemy wycieków pamięci lub zdarzeń bąbelkowych.

A gdzie mi tu Panie do zaawansowanego użycia Canvas, w którym zrobiłem bardzo mało rzeczy, aczkolwiek mam świadomość, jak to działa i wiem, że gdybym poświęcił swój czas na konkretny projekt, na pewno bym go zrobił. O ile z czystym sumieniem mogę więc stwierdzić, że nie jestem specjalistą z tej dziedziny, tak wiele osób napisałoby na Goldenline czy gdziekolwiek indziej, że Canvas wciąga uchem, kiedy tak naprawdę używała jedynie jakiegoś widgetu z Ajaxian.com.

Poznawanie zagadnień od podstaw jest bardzo ważne. Prędzej czy później trafimy na problem, któremu nie będziemy mogli podołać przez nasze zaniedbania. Pierwszy przykład z brzegu – miałem swego czasu zoptymalizować system walidacji formularzy faktur. Pozycji było ponad 30, każda z nich miała po pięć sprawdzanych informacji. Pętli były dziesiątki (setki?) tysięcy, a czas wykonywania skryptu oscylował wokół 15 sekund. Wszystko oparte było o jQuery i jQuery Validation. Dla każdego walidowanego pola frywolnie używano selektorów jak poniżej:

$('input[name^=xxx][name$=xxx]');

Przyjmując, że jQuery musi sprytnie przefiltrować wszystkie inputy, dopasowując je do podanych dwóch wyrażeń regularnych, mamy 30*5*2*600 iteracji (w dokumencie było około 600 inputów). Ciekaw jestem, co powiedziałaby osoba bez jakiejkolwiek wiedzy analityczno-algorytmicznej (choćby jak działają selektory w jQuery). Że o podstawach JavaScript nie wspomnę.

Pomyśl też, co stałoby się, gdybyś musiał napisać coś w MooTools lub Prototype?

Staranność

Nie rób w kodzie bałaganu, pod żadnym pozorem. Nieważne, czy zaczynasz duży czy mały projekt. Nazywaj klasy i identyfikatory zgodnie z przyjętą przez Ciebie konwencją. Żadnych test3, somethingExampleHehe i innych potworków. Nie pisz skryptów na szybko, bez dobrego formatowania i logicznego nazewnictwa zmiennych. Utrzymuj porządek w sekcji head dokumentów, jak i w folderach z plikami źródłowymi. Przyjmij konwencje nazw katalogów, w których trzymasz pliki css, js i obrazki.

Otaczaj skrypty JS anonimowymi funkcjami, tak, by nikt nie nadpisał Twojego kodu:

(function() {
// Twoj kod...
})();

Niestety, programowanie stron niesie ze sobą wiele pułapek, a jedną z nich jest skłonność do powstawania bałaganu. Wielokrotnie widziałem zdublowany kod, puste deklaracje w CSSach i wiele innych niedoróbek. Znając życie, większość pochodzi z czystego pośpiechu. Osobiście, często robiłem coś na szybko, dodawałem style inline, by sprawdzić, jak coś się zachowa, mimo że miałem do dyspozycji debugger. CSS i JS są bardzo czułe na fuszerkę, dlatego unikaj kompromitacji, nawet, gdyby praca miała potrwać 10 minut dłużej.

Zdarza się również, że mozolnie szukamy rozwiązania, dajmy na to pod IE, dopisując coś i skreślając w kodzie, a także pisząc na szybko różne nazwy zmiennych, typu some, x, aaa itd. Gdy dochodzimy do celu, zapominamy o sprawie, skoro “jest zrobione“. W efekcie w kodzie pozostaje bubel, który będzie nielogiczny dla programistów edytujących kod w przyszłości. Zmusi ich to prawdopodobnie do kontynuowania złej konwencji i dalszego brudzenia, bo przecież nie będę się doczytywał, o co temu kolesiowi chodziło.. Nie zostawiaj po sobie kodu, którego sam nie zrozumiesz za miesiąc.

Debugger i dobre narzędzia wspomagające to świętość! Dowiedz się, co to Firebug, WebDeveloper, Live Headers, Pixel Perfect, IE Tab, HTML Validator, czy Firecookie. Przeglądaj często stronę z rozszerzeniami do Firefoxa. A nuż wyjdzie coś interesującego!

Frameworki CSS to nie do końca trafiony pomysł, jednak przydatny w pewnych okolicznościach. Przeanalizuj dokładnie wady i zalety takiego rozwiązania, zainteresuj się resetami CSS czy też projektami typu 960 grid system.

Typografia potrafi być ciekawa, a XHTML ma wady, więc bądź ostrożny.

Rozwój osobisty

Nikt nie jest alfą i omegą. Nie zniechęcaj się tym, że wielokrotnie podczas pracy używasz Google. Zapamiętywanie hacków, czy też bugów przeglądarek jest pomocne, lecz nie jest to najważniejsze. Wystarczy, że znasz i kojarzysz problem. Rozwiązanie to tylko kwestia doboru środków.

Czytaj książki. O sieci pisze się tyle ciekawych rzeczy! Nie przeczytasz ich na żadnej stronie internetowej. Luke Wroblewski, Joel Spolsky, Eric Meyer, Jakob Nielsen, Louis Rosenfeld, Dean Clarke to tylko czubek góry lodowej nazwisk, które szanujący się developer powinien znać. Czytanie zagranicznych pozycji to nie moda, lans czy cokolwiek innego – to polepszanie swoich kwalifikacji. Biorąc pod uwagę, że w sieci są prawdopodobnie tysiące koderów z szablonu (CSS, HTML, JS), zatrudniłbym kogoś, kto po prostu wie więcej.

Jeśli nie znasz z kolei jakiejś pozycji, przyznaj to otwarcie, zamiast szukać okrężnej drogi w swoich tłumaczeniach. Nie znać “X” czy “Y” to nie wstyd, acz argument do dalszej nauki i sztuki poznania. Osobę, która próbuje podjąć dyskusję na temat, o którym nie ma żadnego pojęcia, z reguły można rozpoznać po kilku sekundach. Pamiętaj o tym.

Staraj się czytać blogi, choć zważ na to, że nie jest to żaden wyznacznik Twojej wiedzy, o czym nieliczni próbują przekonywać. Jeśli blogi, to nie tylko polskie (tym bardziej, że bardzo mało jest tych wartościowych). O JavaScript absolutnie fantastyczne rzeczy tworzy John Resig (twórca jQuery), jest genialny Dean Edwards, Paul Bakaus, Valerio Proietti. To tylko kilka nazwisk, bo o JS i CSS piszą tysiące osób. Bardzo pomocne są też serwisy typu A List Apart czy też Ajaxian.com, gdzie zgromadzone są najnowsze wiadomości i projekty z branży.

Zauważ, że posiadanie sprzętu Apple lub pisanie Twittera/Blipa nie czyni Cię specjalistą. Wiedz, że na Macu nie zobaczysz 64-bitowej palety kolorów, a to że Zeldman twitteruje nie robi Cię jego kumplem od wódki. Jeśli mimo wszystko stawiasz powyższy fakt za swoje ewidentne zalety, powinieneś zaznajomić się ze znaczeniami ekshibicjonizmu i jego pochodnymi.

Ucz się języka obcego, najlepiej angielskiego. Większość ważnych rzeczy mówi się tutaj w języku Szekspira. W prestiżowych firmach komunikacja z klientem bardzo często odbywa się po angielsku. Z kolei, jeśli Twoje aspiracje sięgają naprawdę wysoko, raczej nie dosięgniesz nieba w Polsce. Niestety, pierwsza liga front-endu gra za granicą. Sam fakt, jak mało mają tam do powiedzenia Polacy, świadczy o tym, że możemy traktować nasz kraj jako branżowy zaścianek.

Bądź krytyczny i szczery w swoich osądach, nie bój się wyrażać własnych opinii. Jeśli projekt dyskutowany jest pod kątem dziedziny, w której jesteś ekspertem, narzuć swoje zdanie i przede wszystkim przedstaw stosowne argumenty. Broń swojej wiedzy! Kto ma wiedzieć cokolwiek o dostępności, jak nie specjalista front-end? Oczywiście, sugestie innych osób są cenne, jednak ostateczne zdanie powinno należeć do Ciebie.

Fajne rzeczy o rozwoju osobistym pisze Alex Barszczewski.

Użyteczność

Sądzę też przekornie, że użyteczność to jedna z największych pułapek, jakie wyprodukował webdevelopment w ostatnich latach. Podstawowe terminy użyteczności stron www są jak najbardziej zasadne, jednak im dalej w las, tym więcej drzew. Tak naprawdę, wiele aspektów użyteczności jest sprawą dyskusyjną i to, dlaczego, przyjmijmy umownie, link jest czerwony, a nie niebieski, w gruncie rzeczy determinuje kontekst, zamierzony cel i dziesięć innych czynników, których nie znajdziemy w szablonowych książkach o usability.

Jest to działka, w której najwięcej mają do powiedzenia krzykacze. Ubzdurało im się, że znają się na użyteczności, bo przeczytali kilka mądrych książek. Większość sporów o usability danego elementu na stronie można podważyć “pierwszą lepszą” publikacją książkową. Dlatego też najgorsze argumenty, jakie możesz użyć w dyskusji o usability, tyczą się fanatycznego powoływania na konkretnego autora i rzekomego specjalisty od użyteczności. Nikt jeszcze nie wymyślił złotego środka, a książki o usability wskazują jedynie na najpopularniejsze problemy!

Przede wszystkim radzę myśleć! Użyteczność to nie proste regułki. To nie wersety z książek, które często powielają banały lub które są po prostu słabe (vide publikacje Kasperskiego). Nie idź na łatwiznę. Dopatruj się kontekstu, przeprowadzaj testy z użytkownikami, dyskutuj z kolegami po fachu! Nie ma nic bardziej zbawiennego, niż solidna burza mózgów, poparta konkretnymi argumentami merytorycznymi. Wiele publikacji aspiruje do bycia tak uniwersalnym, jak tylko sie da. Nie daj się nabrać, tym bardziej, że jest to ostatnio niezwykle chwytliwy temat. Specjalistów od użyteczności przybywa niczym cinkciarzy pod Pewexem, dlatego powtórzę jeszcze raz – myśl!

Prototypowanie

Doceń prototypy i testy z użytkownikami. Muszę stwierdzić, że wcześniej rzadko korzystałem z papierowych bądź elektronicznych prototypów. Designy od początku do końca projektował dla mnie grafik, zgodnie ze słownymi wytycznymi. Jakież to amatorskie podejście! Profesjonalny projekt powstaje stopniowo. Najpierw pracuje się nad wymaganiami, potem wkracza front-endowiec, który ma za zadanie przedstawić prototyp funkcjonalności strony. Nie projektuje on designu, ale ustala layout, rozmieszczenie buttonów, warstw, menu i wszystkiego, co tyczy się www. Przy okazji projektuje on większość aspektów użyteczności strony. Prototyp ułatwia pracę wszystkim – klientowi, designerowi, back-endowi i Tobie oczywiście. To na etapie prototypu powinny być wyjaśniane wszystkie wątpliwości. Tutaj ustalany jest ostateczny, podkreślmy to, kształt aplikacji. Wszystko po to, by potem zająć się tylko i wyłącznie kodowaniem oraz testowaniem.

Profesjonalne prototypy można tworzyć np. w Axure.

Prawdopodobnie to nie wszystko, co można by napisać na ten temat. Uczymy się jednak na błędach, a kolejne akapity dopisze życie, z pewnością…