WordPress Geliştiricileri İçin Yararlı JavaScript Araçları

Sevgili programlama dostları, web yapımcıları, kod terbiyeciler, zorunlu noktalı virgül severler ve WordPress Hackerman'ları . Hâlâ <table> kullanıyor ve ciddi <div> hastalığından mustarip misiniz? Merak etmeyin, neyse ki hepiniz için bir çözüm var.

90'ları tamamen geride bırakın ve yenilikçi bir web programcısı olun! Sevgili liderimiz Matt Mullenweg'in birkaç yıl önce söylediği gibi: JavaScript'i derinlemesine öğrenin!

Gelecek bugün. Ve özel olarak Gutenberg ve genel olarak JavaScript'in tanıtımı sayesinde, sıçrama yapmak ve WordPress dünyasına ulaşmak üzere olan her şeye hazırlıklı olmak için konfor alanımızdan (diğer adıyla PHPland ) ayrılmanın zamanı geldi.

Bugün, kodunuzu çok az çabayla veya hiç çaba harcamadan ayarlamanıza izin veren birçok JavaScript aracı var. Bu yazıda size bu JavaScript sihirlerinden bazılarını tanıtacağım. Belki bu araçlardan bazılarını duymuşsunuzdur, ancak bunların ne işe yaradığını gerçekten biliyor musunuz?

Daha fazla bahane yok! Tüm bunları okuduktan sonra, bu JavaScript araçlarından bazılarını denemek isteyeceğinizden eminim. Üretkenliğiniz ve programlama hipsterizmi , kalitede inanılmaz bir ileri atılım yapacaktır. Hadi gidelim!

Daha Güzel – Kodunuzu Otomatik Olarak Güzelleştirin

Basit bir şeyle başlayalım. Bir süredir programlama yapıyorsanız ve bir ekip üzerinde çalıştıysanız veya başka biriyle kod paylaşmak zorunda kaldıysanız, bu sorunu yaşadığınıza eminim. Sekmeler veya boşluklar? Parantez aynı satırda mı yoksa sonraki satırda mı? Satır başına 80 karakter veya daha fazla mı? Kısacası, kodunuzu biçimlendirme veya girintileme yönteminiz hararetli tartışmalara yol açabilir…

Kodlama yönergeleri genellikle bu tür bir sorunu çözmek için kullanılır. Ve WordPress bu durumda farklı değil. WordPress'e katkıda bulunmak istiyorsanız, HTML, CSS, PHP ve JavaScript kodunuz tanımlanmış yönergeleri izlemelidir.

Prettier'in yaptığı, kodu seçtiğiniz konfigürasyona göre biçimlendirmektir. Bu şekilde, JavaScript dosyanızı düzenleyicinize kaydettiğinizde (sevgili Atom'um da dahil olmak üzere Prettier ile uyumlu birkaç düzenleyici vardır), kod dönüştürülür ve standart hale getirilir. Bu nedenle, ekibinizin tüm üyeleri, kodu nasıl yazdıklarından bağımsız olarak, aynı birleşik stilde dosyalar üretecektir.

Kendiniz denemek isterseniz, Prettier web sitesinden doğrudan erişilebilen Oyun Alanı'nı kullanın. JavaScript'inizi buraya yazın ve dönüşümden sonra nasıl göründüğünü göreceksiniz. Öte yandan, bilgisayarınıza kurmak istiyorsanız, npm arkadaşınızdır:

 npm install -g prettier

ve test etmek için aşağıdaki gibi kullanabileceğiniz daha prettier komuta sahipsiniz:

 prettier ./my/file.js

Bu komut, dönüşümü ./my/file.js dosyasına uygulayacak ve sonucu komut satırı terminalinde görüntüleyecektir.

WordPress , Prettier'i Core'a entegre etmeyi düşündü, ancak sonunda gerçekleşmemiş gibi görünüyor (tartışmayı burada görebilirsiniz). Ancak Prettier PHP desteği eklediğinde (yapım aşamasındadır) WordPress Core'da bir yer bulabilir.

ESLint – JavaScript'inizin Kalitesini Artırın

ESLint, JavaScript kodunuzla ilgili sorunları çok geç olmadan çözmek için çalıştırmadan önce algılamanıza olanak tanır. Ayrıca, JavaScript kodunuzu belirli yönergelerle (WordPress dahil) uyumlu hale getirmek için yapmanız gereken değişiklikler hakkında da bilgi verebilir.

ESLint'in JavaScript'inizde bulabileceği tipik hataları görmek için web sitelerindeki çevrimiçi demoya göz atabilirsiniz. Öte yandan, bilgisayarınızda ESLint'i test etmek istiyorsanız, aşağıdaki npm komutunu kullanmanız yeterlidir:

 npm install -g eslint

Ardından, daha sonra değiştirebileceğiniz bir yapılandırma dosyası ( .eslintrc ) kurun:

 eslint --init

Ve bu kadar. Doğrudan terminalden bir JavaScript dosyasıyla deneyin:

 eslint ./my/file.js

