Technical Notes

Timeshift

Timeshift adalah tool backup sistem di Linux yang bekerja mirip seperti "System Restore" di Windows. Ia membuat snapshot dari sistem file kamu, sehing...

Table

table adalah sebuah objek dalam database yang digunakan untuk menyimpan data dalam bentuk baris dan kolom. Setiap table memiliki nama, kolom, dan tipe...

Database

Database adalah sebuah wadah untuk menyimpan data, dimana data tersebut disimpan dalam bentuk table. sebelum membuat database, pastikan kita sudah m...

PostgreSQL Setup

created_at: "2026-03-19" Wajib dilakukan setelah install. Tanpa ini PostgreSQL tidak bisa dijalankan. Start service: Enable auto start: (...

Apa itu Web Crawlers?

Agar website kamu bisa muncul di hasil pencarian seperti Google, Yahoo, atau Yandex, mesin pencari menggunakan web crawler untuk menavigasi website da...

Mengapa SEO sangat penting?

SEO penting untuk sebuah brand karena ketika SEO pada sebuah website bagus, maka saat website tersebut dicari di internet, posisinya akan berada lebih...

Search Systems (Cara Kerja Mesin Pencari)

Search system biasanya disebut sebagai search engine seperti Google, Bing, DuckDuckGo, dan lain-lain. Search system memiliki beberapa tanggung jawab ...

TanStack Query

tanstack query adalah sebuah library untuk melakukan fetching, caching, sinkronisasi, dan pembaruan data server state di aplikasi React. Library ini s...

Island Architecture

Island Architecture di Astro adalah pola di mana hanya bagian-bagian tertentu dari halaman web yang dibuat interaktif atau dinamis, sementara sisanya ...

Intro Astro

Astro adalah framework web untuk membangun content-driven website seperti: Blog Landing page marketing E-commerce Astro berfokus pada performa dengan...

Git Dasar

Catatan ini berisi perintah-perintah dasar Git yang umum digunakan dalam manajemen versi kode sumber. --- Digunakan untuk mengubah direktori proyek...

Git Configuration (`git config`)

Git menyimpan konfigurasi dalam beberapa level: System: /etc/gitconfig (berlaku untuk semua user di komputer) Global/User: ~/.gitconfig atau ~/.config...

Git Conflict Resolution

Saat melakukan merge Saat melakukan rebase Saat melakukan git stash pop --- Jika terjadi konflik, Git akan menandai bagian yang bermasalah seperti ...

GPG Commit Signing

Memastikan bahwa commit benar-benar dibuat oleh kamu (otentikasi identitas). Meningkatkan kepercayaan terutama untuk proyek open source. --- Tambah...

Perbedaan `git add` vs `git stash`

Catatan ini menjelaskan perbedaan utama antara git add dan git stash, serta kapan sebaiknya menggunakan masing-masing perintah. --- Digunakan untuk...

asChild (shadcn UI)

asChild adalah sebuah prop yang biasa dipakai di komponen shadcn UI seperti DropdownMenuTrigger, DialogTrigger, dll. Fungsinya untuk membuat komponen ...

Power Profile

Untuk mengatur mode power profile di Linux (kayak di Windows: Power Saver, Balanced, Performance), kamu bisa menggunakan tool powerprofilesctl. Jika...

Error Handling

Di Next.js versi 13+ dengan App Router (/app directory), error handling dilakukan dengan membuat file error.tsx di dalam folder route. File ini akan m...

Middleware

Middleware di Next.js dipakai buat intercept request sebelum masuk ke route. Ini powerful banget buat: Redirect Auth check Logging Rewrite URL Cek use...

Route Hanlder

kita dapat melakukan endpoint masking agar tidak terliat api atau url backendnya tidak terekpost di client kita dapat menggunakan route.ts yah miri...

Streaming di Next.js

Ketika sebuah halaman membutuhkan waktu lama untuk fetching data, kita bisa memberikan efek loading agar pengalaman pengguna tetap nyaman. Next.js m...

Server Action

Server Action adalah fitur di Next.js 13+ yang memungkinkan kita menjalankan fungsi di server langsung dari komponen React di client, terutama digunak...

Parallel Routes

Di Next.js (App Router), Parallel Route digunakan untuk menampilkan beberapa tampilan sekaligus dalam satu layout, tanpa harus membuat URL path terpis...

Tipe Generic (Generic Types)

Tipe generic adalah fitur TypeScript yang memungkinkan kita membuat komponen (fungsi, interface, class) yang bekerja dengan berbagai jenis data tanpa ...

tipe-data-promise

Data Fetching

Sebelum melakukan data fetching, siapkan backend sederhana menggunakan JSON Server dengan langkah berikut: Buat file database.json dengan konten: Jala...

Image

Di Next.js, selain pakai elemen <img>, kita juga bisa menggunakan komponen bawaan <Imagedari next/image. Komponen ini punya beberapa keuntungan diband...

Font di Next.js

Di Next.js cara menginstall font \\tidak lagi menggunakan <linkatau @import dari Google Fonts seperti ini Next.js menyediakan package bawaan untuk...

Route Groups

Route Groups di Next.js digunakan buat mengelompokkan route agar bisa menggunakan satu layout bersama, tanpa harus nambah direktori atau struktur URL ...

Dynamic Route

Di TypeScript (terutama pada framework seperti Next.js), dynamic route digunakan untuk membuat route yang dinamis, yaitu route yang bisa menerima para...

Interface

interface di TypeScript mirip dengan tipe data alias ([[tipe-data-alias]]), tapi punya beberapa perbedaan penting. Interface digunakan untuk mendeskri...

Properties

Di TypeScript, kita bisa bikin properti dalam object jadi opsional alias boleh ada, boleh nggak. Caranya tinggal tambahin tanda ? setelah nama prope...

Tipe Data Enum

enum (enumeration) adalah tipe data khusus di TypeScript yang digunakan untuk menyimpan sekumpulan nilai konstan yang memiliki nama. Cocok buat data y...

Tipe Data Alias

Tipe data alias digunakan untuk memberi nama baru pada struktur tipe data, terutama saat bekerja dengan objek. Dengan alias, kita bisa membuat tipe ...

Tipe Data Object

Tipe data object cocok digunakan untuk kasus-kasus sederhana, jadi gak perlu repot bikin alias type ([[tipe-data-alias]]). ---

🛡️ Conservation Mode (Lenovo)

Mode ini membatasi charging sampai 60%, untuk rawat umur baterai di laptop Lenovo. Cocok kalau laptop sering nyolok ke charger terus. untuk cek ji...

Tipe Data any

Tipe data any adalah tipe paling fleksibel di TypeScript. Dengan any, variabel bisa diisi nilai apa pun tanpa pengecekan tipe oleh TypeScript.

Tipe Data Union

Union type digunakan ketika sebuah variabel bisa memiliki lebih dari satu jenis tipe data. Di TypeScript, kita bisa menentukan beberapa tipe data sek...

Gagal update & upgrade pakage

saat menjalanan perintah sudo pacman -Syu muncul error Error ini biasanya terjadi karena ada proses pacman lain yang masih berjalan atau belum sel...

Tipe Data Array

Array di TypeScript bisa ditulis dengan dua cara: Tipe string[] berarti array yang hanya boleh berisi data string. Sama juga dengan number[], arti...

Git Pull Divergent Branches Issue

Saat menjalankan git pull, muncul pesan berikut: Branch lokal dan remote memiliki perubahan yang tidak sinkron, sehingga Git tidak bisa langsung m...

Setup TypeScript

Buat proyek baru dan jalankan perintah berikut: Pastikan type diatur menjadi "module" dalam package.json. Instal TypeScript: Mengapa...

**Routing**

Di Next.js, kita tidak perlu mengatur routing secara manual seperti di react-router-dom, karena Next.js sudah menggunakan file system routing. Ini mem...

Server Components dan Client Components

Server Components dirender di server dan mengirimkan hasilnya ke client. Untuk mengujinya, Anda dapat menambahkan console.log di dalam komponen, dan l...

📖 Panduan Dasar Markdown

Markdown adalah bahasa markup ringan yang digunakan untuk penulisan teks yang bisa dikonversi ke HTML. --- Gunakan # untuk membuat heading. Semakin...

**Interleaving dalam Server dan Client Components**

Alih-alih menandai semua file sebagai Client Components dalam kode di [[server-components-dan-client-components]], kita dapat mengabstraksikan bagian ...

Metadata

Contoh penggunaan static metadata di app/layout.tsx: Kita juga bisa pakai template untuk title: --- Contoh metadata dinamis berdasarkan data d...

TypeScript

TypeScript adalah bahasa pemrograman berbasis OOP yang dikembangkan oleh Microsoft. TypeScript memiliki sistem tipe yang kuat (strongly typed) dan dik...

Function

Function di TypeScript memiliki dua bagian penting: parameter dan return type. helo: string → parameter bertipe string. : string setelah tanda kurung ...