Memulai Karir Frontend dengan Otodidak (Tanpa Bootcamp)

Note: Saya mencoba membuat halaman Trakteer untuk donasi support terhadap blog/tulisan saya, (support hampir semua dompet digital) https://trakteer.id/hanipcode . Yuk Support jika kamu menikmati tulisan ini

Di tulisan kali ini saya akan mencoba menuliskan tentang bagaimana memulai karir di frontend secara otodidak dan bahkan hampir tanpa biaya. apakah cara ini paling benar ? tentu saja tidak. ada sebagian orang yang dapat nilai plus dari bootcamp karena unsur sosial nya, dimana bisa belajar bersama. tapi ada juga yang justru lebih efektif ketika belajar sendiri. nah guide ini untuk orang orang dengan tipe kedua tersebut.

pada dasarnya timeline perjalanan untuk memula karir frontend menurut saya baiknya begini.

Sikap Seorang Software Engineer

sebelum kearah materi saya akan bicara dulu soal sikap yang sebaiknya dimiliki seorang engineer.

Rasa Ingin Belajar

Bukan rahasia umum, kamu tidak akan survive di dunia IT kalau kamu berhenti belajar. seorang software engineer harus lah seorang yang mau dan sanggup terus belajar. apalagi perkembangan di frontend juga sangat cepat. kalau berhenti belajar sudah dipastikan karirmu akan mandek disitu saja.

Rasa Penasaran

Seorang software engineer juga harus memiliki rasa penasaran. karena ini yang akan membuatmu untuk sanggup berlama lama melakukan prosees penyelesaian bug atau bug fixing. Rasa penasaran yang pendek akan membuat mu cepet menyerah dan meenuju ke solusi solusi instan.

Mau Membaca (RTFM: Read The F*cking Manual)

Seorang software engineer harus mau membaca. setidak nya adalah membaca source code dan membaca dokumentasi. seringkali, menanyakan hal yang jelas jelas sudah ada di dokumentasi akan membuat mu di bully di komunitas software engineering. Tapi itu wajar, asal kamu tau, semua engineer juga ga ada yang sebahagia itu buat nulis dokumentasi, masa udah merela-relakan nulis dokumentasi, kamu ga mau baca. hadeh.

Rasa Mau Berbagi Ilmu

Kalau kita lihat, justru engineer engineer yang sukses adalah engineer yang mau berbagi. hampirr semua dev ternama punya blog ataupun aktif di komuunitas, sebut saja Dan Abramov (inventor redux), Kent C Dodds (Engineer Paypal, pencipta downshift), mereka seemua menulis ataupun aktif di komunitas. bahkan justru karena meenulis dan aktif di komunitas juga karir mereka maju, misalnya saja Dan Abramov dan pencipta babel yang akhirnya di recruit Facebook.

Menguasai Materi Dasar

Apa saja kah materi dasar di frontend ? di frontend ada HTML/CSS/Javascript(JS).

HTML

HTML adalah sebuah bahasa markup penyusun dokumen website. jadi wajib belajar html. lebih bagus lagi ketika kamu menerapkan best practice html seperti semantic markup dan mulai mempelajari SEO.

beginner:
- Menyusun dokumen website dengan html

intermediate:
- Semantic HTML5 (utilize tag tambahan seperti main, nav, section etc)

advanced:
- mulai pelajari tentang SEO (meta tag, viewport tag, etc)

CSS

CSS adalah sebuah bahasa styling (pemolesan) di dalam website yang digunakan untuk mempercantik tampilan website. CSS ini sangat luas, karena banyak terkait dengan UX juga. berikut tahap belajarnya

beginner:
- memahami property property pada CSS
- mampu melakukan styling tata letak sederhana
- mengetahui tentang selector (Id, class, select attribute,  etc)
- mengetahui tentang specificity (ID vs class vs tag vs  important)

interemediate:
- mmebuat animasi sederhana dengan css
- mengetahui  tentang pseudo classes (:before, :after, :nth-child)
- mampu styling dengan framework css
- mengenal basic css preprocessor seperti sass/less

advanced:
- mengenal lebih dalam css preprocessor (function/mixin/etc di sass)
- Mengenal konsep strukturisasi CSS (BEM, OOCSS, etc)

JS (Javascrpit)

Javascript adalah sebuah bahasa pemrograman yang dalam konteks frontend digunakan untuk membuat website menjad interaktif. scope JS sendiri sangat luas sebenarnya, jadi disini akan saya simplifikasi

beginner:
- memahami bahasa pemrograman javascript (varriable, type, control flow, looping, etc)
- mampu menggunakan vanilla javascript untuk interaksi interaksi  simple (jQuery jg masih oke, tapi kebanyakan yang bisa dilakuin jquery udah bisa dilakuin vanilla javascript sih)
- meemahami DOM

