Belajar menjadi master markup Zen

Markup, atau markup, mengacu pada bahasa markup atau penandaan sebagaimana adanya HTML dan CSS, dan kita semua tahu betapa sulitnya membuka dan menutup label satu per satu untuk membuat template web ...

Tentunya ada solusi untuk hal tersebut, salah satunya adalah autocompletion with IDE's like Dreamweaver mierda bluegriffon menjengkelkan jika Anda tidak membeli plugin darinya o komodo edit sangat berat… Intinya adalah bahwa IDE atau editor kode yang terlalu sarat dengan opsi seringkali berakhir dengan menghambat pekerjaan dengan cara yang tak terbayangkan; seperti kasus Dreamweaver yang mengisi Anda dengan kode sampah apa yang Anda hasilkan secara grafis dan berat, mahal dan jelek. bluegriffon itu sebagian besar menjengkelkan karena gratis, gratis, tetapi setengah dari opsi disediakan untuk pengguna berbayar ... itu tidak menyenangkan. Dan akhirnya kami punya komodo-edit, yang cukup bagus, bertenaga dan penuh dengan pilihan tetapi berat (100mb dalam iddle) dan pengaturannya membosankan.

Senjata terbaik dari pengembang web atau perancang web bukanlah IDE bergaya tank perang dengan ribuan senjata di atasnya, ini adalah editor teks sederhana, beberapa plugin dan kemampuan untuk mengetik seperti orang sakit ... untuk itu tambahkan keajaiban Pengodean Zen dan di jari mereka akan ada alat terbaik untuk menandai yang pernah dibuat (setidaknya untuk saya).

Tapi ... apa-apaan ini Pengodean Zen?

Sederhana, ini adalah plugin khusus yang berfungsi sebagai lapisan abstraksi drop-down untuk HTML dan CSS yang dibuat Javascript dan tersedia untuk banyak penerbit paling terkenal (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, Dll).

Aha, aku masih tidak mengerti sama sekali tentang apa yang kamu katakan ...

Jadi saya tunjukkan dengan contoh sederhana; Ingat hal abstraksi dropdown? Nah, ubah menjadi shrinkage, bayangkan Anda bisa mengambil sebaris kode HTML / CSS yang dikecilkan menjadi satu baris dan membukanya seperti tirai atau melipatnya kembali… Mau lihat caranya? Anda hanya perlu memastikan Anda memiliki dua hal untuk membuatnya berfungsi:

Memiliki Pengodean Zen dipasang di editor Anda.
Ketahui perintah dan sintaks untuk menggunakannya.

Oke, langsung ke kode:

html>head+body

Lihat baris kode itu? Nah itulah sintaks untuk HTML, sederhana saja:

Pertama Anda memasukkan nama tag (html) kemudian Anda menunjukkan tag mana yang akan berada di dalam tag itu (>) dan kemudian nama tag yang masuk ke dalam tag itu (kepala dan badan). Tanda '+' menunjukkan bahwa kepala dan badan adalah dua label yang berbeda dan keduanya tidak terdapat di dalam label yang lain, ini seperti mengatakan «bersama tapi tidak bercampur«... Lalu, mari kita lihat apa yang dihasilkan baris kode itu saat menekan tombol ajaib (dalam kasus saya CTRL + E):

Tepatnya, 4 baris kode dibuat menjadi satu, yang muncul secara ajaib saat Anda menekan kombinasi tombol yang benar… dan masih banyak lagi; sebagai contoh:

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

Sintaks yang sama, tetapi kami menambahkan sesuatu yang lain… jika Anda mengetahui beberapa CSS, Anda akan menyadari bahwa kami menambahkan ID, kelas dan, sesuatu yang pasti tidak Anda ketahui; pengganda… apa semua ini!? Sialan kau membuatku bingung!

Tenang, ini cukup sederhana, kami mengatakan di atas bahwa di dalam tubuh masukkan tag «ul», tidak ada yang aneh, saya jelaskan di atas, lalu, kami menetapkan ID, bahwa jika Anda tahu CSS Anda akan memahami bahwa ini diidentifikasi dengan tanda '#', dan di dalam unordered list (ul) kita menambahkan lima label dengan class (class) listilla, saya jelaskan secara singkat. Sebenarnya itu sangat sederhana, '#' menunjukkan bahwa itu adalah ID, kemudian 'li.listilla' mengatakan bahwa kita harus membuat label «li» dengan kelas «li class = listilla» dan kemudian, kami mengatakan «ulangi lima kali terakhir«. Apa yang memberi kita hasilnya:

Dua belas baris kode ditulis dalam satu baris dan dalam waktu yang lebih singkat 😉

Dan itu juga bisa dilakukan dengan CSS, meskipun saya tidak akan memperpanjang artikel dengan menunjukkan (di bawah ini saya akan memberikan Anda seluruh daftar cheat untuk Pengodean Zen).

Saya harus menekankan bahwa ini tidak berhasil membuat miliaran ratus ribu baris dalam satu, oh tidak, ini memiliki batas dan cara untuk digunakan. Jika misalnya kita ingin melakukan sesuatu seperti ini:

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

Apa, dalam teori itu harus memberi kita ini (lihat garis yang disorot di gambar terakhir):

Ini akan memberi kita ini:

Yang menunjukkan bahwa Anda juga tidak bisa melakukan sihir dengan ini; Ingatlah bahwa master Zen dari kode harus tepat dan cepat, dan melakukan sesuatu yang salah membutuhkan kecepatan dan waktu, oleh karena itu, teknik yang benar untuk menulis dengan cepat dan tepat. Pengodean Zen akan menjadi ini:

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

Anda memperluas dan di dalam tag kepala:

title+meta

Yang akan memberi Anda kode yang benar:

Meskipun Pengodean Zen Ada lebih banyak hal untuk ditunjukkan kepada Anda dan mungkin harus menulis baris perintah lain di dalam head bukanlah yang terbaik, jadi kami menggunakan perintah lain, «luaskan dengan singkatan" dalam hal ini ctrl + alt + e yang akan membuka bilah kecil tempat kita dapat menulis kode Zen dan melihat tampilannya secara real time. Hati-hati, saya tidak merekomendasikan menulis semuanya dengan ini tetapi menulis di dalam struktur yang sudah dibuat, maksud saya, pertama-tama buat struktur besar dan kemudian Anda akan merinci di dalamnya dengan opsi ini.

Dan ada banyak perintah super keren di dalam file Pengodean Zen, masalahnya adalah Anda menyelidikinya setelah Anda menginstalnya dan belajar menggunakannya; Dengan plugin ini Anda tidak perlu autocompletion atau snippet untuk css atau html, bahkan dengan ini Anda akan menyadari bahwa opsi ini hanya membuang-buang waktu dalam dua bahasa pemrograman ini 😉

Dan bagi mereka yang tertarik, berikut adalah CheatSheet resmi dari Pengodean Zen, Anda dapat melihatnya dalam format ODF o PDF justo SINI