Web Geliştiricisinin İş Akışını Hızlandırmak için Araçlar ve Yaklaşımlar

Web geliştirme, çok sayıda yığın, araç, programlama dili ve daha fazlasını bir araya getirir. Buradaki araçlardan / iş akışlarından bazıları bazı durumlarda, bazıları diğerlerinde işe yarayacaktır. Buna daha iyi yaklaşmak için, bu yazıyı bir WordPress Front-End geliştiricisinin bakış açısından yazıldığını düşünün, ancak araçlar oldukça geniş ve birçok durumda kullanılabilir.

1 - tmux

İş akışımda yaptığım en büyük değişikliklerden biri makinemde tmux kurduğum zamandı (macOS ama tabii ki Linux için de çalışıyor). Onu gerçek potansiyeline göre kullanmıyor olsam da harika bir iş çıkarıyor ve projeler arasında anında geçiş yapmama izin veriyor, bu da çok zaman kazandırıyor.

tmux, kontrol etmek için projenin GitHub deposunda yazılmış uzun bir "başlangıç" sayfasına sahiptir. Ayrıca, etkinleştirilebilen fare desteğine sahip kutunun sağ tarafındaki bir klavye ile de çalışır. tmux, anında kurulum için sistemler arasında paylaşılabilen yapılandırma dosyalarını kullanır.

Peki iş akışımı nasıl değiştirdi?

• tmux, sadece iki tuşa basarak bir proje içinde ekranları bölmek ve gezinmek için kolay bir yol sunar. Böylece, bir görünümde çalışan bir "yudum" a, diğerinde çalıştırma komutlarına, üçüncüde sunucuya SSH'ye ve dördüncüde bazı istatistiklere sahip olabilirsiniz.
• Her proje için size "sekme" gibi pencereler verir. Burada iki tuşa basarak farklı projelere geçebilirsiniz. Her zaman sekmelerde açık yaklaşık 20'den fazla projem var ve yeni bir proje üzerinde çalışmam gerektiğinde onu oraya değiştiriyorum ve gulp zaten çalışıyor. Doğru dizinlerdeyim ve 2 saniyenin altında çalışmaya başlayabilirim.
• Tüm kurulumu her zaman AÇIK tutar. İşe her başladığınızda yapmak zorunda değilsiniz, her zaman oradadır. Makineniz kapanır ve yeniden başlatırsanız, (basit bir eklenti ile) standart kurulumunuza “diriltebilirsiniz” ve yaklaşık 5 saniye içinde yeniden çalışır. Bunu yapmak için I7-9900K'da% 100 kullanım gerekmesi komik.
• Bir penceredeki her panel kendi örneğidir. Böylece her panel için farklı Node sürümlerini kolayca çalıştırabilirsiniz.

Kaynak

2 - Alfred (veya Alternatif)

Alfred, Mac için Windows ve Linux için de eşdeğerleri olan bir "verimlilik uygulaması" dır. Alfred'in yaptığı şeylerden bazıları şunlardır:

• Sadece birkaç harf yazarak açık programlara hızlı erişim sağlar
• Dizinlere hızlıca gidin
• İhtiyacınız olanı doğrudan açılır pencerede bulana kadar göz atın
• Dosyaları farklı programlarla açın
• Web'de veya entegre edilmiş programlarınızda ve daha pek çok yerde arama yapın.

Güç paketiyle, işi otomatikleştirebilecek birçok başka "İş Akışı" entegrasyonu da vardır.

Aynı zamanda hızlı erişilebilen bir hesap makinesi olarak çalışır, işletim sistemindeki parçacıkları yönetir (erişmeye bile gerek yoktur, yalnızca otomatik olarak genişletir), bir pano geçmişini kaydeder (cankurtaran), terminalle bütünleşir vb. Bununla ilgili her şeyi uygulama sitesinde bulabilirsiniz.

Nasıl kullanıyorum:

• Öncelikle uygulamaları açmak için. İmleç simgelerin üzerindeyken tıklamıyorum, sadece harfleri yazıyorum ve işte başlıyoruz.
• CSS yazarken hesap makinesi olarak kullanın (genellikle EM değerlerinde olur).
• Pano geçmişi - Bazen panoya 5-6 şey yığıyorum ve ardından bunları gerektiğinde kod düzenleyicisine yapıştırıyorum. Ya da bir e-posta, bazı pasajlar vb. Veya bir projede bir şeyler yapan ve diğerinde yardımcı olacak küçük bir işlev bulmak için birkaç gün geri gidin. Koda göz atmak 10 dakikadan fazla yerine 2-3 saniye sürer.
• Tasarım çalışması yaparken çalışma dizinlerine gidin veya bulucuya göz atmadan doğrudan XD dosyalarına gidin. Bulucuda bir dakikaya karşı 2-3 saniye sürüyor.
• Parçacıklar - Asana için sonuçların ekran görüntülerini, commit bağlantısını eklemek için bir yer, sonraki geliştiricilere mesaj, sahnelemede olup olmadığını vb. İçeren güzel bir "yorum" parçası hazırladım. Bu, ekibin kolayca takip ettiği tüm yorumlarda tutarlı görünen bir mesajdır. Snippet'in yazılması ve açılması 2 saniyeden az sürer.

3 - Terminal araçları / eklentileri

