Jedną z charakterystycznych cech aplikacji internetowych jest warstwa prezentacji składająca się m. in. z kodu HTML i stylów CSS. Przygotowanie widoków często bywa żmudne – myślę, że zgodzi się ze mną każdy, kto choć raz musiał się z tym zmierzyć. Na szczęście na przestrzeni czasu powstało wiele dodatków i narzędzi wspomagających ten mozolny i przykry proces. Ostatnio kolega polecił mi dodatek, którego do tej pory nie znałem – Zen Coding (znane też jako Emmet).
Wspomniany dodatek znacznie przyspiesza pisanie kodu HTML i CSS. W 2009 roku (jak widać dobrych parę lat temu) Sergey Chikuyonok przedstawił składnię pozwalającą znacznie skrócić czas poświęcany na przygotowanie widoków. Prosty przykład:
|
1 |
div.row>(div.col-md-3>span{Element $})*3 |
po rozwinięciu uzyskamy taki efekt:
|
1 2 3 4 5 |
<div class="row"> <div class="col-md-3"><span>Element 1</span></div> <div class="col-md-3"><span>Element 2</span></div> <div class="col-md-3"><span>Element 3</span></div> </div> |
Pełny opis składni wraz z przykładami można znaleźć m. in. tutaj. Z mojej strony dodam, że składnia jest bardzo intuicyjna i elastyczna. Bez problemu możemy z niej korzystać np. pracując z Angularem:
|
1 |
my-directive[arg='value' arg2='value2']{Witaj {{Name}}} |
efekt:
|
1 |
<my-directive arg="value" arg2="value2">Witaj {{Name}}</my-directive> |
Obecnie dla większości IDE są dostępne pluginy wspierające Zen Coding, m. in:
Ja aktualnie korzystam z dodatku do VS 2012 i działa idealnie.
Podsumowanie
Od dłuższego czasu w pracy tworzę wyłącznie aplikacje internetowe. O ile programowanie sprawia mi frajdę o tyle klepanie HTMLa i CSSa to nie to, co lubię najbardziej. Niestety, od czasu do czasu muszę przygotować jakiś fragment UI. Korzystam z Zen Coding i zdecydowanie polecam ten dodatek każdemu, kto pisze kod HTML. Każdy człowiek ma ograniczony limit znaków do wykorzystania więc po co je marnować :)?
Pingback: Poniedziałek rano… | Wiadomości o technologiach IT