Sorunsuz Web Geliştirme için 15 Kullanışlı Araç

Stereotiplere bağlı kalabilenlerden değiliz, ama muhtemelen (stereo) tipik bir web geliştiricisi lanet sakalını traş ettiğinden, kıyafetlerini değiştirdiğinden veya banyo yaptığından veya o lanet sakalını traş ettiğinden beri uzun zaman oldu…

Onları gerçekten suçlayamazsın. Tüm geliştiricilerin nefes almasından bu yana bir süre geçti. 2015, web geliştirme teknolojisinde sıçramalar ve ilerlemeler ile iyi bir yıl oldu, ancak artık bir geliştirici, Dizüstü Bilgisayarını/MAC'ini (bir patron gibi) kıramaz ve boş zamanlarında bir platform için kod yazamaz.

Şimdi, çoklu platform desteği, HTML5, PHP7 yıl içinde biraz daha ileride piyasaya sürülmek üzere ayarlanmış, her şeyi rahatsız etmeyi bırakmayacak IE gibi tarayıcılar ile duyarlı tasarımla ilgilenmeniz gerekiyor… Nesnelerin İnternetinin kendisinin matris benzeri seviyeleri.

Biz geliştiricilerin ayak uydurmak için yapabileceğimiz tek şey bu. Ama çoğunlukla bu şık araçlar sayesinde yapıyoruz.

Bir göz at.

1. Komodo Düzenlemesi

Her şey bir geliştirici için koddan doğar, bu nedenle bulabileceğiniz en iyi düzenleme aracıyla başlamak doğaldır. Komodo Edit, tüm bunlar ve daha fazlası için oldukça koşer. Kodunuzu yazmanız ve düzenlemeniz için güzel bir platformlar arası, çok dilli metin düzenleyicidir. Oh, ve ücretsizdir.

Araç Windows, Mac, Linux/UNIX üzerinde çalışır, yani orada ter dökmek yok. Ayrıca HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (dünyadaki yaklaşık 5 kişi için) vb. diller için otomatik kod tamamlama özelliğinden dolayı da seviyoruz. Bu akıllı bir metin düzenleyicidir.

Dosyaları düzenlemek ve takip etmek için Proje Yöneticisi özelliğinin ek rahatlığı için bonus puanlar.

2. CSS 3.0 Oluşturucu

Dürüst olalım, CSS3 ile ilgili sevdiğiniz her şeye rağmen, yuvarlak, kahrolası kenarlar gibi şeyler için sözdizimi yazmaya gelince ondan biraz nefret etmekten kendinizi alamazsınız. Uykunu kaçırmak çok önemsiz bir ayrıntı ama yine de yapıyorsun. 100'den fazla yeni mülkü ve ilgili öneklerini ezberleyemezsiniz. Öyleyse, CSS 3.0 Maker gibi bir araç için Tanrı'ya teşekkür edin.

Bu temiz, küçük çevrimiçi araç, zor kodu kopyalayıp stil sayfanıza yapıştırmanıza olanak tanır. Seçtiğiniz kutu yarıçapları, degradeler, metin ve kutu gölgeleri, dönüşümler, geçişler ve döndürmeler gibi stil ayrıntıları için kod üretir. Ayrıca hangi masaüstü ve mobil tarayıcıların bu stil özelliklerini desteklediğini gösterecektir. Küçük bir önizleme alanı etkiyi gösterecek, kod görünüm kutusundan kopyalanabilir veya bir HTML dosyası içinde indirilebilir.

Banal görünen ayrıntılara çok fazla zaman ayıramayan bizler için bu araç bir hayat kurtarıcıdır.

3. –ön eksiz

"CSS önek cehenneminden kurtulun!" – Ön eksiz giriş sayfası.

Bu, Github'dan Lea Verou adlı bir melek tarafından bizi 'ön ek cehenneminden' kurtarmak için getirilen saçma sapan bir araçtır. <link> veya <style> öğelerindeki stil sayfalarına satıcı öneki (göremediğiniz bir yerde) ekler. Ayrıca: Yeni <link> veya <style> öğeleri, jQuery'nin .css() önekleri veya yaptığınız herhangi bir değişiklik hakkında endişelenmenize gerek kalmayacak, çünkü hepsini kapsayacak.

