Zen biçimlendirme ustası olmayı öğrenin

Biçimlendirme veya biçimlendirme, olduğu gibi biçimlendirme veya etiketleme dillerini ifade eder. HTML ve CSSve hepimiz bir web şablonu oluşturmak için etiketleri tek tek açıp kapatmanın ne kadar acı verici olduğunu biliyoruz ...

Elbette bunun için çözümler var, bunlardan biri IDE'ler ile otomatik tamamlamadır. Dreamweaver Mierda mavi grifon ondan eklenti satın almazsanız can sıkıcı o Komodo düzenleme Çok ağır… Mesele şu ki, IDE'lerin veya kod editörlerinin seçeneklerle fazlasıyla yüklü olması çoğu zaman işi hayal edilemeyecek şekillerde engelliyor; durum böyledir Dreamweaver grafiksel olarak ürettiklerinizi çöp koduyla dolduran ve ağır, pahalı ve çirkin. mavi grifon çoğunlukla sinir bozucu çünkü ücretsiz, ücretsiz, ancak seçeneklerin yarısı ücretli kullanıcılar için ayrılıyor ... bu eğlenceli değil. Ve sonunda sahibiz Komodo-düzenleme, oldukça iyi, güçlü ve seçeneklerle dolu ama ağır (orta derecede 100 mb) ve kurulumu sıkıcı.

Bir web geliştiricisinin veya web tasarımcısının en iyi silahı, üstünde bin silah bulunan savaş tankı tarzındaki IDE'ler değil, basit bir metin editörü, bazı eklentiler ve hasta bir insan gibi yazabilme yeteneği ... buna büyüsünü ekle Zen Kodlaması ve parmaklarında şimdiye kadar oluşturulmuş en iyi işaretleme aracına sahip olacaklar (en azından benim için).

Ama ... neyin nesi Zen Kodlaması?

Basittir, içinde oluşturulan HTML ve CSS için aşağı açılır soyutlama katmanı görevi gören özel bir eklentidir. Javascript ve en ünlü yayıncıların çoğuna (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverGibi).

Aha, hala ne dediğini anlamıyorum ...

Bu yüzden size basit bir örnekle gösteriyorum; Açılır soyutlama şeyini hatırlıyor musunuz? Pekala, küçültmek için değiştirin, bir satır HTML / CSS kodunu tek satıra daraltabileceğinizi ve bir perde gibi açabileceğinizi veya geri katlayabileceğinizi hayal edin ... Nasıl olduğunu görmek ister misiniz? Çalışması için iki şeye sahip olduğunuzdan emin olmalısınız:

Var Zen Kodlaması editörünüzde yüklü.
Kullanmak için komutları ve sözdizimini bilin.

Tamam, kodun parmakları:

html>head+body

Şu kod satırını görüyor musunuz? İşte HTML için sözdizimi bu, basit:

Önce etiketin adını (html), ardından bu etiketin (>) içinde hangi etiketlerin olacağını ve ardından bu etiketin içine giren etiketlerin adını (başlık ve gövde) belirtirsiniz. '+' İşareti, baş ve bedenin iki farklı etiket olduğunu ve hiçbirinin diğerinin içinde olmadığını gösterir, sanki «birlikte ama karışık değil«… Sonra, sihirli tuşlara (benim durumumda CTRL + E):

Tam olarak, doğru tuş kombinasyonuna bastığınızda sihirli bir şekilde ortaya çıkan tek bir kod haline getirilmiş 4 satırlık kod… ve çok daha fazlası olabilir; Örneğin:

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

Aynı sözdizimi, ancak başka bir şey ekliyoruz… biraz CSS biliyorsanız, bir kimlik, sınıflar ve kesinlikle bilmediğiniz bir şey eklediğimizi fark edeceksiniz; çarpanlar… bütün bunlar nedir!? Siktir et kafamı karıştır!

Sakin olun, bu oldukça basit, yukarıdakilere "ul" etiketinin içine girildiğini söyledik, garip bir şey değil, bunu yukarıda açıkladım, sonra bir kimlik verdik, CSS'yi biliyorsanız bunların ile tanımlandığını anlayacaksınız. '#' işareti ve bu sırasız listenin (ul) içine sınıf (sınıf) listilla ile beş etiket ekliyoruz, bunu kısaca açıklayacağım. Aslında çok basittir, '#' bunun bir kimlik olduğunu belirtir, ardından 'li.listilla', "li class = listilla" sınıfıyla "li" etiketi oluşturmamız gerektiğini söyler ve sonra "bunu son beş kez tekrarla«. Sonuç olarak bize ne verir:

Tek bir satırda ve çok daha kısa sürede yazılmış on iki satır kod 😉

Ve bu CSS ile de yapılabilir, ancak açık olanı göstererek makaleyi uzatmayacağım (aşağıda size tüm hilelerin listesini vereceğim Zen Kodlaması).

Bunun bir zilyon yüz bin satır yapmak için işe yaramadığını vurgulamalıyım, oh hayır, bunun bir sınırı ve onu kullanmanın bir yolu var. Örneğin şöyle bir şey yapmak istiyorsak:

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

Teoride bize bunu vermesi gereken şey (son görüntüdeki vurgulanan çizgiye bakın):

Bize şunu verecek:

Bu da bununla sihir yapamayacağınızı gösterir; Kodun bir Zen ustasının kesin ve hızlı olması gerektiğini ve yanlış yapılan şeyleri yapmanın hızı ve zamanı aldığını, bu nedenle hızlı ve doğru yazma tekniğinin Zen Kodlaması şu olurdu:

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

Baş etiketinin içinde genişlersiniz:

title+meta

Bu size doğru kodu verir:

Rağmen Zen Kodlaması Size göstereceği çok şey var ve belki de kafanın içine başka bir komut satırı yazmak en iyisi değil, bu yüzden başka bir komut kullanıyoruz, «kısaltmayla genişlet" benim durumumda ctrl + alt + e Bu, Zen kodunu yazabileceğimiz ve gerçek zamanlı olarak nasıl göründüğünü görebileceğimiz küçük bir çubuk açacak. Dikkatli olun, bununla her şeyi yazmanızı tavsiye etmiyorum ama daha önce oluşturulmuş yapıların içine yazmanızı yani önce büyük yapıları yaratın ve sonra bu seçenekle içlerini detaylandıracaksınız.

Ve içinde çok sayıda süper harika komut var. Zen KodlamasıMesele şu ki, onları kurduktan ve kullanmayı öğrendikten sonra onları araştırıyorsunuz; Bu eklenti ile css veya html için otomatik tamamlamaya veya pasajlara ihtiyacınız olmayacak, aslında bununla bu seçeneklerin bu iki programlama dili içinde tamamen zaman kaybı olduğunu anlayacaksınız 😉

Ve ilgilenenler için işte resmi CheatSheet Zen Kodlaması, bunu formatında görebilirsiniz ODF o PDF sağ BURAYA