Rozmawiałem kiedyś z moim dobrym znajomym o tym, jak trudno znaleźć do teamu programistę front-endu płci przeciwnej. Ichni HR, wspierany przez decyzje wewnątrz zespołu, intensywnie forsował pewne zmiany w jego strukturze, nasuwając temat zaangażowania programistki. Niestety na próbach się skończyło – w pewnej fazie nie było kandydatek, a kiedy się znalazły, nie przechodziły przez interview. Tak było kilka lat temu.

Larissa Meek

Ostatnio znów zainteresował mnie ten temat, a to przy okazji konferencji Front-end Design Conference, gdzie wśród siedmiu spikerów, sześć to kobiety! I to o niebagatelnej urodzie i umiejętnościach. Nigdy nie spodziewałbym się, że aż tyle barwnych osobowości pracuje we front-endzie (pomijam tutaj osoby zajmujące się tylko i wyłącznie dizajnem). Larissa Meek na przykład to Pani grafik z zacięciem koderskim, która ma też dość spore doświadczenie w modelingu. Sarah Parmenter to z kolei piękna UX designerka z Leigh-on-Sea, która w wolnych chwilach pracuje przy… remontowaniu domów. Na FDC przemawiała też Jina Bolton, specjalistka od CSS, pracująca do niedawna w Apple jako front-end developerka. Mógłbym opisać każdą z nich, ale to, co nasuwa się na myśl, to przełamanie pewnych stereotypów. Po pierwsze – tak, w tej branży są kobiety – i to nie tylko dizajnerki, a po drugie – obraz siedzącej w domu geek-okularnicy dobrej z matematyki możemy włożyć między bajki. Od tych dziewczyn aż bije pasja. Robią po sto różnych rzeczy i wsadzanie ich w jakiekolwiek ramy byłoby ogromnym nadużyciem.

Sarah Parmenter

Front-end Design Conference to jedno. Front-endem na świecie zajmuje się także wiele innych kobiet. Jedną z najbardziej znanych jest Nicole Sullivan, która parała się CSSem m.in. w Yahoo! i często występuje na różnych konferencjach branżowych – na przykład promując swój OOCSS. Wśród znanych kobiet front-endu należy wymienić Molly E. Holzschlag, pasjonatkę web standardów, autorkę ponad 35 książek o tej tematyce (za Wiki). Oczywiście jest również Amy Hoy, bardzo zdolna programistka Ruby i JavaScript, prywatnie partnerka Thomasa Fuchsa, twórcy script.aculo.us.

Nicole Sullivan

To tylko kilka z najbardziej rozpoznawalnych kobiet we front-endzie na świecie. Polska społeczność może znać również Inayaili de León, która wystąpiła na tegorocznym SparkUpie. Wkrótce do Polski przyjedzie natomiast Lea Verou z Grecji, która w zasadzie reprezentuje nową falę młodych i zdolnych dziewczyn, znających front-end lepiej niż niejeden mężczyzna. Lea przez dwie godziny omówi najnowsze tajniki CSS3 na konferencji Front-Trends 2010 w Warszawie.

Inayaili de León

Generalnie rzecz biorąc, tendencja pojawiania się kobiet w tym zawodzie jest rosnąca. Racja, od zawsze było w tej branży wiele dizajnerek, jednak teraz czas także na specjalistki HTML, CSS i czasem JS. Co ciekawe, prawie każda z nich posiada naprawdę piękne strony prywatne, co tylko potwierdza, że wrodzona estetyka to duża zaleta kobiet w tej dziedzinie. Google z kolei sponsoruje konferencję JSConf.eu w unikalny sposób, ogłaszając konkurs tylko dla kobiet, gdzie do wygrania jest darmowa wejściówka oraz zwrot kosztów przejazdu.

Aleksandra Drachal

A jak wypada Polska? Tak sobie. Jest jeszcze duży, niewykorzystany potencjał. Co prawda, mój znajomy w końcu znalazł programistkę, ba, nawet kilka, ale patrząc na temat nieco z szerszej perspektywy, stwierdzam, że jest dużo do zrobienia. Oczywiście są dizajnerki, a do najzdolniejszych zaliczam przede wszystkim Aleksandrę Drachal. Jest też Helena Pryłowska (Pani grafik z bardzo dobrym warsztatem, aczkolwiek widzę jeszcze potencjał) czy też dziewczyny z WitFlow, którym UX niestraszny.

