Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen
phanpy

Phanpy

Minimalistischer Mastodon-Webclient mit eigener Meinung.

Schicker Screenshot

?️ Aussprache : /fænpi/ ( FAN-pee ) ? Hören

Dies ist ein alternativer Web-Client für Mastodon.

  • ? Produktion : https://phanpy.social
    • production
    • brechen seltener
    • Langsamere Korrekturen, sofern nicht kritisch
  • ?️ Entwicklung : https://dev.phanpy.social
    • main
    • Vielleicht sehe ich früher neue coole Sachen
    • kann häufiger kaputt gehen
    • kann auch viel schneller behoben werden

? Folgen Sie @phanpy auf Mastodon für Updates ✨

Alles ist nach meinem Geschmack und meiner Vision entworfen und konstruiert. Für mich ist dies ein persönliches Nebenprojekt, um etwas über Mastodon zu lernen und mit neuen UI/UX-Ideen zu experimentieren.

Merkmale

  • ? Mehrere Konten
  • ? Pop-Out/In des Fensters „Erstellen“.
  • ? Hell/Dunkel/Auto-Thema
  • ? Gruppierte Benachrichtigungen
  • ? Verschachtelter Kommentarthread
  • ? Nicht gesendeter Wiederherstellungsentwurf
  • ? Steigert Carousel™️
  • ⚡ Shortcuts™️ mit Ansichtsmodi wie mehrspaltig oder Tab-Leiste
  • #️⃣ Zeitleiste mit mehreren Hashtags

Designentscheidungen

  • Statusaktionen (Antworten, Boosten, Favorit, Lesezeichen usw.) sind standardmäßig ausgeblendet .
    Sie erscheinen nur auf der einzelnen Statusseite. Dies dient dazu, Unordnung und Ablenkung zu reduzieren. Dies könnte zu einem geringeren Engagement führen, aber wir jagen hier nicht nach Zahlen.
  • Boost wird durch das Raketensymbol dargestellt .
    Das grüne Doppelpfeilsymbol (Retweet für Twitter) sieht für den Begriff „Boost“ nicht richtig aus. Grüne Rakete sieht seltsam aus, also verwende ich Lila.
  • Anstelle des vollständigen Kontobenutzernamens ( @username@instance ) werden in Zeitleisten kurze Benutzernamen ( @username ) angezeigt .
    Obwohl in der Richtlinie erwähnt wird, dass „Dezentralisierung für den Benutzer transparent sein muss“, denke ich nicht, dass wir sie jedes Mal aufs Neue unterdrücken sollten. Es gibt auch einige Bedenken hinsichtlich der Barrierefreiheit des Bildschirmlesegeräts mit dem vollständigen Benutzernamen, obwohl diese Web-App leider noch nicht zugänglich ist.
  • Keine automatische Wiedergabe für Video/GIF/was auch immer in der Timeline .
    Die Zeitleiste ist bereits ein riesiges Durcheinander, da viele Menschen, Marken, Nachrichten und Medien versuchen, Ihre Aufmerksamkeit zu erregen. Machen wir es nicht noch schlimmer. (Die aktuelle Ausnahme wären jetzt animierte Emojis.)
  • Hash-basierte URLs .
    Diese Web-App ist nicht als vollwertiger Ersatz für das bestehende Frontend von Mastodon gedacht. Es gibt kein SEO, keine Datenbank, keine serverlosen oder lang laufenden Server. Ich könnte mich eines Tages irren.

Subtile UI-Implementierungen

Anzeige des Benutzernamens

Anzeige des Benutzernamens

  • Auf der Zeitleiste wird der Benutzername als [NAME] @[username] angezeigt.
  • Schließen Sie für @[username] immer den Instanzdomänennamen aus.
  • Wenn der [NAME] genauso aussieht wie der @[username] , wird auch der @[username] ausgeschlossen.

Steigert das Karussell

