JavaScript

[Zakończony] Czytaj, nie pytaj! Konkurs – edycja #5

21 marca 2016 / Michał Kortas

Zwycięzcami są: Magda, Artur i Jacek. Czekamy na kontakt zwrotny na wiadomość e-mail :)

Co dwa tygodnie, w poniedziałki do wygrania wystawiać będziemy trzy sztuki wybranej przez Was wcześniej książki (papier lub ebook do wyboru) od wydawnictwa Helion.

W czwartej edycji do wygrania jest książka Szybki kurs JavaScript. Wprowadzenie do języka w 24 godziny, dzięki której w szybki sposób zaznajomisz się z językiem JS.

Co zrobić, aby wygrać?

Udziel odpowiedzi na dwa poniższe pytania, wysyłając je na adres [email protected]
W tytule wiadomości koniecznie wpisz Konkurs 5

Pytania konkursowe

Czy JavaScript jest językiem obiektowym?
Czy istnieje domena .blackfriday?

Partnerem konkursu jest Wydawnictwo Helion.
Niezawodnym partnerem technologicznym jest dhosting.

Opis książki na Helion.pl

Krótki regulamin

Na odpowiedzi czekamy do godziny 18:00, do dnia jutrzejszego (tj. 22.03.2016)
Nie liczy się kolejność zgłoszeń, a ich poprawność
Z pośród poprawnych odpowiedzi wybierzemy trzy osoby, które otrzymają nagrody w postaci książki lub e-booka
W żaden niepożądany sposób nie wykorzystamy Waszych adresów e-mail. Skontaktujemy się tylko i wyłącznie w celu ustalenia sposobu dostarczenia przez nas nagrody
Na odpowiedź zwrotną czekać będziemy 24 godziny, po tym czasie (w przypadku braku kontaktu) możemy wybrać kolejną osobę.

Zapraszamy serdecznie do zabawy :)

Tagi: czytajniepytaj • JavaScript • konkurs

[Zakończony] Czytaj, nie pytaj! Konkurs – edycja #3

22 lutego 2016 / Michał Kortas

Klaudia, Anna i Waldemar zostali zwycięzcami tej edycji. Czekamy na wiadomości zwrotne. Dziękujemy za udział w zabawie!

Co dwa tygodnie, w poniedziałki do wygrania wystawiać będziemy trzy sztuki wybranej przez Was wcześniej książki (papier lub ebook do wyboru) od wydawnictwa Helion.

W trzeciej edycji do wygrania jest książka PHP, MySQL i JavaScript. Wprowadzenie, dzięki której szybko nauczysz się korzystania z języka skryptowego PHP, poznasz zasady działania baz danych MySQL oraz poznasz JavaScript.

Co zrobić, aby wygrać?

Udziel odpowiedzi na dwa poniższe pytania, wysyłając je na adres [email protected]
W tytule wiadomości koniecznie wpisz Konkurs 3

Pytania konkursowe

Jak nazywa się metoda, która wywoływana jest jako konstruktor w języku PHP?
Do czego służy konstruktor w programowaniu obiektowym (np. PHP)?
Czy ukrywanie danych abonenta domeny .eu w bazie WHOIS dla osób prywatnych jest domyślnie aktywne?

Partnerem konkursu jest Wydawnictwo Helion.
Niezawodnym partnerem technologicznym jest dhosting.

Opis książki na Helion.pl

Krótki regulamin

Na odpowiedzi czekamy do godziny 18:00, do dnia jutrzejszego (tj. 23.02.2016)
Nie liczy się kolejność zgłoszeń, a ich poprawność
Z pośród poprawnych odpowiedzi wybierzemy trzy osoby, które otrzymają nagrody w postaci książki lub e-booka
W żaden niepożądany sposób nie wykorzystamy Waszych adresów e-mail. Skontaktujemy się tylko i wyłącznie w celu ustalenia sposobu dostarczenia przez nas nagrody
Na odpowiedź zwrotną czekać będziemy 24 godziny, po tym czasie możemy wykonać losowanie uzupełniające w przypadku braku kontaktu

Zapraszamy serdecznie do zabawy :)

Tagi: czytajniepytaj • ebook • JavaScript • konkurs • książka • MySQL • PHP

Recenzja: Tajemnice JavaScriptu. Podręcznik ninja

14 września 2014 / Comandeer

JavaScript to język programowania, który wymaga od programisty szerokiej wiedzy i dokładności. Chwila nieuwagi może spowodować poważne problemy, trudne do wykrycia. Jak sobie radzić w tym wymagającym środowisku? Jak zwinnie poruszać się pomiędzy zastawionymi pułapkami?

Źródło: Helion.pl

Tytuł + nazwiska nadają tej książce status pożądanej przez każdego kodera JS. Kto bowiem nie chciałby stać się wojownikiem ninja, pod okiem takiego mistrza, jak John Resig?

Tłumaczenie

Zacznę nietypowo, bo to główna rzecz, jaka rzuca się w oczy: tłumaczenie jest po prostu tragiczne. Część zdań jest napisana całkowicie niezrozumiale. Nie to jest jednak głównym mankamentem. Prawdziwym problemem są strasznie dziwne polskie tłumaczenia niektórych ogólnie przyjętych pojęć. Nie wiem kiedy w Helionie zrodziła się myśl, żeby każdy termin angielski tłumaczyć na polski odpowiednik. Niemniej efekty takich działań są czasami komiczne. Mamy zatem „funkcje bezpośrednie” zamiast IIFE (który to skrót występuje wszędzie), mamy „pakiety testów” zamiast… frameworków testowych czy też… „procesy robocze standardu HTML5” (oczywiście chodzi o standard Web Workers, który nawet nie jest częścią specyfikacji HTML5). Ale już prawdziwym mistrzostwem jest „niepozorny kod JS” (który nagle w innym miejscu książki staje się „dyskretnym kodem JS”). O czym mowa? O technice unobtrusive JS.

Oczywiście nigdzie przy polskich terminach nie ma podanego ich odpowiednika angielskiego, więc jeśli ktoś nie zna pojęć związanych z programowaniem w JS, to po przeczytaniu tej książki… dalej ich nie będzie znał. Za to będzie rozróżniał dziwne polskie odpowiedniki, których nikt po prostu nie używa. Moim zdaniem w książce powinna zostać użyta konwencja odwrotna: termin angielski (tłumaczenie na polski). I to winno być jedyne miejsce wystąpienia polskiego terminu. Raczej powinno się zapoznawać ludzi z używanymi zwrotami a nie sztucznie wykreowanymi na potrzeby książki. Byłem w stanie rozpoznać o co chodzi tylko i wyłącznie dlatego, że te pojęcia znam i kod na nie wskazywał… Niemniej i tak miałem problem z rozdziałem „Analizowanie kodu w środowisku wykonawczym”, który traktował o eval. I nie uwierzę, że w oryginale było analizowanie a nie interpretacja. I mam rację – w oryginale jest: „evaluation”, co nie ma prawa zostać przetłumaczone jako analizowanie…

I ostatni kwiatek, którego po prostu nie można pominąć: Java ma się do JS jak… szynka do hamburgera. Cóż, w angielskim ma to sens (ham ↔ hamburger), ale w polskim – absolutnie nie. Jest tyle innych takich par w naszym języku (kot ↔ kotara, koń ↔ koniak, blacha ↔ blachara…) – całkowicie nie rozumiem decyzji z pozostawieniem tłumaczenia dosłownego.

Tłumaczenie po prostu zabiło tę książkę. A szkoda.

Zawartość

Mimo wszystko tłumaczenie nie jest głównym grzechem tej książki. Pod względem merytorycznym również mocno odstaje od poziomu, jaki deklarują nazwiska autorów.

Książka podzielona jest na 4 części:

Przygotowania do treningu
Trening ucznia
Trening wojownika
Trening mistrza

