PWA
Buy me a coffee

Zen-Coding — szybsze pisanie w językach HTML i CSS

• 1 minuta

Zen-Coding - taką nazwę nosi projekt dwóch developerów: pepelsbey oraz serge.che. Cała lista aktywnych programistów biorących czynny udział w projekcie znajduje się tutaj: code.google.com/p/zen-coding/people/list.

Baner promujący artykuł

Korzystanie z Zen-Coding znacznie przyspiesza mozolne pisanie znaczników html i selektorów css. Lista możliwych skrótów:

Instalacja w środowisku Eclipse przebiega bezproblemowo. Do dostępnych update-site'ów dodajemy kolejną: zen-coding.ru/eclipse/updates/ Adres do katalogu, który zawiera plik site.xml o zawartości: 

<site>
    <description name="Zen Coding for Eclipse updates">
    Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions&#x2014;similar to CSS selectors&#x2014;into HTML code.
    </description>
    <feature url="features/ru.zencoding.eclipse_0.7.0.201103132329.jar" id="ru.zencoding.eclipse" version="0.7.0.201103132329"/>
</site>

Znajduje się z nim adres do pliku ru.zencoding.eclipse_0.7.0.201103132329.jar który jest głównym plikiem z całą wtyczką.

Zasada działania

  1. Wtyczka udostępnia listę skrótów do swojego IDE.
  2. Skróty odnoszą się do prawdziwych selektorów i znaczników.
  3. Po napisaniu skrótu i wywołaniu skrótu klawiaturowego Ctrl+E (w środowisku Eclipse) łańcuch znaków zamieni się w pełni zgodny z danym językiem ( html/css ) kod.

Przykład

a) Skrót HTML: html>head+body>p{test}, który zamieni się w: 

<html>
    <head></head>
    <body>
        <p>test</p>
    </body>
</html>

b) Skrót CSS: bgc, który zamieni się w: 

background-color: #FFF;

Podsumowanie

Wtyczka umożliwia zdecydowanie szybsze pisanie w językach HTML oraz CSS. Na pierwszy rzut oka wygląda na to, że trzeba nauczyć się wielu skrótów, ale jest to mylne złudzenie gdyż skróty są bardzo zbliżone do prawdziwych znaczników oraz selektorów.