goora.me

Stale State & Event Listener

Salah satu sumber bug di React adalah state yang valuenya masih sama dengan yang lama (stale) sewaktu diakses. Ini bisa kejadian salah satunya ketika kita akses state lewat addEventListener. Dalam contoh di bawah, nilai scrollCount di dalam onScroll() selalu 0 karena itu nilainya pada waktu fungsi ini dipasangin ke event

ThreeJS

ThreeJS - Bagian 2

KameraThreeJS menyediakan beberapa tipe kamera yang bisa kita pake sesuai kebutuhan. Ada PerspectiveCamera, OrthographicCamera, ArrayCamera, StereoCamera, & CubeCamera. Yang paling umum dipake adalah tipe perspective & orthographic. OrthographicDemo: https://codesandbox.io/s/camera-orthographic-vyq6uqKamera ini menampilkan objek yang ukurannya konstan, nggak tergantung jarak antara objek dan kamera. Bisa dipake untuk menampilkan

ThreeJS

ThreeJS - Bagian 1

ThreeJS adalah library untuk menampilkan konten 3D di web. Library ini bukan satu-satunya tapi mungkin yang paling populer. Komponen utama dari sebuah pemandangan (scene) 3D adalah: RendererSceneCameraMesh yaitu Object3d paling sederhana dengan komponen utama: geometry & material.Renderer adalah komponen/modul yang bertugas mengambil gambar dunia 3D pada satu waktu

ReactJS

Hook useTransition

Hook useTransition() adalah salah satu fitur baru di ReactJS v18. Hook ini dipake untuk menjalankan update state yang prioritasnya rendah. Batch-update yang dijalanin React kadang bikin aplikasi terasa berat apalagi kalo ngerender banyak elemen sekaligus. Kita bisa meningkatkan performa dengan menunda proses yang prioritasnya lebih rendah. Dalam contoh di bawah

Catatan

Otentikasi Sederhana dengan Auth0

Setelah registrasi di Auth0, buka Dashboard terus klik menu Applications di panel sebelah kiri. Akan muncul daftar aplikasi yang isinya cuma satu namanya Default. Klik tombol titik-titik di kanan aplikasi. Pilih Settings. Kopi Domain & Client Id. Nanti kita butuh untuk inisiasi di aplikasi klien. Skrol ke bawah sampe bagian

ReactJS

React Query - Bagian 4

Lanjutan Bagian 1, 2, & 3.useMutationUntuk update data di server, kita pake hook useMutation(). Kenapa ga pake useQuery()? Sebenernya ya bisa aja sih, tapi karena kueri itu sifatnya deklaratif untuk ngetrigger kita perlu ngerubah state/key. Ribet. Sementara useMutation() sifatnya imperatif, jadi bisa kita trigger lewat event-handler, atau logic

ReactJS

React Query - Bagian 3

Lanjutan bagian 1 & bagian 2Query ClientModul utama dari RQ adalah QueryClient yang bertugas jalanin kueri & cache. Setting Default untuk Semua Kueri (Global)RQ mengijinkan kita mengatur setingan untuk setiap kueri yang kita buat. Tapi makin banyak kueri yang kita buat mungkin kita bisa liat pola setingan yang sering

ReactJS

React Query - Bagian 2

Lanjutan Bagian 1Parallel & Dependent QueryuseQuery hanya bisa menerima satu fungsi kueri, tapi dalam satu komponen kita bisa pake hook ini lebih dari sekali atau bikin fungsi kueri yang isinya dua rekues. Misalnya kita bikin dashboard yang menampilkan listing repositori & gist milik seorang user. Untuk dapetin datanya, kita harus

ReactJS

React Query - Bagian 1