W przygotowaniach de facto jedyne, czym się zajmujemy, to tworzeniem własnego „pakietu testów” (czyli – jak już wspominałem – frameworka testowego). Tworzone jest m.in. grupowanie testów. Niestety, w całej reszcie książki jedyną rzeczą, którą z tego wyniesiemy, jest funkcja assert, która będzie równocześnie służyła za… funkcję logującą (cóż, to się nazywa reużywalność, prawda?). W tej części książki dowiadujemy się także, że co prawda JS nie działa już jedynie w przeglądarkach (jedyne miejsce, gdzie wspomniana jest nazwa node.js), jednak ta książka i tak jest JS browserowemu poświęcona. Tym samym można skreślić na starcie „JavaScriptu” z tytułu, bo to książka o dostosowywaniu kodu do IE (niestety).

Część druga książki to jedyna w miarę sensowna rzecz, jaka tutaj jest. Ale i tak nie do końca. Po zapoznaniu się z nią można dojść do błędnego wniosku, że JS jest językiem funkcyjnym, z na chamca dodaną wybrakowaną obiektowością (lol, nie ma klas) a głównym terminem w JS jest pojęcie „funkcja to obiekt pierwszej klasy”. Funkcjom poświęcono aż 3 rozdziały, lecz i tak zabrakło miejsca na to, żeby dokładnie wyjaśnić hoisting czy magiczne słówko this. O Function.prototype.bind można w ogóle zapomnieć a dlaczego – to o tym później. Obiektom poświęcono natomiast tylko jeden rozdział, gdzie nie do końca wyjaśniono całą rzecz z prototypami i nawet nie pokuszono się o wytłumaczenie innego patternu konstruktorów niźli jedynie przez słówko new. Jedyna fajna rzecz z obiektówki, którą pokazano, to metoda tworzenia subklas z odwołaniem do rodzica. Ponadto przy literałach liczbowych i wywoływaniu ich metod podano nie do końca prawidłowe informacje (np nie podano w ogóle 5..metoda). Ewidentnie widać, że autorzy traktują po macoszemu obiektowe możliwości JS, skupiając się w pełni na jego funkcyjnej stronie.

Co jeszcze w tej części? Pean na cześć wyrażeń regularnych. Owszem, są bardzo potrzebne, niemniej w rozdziale im poświęconym nie pokazano zbyt wiele przykładów wskazujących na ich nieodzowność w arsenale każdego JS ninja (i nie, trim nie jest dobrym przykładem). Na sam koniec zapoznajemy się z licznikami czasu, gdzie równocześnie bliżej wytłumaczone jest pojęcie event loop. Szkoda, że o Web Workers jest jedynie króciutka wzmianka i nic więcej (a o setImmediate nawet tego nie ma).

Trzecia część to już niestety zbiór quirków w przeglądarkach oraz przestarzałych praktyk. Zaczynamy od rozdziału o „analizowaniu” kodu i poznajemy eval, którego później używamy do… parsowania JSON. Tak, autorzy zdają sobie sprawę z istnienia JSON, ale przecież on nie działa wszędzie i należy znać eval. Aż spojrzałem z niedowierzaniem na datę powstania książki – 2013. Naprawdę? JSON w JS jest od co najmniej 2012 a jedyne przeglądarki, które tego nie mają to naprawdę prehistoryczne IE (IE 8 już wspiera!). W kolejnym rozdziale jest jeszcze gorzej: prezentowana jest instrukcja with. Naprawdę ta instrukcja potrzebuje aż osobnego rozdziału i traktowania na tym samym poziomie, co programowanie obiektowe? Najlepsze jest, że przez cały rozdział nieustannie jest powtarzane, że tego mechanizmu nie powinno się używać… więc po co marnuje się czas – mój na czytanie, autorów na pisanie? Natomiast później po prostu dowiadujemy się czym jest feature detection oraz uczymy się używać element.style. A to już niestety nie jest JS.

Ostatnią część – czyli trening mistrza – autorzy mogli sobie po prostu darować. Nie ma nic wspólnego z JS a z pisaniem owijaczy DOM-owych dla naprawdę starych IE (naprawdę w 2013 roku należy napisać a w roku 2014 wydać książkę traktującą o błędach w IE9-?). Nie dość, że nie ma to nic wspólnego z JS, to jeszcze jest po prostu przepisywaniem jQuery. A jeśli ktoś jest mistrzem JS (lub do tego miana pretenduje), to kod jQuery czyta sobie na deser.

Tak, ¾ książki o tajemnicach JS traktuje o błędach w implementacji modelu DOM. I nie w nowoczesnych przeglądarkach, ale IE w wersjach 6, 7 i 8. Tak, to książka z 2013 roku. Zamiast mieć fantastyczny rozdział o własnej implementacji systemu eventowego, z podglądaniem takich rozwiązań, jak EventEmitter w node.js, skupiamy się na patchowaniu modelu zdarzeń DOM, żeby zapobiec wyciekom pamięci i innym dziwnym rzeczom w przeglądarce MS. To nie jest trening ninja – to nauka jazdy czołgiem. A co w tym wszystkim jest najśmieszniejsze? Że na samym początku autorzy sami stwierdzają, że DOM to zupełnie inna bestia niż JS i nie należy winić języka za niedoskonałość tego (jednego z najgorzej zaprojektowanych w historii) API. Gdzieś koło 11. rozdziału jakby o tym stwierdzeniu całkowicie zapominali i DOM staje się integralną częścią JS w przeglądarce.

I w sumie jedyne, co autorów interesuje, to obsługa IE i całej reszty. Standard ES5 jakby w ogóle dla nich nie istniał. Można spotkać niestandardowe implementacje String.prototype.trim czy metody forEach (dziwnym trafem jest de facto przekopiowana z jQuery). Kiedy natomiast już pojawiają się informacje o nowych możliwościach, to zamiast odnośnika do standardu ES, jesteśmy raczeni informacjami o wersjach JS, typu JS 1.6, 1.85… To wyłącznie numeracja Mozilli, nie mająca nic wspólnego z prawdziwym, standardowym JS. Co więcej – każdej nowości jest poświęcona raptem krótka notatka (no bo przecież nie można ich używać – ninja tak nie robią!). Zamiast uczyć prawdziwego, czystego JSa, ta książka zachęca do tworzenia obejść, hacków i wszelkiej maści polyfillów w celu wspierania starych przeglądarek (Safari 3, Opera 10, Firefox 3, IE9-…). Ba, większość przykładów z książki nie ma prawa zadziałać w strict mode (mimo że autorzy go znają i to bardzo dobrze!) z powodu niewłaściwego używania this (w strict mode jeśli this jest poza kontekstem obiektu, to jest undefined a nie window) czy też arguments.callee.

Praktycznie w ogóle nie jest poruszony temat asynchroniczności JS. Jedynie liczniki czasu coś do tego tematu wnoszą. Niestety o requestAnimationFrame czy setImmediate nie ma ani słowa. Nie wspominając już o promises czy generatorach. A obecnie wszystkie API w JS są na obiecankach lub eventowe. Co więcej – zdarzenia niestandardowe w książce są… obsługiwane niestandardowo. Wypadałoby chociaż wspomnieć o Custom Event z DOM. Całkowicie zignorowano także temat modułów, co dzisiaj jest całkowitą podstawą. No i JS ninja kojarzy mi się z wykorzystaniem takich technik, jak object pooling i unikanie garbage collectora (i wszystkie inne rzeczy dotyczące zarządzania pamięcią). Tutaj tego nie ma…

Ocena

Jestem bardzo, ale to bardzo zawiedziony. Po tytule spodziewałem się, że wreszcie powstała porządna książka o prawdziwym JS. Okazała się jednak kolejną książką o dziwactwach IE. Z całej tej książki wyniosłem jedną, jedyną rzecz – \f jest znakiem nowej strony… Trochę mało, jak na książkę o tajemnicach JS (no i to nawet JS nie jest!).