Oh My Zsh - Terminali faydalı hale getirin - ZSH bir hazinedir. Aralarından seçim yapabileceğiniz 270+ eklenti var. Eski kurulumumdan yenisine geçmek yalnızca birkaç dakika süren basit bir yapılandırma dosyası kullanıyor. tmux da aynı şeyi yapar, bu nedenle tüm geliştirici kurulumu dakikalardan oluşmuştur. Aralarından seçim yapabileceğiniz çok sayıda eklenti ile iş akışınız için kesinlikle faydalı bir şeyler bulacaksınız.

ZSH'de en sık kullandığım eklentilerden biri, bir şeye erişmek için kullandığınız yolları öğrenen "Z". Daha sonra sadece birkaç anahtar karakter kullanarak sizi istediğiniz yere götürür.

Örnek: $z te , /folder/path/inner/more/content/testing atlar - daha önce gittiğiniz yere kısayol. Dizinler arasında zahmetsizce geçiş yapar.

exa - Daha güzel bir LS çıkışı. Daha fazlasını web sitelerinde bulabilirsiniz. Kısacası, dosya ve dizinlerin hızlı ve güzel çıktısını da sağlar. Yine - güzel.

ripgrep - Süper hızlı arama. Binlerce satır kod içeren binlerce dosyaya bakmanız gerektiğinde, çok fazla beklememelisiniz. Ripgrep sizi kurtarmak için burada. Ve elbette, çalışmak için tonlarca başka kullanışlı özellik ve anlamlı bayraklarla birlikte gelir. Ayrıca sonuçları anlamlı tutmak için .gitignore dosyalarını da izler.

Kaynak

git-open - Paul Irish tarafından Github'da söylediği şeyi yapan küçük bir araç - git deposunu açar. Söyleyebileceğiniz büyük anlaşma nedir? 6 ay sonra ilk defa üzerinde çalıştığınız projenin tam URL'sini hatırlıyor musunuz? Oraya gitmek ne kadar sürer? Bu komut doğrudan sizin için açacaktır. Ve dahası - aynı zamanda sizi doğru şubeye yönlendirecektir.

CLI'niz! Benim durumumda, çalışmamız WordPress etrafında dönüyor. WP kurulumuyla çalışabileceğiniz bir CLI olarak mutlu bir şekilde. Basit bir yeni site kurulumu, mkdir (klasör oluştur), git clone (depo kopyala), wp core indir, wp db create, wp db import (tümü WP-CLI'den) gibi temel komutları alır. Hepsini yazıp hızlı bir yapılandırma ve 1 dakika sonra yeni bir kurulumunuz çalışıyor.

Kullandığınız araçlarla sizin için işe yarayacak başka benzer CLI'ler olup olmadığını iki kez kontrol ettiğinizden emin olun!

Kaynak

4 - VS Code Eklentileri

Kod düzenleyici / IDE için seçimim VS Code. Daha önce muhteşemdi, ancak daha güçlü bir makineyle artık VS kodunu daha önce daha büyük bir belgeyi kaydırırken aldığım 3 FPS olmadan düzgün bir şekilde kullanabilirim.

Aşağıdaki liste için ESLint, GitLense veya tema / simge paketleri gibi süper ünlü uzantılarla gitmeyeceğim, çünkü bulabileceğiniz hemen hemen her makalede iyi bir şekilde kapsanmıştır.

• Otomatik kapanma etiketi - Her seferinde kapanış etiketlerini yazmanıza gerek kalmaması için. Emmet ile temiz HTML yaparken işe yaramaz, ancak hızlı bir düzenleme yapmanız gerektiğinde size yardımcı olur
• Etiketi otomatik olarak yeniden adlandır - Düzenleme yaparken de oldukça yararlıdır. Yalnızca birini düzenlediğinizde, kapanış / açılış etiketlerini doğrudan değiştirir.
• Kod yazım denetleyicisi - Artık bir yazım hatasıyla bir şey yazarken PR'larda utanmanıza gerek yok. Veya açık kaynaklı projeler için işleri güzel ve güzel tutmak için kullanın.
• Yinelenen eylem - Mevcut dosyalardan yeni dosyalar oluşturmada süper yardımcı olur. Cmd + P ile çalıştırılacak bir komuttur. Ön uç çalışmasında yeni sass / js dosyaları oluştururken harika çalışıyor.
• Jumpy - Harika bir araç! Tanımladığınız bir kısayola tıklamanız yeterlidir ve her kelimenin yanında küçük iki harf kutusu çıkarır. Bunları yazın ve imleciniz ona atlayacaktır. Fare kullanmadan bir dosyada gezinmenin hızlı bir yolu.

Ve profesyonel bir ipucu / hatırlatıcı - görüntüleri VS kodunda önizleyebilirsiniz. Bir kullanıcı arayüzü geliştirdiğinizde ve tasarımcınızın bir görüntüsünü takip ettiğinizde, onu görüntü alanına sürükleyip yandan bakabilirsiniz.

Kısacası:

Dışarıda harika araç ve gereçlerle dolu. Yaptığınız tekrar eden bir işi gördüğünüzde veya "bunu yapmanın daha kolay bir yolu olmamalı mı?" Diye merak ettiğinizde, sadece bir arama yapın! Büyük olasılıkla gerçekten daha hızlı bir yol var. Bunu yıl boyunca birkaç kez yaparsanız, çok hızlı bir tempoda iş üretmenize olanak tanıyan güzel ve sıkı bir iş akışına sahip olacaksınız.

Mümkünse, bazı "güvenli önlemler" de bulun - bazı ipuçlarını ayarlayın, yapı kurulumunuzu otomatikleştirin, birlikte çalışmak için "başlangıç ​​şablonları" oluşturun, hatta kendiniz için biraz CLI yazın.