Z programistek front-endu kojarzę natomiast Kamilę Romanowską czy Karolinę Szczur. Niestety, ale o ile w grafice webowej znalazłbym jeszcze kilka, może kilkanaście nazwisk, tak w kodowaniu front-endu bardzo ciężko jest mi wymienić kobietę, która w dodatku prowadziłaby swojego bloga lub twittera. Tłumaczy to poniekąd GoldenLine, gdzie znalazłem jedynie 53 nazwiska na słowo “programistka”. Chyba nie musimy czekać na to, aż program Dziewczyny na Politechniki zaowocuje większą ilością kobiet we front-endzie?

O ile na świecie jest wiele programistek i dizajnerek, tak w Polsce musimy jeszcze poczekać choćby na pierwszą Polkę wyróżnioną np. na Ajaxianie czy A List Apart. Trochę brakuje nam swego rodzaju rockstarów, a już na pewno tych płci przeciwnej. Kobiet, które udzielają się na swoim blogu, twitterze, w komentarzach u innych. Przydałby się taki kobiecy Wojtek Zając, Patrys, Ludwik, czy Riddle, prawda? Inny (kobiecy) punkt widzenia jest zawsze w cenie. W dodatku nasila się tendencja zatrudniania kobiet w wielu firmach w celu balansowania przewagi płci męskiej w zespołach. Jest to dobra wiadomość dla kobiet, chcących działać w tym kierunku. Myślę, że na przestrzeni następnych 10 lat zmieni się jeszcze wiele w tym temacie. Tymczasem zapraszam wszystkie kobiety do webowego front-endu wzorem koleżanek z zachodu. To naprawdę kreatywna i fajna branża, czyż nie?

Wypada też wspomnieć, że przygotowaliśmy już teraz kilka niespodzianek. Kilka z nich ujawniamy już teraz. Oto pierwsi speakerzy Front-Trends 2010 specjalnie dla uczestników konferencji:

Wkrótce więcej tego typu filmików, a to tylko początek – wszystkie będziecie mogli znaleźć na specjalnym kanale YouTube. A propos, żaden event nie może odbyć się bez towarzyszącej mu imprezy, prawda? ;-)

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.

Na posta o HTML5 pewnie przyjdzie jeszcze czas, pozwolę sobie wymienić tylko, ze strona działa o wiele lepiej z wyłączonymi obrazkami (wypróbowałem chyba wszystkie metody image-replacementu). Dodałem też możliwość pokazywania kodu w dwóch trybach. Teraz możecie przełączyć się do czystego tekstu i spokojnie skopiować kod bez numerów linii i tak dalej:

if (blog === "ferrante") {
	alert("dobrze trafiłeś, przyjacielu");
}

Co do kolorowania składni – zostawiam je Waszym edytorom, dość ciężko dobrać coś do obecnego designu… Poza tym widoczne są teraz 3 najpotrzebniejsze tagi do pisania komentarzy¹ na tym blogu. Mam nadzieję, że teraz nikt nie będzie stronił się od pisania kodu czy cytowania.

Oprócz tego nie szczędziłem sobie selektorów, takich jak nth-child czy first-child, więc nawet nie otwierajcie strony w Internet Explorerze.

Przemeblowałem trochę blogrolla – jeśli znacie jakiś ciekawy blog po polsku dajcie znać, zdecydowanie za mało tam polskiej myśli technicznej…

Z ciekawych rzeczy, można znaleźć mnie na Twitterze, chociaż muszę stwierdzić, że jak na razie nie jest to mój ulubiony kanał komunikacji. Może czas to zmieni, kto wie. Poza tym varJS.com nabiera rozpędu i prawdopodobnie blog ruszy w tym miesiącu. Będzie się działo, choć niestety nie doszły mnie jeszcze słuchy, że doba zwiększyła liczbę godzin. Niestety. Cały czas brakuje mi czasu na pracę typowo researchingową. Staram się to zmienić – byłoby to z korzyścią dla tego bloga i dla moich projektów. Trzymajcie kciuki.

