• Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

Emmet, czyli przyśpieszamy kodzenie!

Opublikowane 14 kwietnia 2013. Autor: Kamil Brenk. Wizyt: 6 468.

Kategorie: Front-end Development
Tematyka: CSS, efektywność pracy, HTML, praktyczne skrypty

kw. 14

Praca każdego font-end developera polega na pisaniu kodu, dużej ilości kodu. W wielu aspektach tej pracy pomagają dobre IDE, podpowiadając składnie, udostępniając skróty klawiszowe i optymalizując pracę. Dla innych zadowalające są nakładki na języki, pozwalające pisać szybciej (jak choćby Haml czy Sass).

W tym wpisie natomiast przedstawię jeszcze inny sposób na podniesienie efektywności w pracy. Mowa tutaj o Emmet, zestawie narzędzi do skrótowego pisania kodu HTML i CSS.

W czym Ci pomoże Emmet?

Emmet oferuje kilka różnych narzędzi wspomagających pracę, zarówno w HTML, jak i CSS. Zasada działania jest prosta – piszemy skrócony kod, kończymy linijkę, zatwierdzamy określonym skrótem klawiszowym i otrzymujemy wygenerowany kod HTML czy CSS.

Najważniejszą funkcjonalnością jest Expand Abbreviation, czyli możliwość pisanie kodu HTML na wzór selektorów CSS, jak również pisanie przy użyciu skrótów. A skoro selektory CSS są wszystkim znane to nikt nie będzie miał problemów z zapamiętywaniem nowej, magicznej składni (zapewne jQuery zawdzięczał też temu w dużej mierze swój sukces).

