“Web geliştiricileri için öneriler” konusu uzun bir yazı olacağı için bu konuyu bir yazı dizisi olarak yapmaya karar verdim. Web geliştiricileri için yardımcı programlar, eklentiler ve tavsiyeleri bu yazı dizisi altında toplayacağım. Bir çoğu bilinen şeyler olsa da umarım bir çok kişi için henüz keşfetmediği ve onlara yardımcı olmasını umduğum bir takım bilgiler paylaşmayı umut ediyorum.


Editör

BracketsTamamen açık kaynaklı kodlu ve ücretsiz, Adobe tarafından geliştirilen çok işlevli bir kod editörüdür. Piyasada olan bir çok editörden hafif ve işlevseldir. Mac OS ve Windows için kararlı sürümü mevcut olan bu editörün Linux işletim sistemleri içinde bir versiyonu mevcut lakin tam bir performans alamadım ben. (Eğer Linux işletim sistemi kullanıyor iseniz sizin için Atom daha iyi bir seçenek olacaktır.)

Brackets, HTML/CSS ve JS (PHP, ASP.NET, C# ve dahası içinde rahatlıkla kullanabilirsiniz) kullananlar için en ideal kod editörüdür. Bir çok kullanıcı tarafından geliştirilen eklentileri ile harika sonuçlar alabiliyorsunuz. İşinize yarayacağını düşündüğüm eklentileri altta sizinle paylaşacağım. Ayrıca arayüzü HTML/CSS ve JS ile geliştirildiği için çalışma alanını istediğiniz şekilde düzenleyebiliyorsunuz.

Brackets için eklenti tavsiyeleri:

  • Emmet: Eklenti desteği mevcut olan tüm kod editörleri için bir versiyonu bulunan bu eklenti, geliştiriciler için vazgeçilmezdir. HTML ve CSS kodlarını kısa kombinasyonlar ile oluşturabildiğimiz bu eklenti, proje geliştirirken müthiş bir zaman tasarrufu sağlıyor.
    Örnek Kombinasyonlar ve Çıktıları:

    • html:5
      <!DOCTYPE html>
      <html lang="en">
      <head>
       <meta charset="UTF-8">
       <title>Document</title>
      </head>
      <body>
       
      </body>
      </html>
      
    • a.link(i.fa.fa-facebook)

      <a href="" class="link"><i class="fa fa-facebook"></i></a> 
  • colorHints: CSS dosyanızda kullandığınız renkleri tekrar kullanmak istediğinizde size hızlı seçim olarak sunan eklentidir.
    Örnek vermek gerekirse, #000 koduna ait bir background rengi ve link için bir #fff rengi belirlediniz. Daha sonra farklı bir kısım için yine renk kodu yazacağınız zaman (#) yazdıktan hemen sonra daha önce kullandığınız renk kodlarını ve bu renk kodlarının önizlemeleri karşınıza çıkacaktır.
  • Indentator: Benim vazgeçilmezim olan bu eklenti kod düzeni konusunda en büyük yardımcınız olacaktır. Diğer beautify eklentilerinden farklı olarak Indentator sadece satır düzenini sağlar. Yani kesinlikle sizin kod yapınıza karışmıyor sadece kodlarınızın düzenli olmasını sağlıyor. Kısaca sizin yerinize en uygun şekilde TAB koyuyor.
  • CSSFier: Kimse fark etmese bile front-end geliştiricilerin vaktini harcayan kısımlardan biri HTML yapıyı CSS’e yazmaktır. CSSFier eklentisi bunu otomatik olarak gerçekleştiriyor ve tek yapmanız gereken sadece HTML kodunu kopyalayıp CSS dosyasına yapıştırmak. Ayrıca eklenti SCSS ve LESS için de en uygun dönüşümü sağlıyor.
  • Brackets WordPress Hint: Wordpress geliştiricileri için en önemli eklentilerden biri olan Brackets WordPress Hint, wordpress temaları veya eklentileri geliştirirken ihtiyaç duyulan kodlara ve fonksiyonlara hızlı erişim sağlıyor. Eklenti ayrıca WooCommerce(WordPress’i e-ticaret sistemine çeviren wordpress eklentisi) fonksiyonları içinde aynı işlevi sağlıyor.
  • PHP SmartHints: PHP projeler geliştirenlerin mutlak kullanması gereken bu eklenti PHP diline ait tüm fonksiyonlara ve söz dizimine hızlı erişim sağlıyor. Ayrıca sayfa içinde kullanılan değişkenler ve fonksiyonları algılayıp hızlı erişime dahil ediyor.
  • Custom Work: Brackets birden fazla dosya ile çalışma için default olarak çok uygun değil. Custom Work eklentisi bu açığı mükemmel şekilde kapatıyor.
  • Brackets Icons: Eğer çalışma ortamınızda dosyaların hangi dosya türü olduğunu gösteren ikonlar istiyor iseniz aradığınız eklenti budur.
  • Monokai Darker Soda (Tema): Brackets bir çok temaya sahiptir. Kendiniz için en uygun olan temayı bulup kullanabilirsiniz. Benim kullandığım ve sizin için önerdiğim tema Monokai Darker Soda temasıdır. Gece çalışanlar için gözü yormayan ve söz dizimi renklendirmeleri (bence) en ideal olan temadır.
  • W3CValidationHTML dosyalarınızın W3C kontrollerini editör içinde anlık olarak yapan ve size sunan kullanışlı bir eklentidir. W3CHTML ve CSS kodlarınızın web standartlarına uygun olup olmadığını kontrol eden servistir. (Bir sonraki yazılarda daha detaylı şekilde bahsedeceğim)
  • Simple To-DoYapılacaklar, işler ve benzeri TODO listelerini Trello(Sonraki yazılarda bahsedeceğim) ile tutuyor iseniz bu eklentinin editörünüz de olması gerektiğini düşünüyorum. Eklenti Trello ile çalışabildiği gibi kendi içinde de .txt dosyaları oluşturarak çalışabiliyor. Yapılacaklar listenizi editör içinde takip etmek için en ideal eklentilerden biri Simple To-Do eklentisidir.
  • TodoSimple To-Do gibi bir TODO eklentisidir. Simple To-Do eklentisinden farklı olarak (Büyük bir +) bu eklenti sayfa içinde notlar almanızı ve bu notlara hızlıca erişmenizi sağlıyor. Örneğin bir kaç satırda sorunlar var ve şuan düzeltemeyecek iseniz buna FIXME etiketi ekleyip daha sonra bu sorunun varlığını unutmadan hızlıca erişip işlem yapabilirsiniz. (Ben her iki eklentiyi de kullanıyorum)Todo eklentisiÖrnek Kullanım:
    /* FIXME Bu kısımdaki hata düzeltilecek. */
    
    /* NOTE Bu kısım ile ilgili not. */
    // TODO: [] Bu kısım yapılacak.
    // TODO: [x] Bu kısım yapıldı.
  • SASSHintsSASS/SCSS(Sonraki yazılarda bahsedeceğim) kullanarak oluşturduğunuz değişkenlere ve mixin’lere daha sonra ulaşmak istediğinizde size yardımcı olacaktır. Eğer projelerinizde SASS/SCSS pre-processor kullanıyor iseniz mutlak kullanmanız gereken bir eklentidir.
  • MinimapÇalıştığınız dosya çok uzun ve sayfa içinde sürekli scroll yapıyor iseniz Minimap eklentisi sizi bu durumdan kurtaracaktır. Sağ tarafta çıkan dosya önizlemesi ile dosyanızda ki istediğiniz kısma tek tıkla erişebilirsiniz. (Şahsen ben eklentiye çok ihtiyaç duymadığım için çok sık kullanmıyorum bu yüzden eklenti bende aktif değil. Çalışma alanımı daraltmayı sevmiyorum.)