Alat dan Pendekatan untuk Mempercepat Alur Kerja Pengembang Web

Pengembangan web menggabungkan sejumlah besar tumpukan, alat, bahasa pemrograman, dan banyak lagi. Beberapa alat / alur kerja di sini akan berfungsi dalam beberapa kasus, beberapa di kasus lain. Untuk pendekatan yang lebih baik, pertimbangkan posting ini yang ditulis dari sudut pandang pengembang Front-End WordPress, meskipun alatnya cukup luas dan dapat digunakan dalam banyak kasus.

1 - tmux

Salah satu perubahan terbesar yang saya miliki dalam alur kerja saya adalah ketika saya menyiapkan tmux di mesin saya (macOS tetapi tentu saja berfungsi untuk Linux). Meskipun saya mungkin tidak memanfaatkannya hingga potensi sebenarnya, ini berfungsi dengan baik dan memungkinkan saya beralih antar proyek secara instan, yang menghemat banyak waktu.

tmux memiliki halaman panjang "memulai" yang ditulis di repositori GitHub proyek untuk diperiksa. Ia juga bekerja dengan keyboard langsung dari kotak dengan dukungan mouse yang dapat diaktifkan. tmux menggunakan file konfigurasi yang dapat dibagikan di seluruh sistem untuk pengaturan instan.

Jadi bagaimana cara mengubah alur kerja saya?

• tmux memberi Anda cara mudah untuk membagi layar dan menavigasi dalam sebuah proyek hanya dengan menekan dua tombol. Jadi Anda dapat menjalankan "tegukan" di satu tampilan, perintah untuk dijalankan di tampilan lain, SSH ke server di tampilan ketiga, dan beberapa statistik di tampilan keempat.
• Ini memberi Anda jendela untuk setiap proyek yang seperti "tab". Di sini Anda dapat beralih ke proyek yang berbeda menggunakan dua penekanan tombol. Saya memiliki sekitar 20+ proyek yang terbuka di tab sepanjang waktu dan ketika saya harus mengerjakan proyek baru, saya hanya mengalihkannya ke sana, dan gulp sudah berjalan. Saya berada di direktori yang benar dan saya dapat mulai bekerja dalam waktu kurang dari 2 detik.
• Menjaga seluruh pengaturan AKTIF sepanjang waktu. Anda tidak harus melakukannya setiap kali Anda mulai bekerja, itu selalu ada. Jika mesin Anda mati dan Anda mem-boot-nya lagi, Anda dapat langsung “menghidupkan kembali” (dengan plugin sederhana) ke pengaturan standar Anda dan dalam waktu sekitar 5 detik itu kembali. Lucunya, dibutuhkan 100% penggunaan pada I7-9900K untuk melakukannya.
• Setiap panel di jendela adalah instance-nya sendiri. Jadi Anda dapat dengan mudah menjalankan versi Node berbeda untuk setiap panel.

Sumber

2 - Alfred (atau Alternatif)

Alfred adalah "aplikasi produktivitas" untuk Mac yang setara dengan Windows dan Linux juga. Beberapa hal yang dilakukan Alfred adalah:

• Ini memberi Anda akses cepat untuk membuka program hanya dengan mengetikkan beberapa huruf
• Buka direktori dengan cepat
• Jelajahi hingga Anda menemukan apa yang Anda butuhkan langsung di munculan
• Buka file dengan program berbeda
• Telusuri web atau program Anda yang telah terintegrasi dan banyak lagi.

Dengan powerpack-nya, ada banyak integrasi "Alur Kerja" yang juga dapat mengotomatiskan pekerjaan.

Ia juga berfungsi sebagai kalkulator akses cepat, mengelola cuplikan di seluruh OS (bahkan tidak perlu mengaksesnya, hanya memperluasnya secara otomatis), menyimpan riwayat clipboard (penyelamat), terintegrasi dengan terminal, dan sebagainya. Anda dapat menemukan semua tentangnya di situs aplikasi.

Bagaimana saya menggunakannya:

• Pertama, tentu saja, untuk membuka aplikasi. Saya tidak mengklik dengan penunjuk pada ikon, saya hanya mengetik huruf dan begitulah.
• Gunakan sebagai kalkulator saat menulis CSS (sering terjadi dengan nilai EM).
• Sejarah clipboard - Saya terkadang menumpuk 5-6 hal di clipboard dan kemudian menempelkannya di editor kode dimanapun diperlukan. Atau kembali beberapa hari yang lalu untuk menemukan beberapa email, beberapa potongan, dll atau bahkan fungsi kecil yang melakukan sesuatu dalam satu proyek dan akan membantu di proyek lain. Diperlukan 2-3 detik alih-alih 10+ menit untuk menjelajahi kode.
• Buka direktori kerja saat melakukan pekerjaan desain atau langsung ke file XD tanpa menelusuri pencari. Membutuhkan waktu lagi 2-3 detik vs satu menit atau lebih di finder.
• Cuplikan - Saya telah menyiapkan cuplikan "komentar" yang bagus untuk Asana dengan tangkapan layar hasil, tempat untuk menambahkan tautan komit, pesan ke pengembang berikutnya, status apakah sedang dalam pementasan atau tidak, dan seterusnya. Ini adalah pesan yang tampak konsisten di semua komentar yang diikuti dengan mudah oleh tim. Diperlukan waktu kurang dari 2 detik untuk mengetik dan membuka cuplikan.

3 - Alat / plugin terminal

