HTML z palca? Jak zwierzęta? Tylko Emmet! [film]

Div, span, lista, lista, link, link. Mozolne pisanie HTMLa „z palca”. Znacie to? A gdyby można było automagicznie dużo szybciej? Poznajcie Emmeta.

Do pochylenia się nad tym tematem zainspirowała mnie niedawna sytuacja kiedy to miałem okazję zobaczyć pracę dwóch juniorów. Klepali sobie coś w szablonach mozolnie wpisując tag za tagiem, otwierając, zamykając, kopiując poszczególne elementy. Jakoś tak żal mi się ich zrobiło.

Nie mogłem tak patrzeć jak młodzież się męczy i zasugerowałem Emmeta, coś co wydawało mi się powszechnie używane. Oj, nic bardziej mylnego. Codziennie uczę się, że to co nam wydaje się oczywiste, już niekoniecznie takie oczywiste jest dla kogoś innego.

Juniorzy bardzo się podniecili, a ja zyskałem pomysł na nowy tekst, a w zasadzie na pierwszy film na „jutuba”. Zapraszam do subskrybowania, komentowania, udostępniania, a jednocześnie proszę o okres ochronny w hejtowaniu. Pierwszy film powstawał w strasznych bólach (ile wersji poleciało do kosza to nawet nie zliczę) i mam nadzieję, że z czasem, po kilkunastu filmach dojdę do jakiejś większej wprawy. Żeby to wyglądało dla Was lepiej i żebym ja nie musiał nad tym tak długo siedzieć.

Emmet w akcji

Przede wszystkim admin, potem webdeveloper choć kiedyś było odwrotnie. Obecnie Full Stack Engineer, CTO i System Architect. Po godzinach fan dobrych seriali, których nigdy nie ma czasu obejrzeć. Kawożłop. Koneser prawdziwego piwa. W czasie pomiędzy kontuzjami biega.

  • Emmet jest fajny… do momentu, gdy uzmysławiasz sobie, że robisz to: table>(thead>tr>th{Cell $}*5)+(tbody>tr*10>td*5>(span.icon.icon_cell[aria-hidden=true]+b{Cell $}))+(tfoot>tr*1>th{Cell $}*5)

    • nrm

      a robisz? 😉 i wolałbyś ręcznie? 😉

      • Robię… I to jest ciut przerażające. Zamiast, jak każdy normalny user Emmeta, podzielić stronę na mniejsze części, potrafię je wygenerować jednym, dużym selektorem. Chyba się uzależniłem 🙁

  • Zepco

    Jakby ktoś szukał: dla laravela i plików blade.php w atom, trzeba wejść w Edit>Keymap i dopisać

    ‚atom-text-editor[data-grammar=”text html php blade”]:not([mini])’:
    ‚tab’: ’emmet:expand-abbreviation-with-tab’

    A po wciśnięciu kombinacji Alt+Ctrl+Enter mamy podgląd na żywo.

  • Arkadiusz Lendzian

    Pomysł fajny, ale wolę chyba zostać w pre-procesorach typu pug/jade. Przejrzystość zostaje i kod można utrzymywać i rozwijać.

    • Piotrek Kałucki

      Jade to jest to! 😀

  • seb

    Nie znałem, skorzystam.
    Dzięki 🙂

  • jim1961

    „hasiok” w prawym górnym rogu 😉

    • nrm

      no hasiok, hasiok 😉

  • Myślałem, że to funkcja IntelliJ’a – dzięki za wyprowadzenie z błędu. Już podpiąłem Emmeta do Sublime’a :).

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL