Sayudha

Home

Properties3
descriptionTitik masuk digital garden.
tagsmoc
aliasesHome

25 menit baca

Home

Selamat datang. Ini halaman utama sekaligus indeks dari seluruh catatan di taman digital ini, dikelompokkan menurut foldernya.

Daftar di bawah disusun otomatis dari isi vault. Setiap catatan baru akan muncul sendiri di sini, dan catatan yang ditandai draf tidak ikut tampil.

Catatan

JavaScript

  • 00 Pengenalan — Apa itu pemrograman, kenapa bahasa itu penting, apa itu JavaScript, dan gimana cara pakai buku ini
  • 01 Nilai, Tipe, dan Operator — Bit, nilai, angka, string, boolean, nilai kosong, konversi tipe otomatis, dan operator-operator dasar JavaScript
  • 02 Struktur Program — Ekspresi, statement, binding, fungsi, alur kontrol (if, while, do, for, switch), break/continue, penamaan, dan komentar
  • 03 Fungsi — Cara mendefinisikan fungsi, scope, closure, rekursi, call stack, argumen opsional, dan cara numbuhin fungsi yang bagus
  • 04 Struktur Data Objek dan Array — Array, properti, method, objek, mutability, loop for-of, rest parameter, Math, destructuring, optional chaining, dan JSON lewat kasus manusia-tupai
  • 05 Fungsi Tingkat Tinggi — Abstraksi, fungsi yang nerima atau ngembaliin fungsi, forEach/filter/map/reduce/some/find, kode karakter Unicode, dan ngenalin script dari teks
  • 06 Kehidupan Rahasia Objek — Abstract data type, method dan this, prototype, class, private property, Map, polymorphism, getter/setter/static, symbol, iterator, inheritance, dan instanceof
  • 07 Proyek Robot Pengantar Paket — Bab proyek pertama, ngebangun robot pengantar paket di desa Meadowfield pakai graph, state yang persistent, simulasi, dan pathfinding
  • 08 Bug dan Error — Strict mode, tipe, testing, debugging, cara nyebarin error, exception (throw/try/catch/finally), nangkep error secara selektif, dan assertion
  • 09 Regular Expression — Bikin dan ngetes regex, set karakter, pengulangan, grup, class Date, boundary dan look-ahead, backtracking, replace, greedy, lastIndex, parsing file INI, dan mode Unicode
  • 10 Modul — Kenapa program perlu modul, ES modules (import/export), package dan NPM, CommonJS (require/exports), bundling dan minifying, serta cara ngedesain modul yang baik
  • 11 Pemrograman Asinkron — Sinkron vs asinkron, callback, promise, kegagalan, async/await, generator, event loop, dan bug asinkron lewat kisah Carla si gagak
  • 12 Proyek Bahasa Pemrograman — Bab proyek kedua, ngebangun bahasa pemrograman Egg sendiri, dari parser, evaluator, special form, environment, sampai fungsi
  • 13 JavaScript dan Browser — Jaringan dan internet, TCP, Web, URL, HTML, cara nyisipin JavaScript ke halaman, sandboxing, dan sejarah perang browser
  • 14 Document Object Model — DOM sebagai pohon dokumen, navigasi node, nyari elemen, ngubah dan bikin node, atribut, layout, styling/CSS, query selector, dan animasi
  • 15 Menangani Event — Event handler, event object, propagation, default action, event keyboard/mouse/touch/scroll/focus/load, event loop, web worker, timer, dan debouncing
  • 16 Proyek Game Platform — Bab proyek ketiga, ngebangun game platformer pakai DOM, dari level, actor, drawing, motion dan collision, tracking tombol, sampai loop game
  • 17 Menggambar di Canvas — SVG vs canvas, konteks 2D, garis dan bidang, path, kurva, teks, gambar/sprite, transformasi, save/restore, tampilan game berbasis canvas
  • 18 HTTP dan Form — Protokol HTTP, browser dan HTTP, fetch, sandboxing, HTTPS, field form (input/textarea/select), focus, submit, FileReader, dan localStorage
  • 19 Proyek Editor Pixel Art — Bab proyek keempat, ngebangun editor pixel art dari komponen, state, alur data satu arah, canvas, tool gambar, save/load, dan undo history
  • 20 Node.js — JavaScript di luar browser, perintah node, modul, NPM dan package.json, modul filesystem, HTTP server, stream, dan bikin file server
  • 21 Proyek Website Skill-Sharing — Bab proyek terakhir, ngebangun website skill-sharing full-stack dengan long polling, router server, interface HTTP JSON, dan client berbasis komponen
  • Eloquent JavaScript — Daftar isi terjemahan Indonesia buku Eloquent JavaScript edisi ke-4 karya Marijn Haverbeke, dengan gaya bahasa santai

Latihan JavaScript

  • 00 Cara Pakai Buku Latihan — Pengantar buku latihan pelengkap Eloquent JavaScript, yaitu cara memakainya (coba dulu di playground atau editor, baru buka kunci jawaban), struktur soal dan kunci jawaban terpisah per bab, cara kerja versi interaktif di web lewat playground.html vs versi cetak yang statis, dan daftar semua bab latihan
  • 02 Kunci Jawaban Struktur Program — Kunci jawaban latihan bab Struktur Program, yaitu solusi dan penjelasan untuk segitiga berulang, FizzBuzz, dan papan catur
  • 02 Latihan Struktur Program — Soal latihan untuk bab Struktur Program, yaitu segitiga berulang dengan perulangan, FizzBuzz dengan percabangan dan operator sisa, dan papan catur dengan perulangan bersarang, masing-masing dengan kode awal dan petunjuk, jawaban ada di file kunci terpisah
  • 03 Kunci Jawaban Fungsi — Kunci jawaban latihan bab Fungsi, yaitu solusi dan penjelasan untuk min, isEven rekursif, dan countBs/countChar
  • 03 Latihan Fungsi — Soal latihan untuk bab Fungsi, yaitu fungsi minimum dua argumen, isEven rekursif, dan menghitung karakter dalam string (countBs dan countChar), dengan kode awal dan petunjuk
  • 04 Kunci Jawaban Struktur Data — Kunci jawaban latihan bab Struktur Data, yaitu solusi dan penjelasan untuk range/sum, membalik array, list bertaut, dan deepEqual
  • 04 Latihan Struktur Data — Soal latihan untuk bab Struktur Data Objek dan Array, yaitu range dan sum, membalik array (baru dan di tempat), struktur data list bertaut, dan perbandingan dalam deepEqual, dengan kode awal dan petunjuk
  • 05 Kunci Jawaban Fungsi Tingkat Tinggi — Kunci jawaban latihan bab Fungsi Tingkat Tinggi, yaitu solusi dan penjelasan untuk meratakan, loop sendiri, every, dan arah tulisan dominan, plus data contoh mini untuk dijalankan
  • 05 Latihan Fungsi Tingkat Tinggi — Soal latihan untuk bab Fungsi Tingkat Tinggi, yaitu meratakan array dengan reduce, membuat loop sendiri sebagai fungsi tingkat tinggi, mengimplementasikan every, dan menentukan arah tulisan dominan, dengan kode awal dan petunjuk
  • 06 Kunci Jawaban Objek — Kunci jawaban latihan bab Kehidupan Rahasia Objek, yaitu solusi dan penjelasan untuk Vec, Group, dan Group yang bisa diiterasi
  • 06 Latihan Objek — Soal latihan untuk bab Kehidupan Rahasia Objek, yaitu class Vec dua dimensi dengan plus minus dan getter length, class Group seperti Set, dan membuat Group bisa diiterasi, dengan kode awal dan petunjuk
  • 07 Kunci Jawaban Robot — Kunci jawaban latihan bab proyek Robot, yaitu solusi dan penjelasan untuk compareRobots, robot hemat, dan PGroup persisten
  • 07 Latihan Robot — Soal latihan untuk bab proyek Robot, yaitu mengukur robot dengan compareRobots, membuat robot yang lebih efisien, dan struktur data persisten PGroup, dengan kode awal dan petunjuk
  • 08 Kunci Jawaban Bug dan Error — Kunci jawaban latihan bab Bug dan Error, yaitu solusi dan penjelasan untuk reliableMultiply dan withBoxUnlocked
  • 08 Latihan Bug dan Error — Soal latihan untuk bab Bug dan Error, yaitu mengulang pemanggilan yang sering gagal (reliableMultiply) dengan penangkapan exception selektif, dan kotak terkunci dengan finally, dengan kode awal dan petunjuk
  • 09 Kunci Jawaban Regular Expression — Kunci jawaban latihan bab Regular Expression, yaitu solusi dan penjelasan untuk regexp golf, gaya kutip, dan angka gaya JavaScript
  • 09 Latihan Regular Expression — Soal latihan untuk bab Regular Expression, yaitu regexp golf beberapa pola, mengganti tanda kutip tunggal dialog jadi ganda, dan mencocokkan angka gaya JavaScript, dengan kode awal dan petunjuk
  • 10 Kunci Jawaban Modul — Kunci jawaban latihan bab Modul, yaitu solusi modul roads dan penjelasan penanganan dependensi sirkular
  • 10 Latihan Modul — Soal latihan untuk bab Modul, yaitu menulis modul ES untuk graf jalan (roads), dan memahami bagaimana dependensi sirkular ditangani loader, dengan kode awal dan petunjuk
  • 11 Kunci Jawaban Async — Kunci jawaban latihan bab Pemrograman Asinkron, yaitu solusi dan penjelasan untuk activityTable versi async dan versi Promise, serta Promise_all
  • 11 Latihan Async — Soal latihan untuk bab Pemrograman Asinkron, yaitu membuat tabel aktivitas per jam dengan async await, versi yang sama dengan Promise murni, dan mengimplementasikan Promise_all sendiri, dengan kode awal dan petunjuk
  • 12 Kunci Jawaban Bahasa Egg — Kunci jawaban latihan bab proyek bahasa Egg, yaitu solusi array, penjelasan closure, komentar di skipSpace, dan bentuk khusus set
  • 12 Latihan Bahasa Egg — Soal latihan untuk bab proyek bahasa Egg, yaitu menambah dukungan array, menjelaskan closure, menambah komentar ke parser, dan menambah bentuk khusus set untuk memperbaiki scope, dengan kode awal dan petunjuk
  • 14 Kunci Jawaban DOM — Kunci jawaban latihan bab Document Object Model, yaitu solusi membangun tabel, byTagName rekursif, dan animasi topi kucing
  • 14 Latihan DOM — Soal latihan untuk bab Document Object Model, yaitu membangun tabel dari data secara terprogram, menulis getElementsByTagName sendiri secara rekursif, dan menganimasi topi mengorbit kucing, dengan kode awal dan petunjuk
  • 15 Kunci Jawaban Event — Kunci jawaban latihan bab Menangani Event, yaitu solusi balon, jejak mouse, dan grid piksel yang bisa diwarnai
  • 15 Latihan Event — Soal latihan untuk bab Menangani Event, yaitu balon yang membesar/mengecil dengan panah dan meledak, jejak elemen mengikuti mouse, dan grid piksel yang bisa diwarnai dengan klik-seret, dengan kode awal dan petunjuk
  • 16 Kunci Jawaban Game Platform — Kunci jawaban latihan bab proyek Game Platform, yaitu solusi nyawa dan game over, serta menjeda game dengan Esc
  • 16 Latihan Game Platform — Soal latihan untuk bab proyek Game Platform, yaitu menambah nyawa dan layar game over, serta menjeda dan melanjutkan game dengan Esc, dengan petunjuk
  • 17 Kunci Jawaban Canvas — Kunci jawaban latihan bab Menggambar di Canvas, yaitu solusi bentuk, bagan pai, dan bola memantul
  • 17 Latihan Canvas — Soal latihan untuk bab Menggambar di Canvas, yaitu menggambar beberapa bentuk dengan path, membuat bagan pai dari data, dan menganimasi bola memantul, dengan kode awal dan petunjuk
  • 18 Kunci Jawaban HTTP dan Form — Kunci jawaban latihan bab HTTP dan Form, yaitu solusi negosiasi konten, workbench JavaScript, dan Game of Life
  • 18 Latihan HTTP dan Form — Soal latihan untuk bab HTTP dan Form, yaitu negosiasi konten dengan header Accept, workbench JavaScript kecil, dan simulasi Game of Life, dengan kode awal dan petunjuk
  • 19 Kunci Jawaban Editor Pixel — Kunci jawaban latihan bab proyek Editor Pixel Art, yaitu solusi pintasan keyboard, menggambar efisien, dan alat lingkaran
  • 19 Latihan Editor Pixel — Soal latihan untuk bab proyek Editor Pixel Art, yaitu menambah pintasan keyboard, menggambar ulang lebih efisien, dan menambah alat lingkaran serta garis lurus, dengan petunjuk
  • 20 Kunci Jawaban Node — Kunci jawaban latihan bab Node.js, yaitu solusi tool pencari, pembuatan direktori, dan ruang web publik
  • 20 Latihan Node — Soal latihan untuk bab Node.js, yaitu tool pencari kata di file dari command line, menambah pembuatan direktori ke file server, dan membuat ruang web publik yang bisa diedit, dengan petunjuk
  • 21 Kunci Jawaban Skill-Sharing — Kunci jawaban latihan bab proyek Website Skill-Sharing, yaitu solusi persistensi ke disk dan mencegah field komentar ter-reset
  • 21 Latihan Skill-Sharing — Soal latihan untuk bab proyek Website Skill-Sharing, yaitu membuat data talk bertahan setelah restart server, dan mencegah field komentar ter-reset saat pembaruan langsung, dengan petunjuk

Shopify

  • 01 Apa itu Theme Shopify — Mengenal apa itu theme Shopify, bahannya, dan cara kerjanya
  • 02 Bikin Theme Baru dari Skeleton — Install Shopify CLI, bikin theme baru dari Skeleton theme, preview, push, dan publish
  • 03 Kustomisasi Theme Milik Merchant — Cara aman ngubah theme yang udah dipakai merchant, dari minta akses sampai publish
  • 04 Dev Store, Akun Kolaborator, dan Theme Access — Bikin toko gratis buat ngetes, data contoh bawaan, cara masuk ke toko klien dengan aman, dan password khusus theme
  • 05 Shopify CLI — Bedah Shopify CLI buat theme, dari development theme, semua perintahnya, environment, sampai CI/CD
  • 06 Theme Editor dan Code Editor — Dua editor di dalam Shopify admin, cara theme kita nyambung ke theme editor, dan aturan live preview
  • 07 Tools Lokal VS Code Extension, Prettier, LiquidDoc — Nyiapin editor lokal biar Liquid berwarna, auto-complete, rapi otomatis, dan snippet punya dokumentasi
  • 08 GitHub Integration dan Version Control — Nyambungin theme ke GitHub, cara kerja sinkronisasi dua arah, dan strategi branch buat source vs compiled code
  • 09 Dasar Liquid — Konsep dasar bahasa Liquid, objects, tags, filters, handle, tipe data, truthy-falsy, dan whitespace control
  • 10 Tags Variabel dan Percabangan — Tag buat bikin variabel (assign, capture, echo, increment, decrement), tag liquid, komentar, raw, dan percabangan (if, unless, elsif, else, case)
  • 11 Tags Perulangan — Tag for beserta parameternya dan object forloop, else di dalam loop, break, continue, cycle, tablerow, dan paginate
  • 12 Tags Khusus Theme — Tag yang cuma ada di Shopify, render, include, section, sections, content_for, layout, form, javascript, stylesheet, style, doc, dan break di luar loop
  • 13 Objects Global — Object yang bisa dipakai di file Liquid manapun, shop, request, routes, settings, template, localization, content_for, dan koleksi global kaya all_products, collections, pages
  • 14 Objects Produk dan Koleksi — Object product, variant, opsi produk, collection, image, media (video, model 3D, external video), selling plan, dan object pendukungnya
  • 15 Objects Konten — Object article, blog, comment, page, linklist dan link buat navigasi, metafield dan metaobject buat data kustom, plus color, font, rating, money, measurement
  • 16 Objects Cart, Checkout, Order, dan Customer — Object transaksi, cart dan line_item buat keranjang, customer beserta alamat dan ordernya, order dengan fulfillment dan transaction, diskon, gift card, dan B2B
  • 17 Objects Lainnya — Object arsitektur (section, block, app), form dan form_errors, paginate, filter buat storefront filtering, search dan predictive_search, plus object robots.txt
  • 18 Filters String, Math, dan Array — Filter Liquid dasar, manipulasi teks, hitung-hitungan, pengolahan array, tanggal, default, dan encoding
  • 19 Filters HTML, URL, Media, Color, dan Font — Filter khas Shopify buat URL aset dan CDN, gambar responsif, video dan model 3D, tag HTML, link, warna, font, form, dan pagination
  • 20 Filters Money, Metafield, Cart, Customer, dan Localization — Filter format uang, nampilin metafield, keranjang, pembayaran, alamat, berat, unit price, dan terjemahan dengan filter t
  • 21 Gambaran Arsitektur Theme — Bedah struktur theme secara utuh, tiap folder dan jenis file, snippet, JSON dengan komentar, dan semua batasan platform
  • 22 Layouts — File theme.liquid sebagai dasar semua halaman, dua object wajib di dalamnya, layout alternatif, dan cara template milih layout
  • 23 Templates — Template JSON vs Liquid, semua jenis template, struktur file JSON template beserta section data dan wrapper, alternate template, dan contextual template
  • 24 Template per Halaman — Apa yang harus ada di tiap tipe template, index, product, collection, list-collections, cart, page, blog, article, search, 404, password, gift_card, dan metaobject
  • 25 Template Spesial robots.txt, llms.txt, agents — Empat template yang outputnya file teks buat mesin, robots.txt buat mesin pencari dan agents.md, llms.txt, llms-full.txt buat AI agent
  • 26 Sections dan Section Schema — Anatomi file section, tag schema dengan semua atributnya (name, tag, class, limit, settings, blocks, max_blocks, presets, default, locales, enabled_on, disabled_on), dan cara section nyambung ke theme editor
  • 27 Section Groups dan Migrasinya — Section group sebagai wadah section di layout (header, footer, aside, custom), schema JSON-nya, contextual section group, dan cara migrasi dari section statis
  • 28 Blocks — Tiga jenis block (section block, theme block, app block), bedanya sama snippet, cara nerima app block dan wrapper apps.liquid, praktik terbaik layout block, dan theme block hasil AI
  • 29 Theme Blocks Mendalam — Bikin theme block pertama, schema-nya (name, settings, blocks, presets, tag, class), block bersarang, static block, targeting dan private block, dan dynamic sources dengan closest
  • 30 Settings dan Input Settings — Cara kerja setting di theme, section, dan block, cara aksesnya, visible_if, semua tipe input setting (basic dan specialized) beserta nilai yang dikembalikan, dan sidebar settings header dan paragraph
  • 31 Dynamic Sources dan Fonts — Dynamic sources, cara merchant nyambungin setting ke atribut sumber daya dan metafield, kompatibilitas tipe, default dinamis, batasnya, plus sistem font Shopify, font library, system font, font kustom, dan daftar font lengkap
  • 32 Config settings_schema.json, settings_data.json, markets.json — Folder config, settings_schema.json buat definisi theme setting dan theme_info, settings_data.json buat nilai tersimpan, current, presets, platform_customizations, dan markets.json buat pewarisan kustomisasi per market
  • 33 Locales dan Translasi — Folder locales, penamaan file IETF, default locale file, struktur kategori-grup-deskripsi, storefront locale file dan filter t, schema locale file dan prefix t:, date_formats, batasan, dan bahasa checkout bawaan Shopify
  • 34 checkout.liquid (deprecated) — Layout checkout.liquid yang udah pensiun, status deprecation dan tanggalnya, struktur dan object checkout-nya, langkah checkout, cara kustomisasi lewat JavaScript dan CSS, dan apa penggantinya
  • 35 Developer Preview tag {% block %} dan {% partial %} — Developer preview Liquid July ‘26, tag block buat nyusun halaman dari theme block langsung di template Liquid, parameter dan block.settings, body content, dan tag partial buat refresh sebagian halaman tanpa reload lewat @shopify/partial-rendering
  • 36 Navigasi dan Menu — Bikin navigasi theme dari menu yang dibuat merchant, object linklists, linklist, dan link, setting link_list, menu tiga tingkat, penanda link aktif, mega menu pakai link.object, dropdown aksesibel, dan menu footer
  • 37 Filtering — Storefront filtering, struktur URL parameter filter, filter level produk dan varian, bikin tampilan filter buat koleksi dan hasil pencarian dengan object filter, pedoman UX filtering, dan cara lama tag filtering
  • 38 Search dan Predictive Search — Storefront search, query parameter q, type, options, sort_by, form pencarian dan struktur URL-nya, halaman hasil, predictive search dengan section dan Predictive Search API, endpoint suggest.json dan suggest, typo tolerance, batasan bahasa, dan pedoman UX-nya
  • 39 Produk Variants dan High-variant Products — Dukungan varian produk di theme, deep link ?variant= dan ?option_values=, update media, harga, dan selector, pemilih opsi per opsi pakai options_with_values, pola kode yang gak skala di atas 250 varian, product_option_value, ketersediaan top-down vs adjacent, Section Rendering API, dan combined listings
  • 40 Produk Media — Nampilin media produk (gambar, video Shopify, video eksternal, model 3D) lewat product.media dan filter media, snippet media yang bisa dipakai ulang, preview_image buat thumbnail dan Open Graph, AR lewat Shopify-XR, parameter video, dan pedoman UX badge, 3D viewer, video player, dan slideshow
  • 41 Produk Recommendations, Gift Card, dan Bundles — Rekomendasi produk related dan complementary lewat object recommendations dan Product Recommendations API, logika dan batasan algoritmanya, pedoman UI, form penerima gift card lewat line item properties, dan tampilan bundle bergrup di email transaksional
  • 42 Harga Diskon, Currency, Unit Pricing, Installments, B2B — Nampilin diskon di line item dan di ringkasan cart lewat discount_application dan discount_allocation, format mata uang eksplisit dengan setting, harga per unit dengan unit_price_with_measurement, banner Shop Pay Installments lewat payment_terms, dan dukungan pelanggan B2B dengan location picker, quantity rules, dan price breaks
  • 43 Accelerated Checkout — Tombol accelerated checkout (Shop Pay, Apple Pay, Google Pay, PayPal, Amazon Pay) di halaman produk lewat payment_button dan di cart lewat additional_checkout_buttons, kustomisasi lewat CSS custom property karena shadow DOM tertutup, layout vertikal, pelacakan klik, dan checkout banyak produk lewat shopify-additional-items
  • 44 Subscriptions — Cara kerja langganan lewat selling plan group dan selling plan, pemilih selling plan di form produk dengan input selling_plan, JavaScript buat nyinkronin varian dan harga, tampilan dan pemilih selling plan di cart lewat cart/change.js, checkout charge, tampilan di order, dan pedoman UX langganan
  • 45 Pre-orders dan Try Before You Buy — Pre-order dan TBYB sebagai opsi pembelian tertunda lewat selling plan yang sama dengan langganan, perbedaan implementasinya, checkout charge sebagai deposit atau nol, tampilan harga penuh vs harga saat checkout, dan pedoman UX khusus pembelian tertunda
  • 46 Customer Sign-in, Account Component, Contact Form, Email Consent — Link sign-in dan redirect pelanggan lewat routes (account_url, account_login_url, storefront_login_url, return_to, login_hint), link ke halaman akun dan extension, komponen shopify-account di header beserta kustomisasinya, form kontak dengan input wajib dan opsional, dan form persetujuan email marketing
  • 47 Markets Multi Currency, Multi Bahasa, Localization — Shopify Markets, pemilih negara dan bahasa lewat form localization dengan country_code dan language_code, JavaScript custom element buat submit-nya, URL sadar locale di Liquid dan JavaScript, SEO dan structured data, deteksi localization optimal lewat browsing_context_suggestions.json, dan pedoman UX penempatan dan styling selector
  • 48 SEO Metadata, hreflang, robots.txt — Metadata SEO di head theme (title, meta description, canonical), tag hreflang otomatis lewat content_for_header dan kapan ngelola manual, Open Graph dan structured data, metafield seo.hidden, dan ringkasan kustomisasi robots.txt
  • 49 Delivery Pickup Availability — Nampilin ketersediaan ambil di toko (local pickup) per varian di halaman produk lewat store_availability dan location, section pickup availability dengan ringkasan dan modal, wadah kosong di halaman produk, dan JavaScript yang ngerender section lewat Section Rendering API dengan prefix variants/[id]
  • 50 Trust & Security CAPTCHA dan Security Badges — Cara hCaptcha dipasang Shopify lewat content_for_header di form customer, contact, dan komentar blog, syarat action dan form_type biar form kustom kompatibel, disclaimer teks, memaksa wire-up lewat data-shopify-captcha atau window.Shopify.captcha.protect, verifikasi dan troubleshooting, plus badge keamanan PCI
  • 51 Ajax API dan Section Rendering API — Ajax API theme (Cart, Product, Product Recommendations, Predictive Search) dengan fokus ke Cart API (add, get, update, change, clear, shipping rates, properti dan atribut privat, bundled section rendering), dan Section Rendering API (sections, section_id, cara nemuin section ID, URL sadar locale, penanganan null)
  • 52 Online Store 2.0 dan Migrasinya — Apa itu Online Store 2.0 (section di semua halaman, dynamic sources, app block), penilaian jalur migrasi (gak migrasi, theme baru, versi baru, migrasi manual), dan sembilan langkah migrasi template Liquid ke JSON template dengan section dan dukungan app block
  • 53 Troubleshooting Error Umum — Tiga error resmi di dokumentasi troubleshooting theme (Parameter Missing or Invalid saat add to cart, Description can’t be larger than 64 kilobytes, dan masalah aset karena URL berprotokol http), plus peta error lain yang udah dibahas di buku ini dan cara ngelacaknya
  • 54 Best Practices Umum — Prinsip pemandu pengembangan theme, cara membagi template jadi section dan block (layout, granularitas, app block, metafield), tag javascript dan stylesheet, integrasi dengan theme editor (event, deteksi design mode, visual preview, preview inspector), standard storefront events dan actions, transformasi file dan backfill, kerja di toko merchant, dan praktik yang dilarang
  • 55 Accessibility — Praktik aksesibilitas theme berdasarkan WCAG, cara ngetes (Accessibility Insights, Lighthouse, WAVE, Lighthouse CI), dukungan keyboard dan gestur, struktur halaman (lang, zoom, skip link, tabindex, heading, nav, dropdown, info produk, kontrol, tabel, form dan error), media, warna dan kontras, komponen dinamis (drawer, modal, slideshow), dan target sentuh mobile
  • 56 Design dan Color System — Prinsip desain theme buat pengalaman merchant (purposeful, mudah disetup, antifragile, fleksibel, extensible) dan pembeli (aksesibel, ekspresif, intuitif, kohesif, efisien), plus sistem warna dengan color_palette, override lokal, warna hardcode, dan pola color scheme ke CSS variable
  • 57 Performance Dasar, Metrik, dan Cara Ngukur — Kenapa performa penting, lima metrik (TTFB, FCP, LCP, CLS, INP) dan Core Web Vitals, apa yang platform Shopify udah urus (CDN, minifikasi, SFR, speculation rules, polyfill, batas paginasi), field vs lab data dan alatnya, benchmark Theme Store dengan Lighthouse, debugging lewat gap metrik, praktik performa berkelanjutan, dan peta delapan bab performa
  • 58 Performance Liquid — Optimasi Liquid buat nurunin TTFB, loop bersarang kuadratik dan cara meratakannya (where, map, join), metafield di luar loop, overfetching varian dan options_with_values, batas paginasi 25.000, render bersarang dan skip_styles, defer konten dialog, combined listing, filter sebelum loop, hoist operasi, section.index, Section Rendering API, dan mikro-optimasi (cache filter, block.settings, echo, limit vs paginate)
  • 59 Performance Gambar dan LCP — Optimasi gambar buat LCP dan CLS, fetchpriority high di gambar LCP, jangan lazy-load gambar LCP (dan buang library lazy-load), jangan sembunyiin di balik animasi, jangan pakai CSS background buat hero, srcset dan sizes (termasuk sizes auto), width dan height buat CLS, filter chain image_url dan image_tag, dialog yang membajak LCP, dan picture buat hero mobile dan desktop
  • 60 Performance CSS dan Font — Optimasi CSS dan font, kurangi jumlah stylesheet dengan skip_styles dan konsolidasi, CLS dari font swap dan penyesuaian fallback dengan size-adjust, critical CSS sinkron dan pola async CSS, self-host font di CDN Shopify, system font dengan font.system?, ruang buat konten app block, animasi transform dan opacity, satu menu responsif, dan stylesheet subsetting
  • 61 Performance JavaScript dan INP — Memahami INP dan tiga fasenya (input delay, processing time, presentation delay), profiling interaksi di DevTools, defer dan async yang tepat, load JavaScript saat interaksi dengan import(), debounce, throttle, passive listener, requestAnimationFrame, dan pemecahan long task, view transition yang dibatalin saat interaksi, import maps tanpa bundler, lazy DOM buat komponen tersembunyi, dan cara nemuin script terburuk
  • 62 Performance Mobile dan Layout — Performa mobile sebagai performa theme, kendala CPU, jaringan, thermal, dan memori, tes dengan throttling 4x CPU dan Slow 4G plus perangkat nyata, load kode mobile kondisional, interstitial intrusif yang dihukum Google, layout responsif yang performan (sizes per breakpoint, sizes auto, picture), tap target 48px dan jarak 8px, konten lebih lebar dari viewport, dan paritas konten mobile-desktop buat indexing
  • 63 Performance Apps dan Pihak Ketiga — App dan script pihak ketiga sebagai sumber regresi terbesar, nemuin dan ngevaluasi app yang ngeblokir render, audit dan ngehapus script (inventaris, verifikasi, sisa kode setelah uninstall, load kondisional), anti-flicker A/B testing yang dimatiin saat gak ada tes, app performa palsu yang nipu Lighthouse (LCP hijacking, deteksi alat tes, manipulasi resource) dan cara ngebongkarnya, reverse proxy di depan Shopify, dan audit checkout UI extension
  • 64 Performance Navigasi dan Loading — Resource hint dan navigasi, apa yang platform udah preconnect dan preload otomatis lewat header Link dan Early Hints, kapan preconnect masih perlu (origin yang ditemukan telat, crossorigin yang tepat), preload yang hemat dan anggaran 10 slot, Speculation Rules default Shopify dan aturan sendiri (prefetch vs prerender, eagerness), semua aset dari CDN Shopify dengan filter yang tepat, dan keputusan defer resource
  • 65 Theme Check Pengenalan, Konfigurasi, Commands — Theme Check sebagai linter Liquid dan JSON theme, cara jalanin lewat CLI, VS Code, dan code editor admin, command shopify theme check dan semua flag-nya, file .theme-check.yml (root, extends, require, ignore, setting per check), severity error/warning/info dan —fail-level di CI, nonaktifin check lewat komentar Liquid, auto-correct, check performa yang opt-in, alur kerja, dan migrasi dari Theme Check 1.x ke 2.x
  • 66 Theme Check Referensi Aturan A–L — Referensi aturan Theme Check dari AppBlockMissingSchema sampai LiquidTag, tiap aturan dengan apa yang dicek, kenapa, contoh gagal dan lolos, opsi, severity default, dan kapan boleh dinonaktifin, termasuk aturan 1.x yang udah dihapus
  • 67 Theme Check Referensi Aturan M–V — Referensi aturan Theme Check dari MatchingTranslations sampai VariableName, termasuk keluarga aturan LiquidDoc (Missing, Unrecognized, Valid*ArgumentTypes, UniqueDocParamNames, ReservedDocParamNames, UnsupportedDocTag, UnusedDocParam, ValidDocParamTypes), schema preset dan static block, terjemahan, snippet, dan ValidScopedCSSClass, dengan contoh gagal dan lolos serta saran nonaktif
  • 68 Theme Inspector dan Lighthouse CI — Dua alat pelengkap Theme Check, yaitu Shopify Theme Inspector for Chrome buat memprofil render Liquid lewat flame graph dan sandwich view (cara jalanin, cara baca, pola masalah, troubleshooting) dan Shopify Lighthouse CI GitHub Action buat audit performa dan aksesibilitas otomatis di tiap pull request (requirements, secrets, workflow, status check, semua argumen)
  • 69 Migrasi ke Strict Liquid Parser — Kenapa Liquid sekarang punya mode error yang lebih ketat, pola kode yang dulu diterima tapi dievaluasi salah, dan kamus lengkap pesan error strict parser (expected end_of_string but found pipe/comparison/colon/id, expected colon, unexpected characters, [:end_of_string] is not a valid expression, bare bracket access) beserta cara memperbaikinya, buat theme dan theme app extension
  • 70 Theme Store Gambaran dan Requirements — Gambaran Shopify Theme Store (alur jadi Theme Partner, revenue share 15%, fee) dan 22 kelompok requirements lengkap yang harus dipenuhi theme buat diterima, dari eksklusivitas, keunikan, desain dan UX, fitur wajib, template/section/block, Lighthouse, syarat per halaman, browser, aset, SEO, aksesibilitas, settings dan terminologi, font, warna, gambar, penamaan dan preset, versi, demo store, dokumentasi, sampai dukungan merchant
  • 71 Testing Theme buat Theme Store — Cara ngetes theme sebelum submit ke Theme Store, yaitu aset uji (dua CSV produk dari Shopify plus setup manual buat inventori, local pickup, unit pricing, rich media, selling plan, Shop Pay Installments, Follow on Shop) dan checklist review lengkap per area (home, header, footer, tiap section, tiap halaman, link sharing, local pickup, unit pricing, rich media, selling plan) yang dipakai tim review
  • 72 Review, Listing, dan Submit — Proses review Theme Store lima tahap, cara submit theme lewat Partner Dashboard, apa yang terjadi setelah submit (email, perubahan selama review, suspensi), penolakan paling umum, dan panduan lengkap halaman listing per preset (zip dan validator, demo store dan screenshot, tagline, industri, ukuran katalog, key highlights, SEO dan tracking GA4/Meta, harga 500, tag fitur, toko contoh, support, catatan submission)
  • 73 Sukses di Theme Store — Hidup setelah theme terbit di Theme Store, yaitu proses update (jeda minimal, jam review, update manual vs otomatis dan apa yang memicunya, perubahan yang bikin versi ditolak, semantic versioning X.Y.Z, release-notes.md, urgent update, nambah preset dan struktur zip /listings), ngelola review merchant (cara minta, cara bales, review negatif, kapan Shopify turun tangan), Theme Store Ad Badge, tindakan yang dilarang, dan cara nyabut theme
  • 74 Shopify CLI 2.x (deprecated) — Shopify CLI 2.x berbasis Ruby yang udah deprecated, dibahas lengkap buat baca tutorial dan repo lama, yaitu fitur dan development theme-nya, struktur folder dan .shopifyignore, referensi semua perintah (init, serve, check, list, open, pull, push, share, publish, package, delete, help, login, logout, populate, store, switch, version, config, whoami) beserta flag-nya, instalasi/upgrade/uninstall per platform, migrasi dari versi legacy pra-0.9.0, tabel padanan ke CLI 3.x, dan cara migrasi
  • 75 Theme Kit (deprecated) — Theme Kit, alat command-line lintas platform (biner Go) yang udah deprecated dan digantikan Shopify CLI, dibahas lengkap buat baca proyek lama, yaitu instalasi per OS, Theme password dari Theme Access, alur get/new/configure/watch/deploy/download/remove/open, environments dan —env, config.yml dengan interpolasi variabel dan file variables, environment variable THEMEKIT_*, flag, aturan ignore pattern, troubleshooting (TLS handshake timeout, too many open files), dan padanannya di Shopify CLI, plus penutup buku

Three.JS

Tampilan Grafik