intermediate:
- mempelajari konsep Functional Programming dasar seperti closure, higher order function, etc (most of frontend framework mmeilih jalur FP)
- mampu menggunakan Frontend Framework (just pick one React/Vue/Angular)
- Mengenal static typing untuk JS seperti Typescript / Flow

advanced:
- Mengenal engine browser seperti V8
- Mengenal event loop dan microtask
- mengenal lebih  dalam frontend framework (misal advanced pattern seeperti Render Props, HoC, di React)
- Mengenal design pattern
- mengenal lebih jauh konsep konsep FP (currying, monad, etc).

Additional Skill/Concept

Berikut additional skill/concept yang perlu kamu kuasai sebagai penunjang karir mu sebagai frontend

beginner: 
- git basic

intermediate:
- clean code
- scrum (Jira/ trello board at leeast)
- structuring git project (branching/git flow/tagging, etc)

advanced:
- Design Pattern
- Design System
- Technical Leadership

Alur Belajar

Lalu bagimana nih memulai belajarnya ? saran pertama saya adalah bersabar. karena pada saat belajar hal yang basic pasti akan membosankan

Belajar Basic

Pertama tama, belajarlah bagian basic pada HTML/CSS/JS diatas. expected outputnya adalah kamu bisa membuat website yang sangat sederhana dan juga memahami basic basic javascript. Tahap ini fokuslah untuk belajar konsep konsep basicnya darripada melakukan banyak tutorial. kalaupun mengikuti tutorial, pastikan sembari mencoba memahami secara konsepnya. Setelah memahami konsepnya, kalau kamu mau ke step optional yaitu intership, cobalah mulai mmebuat portfolio dan akun github. sekalian juga kamu mempelajari tentang konsep konsep git,ada baiknya setiap portfolio yang kamu buat kamu kelola saja dengan git dan di push ke github.

(Optional) Start Internship

kalau kamu sudah beelajar basic dan benar benar memahami konsep nya, kamu sudah bisa untuk mencoba menjajal internship di startup software house. berikut yang perlu kamu persiapkan untuk memilih jalur ini

- portfolio
- akun Linkedin
- akun github (berisi portfolio)
- blog (nilai plus)

Belajar Intermediate

Kalau kamu memilih jalur intternship, dan kebetulan kantor tempatmuu internship memakai framework JS, kamu cukup beruntung karena bisa sambil menyelam minum air. kalau belum, di fase ini lah mungkin fase seru seru nya belajar. karena pengetahuan mu mulai bertambah tapi belum dihadapkan kenyataan kalau yang kamu ketaui masih sedikit haha. Belajarlah frontend framework, saran saya awal nya coba kenali saja dulu semuanya secara konsepnya, lalu pilihlah yang paling kamu suka. Setelah Belajar, banyak banyaklah membuat portfolio unttuk persiapan masuk ke fase berikutnya

Start Junior Fulltime Job Dev

Sama hal nya dengan opsi internship, berikut hal hal yang perlu kamu persiapkan. tentunya harus lebih matang dari saat kamu ingin mendaftar internship. dan juga fase ini adalah fase ideal dimana kamu memulai blog atau berbagi dengan komunitas, karena sudah ada cukup pengetahuan yang dapat kamu share, selain itu juga akan menjadi personal branding kamu dan meningkatkan chance untuk mendapat job.

- portfolio
- akun Linkedin
- akun github (berisi portfolio)
- blog (nilai plus)

Teruslah Belajar dan Berkarir

Setelah kamu mendapatkan pekerjaan, teruslah belajar dan berkarir. mulailah masuk ke hal hal yang advanced. kamu tidak akank kehabisan sesuatu untutk dipelajari sih, yang saya list itu juga masih sedikit sebenernya dan juga teruslah berkarir menapaki karir seorang frontend developer.

Tipical Career Path

berikut tipikal career path seorang frontend developer, tidak di semua perusahaan namun kurang lebih begini:

- Intern FE Engineer
- Junior FE Engineer
- FE Engineer
- Senior FE Engineer
- FE Team Leader
- FE Tech Lead
- FE Architect (Principal Engineeer) / Engineering Manager (Frontend)

Free Learning Resources

Berikut beberapa resource yang mungkin membantu

W3School

https://www.w3schools.com/ adalah website interaktif dimana kamu bisa belajar

Eloquent Javascript

Buku Javascript Gratis https://eloquentjavascript.net/ sangat recommended untuk diibaca untuk belajar JS

YDKJS (You Dont Know Javascript)

Buku Javascript yang gratis kalau mau baca di github nya disini

Group Facebook Javascript Indonesia

Group JS Indonesia

Note: Untuk memaintain blog ini, saya menghabiskan waktu, jika kamu merasa tulisan ini bermanfaat dan ingin melakukan donasi agar saya tetapbisa terus menulis, kamu bisa mengunjungi page Trakteer saya dan berdonasi (support hampir semua dompet digital) https://trakteer.id/hanipcode . Yuk Support jika kamu menikmati tulisan ini