Inicio>Relacionado con la programación>Otro código fuente
Descargar
fanpy

fanpy

Cliente web minimalista y obstinado de Mastodon.

captura de pantalla elegante

?️ Pronunciación : /fænpi/ ( FAN-pee ) ? Escuchar

Este es un cliente web alternativo para Mastodon.

  • ? Producción : https://phanpy.social
    • rama production
    • romper con menos frecuencia
    • correcciones más lentas a menos que sean críticas
  • ?️ Desarrollo : https://dev.phanpy.social
    • rama main
    • Puede que veamos cosas interesantes antes
    • puede romperse más a menudo
    • también se puede arreglar mucho más rápido

? Sigue a @phanpy en Mastodon para recibir actualizaciones ✨

Todo está diseñado y fabricado siguiendo mi gusto y visión. Este es un proyecto paralelo personal para aprender sobre Mastodon y experimentar con nuevas ideas de UI/UX.

Características

  • ? Varias cuentas
  • ? Ventana emergente/entrada de redacción
  • ? Tema claro/oscuro/automático
  • ? Notificaciones agrupadas
  • ? Hilo de comentarios anidados
  • ? Recuperación de borrador no enviado
  • ? Impulsa el carrusel™️
  • ⚡ Accesos directos™️ con modos de visualización como varias columnas o barra de pestañas
  • #️⃣ Línea de tiempo con múltiples hashtags

Decisiones de diseño

  • Las acciones de estado (responder, impulsar, favorito, marcador, etc.) están ocultas de forma predeterminada .
    Sólo aparecen en la página de estado individual. Esto es para reducir el desorden y la distracción. Puede resultar en una menor participación, pero aquí no estamos persiguiendo números.
  • Boost está representado con el icono del cohete .
    El ícono de doble flecha verde (retwittear para Twitter) no parece correcto para el término "impulsar". El cohete verde se ve raro, así que uso morado.
  • Los nombres de usuario cortos ( @username ) se muestran en las líneas de tiempo, en lugar del nombre de usuario completo de la cuenta ( @username@instance ) .
    A pesar de que la directriz menciona que "la descentralización debe ser transparente para el usuario", no creo que debamos dejarlo en claro cada vez. También existen algunos problemas de accesibilidad relacionados con el lector de pantalla con el nombre de usuario completo, aunque lamentablemente aún no se puede acceder a esta aplicación web.
  • No hay reproducción automática de videos/GIF/lo que sea en la línea de tiempo .
    La línea de tiempo ya es un gran desastre con muchas personas, marcas, noticias y medios tratando de captar su atención. No lo empeore. (La excepción actual ahora serían los emojis animados).
  • URL basadas en hash .
    Esta aplicación web no pretende ser un reemplazo completo del front-end existente de Mastodon. No hay SEO, base de datos, sin servidor ni servidores de larga duración. Podría equivocarme algún día.

Implementaciones sutiles de UI

Visualización del nombre de usuario

Visualización del nombre de usuario

  • En la línea de tiempo, el nombre de usuario se muestra como [NAME] @[username] .
  • Para @[username] , excluya siempre el nombre de dominio de la instancia.
  • Si [NAME] tiene el mismo aspecto que @[username] , entonces @[username] también se excluye.

Impulsa el carrusel

Impulsa el carrusel

  • A partir de las publicaciones buscadas (por ejemplo, 20 publicaciones por búsqueda), si el número de mejoras es más de una cuarta parte del total de publicaciones o más de 3 mejoras consecutivas, se activará la interfaz de usuario del carrusel de mejoras.
  • Si el número de mejoras supera las 3 cuartas partes del total de publicaciones, la interfaz de usuario del carrusel de mejoras se ubicará al final del total de publicaciones recuperadas (por "página").
  • De lo contrario, la interfaz de usuario del carrusel de mejoras se ubicará entre las publicaciones.

Insignia de número de hilo (p. ej., hilo 1/X)