React Query = utilitas untuk membantu fetching data dari server, update data di sisi server, & manajemen state yang berhubungan dengannya. Tanpa RQ: export const Random = () => { const [update, setUpdate] = useState(0); const [num, setNum] = useState(); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); useEffect(() => { setLoading(true); fetch(

TypeScript

Tips TypeScript

Berikuta ini beberapa tips untuk TS. PartialPake Partial untuk bikin tipe yang nggak semua field-nya harus diisi. type User = { name: string; age: number; } // error: Property 'age' is missing in type '{ name: string; }' // but required in type 'User'.ts(2741) const u1:User = { name: 'aaa' } // no error const u2:

Javascript

Algoritma Sorting dengan JavaScript

Beberapa contoh implementasi algoritma dengan JS. Bubble SortBubble sort - WikipediaWikimedia Foundation, Inc.Contributors to Wikimedia projectsfunction swap(arr, index1, index2) { console.log("swapping", arr[index1], arr[index2]); const temp = arr[index1]; arr[index1] = arr[index2]; arr[index2] = temp; } function bubbleSort(arr) { for (let i = 0, len = arr.length; i

Javascript

Algoritma Searching dengan JavaScript

Contoh implementasi algoritma searching dengan JavaScript. Linear SearchCara ini yang paling sederhana. Tinggal ngecek isi array satu persatu. function linearSearch(arr, value){ for(const i = 0, len = arr.length; i < len ; i++){ if(arr[i] === value){ return i; } } return -1; }Binary SearchAlgoritma ini dipake untuk mencari nilai dalam array

ReactJS

Validasi Form dengan Yup

Di sini ada contoh pemakaian Yup untuk validasi form di React. Yup itu library yang sifatnya agnostik – bisa dipake bareng framework apa aja, ga harus React. Pake vanilla JS juga bisa.

ReactJS

Berkenalan dengan Remix - 2

Lanjutan dari Bagian 1LoadersUntuk nampilin daftar postingan di /posts, pasti kita kan perlu ambil data. Bisa dari DB, dari fail, atau dari API lain. Remix nyediain hook useLoaderData & kita tinggal ekspor fungsi loader() di route yang bersangkutan. Fungsi loader() ini dijalanin di server & nantinya otomatis data yang dibalikin

ReactJS

Berkenalan dengan Remix - 1

Remix, framework fullstack baru dari tim pembuat React Router. Secara fungsional mirip NextJS (SSR, routing, dll), tapi banyak yang bilang kalo framework ini juga bisa dibandingin sama Rails, Laravel, dan sejenisnya karena aplikasi webnya bisa jalan tanpa JavaScript. Disclaimer: Materi dalam tulisan ini saya ambil dari video tutorial di Youtube

Javascript

Grouping Elemen Array

Untuk grouping objek dalam sebuah array berdasarkan key-nya, kita bisa pake fungsi reduce(). function groupBy(array = [], key) { return array.reduce((acc = {}, current)=>{ const val = current[key]; // yang nggak punya key ga diproses if(!val) { return acc; } // kalo value keynya belum ada di accumulator, // buat baru if(!acc[val]) { acc[

Javascript

Mendeteksi Duplikat dalam Array

Salah satu cara untuk deteksi duplikat di dalam Array pake some() & findIndex(). function hasDuplicates(arr, field){ return arr.some((obj, idx)=>{ if(!obj[field]){ throw new Error('Unknown field: '+field) } // cari objek yg punya field // valuenya sama tapi indeksnya beda dari indeks // yang skrg lagi diinspeksi (some)

Javascript

Ambil Semua Tanggal dalam Jangka A - B Pake Moment

Kalo kita punya Date A & Date B, gimana caranya ambil semua tanggal dari A - B. import moment from 'moment'; function getAllDaysInRange(startDate, endDate) { let now = moment(startDate); let days = []; while (now.isSameOrBefore(endDate)) { days.push(now.clone()); now = now.add(1, "day"); } return days.map((mmt) => mmt.

ReactJS

Membuat Komponen Kalender untuk ReactJS (2)

Lanjutan dari Bagian 1.Tanggal yang Dipilih di Awal Prop selectedDates bisa dipake untuk nentuin tanggal yang udah terpilih di awal secara individual, nggak berurutan atau berurutan (range). Kita buat dulu styling-nya. &.sunday, &.specials { /*...kode yang lain*/ } /* untuk tanggal yang terpilih */ &.selected { button { background: lightseagreen; color: white;

ReactJS

Membuat Komponen Kalender untuk ReactJS (1)

Komponen kalender / date-picker adalah salah satu komponen yang sering dipake di aplikasi. Dalam tutorial ini saya akan bahas tentang cara membuat sendiri komponen kalender.

Javascript

Setup Aplikasi JS dengan RazzleJS

Membuat direktori proyek aplikasi JavaScript itu lumayan gampang. Tapi bikin aplikasi yang isomorphic , bisa jalan di server (SSR) & juga di browser, itu lain cerita. Lumayan ribet. Razzle bisa bantu menghemat banyak waktu.

ReactJS

Membuat Form dengan React Hook Form

Di ekosistem ReactJS ada beberapa library yang bisa kita pake untuk membantu kita membuat form. Ada React Hook Form Formik, React Final Form, dan lain-lain. Dalam artikel kali ini, saya akan bahas tentang React Hook Form (RHF) & integrasinya dengan Material UI.

E-Book

E-book Gratis Pemrograman JavaScript

Beberapa ebook yang saya tulis. Bisa dicek di website saya yang lama: https://masputih.com/2013/01/ebook-gratis-mengenal-javascripthttps://masputih.com/2013/06/ebook-gratis-belajar-knockoutjshttps://masputih.com/2016/05/e-book-belajar-typescripthttps://masputih.com/2019/01/e-book-gratis-webpack-4-untuk-pemulahttps://masputih.com/2021/05/ebook-gratis-reactjs-untuk-pemula

Pindah Rumah (Domain)

Website saya yang lama udah berumur lebih dari 10 taun. Bosan. Saya pikir pindah ke domain baru lebih menarik. Lagian bosan juga mainan Wordpress :) Udah lama pengen nyoba Ghost, tapi baru sekarang kesampaian. Penyegaran. Nulis artikel lebih nyaman daripada pake Wordpress classic-editor. API nggak (belum pernah) bermasalah. Jadi bisa nulis