Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh
fanpy

palsu

Klien web Mastodon yang berpendirian minimalis.

Tangkapan layar yang mewah

?️ Pengucapan : /fænpi/ ( FAN-pee ) ? Mendengarkan

Ini adalah klien web alternatif untuk Mastodon.

  • ? Produksi : https://phanpy.social
    • cabang production
    • lebih jarang pecah
    • perbaikan lebih lambat kecuali kritis
  • ?️ Pengembangan : https://dev.phanpy.social
    • cabang main
    • mungkin akan melihat hal-hal keren baru lebih cepat
    • mungkin lebih sering patah
    • mungkin diperbaiki lebih cepat juga

? Ikuti @phanpy di Mastodon untuk pembaruan ✨

Semuanya dirancang dan direkayasa mengikuti selera dan visi saya. Ini adalah proyek sampingan pribadi bagi saya untuk belajar tentang Mastodon dan bereksperimen dengan ide-ide UI/UX baru.

Fitur

  • ? Banyak akun
  • ? Jendela tulis pop-out/in
  • ? Tema terang/gelap/otomatis
  • ? Notifikasi yang dikelompokkan
  • ? Rangkaian komentar bersarang
  • ? Pemulihan draf yang belum terkirim
  • ? Meningkatkan Korsel™️
  • ⚡ Pintasan™️ dengan mode tampilan seperti multi-kolom atau bilah tab
  • #️⃣ Garis waktu multi-hashtag

Keputusan desain

  • Tindakan status (balas, peningkatan, favorit, bookmark, dll) disembunyikan secara default .
    Mereka hanya muncul di halaman status individual. Hal ini untuk mengurangi kekacauan dan gangguan. Hal ini mungkin mengakibatkan keterlibatan yang lebih rendah, namun kami tidak mengejar angka di sini.
  • Boost diwakili dengan ikon roket .
    Ikon panah ganda berwarna hijau (retweet untuk Twitter) tidak cocok untuk istilah "boost". Roket hijau terlihat aneh, jadi saya menggunakan warna ungu.
  • Nama pengguna pendek ( @username ) ditampilkan di garis waktu, bukan nama pengguna akun lengkap ( @username@instance ) .
    Meskipun pedoman tersebut menyebutkan bahwa "Desentralisasi harus transparan kepada pengguna", menurut saya kita tidak harus memaksakan hal ini setiap saat. Ada juga beberapa masalah aksesibilitas terkait pembaca layar dengan nama pengguna lengkap, meskipun sayangnya aplikasi web ini belum dapat diakses.
  • Tidak ada putar otomatis untuk video/GIF/apa pun di timeline .
    Garis waktu sudah sangat kacau dengan banyak orang, merek, berita, dan media yang mencoba menarik perhatian Anda. Jangan memperburuk keadaan. (Pengecualian saat ini adalah emoji animasi.)
  • URL berbasis hash .
    Aplikasi web ini tidak dimaksudkan sebagai pengganti penuh front-end Mastodon yang sudah ada. Tidak ada SEO, database, tanpa server, atau server apa pun yang berjalan lama. Saya bisa saja salah suatu hari nanti.

Implementasi UI yang halus

Tampilan nama pengguna

Tampilan nama pengguna

  • Di timeline, nama pengguna ditampilkan sebagai [NAME] @[username] .
  • Untuk @[username] , selalu kecualikan nama domain instance.
  • Jika [NAME] terlihat sama dengan @[username] , maka @[username] juga dikecualikan.

Meningkatkan Korsel

Meningkatkan Korsel

  • Dari postingan yang diambil (misalnya 20 postingan per pengambilan), jika jumlah peningkatan lebih dari seperempat total postingan atau lebih dari 3 peningkatan berturut-turut, UI carousel peningkatan akan dipicu.
  • Jika jumlah peningkatan lebih dari 3 perempat total postingan, UI carousel peningkatan akan ditempatkan di akhir total postingan yang diambil (per "halaman").
  • Jika tidak, peningkatan carousel UI akan ditempatkan di antara postingan.

Lencana nomor ulir (misalnya, ulir 1/X)

Lencana nomor benang

  • Periksa setiap postingan untuk inReplyToId dari cache atau permintaan API tambahan, hingga postingan root ditemukan.
  • Jika postingan root ditemukan, badge akan menampilkan nomor indeks postingan di thread.
  • Batasi hingga 3 permintaan API karena postingan root mungkin sudah sangat lama atau threadnya sangat panjang.
  • Jika nomor indeks tidak dapat ditemukan, lencana akan kembali menampilkan Thread tanpa nomor.

