DEV Community: Shazi Awaludin

Day 6 & 7 - Clock app

Shazi Awaludin — Fri, 19 May 2023 06:13:44 +0000

Pada hari ke 3,4,5 aku tidak mempostingnya karena pada hari itu aku tidak membuat project, melainkan sepenuhnya membaca dokumentasi milik react. Aku mendedikasikan diri untuk membaca bagian state management yang aku pikir itu akan membantuku di masa yang akan datang.

Pada tiga hari itu aku menyelesaikan membaca dokumentasi pada bagian:

Barulah pada hari ke 6 dan 7 aku mengimplementasikan apa yang aku pelajari dengan membuat sebuah clock app. Pada hari ke 7 ini fitur yang selesai adalah stopwatch yang bisa dilihat di sini.

Apa yang aku pelajari:

Jarak antara waktu mulai dan waktu berhenti dapat digunakan untuk membuat stopwatch. tapi pendekatan ini tidak dapat digunakan apabila stopwatch memiliki fitur pause.
Pendekatan yang lebih proper digunakan yaitu dengan menghitung durasi dalam milidetik agar fitur pause dapat diimplementasikan. Hal ini karena pendekatannya adalah increment, dan fungsi start akan menambah selama stopwatch dalam keadaan running. apabila dipause, maka nilai terakhir akan disimpan, dan apabila dimulai lagi maka nilai terakhir akan dijadikan referensi untuk kembali dilakukan increment.
ketika mengubah state dan mereferensi nilai sebelumnya, maka gunakanlah fungsi (prev) => { what value that you want}.

Code di bawah ini tidak akan bekerja semestinya:

const intervalRef = useRef(null);
const [millisecondsPassed, setMilisecondsPassed] = useState(0);

intervalRef.current = setInterval(() => {
  setMilisecondsPassed(millisecondsPassed +10);
}, 10);

hal tersebut karena yang direferensikan oleh millisecondsPasseddi dalam setMilisecondsPassed(millisecondsPassed +10);mengacu ke nilai yang sama setiap saat dalam interval tersebut. Misal apabila milisecondsPassed awalnya adalah 0, maka hasil penjumlahannya akan selalu 10, bukan increment seperti 10, 20, 30, 40, …dst. Code yang benar adalah sebagai berikut:

const intervalRef = useRef(null);
const [millisecondsPassed, setMilisecondsPassed] = useState(0);

intervalRef.current = setInterval(() => {
  setMilisecondsPassed((prev) => prev + 10);
}, 10);

Day #2 - Carousel

Shazi Awaludin — Wed, 10 May 2023 05:27:21 +0000

Di hari sebelumnya aku telah menyelesaikan sebuah halaman sederhana menggunakan nextjs. Di hari ini aku ingin tampilannya menjadi lebih lengkap dengan menambahkan satu halaman lagi yang berisi forecast weather selama satu minggu. Menambahkan fungsi carousel serta memperbaiki konten yang sudah ada sebelumnya. pada hari ini aku berhasil menyelesaikan:

add carousel ✅
add list of forecast day ✅
fix bug yang ada di halaman home (kesalahan penerapan endpoint sehingga konten yang ditampilkan tidak relevan) ✅

kamu bisa lihat aplikasi yang sudah selesai di hari ini disini

Jika kamu melihat ini dan sepertinya ada yang bisa diperbaiki, tolong tinggalkan comment untukku yaa!

Day #1 - Axios and NextJS

Shazi Awaludin — Wed, 10 May 2023 05:22:45 +0000

Jadi di hari pertamaku dalam tantangan 100 hari ini aku mencoba belajar mengimplementasikan axios pada nextjs. Tidak ada alasan tertentu tentang performa atau semacamnya. Aku juga tidak tahu apakah ini adalah best practice atau bahkan worst. Aku hanya penasaran bagaimana menggunakan axios di nextjs. Dengan studi kasus berupa web weather app dengan pendekatan mobile first

Pada hari pertama ini aku berhasil menyelesaikan:

use Axios to send HTTP request ✅
create UI using MaterialUI ✅
deploy to Vercel ✅

kamu bisa lihat aplikasi yang sudah selesai di hari ini disini

Jika kamu melihat ini dan sepertinya ada yang bisa diperbaiki, tolong tinggalkan comment untukku yaa!

100 Days React

Shazi Awaludin — Tue, 09 May 2023 03:31:28 +0000

Halo Dev, ini adalah post pertamaku di Dev.to, aku harap disini aku bisa lebih berkembang lagi dengan sekumpulan orang hebat di dalamnya.

if you see this post, i need your support to learn react, please help me 🙂

Background

Aku sekarang ada di umur 22, sebagai seorang developer yang aktif belajar dan masih di bangku kuliah. Aku belum memiliki pekerjaan tetap, saat ini aku ada di posisi sebagai Quality engineer. Walau demikian, sekarang aku sedang kembali belajar front-end web dev yang pernah tertunda selama beberapa waktu. Sebelumnya selama 2021 sampai akhir 2022 lalu aku bergelut di bidang back-end engineer dan cloud computing. 2023 ini aku kembali bergelut dengan front-end dev dan lebih memilihnya dibanding back-end dan cloud computing karena ternyata aku lebih senang untuk menyajikan aplikasi yang langsung berinteraksi dengan user. Oleh karenanya, aku kembali memilih untuk belajar front-end.

Aku menargetkan belajar react selama 100 hari ke depan karena aku harus memiliki pekerjaan dengan gaji yang mumpuni sebelum wisuda selanjutnya atau setidaknya sebelum Oktober.

The goal

secara spesifik aku sedang mengincar sebuah jabatan full-time di sebuah company, atau setidaknya divisi frontend entah itu di jogjakarta atau di jakarta. Aku sedang mengharapkan sebuah tempat di mana aku bisa mencari ilmu lebih banyak lagi dan bisa bekerja dengan tim secara langsung. other specifics:

Front-end dev menggunakan react, sebagai sebuah framework yang memang aku sedang sukai
gaji yang mumpuni
remote memiliki nilai lebih

Ekspektasi harian

Ini adalah pertama kali aku mencoba 100 days challenge. Jadi sepertinya aku harus mengerahkan energi ekstra untuk menjaga konsistensiku dalam berkembang. Ekspektasinya:

setiap hari aku akan membuat sebuah project, halaman, atau react component
setiap yang aku buat akan memiliki github repo, atau sebuah commit git yang telah dipush ke github
setiap hari aku akan mencatat dan mendokumentasikan apa yang telah aku buat di notion, di bagian 100 Days challenge React. Jika itu adalah sebuah project, aku akan mempostingnya di dev.to
di hari liburku, aku akan membaca setidaknya sebuah halaman medium atau menggunkan berlatih menjawab inteveiw question selama 25 menit per hari (1 pomodoro)

Karena aku sudah menulis ini, maka aku harus menyelesaikannya. Mari bekerja, dan itu lebih baik bukan?