Sevilmeyecek ne var?

4. Blokk Yazı Tipi

'Lorem Ipsum', çok uzun zamandır başvurulacak yer tutucu metin olmuştur. Neyse ki, artık Blokk'umuz var: Anlaşılmaz Latince'nin 'acısını' çığlıklar içinde durduracak yazı tipi.

Blokk, maketler ve tel çerçeveler oluştururken yer tutucu olarak kullanılacak blok 'metni' sağlar. Ayrıca sunumlar sırasında web konusunda daha az bilgili müşterilerin kafasını karıştırmayacağını söylemeye gerek yok.

5. Fontello

Simge yazı tipleri bir şey haline gelmeden önce, geliştiricilerin ölçeklenebilir simgeler oluşturmak için tasarımcıların yardımına başvurması gerekiyordu. Bunları geliştirmek için geçen süre (bu arada, yaratma, çıkarma, uygulama ve özelleştirmeyi içerir) 'kesinlikle saçma' ile sınırlandı. Ama sonra biri ikonları yazı tipine çevirdi ve herkes mutlu bir şekilde yaşadı… öngörülebilir gelecek için.

Fontello harika bir ikon yazı tipi üreticisidir. Binlerce simge arasından seçiminizi yapmanıza, eşlemelerini özelleştirmenize veya adlarını düzenlemenize ve bunları tek bir yazı tipi dosyasında derlemenize olanak tanır. Bu harika ve ücretsiz.

Vitaly Puzrin'e ne kadar teşekkür etsek azdır.

6. Daktilo

Tarayıcınızın JavaScript'ini açın ve seçtiğiniz yazı tipinin gerçek bir sitede nasıl görüneceğini test etmeye başlayın.

Typetester karmaşık değildir. Farklı yazı tiplerini girip karşılaştırmanıza ve görünümlerini test etmenize olanak tanır. İstediğinizi elde edene kadar boyut, izleme, renk vb. ile de oynayabilirsiniz. Aynı anda 36 farklı yazı tipini karşılaştırabilirsiniz. Bununla ne kadar zaman kazanabileceğinizi hayal edin.

Çok güzel.

7. Kirli İşaretleme

Kodlama bazen biraz yorucu olabilir, ancak Seviye: Utter Tedium'da kod temizleme vardır. Yine de, hataları önlemek ve daha hızlı yüklemek istiyorsanız gereklidir.

Kirli İşaretleme, aksi takdirde daha ilginç aktiviteler (pastırma sandviçi, kimse?) için harcayabileceğiniz zamandan tasarruf etmenize yardımcı olur. Bu, diğer tek sözdizimli temizleme araçlarının birleşik yetenekleriyle birlikte gelir. HTML Tidy, CSS Tidy, JS Beautify ve Ace Editor'dan bahsediyoruz. Bu kapsamlı bir temizleyici.

HTML, CSS ve JavaScript'inizi temizlemek ve biçimlendirmek için web tabanlı bir uygulamadır. Daha fazlasını isteyemeyiz.

8. Böcek Sürü

Bu güçlü araçla sadece böcek öldüren bir kanun kaçağı olabilirsiniz.

BugHerd, 'Kısa ve Basit Tut, Aptal'ın asırlık özdeyişini takip ediyor. Müşteri geri bildirimlerini yakalayabilir, küçük sorunları kendi başına çözebilir, hataları izleyebilir (yok etmeniz için). Ayrıca Sekreter oynayacak ve projelerinizi yönetecek.

Sitenizdeki son derece kolay bir tıkla ve tıkla kullanıcı arayüzü, kullanıcılarınızın sorunları bildirmesine olanak tanır. BugHerd, ihtiyaç duyabileceğiniz tüm bilgileri (kullanıcının tarayıcı sürümü gibi) içeren raporlara dönüştürür. Kurulumu kolaydır, kullanımı eğlencelidir ve otomatik ekran görüntüleri (tarayıcı uzantısı), doğrudan bağlantılar, dosya ekleri, tam seçici verileri ve tartışmalar gibi özelliklere sahiptir.

Aylık 29$ standart abonelikte, bu bir yakalama.