1. Przy okazji zwracam uwagę, że a) tutoriale do JS i jQuery są dość stare (kiedy jQuery było w wersji 1.1, stąd możliwe niescisłości) b) nie jest to tablica ogłoszeń – po odpowiedzi na pytania zapraszam na specjalistyczne forum. Tam na pewno ktoś Wam pomoże!

Co jednak dzisiaj istotne, wydałem prawie 250-stronicowy, długo oczekiwany materiał PDF ze szkoleń i mojego dotychczasowego researchu o nazwie Just Advanced JavaScript. Książka, a w zasadzie slajdy mają charakter ściągawki – opisana została lwia część języka oraz mnóstwo ciekawostek i haczyków. Wszystko znajdziecie pod varJS.com – serdecznie zapraszam! Prawdopodobnie wkrótce rozszerzę to o kolejne rozdziały i linki do innych pożytecznych stron, które również możecie tam spotkać.

Niniejszym dziękuje Rafałowi Kukawskiemu oraz Lei Verou, którzy odpowiadali za korektę i poprawę ewentualnych błędów merytorycznych. Z całego serca polecam współpracę z nimi, prawdziwi eksperci!

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.

Wyobraźmy sobie, że nie odpowiada nam dzielenie kodu na konstruktory i rozszerzanie ich prototypów:

var Animal = function(age) {
	this.age = age;
};
Animal.prototype.getAge = function() { return this.age; };
Animal.prototype.setAge = function(age) { this.age = age; };

var Dog = function(age) {
	this.setAge(age);
};
Dog.prototype = new Animal; // dziedziczymy po Animal
Dog.prototype.constructor = Dog;
Dog.prototype.getVoice = function() { return "hau hau"; }

Używamy tego w ten sposób:

var dog = new Dog(10);
dog.getVoice(); // hau hau
dog.getAge(); // 10

W przypadku dużych i rozbudowanych systemów może rodzić to pewne kłopoty z utrzymaniem i czystością kodu. W związku z tym powstały abstrakcje klas. Stosując jedną z nich, można by napisać tak:

var Animal = new Klass({
	Init: function(age) {
		this.setAge(age);
	},
	age: null,
	getAge: function() { return this.age; },
	setAge: function(age) { this.age = age; }
});

var Dog = new Klass({
	Extends: Animal,
	getVoice: function() { return "hau hau"; }
});

Powiedzmy sobie szczerze – jest to bardziej przejrzyste rozwiązanie, pozwalające na stworzenie lepszej dokumentacji, testów i tak dalej. Jest też, sądzę, łatwiejsze do zrozumienia dla developerów nie mających zbyt dużego rozeznania w JavaScript. Zobaczmy więc, jak można coś takiego łatwo stworzyć.

Pierwsze, co jest nam potrzebne, to odpowiedni konstruktor Klass.

var Klass = (function() {
// ...
})();

Jak widać, w tym momencie Klass ma wartość undefined – to jasne, ponieważ funkcja nie mająca zdefiniowanego return zwraca undefined. Jako że mamy zamiar używać Klass w ten sposób – new Klass({}); – wiemy, że pod Klass musi znajdować się jakiś konstruktor, przyjmujący argument, który będzie zawierał pola i metody przyszłych klas. Szybka korekta i możemy iść dalej:

var Klass = (function() {
	return function(classDefinition) {};
})();

Dobrze, pora zająć się metodami Init, uruchamiającymi się podczas konstruowania przyszłych obiektów z naszych klas. Zdefiniujmy sobie zmienną dummyClass, która będzie z kolei konstruktorem-funkcją. Będziemy dekorować ją potem atrybutami z classDefinition.

var Klass = (function() {
	return function(classDefinition) {
		var dummyClass = function() {
			this.Init && typeof this.Init === "function" && this.Init.apply(this, arguments);
		};

		return dummyClass;
	};
})();

Co dzieje się w dummyClass? Sprawdzamy po kolei, czy po wywołaniu new JakasNaszaKlasa istnieje coś takiego jak metoda Init, która ma pełnić rolę konstruktora. Następnie upewniamy się, że jest to funkcja, by potem odpalić ją poprzez this.Init.apply(this, arguments).

