# Tutorial Mengenal Ruang Kerja Noterich dan Carian Lanjutan Di era di mana kelebihan informasi merupakan hal yang umum, mengorganisir pikiran digital secara efisien bukan sekadar kebutuhan, tetapi juga merupakan hal yang penting. **NoteRich** memperkenalkan dua fitur yang canggih untuk mengubah cara Anda mengelola dan mencari informasi: **Multi-Ruang Kerja Terpisah** dan **Carian Semantik Lanjutan**. Tutorial ini akan membimbing Anda dalam menguasai fitur-fitur tersebut, sehingga Anda dapat membuat sistem manajemen pengetahuan yang sesuai dengan kebutuhan Anda. --- ## Bagian 1: Memahami Ruang Kerja di Noterich ### Apa Itu Ruang Kerja? Bayangkan memiliki buku catatan fisik yang terpisah untuk berbagai aspek kehidupan Anda—satu untuk proyek kerja, satu lagi untuk jurnal pribadi, dan satu lagi untuk catatan penelitian. **Ruang Kerja** di Noterich membawa efisiensi organisasi ke lingkungan digital Anda. Setiap ruang kerja di Noterich merupakan **wadah yang terpisah sepenuhnya** untuk catatan Anda, lengkap dengan: - Basis data catatan independen - Indeks pencarian terpisah - Alur URL unik - Konteks memori AI terpisah ```mermaid graph TB subgraph "Aplikasi Noterich" A[Router Ruang Kerja] --> B[Ruang Kerja: Kerja] A --> C[Ruang Kerja: Jurnal Pribadi] A --> D[Ruang Kerja: Catatan Penelitian] B --> B1[Basis Data Catatan] B --> B2[Indeks Pencarian] B --> B3[Konteks AI] C --> C1[Basis Data Catatan] C --> C2[Indeks Pencarian] C --> C3[Konteks AI] D --> D1[Basis Data Catatan] D --> D2[Indeks Pencarian] D --> D3[Konteks AI] end style A fill:#000,stroke:#000,color:#fff style B fill:#fafafa,stroke:#eaeaea,color:#333 style C fill:#fafafa,stroke:#eaeaea,color:#333 style D fill:#fafafa,stroke:#eaeaea,color:#333 ``` ### Mengapa Menggunakan Berbagai Ruang Kerja? | Skenario | Manfaat | |----------|---------| | **Pemisahan Kerja dan Kehidupan Pribadi** | Menjaga catatan profesional terpisah dari jurnal pribadi | | **Pemisahan Proyek** | Menggunakan ruang kerja untuk klien tertentu atau proyek jangka panjang | | **Peralihan Konteks** | Beralih antar konteks pikiran tanpa gangguan | | **Kontrol Privasi** | Berbagi ruang kerja tertentu tanpa memungkinkan konten yang tidak relevan diketahui | | **Pengoptimalan Kinerja** | Basis pengetahuan yang besar tetap cepat saat dibagi menjadi ruang kerja yang terfokus | --- ## Bagian 2: Navigasi Antar Ruang Kerja ### Sistem Router Ruang Kerja Noterich menggunakan sistem routing cerdas yang mengingat preferensi ruang kerja Anda dan memberikan navigasi yang lancar. #### Identifikasi Ruang Kerja Berbasis URL Setiap ruang kerja memiliki identifikasi unik yang tercermin dalam URL browser Anda: ``` https://noterich.app/#workspace=work-projects https://noterich.app/#workspace=personal-journal https://noterich.app/#workspace=research-notes ``` ID ruang kerja adalah: - **Aman untuk URL**: Hanya karakter alfanumerik, tanda hubung, dan tanda bawah yang diizinkan - **Tahan lama**: Disimpan di penyimpanan lokal browser untuk pemulihan cepat - **Dapat dibagikan**: Anda dapat berbagi tautan langsung ke ruang kerja tertentu #### Cara Perubahan Ruang Kerja Berlangsung Ketika Anda mengubah ruang kerja di Noterich, inilah yang terjadi di balik layar: ```mermaid sequenceDiagram participant U sebagai Pengguna participant R sebagai Router Ruang Kerja participant L sebagai LocalStorage participant W sebagai Web Worker participant S sebagai Mesin Pencarian participant D sebagai IndexedDB U->>R: Klik tombol perubahan ruang kerja R->>L: Simpan ID ruang kerja R->>R: Ubah URL hash R->>W: Kirim pesan ID ruang kerja ke W R->>S: Inisialisasi ulang mesin pencarian W->>D: Ganti koneksi basis data S->>D: Buka indeks khusus ruang kerja S-->>U: Notifikasi pencarian siap ``` ### Praktik Terbaik dalam Penamaan Ruang Kerja Pilih ID ruang kerja yang: - **Deskriptif**: `marketing-q4-2025` daripada `work1` - **Konvensional**: Gunakan konvensi penamaan yang sama di seluruh organisasi - **Tahan lama**: Hindari nama yang terikat waktu kecuali sementara (`project-phoenix` dibandingkan `temp-notes`) --- ## Bagian 3: Arsitektur Pencarian Lanjutan ### Dari Pencarian Kata Kunci ke Pemahaman Semantik Alat pencarian tradisional mengandalkan pencocokan kata kunci yang tepat. Jika Anda mencari “automobile”, mereka tidak akan menemukan catatan yang mengandung “car”. Mesin pencarian lanjutan Noterich melampaui batasan ini. #### Sistem Pencarian Dua Lapisan Noterich menggunakan arsitektur pencarian dua lapisan yang canggih: ```graphviz digraph SearchArchitecture { rankdir=TB; node [shape=box, style="rounded,filled", fillcolor="#fafafa", color="#eaeaea", fontname="Inter", fontsize=11]; edge [color="#d4d4d4", penwidth=1.5]; Query [label="Pencarian Pengguna", fillcolor="#000", color="#000", fontcolor="#ffffff"]; subgraph cluster_processing { label = "Pipeline Pemrosesan Pencarian"; style = "filled"; fillcolor = "#f9f9f9"; color = "#eaeaea"; Segment [label="Segmentasi Teks\n(Intl.Segmenter + Smart Fallback)"; Tokenize [label="Klasifikasi Tokon\n(E-mails, URLs, Nomor, CJK)"; } subgraph cluster_search { label = "Eksperimen Pencarian Paralel"; style = "filled"; fillcolor = "#f9f9f9"; color = "#eaeaea"; Precise [label="Pencocokan Tepat\njudul raw field\nBerat: 1.0"]; Fuzzy [label="Pencocokan Fuzzy\njudul/content field\nBerat: 0.8"]; } Merge [label="Pertemuan Skor & Penilaian"]; Results [label="Hasil Akhir\ndengan Poin Utama"]; Query -> Segment; Segment -> Tokenize; Tokenize -> Precise; Tokenize -> Fuzzy; Precise -> Merge; Fuzzy -> Merge; Merge -> Results; } ``` ### Segmentasi Teks Cerdas Dasar kekuatan pencarian Noterich terletak pada kemampuan segmentasi teksnya yang canggih. #### Dukungan Bahasa Beragam Mesin pencarian secara otomatis mendeteksi dan membagi teks dalam berbagai bahasa: | Jenis Bahasa | Contoh | Strategi Segmentasi | |---------------|----------|----------------------| | **Berdasarkan Latin** | Bahasa Inggris, Spanyol, Prancis | Deteksi batas kata | | **CJK** | Bahasa Cina, Jepang, Korea | Segmentasi tingkat karakter menggunakan Intl.Segmenter | | **Campuran** | Potongan kode, URL, email | Ekstraksi berbasis pola | | **Nomor** | Tanggal, harga, nomor telepon | Pengenalan pola khusus | #### Pengenalan Pola Cerdas Noterich mengenali dan mempertahankan pola penting selama proses segmentasi: - **Alamat email**: `user@example.com` - **URL**: `https://example.com/path` - **Nomor telepon**: `+1-555-123-4567` - **Tanggal**: `2025-01-15`, `15/01/2025` - **Mata uang**: `$1,234.56`, `¥500` - **Ukuran**: `42℃`, `100km/h` Ini memastikan bahwa pencarian `user@example.com` akan menemukan alamat email yang tepat, bukan hasil yang terpecah untuk `user`, `example`, dan `com`. --- ## Bagian 4: Menguasai Pencarian Pencarian ### Sintaks dan Operator Pencarian Noterich mendukung sintaks pencarian yang kuat untuk pencarian informasi yang akurat. #### Pencarian Dasar Cukup ketikkan pencarian Anda untuk mencari semua konten yang terindeks: ``` Strategi pemasaran kuartal ``` Ini mencari baik judul maupun isi lengkap, dengan hasil yang diurutkan berdasarkan relevansi. #### Pencarian Multikata OR Gunakan simbol pip `|` untuk mencari beberapa kata alternatif: ``` Q4 planning | quarterly review | year-end summary ``` Ini akan mengembalikan catatan yang cocok dengan **mana pun** dari kata-kata yang ditentukan, sangat cocok untuk sesi pemikiran di mana terminologi mungkin berbeda. #### Sistem Penilaian Berat Noterich menggunakan algoritma penilaian yang canggih: ``` Tipe Pencocokan | Berat | Deskripsi --------------------|--------|------------------------------------- Precise (judul_raw field) | 1.0 | Pencocokan tepat dalam judul asli Fuzzy (judul) | 0.8 | Pencocokan segmentasi dalam judul yang di tokenisasi Fuzzy (isi) | 0.8 | Pencocokan segmentasi dalam isi catatan ``` Hasil diurutkan berdasarkan: 1. **Prioritas Tipe Pencocokan**: Pencocokan tepat lebih diutamakan daripada pencocokan fuzzy 2. **Skor Kumulatif**: Pencocokan beberapa kata meningkatkan skor 3. **Cakupan Sub-Pencarian**: Catatan yang cocok dengan lebih banyak sub-pencarian lebih diutamakan ### Contoh Pencarian Dalam Dunia Nyata #### Contoh 1: Menemukan Catatan Pertemuan ```javascript // Pencarian "team standup | daily sync | morning meeting" // Mengembalikan catatan yang mengandung salah satu frasa tersebut, // dengan prioritas pencocokan judul yang tepat ``` #### Contoh 2: Pencarian Dokumentasi Teknis ```javascript // Pencarian "API endpoint authentication" // Segmentasi dan pencarian cerdas: // - Catatan yang menyebutkan "API" dan "endpoint" serta "authentication" // - Mempertahankan "API" sebagai satu token // - Cocok baik dengan format camelCase maupun format yang terpisah ``` #### Contoh 3: Konten Berbahasa Beragam ```javascript // Pencarian (Bahasa Inggris dan Cina campur aduk) "project roadmap 项目规划" // Segmentasi dan pencarian pada kedua bahasa secara bersamaan ``` ### Asisten Navigasi Dokumen Panjang Salah satu fitur unggul Noterich adalah kemampuannya untuk menangani **dokumen panjang** dengan mudah. Baik Anda bekerja dengan spesifikasi teknis, makalah penelitian, atau dokumentasi proyek yang komprehensif, mencari konten spesifik dalam dokumen panjang menjadi sangat mudah. #### Cara Pencarian Di Dalam Dokumen Berlangsung Ketika Anda melakukan pencarian, Noterich tidak hanya mengembalikan dokumen yang cocok—menggunakan **navigasi yang tepat di dalam dokumen**: ```mermaid sequenceDiagram participant User participant SearchEngine participant DocumentIndex participant Viewer User->>SearchEngine: Masukkan pencarian SearchEngine->>DocumentIndex: Cari di semua ruang kerja DocumentIndex-->>SearchEngine: Kembalikan dokumen yang cocok + posisi hasil SearchEngine->>User: Tampilkan hasil dengan jumlah pencocokan User->>User: Klik pada hasil SearchEngine->>Viewer: Buka dokumen di hasil pertama Viewer->>User: Tampilkan semua hasil dengan kontrol navigasi User->>Viewer: Beralih antar hasil (Next/Previous) Viewer->>User: Tampilkan indikator posisi pencocokan (misalnya, "3 dari 12") ``` #### Fitur Utama untuk Dokumen Panjang 1. **Tampilan Jumlah Pencocokan**: Setiap hasil pencarian menampilkan jumlah pencocokan dalam dokumen tersebut (misalnya, "Laporan Tahunan 2024 · 15 pencocokan"), membantu Anda mengetahui dokumen mana yang memiliki konten paling relevan. 2. **Peralihan Cepat ke Pencocokan**: Klik pada hasil pencarian untuk membuka dokumen dan beralih secara otomatis ke bagian pertama yang cocok, dengan teks yang dicetak tebal untuk visibilitas langsung. 3. **Kontrol Navigasi**: Gunakan tombol pintas keyboard atau tombol UI untuk berpindah antar semua hasil: - `F3` atau `Cmd+G`: Pindah ke hasil berikutnya - `Shift+F3` atau `Shift+Cmd+G`: Pindah ke hasil sebelumnya - Counter visual menunjukkan posisi saat ini (misalnya, "Pencocokan 7 dari 23") 4. **Penyorotan Semua Pencocokan**: Semua contoh pencarian Anda akan ditampilkan secara bersamaan, memberikan gambaran visual tentang distribusi informasi di dalam dokumen. 5. **Pertahankan Konteks**: Saat berpindah antar hasil, konteks sekitar tetap terlihat, sehingga Anda tidak akan kehilangan posisi Anda dalam dokumen yang kompleks. #### Contoh Praktis: Navigasi Spesifikasi Teknis Bayangkan Anda memiliki dokumen spesifikasi teknis sepanjang 50.000 karakter. Anda perlu menemukan semua kemunculan “authentication protocol”: | Langkah | Tindakan | Hasil | |------|--------|--------| | 1 | Ketik `authentication protocol` di kotak pencarian | Dokumen spesifikasi muncul dengan “8 pencocokan” | | 2 | Klik hasil pencarian | Dokumen dibuka, beralih ke bagian pertama yang cocok | | 3 | Tekan `F3` tujuh kali | Lihat semua 8 contoh secara berurutan | | 4 | Perhatikan penyorotan hasil yang dicetak tebal | Gambaran visual distribusi kata | | 5 | Baca konteks sekitar | Konteks seluruh paragraf dipertahankan di setiap perpindahan | Kemampuan ini mengubah dokumen panjang dari dinding teks yang menakutkan menjadi struktur pengetahuan yang dapat diakses dengan mudah, di mana setiap informasi hanya butuh beberapa tekanan tombol. #### Tips untuk Pencarian Dokumen Panjang - **Gunakan Frasa Spesifik**: Pencarian panjang mengurangi kesalahan positif dalam dokumen besar - **Periksa Jumlah Pencocokan**: Jumlah pencocokan yang tinggi mungkin menunjukkan kata yang sangat umum - **Gabungkan dengan Penyaring Ruang Kerja**: Cari dalam ruang kerja tertentu untuk mempersempit cakupan - **Manfaatkan Ketepatan Judul**: Strukturkan judul bagian dengan jelas untuk pencocokan yang akurat --- ## Bagian 5: Kinerja Skala Besar ### Penyimpanan Berbasis IndexedDB Noterich memanfaatkan **IndexedDB** untuk penyimpanan lokal berkinerja tinggi, memungkinkan pencarian instan bahkan dengan basis pengetahuan yang besar. #### Arsitektur Basis Data Setiap ruang kerja mempertahankan basis data IndexedDBnya sendiri: ``` noterich_note_database_{workspaceId} → Metadata dan konten catatan noterich_search_index_{workspaceId} → Dokumen indeks pencarian ``` Ini memastikan: - **Peralihan Cepat**: Tidak ada pengiriman data antar ruang kerja - **Pemutusan Ulang Awal**: Ekspor ruang kerja secara terpisah - **Kontrol Akses Spesifik**: Kontrol akses yang detail ### Pembaruan Indeks Secara Berkala Alih-alih membangun ulang seluruh indeks pencarian setiap kali, Noterich menggunakan pembaruan berkala yang cerdas: ```mermaid graph LR A[Catatan Disimpan] --> B[Apakah Indeks Ada?] B -->|Ya| C[Bandingkan Tanda Waktu] B -->|Tidak| D[Konstruksi Indeks Utuh] C -->|Lebih Baru| E[Ubah Entri Indeks] C -->|Lebih Lama| F[Tinggalkan di IndexDB] D --> G[Konstruksi Indeks] D --> G F --> H[Indeks Saat Ini] style A fill:#fafafa,stroke:#eaeaea style B fill:#000,stroke:#000,color:#fff style C fill:#fafafa,stroke:#eaeaea style D fill:#fafafa,stroke:#eaeaea style E fill:#fafafa,stroke:#eaeaea style F fill:#fafafa,stroke:#eaeaea style G fill:#fafafa,stroke:#eaeaea style H fill:#fafafa,stroke:#eaeaea ``` ### Pengujian Kinerja Pengujian kami menunjukkan kinerja yang luar biasa bahkan dalam skala besar: ```echarts { "xAxis": { "type": "category", "data": ["1k Notes", "5k Notes", "10k Notes", "20k Notes", "50k Notes"], "axisLabel": { "color": "#666", "rotate": 0 } }, "yAxis": [ { "type": "value", "name": "Notes Count", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Latensi (ms)", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Notes Count", "data": [1000, 5000, 10000, 20000, 50000], "type": "bar", "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Search Latensi", "data": [8, 12, 15, 22, 35], "type": "line", "yAxisIndex": 1, "smooth": true, "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" }, "symbol": "circle", "symbolSize": 8 } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" }, "legend": { "data": ["Notes Count", "Search Latensi"], "bottom": 0, "textStyle": { "color": "#666" } } } ``` Bahkan dengan **50.000 catatan**, pencarian kembali memberikan hasil dalam waktu kurang dari 40 milidetik—lebih cepat daripada gerakan mata. ### Efisiensi Memori Mesin pencarian menggunakan struktur data yang dioptimalkan: - **FlexSearch Dokumen Indeks**: Menggabungkan beberapa bidang menjadi satu indeks yang efisien - **Peta Catatan Bersama**: Mempertahankan pencarian O(1) untuk metadata catatan - **Pemrosesan Berkelompok**: Memperbarui indeks dalam blok untuk mencegah hambatan antar UI - **Pemuatan Pasif**: Indeks pencarian dijalankan secara berdasar saat berpindah ruang kerja --- ## Bagian 6: Praktik Terbaik Manajemen Ruang Kerja ### Membuat Struktur Ruang Kerja yang Efektif #### Pola Rekomendasi **Pola 1: Pemisahan Berdasarkan Domain** ``` ├── work-engineering ├── work-marketing ├── work-hr └── personal ``` **Polo 2: Organisasi Berbasis Proyek** ``` ├── project-alpha ├── project-beta ├── project-gamma └── archive-2024 ``` **Polo 3: Organisasi Berdasarkan Waktu** ``` ├── 2025-q1 ├── 2025-q2 ├── 2025-q3 └── 2025-q4 ``` ### Kapan Menciptakan Ruang Kerja Baru pertimbangkan untuk membuat ruang kerja baru ketika: ✅ **Batas konteks jelas**: Proyek, tim, atau bidang kehidupan yang berbeda ✅ **Kontrol Akses Berbeda Diperlukan**: Beberapa catatan perlu dibagi dengan cara yang berbeda ✅ **Basis Pengetahuan Bertambah Besar**: Pemisahan ketika satu ruang kerja melebihi 10.000 catatan ✅ **Kebutuhan Kolaborasi Berbeda**: Kolaborator yang berbeda untuk topik yang berbeda ### Kapan Tetap di Ruang Kerja Satu Pertahankan catatan bersama ketika: ❌ **Referensi Berkala**: Catatan sering saling terhubung ❌ **Pencarian Meliputi Topik**: Anda sering mencari di semua konten ❌ **Biaya Pengaturan Lebih Besar Dari Manfaat**: Untuk koleksi kecil (<1.000 catatan) --- ## Bagian 7: Tips dan Trik Lanjutan ### Tips 1: Manfaatkan Segmentasi Hashtag Noterich secara otomatis membagi hashtag untuk pencarian: ``` #machine-learning → dapat dicari sebagai "machine" + "learning" ``` Ini memungkinkan menemukan catatan dengan hashtag tersebut ketika mencari “machine” atau “learning”. ### Tips 2: Gunakan Nama File Attachment dalam Pencarian Nama file attachment diindeks dan dapat dicari: ``` quarterly_report.pdf → dapat dicari sebagai "quarterly" + "report" + "pdf" ``` ### Tips 3: Persamaan Matematika Bisa Dicari Konten persamaan diambil dan diindeks: ``` E = mc² → komponen yang dicari diindeks ``` ### Tips 4: Optimisasi untuk Pencarian Umum Gabungkan informasi yang sering diakses dalam judul untuk pencocokan yang akurat: ``` Lebih baik: "Rencana Pemasaran Q4" Daripada: "Beberapa pemikiran tentang angka" ``` ### Tips 5: Pemeliharaan Indeks Secara Teratur Meskipun Noterich mengatur indeks secara otomatis, pemeliharaan berkala dapat mengoptimalkan kinerja: 1. Buka Pengaturan → Pencarian 2. Klik "Rebuild Search Index" 3. Tunggu pemberitahuan selesai Disarankan setelah: - Impor besar (>1.000 catatan sekaligus) - Peningkatan versi besar - Percepatan pencarian yang signifikan --- ## Bagian 8: Menyelesaikan Masalah Umum ### Masalah: Hasil Pencarian Kurang **Penyebab Mungkin:** 1. Catatan berada di ruang kerja yang berbeda 2. Indeks belum diperbarui 3. Catatan ditandai sebagai draf **Solusi:** - Periksa penunjuk ruang kerja saat ini dalam URL - Tunggu beberapa detik agar indeks diperbarui - Periksa status catatan (draf tidak dihapus dari pencarian) ### Masalah: Perubahan Ruang Kerja Terasa Lambat **Penyebab Mungkin:** 1. Ruang kerja besar dengan banyak catatan 2. Pembaruan indeks pertama kali 3. Kinerja IndexedDB browser **Solusi:** - Biarkan cache pembangun indeks pertama kali (operasi sekali) - Pertimbangkan untuk membagi ruang kerja yang sangat besar - Pastikan browser memiliki kuota penyimpanan yang cukup ### Masalah: Indeks Pencarian Tidak Sesuaikan **Gejala:** - Catatan yang baru saja diubah tidak muncul dalam pencarian - Catatan yang dihapus masih muncul dalam hasil **Solusi:** ``` Pengaturan → Lanjutan → Rebuild Search Index ``` Ini memaksa reindexasi total semua catatan di ruang kerja saat ini. --- ## Kesimpulan: Membangun “Brain Kedua” Anda Menguasai ruang kerja dan pencarian lanjutan di Noterich mengubah cara Anda mencatat menjadi mitra berpikir yang aktif. Berikut rencana tindakan Anda: ### Minggu 1: Dasar - [ ] Evaluasi catatan yang ada dan identifikasi batas ruang kerja yang alami - [ ] Buat 2-3 ruang kerja awal berdasarkan konteks utama Anda - [ ] Latih navigasi antar ruang kerja menggunakan URL ### Minggu 2: Optimisasi - [ ] Cobalah berbagai pola pencarian - [ ] Pelajari operator OR (`|`) untuk pencarian yang fleksibel - [ ] Periksa urutan hasil pencarian dan sesuaikan judul catatan sesuai ### Minggu 3: Penguasaan Penuh - [ ] Atur jalur kerja spesifik untuk ruang kerja - [ ] Terapkan konvensi penamaan yang konsisten - [ ] Bagikan tautan ruang kerja dengan kolaborator ### Proses Berkelanjutan: Pemeliharaan - [ ] Tinjau struktur ruang kerja setiap kuartal - [ ] Pantau metrik kinerja pencarian - [ ] Perbaiki struktur sesuai dengan pertumbuhan pengetahuan Anda --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Ruang Kerja</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Pencarian Lanjutan</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Indeks Semantik</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">IndexedDB</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Bahasa Beragam</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">PKM</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Lokal Pertama</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Kinerja</span> </div>