Tools & Setup

Sebelum mulai coding, kamu perlu setup development environment yang proper dulu. Halaman ini bakal guide kamu step-by-step buat install dan configure semua tools yang diperlukan.

Tenang, gak seribet yang kamu bayangin kok! 🚀

Essential Tools

Ini adalah tools yang WAJIB buat semua developer, gak peduli mau fokus ke apa.

1. Operating System

Rekomendasi:

• macOS: Paling enak buat development (Unix-based, tools lengkap)
• Linux: Excellent buat development (Ubuntu recommended)
• Windows: Bagus juga, tapi perlu WSL2 buat best experience

# Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Xcode Command Line Tools
xcode-select --install

# Ubuntu/Debian
sudo apt update && sudo apt upgrade
sudo apt install build-essential curl git

wsl --install

2. Terminal/Command Line

Ini interface utama kamu buat development. Awalnya mungkin agak serem, tapi nanti bakal jadi best friend kamu!

macOS:

• Built-in Terminal (udah bagus)
• iTerm2 (lebih bagus - recommended)
• Warp (modern, AI-powered)

Linux:

• Built-in terminal (udah oke)
• Terminator (bisa split jadi banyak panes)
• Alacritty (cepet, GPU-accelerated)

Windows:

• Windows Terminal (recommended)
• WSL2 Ubuntu terminal
• PowerShell

Basic Commands yang Harus Kamu Tau:

# Navigasi
cd folder-name      # Pindah ke folder
cd ..              # Naik satu level
pwd                # Liat posisi kamu sekarang
ls                 # List files (macOS/Linux)
dir                # List files (Windows)

# File Operations
mkdir folder-name  # Bikin folder
touch file.txt     # Bikin file (macOS/Linux)
rm file.txt        # Hapus file
rm -rf folder      # Hapus folder (hati-hati!)

# Other
clear              # Bersihin terminal
history            # Liat history command

3. Text Editor / IDE

Ini tool utama kamu buat nulis code. Pilih yang paling nyaman buat kamu!

1. Prettier - Code formatter (bikin code rapi otomatis)
2. ESLint - JavaScript linter (cek error)
3. GitLens - Git supercharged (liat history code)
4. Live Server - Local development server
5. Auto Rename Tag - HTML/JSX (rename tag otomatis)
6. Path Intellisense - File path autocomplete
7. Error Lens - Inline error messages (langsung keliatan errornya)
8. Material Icon Theme - Icon file lebih keren

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "terminal.integrated.fontSize": 14
}

4. Git & GitHub

Version control system - INI WAJIB buat semua developer. Gak ada tawar-menawar!

Install Git:

# Pake Homebrew
brew install git

# Cek udah keinstall belum
git --version

# Ubuntu/Debian
sudo apt install git

# Fedora
sudo dnf install git

# Cek udah keinstall belum
git --version

sudo apt install git

Configure Git:

# Set nama kamu
git config --global user.name "Nama Kamu"

# Set email kamu
git config --global user.email "email.kamu@example.com"

# Set default branch name
git config --global init.defaultBranch main

# Cek konfigurasi
git config --list

Bikin GitHub Account:

1. Ke github.com
2. Sign up (pake email profesional)
3. Verify email
4. Setup profile (tambahin foto, bio)

Setup SSH Key (Recommended):

# Generate SSH key
ssh-keygen -t ed25519 -C "email.kamu@example.com"

# Enter buat default location
# Enter passphrase (optional tapi recommended)

# Copy public key
cat ~/.ssh/id_ed25519.pub

# Tambahin ke GitHub:
# 1. Ke GitHub Settings > SSH and GPG keys
# 2. Klik "New SSH key"
# 3. Paste key nya
# 4. Klik "Add SSH key"

# Test connection
ssh -T git@github.com

5. Web Browser

Buat testing dan debugging web applications.

Recommended:

• Chrome - DevTools paling bagus, paling populer
• Firefox - Privacy bagus, DevTools oke
• Edge - Chromium-based, performance bagus

Install Browser Extensions:

• React Developer Tools
• Vue.js devtools
• Redux DevTools
• JSON Formatter
• Wappalyzer (detect teknologi yang dipake website)

Belajar DevTools:

• Elements tab (inspect HTML/CSS)
• Console tab (JavaScript debugging)
• Network tab (liat API calls)
• Sources tab (breakpoints buat debugging)

Language-Specific Tools

Depending on what you're learning, install these:

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Install Node.js
nvm install --lts
nvm use --lts

# Verify
node --version
npm --version

curl -fsSL https://bun.sh/install | bash

# Using npm
npm install -g typescript
npm install -g nodemon
npm install -g serve

# Using bun
bun install -g typescript
bun install -g nodemon

brew install python3

sudo apt install python3 python3-pip

python3 --version
pip3 --version

# Create virtual environment
python3 -m venv venv

# Activate (macOS/Linux)
source venv/bin/activate

# Activate (Windows)
venv\Scripts\activate

# Deactivate
deactivate

pip install requests
pip install python-dotenv
pip install black  # code formatter
pip install pylint  # linter

Productivity Tools

Tools untuk meningkatkan productivity:

Workspace Setup

Physical setup matters untuk productivity dan health.

Ergonomics

Desk Setup:

• Monitor: Eye level, arm's length away
• Keyboard: Elbows at 90 degrees
• Mouse: Same level as keyboard
• Chair: Feet flat on floor, back supported
• Lighting: No glare on screen, adequate ambient light

Recommended Equipment:

• Ergonomic chair: Herman Miller, Steelcase (expensive but worth it)
• Standing desk: Adjustable height (alternate sitting/standing)
• External monitor: 24-27 inch, 1080p minimum
• Mechanical keyboard: Better typing experience
• Ergonomic mouse: Vertical mouse or trackball

Budget Options:

• Use books to raise monitor
• Cushion for chair support
• Regular breaks (more important than equipment)

Lighting

Ideal Setup:

• Natural light from side (not behind or in front)
• Desk lamp for task lighting
• Ambient lighting to reduce eye strain
• Blue light filter on screen (f.lux, Night Shift)

Organization

Physical:

• Clean desk policy
• Cable management
• Dedicated workspace
• Minimal distractions

Digital:

• Organized file structure
• Consistent naming conventions
• Regular backups
• Clean desktop

Verification Checklist

Before starting to learn, verify everything is working:

Basic Setup

• Terminal opens and works
• Text editor installed and configured
• Git installed and configured
• GitHub account created
• Browser with DevTools working

Language-Specific

• Node.js/Python installed (depending on path)
• Package manager working (npm/pip)
• Can create and run simple program
• Extensions/packages installed

Productivity

• Note-taking system setup
• Time tracking tool ready (optional)
• Workspace organized
• Distractions minimized

Test Your Setup

Create a test project:

# Create folder
mkdir test-project
cd test-project

# Initialize git
git init

# Create file
echo "# Test Project" > README.md

# Open in editor
code .  # or cursor .

# Make changes, save

# Git commands
git add .
git commit -m "Initial commit"

# Create GitHub repo and push
# (follow GitHub instructions)

If all steps work, you're ready to start learning!

Troubleshooting

Langkah Selanjutnya

Setup selesai! Saatnya mulai belajar.