Sehari-hari sebagai Front-End Developer

Pada tulisan sebelumnya saya menulis tentang apa-apa saja yang perlu dipelajari jika ingin menjadi Front-End Developer, link-nya https://www.sekolahkoding.com/forum/mau-jadi-front-end-web-developer. Sekarang saatnya saya menjelaskan, sehari-harinya sebagai front-end developer dan bagaimana alur kerja atau workflownya.

Tempat Kerja

Sebagai front-end developer syarat utamanya hanya butuh Laptop atau Komputer dan koneksi Internet, selebihnya itu opsional. Seandainya kamu bekerja pada suatu perusahaan atau punya usaha (start-up) sendiri, maka bisa jadi harus kerja dikantor, atau bisa jadi juga kerja jarak jauh (remote work) yang memungkinkan kerja dimanapun kamu mau. Sebagai freelancer atau yang bekerja remote, maka pekerjaan bisa dilakukan diberbagai tempat, mungkin bisa di rumah, kedai kopi atau working space. Saya sih ngga menyarankan untuk bekerja di rumah, khususnya di kamar tidur. Karena hal tersebut membuat kita kurang fokus untuk bekerja. Minimal ya ada ruang khusus (bukan dikamar tidur) jika ingin bekerja dirumah. Di kedai kopi juga banyak yang memberikan layanan wi-fi gratis sehingga cukup enak apabila bekerja disana. Working space mungkin pilihan yang paling ideal, ya cuma mungkin pengeluarannya jadi lebih banyak, karena harus sewa tempatnya.

Saya sendiri memilih untuk kerja di rumah, tapi ada ruangan khusus biar ngga lihat kasur yang bawaanya jadi pingin tiduran terus. Kadang juga ke kedai kopi.

Waktu Kerja

Tergantung Bekerja dimana, jika dikantor mungkin akan rutin berangkat pagi dan pulang sore hari. Sedangkan yang sebagai freelancer maka bisa bebas memilih jam kerja. Saya memilih untuk bekerja di pagi hari sekitar pukul 6 - 7 pagi, sampai 8 pomodoro cycle, kemudian istirahat. Lanjut sore 8 , dan malam hari 8 pomodoro cycle. Pomodoro itu salah satu strategi untuk mengatur agar kita tetap fokus dalam bekerja. Jadi satu cycle itu 20 menit dan disetiap cycle diberi waktu istirahat 5 menit. Dan setelah Cycle ke 4 kita memperoleh waktu istirahat lebih lama yaitu 15 menit. Jadi total setiap 80 menit kerja, istirahat 30 menit. Ini sangat membantu kita agar tetap fokus. Tanpa pomodoro, kita bisa saja yang tadinya kerja malah entah bagaimana ceritanya jadi facebook-an atau youtube-an terus dan lupa pekerjaan. Dengan jendela istirahat itu, jadi kita bisa menggunakan untuk istirahat dengan cara nonton video atau membuka sosmed.

Hardware

Apa aja sih “gear” yang saya pakai ? standart aja dan ngga terlalu berlebihan

- Laptop Lenovo ideapad 500s - Layar monitor tambahan 27 inch - mouse - dan buku (alat ganjel laptop biar lebih tinggi)

Laptop cuma core i5, cukup mumpuni untuk sekedar koding. Berbeda dengan 3d animator yang mungkin harus menggunakan Komputer yang sangat “buas”. Layar tambahan disini juga berfungsi agar tidak terlalu sering gonta-ganti tab, satu buat liat kode yang ditulis, satu layar lagi untuk melihat hasil akhirnya, atau bisa juga buat kebutuhan lainnya. Mouse external biar lebih gampang, dibanding pake trackpad, ribet! Buku ganjel ini, biar layar laptop cukup tinggi, dan postur tubuh ngga membungkuk ketika mengetik.

Apps

- Sublime Text 3, as text editor - Google Chrome, as main browser - Dev Tools, to debug - Git Bash, sebagai pengganti CMD - Sketch, as layout editor - Trello, untuk memanage Proyek - Google Hangout, for calls - Slack, kadang-kadang buat ngerjain proyek bareng - Dropbox, to cloud storage - Google Calendar, personal organisation - Medium, sebagai bahan bacaan - Facebook, as main social media

Technology

- HTML - JavaScript (jQuery, Vue.js) - Gulp untuk task-running - Webpack sebagai module bundler - Sass untuk CSS pre-processing - Bootstrap dan MDB, sebagai css framework - Postcss for post-processing - Write TypeScript - Build with Vue.js - ES6 sebagai standart penulisan kode

List diatas adalah apa yang menurut saya Ideal. Beberapa sudah cukup ilmu, namun ada beberapa lainnya yang perlu dipelajari lagi, seperti vue.js dan Typescript. Ini mungkin akan berubah kedepannya. Tapi untuk saat ini saya masih menggunakan teknologi tersebut.

Alur Kerja