Steigert das Karussell

  • Wenn die Anzahl der Boosts aus den abgerufenen Beiträgen (z. B. 20 Beiträge pro Abruf) mehr als ein Viertel der Gesamtbeiträge oder mehr als drei aufeinanderfolgende Boosts beträgt, wird die Boost-Karussell-Benutzeroberfläche ausgelöst.
  • Wenn die Anzahl der Boosts mehr als drei Viertel der Gesamtbeiträge beträgt, wird die Benutzeroberfläche des Boost-Karussells am Ende der Gesamtzahl der abgerufenen Beiträge (pro „Seite“) eingefügt.
  • Andernfalls wird die Boost-Karussell-Benutzeroberfläche zwischen den Beiträgen eingefügt.

Thread-Nummernschild (z. B. Thread 1/X)

Fadennummernabzeichen

  • Überprüfen Sie jeden Beitrag auf inReplyToId aus dem Cache oder zusätzliche API-Anfragen, bis der Stammbeitrag gefunden wird.
  • Wenn ein Stammbeitrag gefunden wird, zeigt Badge die Indexnummer des Beitrags im Thread an.
  • Beschränken Sie die Anzahl der API-Anfragen auf 3, da der Root-Beitrag möglicherweise sehr alt oder der Thread sehr lang ist.
  • Wenn die Indexnummer nicht gefunden werden konnte, zeigt Badge Thread ohne die Nummer an.

Hashtag-Stuffing kollabiert

Hashtag-Stuffing kollabiert

  • Der erste Absatz des Beitragsinhalts mit mehr als 3 Hashtags wird auf maximal 3 Zeilen reduziert.
  • Nachfolgende Absätze nach dem ersten Absatz mit mehr als 3 Hashtags werden auf eine Zeile reduziert.
  • Angrenzende Absätze mit mehr als einem Hashtag nach der Reduzierung der Absätze werden auf eine Zeile reduziert.
  • Wenn sich um oder zwischen den Hashtags Text befindet, werden diese nicht ausgeblendet.
  • Reduzierte Hashtags werden am Ende mit ... angehängt.
  • Sie sind außerdem leicht ausgeblendet, um visuelles Rauschen zu reduzieren.
  • Wenn Sie die Beitragsansicht öffnen, werden die Hashtags nicht minimiert angezeigt.

Gefilterte Beiträge

  • Durch „Vollständig ausblenden“ gefilterte Beiträge werden ausgeblendet, ohne dass eine Benutzeroberfläche dies anzeigen könnte.
  • Durch „Mit Warnung ausblenden“ gefilterte Beiträge werden teilweise ausgeblendet und zeigen den Filternamen und den Namen des Autors an.
    • Der Inhalt kann teilweise angezeigt werden, indem Sie mit der Maus über den Beitrag fahren, wobei der Tooltip den Beitragstext anzeigt.
    • Wenn Sie darauf klicken, wird die Beitragsseite geöffnet.
    • Wenn Sie lange darauf drücken oder mit der rechten Maustaste darauf klicken, wird der Beitrag mit einer unteren Benutzeroberfläche angezeigt.
    • Auf dem Boost-Karussell werden sie bis zum Ende des Karussells sortiert.

Entwicklung

Voraussetzungen: Node.js 18+

  • npm install – Abhängigkeiten installieren
  • npm run dev – Entwicklungsserver und messages:extract ( clean + „watch“) parallel starten
  • npm run build – Build für die Produktion
  • npm run preview – Vorschau des Produktions-Builds
  • npm run fetch-instances – Instanzenliste von joinmastodon.org/servers abrufen und in src/data/instances.json speichern
  • npm run sourcemap – Führen Sie source-map-explorer auf dem Produktions-Build aus
  • npm run messages:extract – Extrahieren Sie Nachrichten aus Quelldateien und aktualisieren Sie die lokalen Nachrichtenkataloge

Tech-Stack

  • Vite – Build-Tool
  • Preact – UI-Bibliothek
  • Valtio - Staatsmanagement
  • React Router – Routing
  • masto.js – Mastodon API-Client
  • Iconify – Symbolbibliothek
    • MingCute-Symbole
  • Lingui - Internationalisierung
  • Vanilla CSS – Ja, ich bin altmodisch.

Einige davon können sich in Zukunft ändern. Die Front-End-Welt verändert sich ständig.