Nasza dummyClass musi jednak jakoś wiedzieć o Init, którą możemy podać w classDefinition. Zresztą, tak jak o innych polach i metodach naszych przyszłych klas. Najlepiej będzie więc przepisać wszystko z classDefinition do prototypu dummyClass:

var Klass = (function() {
	return function(classDefinition) {
		var dummyClass = function() {
			this.Init && typeof this.Init === "function" && this.Init.apply(this, arguments);
		};

		for (var member in classDefinition) {
			if (classDefinition.hasOwnProperty(member)) {
				dummyClass.prototype[member] = classDefinition[member];
				classDefinition[member] = null;
			}
		}
		return dummyClass;
	};
})();

Zrobiliśmy to prostą iteracją przez wszystkie klucze classDefinition, a więc w wypadku klasy Animal iterujemy przez:

Init: function(age) {
	this.setAge(age);
},
age: null,
getAge: function() { return this.age; },
setAge: function(age) { this.age = age; }

Sprawdźmy, czy nasz dotychczasowy kod działa:

var Animal = new Klass({
	Init: function(age) { this.age = age; },
	age: null
});
var zwierze = new Animal(10);
alert(zwierze.age); // 10

Jest fajnie, ale brakuje czegoś istotnego. Oczywiście chodzi o dziedziczenie, które zadziała, kiedy podamy w definicji klasy słówko Extends.

var Klass = (function() {
	return function(classDefinition) {
		var dummyClass = function() {
			this.Init && typeof this.Init === "function" && this.Init.apply(this, arguments);
		};

		if (typeof classDefinition.Extends === "function") {}
		delete classDefinition.Extends;

		for (var member in classDefinition) {
			if (classDefinition.hasOwnProperty(member)) {
				dummyClass.prototype[member] = classDefinition[member];
				classDefinition[member] = null;
			}
		}
		return dummyClass;
	};
})();

Umiejętnie rozpoznaliśmy sytuację, kiedy należy rozszerzyć klasę potomną o klasę bazową. Następnie usunęliśmy wartość Extends, by nie była kopiowana w pętli, chociaż to od nas zależy. Równie dobrze można by ją zostawić.

Wiemy, że musimy rozszerzyć dummyClass o classDefinition.Extends. Automatycznie myślimy więc o prototypach, które należy przekazać do classDefinition. Można więc zrobić tak:

dummyClass.prototype = classDefinition.Extends.prototype

Jak wiemy, wartość .prototype jest referencją do obiektu. Jeśli więc coś zmieni się w prototypie classDefinition.Extends, zmieni się również w prototypie dummyClass.

Słowem, dwa różne obiekty korzystałyby z tego samego prototypu, co może wywołać wiele zagrożeń. Zaradzić temu można w ten sposób:

var Klass = (function() {
	return function(classDefinition) {
		var dummyClass = function() {
			this.Init && typeof this.Init === "function" && this.Init.apply(this, arguments);
		};

		if (typeof classDefinition.Extends === "function") {
			var temp = function() {};
			temp.prototype = classDefinition.Extends.prototype;
			dummyClass.prototype = new temp;
			temp = null;
		}
		delete classDefinition.Extends;

		for (var member in classDefinition) {
			if (classDefinition.hasOwnProperty(member)) {
				dummyClass.prototype[member] = classDefinition[member];
				classDefinition[member] = null;
			}
		}
		return dummyClass;
	};
})();

I tak właśnie powstała dość funkcjonalna fabryczka klas, choć z wieloma ograniczeniami, które z pewnością łatwo dostrzeżecie. Brakuje, co ważne, metody na wzór super(), która odnosiłaby się do analogicznych metod z klasy bazowej. Zadanie to postaram opisać się później. Temat poruszę też prawdopodobnie także na następnym szkoleniu.

Na koniec wypada przetestować nasz kod:

var Animal = new Klass({
	Init: function(age) {
		this.setAge(age);
	},
	age: null,
	getAge: function() { return this.age; },
	setAge: function(age) { this.age = age; }
});

var Dog = new Klass({
	Extends: Animal,
	getVoice: function() { return "hau hau"; }
});

var pies = new Dog(10);
pies.getVoice(); // "hau hau";
pies.getAge(); // 10
pies.setAge(100);
pies.getAge(); // 100
pies instanceof Animal; // true
pies instanceof Dog; // true