9. Ekran Sineği

Duyarlı Web Tasarımı, kalıcı olması açısından yeni bir modadan daha fazlasıdır. Ancak şimdilik, akıcı düzenleri en iyi ihtimalle zor bulacaksınız. Ayrıca, düzeninizi çeşitli ekran boyutlarında test etmeye çalışırken şiddetli bir öfkeye kapılmış halde bulacaksınız.

Neyse ki Screenfly, @media sorgularınızı sizin için test edecek güzel bir küçük web uygulaması. URL'nizi eklersiniz ve üst panelde, sorgularınızın tıkladığınız cihaz boyutlarını nasıl ele aldığını gösterir.

Tarayıcılar arasındaki oluşturma farkını etkilemez, ancak bunun için Tarayıcı Çekimlerini kullanabilirsiniz. Aksi takdirde, sitenizin farklı çözünürlüklerde nasıl göründüğünü görmenin basit ve güzel bir şekilde bir araya getirilmiş bir yoludur.

10. Vakıf

RWD'den bahsettiğimize göre, onu geliştirmek için çerçeveler hakkında konuşmaya başlayabiliriz.

İnternet tartışması, hangi ön uç çerçevesinin daha iyi olduğu konusunda öfkeli: Bootstrap veya Foundation? Birini veya diğerini kullanabilirsiniz. Ancak, ızgara sistemleri, tasarım için orantılı birimler (Bootstrap 4.0 Alpha em ve rem birimlerine taşınmış olsa da), sağdan sola destek, fiyatlandırma tabloları, turlar ve tuval dışı gezinme söz konusu olduğunda Foundation biraz daha öne çıkıyor. .

Fondöteni tercih ettiğimiz aşikar. SASS ve CSS ile çalışır, bir dizi özellikle doludur ve genellikle daha kullanışlı ve esnektir.

Bu konuda Zurb ile hemfikiriz: Bu 'deli hızlı'.

11. Adobe Kenar

Tasarımı kodun önüne koyan on yıllık bir yazılımdan sonra Adobe nihayet kodlayıcılara bir Edge verir.

Bu şaşırtıcı araç ve hizmet dizisi, yeni ön uç kodlama eğilimleri göz önünde bulundurularak yapılmıştır. Bize çok iyi davrandılar. Edge Animate, kodlayıcıların animasyon oluşturmasına yardımcı olurken aynı anda tüm Flash izlerini ortadan kaldırır. Üzgünüm Adobe, Flash harikaydı. Ancak Animate, standart HTML ve JavaScript kullanır ve bilirsiniz, tek beden herkese uyar...

Bir HTML belgesinin içinden CSS'yi düzenlemek için Kenar Kodu vardır. Inspect, duyarlı tasarım için tarayıcı testi ve cihaz uyumluluğu testlerini birleştirir ve süper hızlı güncelleme/özelleştirme için hepsini senkronize eder. Son derece popüler Typekit artık Edge ailesinin bir parçası. Yeniden akış henüz piyasaya sürülmedi, ancak muhtemelen diğer ön uç CSS ızgara oluşturucularını sudan çıkaracak. Ve hala daha var.

Biliyoruz. Çenelerimizi de yerden almak zorunda kaldık.

12. serseri

Vagrant, sanal geliştirme yazılımından çok daha fazlasıdır.

Bu güzellik, taşınabilir, kolayca yeniden üretilebilir çalışma ortamları oluşturmanıza olanak tanır. Sanallaştırma yazılımını, sunucu taban kutusunu ve yapılandırma araçlarını tek bir güçlü pakette birleştirir. Temel olarak, artık VirtualBox + Ubuntu + Chef'e sahip olmanıza gerek yok. Vagrant üçünün de işini yapacak ve bunu yaparken daha az yer kaplayacaktır. Uzman kullanıcılar, çoklu VM ağlarını kolayca kurmanıza nasıl izin verdiğini de söyleyecektir.

Ruby ile yazılmıştır, ancak PHP, Java, JavaScript, Python ve C# için çalışacaktır. Vagrant ile Windows, Mac OSX, Linux ve FreeBSD üzerinde çalışabilirsiniz.

