Bagaimana Seharusnya Desainer Belajar Membuat Kode? Terminal Dan Editor Teks (Bagian 1)

Sebagai seorang desainer dengan pengalaman bertahun-tahun, saya sering mendorong kolega dan laporan saya untuk mengambil beberapa keterampilan pengkodean. Sementara banyak yang terbuka dengan gagasan itu, yang lain menolak gagasan itu. Saya biasanya mendengar beberapa variasi "Saya tidak belajar desain untuk menjadi pengembang." Meskipun ini adalah masalah yang valid, saya ingin menekankan dua poin: pemahaman yang lebih baik tentang materi biasanya mengarah pada hasil yang lebih baik, dan ada perbedaan penting antara "pengkodean" dan "rekayasa perangkat lunak."

Seri artikel dua bagian ini akan berguna bagi setiap desainer di luar sana yang juga ingin mendapatkan beberapa keterampilan pengkodean.

Memahami Bahan Baku

Bertentangan dengan apa yang mungkin dipikirkan beberapa orang, desain bukan tentang membuat maket yang indah, ini tentang memberikan pengalaman fungsional yang intuitif kepada pengguna akhir. Itu tidak bisa dilakukan tanpa pemahaman tentang blok bangunan solusi. Seorang arsitek tidak akan menjadi sangat baik dalam pekerjaannya jika dia tidak memahami bahan yang diminta rencananya dan seorang desainer tidak akan menjadi sangat baik jika dia tidak memahami bahan yang membuat desainnya menjadi hidup - Kode. Pengalaman dengan pengkodean membantu desainer memahami apa yang mungkin dan apa yang tidak, dan apakah desain mereka dapat secara efektif menjalankan fungsi yang diinginkan.

Saya juga meyakinkan rekan-rekan saya bahwa pengetahuan tentang coding tidak berarti seseorang harus menjadi seorang insinyur. Keduanya merujuk pada perangkat keterampilan yang berbeda, meskipun terkait. Seperti yang ditulis oleh Kyle Thayer, seorang kandidat PhD di University of Washington baru-baru ini, bidang ilmu komputer (atau teknik) adalah tentang memberi para siswa "gambaran umum bidang ilmiah komputasi":

“Tujuan dari gelar Ilmu Komputer adalah untuk memberikan siswa gambaran tentang bidang ilmiah komputasi. Meskipun ini mencakup beberapa pemrograman, pemrograman dilakukan terutama untuk tujuan pembelajaran tentang area lain (misalnya, sistem operasi, algoritme, pembelajaran mesin, interaksi manusia-komputer). Gelar CS adalah langkah pertama yang baik ke bidang akademik ilmu komputer.”

— Kyle Thayer

Sebaliknya, pengkodean berarti menjadi cukup akrab dengan bahasa pemrograman yang diberikan untuk menyelesaikan tugas. Meminta seseorang untuk mempelajari HTML atau JavaScript dasar tidak mengharuskan mereka menjadi arsitek perangkat lunak yang lengkap. Terlepas dari apa yang mungkin dipikirkan beberapa orang, membuat repo dan menyalin/menempelkan jawaban Stack Overflow tidak menjadikan Anda seorang insinyur perangkat lunak — tetapi itu dapat meningkatkan nilai yang Anda bawa sebagai desainer ke tim pengembangan produk.

Bagaimana Dengan "Kode Rendah"?

Beberapa orang mungkin mengatakan bahwa kita memasuki masa depan kode rendah di mana desainer (dan pengembang) dapat membangun aplikasi melalui fungsionalitas drag-and-drop dan GUI (antarmuka pengguna grafis). Jadi meluangkan waktu untuk mempelajari bahasa pemrograman tidak “layak”. Munculnya alat-alat seperti Webflow, Modulz, FramerX, UXPin, dll., tampaknya mendukung pemikiran ini. Dan ini bisa sangat benar untuk banyak aplikasi — lebih mudah dari sebelumnya untuk membuat situs atau aplikasi tanpa satu baris kode pun. Namun, jika Anda tidak memahami prinsip-prinsip yang mendasarinya, Anda akan membatasi nilai yang dapat Anda berikan dengan aplikasi kode rendah.

Kami juga belum mencapai titik di mana Anda dapat membangun aplikasi skala perusahaan dengan platform kode rendah. Sebagai desainer kita harus bekerja di dunia tempat kita hidup, bukan dunia yang kita bayangkan akan datang.

Karena itu, semua orang membawa perpaduan keterampilan yang unik ke meja. Pengetahuan tentang kode bukanlah kebutuhan mutlak dan hanya harus didorong, tidak diperlukan.

Mulai dari mana?