Internationalisierung

Alle Übersetzungen sind als gettext .po Dateien im Ordner src/locales verfügbar. Die Standardsprache ist Englisch ( en ). Zur Pluralisierung werden CLDR-Pluralregeln verwendet. RTL-Sprachen (von rechts nach links) werden ebenfalls mit der richtigen Textrichtung, Symboldarstellung und dem richtigen Layout unterstützt.

Beim Laden der Seite wird die Standardsprache über diese Methoden in der Reihenfolge erkannt (erster Treffer wird verwendet):

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

Benutzer können die Sprache in den Einstellungen ändern, wodurch der localStorage -Schlüssel lang festgelegt wird.

Leitfaden für Übersetzer

*Inspiriert durch Translate WordPress Handbook:

  • Übersetzen Sie nicht wörtlich, sondern organisch.
  • Versuchen Sie, das gleiche Maß an Formalität (oder Informalität) beizubehalten.
  • Verwenden Sie keine umgangssprachlichen oder zielgruppenspezifischen Begriffe
  • Achten Sie auf Platzhalter für Variablen. Viele Zeichenfolgen haben Platzhalter, z. B. {account} (Variable), <0>{name} (Tag mit Variable) und # (Nummernplatzhalter).
  • Auslassungspunkte (…) sind beabsichtigt. Entfernen Sie es nicht.
    • Nielsen Norman Group: „Fügen Sie Ellipsen in den Befehlstext ein, um anzuzeigen, wann weitere Informationen erforderlich sind“
    • Apple Human Interface-Richtlinien: „Fügen Sie ein Auslassungszeichen an die Beschriftung eines Menüelements an, wenn für die Aktion weitere Informationen erforderlich sind, bevor sie abgeschlossen werden kann. Das Auslassungszeichen (…) signalisiert, dass Benutzer Informationen eingeben oder zusätzliche Auswahlmöglichkeiten treffen müssen, normalerweise in einer anderen Ansicht.“
    • Windows-App-Entwicklung: „Ellipsen bedeuten Unvollständigkeit.“
  • Datumszeitstempel, Datumsbereiche, Zahlen, Sprachnamen und Textsegmentierung werden von der ECMAScript Internationalization API verarbeitet.
    • Intl.DateTimeFormat – z. B. „8. August“, „08.08.2024“
    • Intl.RelativeTimeFormat – z. B. „vor 2 Tagen“, „in 2 Tagen“
    • Intl.NumberFormat – z. B. „1.000“, „10K“
    • Intl.DisplayNames – z. B. „Englisch“ ( en ) im traditionellen Chinesisch ( zh-Hant ) ist „英文“
    • Intl.Locale (mit Polyfill für ältere Browser)
    • Intl.Segmenter (mit Polyfill für ältere Browser)