Kilka przykładowych zastosowań (powyżej kod, który musimy wpisać – poniżej, który zostanie wygenerowany):

  • grupowanie i mnożenie elementów
    1
    ul>(li>a)*10
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
  • numerowanie mnożonych elementów
    1
    ul>li.item-$*5
    1
    2
    3
    4
    5
    6
    7
    <ul>
        <li class="item-1"></li>
        <li class="item-2"></li>
        <li class="item-3"></li>
        <li class="item-4"></li>
        <li class="item-5"></li>
    </ul>
  • tworzenie sąsiednich elementów, dodawanie tekstów
    1
    div.main>(header>h2)+(article>p*3)+(footer>p{All rights reserved.})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="main">
        <header>
            <h2></h2>
        </header>
        <article>
            <p></p>
            <p></p>
            <p></p>
        </article>
        <footer>
            <p>All rights reserved.</p>
        </footer>
    </div>
  • dodawanie ID, przechodzenie na rodzica (przydałaby się taka możliwość w CSS)
    1
    div>h3#news^footer>p
    1
    2
    3
    4
    5
    6
    <div>
        <h3 id="news"></h3>
    </div>
    <footer>
        <p></p>
    </footer>
  • dodawanie atrybutów (Emmet automatycznie dodaje obowiązkowe atrybuty)
    1
    a#idName.className[rel="nofollow"][customAttr="customValue"]{anchor}
    1
    <a href="" id="idName" class="className" rel="nofollow" customAttr="customValue">anchor</a>
  • budowa pojedynczych elementów w skróconej składni
    1
    textarea
    1
    <textarea name="" id="" cols="30" rows="10"></textarea>

    inny przykład

    1
    bq>p
    1
    2
    3
    <blockquote>
        <p></p>
    </blockquote>

    przykład dla CSS

    1
    2
    3
    div {
        lg(left, #ddd 80%, #ccc)
    }
    1
    2
    3
    4
    5
    6
    7
    div {
        background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.8, #ddd), to(#ccc));
        background-image: -webkit-linear-gradient(left, #ddd 80%, #ccc);
        background-image: -moz-linear-gradient(left, #ddd 80%, #ccc);
        background-image: -o-linear-gradient(left, #ddd 80%, #ccc);
        background-image: linear-gradient(left, #ddd 80%, #ccc);
    }
  • generator Lorem Ipsum
    1
    article>p*3>lorem30
    1
    2
    3
    4
    5
    <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius impedit obcaecati et nisi assumenda mollitia! Voluptatibus vitae distinctio quisquam soluta adipisci dolore numquam id ab placeat sit praesentium qui sed.</p>
        <p>Illo eum impedit dolorem repellat temporibus minus quisquam enim saepe quaerat excepturi ea incidunt facere commodi delectus illum quasi labore odit error quidem necessitatibus similique exercitationem vero modi maxime aperiam.</p>
        <p>Possimus necessitatibus facilis et facere velit earum doloremque accusantium cumque corporis mollitia voluptas tempore saepe vel ratione expedita. Rem unde fuga quasi quam neque modi soluta error dignissimos eligendi repellat!</p>
    </article>

Myślę, że w powyższych przykładach nie trzeba niczego wyjaśniać – prościej już się nie dało. Do tego jak widać, oszczędność klawiatury jest znaczna.

Emmet oferuje jeszcze kilka fajnych skrótów, jak choćby:

  • możliwość poruszania się w kodzie po drzewie DOM,
  • możliwość przeskakiwania kursorem do pól, które możemy uzupełniać,
  • zakomentowywanie wybranych fragmentów kodu,
  • usuwanie elementów (bez dzieci),
  • pobieranie wymiarów obrazka do elementu IMG (czy background-image dla CSS),
  • kodowanie i dekodowanie statycznych obrazów do wersji inline (data:image/type;base64,XYZ).

Nie będę wchodził w szczegóły powyższych skrótów, bowiem część z nich mamy wbudowane w IDE i nie robią już takiego wrażenia (mimo iż nadal są bardzo przydatne, więc jeśli ktoś nie zna – nadrabiać!).

Jak zacząć używać Emmet?

Jeśli opisywane narzędzie Cię zainteresowało i chciałbyś zacząć go używać we własnych projektach to mam dla Ciebie dobrą wiadomość – nie powinieneś mieć z tym problemu. Emmet jest dostępny (za darmo) dla wszystkich popularnych IDE, jak choćby Sublime Text, Eclipse/Aptana, TextMate, Komodo Edit, Notepad++ czy nawet w wersji HTML dla elementu textarea. Dla niektórych programów wymagane będzie własnoręczne skonfigurowanie skrótów klawiszowych (jak choćby dla Komodo Edit).

Emmet dysponuje świetną dokumentacją z interaktywnymi przykładami – zdecydowanie polecam sprawdzić i się podszkolić! Również warto zapoznać się z pełną tablicą skrótów możliwych do wykorzystania z Emmet.

Jakie jest moje zdanie na temat Emmet? Chwilę po pierwszym „spotkaniu” od razu wylądował w moim IDE i sprawdza się doskonale. No, prawie doskonale – czasem formatuje składnie inaczej niż bym tego chciał.

Jeśli znasz szybszą i efektywniejszą metodę pisania kodu, podziel się w komentarzu! :-)

Komentarze (8)

  1. Dariusz 14 kwietnia 2013

    Znaju znaju. Pisałem o tym artykuł w dzienniku internautów (chociaż wtedy nazywałem to Zen Coding). Warto się zapoznać bo na prawdę potrafi przyśpieszyć pisanie. Nie mówiąc już o tym że nie pamiętam kiedy z palca wyklepałem szkielet (DOCTYPE + całą reszta) dokumentu HTML. Wolę wklepać html4s[tab] lub html5[tab] i dostać całość.

    Dodam że nie warto się przerażać składnią (mimo że znajoma). Sam zaczynałem zwyczajnie pisząc ul>li*5 tylko po to by na szybko dostać listę którą wypełniałem by później już pisać np:

    ul.nav>li*5>a[href=#]>span{Link $$}+span.icon-wrench.icon-white

    co przychodzi dość naturalnie i daje nam:

    1
    2
    3
    4
    5
    6
    7
    <ul class="nav">
        <li><a href="#"><span>Link 01</span><span class="icon-wrench icon-white"></span></a></li>
        <li><a href="#"><span>Link 02</span><span class="icon-wrench icon-white"></span></a></li>
        <li><a href="#"><span>Link 03</span><span class="icon-wrench icon-white"></span></a></li>
        <li><a href="#"><span>Link 04</span><span class="icon-wrench icon-white"></span></a></li>
        <li><a href="#"><span>Link 05</span><span class="icon-wrench icon-white"></span></a></li>
    </ul>
  2. Dariusz 14 kwietnia 2013

    Eeee… chyba Twój system komentarzy lekko przesadza. Aż jestem ciekaw czy przepuści scripta więc wybacz próbę :)

    document.write(‚Hello blog’);

    Oby nie :-D

  3. Kamil Brenk 14 kwietnia 2013

    @Dariusz: masz napisane nad polem do formularzy, że możesz używać wybranych znaczników HTML. Daję taką opcję, bo komentarze i tak są moderowane :-) dla kodu można użyć tagu code – poprawiłem Twój pierwszy komentarz.

    Co do Emmet / Zen Coding – jestem chyba ostatnim, który się o nim dowiedział :D

  4. Michał 22 kwietnia 2013

    Emmet/Zen jest fajny… tylko ja jakoś nie mam kiedy z niego korzystać :/

    @Kamil – Ostatni to może nie, ale jakoś tak na końcu :)

  5. Kamil Brenk 22 kwietnia 2013

    Michał, dlaczego? Już tylko backendowe rzeczy katujesz? Ja od jakiegoś czasu pracuję wyłącznie jako front-end developer i Emmet całkiem fajnie przyśpiesza kodowanie :-)

  6. Michał 23 kwietnia 2013

    @Kamil
    Są tygodnie gdzie nawet przeglądarki nie odpalam a wszystko na unit testach sprawdzam :)
    Czasem coś skrobnę z frontendu, jakiś JS, HTML od święta a i wtedy to większość powtórzeń robi szablon.

  7. Kaligula 6 lipca 2013

    (0_0) Nawet nie wiesz jak przyspieszysz moje życie…
    I to chyba ja jestem ostatnim, który się dowiedział o tym cudzie pracy rąk ludzkich!
    Niezmiernie Ci dziękuję!

  8. Kamil Brenk 7 lipca 2013

    @Kaligula: cieszę się, że mogłem pomóc! :)



Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Liczniki w CSS
    • Wyprzedaż książek o programowaniu!
    • Niestandardowy placeholder
    • JavaScript w modułach
    • Co dalej z blogiem?
    • Interaktywna mapa w HTML i CSS
    • Olsztyn: Jak wyseparować zawartość zassaną przez file_get_content?
    • ERMLAB: Od czegoś trzeba zacząć :) Wiele osób właśnie stawia na...
    • david: co nalezy wkleić na stronę aby plik ze stylami był ladowany...
    • krynicz: Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w...
    • yaro: Jak zmienić re_write znak "_" na "-"?
    • Piotr: stworzyłem prostą stronkę w PHP, czy jest możliwość aby...
    • MichalR: Super sprawa... bardzo przydatne.. dzieki i pozdrawiam..
    • Niestandardowe czcionki na stronie
    • Sposoby wczytywania JavaScript
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • Wysyłanie wiadomości SMS w PHP
    • Projekt aplikacji po stronie klienta
    • Własny mechanizm Feed
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Freelancer
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Pozycjonowanie
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • Miłość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech Soczyński
    • Michał Wachowski
    • Tomasz Kowalczyk
    • Filip Górczyński
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