Insignia de número de hilo

  • Verifique cada publicación en busca de inReplyToId desde la memoria caché o solicitudes de API adicionales, hasta que se encuentre la publicación raíz.
  • Si se encuentra la publicación raíz, la insignia mostrará el número de índice de la publicación en el hilo.
  • Limite hasta 3 solicitudes de API ya que la publicación raíz puede ser muy antigua o el hilo es muy largo.
  • Si no se puede encontrar el número de índice, la insignia volverá a mostrar Thread sin el número.

El relleno de hashtags se derrumba

El relleno de hashtags se derrumba

  • El primer párrafo del contenido de la publicación con más de 3 hashtags se contraerá a un máximo de 3 líneas.
  • Los párrafos posteriores al primer párrafo con más de 3 hashtags se contraerán en 1 línea.
  • Los párrafos adyacentes con más de 1 hashtag después de los párrafos contraídos se contraerán en 1 línea.
  • Si hay texto alrededor o entre los hashtags, no se contraerán.
  • A los hashtags contraídos se les agregará ... al final.
  • También están ligeramente atenuados para reducir el ruido visual.
  • Al abrir la vista de publicaciones, se mostrarán los hashtags sin contraer.

Publicaciones filtradas

  • Las publicaciones filtradas "Ocultar completamente" se ocultarán y no habrá interfaz de usuario que las revele.
  • Las publicaciones filtradas "Ocultar con una advertencia" se ocultarán parcialmente y mostrarán el nombre del filtro y el nombre del autor.
    • El contenido se puede revelar parcialmente al pasar el cursor sobre la publicación, con información sobre herramientas que muestra el texto de la publicación.
    • Al hacer clic en él, se abrirá la página Publicar.
    • Al presionarlo prolongadamente o hacer clic con el botón derecho, se "mirará" la publicación con una interfaz de usuario en la hoja inferior.
    • En el carrusel de impulsos, se clasifican hasta el final del carrusel.

Desarrollo