1. Siapkan segelas kopi dipagi hari 2. Sediakan waktu yang cukup, untuk mempelajari design yang sudah dibuat. 3. Tentukan class-class apa saja yang akan digunakan 4. Apabila menggunakan Vue.js, maka tentukan alur web appnya, dan routing setiap pagenya 5. Menggunakan single file components system yang direkomendasikan oleh vue.js 6. Atau jika tidak menggunakan vue.js (framework) maka bisa dimulai dengan menulis pure htmlnya 7. Kemudian mulai menulis kode menggunakan Sass, yang saya rasa akan mempermudah dalam penulisan CSS. 8. Setelah Tampilan selesai, mulai menulis javascript menggunakan jquery library. Jquery memudahkan dalam penulisan javascript, karena memiliki dokumentasi yang cukup lengkap. 9. Setelah selesai, bisa mulai menambahkan media query untuk mobile, dan sesuaikan juga Javascriptnya. 10. Saya juga menggunakan gulp untuk automasi, seperti mengubah es6 ke es5, concat dan minify file-file, kompresi gambar, dan build appnya.

sebenernya workflownya ngga terlalu lengkap. Tapi insyaAllah, saya bakal nulis khusus tentang workflow untuk nge-develop front-end dari suatu website ! tungguin yaaa..

oh ya, bagi yang belum kenal bisa add fb saya disini https://www.facebook.com/yudhatamadanang

avatar timelord
@timelord

140 Kontribusi 86 Poin

Diperbarui 6 tahun yang lalu

10 Jawaban:

sebenarnya front end vs backend developer bedanya dimana sih

avatar Astried
@Astried

9 Kontribusi 3 Poin

Dipost 6 tahun yang lalu

Front end itu yang berhubungan dengan client. Tampilan yg muncul di browser itu urusan front-end developer.

Sementara back-end itu yang berhubungan dengan server. Seperti mengurus database, mengolah data, dll. Back-end developer yg ngurusin hal tersebut.

Kalo dimisalkan di restoran, maka pramusaji itu front-endnya. Sementara koki, dan semua yg didapur itu back-endnya.

Semoga membantu

avatar timelord
@timelord

140 Kontribusi 86 Poin

Dipost 6 tahun yang lalu

hebat ya agan bisa menguasai ilmu sebanyak itu, ingatannya pasti luar biasa...:D

avatar iamfreestyler
@iamfreestyler

341 Kontribusi 57 Poin

Dipost 6 tahun yang lalu

@irmanfreestyle masih banyak yang lebih berilmu dari saya gan, ingatan mah biasa aja, yang penting diasah terus biar bisa

avatar timelord
@timelord

140 Kontribusi 86 Poin

Dipost 6 tahun yang lalu

WOW saya sangat salut. Good job!

avatar illvart
@illvart

4 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

untuk part 1 nya, tulisan sbelum ini yang mana ya mas?

oh ya, saya masih bingung kadang mas mengenai front end workflownya sprti apa , bila gunain kek gulp ,webpack dan react js. adakah rekomendasinya coursenya? dan video yg membahas lebih mengenai workflow ?

avatar naufaldi
@naufaldi

2 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

@yuzuki24 ini link tulisan yang terkait diatas, https://www.sekolahkoding.com/forum/mau-jadi-front-end-web-developer.

Masalah workflow itu terkadang preferensi masing-masing, bisa aja seseorang ga merasa perlu memakai gulp (build tools) karena npm scripting juga udah bisa melakukannya. Dan masing2 punya gayanya masing2 dalam ngoding, ada yang nulis css dalam satu file style.css untuk styling satu website, ada juga yang milih pakai preprocessor, seperti sass, dan di bikin module-module supaya lebih mudah dihandle dan dimaintain. Dan mungkin setiap framework punya workflow sendiri2.

saran saya sih bisa lihat di youtube, full project front-end, disana dia biasanya ngasih tau dari awal sampai akhir bagaimana dia ngoding. Dari nonton banyak full-project tutorial jadi ada bayangan gimana sih workflownya.

avatar timelord
@timelord

140 Kontribusi 86 Poin

Dipost 6 tahun yang lalu

salam kenal juga, pak sekarang saya bekerja sebagai admin + full stack developer(kerjaan tambahan). apalagi saya baru belajar php procedural & php data object. mohon tips & trik bagi full stack developer pemula seperti saya ini, pak terima kasih

avatar IndoCode
@IndoCode

11 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

salam kenal mas @IndoCode! sayangnya saya bukan seorang fullstack developer :) Saya cuma seorang front-end developer, semoga aja full stack developer yang lain juga mau berbagi di forum ini. jadi untuk request mas, belum bisa saya kabulkan hehehe

avatar timelord
@timelord

140 Kontribusi 86 Poin

Dipost 6 tahun yang lalu

Hai mas - mas saya juga numpang belajar. Saat ini saya full stack php developer tapi udah dikit - dikit pindah banyak ke javascript *banyak apa dikit sih sebenernya haha * Mohon bimbingannya

avatar markeronly
@markeronly

378 Kontribusi 230 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban