Playground

19 playground ditampilkan

• CSS Grid · 10 level

  Sawah Grid

  Tanam padi di petak yang tepat dengan menulis CSS Grid. Bertahap dari grid-column-start sampai justify-self.

  Main Sawah Grid

• Canvas API · 10 level

  Pelukis Pixel

  Gambar ulang bendera, rumah, sampai papan catur dengan JavaScript dan Canvas API. Bertahap dari fillRect sampai perulangan for.

  Main Pelukis Pixel

• CSS selector · 11 level

  Selektor Sniper

  Bidik buah di meja dengan selector CSS. Bertahap dari nama tag sampai :not() dan gabungan selector.

  Main Selektor Sniper

• async JavaScript · 10 level

  Event Loop Warung

  Tebak urutan output console dari kode async. Mulai dari setTimeout sampai Promise dan await, dengan kasir dan dua antrean warung sebagai pegangan.

  Main Event Loop Warung

• CSS box model · 10 level

  Box Model Bengkel

  Rakit kotak pesanan dengan width, padding, border, dan margin. Bertahap sampai margin collapse, box-sizing, dan margin auto.

  Main Box Model Bengkel

• regular expression · 12 level

  Regex Pancing

  Pancing ikan dan hindari sampah dengan pola regex. Bertahap dari teks biasa sampai nomor HP, pelat nomor, dan email.

  Main Regex Pancing

• Git · 10 level

  Git Kereta

  Atur rel kereta dengan perintah git. Bertahap dari commit dan branch sampai merge, rebase, cherry-pick, reset, dan detached HEAD.

  Main Git Kereta

• Big-O · 11 level

  Big-O Balapan

  Adu algoritma di n yang makin besar dan tebak siapa yang menang. Dari O(1) lawan O(n) sampai Fibonacci O(2ⁿ) lawan memo.

  Main Big-O Balapan

• URL API · 12 level

  Bongkar URL

  Bongkar link iklan, link toko, dan link WhatsApp dengan URL dan URLSearchParams. Bertahap dari new URL sampai menyusun link kampanye.

  Main Bongkar URL

• HTTP & REST · 10 level

  HTTP Kurir

  Jadi kurir yang mengantar request ke server warung. Bertahap dari GET dan query string sampai Authorization, PUT vs PATCH, idempotensi, dan membaca status code.

  Main HTTP Kurir

• CSS responsive · 10 level

  Responsive Tukang Jahit

  Jahit kartu, navbar, dan galeri yang pas di badan 360, 768, dan 1200px. Belajar persen, rem, max-width, media query mobile-first, clamp(), dan min().

  Main Responsive Tukang Jahit

• Intl API · 11 level

  Kasir Intl

  Jadi kasir yang mencetak harga, persen diskon, tanggal, dan isi keranjang untuk pembeli Indonesia dan luar negeri. Bertahap dari toLocaleString sampai Intl.NumberFormat, DateTimeFormat, RelativeTimeFormat, ListFormat, dan PluralRules.

  Main Kasir Intl

• Array JavaScript · 13 level

  Array Pasar

  Olah dagangan lapak pasar dengan method array JavaScript. Bertahap dari map dan filter sampai reduce, sort dengan pembanding, flatMap, dan toSorted.

  Main Array Pasar

• JSON di JavaScript · 11 level

  JSON Bengkel

  Servis respons API yang rusak di bengkel motor. Perbaiki sintaks JSON, ambil data bersarang dengan optional chaining, rapikan output JSON.stringify, hidupkan tanggal dengan reviver, dan salin data dengan structuredClone.

  Main JSON Bengkel

• fetch dan async/await · 10 level

  Fetch Simulasi

  Ambil menu, ongkir, dan promo dari server aplikasi pesan antar dengan fetch. Tangani restoran tutup, koneksi putus, server sibuk, dan request yang kelamaan, lalu lihat bedanya sekuensial dan paralel di timeline.

  Main Fetch Simulasi

• Web Crypto · 11 level

  Gembok Hash

  Jaga loker pos ronda dengan dasar kriptografi di browser: TextEncoder, hex, SHA-256 lewat crypto.subtle, efek longsor, garam, angka acak yang aman, dan cap HMAC. Plus kenapa Base64 bukan enkripsi.

  Main Gembok Hash

• CSS Flexbox · 10 level

  Flex Antre Loket

  Atur antrean di depan loket dengan CSS Flexbox. Bertahap dari display: flex sampai order, flex-grow, dan align-self.

  Main Flex Antre Loket

• Closure JavaScript · 10 level

  Closure Celengan

  Bikin celengan yang saldonya hanya bisa diubah lewat method-nya. Belajar closure dan scope JavaScript: fungsi pabrik, variabel privat, let vs var di loop, once, dan memoize.

  Main Closure Celengan

• kombinator Promise · 10 level

  Promise Antar Jemput

  Atur ojek dan mobil antar jemput dengan Promise.race, Promise.any, AggregateError, Promise.all, antrean dua mobil, batas waktu, dan finally. Semua perjalanan tercatat di timeline waktu virtual.

  Main Promise Antar Jemput