Oh My Zsh - Jadikan terminal berguna - ZSH adalah harta karun. Ada 270+ plugin untuk dipilih. Ini menggunakan file konfigurasi sederhana, yang hanya membutuhkan beberapa menit untuk bermigrasi dari pengaturan lama saya ke yang baru. tmux melakukan hal yang sama, jadi seluruh pengaturan dev hanya beberapa menit. Dengan banyaknya plugin yang dapat dipilih, Anda pasti akan menemukan sesuatu yang berguna untuk alur kerja Anda.

Salah satu plugin yang lebih sering digunakan di ZSH yang saya gunakan adalah "Z", yang mempelajari jalur yang Anda gunakan untuk mengakses sesuatu. Ini kemudian akan membawa Anda ke mana pun Anda inginkan hanya dengan menggunakan beberapa karakter kunci.

Contoh: $z te akan melompat ke /folder/path/inner/more/content/testing - pintasan ke tempat Anda pergi sebelumnya. Membuat berpindah antar direktori tidak merepotkan.

exa - Output LS yang lebih cantik. Anda dapat menemukan lebih banyak di situs web mereka. Singkatnya, ini menyediakan output file dan direktori yang cepat dan bagus juga. Sekali lagi - cantik.

ripgrep - Pencarian super cepat. Saat Anda perlu mencari ribuan file dengan ribuan baris kode, Anda tidak perlu menunggu terlalu lama. Ripgrep hadir untuk menyelamatkan Anda. Dan tentu saja, itu hadir dengan banyak fitur berguna lainnya dan tanda yang berarti untuk digunakan. Ini juga mengikuti file .gitignore agar hasil tetap bermakna.

Sumber

git-open - Alat kecil oleh Paul Irish di Github yang melakukan apa yang dikatakannya - ini membuka repositori git. Apa masalah besar yang mungkin Anda katakan? Apakah Anda ingat URL yang tepat untuk proyek yang Anda kerjakan, untuk pertama kalinya, dalam 6 bulan? Berapa lama waktu yang dibutuhkan untuk menavigasi ke sana? Perintah ini akan langsung membukanya untuk Anda. Dan banyak lagi - ini juga akan mengarahkan Anda ke cabang yang benar.

CLI Anda! Dalam kasus saya, pekerjaan kami berkisar pada WordPress. Yang bahagia sebagai CLI di mana Anda dapat bekerja dengan instalasi WP. Penyiapan situs baru yang sederhana menggunakan perintah dasar seperti mkdir (buat folder), git clone (Clone a repo), wp core download, wp db create, wp db import (semua dari WP-CLI). Mengetik semuanya dan konfigurasi cepat dan setelah 1 menit Anda memiliki pengaturan baru yang sedang berjalan.

Pastikan untuk memeriksa ulang apakah ada CLI serupa lainnya yang akan bekerja untuk Anda dengan alat yang Anda gunakan!

Sumber

4 - VS Code Plugins

Pilihan saya untuk editor kode / IDE adalah VS Code. Itu luhur sebelumnya, tetapi dengan mesin yang lebih besar sekarang saya dapat menggunakan kode VS dengan benar tanpa 3 FPS yang saya dapatkan sebelumnya ketika menggulir ke bawah dokumen yang lebih besar.

Untuk daftar di bawah ini saya tidak akan menggunakan ekstensi super terkenal seperti ESLint, GitLense atau paket tema / ikon karena semuanya tercakup dengan baik di hampir semua artikel yang akan Anda temukan.

• Tag tutup otomatis - Agar Anda tidak perlu menulis tag penutup setiap saat. Tidak berguna saat melakukan HTML bersih dengan Emmet, tetapi membantu ketika Anda harus melakukan pengeditan cepat
• Auto rename tag - Juga cukup membantu saat Anda melakukan editing. Ini akan langsung mengubah tag penutup / pembuka saat Anda mengedit salah satunya.
• Pemeriksa ejaan kode - Sekarang Anda tidak perlu merasa malu di PR ketika Anda telah menulis sesuatu dengan kesalahan ketik. Atau gunakan saja untuk menjaga semuanya tetap bagus dan cantik untuk proyek open source.
• Tindakan duplikat - Sangat membantu dalam membuat file baru dari yang sudah ada. Ini adalah perintah untuk dijalankan dengan Cmd + P. Bekerja luar biasa dengan membuat file sass / js baru di pekerjaan front-end.
• Jumpy - Alat yang luar biasa! Tekan saja pintasan yang Anda tentukan dan itu akan menampilkan dua kotak huruf kecil di sebelah setiap kata. Ketik dan kursor Anda akan melompat ke sana. Cara cepat untuk menavigasi file tanpa menggunakan mouse.

Dan tip / pengingat profesional - Anda dapat melihat pratinjau gambar dalam kode VS. Saat Anda mengembangkan UI dan mengikuti gambar dari desainer Anda, Anda dapat menariknya ke viewport dan melihatnya di samping.

Pendeknya:

Penuh dengan alat dan instrumen luar biasa di luar sana. Kapan pun Anda melihat beberapa pekerjaan berulang yang Anda lakukan atau Anda bertanya-tanya "bukankah seharusnya ada cara yang lebih mudah untuk melakukannya", lakukan saja penelusuran! Kemungkinan besar memang ada cara yang lebih cepat. Jika Anda melakukannya beberapa kali sepanjang tahun, Anda akan mendapatkan alur kerja yang ketat dan memungkinkan Anda menghasilkan pekerjaan dengan sangat cepat.

Jika memungkinkan, temukan juga beberapa "tindakan aman" - siapkan beberapa linting, otomatiskan penyiapan build Anda, buat "template awal" untuk digunakan, bahkan mungkin tulis CLI kecil untuk Anda sendiri.