Naucz się być mistrzem zen w oznaczaniu

Znaczniki lub znaczniki odnoszą się do języków znaczników lub języków znaczników takimi, jakie są HTML i CSSi wszyscy wiemy, jak bolesne jest otwieranie i zamykanie etykiet jedna po drugiej w celu utworzenia szablonu internetowego ...

Oczywiście są na to rozwiązania, jednym z nich jest autouzupełnianie z podobnymi do IDE Dreamweaver MIERDA Błękitnogryf denerwujące, jeśli nie kupujesz od niego wtyczek o Edytuj Komodo bardzo ciężki... chodzi o to, że IDE lub edytory kodu zbyt obciążone opcjami często utrudniają pracę w niewyobrażalny sposób; tak jest w przypadku Dreamweaver który wypełnia cię śmieciowym kodem, który generujesz graficznie i jest ciężki, drogi i brzydki. Błękitnogryf jest to głównie denerwujące, ponieważ jest bezpłatne, bezpłatne, ale połowa opcji jest zarezerwowana dla płatnych użytkowników ... to nie jest zabawne. I wreszcie mamy Komodo-edytuj, który jest całkiem niezły, mocny i pełen opcji, ale jest ciężki (100 MB na biegu jałowym), a jego konfiguracja jest żmudna.

Najlepszą bronią programisty lub projektanta stron internetowych nie jest IDE w stylu czołgu wojennego z tysiącem broni na wierzchu, to prosty edytor tekstu, kilka wtyczek i możliwość pisania jak chory ... do tego dodaj magię Kodowanie Zen i będą mieli w palcach najlepsze narzędzie do znakowania, jakie kiedykolwiek stworzono (przynajmniej dla mnie).

Ale ... co to do cholery jest Kodowanie Zen?

Po prostu jest to specjalna wtyczka, która służy jako rozwijana warstwa abstrakcji dla HTML i CSS utworzonych w Javascript i dostępne dla wielu najbardziej znanych wydawców (Notatnik ++, edycja Komodo, Gedit, Kate, Bluefish, Geany, Dreamweaver, Etc.).

Aha, nadal nie rozumiem, co mówisz ...

Więc pokażę ci prosty przykład; Pamiętasz rozwijaną abstrakcję? Cóż, zmień to na kurczenie się, wyobraź sobie, że możesz wziąć wiersz kodu HTML / CSS zwinięty w jedną linię i rozwinąć go jak zasłonę lub złożyć do tyłu ... Chcesz zobaczyć, jak? Musisz tylko upewnić się, że masz dwie rzeczy, aby to zadziałało:

Mieć Kodowanie Zen zainstalowany w Twoim edytorze.
Poznaj polecenia i składnię, aby go używać.

Dobra, palce do kodu:

html>head+body

Widzisz tę linię kodu? Cóż, taka jest składnia HTML, jest prosta:

Najpierw umieszczasz nazwę tagu (html), następnie wskazujesz, które tagi będą znajdować się w tym tagu (>), a następnie nazwę tagów, które wchodzą do tego tagu (nagłówek i treść). Znak „+” wskazuje, że głowa i ciało to dwie różne etykiety i żadna z nich nie jest zawarta w drugiej, to jak powiedzenie «razem, ale nie zmieszane«… Następnie zobaczmy, co ta linia kodu generuje po naciśnięciu magicznych klawiszy (w moim przypadku CTRL + E):

Dokładnie, 4 linie kodu połączone w jeden, który magicznie pojawia się po naciśnięciu odpowiedniej kombinacji klawiszy… a może być ich znacznie więcej; na przykład:

html>head+body>ul#lista_ordenada>li.listilla*5

Ta sama składnia, ale dodajemy coś innego… jeśli wiesz coś o CSS, zdasz sobie sprawę, że dodajemy identyfikator, klasy i coś, czego na pewno nie wiedziałeś; mnożniki… co to wszystko jest!? Kurwa, zdezorientowałeś mnie!

Uspokój się, to jest dość proste, powiedzieliśmy powyżej, że w treści wpisujemy tag «ul», nic dziwnego, wyjaśniłem to powyżej, a następnie przypisujemy identyfikator, że jeśli znasz CSS, zrozumiesz, że są one identyfikowane znak '#', a wewnątrz tej nieuporządkowanej listy (ul) dodajemy pięć etykiet z klasą (klasą) listilla, pokrótce to wyjaśnię. W rzeczywistości jest to bardzo proste, „#” oznacza, że ​​jest to identyfikator, a następnie „li.listilla” mówi, że musimy utworzyć etykietę „li” z klasą „li class = listilla”, a następnie mówimy „powtórz to ostatnie pięć razy«. Co daje nam w rezultacie:

Dwanaście wierszy kodu napisanych w jednym wierszu i w znacznie krótszym czasie 😉

I to też da się zrobić za pomocą CSS, chociaż nie będę wydłużał artykułu pokazując oczywiste (poniżej przekażę Ci całą listę cheatów do Kodowanie Zen).

Muszę podkreślić, że to nie działa, aby zrobić milion sto tysięcy wierszy w jednym, o nie, to ma limit i sposób na wykorzystanie. Jeśli na przykład chcemy zrobić coś takiego:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

Co w teorii powinno nam to dać (spójrz na podświetloną linię na ostatnim obrazku):

Da nam to:

Co pokazuje, że z tym też nie można robić magii; Pamiętaj, że mistrz Zen kodu musi być precyzyjny i szybki, a robienie rzeczy źle wykonanych wymaga czasu i szybkości, dlatego poprawna technika pisania szybko i z Kodowanie Zen byłoby to:

html>head>body>ul#lista_ordenada>li.listilla*5

Rozwijasz i wewnątrz tagu head:

title+meta

Który dałby ci poprawny kod:

Chociaż Kodowanie Zen Ma o wiele więcej rzeczy do pokazania i być może konieczność wpisania kolejnej linii poleceń w głowie nie jest najlepsza, więc używamy innego polecenia, «rozwiń skrótem" w moim przypadku ctrl + alt + e co otworzy mały pasek, w którym możemy napisać kod Zen i zobaczyć, jak wygląda on w czasie rzeczywistym. Uważaj, nie polecam pisać wszystkiego z tym, ale pisząc w ramach już utworzonych struktur, to znaczy najpierw stwórz duże struktury, a następnie szczegółowo w nich za pomocą tej opcji.

Wewnątrz jest też wiele super fajnych poleceń Kodowanie Zen, chodzi o to, że sprawdzasz je, gdy już je zainstalujesz i nauczysz się ich używać; Dzięki tej wtyczce nie będziesz potrzebować autouzupełniania ani fragmentów dla css lub html, w rzeczywistości dzięki temu zdasz sobie sprawę, że te opcje są całkowitą stratą czasu w tych dwóch językach programowania 😉

A dla zainteresowanych, oto oficjalny CheatSheet Kodowanie Zen, możesz to zobaczyć w formacie ODF o PDF justo TUTAJ