Requisitos previos: Node.js 18+

  • npm install - Instalar dependencias
  • npm run dev : inicia el servidor de desarrollo y messages:extract ( clean + ``watch`) en paralelo
  • npm run build - Compilación para producción
  • npm run preview : vista previa de la compilación de producción
  • npm run fetch-instances : obtenga la lista de instancias de joinmastodon.org/servers, guárdela en src/data/instances.json
  • npm run sourcemap : ejecuta source-map-explorer en la compilación de producción
  • npm run messages:extract : extrae mensajes de archivos fuente y actualiza los catálogos de mensajes locales

Pila de tecnología

  • Vite - Herramienta de construcción
  • Preact - Biblioteca de interfaz de usuario
  • Valtio - Gestión estatal
  • Enrutador React - Enrutamiento
  • masto.js - Cliente API de Mastodon
  • Iconify - Biblioteca de iconos
    • MingCute iconos
  • Lingui - Internacionalización
  • Vanilla CSS: sí, soy de la vieja escuela.

Algunos de estos pueden cambiar en el futuro. El mundo del front-end está en constante cambio.

Internacionalización

Todas las traducciones están disponibles como archivos gettext .po en la carpeta src/locales . El idioma predeterminado es el inglés ( en ). Las reglas plurales CLDR se utilizan para la pluralización. Los idiomas RTL (de derecha a izquierda) también son compatibles con la dirección del texto, la representación de iconos y el diseño adecuados.

Al cargar la página, el idioma predeterminado se detecta mediante estos métodos, en orden (se utiliza la primera coincidencia):

  1. lang del parámetro de URL /?lang=zh-Hant
  2. lang la clave de localStorage
  3. navigator.language del navegador del navegador

Los usuarios pueden cambiar el idioma en la configuración, lo que establece el lang de la clave localStorage .

Guía para traductores

*Inspirado en el manual de traducción de WordPress:

  • No traduzcas literalmente, traduce orgánicamente.
  • Intenta mantener el mismo nivel de formalidad (o informalidad)
  • No utilices jerga ni términos específicos de la audiencia.
  • Esté atento a los marcadores de posición para las variables. Muchas cadenas tienen marcadores de posición, por ejemplo, {account} (variable), <0>{name} (etiqueta con variable) y # (número de marcador de posición).
  • La elipsis (…) es intencional. No lo quites.
    • Nielsen Norman Group: "Incluir elipses en el texto del comando para indicar cuándo se requiere más información"
    • Pautas de interfaz humana de Apple: "Agregue puntos suspensivos a la etiqueta de un elemento de menú cuando la acción requiera más información antes de que pueda completarse. El carácter de puntos suspensivos (...) indica que las personas necesitan ingresar información o tomar decisiones adicionales, generalmente dentro de otra vista".
    • Desarrollo de aplicaciones de Windows: "Las elipses significan algo incompleto".
  • La API de internacionalización de ECMAScript maneja las marcas de fecha y hora, los rangos de fechas, los números, los nombres de idiomas y la segmentación de texto.
    • Intl.DateTimeFormat : por ejemplo, "8 de agosto", "08/08/2024"
    • Intl.RelativeTimeFormat : por ejemplo, "hace 2 días", "en 2 días"
    • Intl.NumberFormat : por ejemplo, "1000", "10K"
    • Intl.DisplayNames : por ejemplo, "inglés" ( en ) en chino tradicional ( zh-Hant ) es "英文"
    • Intl.Locale (con polyfill para navegadores más antiguos)
    • Intl.Segmenter (con polyfill para navegadores más antiguos)

Notas técnicas

  • Los ID de las cadenas se generan automáticamente en lugar de definirse explícitamente. Algunos de los beneficios son evitar el problema de "nombrar cosas" y evitar duplicados.
    • Es posible que en el futuro se introduzcan identificaciones explícitas cuando cambien los requisitos y las prioridades. La biblioteca (Lingui) permite ambas cosas.
    • Informe problemas si ciertas cadenas se traducen de manera diferente según el contexto, la cultura o la región.
  • No hay cadenas para las notificaciones push. El idioma se establece en el servidor de instancia.
  • Los selectores de fechas HTML nativos, por ejemplo, siempre seguirán la configuración regional del sistema y no la configuración regional establecida por el usuario.
  • "ALT" en la insignia ALT no está traducido. Sirve como un estándar reconocible en todos los idiomas.
  • Los nombres de emoji personalizados no están traducidos, por lo tanto, las búsquedas no funcionan en idiomas distintos del inglés.
  • La API GIPHY admite una lista de idiomas para búsquedas.
  • Es posible que sea necesario utilizar la marca Unicode de derecha a izquierda (RLM) ( U+200F , ‏ ) para texto RTL/LTR mixto, especialmente para el elemento </code> ( <code>document.title</code> ).</li><li> En desarrollo, hay una configuración regional <code>pseudo-LOCALE</code> adicional, que se utiliza para la pseudolocalización. Es para pruebas y no aparecerá en producción.</li><li> Cuando se crea para producción, los mensajes del catálogo en inglés ( <code>en</code> ) no se agrupan por separado. Otras configuraciones regionales se agrupan como archivos separados y se cargan según demanda. Esto garantiza que <code>en</code> siempre esté disponible como alternativa.</li></ul><div class="markdown-heading" dir="auto"><h3> Traducciones voluntarias</h3></div><p dir="auto"> Las traducciones se gestionan en Crowdin. Puedes ayudar ofreciéndote traducciones.</p><p dir="auto"> Lea la documentación de introducción para comenzar.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Autohospedaje</h2></div><p dir="auto"> Esta es una <strong>aplicación web puramente estática</strong> . Puedes alojarlo donde quieras.</p><p dir="auto"> Dos formas (elija una):</p><div class="markdown-heading" dir="auto"><h3> Manera fácil</h3></div><p dir="auto"> Vaya a Lanzamientos y descargue la última versión <code>phanpy-dist.zip</code> o <code>phanpy-dist.tar.gz</code> . Está prediseñado, por lo que no es necesario ejecutar ningún comando de instalación/compilación. Extraerlo. Sirve la carpeta de archivos extraídos.</p><div class="markdown-heading" dir="auto"><h3> Forma de construcción personalizada</h3></div><p dir="auto"> Requiere Node.js.</p><p dir="auto"> Descargue o <code>git clone</code> este repositorio. Utilice la rama <code>production</code> para versiones <em>estables</em> y <code>main</code> para <em>las más recientes</em> . Compílelo ejecutando <code>npm run build</code> (después de <code>npm install</code> ). Sirve la carpeta <code>dist</code> .</p><p dir="auto"> La personalización se puede realizar pasando variables de entorno al comando de compilación. Ejemplos: </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"> También es posible configurarlos en el archivo <code>.env</code> .</p><p dir="auto"> Variables disponibles:</p><ul dir="auto"><li> <code>PHANPY_CLIENT_NAME</code> (opcional, predeterminado: <code>Phanpy</code> ) afecta:<ul dir="auto"><li> Título de la página web, que se muestra en la ventana del navegador o en el título de la pestaña</li><li> Título de la aplicación, cuando se instala como PWA, se muestra en la pantalla de inicio, la base de macOS, la barra de tareas de Windows, etc.</li><li> Título de la tarjeta OpenGraph, cuando se comparte en las redes sociales</li><li> Nombre del cliente, al registrar la aplicación para autenticación y se muestra como cliente utilizado en publicaciones en algunas aplicaciones/clientes</li></ul></li><li> <code>PHANPY_WEBSITE</code> (opcional pero recomendado, predeterminado: <code>https://phanpy.social</code> ) afecta:<ul dir="auto"><li> URL canónica del sitio web</li><li> URL de la tarjeta OpenGraph, cuando se comparte en las redes sociales</li><li> Ruta raíz de la imagen de la tarjeta OpenGraph</li><li> URL del cliente, al registrar la aplicación para autenticación y se muestra como cliente utilizado en publicaciones en algunas aplicaciones/clientes</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE</code> (opcional, sin valores predeterminados):<ul dir="auto"><li> por ejemplo, 'mastodon.social', sin <code>https://</code></li><li> Instancia predeterminada para iniciar sesión</li><li> Al iniciar sesión, el usuario será redirigido instantáneamente a la página de autenticación de la instancia en lugar de tener que escribir manualmente la URL de la instancia y enviarla.</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL</code> (opcional, sin valores predeterminados):<ul dir="auto"><li> URL de la página de registro de la instancia</li><li> Por ejemplo, <code>https://mastodon.social/auth/sign_up</code></li></ul></li><li> <code>PHANPY_PRIVACY_POLICY_URL</code> (opcional, predeterminado a la política de privacidad de la instancia oficial):<ul dir="auto"><li> URL de la página de política de privacidad</li><li> Puede especificar la política de privacidad propia de la instancia.</li></ul></li><li> <code>PHANPY_DEFAULT_LANG</code> (opcional):<ul dir="auto"><li> El idioma predeterminado es inglés ( <code>en</code> ) si no se especifica.</li><li> Idioma alternativo después de múltiples métodos de detección (parámetro de consulta <code>lang</code> , clave <code>lang</code> en <code>localStorage</code> y <code>navigator.language</code> )</li></ul></li><li> <code>PHANPY_LINGVA_INSTANCES</code> (opcional, lista separada por espacios, predeterminado: <code>lingva.phanpy.social [...hard-coded list of fallback instances]</code> ):<ul dir="auto"><li> Especifique una lista de instancias separadas por espacios. Primero se utilizará de forma predeterminada antes de recurrir a las instancias posteriores. Si solo hay 1 instancia, significa que no hay respaldo.</li><li> Puede especificar una instancia de Lingva autohospedada, impulsada por lingva-translate o lingva-api</li><li> Lista de instancias alternativas codificadas en <code>/.env</code></li><li><g-emoji class="g-emoji" alias="arrow_upper_right"> ↗️</g-emoji> Lista de instancias de lingva-translate</li></ul></li><li> <code>PHANPY_IMG_ALT_API_URL</code> (opcional, sin valores predeterminados):<ul dir="auto"><li> Punto final de API para una instancia autohospedada de img-alt-api.</li><li> Si se proporciona, aparecerá una configuración para que los usuarios habiliten el generador de descripción de imágenes en el compositor. Deshabilitado por defecto.</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> (opcional, sin valores predeterminados):<ul dir="auto"><li> Clave API para GIPHY. Consulte los documentos de la API.</li><li> Si se proporciona, aparecerá una configuración para que los usuarios habiliten el selector de GIF en el compositor. Deshabilitado por defecto.</li><li> Esto no es autohospedado.</li></ul></li></ul><div class="markdown-heading" dir="auto"><h3> Alojamiento de sitios estáticos</h3></div><p dir="auto"> Pruebe la búsqueda en línea de "cómo alojar sitios estáticos usted mismo", ya que hay muchas formas de hacerlo.</p><div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto"> Alojamiento Lingva-translate o lingva-api</h4></div><p dir="auto"> Consulte la documentación para lingva-translate o lingva-api.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Implementaciones comunitarias</h2></div><p dir="auto"> Estos están alojados por otras personas maravillosas.</p><ul dir="auto"><li> ferengi.one por @david@weaknotes.com</li><li> halo.mookiesplace.com por @mookie@mookiesplace.com</li><li> phanpy.bauxite.tech por @b4ux1t3@hachyderm.io</li><li> phanpy.blaede.family por @cassidy@blaede.family</li><li> phanpy.crmbl.uk por @snail@crmbl.uk</li><li> phanpy.cz por @zdendys@mamutovo.cz</li><li> phanpy.fulda.social por @Ganneff@fulda.social</li><li> phanpy.gotosocial.social por @admin@gotosocial.social</li><li> phanpy.hear-me.social por @admin@hear-me.social</li><li> phanpy.mastodon.world por @ruud@mastodon.world</li><li> phanpy.mstdn.mx por @maop@mstdn.mx</li><li> phanpy.social.tchncs.de por @milan@social.tchncs.de</li><li> phanpy.tilde.zone por @ben@tilde.zone</li><li> phanpy.vmst.io por @vmstan@vmst.io</li><li> social.qrk.one por @kev@fosstodon.org</li></ul><blockquote><p dir="auto"> Nota: Agrega el tuyo creando una solicitud de extracción. </p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Costos</h2></div><p dir="auto"> Costos involucrados en la ejecución y desarrollo de esta aplicación web:</p><ul dir="auto"><li> Nombre de dominio (.social): <strong>USD$23.18/año</strong> (USD$6.87 1er año)</li><li> Alojamiento: Gratis</li><li> Desarrollo, diseño, mantenimiento: "Gratis" (Mi precioso tiempo) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Mascota</h2></div><p dir="auto"> Phanpy es un Pokémon de tipo Tierra.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Mantenedores + contribuyentes</h2></div><ul dir="auto"><li> Chee Aun (Mastodonte) (Twitter)</li></ul><div class="markdown-heading" dir="auto"><h3> Voluntarios de traducción</h3></div><ul dir="auto"><li> alidsds11 (árabe)</li><li> alternativa (coreano)</li><li> BoFFire (árabe, francés, cabila)</li><li> Brawaru (ruso)</li><li> cbasje (holandés)</li><li> cbo92 (francés)</li><li> CDN (chino simplificado)</li><li> dannypsnl (chino tradicional)</li><li> databio (catalán)</li><li> Dizro (italiano)</li><li> Drift6944 (checo)</li><li> drydenwu (chino tradicional)</li><li> elissarc (francés)</li><li> El Pamplina (español)</li><li> Fitik (esperanto, hebreo)</li><li> Freesia (japonesa)</li><li> ghose (gallego)</li><li> Hongminhee (coreano)</li><li> Hugoglifo (esperanto, español)</li><li> isard (catalán)</li><li> kaliuwu (polaco)</li><li> karlafej (checo)</li><li> katullo11 ​​(italiano)</li><li> Kytta (alemán)</li><li> llun (tailandés)</li><li> lucasofchirst (occitano, portugués, portugués, brasileño)</li><li> LukeHong (chino tradicional)</li><li> marcin.kozinski (polaco)</li><li> mkljczkk (polaco)</li><li> mojosoeun (coreano)</li><li> moreal (coreano)</li><li> MrWillCom (chino simplificado)</li><li> nclm (francés)</li><li> pazpi (italiano)</li><li> punkrockgirl (euskera)</li><li> radecos (francés)</li><li> Razem (checo)</li><li> código realpixel (alemán)</li><li> rezahosseinzadeh (persa)</li><li> rwmpelstilzchen (esperanto, hebreo)</li><li> Sadml (ruso)</li><li> SadmL_AI (ruso)</li><li> shuuji3 (japonés)</li><li> Sky_NiniKo (francés)</li><li> Steffo99 (italiano)</li><li> Su5hicz (checo)</li><li> tferrermo (español)</li><li> tkbremnes (bokmal noruego)</li><li> tux93 (alemán)</li><li> Vac31. (Lituano)</li><li> valtlai (finlandés)</li><li> vasiriri (polaco)</li><li> voyagercy (chino tradicional)</li><li> xabi_itzultzaile (euskera)</li><li> xen4n (ucraniano)</li><li> xqueralt (catalán)</li><li> ZiriSut (Cabilia)</li><li> zkreml (checo) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Historia de fondo</h2></div><p dir="auto"> Soy uno de los primeros usuarios de Twitter. Twitter se lanzó el 15 de julio de 2006. Me uní en diciembre de 2006 y mi primer tweet se publicó el 18 de diciembre de 2006.</p><p dir="auto"> Sé lo temprano que parece Twitter. Fue divertido.</p><p dir="auto"> En aquel entonces, hice un clon de Twitter llamado "Twig" escrito en Python y Google App Engine. Casi creé mi propio cliente de escritorio de Twitter escrito en Appcelerator Titanium. Di una de mis mejores charlas sobre el cliente Twitter en una miniconferencia. Creé esto llamado "Columnas de Twitter", una aplicación web que muestra tu lista de seguidores, los seguidores de tus seguidores, tus seguidores, los seguidores de tus seguidores, etc. En 2009, escribí una publicación de blog titulada "Cómo comencé con Twitter". Creé dos temas para DestroyTwitter (un cliente de escritorio creado con Adobe Air por Jonnie Hallman) y uno de ellos se llama "Vimeo". En 2013, escribí mi propio sitio de respaldo de tweets con una interfaz para ver mis tweets y un backend CouchDB para almacenarlos.</p><p dir="auto"> Han pasado <strong>más de 15 años</strong> .</p><p dir="auto"> Y aquí estoy. Construyendo un cliente web Mastodon.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Clientes web alternativos</h2></div><ul dir="auto"><li> Horquillas Phanpy ↓<ul dir="auto"><li> Ágora</li></ul></li><li> Delantal (retirado) - tenedores ↓<ul dir="auto"><li> Semáforo</li><li> Enafore</li></ul></li><li> cuco+</li><li> Sengi</li><li> Plataforma improvisada</li><li> Alce - tenedores ↓<ul dir="auto"><li> elk.fedified.com</li></ul></li><li> Mastocubierta</li><li> Bañador</li><li> Tooty</li><li> Caja de arena</li><li> Estatizador</li><li> colmillos</li><li> Mastodon Glitch Edition (interfaz independiente)</li><li> mangano</li><li> El escritorio</li><li> Más... </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ?‍♂️ Aviso para todos los demás desarrolladores de clientes de redes sociales</h2></div><p dir="auto"> Por favor, copie las ideas y experimentos de la interfaz de usuario de esta aplicación. Creo que algunos de ellos son bastante buenos y sería genial si más aplicaciones los tuvieran.</p><p dir="auto"> Si no es desarrollador, informe a sus desarrolladores de clientes de redes sociales favoritos sobre esta aplicación y pídales que copien las ideas y experimentos de la interfaz de usuario.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Licencia</h2></div><p dir="auto"> MIT.</p> </div> <div class="zd_btn more_version_btn" data-more="Expandir" data-less="Recoger">Expandir</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">Información adicional</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">Versión</span> <span class="text"></span> </li> <li> <span class="title">Tipo</span> <a class="text" href="/es/category/list_228_1.html">Otro código fuente</a> </li> <li> <span class="title">Fecha de actualización</span> <span class="text">2024-11-09</span> </li> <li> <span class="title">tamaño</span> <span class="text"></span> </li> <li> <span class="title">Idioma</span> <span class="text">Chino simplificado</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">Aplicaciones relacionadas</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">Recomendado para ti</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/es/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 Cine y Televisión bdys versión Android"></a> <div class="content"> <h3><a href="/es/app/44151.html">Bidi Cine y Televisión bdys versión Android</a></h3> <div class="cate"> <a href="/es/category/list_297_1.html">Reproducción de vídeo</a> </div> <div class="other"> <span>V2.1.7</span> </div> </div> </li> <li> <a class="img_item" href="/es/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="Descargar juego Assault Lily"></a> <div class="content"> <h3><a href="/es/app/39387.html">Descargar juego Assault Lily</a></h3> <div class="cate"> <a href="/es/category/list_301_1.html">Juego de roles</a> </div> <div class="other"> <span>v1.0.5</span> </div> </div> </li> <li> <a class="img_item" href="/es/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="Código fuente del sistema de pago de conocimientos 丨 Contenido educativo en línea Realización de conocimientos pagados 丨 Personalización del mini programa de curso pago gráfico de preguntas y respuest"></a> <div class="content"> <h3><a href="/es/download/28990.html">Código fuente del sistema de pago de conocimientos 丨 Contenido educativo en línea Realización de conocimientos pagados 丨 Personalización del mini programa de curso pago gráfico de preguntas y respuest</a></h3> <div class="cate"> <a href="/es/category/list_55_1.html">Otras categorias</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/es/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 Edición Viaje hacia el Oeste"></a> <div class="content"> <h3><a href="/es/app/45483.html">Plants vs.Zombies Edición Viaje hacia el Oeste</a></h3> <div class="cate"> <a href="/es/category/list_299_1.html">rompecabezas casuales</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/es/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="Versión híbrida PVZ 2.3.5 versión de menú incorporado"></a> <div class="content"> <h3><a href="/es/app/179136.html">Versión híbrida PVZ 2.3.5 versión de menú incorporado</a></h3> <div class="cate"> <a href="/es/category/list_299_1.html">rompecabezas casuales</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/es/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 Ruido de la torre de pizza"></a> <div class="content"> <h3><a href="/es/app/176855.html">Mod DLC Ruido de la torre de pizza</a></h3> <div class="cate"> <a href="/es/category/list_299_1.html">rompecabezas casuales</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/es/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 Móvil"></a> <div class="content"> <h3><a href="/es/app/176584.html">Happy Block House Family Simulator Móvil</a></h3> <div class="cate"> <a href="/es/category/list_307_1.html">Negocio simulado</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/es/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="Reparar gancho instalación escape metro"></a> <div class="content"> <h3><a href="/es/app/176463.html">Reparar gancho instalación escape metro</a></h3> <div class="cate"> <a href="/es/category/list_309_1.html">tiroteo en vuelo</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/es/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="Juego móvil BodyCam"></a> <div class="content"> <h3><a href="/es/app/178338.html">Juego móvil BodyCam</a></h3> <div class="cate"> <a href="/es/category/list_309_1.html">tiroteo en vuelo</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">Información relacionada</span> <a href="/category/list_336_1.html">Todo</a> </div> <ul class="cate_list_template"> <li> <a href="/es/wz/212997.html"> <div class="text">Dirección del sitio web oficial de Bidi Cine y Televisión</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/es/wz/212996.html"> <div class="text">Cómo recargar el servidor internacional Assault Lily</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/es/wz/212995.html"> <div class="text">Cómo solucionar el tartamudeo en Stalker 2: Heart of Chernobyl</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/es/wz/212994.html"> <div class="text">¿Dónde está Juice WRLD en Fortnite?</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/es/wz/212993.html"> <div class="text">Cómo iniciar la expansión Wild Card en Star Wars Outlaws</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/es/wz/212992.html"> <div class="text">Beijing agrega una nueva institución de I+D para mejorar la seguridad de la inteligencia artificial y el diseño de la gobernanza</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">Comentarios de los usuarios</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 = 'es'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = 'Haz clic para ver más'; $(".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 = 'es'; let fromto = 'Proviene de'; 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>