We wstępie jest napisane, że to książka nie dla początkujących. To fakt – za mało tłumaczenia pewnych rzeczy. Jednak dla bardziej zaznajomionych z JS również nie – oni to po prostu wiedzą i robią to intuicyjnie. Ta książka po prostu nie ma targetu: dla uczących się JS jest za trudna (a tłumaczenie tylko ją dobija) a dla znających JS nie jest niczym nowym. Dodatkowo bardzo dużo w niej braków merytorycznych i zbyt dużo DOM (to „Tajemnice DOM” a nie JS…). Dlatego nie jestem w stanie dać tej książce więcej niźli 3/10.

Tagi: helion • JavaScript • nie tak dobra • recenzja

Web Components – artykuł konkursowy

14 sierpnia 2014 / Comandeer

Wakacje! Słońce, wysoka temperatura, półnagie kobiety na plaży… Meh. To najlepszy czas, żeby zaszyć się w swojej jaskinii programisty i wyhodować jakiegoś kodowego potworka. BUHAHAHAHA!

A ci z nas, którzy nie cierpią na ostre postacie agorafobii, z chęcią lubią prezentować innym efekty swej syzyfowej pracy. Ja również należę do tych ekshibicjonistów, dlatego też postanowiłem pochwalić się ideą (ok, istnieje coś w wersji mocno prealpha, aczkolwiek używalnej ;)) rodzącą się w bólach w mym umyśle. Ale od początku!

Na początku było Słowo…

…a kilkaset milionów lat później inteligentny zlepek komórek stworzył coś, co buńczucznie nazwał HTML-em. Dzięki temu wynalazkowi dzisiaj możemy oglądać słodkie kotki! Jest on także sponsorem dzisiejszego artykułu.

Któż nie zna tego wręcz prymitywnego w swej budowie języka znaczników? Wszyscy mamy z nim do czynienia na co dzień – wszak to język, w którym do nas przemawia Sieć. Lecz czy kiedykolwiek zastanawialiście się jaka to magia kryje się za tymi niepozornymi <tagami>. Na pewno nie! No bo cóż w tym takiego magicznego?

A jeśli powiem, że w tym prostym języku tkwi niesamowity potencjał, który może odmienić oblicze Sieci, naszej Sieci? „Oszalał, chce powrotu XHTML 2!” – zakrzyknie co bardziej rozgarnięty czytelnik. Sam bym za takie myśli dał sobie w pysk jakieś 2 lata temu… Ale o tamtego czasu zmieniło się bardzo dużo, by nie powiedzieć: wszystko!

Declaratives, declaratives everywhere!

Nie oszukujmy się: HTML nie powstał jako język dla zaawansowanych aplikacji. To język dla dokumentów – header nie ma nic wspólnego z titlebarem aplikacji a [data-action] nie są w stanie zastąpić sensownego data binding. Nic zatem dziwnego, że powstały całe potężne frameworki JS mające te braki naprawić: poczynając od standardowego, tradycyjnego i lekko trącego dziś myszką jQuery UI, przechodząc obok potężnego i nielubianego przeze mnie, przerośniętego ext.js na najnowszym dziecku Google, Angularze ze swoim sytemem modułów i nie do końca walidującym się HTML-em, kończąc. Żeby zrobić proste okienko z komunikatem (ok, w HTML 5 mamy dialog, który działa aż w Chrome 37+) ładujemy tonę JS-a, zamiast… umieścić odpowiedni kod HTML na stronie. Powiedzcie sami – czy nie ładniej zamiast

new Dialog({
	content: 'whatever'
	,modal: true
});

new Dialog({

content: 'whatever'

,modal: true

});

użyć po prostu:

<dialog modal>Whatever</dialog

1	<dialog modal>Whatever</dialog

Nie jest to jakiś nowy pomysł – w HTML de facto od zarania dziejów (tzn od powstania JS ;)) takie rzeczy istnieją. Najlepszym przykładem tego jest new Image, który równocześnie jest konstruktorem dla elementu img (a raczej – każdy tag img na stronie jest równocześnie obiektem Image w JS) czy też new Audio i tag audio. Oto mamy mały i poręczny element HTML, pod którym kryje się potężne JS-owe API. Jak bardzo jest to myślenie naturalne, wskazują dzieje Event Source API (aka Server Sent Events): jego pierwszą wersją był… tag eventsource, który nawet doczekał się implementacji w jednej z wersji Opery.

Ci, którzy znają XML, są całkowicie przyzwyczajeni do własnych tagów. W HTML jednak przez długie lata taka rzecz była niedostępna. Owszem, na upartego można było stworzyć sobie nowy tag, typu comandeertoboss, ale na tym nasze możliwości się kończyły. Nie było żadnego sensownego sposobu na stworzenie zależności, jak w parze new Image ↔ img. Co więcej, niektóre przeglądarki (tak, na ciebie patrzę, IE; na ciebie również, stary lisku) miały dziwne problemy ze stylowaniem tych elementów (IE potrzebował czegoś na kształt HTML5 shiv a lisek… serwowania jako XHTML). O problemach w DOM już nawet nie wspominam. Nie dało się i już. „Semantyczny” kod (tzn. taki, który po prostu dałoby się czytać) trzeba było osiągać na inne sposoby – tutaj ważne role pełniły (i wciąż pełnią!) mikroformaty oraz architektura BEM. XML-owy raj (gosh…) własnych znaczników był poza zasięgiem webdeveloperów. Do czasu…

Web Components are coming!

Choć aplikacje internetowe różnią się diametralnie od siebie (FB nijak się ma do Muro), pod maską tak naprawdę niewiele się różnią. Wszystkie stosują potężne frameworki JS do tworzenia interfejsów użytkownika. Takie rozwiązanie musi:

Udostępniać sensowny sposób tworzenia nowych elementów GUI
Posiadać system szablonów
Umożliwiać całkowitą enkapsulację (interfejs ma brać dane i tyle – co leży pod spodem, powinno być ukryte)
Być reużywalne (czyli można je zaimportować na każdej stronie WWW, która tego potrzebuje)
Posiadać system 2-way data binding lub posiadać sensowny sposób informowania o zmianach (system eventów/pub-sub)

Tylko patrząc na tą listę, każdy logicznie myślący człowiek widzi, że problemy te można rozwiązać na wiele różnych sposobów (stąd tak niesamowita liczba dostępnych frameworków JS). A jeśli powiem, że obecnie istnieje natywny mechanizm, który rozwiązuje te wszystkie problemy?

Uśmiechasz się ironicznie, prawda? Nie wierzysz mi a to już działa (tzn nie do końca, ale o tym później) i nazywa się „Web Components”. Jak sama nazwa wskazuje, składa się to z kilku elementów:

Custom elements – czyli sensowny sposób tworzenia nowych elementów GUI
Tag template – czyli sensowny system szablonów
Shadow DOM – czyli całkowita enkapsulacja
link[rel=import] – czyli całkowita reużywalność
Custom events – czyli sensowny sposób informowania o zmianach
Object.observe/DOM Mutation Observer – czyli 2-way data binding

Brzmi tak pięknie, że aż musi być haczyk, prawda? Otóż… jest, taki jak zawsze w naszym dobrym, starym webdevelopingu: kompatybilność, którą na bieżąco można sprawdzić na stronie Are We Componentized Yet?. Ale jak to zwykle bywa, istnieją polyfille. Najpopularniejsze to Polymer (którego używam i który jest o wiele bardziej rozbudowany i oprócz wspomnianych wyżej rzeczy dostajemy w prezencie Pointer Events; „minusem” jest brak wsparcia dla IE9-, ale patrząc na ranking.pl to wcale nie jest minus ;)) i X-Tags (mniej rozbudowany, skupiający się przede wszystkim na custom elements, ale za to dostajemy obsługę dla IE9+). Natywnie wszystkie te rzeczy, jak widać, działają sensownie jedynie w Chrome 36+ (no i w Operze ;)), natomiast Firefox zostaje ciut z tyłu; Safari i IE przemilczę.

Skoro już wiemy co i gdzie (nie) działa, przyjrzyjmy się bliżej wszystkim tym elementom po kolei (nie liczcie na duży tutorial – nie chce mi się ;) poza tym napisano już doskonałe – oczywiście po angielsku – do których linki podam na końcu; ten artykuł potraktujcie jako dobry overview całej technologii).