Sonuç olarak eslint komutunu uygulamanız sonucunda bu dosyanın sahip olduğu sorunları (hatalar ve uyarılar) göreceksiniz.

PostCSS – CSS Stillerinizi Dönüştürün

Web geliştirme söz konusu olduğunda, en nefret ettiğim kısımlardan birinin CSS ile uğraşmak olduğunu itiraf etmeliyim. CSS'nizin tüm tarayıcılarda beklendiği gibi çalışması için her şeyi hesaba katmak bir kabus olabilir.

Şanslıyım ki (ve elbette diğer web geliştiricileri için), CSS ile çalışmanıza yardımcı olacak araçlar var. Nelio'da en çok kullandığımız PostCSS. Bu sayede tarayıcı uyumluluğu öneklerini ( -webkit veya -moz örneğin) unutabiliriz. Buna ek olarak, geleceğin CSS sözdizimini bugün kullanmanıza izin veren CSSNext'i içerir.

Test etmek için doğrudan web sitelerinin Oyun Alanına gidebilirsiniz. Veya terminalinizden CLI sürümünü de deneyebilirsiniz:

 npm kurulumu -g postcss-cli
postcss-cli ./my/file.css

Ancak en yaygın olarak, kod düzenleyicinizle uyumlu bir PostCSS paketi eklemeli (yine Atom ?)

Babel – Yeni Nesil JavaScript'i Bugün Kullanın

Babel, tarayıcıların desteklemesini beklemeden geleceğin JavaScript sözdizimini bugün kullanmanıza izin veren bir JavaScript aktarıcısıdır. Tıpkı CSS için PostCSS gibi çalışır, ancak bu durumda JavaScript içindir. Örneğin Babel ile JavaScript kodunuzdaki ok fonksiyonlarını kullanabilirsiniz. Orijinal kodun ve Babil'den geçtikten sonraki kodun bir örneği:

Yine Babel'i denemek isterseniz, bunu doğrudan kendi web sitesinden yapabilirsiniz, burada istediğiniz JavaScript'i yazabilir ve Babel'in uygulanmasından kaynaklanan JavaScript'i görebilirsiniz. Öte yandan, Babel paketini yükleyebilir ve kendi terminalinizde test edebilirsiniz:

 npm kurulum -g babel-cli
babel ./my/file.js

Komutun sonucu, mevcut tüm tarayıcılarla uyumlu olacak şekilde dönüştürülen JavaScript kodudur. PostCSS'de olduğu gibi, onu projenize en uygun şekilde kurmak için talimatlara bakın (Gulp, Grunt, Webpack…).

Webpack – Kodunuzu Daha İyi Düzenleyin

Gutenberg'de de bulunan başka bir JavaScript aracını kaçırmak istemiyorum. Bu, projenizin tüm bağımlılıklarını alan, bir bağımlılık ağı oluşturan ve çalışmanızı kolaylaştırmak için paketler oluşturabilen bir kod paketleyici olan Webpack'tir.

Webpack'i ilk başta anlamak biraz karmaşıktır… İşte, nasıl çalıştığını netleştirmesi gereken, doğrudan web sitesinden alınan bir örnek:

Yukarıdaki resimde iki JavaScript dosyanız olduğunu görebilirsiniz: app.js ve bar.js . Buradaki nokta, app.js bar.js (ve bunun da birçok başka bağımlılığı olabilir). Tüm bağımlılık sorunu bir eziyet olabilir, ancak Webpack ile çok daha basit.

Resimde gösterilene benzer bir webpack.config.js dosyası oluşturmanız ve ilk giriş noktası olarak app.js ve oluşturmak istediğiniz çıktı dosyası olarak bundle.js oluşturmanız gerekir; bu, açıkça gerekli tüm bağımlılıkları içerecektir. . Bu tanımlandıktan sonra, basitçe web paketi komut webpack çalıştırın, bundle.js dosyasını otomatik olarak oluşturun. HTML dosyanıza ekleyin ve işiniz bitti!

Buradaki fikir, paketleri ilk giriş noktalarından tanımlamanız ve sonra onları unutmanızdır. Bağımlılıklar Webpack'in kendisi tarafından yönetilir. Bu, Gutenberg gibi çok sayıda dosya ve modül içeren projelerimiz olduğunda çok kullanışlıdır.

Kişisel görüş

İsteseniz de istemeseniz de bugün bu JavaScript araçlarından birini kullanma olasılığınız çok yüksek. WordPress temaları ve eklentileri gibi birçok web projesi bunları içerir. Gutenberg bile bu tür birçok yardımcı programdan yararlanır.

Hepsini bir kerede öğrenmek zorunda değilsiniz, ancak bazılarını yavaş yavaş geliştirmelerinize entegre ederseniz iyi olur. Ve unutmayın, başka olağanüstü araçlar kullanıyorsanız, bize deneyiminizle ilgili bir yorum bırakın.

Charles Deluvio'nun öne çıkan görseli ?? Unsplash'ta