Zen Coding – szybkie pisanie kodu HTML i CSS

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:

po rozwinięciu uzyskamy taki efekt:

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:

efekt:

Obecnie dla większości IDE są dostępne pluginy wspierające Zen Coding, m. in:

  1. Sublime 2,
  2. Eclipse,
  3. NetBeans,
  4. NodePad++,
  5. Visual Studio (2008, 2010, 2012, 2013).

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ć :)?

Say something

Your email address will not be published. Required fields are marked with a grey bar.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Current ye@r *