Custom elements

To najczęściej wykorzystywany element (pun intented) Web Components i ich znak rozpoznawczy. Bez tego elementu (pun not intented) cała reszta nie ma żadnego sensu. Zatem w skrócie: tak, możesz tworzyć własne elementy HTML!

I zanim polecisz tworzyć comandeertoboss, wiadro zimnej wody na ochłodę: to nie jest aż tak proste! Custom element wygląda bowiem ciut inaczej niż zwykły element:

<tag-name></tag-name>

1	<tag-name></tag-name>

Jak widać, nazwa składa się z dwóch części, przedzielonych myślnikiem. Ten myślnik jest konieczny. Dlaczego? Gdyż przeglądarka inaczej traktuje elementy bez niego i z nim. Bez myślnika przeglądarka po prostu uznaje to za nieznany, niepoprawny element… i na tym się kończy. Natomiast gdy w nazwie myślnik występuje, przeglądarka zaznacza sobie ten element jako „prawdopodobnie custom element”.

„Do rzeczy – my chcemy pełnoprawnego custom elementa!” – zakrzykną webdeveloperzy, nielegalnie czytający ten artykuł w pracy. A więc – żeby przeglądarka rozpoznawała nasz tag jako… nasz tag ;) należy użyć funkcji document.registerElement:

var TagName = document.registerElement('tag-name', {
	prototype: TagNamePrototype
});

var TagName = document.registerElement('tag-name', {

prototype: TagNamePrototype

});

Pozwoliłem sobie zapisać wynik funkcji do globalnego konstruktora TagName (dzięki temu mamy swój własny new Image – yay!). Jak widać, document.registerElement bierze jako 2. paremetr obiekt opcji, a w nim – prototyp naszego elementu. Tutaj ważne jest to, żeby obiekt TagNamePrototype dziedziczył po HTMLElement (albo jego pochodnych). Drugą opcją, obok prototype, jest extends – dzięki temu można rozszerzać już istniejące elementy; używa się ich jednak ciut inaczej:

<button is="mega-button">Nasz mega button</button>

1	<button is="mega-button">Nasz mega button</button>

Bardziej doświadczeni czytelnicy na pewno od razu zapytają czemu jest bezsensowny myślnik, skoro można to było rozwiązać za pomocą XML namespaces? Otóż: XML jest martwy ;) XHTML się nigdy nie przyjął, zatem naturalnym ruchem było wykorzystanie o wiele prostszego sposobu i to kompatybilnego ze starym HTML (tzw. bożek Backwards Compatibility).

W Sieci można znaleźć pełno custom elements, od bezsensownych po całkiem użyteczne.

template

Każda większa aplikacja webowa korzysta z systemu szablonów – nic w tym dziwnego. Jeśli kilka różnych części GUI korzysta z tego samego rozwiązania, to można to wyrzucić do szablonu i jedynie podmieniać odpowiednie dane. Dotąd, z powodu ograniczeń JS, przeważająca część systemów szablonów client-side operowała na stringach. template przenosi szablony na poziom DOM. To tak naprawdę nic innego, jak osobne drzewko DOM na naszej stronie. Co więcej – całkowicie nieaktywne. Nie musimy się martwić o to, że obrazki doczytają się bez potrzeby – zawartość template uaktywnia się dopiero po umieszczeniu wewnątrz strony. Do tego czasu wszystko w nim pozostaje nienaruszone. A jak szablonów używać?

<template id="image">
	<img src="" alt="">
</template>

<div id="image-container"></div>
<script>var template = document.getElementById('image').content //pobieramy drzewko DOM szablonu (można zrobić jego klona, żeby zostawić oryginał w spokoju)
,img = template.querySelector('img'); //z tego drzewka pobieramy obrazek

//ustalamy atrybuty obrazka
img.src = '/cos.png';
img.alt = 'Coś tam';

var parsed = document.importNode(template, true); //importujemy do dokumentu

document.getElementById('image-container').appendChild(parsed); //i używamy na naszym elemencie</script>

</template>

,img = template.querySelector('img'); //z tego drzewka pobieramy obrazek

//ustalamy atrybuty obrazka

img.src = '/cos.png';

img.alt = 'Coś tam';

var parsed = document.importNode(template, true); //importujemy do dokumentu

document.getElementById('image-container').appendChild(parsed); //i używamy na naszym elemencie</script>

Mogłoby być prostsze, ale i tak nie jest źle. A mamy za to natywny system szablonów!

Shadow DOM

Kto wie jak wygląda drzewko DOM dla elementu input? Pewnie większość z Was popuka się w czoło i stwierdzi, że zwariowałem – jakie drzewko? A to już Wam pokazuję jakie (wyciągnięte z Chrome):

<input id="input">
|
|	
	#shadow-root (user agent)
	|
	|	
		<div id="innereditor">tekst z pola</div>

#shadow-root (user agent)

<div id="innereditor">tekst z pola</div>

Zszokowani? I właśnie o to chodzi! My, jako userzy, widzimy tylko efekt końcowy – pole formularza. Cała reszta siedzi pod spodem i jest obsługiwana przez przeglądarkę. Polecam spojrzeć jak bardzo złożony pod spodem jest np tag video (na pewno ma więcej kodu niż aplikacje niejednego z nas ;)). I to jest właśnie Shadow DOM – magiczny worek, ukrywający całą implementację pod ładnie wyglądającym tagiem. Do niedawna taką moc mieli jedynie twórcy przeglądarek. Jednak Shadow DOM zostało ustandaryzowane (prawie – to najczęściej zmieniająca się specyfikacja W3C ;)) i obecnie każdy z nas może tworzyć rzeczy podobne do pola input. Jak?

<p></p>
<script>var elem = document.querySelector('p')
,shadow = elem.createShadowRoot();
shadow.textContent = 'Tekścik';</script>

<p></p>

,shadow = elem.createShadowRoot();

shadow.textContent = 'Tekścik';</script>

Tym sposobem stworzyliśmy akapit z niewidzialnym tekstem (sympatyczny kod? ;)) – nie ma go w źródle strony a inspektor elementów też niekoniecznie go pokazuje (dopóki nie zaznaczym odpowiedniej opcji w dev-tools). Oczywiście nic nie stoi na przeszkodzie, żeby włożyć tam coś bardziej skomplikowanego (Shadow DOM bardzo lubi tag template ;)) czy nawet… kolejne cieniste drzewko (because we always must be able to go deeper…).

<template id="image">
	<img src="" alt="">
</template>

<div id="image-container"></div>

<script>var template = document.getElementById('image').content
,img = template.querySelector('img')
,container = document.getElementById('image-container')
,shadow = container.createShadowRoot();

img.src = '/cos.png';
img.alt = 'Coś tam';

var parsed = document.importNode(template, true);

shadow.appendChild(parsed);</script>

</template>

,img = template.querySelector('img')

,container = document.getElementById('image-container')

,shadow = container.createShadowRoot();

img.src = '/cos.png';

img.alt = 'Coś tam';

var parsed = document.importNode(template, true);

shadow.appendChild(parsed);</script>

Zalety? Całkowita enkapsulacja! Co więcej – Shadow DOM można podpiąć pod accessibility API (czyli czytniki ekranowe to widzą) i wykorzystywać na nim ARIA. Niemniej jest to sposób na rozdzielenie prezentacji naszego custom elementu od jego treści – treść podajemy normalnie w tagu (jak zawsze), natomiast cały sposób prezentacji zamykamy w Shadow DOM (a obsługa treści w Shadow DOM jest banalna, bo wystarczy w odpowiednim miejscu wstawić tag content). Proste i skuteczne.

link[rel=import]