Isian hastag runtuh

Isian hastag runtuh

  • Paragraf pertama konten postingan dengan lebih dari 3 hashtag akan diciutkan hingga maksimal 3 baris.
  • Paragraf berikutnya setelah paragraf pertama dengan lebih dari 3 hashtag akan diciutkan menjadi 1 baris.
  • Paragraf yang berdekatan dengan lebih dari 1 hashtag setelah paragraf diciutkan akan diciutkan menjadi 1 baris.
  • Jika ada teks di sekitar atau di antara hashtag, teks tersebut tidak akan diciutkan.
  • Hashtag yang diciutkan akan ditambahkan dengan ... di bagian akhir.
  • Mereka juga sedikit memudar untuk mengurangi kebisingan visual.
  • Membuka tampilan postingan akan menampilkan hashtag yang tidak diciutkan.

Postingan yang difilter

  • Postingan yang difilter "Sembunyikan sepenuhnya" akan disembunyikan, tanpa UI untuk mengungkapkannya.
  • Postingan yang difilter "Sembunyikan dengan peringatan" akan disembunyikan sebagian, menampilkan nama filter dan nama penulis.
    • Konten dapat diungkapkan sebagian dengan mengarahkan kursor ke postingan, dengan tooltip menampilkan teks postingan.
    • Mengkliknya akan membuka halaman Posting.
    • Menekan lama atau mengklik kanan akan "mengintip" postingan dengan UI lembar bawah.
    • Pada boost carousel, mereka diurutkan hingga akhir carousel.

Perkembangan

Prasyarat: Node.js 18+

  • npm install - Instal dependensi
  • npm run dev - Mulai server pengembangan dan messages:extract ( clean + ``tonton`) secara paralel
  • npm run build - Bangun untuk produksi
  • npm run preview - Pratinjau build produksi
  • npm run fetch-instances - Ambil daftar instance dari joinmastodon.org/servers, simpan ke src/data/instances.json
  • npm run sourcemap - Jalankan source-map-explorer pada build produksi
  • npm run messages:extract - Ekstrak pesan dari file sumber dan perbarui katalog pesan lokal

Tumpukan teknologi

  • Vite - Alat pembuat
  • Prekta - perpustakaan UI
  • Valtio - Manajemen negara
  • React Router - Perutean
  • masto.js - klien API Mastodon
  • Iconify - Perpustakaan ikon
    • Ikon MingLucu
  • Lingui - Internasionalisasi
  • Vanilla CSS - Ya, saya jadul.

Beberapa di antaranya mungkin berubah di masa depan. Dunia front-end selalu berubah.

Internasionalisasi

Semua terjemahan tersedia sebagai file gettext .po di folder src/locales . Bahasa defaultnya adalah bahasa Inggris ( en ). Aturan Plural CLDR digunakan untuk pluralisasi. Bahasa RTL (kanan ke kiri) juga didukung dengan arah teks, rendering ikon, dan tata letak yang tepat.

Saat memuat halaman, bahasa default terdeteksi melalui metode berikut, secara berurutan (pencocokan pertama digunakan):

  1. Parameter URL lang misalnya /?lang=zh-Hant
  2. kunci localStorage lang
  3. navigator.language

Pengguna dapat mengubah bahasa dalam pengaturan, yang mengatur kunci localStorage lang .

Panduan untuk penerjemah

*Terinspirasi oleh Buku Panduan Terjemahan WordPress:

  • Jangan menerjemahkan secara harfiah, terjemahkan secara organik.
  • Cobalah untuk menjaga tingkat formalitas (atau informalitas) yang sama
  • Jangan gunakan istilah slang atau istilah khusus audiens
  • Perhatikan placeholder untuk variabel. Banyak string yang memiliki placeholder, misalnya {account} (variabel), <0>{name} (tag dengan variabel) dan # (nomor placeholder).
  • Elipsis (…) disengaja. Jangan hapus itu.
    • Nielsen Norman Group: "Sertakan Elips dalam Teks Perintah untuk Menunjukkan Kapan Informasi Lebih Lanjut Diperlukan"
    • Pedoman Antarmuka Manusia Apple: "Tambahkan elipsis ke label item menu ketika tindakan memerlukan lebih banyak informasi sebelum dapat diselesaikan. Karakter elipsis (…) menandakan bahwa orang perlu memasukkan informasi atau membuat pilihan tambahan, biasanya dalam tampilan lain."
    • Pengembangan Aplikasi Windows: "Elipsis berarti ketidaklengkapan."
  • Stempel waktu tanggal, rentang tanggal, angka, nama bahasa, dan segmentasi teks ditangani oleh API Internasionalisasi ECMAScript.
    • Intl.DateTimeFormat - misalnya "8 Agustus", "08/08/2024"
    • Intl.RelativeTimeFormat - misalnya "2 hari yang lalu", "dalam 2 hari"
    • Intl.NumberFormat - misalnya "1.000", "10K"
    • Intl.DisplayNames - misalnya "Bahasa Inggris" ( en ) dalam bahasa China Tradisional ( zh-Hant ) adalah "英文"
    • Intl.Locale (dengan polyfill untuk browser lama)
    • Intl.Segmenter (dengan polyfill untuk browser lama)

Catatan teknis

  • ID untuk string dibuat secara otomatis, bukan ditentukan secara eksplisit. Beberapa manfaatnya adalah menghindari masalah "penamaan sesuatu" dan menghindari duplikat.
    • ID eksplisit mungkin diperkenalkan di masa mendatang ketika persyaratan dan prioritas berubah. Perpustakaan (Lingui) mengizinkan keduanya.
    • Silakan laporkan masalah jika string tertentu diterjemahkan secara berbeda berdasarkan konteks, budaya, atau wilayah.
  • Tidak ada string untuk pemberitahuan push. Bahasa diatur di server instans.
  • Pemilih tanggal HTML asli, misalnya akan selalu mengikuti lokal sistem dan bukan lokal yang ditetapkan pengguna.
  • "ALT" pada lencana ALT tidak diterjemahkan. Ini berfungsi sebagai standar yang dapat dikenali di berbagai bahasa.
  • Nama emoji khusus tidak dilokalkan, oleh karena itu penelusuran tidak berfungsi untuk bahasa selain Inggris.
  • GIPHY API mendukung daftar bahasa untuk pencarian.
  • Unicode Tanda kanan-ke-kiri (RLM) ( U+200F , ‏ ) mungkin perlu digunakan untuk teks RTL/LTR campuran, terutama untuk elemen </code> ( <code>document.title</code> ).</li><li> Pada pengembangan, ada lokal <code>pseudo-LOCALE</code> tambahan, yang digunakan untuk lokalisasi semu. Ini untuk pengujian dan tidak akan muncul di produksi.</li><li> Saat dibuat untuk produksi, pesan katalog berbahasa Inggris ( <code>en</code> ) tidak digabungkan secara terpisah. Lokal lainnya digabungkan sebagai file terpisah dan dimuat sesuai permintaan. Hal ini memastikan bahwa <code>en</code> selalu tersedia sebagai cadangan.</li></ul><div class="markdown-heading" dir="auto"><h3> Terjemahan sukarela</h3></div><p dir="auto"> Terjemahan dikelola di Crowdin. Anda dapat membantu dengan menjadi sukarelawan penerjemahan.</p><p dir="auto"> Baca dokumentasi intro untuk memulai.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Hosting mandiri</h2></div><p dir="auto"> Ini adalah <strong>aplikasi web statis murni</strong> . Anda dapat menyimpannya di mana pun Anda mau.</p><p dir="auto"> Dua cara (pilih salah satu):</p><div class="markdown-heading" dir="auto"><h3> Cara mudah</h3></div><p dir="auto"> Buka Rilis dan unduh <code>phanpy-dist.zip</code> atau <code>phanpy-dist.tar.gz</code> terbaru. Ini sudah dibuat sebelumnya sehingga tidak perlu menjalankan perintah instal/bangun apa pun. Ekstrak itu. Sajikan folder file yang diekstraksi.</p><div class="markdown-heading" dir="auto"><h3> Cara pembuatan khusus</h3></div><p dir="auto"> Membutuhkan Node.js.</p><p dir="auto"> Unduh atau <code>git clone</code> repositori ini. Gunakan cabang <code>production</code> untuk rilis <em>stabil</em> , <code>main</code> untuk <em>rilis terbaru</em> . Bangun dengan menjalankan <code>npm run build</code> (setelah <code>npm install</code> ). Sajikan folder <code>dist</code> .</p><p dir="auto"> Kustomisasi dapat dilakukan dengan meneruskan variabel lingkungan ke perintah build. Contoh: </p><div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PHANPY_CLIENT_NAME="Phanpy Dev" PHANPY_WEBSITE="https://dev.phanpy.social" npm run build"><pre>PHANPY_CLIENT_NAME= <span class="pl-s"><span class="pl-pds">"</span> Phanpy Dev <span class="pl-pds">"</span></span> PHANPY_WEBSITE= <span class="pl-s"><span class="pl-pds">"</span> https://dev.phanpy.social <span class="pl-pds">"</span></span> npm run build</pre></div><div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PHANPY_DEFAULT_INSTANCE=hachyderm.io PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy npm run build"><pre>PHANPY_DEFAULT_INSTANCE=hachyderm.io PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy npm run build</pre></div><p dir="auto"> Dimungkinkan juga untuk mengaturnya di file <code>.env</code> .</p><p dir="auto"> Variabel yang tersedia:</p><ul dir="auto"><li> <code>PHANPY_CLIENT_NAME</code> (opsional, default: <code>Phanpy</code> ) memengaruhi:<ul dir="auto"><li> Judul halaman web, ditampilkan di jendela browser atau judul tab</li><li> Judul aplikasi, ketika diinstal sebagai PWA, ditampilkan di layar Utama, dok macOS, bilah tugas Windows, dll</li><li> Judul kartu OpenGraph, ketika dibagikan di jejaring sosial</li><li> Nama klien, saat mendaftarkan aplikasi untuk autentikasi dan ditampilkan sebagai klien yang digunakan pada postingan di beberapa aplikasi/klien</li></ul></li><li> <code>PHANPY_WEBSITE</code> (opsional tetapi disarankan, default: <code>https://phanpy.social</code> ) memengaruhi:<ul dir="auto"><li> URL kanonik situs web</li><li> URL kartu OpenGraph, ketika dibagikan di jejaring sosial</li><li> Jalur root untuk gambar kartu OpenGraph</li><li> URL klien, saat mendaftarkan aplikasi untuk autentikasi dan ditampilkan sebagai klien yang digunakan pada postingan di beberapa aplikasi/klien</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE</code> (opsional, tidak ada default):<ul dir="auto"><li> misalnya 'mastodon.social', tanpa <code>https://</code></li><li> Contoh default untuk masuk</li><li> Saat masuk, pengguna akan diarahkan langsung ke halaman otentikasi instance daripada harus mengetikkan URL instance secara manual dan mengirimkannya</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL</code> (opsional, tanpa default):<ul dir="auto"><li> URL halaman pendaftaran instance</li><li> Misalnya <code>https://mastodon.social/auth/sign_up</code></li></ul></li><li> <code>PHANPY_PRIVACY_POLICY_URL</code> (opsional, default pada kebijakan privasi instansi resmi):<ul dir="auto"><li> URL halaman kebijakan privasi</li><li> Dapat menentukan kebijakan privasi instance itu sendiri</li></ul></li><li> <code>PHANPY_DEFAULT_LANG</code> (opsional):<ul dir="auto"><li> Bahasa default adalah bahasa Inggris ( <code>en</code> ) jika tidak ditentukan.</li><li> Bahasa cadangan setelah beberapa metode deteksi (parameter kueri <code>lang</code> , kunci <code>lang</code> di <code>localStorage</code> , dan <code>navigator.language</code> )</li></ul></li><li> <code>PHANPY_LINGVA_INSTANCES</code> (opsional, daftar yang dipisahkan spasi, default: <code>lingva.phanpy.social [...hard-coded list of fallback instances]</code> ):<ul dir="auto"><li> Tentukan daftar instance yang dipisahkan spasi. Yang pertama akan digunakan sebagai default sebelum kembali ke instance berikutnya. Jika hanya ada 1 instance, berarti tidak ada fallback.</li><li> Dapat menentukan instance Lingva yang dihosting sendiri, didukung oleh lingva-translate atau lingva-api</li><li> Daftar instance fallback yang di-hardcode di <code>/.env</code></li><li><g-emoji class="g-emoji" alias="arrow_upper_right"> ↗️</g-emoji> Daftar contoh terjemahan lingva</li></ul></li><li> <code>PHANPY_IMG_ALT_API_URL</code> (opsional, tidak ada default):<ul dir="auto"><li> Titik akhir API untuk instance img-alt-api yang dihosting sendiri.</li><li> Jika tersedia, akan muncul pengaturan bagi pengguna untuk mengaktifkan generator deskripsi gambar di komposer. Dinonaktifkan secara default.</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> (opsional, tidak ada default):<ul dir="auto"><li> Kunci API untuk GIPHY. Lihat dokumen API.</li><li> Jika disediakan, akan muncul pengaturan bagi pengguna untuk mengaktifkan pemilih GIF di komposer. Dinonaktifkan secara default.</li><li> Ini tidak dihosting sendiri.</li></ul></li></ul><div class="markdown-heading" dir="auto"><h3> Hosting situs statis</h3></div><p dir="auto"> Coba telusuri online untuk "cara menghosting sendiri situs statis" karena ada banyak cara untuk melakukannya.</p><div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto"> Lingva-translate atau hosting lingva-api</h4></div><p dir="auto"> Lihat dokumentasi untuk lingva-translate atau lingva-api.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Penerapan komunitas</h2></div><p dir="auto"> Ini diselenggarakan sendiri oleh orang-orang hebat lainnya.</p><ul dir="auto"><li> ferengi.one oleh @david@weaknotes.com</li><li> halo.mookiesplace.com oleh @mookie@mookiesplace.com</li><li> phanpy.bauxite.tech oleh @b4ux1t3@hachyderm.io</li><li> phanpy.blaede.family oleh @cassidy@blaede.family</li><li> phanpy.crmbl.uk oleh @snail@crmbl.uk</li><li> phanpy.cz oleh @zdendys@mamutovo.cz</li><li> phanpy.fulda.social oleh @Ganneff@fulda.social</li><li> phanpy.gotosocial.social oleh @admin@gotosocial.social</li><li> phanpy.hear-me.social oleh @admin@hear-me.social</li><li> phanpy.mastodon.world oleh @ruud@mastodon.world</li><li> phanpy.mstdn.mx oleh @maop@mstdn.mx</li><li> phanpy.social.tchncs.de oleh @milan@social.tchncs.de</li><li> phanpy.tilde.zone oleh @ben@tilde.zone</li><li> phanpy.vmst.io oleh @vmstan@vmst.io</li><li> sosial.qrk.one oleh @kev@fosstodon.org</li></ul><blockquote><p dir="auto"> Catatan: Tambahkan milik Anda dengan membuat permintaan tarik. </p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Biaya</h2></div><p dir="auto"> Biaya yang diperlukan untuk menjalankan dan mengembangkan aplikasi web ini:</p><ul dir="auto"><li> Nama domain (.sosial): <strong>USD$23,18/tahun</strong> (USD$6,87 tahun pertama)</li><li> Tuan Rumah: Gratis</li><li> Pengembangan, desain, pemeliharaan: "Gratis" (Waktu saya yang berharga) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Maskot</h2></div><p dir="auto"> Phanpy adalah Pokémon tipe Tanah.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Pengelola + kontributor</h2></div><ul dir="auto"><li> Chee Aun (Mastodon) (Twitter)</li></ul><div class="markdown-heading" dir="auto"><h3> Relawan penerjemahan</h3></div><ul dir="auto"><li> alidsds11 (Arab)</li><li> alternatif (Korea)</li><li> BoFFire (Arab, Prancis, Kabyle)</li><li> Brawaru (Rusia)</li><li> cbasje (Belanda)</li><li> cbo92 (Perancis)</li><li> CDN (Cina Sederhana)</li><li> dannypsnl (Tradisional Tiongkok)</li><li> databio (Katalan)</li><li> Dizro (Italia)</li><li> Drift6944 (Ceko)</li><li> drydenwu (Tradisional Tiongkok)</li><li> elisarc (Perancis)</li><li> ElPamplina (Spanyol)</li><li> Fitik (Esperanto, Ibrani)</li><li> Freesia (Jepang)</li><li> hantu (Galisia)</li><li> hongminhee (Korea)</li><li> Hugoglyph (Esperanto, Spanyol)</li><li> isard (katalan)</li><li> kaliuwu (Polandia)</li><li> karlafej (Ceko)</li><li> katullo11 ​​(Italia)</li><li> Kytta (Jerman)</li><li> llun (Thailand)</li><li> lucasofchirst (Occitan, Portugis, Portugis, Brasil)</li><li> LukeHong (Tradisional Tiongkok)</li><li> marcin.kozinski (Polandia)</li><li> mkljczkk (Polandia)</li><li> mojosoeun (Korea)</li><li> moreal (Korea)</li><li> MrWillCom (Cina Sederhana)</li><li> nclm (Perancis)</li><li> pazpi (Italia)</li><li> gadis punkrock (Basque)</li><li> radecos (Perancis)</li><li> Razem (Ceko)</li><li> kode pixel nyata (Jerman)</li><li> rezahosseinzadeh (Persia)</li><li> rwmpelstilzchen (Esperanto, Ibrani)</li><li> Sadml (Rusia)</li><li> SadmL_AI (Rusia)</li><li> shuuji3 (Jepang)</li><li> Sky_NiniKo (Perancis)</li><li> Steffo99 (Italia)</li><li> Su5hicz (Ceko)</li><li> tferrermo (Spanyol)</li><li> tkbremnes (Bokmal Norwegia)</li><li> tux93 (Jerman)</li><li> Vaksin31. (Lithuania)</li><li> valtlai (Finlandia)</li><li> vasiriri (Polandia)</li><li> voyagercy (Tradisional Tiongkok)</li><li> xabi_itzultzaile (Basque)</li><li> xen4n (Ukraina)</li><li> xqueralt (Katalan)</li><li> ZiriSut (Kabyle)</li><li> zkreml (Ceko) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Latar Belakang</h2></div><p dir="auto"> Saya salah satu pengguna Twitter pertama. Twitter diluncurkan pada 15 Juli 2006. Saya bergabung pada Desember 2006 dan tweet pertama saya diposting pada 18 Desember 2006.</p><p dir="auto"> Saya tahu seperti apa awal mula Twitter. Itu menyenangkan.</p><p dir="auto"> Saat itu, saya membuat tiruan Twitter bernama "Twig" yang ditulis dengan Python dan Google App Engine. Saya hampir membuat klien desktop Twitter saya sendiri yang ditulis dalam Appcelerator Titanium. Saya memberikan salah satu pembicaraan terbaik saya tentang klien Twitter dalam konferensi mini. Saya membuat sesuatu yang disebut "Kolom Twitter", sebuah aplikasi web yang menampilkan daftar pengikut Anda, pengikut Anda, pengikut Anda, pengikut pengikut Anda, dan sebagainya. Pada tahun 2009, saya menulis postingan blog berjudul "Bagaimana Saya Memulai Twitter". Saya membuat dua tema untuk DestroyTwitter (klien desktop yang dibuat dengan Adobe Air oleh Jonnie Hallman) dan salah satunya disebut "Vimeo". Pada tahun 2013, saya menulis situs cadangan tweet saya sendiri dengan front-end untuk melihat tweet saya dan backend CouchDB untuk menyimpannya.</p><p dir="auto"> Sudah <strong>lebih dari 15 tahun</strong> .</p><p dir="auto"> Dan inilah saya. Membangun klien web Mastodon.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Klien web alternatif</h2></div><ul dir="auto"><li> Garpu Phanpy ↓<ul dir="auto"><li> Agora</li></ul></li><li> Pinafore (pensiun) - garpu ↓<ul dir="auto"><li> Tiang sinyal</li><li> sebelumnya</li></ul></li><li> kukuk+</li><li> sengi</li><li> Kotak sabun</li><li> Rusa - garpu ↓<ul dir="auto"><li> rusa.fedified.com</li></ul></li><li> dek mastodek</li><li> batang</li><li> terlalu besar</li><li> kotak sampah</li><li> pembuat status</li><li> bergading</li><li> Edisi Mastodon Glitch (frontend mandiri)</li><li> Mangan</li><li> Meja</li><li> Lagi... </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ?‍♂️ Pemberitahuan kepada semua pengembang klien media sosial lainnya</h2></div><p dir="auto"> Silakan salin ide dan eksperimen UI dari aplikasi ini. Menurut saya beberapa di antaranya cukup bagus dan akan sangat bagus jika lebih banyak aplikasi yang memilikinya.</p><p dir="auto"> Jika Anda bukan pengembang, beri tahu pengembang klien media sosial favorit Anda tentang aplikasi ini dan minta mereka menyalin ide dan eksperimen UI.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Lisensi</h2></div><p dir="auto"> MIT.</p> </div> <div class="zd_btn more_version_btn" data-more="Memperluas" data-less="Tutup">Memperluas</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">Informasi Tambahan</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">Versi</span> <span class="text"></span> </li> <li> <span class="title">Tipe</span> <a class="text" href="/id/category/list_228_1.html">Kode sumber lainnya</a> </li> <li> <span class="title">Waktu Pembaruan</span> <span class="text">2024-11-09</span> </li> <li> <span class="title">ukuran</span> <span class="text"></span> </li> <li> <span class="title">Bahasa</span> <span class="text">Bahasa Mandarin Sederhana</span> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Aplikasi Terkait</span> </div> <ul class="version_list grid gap_x6 gap_y6 grid_c2"> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Direkomendasikan untuk Anda</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/id/app/44151.html"><img src="https://images.downcodes.com/uploads/20230315/logo_641169e22e95f1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Bidi Film dan Televisi bdys versi Android"></a> <div class="content"> <h3><a href="/id/app/44151.html">Bidi Film dan Televisi bdys versi Android</a></h3> <div class="cate"> <a href="/id/category/list_297_1.html">Pemutaran video</a> </div> <div class="other"> <span>V2.1.7</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/39387.html"><img src="https://images.downcodes.com/uploads/20230216/logo_63edd21d622421.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Unduhan permainan Assault Lily"></a> <div class="content"> <h3><a href="/id/app/39387.html">Unduhan permainan Assault Lily</a></h3> <div class="cate"> <a href="/id/category/list_301_1.html">permainan peran</a> </div> <div class="other"> <span>v1.0.5</span> </div> </div> </li> <li> <a class="img_item" href="/id/download/28990.html"><img src="https://images.downcodes.com/uploads/20220919/logo_63281248401771.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Kode sumber sistem pembayaran pengetahuan丨Konten pendidikan online, realisasi pengetahuan berbayar丨Tanya Jawab Video, kustomisasi program mini kursus berbayar grafis H5"></a> <div class="content"> <h3><a href="/id/download/28990.html">Kode sumber sistem pembayaran pengetahuan丨Konten pendidikan online, realisasi pengetahuan berbayar丨Tanya Jawab Video, kustomisasi program mini kursus berbayar grafis H5</a></h3> <div class="cate"> <a href="/id/category/list_55_1.html">Kategori lainnya</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/id/app/45483.html"><img src="https://images.downcodes.com/uploads/20230317/logo_6413c6576e3f21.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Tanaman vs. Zombi Edisi Perjalanan ke Barat"></a> <div class="content"> <h3><a href="/id/app/45483.html">Tanaman vs. Zombi Edisi Perjalanan ke Barat</a></h3> <div class="cate"> <a href="/id/category/list_299_1.html">Teka-teki kasual</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/id/app/179136.html"><img src="https://images.downcodes.com/uploads/20240818/logo_66c1c8413413d1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="PVZ hybrid versi 2.3.5 versi menu bawaan"></a> <div class="content"> <h3><a href="/id/app/179136.html">PVZ hybrid versi 2.3.5 versi menu bawaan</a></h3> <div class="cate"> <a href="/id/category/list_299_1.html">Teka-teki kasual</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/176855.html"><img src="https://images.downcodes.com/uploads/20240628/logo_667e0d8fe35261.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Mod DLC Kebisingan Menara Pizza"></a> <div class="content"> <h3><a href="/id/app/176855.html">Mod DLC Kebisingan Menara Pizza</a></h3> <div class="cate"> <a href="/id/category/list_299_1.html">Teka-teki kasual</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/176584.html"><img src="https://images.downcodes.com/uploads/20240624/logo_6678eedab44bc1.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Ponsel Simulator Keluarga Rumah Blok Bahagia"></a> <div class="content"> <h3><a href="/id/app/176584.html">Ponsel Simulator Keluarga Rumah Blok Bahagia</a></h3> <div class="cate"> <a href="/id/category/list_307_1.html">Bisnis simulasi</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/176463.html"><img src="https://images.downcodes.com/uploads/20240622/logo_66764c7e969a71.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Perbaiki instalasi pelarian kereta bawah tanah kait"></a> <div class="content"> <h3><a href="/id/app/176463.html">Perbaiki instalasi pelarian kereta bawah tanah kait</a></h3> <div class="cate"> <a href="/id/category/list_309_1.html">penembakan penerbangan</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/178338.html"><img src="https://images.downcodes.com/uploads/20240731/logo_66a9c40e360431.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Permainan seluler BodyCam"></a> <div class="content"> <h3><a href="/id/app/178338.html">Permainan seluler BodyCam</a></h3> <div class="cate"> <a href="/id/category/list_309_1.html">penembakan penerbangan</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Informasi Terkait</span> <a href="/category/list_336_1.html">Semua</a> </div> <ul class="cate_list_template"> <li> <a href="/id/wz/212997.html"> <div class="text">Alamat website resmi Bidi Film dan Televisi</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/id/wz/212996.html"> <div class="text">Cara mengisi ulang Server Internasional Assault Lily</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/id/wz/212995.html"> <div class="text">Cara Memperbaiki Gagap di Stalker 2: Heart of Chornobyl</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/id/wz/212994.html"> <div class="text">Di mana Jus WRLD di Fortnite?</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/id/wz/212993.html"> <div class="text">Cara Memulai Ekspansi Wild Card di Star Wars Outlaws</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/id/wz/212992.html"> <div class="text">Beijing menambahkan lembaga penelitian dan pengembangan baru untuk meningkatkan keamanan kecerdasan buatan dan tata kelola pemerintahan</div> <span class="time">2024-11-22</span> </a> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Komentar Pengguna</span> </div> </div> </section> <footer class="footer_template"> <div class="w12_box"> <div class="clearfix"> <div class="l_item"> <img src="https://images.downcodes.com/newdown/images/down-logo-foot.png" alt=""> <div class="f_icon"> <a href="https://www.facebook.com/" title="facebook"></a> <a href="https://telegram.org/" title="telegram"></a> <a href="https://www.tiktok.com/" title="tiktok"></a> <a href="https://www.youtube.com/" title="youtube"></a> </div> </div> <div class="r_item"> <dl> <dt>Products & Services</dt> <dd><a href="javascript:;">Install APK</a></dd> <dd><a href="javascript:;">APK signature verification</a></dd> <dd><a href="javascript:;">APK Download Service</a></dd> </dl> <dl> <dt>Company</dt> <dd><a href="javascript:;">Developer Console</a></dd> <dd><a href="javascript:;">Submit APK</a></dd> <dd><a href="javascript:;">Monetization of traffic through downcodes</a></dd> </dl> <dl> <dt>Legal</dt> <dd><a href="javascript:;">About us</a></dd> <dd><a href="javascript:;">Contact Us</a></dd> <dd><a href="javascript:;">Cooperation</a></dd> </dl> </div> </div> <p>© 2006-2024Copyright All rights reserves</p> </div> </footer> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//tongji.zhangwan.net/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D64MDP2H8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5D64MDP2H8'); </script> </body> <script src="/newdown/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/lazy.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/viewer.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/index.js" type="text/javascript" charset="utf-8"></script> <script> commonMethod.appdetail(); function phpLoadPage(){ this.kid = ''; this.lang = 'id'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = 'Klik untuk melihat lebih banyak'; $(".loadmore_item").click(function(){ if(_this.resultLen >= 10){ _this.pageIndex = _this.pageIndex + 1 $(".loadmore_item").html("loading...") $.ajax({ async: true, url: _this.requestUrl, type: 'GET', data : { page : _this.pageIndex,kid:_this.kid,lang:_this.lang }, dataType: 'json', timeout: 30000, success: function(result){ _this.resultLen = result.newArray.length if(_this.resultLen < 10){ $(".loadmore_item").html("Reached the end...") }else{ $(".loadmore_item").html(`${moreComment}`) } $(".comment_template").append(_this.mergeHtml(result.newArray)); }, error: function(xhr, status){ console.log('An error occurred...'); }, complete: function(xhr, status){ console.log('Ajax request has ended...'); } }) } }) } phpLoadPage.prototype.mergeHtml = function(data){ var textHtml = ""; var lang = 'id'; let fromto = 'Berasal dari'; for(var i=0;i<data.length;i++) { var item= data[i]; var lsHtml = item.mark == 1 && item.status == 1 ? `<span class="tip">${fromto}</span><a href="/${lang}/ask/${item.aid}.html">${item.title}</a>` : ''; textHtml += `<dd> <span class="img_item"> <img src="${item.headlogo}" alt="${item.adduser}"> </span> <div class="main"> <div class="title"> <span>${item.adduser}</span> ${lsHtml} <span>${item.showtime}</span> </div> <div>${item.content}</div> </div> </dd>`; } return textHtml; } new phpLoadPage().init() </script> </html>