Technische Hinweise

  • IDs für Zeichenfolgen werden automatisch generiert und nicht explizit definiert. Zu den Vorteilen gehört die Vermeidung des Problems der Benennung von Dingen und die Vermeidung von Duplikaten.
    • Explizite IDs könnten in Zukunft eingeführt werden, wenn sich Anforderungen und Prioritäten ändern. Die Bibliothek (Lingui) ermöglicht beides.
    • Bitte melden Sie Probleme, wenn bestimmte Zeichenfolgen je nach Kontext, Kultur oder Region unterschiedlich übersetzt werden.
  • Für Push-Benachrichtigungen gibt es keine Zeichenfolgen. Die Sprache wird auf dem Instanzserver eingestellt.
  • Native HTML-Datumsauswahlfunktionen, z. B. folgen immer dem Gebietsschema des Systems und nicht dem vom Benutzer festgelegten Gebietsschema.
  • „ALT“ im ALT-Badge ist nicht übersetzt. Es dient als sprachübergreifend erkennbarer Standard.
  • Benutzerdefinierte Emoji-Namen sind nicht lokalisiert, daher funktionieren Suchvorgänge nicht für nicht-englische Sprachen.
  • Die GIPHY-API unterstützt eine Liste von Sprachen für die Suche.
  • Die Unicode-Rechts-nach-Links-Markierung (RLM) ( U+200F , ‏ ) muss möglicherweise für gemischten RTL/LTR-Text verwendet werden, insbesondere für das </code> -Element ( <code>document.title</code> ).</li><li> Bei der Entwicklung gibt es ein zusätzliches <code>pseudo-LOCALE</code> Gebietsschema, das für die Pseudolokalisierung verwendet wird. Es dient zum Testen und wird nicht in der Produktion angezeigt.</li><li> Beim Erstellen für die Produktion werden die Katalogmeldungen auf Englisch ( <code>en</code> ) nicht separat gebündelt. Andere Gebietsschemas werden als separate Dateien gebündelt und bei Bedarf geladen. Dadurch wird sichergestellt, dass <code>en</code> immer als Fallback verfügbar ist.</li></ul><div class="markdown-heading" dir="auto"><h3> Freiwillige Übersetzungen</h3></div><p dir="auto"> Übersetzungen werden auf Crowdin verwaltet. Sie können helfen, indem Sie ehrenamtlich Übersetzungen anbieten.</p><p dir="auto"> Lesen Sie die Einführungsdokumentation, um loszulegen.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Selbsthosting</h2></div><p dir="auto"> Dies ist eine <strong>rein statische Web-App</strong> . Sie können es überall hosten, wo Sie möchten.</p><p dir="auto"> Zwei Möglichkeiten (wählen Sie eine):</p><div class="markdown-heading" dir="auto"><h3> Einfacher Weg</h3></div><p dir="auto"> Gehen Sie zu „Releases“ und laden Sie die neueste Version <code>phanpy-dist.zip</code> oder <code>phanpy-dist.tar.gz</code> herunter. Es ist vorgefertigt, sodass keine Installations-/Build-Befehle ausgeführt werden müssen. Extrahieren Sie es. Stellen Sie den Ordner mit den extrahierten Dateien bereit.</p><div class="markdown-heading" dir="auto"><h3> Maßgeschneiderte Art und Weise</h3></div><p dir="auto"> Erfordert Node.js.</p><p dir="auto"> Laden Sie dieses Repository herunter oder <code>git clone</code> . Verwenden Sie <code>production</code> für <em>stabile</em> Versionen, <code>main</code> für <em>die neuesten</em> . Erstellen Sie es, indem Sie <code>npm run build</code> ausführen (nach <code>npm install</code> ). Stellen Sie den <code>dist</code> -Ordner bereit.</p><p dir="auto"> Die Anpassung kann durch die Übergabe von Umgebungsvariablen an den Build-Befehl erfolgen. Beispiele: </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"> Es ist auch möglich, sie in der <code>.env</code> Datei festzulegen.</p><p dir="auto"> Verfügbare Variablen:</p><ul dir="auto"><li> <code>PHANPY_CLIENT_NAME</code> (optional, Standard: <code>Phanpy</code> ) betrifft:<ul dir="auto"><li> Titel der Webseite, angezeigt im Browserfenster oder Tab-Titel</li><li> App-Titel wird bei Installation als PWA auf dem Startbildschirm, im macOS-Dock, in der Windows-Taskleiste usw. angezeigt</li><li> Titel der OpenGraph-Karte, wenn sie in sozialen Netzwerken geteilt wird</li><li> Clientname, wenn die App für die Authentifizierung registriert wird und als Client angezeigt wird, der in Beiträgen in einigen Apps/Clients verwendet wird</li></ul></li><li> <code>PHANPY_WEBSITE</code> (optional, aber empfohlen, Standard: <code>https://phanpy.social</code> ) betrifft:<ul dir="auto"><li> Kanonische URL der Website</li><li> OpenGraph-Karten-URL, wenn sie in sozialen Netzwerken geteilt wird</li><li> Stammpfad für das OpenGraph-Kartenbild</li><li> Client-URL, wenn die App für die Authentifizierung registriert wird und als Client angezeigt wird, der in Beiträgen in einigen Apps/Clients verwendet wird</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE</code> (optional, keine Standardeinstellungen):<ul dir="auto"><li> zB 'mastodon.social', ohne <code>https://</code></li><li> Standardinstanz für die Anmeldung</li><li> Beim Anmelden wird der Benutzer sofort zur Authentifizierungsseite der Instanz weitergeleitet, anstatt die Instanz-URL manuell eingeben und absenden zu müssen</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL</code> (optional, keine Standardeinstellungen):<ul dir="auto"><li> URL der Instanzregistrierungsseite</li><li> ZB <code>https://mastodon.social/auth/sign_up</code></li></ul></li><li> <code>PHANPY_PRIVACY_POLICY_URL</code> (optional, standardmäßig die Datenschutzrichtlinie der offiziellen Instanz):<ul dir="auto"><li> URL der Seite mit den Datenschutzrichtlinien</li><li> Kann die eigene Datenschutzrichtlinie der Instanz angeben</li></ul></li><li> <code>PHANPY_DEFAULT_LANG</code> (optional):<ul dir="auto"><li> Die Standardsprache ist Englisch ( <code>en</code> ), sofern nicht angegeben.</li><li> Fallback-Sprache nach mehreren Erkennungsmethoden ( <code>lang</code> Abfrageparameter, <code>lang</code> Schlüssel in <code>localStorage</code> und <code>navigator.language</code> )</li></ul></li><li> <code>PHANPY_LINGVA_INSTANCES</code> (optional, durch Leerzeichen getrennte Liste, Standard: <code>lingva.phanpy.social [...hard-coded list of fallback instances]</code> ):<ul dir="auto"><li> Geben Sie eine durch Leerzeichen getrennte Liste von Instanzen an. Zuerst wird als Standard verwendet, bevor auf die nachfolgenden Instanzen zurückgegriffen wird. Wenn es nur eine Instanz gibt, bedeutet dies, dass kein Fallback vorhanden ist.</li><li> Kann eine selbstgehostete Lingva-Instanz angeben, die entweder von lingva-translate oder lingva-api unterstützt wird</li><li> Liste der in <code>/.env</code> fest codierten Fallback-Instanzen</li><li><g-emoji class="g-emoji" alias="arrow_upper_right"> ↗️</g-emoji> Liste der lingva-translate-Instanzen</li></ul></li><li> <code>PHANPY_IMG_ALT_API_URL</code> (optional, keine Standardeinstellungen):<ul dir="auto"><li> API-Endpunkt für selbstgehostete Instanz von img-alt-api.</li><li> Falls bereitgestellt, wird eine Einstellung angezeigt, mit der Benutzer den Bildbeschreibungsgenerator im Composer aktivieren können. Standardmäßig deaktiviert.</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> (optional, keine Standardeinstellungen):<ul dir="auto"><li> API-Schlüssel für GIPHY. Siehe API-Dokumente.</li><li> Falls angegeben, wird eine Einstellung angezeigt, mit der Benutzer die GIF-Auswahl im Composer aktivieren können. Standardmäßig deaktiviert.</li><li> Dies ist nicht selbst gehostet.</li></ul></li></ul><div class="markdown-heading" dir="auto"><h3> Statisches Site-Hosting</h3></div><p dir="auto"> Versuchen Sie es mit einer Online-Suche nach „So hosten Sie statische Websites selbst“, da es dafür viele Möglichkeiten gibt.</p><div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto"> Lingva-Translate- oder Lingva-API-Hosting</h4></div><p dir="auto"> Siehe Dokumentation für lingva-translate oder lingva-api.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Community-Bereitstellungen</h2></div><p dir="auto"> Diese werden von anderen wunderbaren Leuten selbst veranstaltet.</p><ul dir="auto"><li> ferengi.one von @david@weaknotes.com</li><li> halo.mookiesplace.com von @mookie@mookiesplace.com</li><li> phanpy.bauxite.tech von @b4ux1t3@hachyderm.io</li><li> phanpy.blaede.family von @cassidy@blaede.family</li><li> phanpy.crmbl.uk von @snail@crmbl.uk</li><li> phanpy.cz von @zdendys@mamutovo.cz</li><li> phanpy.fulda.social von @Ganneff@fulda.social</li><li> phanpy.gotosocial.social von @admin@gotosocial.social</li><li> phanpy.hear-me.social von @admin@hear-me.social</li><li> phanpy.mastodon.world von @ruud@mastodon.world</li><li> phanpy.mstdn.mx von @maop@mstdn.mx</li><li> phanpy.social.tchncs.de von @milan@social.tchncs.de</li><li> phanpy.tilde.zone von @ben@tilde.zone</li><li> phanpy.vmst.io von @vmstan@vmst.io</li><li> social.qrk.one von @kev@fosstodon.org</li></ul><blockquote><p dir="auto"> Hinweis: Fügen Sie Ihre hinzu, indem Sie eine Pull-Anfrage erstellen. </p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Kosten</h2></div><p dir="auto"> Kosten für den Betrieb und die Entwicklung dieser Web-App:</p><ul dir="auto"><li> Domainname (.social): <strong>23,18 USD/Jahr</strong> (6,87 USD im 1. Jahr)</li><li> Hosting: Kostenlos</li><li> Entwicklung, Design, Wartung: „Kostenlos“ (meine kostbare Zeit) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Maskottchen</h2></div><p dir="auto"> Phanpy ist ein Boden-Pokémon.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Betreuer + Mitwirkende</h2></div><ul dir="auto"><li> Chee Aun (Mastodon) (Twitter)</li></ul><div class="markdown-heading" dir="auto"><h3> Freiwillige Übersetzer</h3></div><ul dir="auto"><li> alidsds11 (Arabisch)</li><li> Alternative (Koreanisch)</li><li> BoFFire (Arabisch, Französisch, Kabyle)</li><li> Brawaru (Russisch)</li><li> cbasje (Niederländisch)</li><li> cbo92 (Französisch)</li><li> CDN (vereinfachtes Chinesisch)</li><li> dannypsnl (traditionelles Chinesisch)</li><li> databio (Katalanisch)</li><li> Dizro (Italienisch)</li><li> Drift6944 (Tschechisch)</li><li> drydenwu (traditionelles Chinesisch)</li><li> elissar (Französisch)</li><li> ElPamplina (Spanisch)</li><li> Fitik (Esperanto, Hebräisch)</li><li> Freeesia (Japanisch)</li><li> ghose (Galizisch)</li><li> hongminhee (Koreanisch)</li><li> Hugoglyphe (Esperanto, Spanisch)</li><li> isard (Katalanisch)</li><li> kaliuwu (Polnisch)</li><li> karlafej (Tschechisch)</li><li> katullo11 ​​(Italienisch)</li><li> Kytta (Deutsch)</li><li> llun (Thai)</li><li> lucasofchirst (Okkitanisch, Portugiesisch, Portugiesisch, Brasilianisch)</li><li> LukeHong (traditionelles Chinesisch)</li><li> marcin.kozinski (Polnisch)</li><li> mkljczkk (Polnisch)</li><li> mojosoeun (Koreanisch)</li><li> moreal (Koreanisch)</li><li> MrWillCom (Chinesisch vereinfacht)</li><li> nclm (Französisch)</li><li> pazpi (Italienisch)</li><li> punkrockgirl (Baskisch)</li><li> radecos (Französisch)</li><li> Razem (Tschechisch)</li><li> Realpixelcode (Deutsch)</li><li> rezahosseinzadeh (Persisch)</li><li> rwmpelstilzchen (Esperanto, Hebräisch)</li><li> SadmL (Russisch)</li><li> SadmL_AI (Russisch)</li><li> shuuji3 (Japanisch)</li><li> Sky_NiniKo (Französisch)</li><li> Steffo99 (Italienisch)</li><li> Su5hicz (Tschechisch)</li><li> tferrermo (Spanisch)</li><li> tkbremnes (norwegisches Bokmal)</li><li> tux93 (Deutsch)</li><li> Vac31. (Litauisch)</li><li> valtlai (Finnisch)</li><li> vasiriri (Polnisch)</li><li> Voyagercy (traditionelles Chinesisch)</li><li> xabi_itzultzaile (Baskisch)</li><li> xen4n (Ukrainisch)</li><li> xqueralt (Katalanisch)</li><li> ZiriSut (Kabyle)</li><li> zkreml (Tschechisch) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Hintergrundgeschichte</h2></div><p dir="auto"> Ich bin einer der ersten Twitter-Nutzer. Twitter wurde am 15. Juli 2006 gestartet. Ich bin im Dezember 2006 beigetreten und mein erster Tweet wurde am 18. Dezember 2006 gepostet.</p><p dir="auto"> Ich weiß, wie früh Twitter aussieht. Es hat Spaß gemacht.</p><p dir="auto"> Damals habe ich einen Twitter-Klon namens „Twig“ erstellt, der in Python und Google App Engine geschrieben wurde. Ich habe fast meinen eigenen Twitter-Desktop-Client erstellt, der in Appcelerator Titanium geschrieben wurde. Einen meiner besten Vorträge über den Twitter-Client habe ich in einer Minikonferenz gehalten. Ich habe dieses Ding namens „Twitter Columns“ erstellt, eine Web-App, die Ihre Follower-Liste, die Follower Ihrer Follower, Ihre Follower, die Follower Ihrer Follower usw. anzeigt. Im Jahr 2009 schrieb ich einen Blogbeitrag mit dem Titel „Wie ich mit Twitter angefangen habe“. Ich habe zwei Themes für DestroyTwitter (einen Desktop-Client, der mit Adobe Air von Jonnie Hallman erstellt wurde) erstellt und eines davon heißt „Vimeo“. Im Jahr 2013 habe ich meine eigene Tweets-Backup-Site mit einem Frontend zum Anzeigen meiner Tweets und einem CouchDB-Backend zum Speichern dieser erstellt.</p><p dir="auto"> Es ist <strong>mehr als 15 Jahre</strong> her.</p><p dir="auto"> Und hier bin ich. Erstellen eines Mastodon-Webclients.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Alternative Web-Clients</h2></div><ul dir="auto"><li> Phanpy-Gabeln ↓<ul dir="auto"><li> Agora</li></ul></li><li> Schürze (im Ruhestand) – Gabeln ↓<ul dir="auto"><li> Semaphor</li><li> Enafore</li></ul></li><li> Kuckuck+</li><li> Sengi</li><li> Seifenkiste</li><li> Elch - Gabeln ↓<ul dir="auto"><li> elk.fedified.com</li></ul></li><li> Mastodeck</li><li> Badehosen</li><li> Tooty</li><li> Katzentoilette</li><li> Statuer</li><li> Stoßzähne</li><li> Mastodon Glitch Edition (eigenständiges Frontend)</li><li> Mangan</li><li> Der Schreibtisch</li><li> Mehr... </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ?‍♂️ Hinweis für alle anderen Social-Media-Client-Entwickler</h2></div><p dir="auto"> Bitte kopieren Sie die UI-Ideen und Experimente aus dieser App. Ich denke, einige davon sind ziemlich gut und es wäre großartig, wenn mehr Apps sie hätten.</p><p dir="auto"> Wenn Sie kein Entwickler sind, informieren Sie bitte Ihre bevorzugten Social-Media-Client-Entwickler über diese App und bitten Sie sie, die Ideen und Experimente zur Benutzeroberfläche zu kopieren.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Lizenz</h2></div><p dir="auto"> MIT.</p> </div> <div class="zd_btn more_version_btn" data-more="Expandieren" data-less="Zusammenklappen">Expandieren</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">Zusätzliche Informationen</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">Version</span> <span class="text"></span> </li> <li> <span class="title">Typ</span> <a class="text" href="/de/category/list_228_1.html">Anderer Quellcode</a> </li> <li> <span class="title">Aktualisierungszeit</span> <span class="text">2024-11-09</span> </li> <li> <span class="title">Größe</span> <span class="text"></span> </li> <li> <span class="title">Sprache</span> <span class="text">Vereinfachtes Chinesisch</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">Ähnliche Anwendungen</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">Empfohlen für Sie</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/de/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 and Television bdys Android-Version"></a> <div class="content"> <h3><a href="/de/app/44151.html">Bidi Film and Television bdys Android-Version</a></h3> <div class="cate"> <a href="/de/category/list_297_1.html">Videowiedergabe</a> </div> <div class="other"> <span>V2.1.7</span> </div> </div> </li> <li> <a class="img_item" href="/de/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="Assault Lily-Spiel herunterladen"></a> <div class="content"> <h3><a href="/de/app/39387.html">Assault Lily-Spiel herunterladen</a></h3> <div class="cate"> <a href="/de/category/list_301_1.html">Rollenspiel</a> </div> <div class="other"> <span>v1.0.5</span> </div> </div> </li> <li> <a class="img_item" href="/de/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="Quellcode des Wissenszahlungssystems, Online-Bildungsinhalte, bezahlte Wissensrealisierung, Video-Q&A-Grafik, kostenpflichtiger Kurs, Miniprogramm-Anpassung H5"></a> <div class="content"> <h3><a href="/de/download/28990.html">Quellcode des Wissenszahlungssystems, Online-Bildungsinhalte, bezahlte Wissensrealisierung, Video-Q&A-Grafik, kostenpflichtiger Kurs, Miniprogramm-Anpassung H5</a></h3> <div class="cate"> <a href="/de/category/list_55_1.html">Andere Kategorien</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/de/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="Plants vs. Zombies Westward Journey Edition"></a> <div class="content"> <h3><a href="/de/app/45483.html">Plants vs. Zombies Westward Journey Edition</a></h3> <div class="cate"> <a href="/de/category/list_299_1.html">Lässiges Puzzle</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/de/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 Version 2.3.5 integrierte Menüversion"></a> <div class="content"> <h3><a href="/de/app/179136.html">PVZ Hybrid Version 2.3.5 integrierte Menüversion</a></h3> <div class="cate"> <a href="/de/category/list_299_1.html">Lässiges Puzzle</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/de/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="Pizza Tower Noise DLC Mod"></a> <div class="content"> <h3><a href="/de/app/176855.html">Pizza Tower Noise DLC Mod</a></h3> <div class="cate"> <a href="/de/category/list_299_1.html">Lässiges Puzzle</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/de/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="Happy Block House Family Simulator Mobile"></a> <div class="content"> <h3><a href="/de/app/176584.html">Happy Block House Family Simulator Mobile</a></h3> <div class="cate"> <a href="/de/category/list_307_1.html">Simuliertes Geschäft</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/de/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="Reparieren Sie die U-Bahn-Fluchtinstallation des Hakens"></a> <div class="content"> <h3><a href="/de/app/176463.html">Reparieren Sie die U-Bahn-Fluchtinstallation des Hakens</a></h3> <div class="cate"> <a href="/de/category/list_309_1.html">Flugschießen</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/de/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="BodyCam-Handyspiel"></a> <div class="content"> <h3><a href="/de/app/178338.html">BodyCam-Handyspiel</a></h3> <div class="cate"> <a href="/de/category/list_309_1.html">Flugschießen</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">Ähnliche Nachrichten</span> <a href="/category/list_336_1.html">Alle</a> </div> <ul class="cate_list_template"> <li> <a href="/de/wz/212997.html"> <div class="text">Offizielle Website-Adresse von Bidi Film and Television</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/de/wz/212996.html"> <div class="text">So laden Sie den Assault Lily International Server auf</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/de/wz/212995.html"> <div class="text">So beheben Sie das Stottern in Stalker 2: Heart of Chornobyl</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/de/wz/212994.html"> <div class="text">Wo ist Juice WRLD in Fortnite?</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/de/wz/212993.html"> <div class="text">So starten Sie die Wildcard-Erweiterung in Star Wars Outlaws</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/de/wz/212992.html"> <div class="text">Peking fügt eine neue Forschungs- und Entwicklungseinrichtung hinzu, um die Sicherheit und das Governance-Layout der künstlichen Intelligenz zu verbessern</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">Benutzerkommentare</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 = 'de'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = 'Klicken, um mehr zu laden'; $(".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 = 'de'; let fromto = 'Kommt von'; 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>