Największa przewaga GUI w JS nad GUI w HTML? Możliwość importu tylko tych rzeczy, których potrzebujemy, w prosty, asynchroniczny i przyjemny sposób (patrz: AMD, CJS, UMD, ES6 Modules). W HTML takiej możliwości nie było… do niedawna. Od niedawna „moduły HTML” są jeszcze prostsze do wykorzystania niźli moduły JS (i mówi Wam to wielki fanatyk JS-a!). Wyobraźmy sobie, że stworzyliśmy super wypasiony custom element, z Shadow DOM, szablonami i całym potężnym API… I mamy problem: jak go załączać na wszystkich naszych stronach? 1. myśl – inline’ujemy – odpada w przedbiegach: 1000 linijek HTML-a to jednak nie to, co tygryski lubią najbardziej. 2. myśl – AJAX i wkładanie odpowiednich zasobów w odpowiednie miejsca. Działa a my mamy asynchroniczny lazy loading… Niemniej wymaga to ciut pracy i nie zawsze musi działać.

Zatem jesteśmy pokonani? Oczywiście, że nie! Z pomocą nadchodzi link[rel=import]! Pozwala on wydzielić z naszego kodu „moduł HTML” (zatem custom element oraz to wszystko, czego potrzebuje do działania) i dołączać go do wszystkich innych dokumentów (skoro nasze API przepisaliśmy na tag, to czemu nie mamy załączać go dzięki tagowi?). Wyobraźmy sobie kod naszego wypasionego custom elementu:

<link rel="stylesheet" href="whatever.css">
<template>[…]</template>
<script src="/jquery/of/course.js"></script>

Po pewnym czasie może się to bardzo rozrosnąć… Dlatego wystarczy cały ten kod przerzucić do osobnego pliku .html i importować:

<link rel="import" href="naszwypasionycustomelement.html">

1	<link rel="import" href="naszwypasionycustomelement.html">

I tyle! Do całej zawartości zaimportowanego pliku dostaniemy się przez własność import owego link[rel=import] (tak, jak w przypadku template, tutaj również otrzymamy drzewko DOM). Tym prostym sposobem stworzyliśmy nasz 1. „moduł HTML”. Czekam z niecierpliwością kiedy Facebook i inne portale będą tak udostępniać swoje widgety.

Custom events

Każdy szanujący się custom element powinien rzucać jakieś zdarzenia. A czy jest jakiś lepszy sposób od użycia tutaj custom events?

document.addEventListener('naszEvent', function(e)
{
	console.log(e.detail.custom);
});

var event = new CustomEvent('naszEvent', {
	detail: {
		custom: 'dodatkowe dane'
	}
});

document.dispatchEvent(event);

document.addEventListener('naszEvent', function(e)

{

console.log(e.detail.custom);

});

var event = new CustomEvent('naszEvent', {

detail: {

custom: 'dodatkowe dane'

}

});

document.dispatchEvent(event);

Jak widać, można nadać zdarzeniu dowolną nazwę. Jedynym ograniczeniem jest to, że wszystkie dodatkowe dane zdarzenia są przekazywane jako event.detail. Niemniej jest to potężny DOM-owy element, pozwalający kontrolować działanie elementu (no przecież każdy z nas doskonale to wie! :D).

Object.observe/DOM Mutation Observer

Data binding w JS? Object.observe – służy do obserwowania zmian zachodzących w danym obiekcie JS i w chwili jakiejkolwiek zmiany, wykonuje daną czynność.

var o = {
	name: 'costam'
};

Object.observe(o, function(changes)
{
	changes.forEach(function(change)
	{
		console.log(change);
	});
});

o.name = 'inne coś';

var o = {

name: 'costam'

};