Süper hızlı, çünkü güzel görünen ama çok ihtiyaç duyulan alanı kaplayan U-dostu-I'den hiçbirine sahip değil. Geliştiriciler için bir test ortamı olarak iyi çalışır.

Bu, Kutsal Kase'ye alabildiğimiz kadar yakın.

13. Sayfa Hızı Öngörüleri

Google'ın PageSpeed ​​Insights özelliği, tam olarak ne diyorsa onu yapar. Size Sayfanızın ön uç performansı hakkında bilgi verir. Bu, birçok güçlü ve güçlü geliştirici için ufuk açıcı olacak. Öyleyse bir kahkaha şenliği yapın ve çekilecek tüm saçlardan hızlandırılmış kelleşmeye başlayın.

Tek yaptığı, istek ve ekranın üst kısmındaki içerik oluşturma ile istek ve tam sayfa oluşturma arasında geçen süreyi ölçmektir.

Sayfanızın nasıl performans gösterdiğini hesaplamak için ağdan bağımsız yönleri kontrol eder: sunucu yapılandırması, HTML yapısı, JavaScript, CSS ve resimler.

Çok keskin ve acımasızca hızlı; bu yüzden kesinlikle duygularınızı incitecek ve düşük puan alırsanız muhtemelen sizi ağlatacaktır. Ayrıca, küçümseyen bir ebeveyn gibi, performansınızı iyileştirmek için size sivri önerilerde bulunarak bunu telafi etmeye çalışacaktır.

Ve biz onu seviyoruz.

14. Git

Çoğu modern geliştirici buna zaten aşinadır. Sonuçta GitHub gibi toplulukların varlığını böyle açıklıyorsunuz.

Git, proje geçmişinizi bir havuzda tutan açık kaynaklı bir revizyon kontrolü ve kaynak kodu yönetim sistemidir. Temelde süper hızlı, süper verimli bir PA'dır.

Her zaman her şeyi mahvetme korkusu olmadan özgürce denemenizi sağlar. Ayrıca, birden çok havuz oluşturabilir ve ayrı özelliklerle çalışmak için dallanma/birleştirmeyi kullanabilirsiniz. İşbirlikçi çabalar için özellikle yararlı bir araçtır.

Tamamen dağıtılmıştır, bu nedenle çevrimdışı olduğunuzda (tasarım veya kazayla) net kabustan korkmanıza gerek kalmayacak. Güncellemeleri, sizi sabırla tekrar çevrimiçi olarak bekleyecek olan ana deponuza ekleyebilirsiniz.

15. W3C İşaretleme Doğrulaması

Bu son geçiş törenidir.

W3C İşaretleme Doğrulaması oldukça basit ve gereklidir. W3C'nin belirttiği gibi, doğrulama şunları yapabilir: hata ayıklamanıza yardımcı olabilir, sitenizi geleceğe hazır hale getirebilir (tarayıcılar W3C standartları üzerine kuruludur) ve bakıma yardımcı olabilir.

Ayrıca, size yollarınızın 'hatalarını' göstererek nasıl standartlara uyumlu olacağınızı da öğretir.

İşaretleme Doğrulaması baskıcı olarak düşünülmemelidir, çünkü gerçekten öyle değildir. Daha iyi kod yazmayı öğrenmenize yardımcı olacak…

Profesyonel gibi.

Sonuç olarak

Elbette geliştirmeyi kolaylaştıran daha fazla araç, eklenti, eklenti, kaynak ve topluluk var… tam olarak daha kolay değil ama daha az zahmetli. Ve daha fazlası şu anda geliştiriliyor. Firefox için HTML, CSS ve JavaScript'i canlı olarak izlemenize ve düzenlemenize izin verecek Firebug eklentisi var. PixelDropr, siteniz için en az güçlükle sevimli düğmeler ve simgeler oluşturmanıza olanak tanıyan bir Photoshop eklentisidir.

Her profesyonel geliştirici, nihayetinde daha hızlı ve daha verimli çalışmak için güvendikleri kendi uygulama ve yazılım 'araç setine' sahiptir. Bazıları ücretsiz, bazıları için ödeme yapmamız gerekiyor.

Ama o zaman, kim rahatlığa bir fiyat koyabilir?