Ada banyak sekali alat, bahasa, sekolah, panduan, dan sumber daya lain yang tersedia bagi siapa saja yang memiliki akses ke internet — jadi harus mulai dari mana? Penafian penting - saya sama sekali bukan ahli, atau apa pun yang dekat dengan insinyur perangkat lunak - dan berikut ini adalah wawasan dari pengalaman pribadi saya, bukan jalan yang dijamin menuju kesuksesan.

Banyak desainer/pengembang yang saya kenal biasanya mulai meretas template HTML dan CSS di situs seperti MySpace, Geocities, Tumblr, Neopets, atau lainnya. Sekarang saya telah cukup berkencan dengan diri saya sendiri, bagi siapa pun yang memulai hari ini, saya akan merekomendasikan memulai dengan shell antarmuka baris perintah (CLI) ramah Anda.

Terminal: Alat Penting

Aplikasi masuk untuk sutradara Hollywood setiap kali ada peretas komputer di layar, terminal hanyalah antarmuka yang memungkinkan Anda untuk melakukan tindakan melalui input teks daripada antarmuka pengguna grafis (GUI) yang biasa digunakan kebanyakan orang. Saya akan membiarkan pengembang nyata menjelaskan seluk-beluk dan cara teknis, tetapi untuk tujuan kami, cukup baik untuk mengetahui bahwa membiasakan diri dengan CLI bermanfaat karena sejumlah alasan.

Terminal memberi Anda akses ke file dan struktur folder komputer Anda — dengan cara yang sama seperti Anda mengeklik Finder atau Explorer, Anda menavigasi menggunakan keyboard di terminal. Memang perlu waktu untuk membiasakan diri, tetapi mengembangkan model mental Anda di area ini adalah dasar untuk bekerja dalam kode.

Seperti banyak desainer, saya menggunakan lingkungan macOS (sebelumnya dikenal sebagai OS X), tetapi yang berikut ini berlaku untuk sistem operasi *nix lainnya (Linux, Unix), dan juga untuk Windows PowerShell. Meskipun ada banyak tumpang tindih antara sistem operasi modern yang berbeda, ada beberapa perbedaan yang akan saya soroti sebaik mungkin.

Ekspresi Reguler

Fitur utama dalam CLI adalah kemampuan untuk menggunakan ekspresi reguler (regex) dalam perintah Anda. Pikirkan regex sebagai operasi pencarian boolean (menggunakan tanda kutip untuk mencari frasa yang tepat atau tanda minus untuk mengecualikan kata) pada steroid — mereka memungkinkan Anda untuk menentukan pola dalam string teks sehingga Anda dapat melakukan beberapa tindakan pada output. Berikut adalah beberapa contoh dunia nyata:

1. Jika Anda memiliki daftar panjang nomor telepon dalam berbagai format, Anda dapat menentukan skrip yang akan memberi Anda output yang konsisten berdasarkan ekspresi reguler — misalnya: (###) ###-#### untuk Format nomor telepon AS.
2. Jika Anda ingin dengan cepat mengganti nama sekelompok file ke kasus tertentu — dari kebab-case ke CamelCase atau apa pun di antaranya.

Berikut adalah beberapa perintah terminal dasar ^* untuk membantu Anda memulai:

1. cd adalah singkatan dari "Ubah Direktori", ketik ini dan kemudian file atau jalur folder yang akan dituju - perhatikan bahwa Anda dapat mengetikkan nama folder tetapi harus berada di dalam folder Anda saat ini untuk membukanya.
2. ls daftar file dan folder di folder Anda saat ini.
3. pwd adalah singkatan dari "Print Working Directory" - ini akan mencantumkan di mana Anda saat ini berada di komputer Anda.
4. mkdir dan nama folder akan membuat folder di direktori kerja Anda.
5. menggunakan cd dengan .. membawa Anda satu tingkat ke atas — jika Anda berada di /users/username/documents/2019 dan Anda memasukkan cd ../.. Anda akan berakhir di /users/username .
6. Kiat bonus — menekan tombol Tab akan melengkapi otomatis saat Anda mengetik jalur folder/file.

Catatan : Berikut ini akan berfungsi pada baris perintah Windows ( cmd ):

• cd , cd .. , mkdir , Tombol tab untuk path autocomplete ( ls dan pwd tidak akan bekerja) .

Baris perintah Windows yang lebih modern (Windows PowerShell) mendukung semuanya:

• cd , cd .. , ls , pwd , mkdir , dan Tab untuk path autocomplete.

Untuk daftar lengkap perintah yang tersedia di PowerShell, periksa halaman Bantuan Microsoft ini “Menggunakan Nama Perintah yang Dikenali”.

Manajemen File Massal

Anda dapat memanipulasi file dan folder secara massal melalui terminal — berikut adalah beberapa ide:

1. Anda dapat membuat folder tiga tahun dengan subfolder untuk setiap bulan dalam satu perintah — menggunakan mkdir -p dan {list-of-years}/{list-of-months} ​​akan membuat folder untuk setiap tahun dengan subfolder untuk setiap bulan. Gunakan imajinasi Anda, saya yakin Anda bisa memanfaatkan ini dengan baik!
2. Anda dapat dengan cepat membersihkan desktop Anda dengan menggunakan mv Screen\ Shot* Screenshots — ini akan memindahkan semua file Anda yang dimulai dengan "Screen Shot" ke folder bernama "Screenshots".

Scripting Dan Pemeliharaan

Sekarang setelah kita melihat sekilas kekuatan ekspresi reguler dan opsi yang tersedia di terminal, kita dapat mulai menggabungkan hal-hal itu ke dalam skrip . Salah satu skrip yang sangat sederhana, namun kuat, dan umum digunakan adalah penggantian nama file Mike G:

 criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done

Apa yang memungkinkan skrip ini untuk Anda lakukan, adalah menentukan cakupan ( criteria ), menentukan apa yang ingin Anda ubah ( re_match ), dan apa yang ingin Anda ubah ( replace ) — dan kemudian jalankan.

Ada banyak skrip lain yang dapat Anda buat selain membuat dan mengganti nama file — Skrip Pengubah Ukuran Batch Vlad adalah contoh luar biasa dari kemampuan menghemat waktu yang dapat Anda buat menggunakan skrip bash.

Tips Dan Trik Tingkat Lanjut

Sesuatu yang saya temukan selama bertahun-tahun adalah bahwa mengatur ulang komputer saya secara teratur dan menginstal ulang sistem operasi membantunya tetap relatif bebas dari kekacauan dan mencegah perlambatan yang dialami semua orang setelah bertahun-tahun detritus digital yang terakumulasi pada hard drive. Bagi banyak orang, prospek menghapus komputer dan mengatur ulang semuanya menjadi yang terbaik terdengar seperti beberapa hari kerja, dan paling buruk adalah mimpi buruk yang mustahil yang mungkin tidak akan pernah Anda pulihkan.

Tapi itu tidak harus — dengan menggunakan beberapa alat baris perintah, setelah Anda mencadangkan, menghapus, dan menginstal ulang OS Anda, Anda tidak hanya dapat menginstal daftar aplikasi favorit Anda, tetapi juga font dalam hitungan menit menggunakan Homebrew. (Homebrew hanya untuk Mac dan Linux. Untuk Windows, coba Chocolatey yang merupakan alternatif yang solid.)

Jika Anda tertarik — kami telah membuat panduan penyiapan yang mudah diikuti agar komputer Anda dalam kondisi yang baik untuk sebagian besar pengembangan. Panduan kami adalah untuk macOS, tetapi Owen Williams telah menulis panduan yang solid untuk Windows juga.

Jika Anda tidak punya waktu untuk seluruh rangkaian tutorial Wes tentang baris perintah — setidaknya saya sangat merekomendasikan tumpukan berikut:

1. Oh ZSHku
2. zsh-autosugesti
3. zsh-sintaks-sorotan
4. z-lompat-lompat

Memilih Editor Teks

Ada banyak pilihan dalam memilih editor kode — Teks Sublime dan Kode VS (Visual Studio Code) adalah dua yang paling saya miliki dan saya gunakan saat ini.

Sublime Text adalah salah satu editor teks sebelumnya yang menjadi populer di kalangan pengembang front-end — itu adalah standar emas hingga beberapa tahun yang lalu. Fitur seperti beberapa kursor, manajer paket yang kuat, dan pintasan yang sangat dapat disesuaikan yang memungkinkan Anda menavigasi dengan cepat di dalam dan di antara file dan folder. Belum lagi itu adalah aplikasi yang sangat ringan dan cepat yang menjadikannya pilihan yang mudah.

VS Code (Visual Studio Code) muncul sekitar tahun 2015, butuh beberapa saat bagi orang untuk beralih dari Atom dan Sublime, tetapi VS Code telah memantapkan dirinya sebagai editor favorit banyak pengembang. Selain hampir semua fitur Sublime, VS Code membedakan dirinya dengan terminal bawaan dan integrasi yang erat dengan Git. Selain itu, Visual Studio Code memiliki ekosistem plugin yang kaya yang memungkinkan Anda memperluas dan menyesuaikan lingkungan Anda sesuka hati.

Artinya — Anda tidak perlu menjadi pengembang untuk menghargai fitur editor kode yang bagus. Saya telah menemukan banyak kegunaan untuk itu dalam pekerjaan saya sehari-hari; dua, khususnya, adalah kemampuan untuk menggunakan banyak kursor, dan menggunakan regex untuk menemukan-dan-mengganti teks di seluruh folder file. Mari kita lihat lebih dekat keduanya.

Mengedit Dengan Banyak Kursor

Bayangkan pengolah kata khas Anda — garis vertikal berkedip yang menunjukkan ke mana teks yang Anda masukkan akan pergi? Sekarang bayangkan kemampuan untuk menambahkan lebih dari satu kursor ke jendela ini sehingga apa pun yang Anda ketik akan muncul di mana pun ada kursor!

Ini mungkin belum mengejutkan Anda — jadi inilah contoh yang menunjukkan beberapa cara editor teks tingkat lanjut dapat membantu Anda menciptakan efisiensi sehari-hari dalam alur kerja Anda.

Di sini kami memiliki daftar nama yang perlu kami ubah menjadi alamat email — kami juga ingin membuat semuanya menjadi huruf kecil dan kemudian mengurutkannya berdasarkan abjad. Ini dapat dilakukan dengan beberapa penekanan tombol.

Setelah Anda menempelkan daftar, Cmd + Shift + P menampilkan Palet Perintah (istilah mewah untuk menu yang dapat dicari yang memberi Anda semua fungsi yang tersedia). Pada dasarnya Anda dapat mengetik di menu ini apa yang ingin Anda lakukan, hampir semua hal yang dapat Anda lakukan untuk teks tersedia di sini. Jika tidak, kemungkinan ada plugin atau ekstensi yang dapat Anda temukan.

Kami dapat mengubah huruf besar dan mengurutkan garis dalam hitungan detik — lalu menekan Ctrl + Shift + tombol panah menambahkan kursor, lalu apa pun yang kami ketik akan ditambahkan ke setiap baris — dalam hal ini, kami mengubah nama menjadi alamat email, tetapi imajinasi liar Anda dapat menemukan banyak cara lain untuk menggunakan ini.

Anda mungkin berkata — baik saya bisa melakukan ini di Excel atau Google Sheets, yang benar, tetapi saya telah menemukan bahwa jauh lebih cepat untuk menangani hal-hal semacam ini dalam editor teks. Anda menghindari keharusan menulis rumus dan memilih sesuatu dengan mouse.

Editor Kode Mana yang Harus Saya Gunakan?

Saya seorang desainer — jadi tentu saja, jawaban saya adalah “tergantung”.

• Jika Anda baru mengenal konsep ini, saya akan merekomendasikan untuk mendapatkan uji coba gratis Sublime — ini terus menjadi aplikasi yang sangat ringan dan tidak menghabiskan terlalu banyak sumber daya sistem. Anda dapat menyesuaikan binding kunci Sublime (kata mewah untuk hotkeys) dan memperluas fungsionalitas bawaannya dengan plugin.
• Jika Anda telah menggunakan Sublime, Atom, atau editor lain — saya sarankan untuk memeriksa VS Code juga. Tim di Microsoft telah benar-benar melakukan pekerjaan yang sangat baik menjadikannya editor teks yang kuat, namun mudah digunakan.

Secara pribadi, saya menggunakan kedua editor — Sublime sangat cepat dan terbuka dalam sepersekian detik yang memungkinkan saya untuk dengan mudah menempel dan memanipulasi teks. Tetapi ketika saya ingin menyelesaikan pekerjaan yang lebih serius, saya menggunakan VS Code. Sulit untuk menjadi yang teratas dalam paket all-in-one yang disediakan oleh VS Code — plugin yang dinamis dan ekosistem ekstensi, palet perintah yang kuat, dan antarmuka yang dapat disesuaikan secara hyper berarti Anda benar-benar dapat menjadikannya milik Anda sendiri. Belum lagi fakta bahwa Microsoft sangat didorong untuk memastikan bahwa ini adalah pengalaman kelas satu untuk produktivitas pengembang.

Kesimpulan, Dan Apa Selanjutnya?

Dalam artikel pertama ini, Anda akan mempelajari dasar-dasar terminal, beberapa peretasan produktivitas untuk memulai, dan harus memiliki gagasan yang lebih baik tentang editor kode apa yang harus dipilih. Di bagian selanjutnya, kita akan melanjutkan dengan topik kontrol versi, HTML dan CSS, dan pengenalan prinsip-prinsip rekayasa.

Ada yang salah?

Ada kemungkinan besar bahwa sesuatu dalam posting ini tidak jelas, tumpul, dan/atau usang dan saya ingin kesempatan untuk membuatnya lebih baik! Silakan tinggalkan komentar di bawah, DM saya, atau @mention saya di Twitter agar saya bisa berkembang.