Stop Bingung! Bandingkan Versi Kode Lama vs Baru dengan Tools Ini
Halo teman-teman! 👋
Pernah bingung melihat perubahan kode setelah refactoring? Atau ingin membandingkan dua versi kode saat debugging? Di video ini saya tunjukkan aplikasi sederhana berbasis HTML + JavaScript yang bisa membandingkan dua kode secara berdampingan (side by side) dengan sorotan warna otomatis. Cocok buat programmer, mahasiswa, atau siapa pun yang sering bekerja dengan kode. 🔥 Fitur Aplikasi: - Bandingkan dua versi kode (original vs revisi) - Sorot baris yang dihapus (merah), ditambahkan (hijau), dan baris kosong (abu-abu) - Nomor baris otomatis menyesuaikan setiap versi - Tampilan bersih, dark mode, dan mudah digunakan - Bisa dijalankan langsung di browser tanpa instalasi 📥 Download / Copy Kode: Kode HTML lengkap dapat Anda salin dari sini:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Diff Viewer · side by side (fixed)</title>
<style>
* {
box-sizing: border-box;
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Cascadia Code', 'Consolas', monospace;
}
body {
background: #f8fafc;
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 1.5rem;
}
.app-container {
max-width: 1400px;
width: 100%;
background: white;
border-radius: 1.2rem;
box-shadow: 0 12px 30px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.header {
padding: 1.2rem 2rem;
background: #0b2230;
color: white;
display: flex;
align-items: center;
gap: 0.75rem;
}
.header h1 {
font-size: 1.5rem;
font-weight: 500;
margin: 0;
letter-spacing: 0.3px;
}
.header span {
background: #2d4d66;
padding: 0.2rem 0.8rem;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 400;
}
.input-panel {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 1.8rem 2rem 1rem;
background: #f1f5f9;
border-bottom: 1px solid #cbd5e1;
}
.textarea-box {
flex: 1 1 300px;
display: flex;
flex-direction: column;
}
.textarea-box label {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.4rem;
color: #1e3b5c;
display: flex;
align-items: center;
gap: 0.5rem;
}
.textarea-box label span {
background: #e0e8f0;
color: #0b2b3f;
padding: 0.2rem 0.6rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 400;
}
.code-input {
width: 100%;
height: 220px;
padding: 1rem;
font-size: 0.9rem;
line-height: 1.5;
background: white;
border: 1px solid #b9c9da;
border-radius: 12px;
resize: vertical;
white-space: pre;
overflow: auto;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
transition: border 0.2s;
}
.code-input:focus {
border-color: #3b7fb6;
outline: none;
box-shadow: 0 0 0 3px rgba(59,127,182,0.2);
}
.compare-bar {
display: flex;
justify-content: center;
padding: 1rem 2rem 1.5rem;
background: #f1f5f9;
}
.compare-btn {
background: #1e4a6d;
color: white;
border: none;
font-size: 1.1rem;
font-weight: 500;
padding: 0.8rem 2.8rem;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 6px 12px rgba(0,35,60,0.2);
transition: background 0.2s, transform 0.1s;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.compare-btn:hover {
background: #0f3b55;
}
.compare-btn:active {
transform: scale(0.97);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.result-area {
padding: 0 2rem 2rem;
background: #f1f5f9;
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.8rem;
}
.result-header h3 {
font-size: 1rem;
font-weight: 600;
color: #164863;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
background: #d9e3ed;
padding: 0.3rem 1rem;
border-radius: 30px;
}
.diff-container {
background: #0f1f2b;
border-radius: 16px;
overflow: hidden;
border: 1px solid #2d4d66;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.diff-row {
display: flex;
border-bottom: 1px solid #223544;
font-size: 0.9rem;
line-height: 1.5;
min-height: 1.8em;
}
.diff-row:last-child {
border-bottom: none;
}
.left-part, .right-part {
flex: 1 1 50%;
display: flex;
background: #0b1a24;
color: #e3eef7;
transition: background 0.1s;
}
.left-part {
border-right: 1px solid #2d4d66;
}
.line-num {
width: 3.5rem;
flex-shrink: 0;
text-align: right;
padding: 0 0.6rem 0 0.8rem;
color: #7b98af;
background: #102433;
user-select: none;
border-right: 1px solid #1f3e55;
font-size: 0.8rem;
display: inline-block;
white-space: pre;
}
.line-text {
flex: 1;
white-space: pre-wrap;
word-break: break-word;
padding: 0 0.8rem 0 0.8rem;
background: transparent;
}
.deleted .line-text {
background-color: #5b2e2e;
color: #ffc9c9;
}
.inserted .line-text {
background-color: #1b4b3b;
color: #c3f0d8;
}
.empty .line-text {
background-color: #162a36;
color: #4e6f86;
font-style: italic;
}
.normal .line-text {
background-color: #0b1a24;
color: #d6eaf9;
}
.empty .line-text::before {
content: '';
opacity: 0.3;
font-size: 0.75rem;
}
.left-part.empty .line-num,
.right-part.empty .line-num {
color: #3a5a72;
}
.line-text {
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: #2d5c7c #0f2635;
}
.line-text::-webkit-scrollbar {
height: 5px;
}
.line-text::-webkit-scrollbar-thumb {
background: #2d5c7c;
border-radius: 10px;
}
.footer-note {
padding: 1rem 2rem 1.5rem;
font-size: 0.8rem;
color: #4a6279;
background: #f1f5f9;
text-align: center;
border-top: 1px solid #cbd5e1;
}
.footer-note a {
color: #1e5b8a;
text-decoration: none;
}
</style>
<!-- library diff yang stabil (kpdecker) -->
<script src="https://cdn.jsdelivr.net/npm/diff@5.1.0/dist/diff.min.js"></script>
</head>
<body>
<div class="app-container">
<div class="header">
<h1>🔍 Code Diff Side‑by‑Side</h1>
<span>bandingkan versi awal & versi perbaikan</span>
</div>
<div class="input-panel">
<div class="textarea-box">
<label>📄 VERSI 1 (awal) <span>original</span></label>
<textarea id="text1" class="code-input" placeholder="Tulis kode versi pertama...">function hitungJumlah(a, b) {
let hasil = a + b;
console.log('Jumlah: ' + hasil);
return hasil;
}</textarea>
</div>
<div class="textarea-box">
<label>📄 VERSI 2 (perbaikan) <span>revisi</span></label>
<textarea id="text2" class="code-input" placeholder="Tulis kode versi kedua...">function hitungJumlah(a, b) {
let hasil = a + b;
console.log(`Jumlah: ${hasil}`);
// menambahkan return eksplisit
return hasil;
}</textarea>
</div>
</div>
<div class="compare-bar">
<button class="compare-btn" id="compareBtn">✨ Bandingkan Kode ✨</button>
</div>
<div class="result-area" id="resultArea">
<div class="result-header">
<h3>⬇️ PERBEDAAN (baris yang berubah disorot)</h3>
</div>
<div id="diffResult" class="diff-container">
<div style="padding: 2rem; text-align: center; color: #a3c0d4; background: #0f1f2b;">Klik tombol "Bandingkan Kode" untuk melihat perubahan</div>
</div>
</div>
<div class="footer-note">
⚡ perubahan disorot: <span style="background:#5b2e2e; color:#ffc9c9; padding:2px 6px;"> dihapus </span> <span style="background:#1b4b3b; color:#c3f0d8; padding:2px 6px;"> ditambah </span> <span style="background:#162a36; color:#7b98af; padding:2px 6px;"> baris kosong </span> • nomor baris sesuai versi masing-masing
</div>
</div>
<script>
(function() {
const text1El = document.getElementById('text1');
const text2El = document.getElementById('text2');
const compareBtn = document.getElementById('compareBtn');
const diffResult = document.getElementById('diffResult');
function buildDiffView(diffParts) {
let leftRows = [];
let rightRows = [];
let leftCounter = 1;
let rightCounter = 1;
for (let i = 0; i < diffParts.length; i++) {
const part = diffParts[i];
const lines = part.value.split('\n');
if (lines[lines.length - 1] === '') lines.pop();
for (let j = 0; j < lines.length; j++) {
const line = lines[j];
if (part.added) {
leftRows.push({ lineNum: null, text: '', type: 'empty' });
rightRows.push({ lineNum: rightCounter++, text: line, type: 'inserted' });
} else if (part.removed) {
leftRows.push({ lineNum: leftCounter++, text: line, type: 'deleted' });
rightRows.push({ lineNum: null, text: '', type: 'empty' });
} else {
leftRows.push({ lineNum: leftCounter++, text: line, type: 'normal' });
rightRows.push({ lineNum: rightCounter++, text: line, type: 'normal' });
}
}
}
diffResult.innerHTML = '';
for (let i = 0; i < leftRows.length; i++) {
const left = leftRows[i];
const right = rightRows[i];
const rowDiv = document.createElement('div');
rowDiv.className = 'diff-row';
rowDiv.innerHTML = `
<div class="left-part ${left.type}"><span class="line-num">${left.lineNum || ' '}</span><span class="line-text">${left.text}</span></div>
<div class="right-part ${right.type}"><span class="line-num">${right.lineNum || ' '}</span><span class="line-text">${right.text}</span></div>
`;
diffResult.appendChild(rowDiv);
}
}
function compareCodes() {
const text1 = text1El.value;
const text2 = text2El.value;
try {
const changes = Diff.diffLines(text1, text2);
buildDiffView(changes);
} catch (e) {
console.error(e);
}
}
compareBtn.addEventListener('click', compareCodes);
window.addEventListener('load', () => setTimeout(compareCodes, 50));
})();
</script>
</body>
</html>- Copy kode HTML di atas ke file (misal: diff-viewer.html)
- Buka dengan browser (Chrome, Firefox, Edge)
- Tempelkan kode versi 1 dan versi 2
- Klik tombol "Bandingkan Kode"
- Lihat perbedaannya langsung!