Object.observe(o, function(changes)

{

changes.forEach(function(change)

{

console.log(change);

});

o.name = 'inne coś';

Coś pięknego prawda? Jeśli chodzi o same DOM, tutaj tę rolę pełni Mutation Observer, którego używanie już tak przyjemne nie jest, dlatego odeślę zainteresowanych do MDN ;)

Co prawda same te mechanizmy nie tworzą nam 2-way data binding out of box, ale wystarczy kilka minut, żeby takie rozwiązanie na ich podstawie przygotować. Jeśli chodzi o ES5 – tutaj można się ładnie pobawić przy pomocy getterów/setterów i eventów, by uzyskać podobne rozwiązanie.

Co dalej?

Jaki obecnie jest najlepszy sposób na tworzenie własnych custom elements? Użycie custom elementu polymer-element!

Wszystkich zainteresowanych tym rozwiązaniem zapraszam do zapoznania się z projektem untitled-element, który jest bardzo ciekawym wrapperem dla polymer-element, generującym automatycznie dokumentację dla naszego custom elementu oraz używającym Bowera jako systemu rozprowadzania (Polymer stworzył niebotyczny ekosystem i de facto „czyste” custom elements są w zdecydowanej mniejszości).

Osobiście sam używam untitled-element, który jest podstawą mojego projektu dGUI (declarative GUI) – na razie są dwa nieskończone elementy, ale na dysku już mam zalążki kolejnych custom elementów, które w ostateczności złożą się na rozbudowane GUI aplikacji a’la desktopowej i nie tylko (node-webkit, yay!).

Większość devów oszalała na punkcie Web Components i nic dziwnego. Przepisano już połowę Sieci na nie: routery, asynchroniczne formularze, przycisk FB a nawet… console.log. Czy Web Components się przyjmą? Już to zrobiły. Czy ludzie je polubią? Już z nimi sypiają! Czy to dobrze? Tak i nie… Możliwości są bardzo duże, a wraz z nimi przyszła wielka odpowiedzialność (ale o niej to może innym razem!). Niemniej dobrze użyte WebComponents są przyszłością aplikacji webowych!

Linki i inspiracja:

Image courtesy of twobee at FreeDigitalPhotos.net

Tagi: JavaScript • promowany • Web Components

Jak uczyć się JavaScript? – książki, kursy i inne cuda…

10 sierpnia 2014 / Mr.Mr

Boom na uczenie się JavaScript nie mija. Cały czas co raz większe rzesze ludzi chcą wiedzieć jak działa ten język i jak używać go do budowania aplikacji internetowych (zresztą nie tylko internetowych). Sieć pełna jest rozmaitych zasobów, ale jak to zwykle bywa nie wszystkie są warte uwagi, inne są przeterminowane, a jeszcze inne np. niekompletne. Widać więc, że na szukającego wiedzy czycha wiele niebezpieczeństw. Ale nie bójcie się, jeśli dopiero zaczynacie Webroad.pl pomoże Wam znaleźć dokładnie to czego potrzebujecie!

Continue reading Jak uczyć się JavaScript? – książki, kursy i inne cuda…

Tagi: JavaScript • kursy • promowany • wiedza

Informacja o autorze jako przykład BEM i OOCSS

2 sierpnia 2014 / Michał Załęcki

Wiadomo, że przykład kodu tłumaczy pewne zagadnienie lepiej niż sucha teoria. Poniższy elementu interfejsu został stworzony na potrzeby Bydgoszcz Web Development Meetup #4 jako demo do mojej prezentacji o dobrych praktykach CSS, BEM i OOCSS. W kodzie zastosowane jest kilka ciekawych podejść m. in. logiczne grupowanie selektorów [ ]. Podstawowymi zaletami takiego rozwiązania jest duża przenośność, przynajmniej częściowe rozdzielenie selektorów używanych w CSS od tych, z których korzystamy w JavaScript oraz duża czytelność kodu – szczególnie ważna gdy nad jednym projektem pracuje więcej developerów.

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>BWDM#4</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/style.css">

        <script src="js/vendor/modernizr.min.js"></script>
    </head>
    <body>
        <div class="page">
            <article class="post">
                <h1 class="post__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

                <div class="post__content">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a erat vestibulum, euismod odio fermentum, tristique dui. Sed quis nisl molestie, tincidunt lorem non, vestibulum urna. Aenean augue lorem, semper at nibh eget, posuere ultricies metus. Pellentesque sed justo gravida, elementum enim nec, tristique eros. Nunc porta ante vel lectus suscipit dapibus. Proin in mi in ligula rhoncus aliquam. Suspendisse tempus erat in elit auctor feugiat. Phasellus quis purus tellus. Nam aliquet a mauris quis vestibulum. Praesent scelerisque congue varius.</p>

                    <p>Fusce in velit vitae dui lacinia eleifend nec ac metus. Vestibulum tempus ante quis dolor adipiscing laoreet. Ut velit metus, eleifend vel accumsan sed, varius eget leo. Sed faucibus ultricies egestas. Sed bibendum dolor eu felis interdum suscipit. Pellentesque fermentum dictum tempus. Sed tempor, augue vel commodo venenatis, nibh ligula ultricies velit, at gravida mi libero quis felis. Integer convallis posuere posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce consectetur sed velit vel dapibus. Proin accumsan, libero ac commodo vestibulum, quam diam dapibus ante, ullamcorper interdum arcu eros eget nibh. In sit amet metus sit amet lectus bibendum rutrum. Integer nibh ipsum, lacinia nec euismod non, hendrerit non eros. Vivamus eu quam dapibus, consectetur ante sed, auctor mi. Fusce quis tincidunt ante.</p>

                    <p>Aliquam ut lacinia eros. Fusce euismod felis ut neque vehicula, vitae lacinia arcu volutpat. Phasellus euismod bibendum libero. Vestibulum sagittis dolor ut eros semper, sit amet rhoncus leo consectetur. Donec in libero cursus dui pretium pretium. Suspendisse quis mi semper, adipiscing massa vel, dictum est. Aliquam erat volutpat. Suspendisse et venenatis purus. Proin ut purus imperdiet, venenatis leo id, bibendum dui. Fusce ut purus nisl. Suspendisse at odio varius, tincidunt velit ac, varius tortor. Nullam pellentesque et sapien a fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vitae commodo nulla.</p>

                    <p>Donec cursus mollis urna. Phasellus erat ligula, tristique et porta quis, convallis eget nulla. Aenean vel ipsum et eros imperdiet vulputate. Pellentesque ut porta nisi, id pulvinar quam. Nunc et diam arcu. Fusce et accumsan lorem, eu blandit augue. Aenean et nisl suscipit, luctus felis ut, feugiat magna. Ut fringilla ac neque ac tristique. Duis ut tempus urna, ac porttitor metus. Nunc nec metus tellus. Nam id placerat justo. Sed nibh risus, interdum et iaculis vitae, tincidunt vel nisi.</p>

                    <p>Phasellus in condimentum erat. Fusce posuere sem lectus, eu elementum urna euismod ut. Etiam vulputate mattis tortor mattis laoreet. Vivamus feugiat semper tincidunt. Mauris consectetur fermentum leo non ornare. Duis pretium vestibulum iaculis. Pellentesque eleifend cursus laoreet. Vivamus vehicula erat et erat mollis, eget feugiat nisl pulvinar. Praesent congue est nec enim aliquet tristique. Phasellus euismod neque ut turpis aliquet, sed gravida felis consectetur. </p>
                </div>

                <aside class="bio [ wow fadeInLeft ]">
                   <div class="bio__avatar [ vertical flip-container ]">
                        <div class="bio__avatar__flipper flip-container__flipper">
                            <div class="bio__avatar__flipper__front flip-container__flipper__front">
                                <img src="img/mangatar.png" alt="Michał Załęcki">
                            </div>
                            <div class="bio__avatar__flipper__back flip-container__flipper__back" style="background-color: #683d31;">
                                <a href="http://michal.zalecki.pl" class="bio__avatar__flipper__back__link"><i class="bio__avatar__flipper__back__link [ fa fa-link ]"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="bio__bg js-equal-bio" style="background-image: url('img/bio-bg-blur.jpg')"></div>
                    <div class="bio__info js-equal-bio">
                        <h2 class="bio__info__name">Michał Załęcki</h2>
                        <p class="bio__info__desc">Web Developer w Sas Design, redaktor wortalu WEBroad.pl i entuzjasta produktów Microsoftu, który nie stroni od Linuksa. Miłośnik gangsterskich dramatów z Ojcem chrzestnym na czele.</p>
                        <ul class="bio__info__list nav">
                            <li class="bio__info__list__item">
                                <a href="#rss" class="bio__info__list__item__link bio__info__list__item__link--rss btn">
                                    <i class="bio__info__list__item__link__icon [ fa fa-rss ]"></i>
                                    <?php include('img/path-circle.svg'); ?>
                                </a>
                            </li>
                            <li class="bio__info__list__item">
                               <a href="https://www.facebook.com/michal.zalecki" class="bio__info__list__item__link bio__info__list__item__link--facebook">
                                   <i class="bio__info__list__item__link__icon [ fa fa-facebook ]"></i>
                                   <?php include('img/path-circle.svg'); ?>
                               </a>
                            </li>
                            <li class="bio__info__list__item">
                                <a href="https://plus.google.com/+MichalZalecki" rel="author" class="bio__info__list__item__link bio__info__list__item__link--google-plus">
                                    <i class="bio__info__list__item__link__icon [ fa fa-google-plus ]"></i>
                                    <?php include('img/path-circle.svg'); ?>
                                </a>
                            </li>
                            <li class="bio__info__list__item">
                                <a href="https://twitter.com/MichalZalecki" rel="author" class="bio__info__list__item__link bio__info__list__item__link--twitter">
                                    <i class="bio__info__list__item__link__icon [ fa fa-twitter ]"></i>
                                    <?php include('img/path-circle.svg'); ?>
                                </a>
                            </li>
                            <li class="bio__info__list__item">
                                <a href="https://github.com/MichalRazorZalecki" class="bio__info__list__item__link bio__info__list__item__link--github">
                                    <i class="bio__info__list__item__link__icon [ fa fa-github ]"></i>
                                    <?php include('img/path-circle.svg'); ?>
                                </a>
                            </li>
                        </ul>
                    </div>
                </aside>
            </article>
            <footer class="footer">
                <p>&copy; 2014 Michał Załęcki</p>
            </footer>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>

        <script src="js/vendor/wow.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html class="no-js">

<head>

</head>

<body>

<h1 class="post__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a erat vestibulum, euismod odio fermentum, tristique dui. Sed quis nisl molestie, tincidunt lorem non, vestibulum urna. Aenean augue lorem, semper at nibh eget, posuere ultricies metus. Pellentesque sed justo gravida, elementum enim nec, tristique eros. Nunc porta ante vel lectus suscipit dapibus. Proin in mi in ligula rhoncus aliquam. Suspendisse tempus erat in elit auctor feugiat. Phasellus quis purus tellus. Nam aliquet a mauris quis vestibulum. Praesent scelerisque congue varius.</p>

<p>Fusce in velit vitae dui lacinia eleifend nec ac metus. Vestibulum tempus ante quis dolor adipiscing laoreet. Ut velit metus, eleifend vel accumsan sed, varius eget leo. Sed faucibus ultricies egestas. Sed bibendum dolor eu felis interdum suscipit. Pellentesque fermentum dictum tempus. Sed tempor, augue vel commodo venenatis, nibh ligula ultricies velit, at gravida mi libero quis felis. Integer convallis posuere posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce consectetur sed velit vel dapibus. Proin accumsan, libero ac commodo vestibulum, quam diam dapibus ante, ullamcorper interdum arcu eros eget nibh. In sit amet metus sit amet lectus bibendum rutrum. Integer nibh ipsum, lacinia nec euismod non, hendrerit non eros. Vivamus eu quam dapibus, consectetur ante sed, auctor mi. Fusce quis tincidunt ante.</p>

<p>Aliquam ut lacinia eros. Fusce euismod felis ut neque vehicula, vitae lacinia arcu volutpat. Phasellus euismod bibendum libero. Vestibulum sagittis dolor ut eros semper, sit amet rhoncus leo consectetur. Donec in libero cursus dui pretium pretium. Suspendisse quis mi semper, adipiscing massa vel, dictum est. Aliquam erat volutpat. Suspendisse et venenatis purus. Proin ut purus imperdiet, venenatis leo id, bibendum dui. Fusce ut purus nisl. Suspendisse at odio varius, tincidunt velit ac, varius tortor. Nullam pellentesque et sapien a fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vitae commodo nulla.</p>

<p>Donec cursus mollis urna. Phasellus erat ligula, tristique et porta quis, convallis eget nulla. Aenean vel ipsum et eros imperdiet vulputate. Pellentesque ut porta nisi, id pulvinar quam. Nunc et diam arcu. Fusce et accumsan lorem, eu blandit augue. Aenean et nisl suscipit, luctus felis ut, feugiat magna. Ut fringilla ac neque ac tristique. Duis ut tempus urna, ac porttitor metus. Nunc nec metus tellus. Nam id placerat justo. Sed nibh risus, interdum et iaculis vitae, tincidunt vel nisi.</p>

<p>Phasellus in condimentum erat. Fusce posuere sem lectus, eu elementum urna euismod ut. Etiam vulputate mattis tortor mattis laoreet. Vivamus feugiat semper tincidunt. Mauris consectetur fermentum leo non ornare. Duis pretium vestibulum iaculis. Pellentesque eleifend cursus laoreet. Vivamus vehicula erat et erat mollis, eget feugiat nisl pulvinar. Praesent congue est nec enim aliquet tristique. Phasellus euismod neque ut turpis aliquet, sed gravida felis consectetur. </p>

</div>

</div>

</div>

<h2 class="bio__info__name">Michał Załęcki</h2>

<p class="bio__info__desc">Web Developer w Sas Design, redaktor wortalu WEBroad.pl i entuzjasta produktów Microsoftu, który nie stroni od Linuksa. Miłośnik gangsterskich dramatów z Ojcem chrzestnym na czele.</p>

<?php include('img/path-circle.svg'); ?>

</a>

</li>

<?php include('img/path-circle.svg'); ?>

</a>

</li>

<?php include('img/path-circle.svg'); ?>

</a>

</li>

<?php include('img/path-circle.svg'); ?>

</a>

</li>

<?php include('img/path-circle.svg'); ?>

</a>

</li>

</ul>

</div>

</aside>

</article>

</footer>

</div>

</body>

</html>

SCSS

Struktura całego projektu może niektórym wydać się skomplikowana, ale niesie ze sobą szereg zalet, które rosną proporcjonalnie do wielkości projektu. Podejście jest diametralnie różne od tego, które proponuje SMACSS. Bardziej od samych elementów, których dotyczy CSS ważniejsze są warstwy abstrakcji.

Poniższy kod dotyczy wyłącznie komponentu informacji o autorze, pełen kod znajduje się w repozytorium na GitHub.

.bio {
    @include border-radius(6px);
    border-color: #d8d8d8;
    border-style: solid;
    border-width: 1px 1px 2px;
    margin-bottom: $base-line-height;
    overflow: hidden;
    position: relative;
    background-color: #FFFFFF;
}

    .bio__bg {
        height: 250px;
        background-size: cover;
        background-position: center;
        border-bottom: 1px solid #d8d8d8;
    }

    .bio__avatar {
        @include transform(translateX(-50%) translateY(-50%));
        position: absolute !important;
        top: 250px;
        left: 50%;
        cursor: pointer;
    }

    .bio__avatar,
    .bio__avatar__flipper,
    .bio__avatar__flipper__front,
    .bio__avatar__flipper__back {
        @include size(180px);
    }

        .bio__avatar__flipper__front,
        .bio__avatar__flipper__back {
            @include border-radius(50%);
            border-bottom: 1px solid #d8d8d8;
            overflow: hidden;
            background-color: #d8d8d8;
        }

            .bio__avatar__flipper__back__link {
                @include font-size(56px);
                line-height: 180px;
                display: block;
                text-align: center;
                text-decoration: none;
                color: #FFFFFF;
            }

    .bio__info {
        padding: $base-line-height * 4 $base-line-height $base-line-height;
    }

        .bio__info__name {
            text-align: center;
        }

        .bio__info__list {
            margin: 0;
            text-align: center;
        }

        .bio__info__list__item__link {
            @include transition(all 300ms linear);
            @include size(48px);
            @include font-size(22px);
            position: relative;
            text-align: center;
            line-height: 48px;
            text-decoration: none;
            margin: 0 5px;
            color: black;
            &:hover {
                .bio__info__list__item__svg {
                    @include transform(translateX(-3px) translateY(-3px));
                    @include size(54px);
                }
                .bio__info__list__item__svg__path {
                    stroke-dashoffset: 0
                }
            }
        }

        .no-smil .bio__info__list__item__link {
            .bio__info__list__item__svg__path {
                opacity: 0;
            }
             &:hover {
                .bio__info__list__item__svg__path {
                    opacity: 1;
                }
            }
        }

        .bio__info__list__item__link--rss {
            &:hover {
                color: #FF6600;
                .bio__info__list__item__svg__path {
                    stroke: #FF6600;
                }
            }
        }

        .bio__info__list__item__link--facebook {
            &:hover {
                color: #3B5998;
                .bio__info__list__item__svg__path {
                    stroke: #3B5998;
                }
            }
        }

        .bio__info__list__item__link--google-plus {
            &:hover {
                color: #DD4B39;
                .bio__info__list__item__svg__path {
                    stroke: #DD4B39;
                }
            }
        }

        .bio__info__list__item__link--github {
            &:hover {
                color: #4183C4;
                .bio__info__list__item__svg__path {
                    stroke: #4183C4;
                }
            }
        }

        .bio__info__list__item__link--twitter {
            &:hover {
                color: #00ABF0;
                .bio__info__list__item__svg__path {
                    stroke: #00ABF0;
                }
            }
        }

            .bio__info__list__item__svg {
                @include transition(all 300ms linear);
                @include size(48px);
                position: absolute;
                top: 0;
                left: 0;
            }

                .bio__info__list__item__svg__path {
                    @include transition(all 300ms linear);
                    fill: none;
                    stroke: black;
                    stroke-width: 4;
                }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

.bio {

@include border-radius(6px);

border-color: #d8d8d8;

border-style: solid;

border-width: 1px 1px 2px;

margin-bottom: $base-line-height;

overflow: hidden;

position: relative;

background-color: #FFFFFF;

}

.bio__bg {

height: 250px;

background-size: cover;

background-position: center;

border-bottom: 1px solid #d8d8d8;

}

.bio__avatar {

@include transform(translateX(-50%) translateY(-50%));

position: absolute !important;

top: 250px;

left: 50%;

cursor: pointer;

}

.bio__avatar,

.bio__avatar__flipper,

.bio__avatar__flipper__front,

.bio__avatar__flipper__back {

@include size(180px);

}

.bio__avatar__flipper__front,

.bio__avatar__flipper__back {

@include border-radius(50%);

border-bottom: 1px solid #d8d8d8;

overflow: hidden;

background-color: #d8d8d8;

}

.bio__avatar__flipper__back__link {

@include font-size(56px);

line-height: 180px;

display: block;

text-align: center;

text-decoration: none;

color: #FFFFFF;

}

.bio__info {

padding: $base-line-height * 4 $base-line-height $base-line-height;

}

.bio__info__name {

text-align: center;

}

.bio__info__list {

margin: 0;

text-align: center;

}

.bio__info__list__item__link {

@include transition(all 300ms linear);

@include size(48px);

@include font-size(22px);

position: relative;

text-align: center;

line-height: 48px;

text-decoration: none;

margin: 0 5px;

color: black;

&:hover {

.bio__info__list__item__svg {

@include transform(translateX(-3px) translateY(-3px));

@include size(54px);

}

.bio__info__list__item__svg__path {

stroke-dashoffset: 0

}

.no-smil .bio__info__list__item__link {

.bio__info__list__item__svg__path {

opacity: 0;

}

&:hover {

.bio__info__list__item__svg__path {

opacity: 1;

}

.bio__info__list__item__link--rss {

&:hover {

color: #FF6600;

.bio__info__list__item__svg__path {

stroke: #FF6600;

}

.bio__info__list__item__link--facebook {

&:hover {

color: #3B5998;

.bio__info__list__item__svg__path {

stroke: #3B5998;

}

.bio__info__list__item__link--google-plus {

&:hover {

color: #DD4B39;

.bio__info__list__item__svg__path {

stroke: #DD4B39;

}

.bio__info__list__item__link--github {

&:hover {

color: #4183C4;

.bio__info__list__item__svg__path {

stroke: #4183C4;

}

.bio__info__list__item__link--twitter {

&:hover {

color: #00ABF0;

.bio__info__list__item__svg__path {

stroke: #00ABF0;

}

.bio__info__list__item__svg {

@include transition(all 300ms linear);

@include size(48px);

position: absolute;

top: 0;

left: 0;

}

.bio__info__list__item__svg__path {

@include transition(all 300ms linear);

fill: none;

stroke: black;

stroke-width: 4;

}

Starsze wersje IE mają problem z animacjami SVG realizowanymi w CSS. Zachowanie ikon po najechaniu możemy zmienić wykorzystując wykrywanie funkcjonalności dzięki Modernizr i to, że nadaje on stosowaną klasę elementowi html.

JavaScript

Kodu JavaScript nie ma zbyt wiele. Po inicjalizacji WOW.js nadajemy ścieżką odpowiednie atrybuty tak by można było je następnie animować po najechaniu na ikony portali społecznościowych. Ostatnim elementem jest wykrycie czy użytkownik posiada ekran dotykowy i dostosowanie zachowania jednego z elementów.

;(function ($) {
    new WOW().init({
        offset: 200
    });

    $('.js-drawable-path').each(function (index, elem) {
        $path = $(this);
        $path.attr({
            'stroke-dasharray' : $path.get(0).getTotalLength(),
            'stroke-dashoffset' : $path.get(0).getTotalLength(),
        });
    });

    // $('html').addClass('touch').removeClass('no-touch');

    var flipContainerEvens = 'mouseenter mouseleave'
    !$('html').hasClass('touch') || (flipContainerEvens = 'click');

    $('.flip-container').on(flipContainerEvens, function (e) {
        $(this).toggleClass('is-flipped');
    });
})(jQuery);

;(function ($) {

new WOW().init({

offset: 200

});

$('.js-drawable-path').each(function (index, elem) {

$path = $(this);

$path.attr({

'stroke-dasharray' : $path.get(0).getTotalLength(),

'stroke-dashoffset' : $path.get(0).getTotalLength(),

});

// $('html').addClass('touch').removeClass('no-touch');

var flipContainerEvens = 'mouseenter mouseleave'

!$('html').hasClass('touch') || (flipContainerEvens = 'click');

$('.flip-container').on(flipContainerEvens, function (e) {

$(this).toggleClass('is-flipped');

});

})(jQuery);

Przydatne materiały

Tagi: BEM • CSS3 • JavaScript • OOCSS • promowany

Recenzja: Podręcznik Node.js. Smashing Magazine

20 lipca 2014 / Michał Załęcki

Platforma Node.js powstała w 2009 roku. Pozwala na tworzenie wydajnych, skalowalnych aplikacji sieciowych. W tym środowisku napiszesz kod działający po stronie serwera – i użyjesz do tego języka JavaScript. Brzmi niesamowicie? I tak w rzeczywistości jest! Przekonasz się o tym w czasie czytania tej książki. Została ona w całości poświęcona Node.js.

Źródło: Helion.pl

Długo czekałem na Podręcznik Node.js. Smashing Magazine po tym jak zobaczyłem go w księgarni jako zapowiedź, pech ciał, że przez natłok zajęć musiałem odłożyć w czasie jego lekturę.

Tematyka

Cała książka podzielona została na 5 części. Pierwsza cześć omawia przygotowanie środowiska, szybki przegląd JavaScript, kwestie blokujących i nieblokujących operacji I/O oraz ukazuje większe różnice w pisaniu kodu używanego po stronie klienta w przeglądarce, a pisaniu kodu dla Node (obiekt globalny, require i te sprawy).

Część druga, znacznie ciekawsza wyjaśnia zagadnienia związane ze specyfikacją protokokołu TCP i HTTP. Na plus trzeba zaliczyć dość ambitne aplikacje, które tworzymy podczas lektury książki. Są to m. in. klient IRC, klient Twittera i czat oparty o WebSocket z możliwością słuchania utworów wskazanych przez „DJa”. Widziałem, że zarzuca się tej pozycji zbyt dużą ilość teorii. Czytając takie opinie zastanawiam się czy chodzi o tę samą pozycję. Ze względu na zajęcia w tym roku musiałem zaprzyjaźnić się z Język C++. Szkoła programowania, w której po 180 stronach pojawia się temat dotyczący pętli for – to jest książka, w której jest dużo teorii.

Trzecia część porusza tematykę popularnych frameworków. Nie obeszło się jednak bez zgrzytów. Dużo osób narzeka na błędy w książce. Podejrzewam, że nerwy puszczają co niektórym przy rozdziale o WebSocket.IO. Kod z tego rozdziału po prostu nie działa na nowszych instalacjach Node.js (WebSocket.IO nie jest rozwijany od ponad 2 lat). Poprawny kod, uaktualniony, można znaleźć w przykładach do książki na FTP, więc nikt nie powinien mieć problemów z ewentualnymi poprawkami.

Część czwarta porusza sposoby komunikacji z trzema bazami danych: MongoDB, MySQL i Redis. Ostatnia, piąta część omawia zagadnienia związane ze współdzieleniem kodu oraz jego testowaniem.

Ocena

Ogólnie książka pozostawiła po sobie bardzo dobre wrażenie. Przeszkadza trochę kod, który jest wstawiany w małych partiach (jedna, dwie funkcję). Pod koniec rozdziałów znajduje się zawartość całych plików co pozwala na upewnienie się czy wszystko napisaliśmy poprawnie. Z czystym sumieniem mogę polecić Podręcznik Node.js. Smashing Magazine osobą początkującym lub tym, który chcą swoją wiedzę uporządkować. Książka otrzymuje od nas zasłużone 7/10. Gdyby nie pechowy rozdział o WebSocket.IO i literówki w kodzie to ocena byłaby wyższa.

Tagi: helion • JavaScript • książka • Node.js • promowany • recenzja • Twitter

Synchroniczna asynchroniczność

23 grudnia 2013 / Comandeer

Jest pewna rzecz w JavaScript, którą wszyscy kochamy: asynchroniczność. Jest też pewna rzecz w JS, którą wszyscy nienawidzimy: asynchroniczność. Każdy, kto choć raz miał większy kontakt z tym dziwacznym językiem, wie czym jest budząca postrach asynchroniczność. To zmora wszystkich AJAX-owych wyjadaczy i ich młodszych kolegów, hackujących w node.js.

Continue reading Synchroniczna asynchroniczność

Tagi: asynchroniczność • JavaScript

[Zakończony] Czytaj, nie pytaj! Konkurs – edycja #5

Co zrobić, aby wygrać?

Pytania konkursowe

Krótki regulamin

[Zakończony] Czytaj, nie pytaj! Konkurs – edycja #3

Co zrobić, aby wygrać?

Pytania konkursowe

Krótki regulamin

Recenzja: Tajemnice JavaScriptu. Podręcznik ninja

Tłumaczenie

Zawartość

Ocena

Web Components – artykuł konkursowy

Na początku było Słowo…

Declaratives, declaratives everywhere!

Web Components are coming!

Custom elements

template

Shadow DOM

link[rel=import]

Custom events

Object.observe/DOM Mutation Observer

Co dalej?

Jak uczyć się JavaScript? – książki, kursy i inne cuda…

Informacja o autorze jako przykład BEM i OOCSS

HTML

SCSS

JavaScript

Przydatne materiały

Recenzja: Podręcznik Node.js. Smashing Magazine

Tematyka

Ocena

Synchroniczna asynchroniczność

Partner technologiczny

Najnowsze komentarze

Robert

początkujący

Tom

awprojekt

Temat