EpicWEB.pl

webdesign, programowanie, phat lewt!

o autorze / projekty / kontakt

Ostatni projekt

ddrpl.com

Ostatnie wiadomości

Zen Coding - nowy, szybki sposób pisania kodu HTML

Parę dni temu na reddicie moją uwagę przykuł artykuł opisujący nowatorską - wciąż rozwijaną - technikę tworzenia kodu HTML nazywaną Zen Coding.

Całe założenie opiera się na wykorzystaniu składni podobnej do tej znanej z selektorów CSS, która za pomocą odpowiednich narzędzi wbudowanych w edytor (więc nie jest to sama ideologia, ile technologia) jest szybko przekształcana na kod HTML. Może to wydawać się zagmatwane i nie jasne, ale wystarczy spojrzeć na poniższy przykład:

Jeżeli w edytorze wpiszemy ciąg znaków div#content>h1+p, który na pierwszy rzut oka wygląda dokładnie jak selektor CSS3, zostanie on zamieniony na następujący kod:

<div id="content">
<h1></h1>
<p></p>
</div>

Jak widać, Zen Coding oszczędził nam dosyć dużej ilości kliknięć w klawiaturę. Poza przekształcaniem prostych łańcuchów elementów mechanizm pozwala na dodawanie ID i nazw klas, powielanie elementów oraz numerowanie kolejnych znaczników:

E - wstawia element danego typu
E#id - wstawia element oraz nadaje mu parametr ID o zadanej wartości
E.class - wstawia element nadając mu wybraną klasę
E>N - wstawia element, po czym informuje parser, że kolejny element jest jego potomkiem
E+N - wstawia dwa elementy jako potomki tego samego rodzica
E$*N - wstawia N takich samych elementów, znaczek $ zostanie zastąpiony itteratorem

Najbardziej skomplikowanym może wydawać się ostatni zapis - jednak jest on dosyć prosty kiedy już go ujrzymy. Co np. wygeneruje taki kod: ul>li.item-$*5>a? Jeżeli ktoś podał poprawną (umieszczoną niżej) odpowiedź, to praktycznie może zacząć już korzystać z Zen Coding ;-)

<ul>
<li class="item-1"><a></a></li>
<li class="item-2"><a></a></li>
<li class="item-3"><a></a></li>
<li class="item-4"><a></a></li>
<li class="item-5"><a></a></li>
</ul>

Oczywiście jest to tylko podstawowa funkcjonalność - ZC oferuje także np. skróty dla CSS oraz gotowe szablony HTML jednak to rozwijania składni HTML będziemy używać najczęściej.

Na razie Zen Coding doczekało się oficjalnego wsparcia w następujących edytorach:

  • TextMate
  • Aptana
  • Coda
  • NetBeans
  • Espresso
  • Web IDE
  • TopStyle
  • Sublime Text
  • Dreamweaver

To ja poproszę jeszcze o wsparcie dla PhpEd ;-)

Poniżej zamieszczam filmik, demonstrujący wykorzystanie Zen Coding dla zademonstrowania jak wpływa on na szybkość programowania:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Komentarze

Avatar użytkownika 1

Komentarz użytkownika Wasacz

24 11 2009

Nie wpływa na szybkość programowania, bo (…). Ekhm. ;)

Avatar użytkownika 2

Komentarz użytkownika BTM

24 11 2009

Huh? Nie bardzo łapię o co Ci kaman :>

3

Komentarz użytkownika lukasz

24 11 2009

Całkiem ciekawe. Obecnie sam pracuje nad czymś podobnym, opartym o JS.

4

Komentarz użytkownika Dorian

24 11 2009

Pewnie przedmówcy chodziło o to, że w html się nie programuje :).
A co do artykułu to już w kilku miejscach czytałem o tym. Pomysł całkiem niezły, muszę sprawdzić jak to wygląda w praktyce w NetBeansie.

Avatar użytkownika 5

Komentarz użytkownika Bartosz "BTM" Szczeciński

24 11 2009

@Dorian: pralki też się nie programuje a ma programator ;-) Anyhow - domyśliłem się, że o to Wąsaczowi chodziło jakieś pół godziny po napisaniu mojego komentarza. Tak, mea culpa - chodziło oczywiście o "szeroko pojęte kodowanie".

Co do "kilku miejsc" - to faktycznie, było wczoraj na J poruszane ale jakoś mi umknęło. Niestety, NetBeans jakoś mnie odrzuca brakiem dobrego, natywnego (nie integrującego się z Windowsem) wsparcia dla remote fs.

Avatar użytkownika 6

Komentarz użytkownika occulkot

24 11 2009

prawde mowiac te "futures" zwiazane z cssem to wlasciwie zwykle snippety. Jedyny plus ze sa zdefiniowane na dziendobry ;)

Avatar użytkownika 7

Komentarz użytkownika trójkąt

24 11 2009

Czytasz waćpan techblog? Było dwa dni temu:

http://blog.koszulinski.pl/2009/11/22/zen-coding-snippety-nie-maja-szans/

8

Komentarz użytkownika lukasz

24 11 2009

trójkąt - ja czytam, a tego nie widziałem ;) poza tym link który podałeś ma niewiele mówiącą składnie.

Avatar użytkownika 9

Komentarz użytkownika BTM

24 11 2009

@trójkąt: Jeżeli nie wiesz, to Techblog stanowi rodzaj agregatora treści z różnych blogów zarejestrowanych na ogólnodostępnej platformie Jogger.pl. Każdy internauta posiadający konto Jabbera może założyć tam konto i prowadzić bloga o tematyce jaką sobie tylko wybierze. Tym samym nikt nie spodziewa się, że każdy z użytkowników sprawdzi, przed opublikowaniem postu o swoich ulubionych skarpetkach, czy ktoś inny już ich nie opisał. Sio.

Avatar użytkownika 10

Komentarz użytkownika trójkąt

24 11 2009

@BTM: techblog jest wyłącznie do wpisów technicznych - http://wiki.jogger.pl/wiki/Techblog. Społeczność raczej pilnuje, żeby nie pojawiały się tu wpisy o dupie Maryni. Co do powtarzania tematów to IMO każdy publikujący tutaj powinien śledzić techblog i w przypadku powtórzenia tematu uznać, że ktoś był pierwszy i przenieść swoje spostrzeżenia do jego komentarzy zamiast otwierać kolejną dyskusję. Ale to tak tylko IMO, bo w żadnej konwencji zapisane to nie jest.

Co do samego Zen Coding to czekam na pojawienie się tego w moim ulubionym edytorze - Geany. Z drugiej jednak strony nie wierzę że znacznie przyśpieszy to pracę, ponieważ korzystam zazwyczaj z tych samych fragmentów kodu, do których mam już snippety. Zmienia się tylko stylowanie.

Avatar użytkownika 11

Komentarz użytkownika DrLex

25 11 2009

Plus jest taki, że pisząc kod wdrukowujemy sobie w pamięć selektory css, co potem się przydaje przy robieniu interfejsu np. w jQuery.

Avatar użytkownika 12

Komentarz użytkownika Reinmar

25 11 2009

Widzę, że pojawił się tu temat powtórek :) Wydaje mi się, że nie ma co komentować tego jak na wykopie. Choć ja rzeczywiście przed napisaniem czegoś sprawdzam, czy na joggerze już się nie pojawiło. Ale robię to głównie dla siebie - po co mam się męczyć, jak i tak zaciekawię mniej osób.

Zostaw komentarz