홈페이지>프로그래밍 관련>기타 소스코드
다운로드
팬피

팬피

최소한의 독선적인 Mastodon 웹 클라이언트.

멋진 스크린샷

?️ 발음 : /fænpi/ ( FAN-pee ) ? 듣다

이것은 Mastodon의 대체 웹 클라이언트입니다.

  • ? 제작 : https://phanpy.social
    • production 지점
    • 덜 자주 휴식
    • 중요하지 않은 한 느린 수정
  • ?️ 개발 : https://dev.phanpy.social
    • main
    • 새로운 멋진 콘텐츠를 더 빨리 볼 수 있습니다
    • 더 자주 깨질 수 있습니다
    • 훨씬 빨리 고쳐질 수도 있습니다

? 업데이트를 보려면 Mastodon에서 @phanpy를 팔로우하세요 ✨

모든 것이 내 취향과 비전에 따라 설계되고 제작되었습니다. 이것은 Mastodon에 대해 배우고 새로운 UI/UX 아이디어를 실험하기 위한 개인적인 사이드 프로젝트입니다.

특징

  • ? 여러 계정
  • ? 작성 창 팝업/인
  • ? 밝음/어두움/자동 테마
  • ? 그룹화된 알림
  • ? 중첩된 댓글 스레드
  • ? 보내지 않은 초안 복구
  • ? Carousel™️을 향상시킵니다.
  • ⚡ 다중 열 또는 탭 표시줄과 같은 보기 모드를 갖춘 바로가기™️
  • #️⃣ 다중 해시태그 타임라인

디자인 결정

  • 상태 작업(답장, 홍보, 즐겨찾기, 북마크 등)은 기본적으로 숨겨져 있습니다 .
    개별 상태 페이지에만 표시됩니다. 이는 혼란과 산만함을 줄이기 위한 것입니다. 참여도가 낮아질 수 있지만 여기서는 숫자를 쫓지 않습니다.
  • 부스트는 로켓 아이콘으로 표시됩니다 .
    녹색 이중 화살표 아이콘(Twitter의 경우 리트윗)은 "부스트"라는 용어에 적합하지 않은 것 같습니다. 녹색 로켓이 이상해 보여서 보라색을 사용했습니다.
  • 전체 계정 사용자 이름( @username@instance ) 대신 짧은 사용자 이름( @username )이 타임라인에 표시됩니다 .
    "분권화는 사용자에게 투명해야 한다"는 지침에도 불구하고 매번 이를 표면화할 필요는 없다고 생각합니다. 전체 사용자 이름에는 스크린 리더 관련 접근성 문제도 있지만 안타깝게도 이 웹 앱에는 아직 액세스할 수 없습니다.
  • 타임라인의 비디오/GIF/무엇이든 자동 재생되지 않습니다 .
    타임라인은 이미 많은 사람, 브랜드, 뉴스, 미디어가 여러분의 관심을 끌기 위해 애쓰는 거대한 혼란 상태입니다. 상황을 악화시키지 말자. (현재 예외는 애니메이션 이모티콘입니다.)
  • 해시 기반 URL .
    이 웹 앱은 Mastodon의 기존 프런트 엔드를 완전히 대체하기 위한 것이 아닙니다. SEO, 데이터베이스, 서버리스 또는 장기 실행 서버가 없습니다. 언젠가는 틀릴 수도 있어요.

미묘한 UI 구현

사용자 이름 표시

사용자 이름 표시

  • 타임라인에는 사용자 이름이 [NAME] @[username] 으로 표시됩니다.
  • @[username] 의 경우 항상 인스턴스 도메인 이름을 제외하세요.
  • [NAME] 이 @[username] 과 동일해 보이는 경우 @[username] 도 제외됩니다.

캐러셀 부스트

캐러셀 부스트

  • 가져온 게시물(예: 가져오기당 게시물 20개)에서 부스트 수가 총 게시물의 4분의 1을 초과하거나 연속 부스트가 3개를 초과하는 경우 부스트 캐러셀 UI가 트리거됩니다.
  • 부스트 수가 총 게시물의 3/4을 초과하는 경우 부스트 캐러셀 UI는 가져온 총 게시물 끝에("페이지"당) 배치됩니다.
  • 그렇지 않으면 부스트 캐러셀 UI가 게시물 사이에 배치됩니다.

스레드 번호 배지(예: 스레드 1/X)

스레드 번호 배지

  • 루트 게시물을 찾을 때까지 캐시 또는 추가 API 요청에서 inReplyToId 에 대한 모든 게시물을 확인하세요.
  • 루트 게시물이 발견되면 배지에 스레드에 있는 게시물의 색인 번호가 표시됩니다.
  • 루트 게시물이 매우 오래되었거나 스레드가 너무 길기 때문에 API 요청을 최대 3개로 제한하세요.
  • 색인 번호를 찾을 수 없는 경우 배지는 번호 없이 Thread 표시하도록 대체됩니다.

해시태그 스터핑이 무너지고 있습니다.

해시태그 스터핑이 무너지고 있습니다.

  • 3개 이상의 해시태그가 포함된 게시물 콘텐츠의 첫 번째 단락은 최대 3줄로 축소됩니다.
  • 해시태그가 3개 이상인 첫 번째 단락 이후의 후속 단락은 1줄로 축소됩니다.
  • 접힌 문단 뒤의 해시태그가 1개 이상인 인접 문단은 1줄로 접혀집니다.
  • 해시태그 주변이나 사이에 텍스트가 있으면 접히지 않습니다.
  • 접힌 해시태그는 끝에 ... 가 추가됩니다.
  • 또한 시각적 노이즈를 줄이기 위해 약간 페이드 아웃됩니다.
  • 게시물 보기를 열면 축소되지 않은 해시태그가 표시됩니다.

필터링된 게시물

  • "완전히 숨기기"로 필터링된 게시물은 표시할 수 있는 UI 없이 숨겨집니다.
  • "경고와 함께 숨기기"로 필터링된 게시물은 부분적으로 숨겨져 필터 이름과 작성자 이름이 표시됩니다.
    • 게시물 위로 마우스를 가져가면 게시물 텍스트를 표시하는 도구 설명을 통해 내용을 부분적으로 볼 수 있습니다.
    • 클릭하면 게시물 페이지가 열립니다.
    • 길게 누르거나 마우스 오른쪽 버튼을 클릭하면 바텀 시트 UI가 포함된 게시물을 "미리볼" 수 있습니다.
    • 부스트 캐러셀에서는 캐러셀 끝에 정렬됩니다.

개발

전제조건: Node.js 18+

  • npm install - 종속성 설치
  • npm run dev - 개발 서버 및 messages:extract ( clean + ``watch`) 병렬로
  • npm run build - 프로덕션용 빌드
  • npm run preview - 프로덕션 빌드 미리보기
  • npm run fetch-instances - Joinmastodon.org/servers에서 인스턴스 목록을 가져와서 src/data/instances.json 에 저장합니다.
  • npm run sourcemap - 프로덕션 빌드에서 source-map-explorer 실행합니다.
  • npm run messages:extract - 소스 파일에서 메시지를 추출하고 로케일 메시지 카탈로그를 업데이트합니다.

기술 스택

  • Vite - 빌드 도구
  • Preact - UI 라이브러리
  • Valtio - 상태 관리
  • 반응 라우터 - 라우팅
  • masto.js - 마스토돈 API 클라이언트
  • Iconify - 아이콘 라이브러리
    • 밍귀엽다 아이콘들
  • Lingui - 국제화
  • 바닐라 CSS - 예, 저는 구식입니다.

이들 중 일부는 향후 변경될 수 있습니다. 프론트엔드 세계는 끊임없이 변화하고 있습니다.

국제화

모든 번역은 src/locales 폴더에 gettext .po 파일로 제공됩니다. 기본 언어는 영어( en )입니다. CLDR 복수 규칙은 복수화에 사용됩니다. RTL(오른쪽에서 왼쪽) 언어도 적절한 텍스트 방향, 아이콘 렌더링 및 레이아웃으로 지원됩니다.

페이지 로드 시 기본 언어는 다음 방법을 통해 순서대로 감지됩니다(첫 번째 일치 항목이 사용됨).

  1. URL 매개변수 lang 예: /?lang=zh-Hant
  2. localStorage 키 lang
  3. 브라우저의 navigator.language

사용자는 localStorage 키 lang 을 설정하는 설정에서 언어를 변경할 수 있습니다.

번역가를 위한 가이드

*워드프레스 핸드북 번역에서 영감을 얻었습니다:

  • 문자 그대로 번역하지 말고 유기적으로 번역하세요.
  • 동일한 수준의 형식(또는 비공식)을 유지하도록 노력하세요.
  • 속어나 청중을 특정하는 용어를 사용하지 마세요.
  • 변수의 자리 표시자에 주의하세요. 많은 문자열에는 {account} (변수), <0>{name} (변수가 포함된 태그) 및 # (숫자 자리 표시자)과 같은 자리 표시자가 있습니다.
  • 줄임표(…)는 의도적인 것입니다. 제거하지 마십시오.
    • Nielsen Norman Group: "추가 정보가 필요한 경우를 나타내기 위해 명령 텍스트에 줄임표를 포함합니다."
    • Apple 휴먼 인터페이스 지침: "작업을 완료하기 전에 추가 정보가 필요한 경우 메뉴 항목 레이블에 줄임표를 추가합니다. 줄임표 문자(…)는 일반적으로 다른 보기 내에서 사람들이 정보를 입력하거나 추가 선택을 해야 함을 나타냅니다."
    • Windows 앱 개발: "타원은 불완전함을 의미합니다."
  • 날짜 타임스탬프, 날짜 범위, 숫자, 언어 이름 및 텍스트 분할은 ECMAScript 국제화 API에 의해 처리됩니다.
    • Intl.DateTimeFormat - 예: "8월 8일", "2024년 8월 8일"
    • Intl.RelativeTimeFormat - 예: "2일 전", "2일 후"
    • Intl.NumberFormat 형식 - 예: "1,000", "10K"
    • Intl.DisplayNames - 예를 들어 중국어 번체( zh-Hant )의 "English"( en )는 "英文"입니다.
    • Intl.Locale (이전 브라우저의 경우 폴리필 사용)
    • Intl.Segmenter (이전 브라우저용 폴리필 포함)

기술 노트

  • 문자열의 ID는 명시적으로 정의되지 않고 자동 생성됩니다. 이점 중 일부는 "이름 지정" 문제를 피하고 중복을 피하는 것입니다.
    • 명시적 ID는 향후 요구 사항과 우선 순위가 변경될 때 도입될 수 있습니다. 라이브러리(Lingui)는 두 가지를 모두 허용합니다.
    • 특정 문자열이 상황, 문화, 지역에 따라 다르게 번역되는 경우 문제를 신고해 주세요.
  • 푸시 알림에는 문자열이 없습니다. 언어는 인스턴스 서버에서 설정됩니다.
  • 기본 HTML 날짜 선택기(예: 는 항상 사용자가 설정한 로캘이 아닌 시스템의 로캘을 따릅니다.
  • ALT 배지의 "ALT"는 번역되지 않습니다. 이는 언어 전반에 걸쳐 인식 가능한 표준으로 사용됩니다.
  • 맞춤 이모티콘 이름은 현지화되지 않으므로 영어가 아닌 언어에서는 검색이 작동하지 않습니다.
  • GIPHY API는 검색 언어 목록을 지원합니다.
  • 유니코드 RLM(오른쪽에서 왼쪽으로 표시)( U+200F , ‏ )은 혼합 RTL/LTR 텍스트, 특히 </code> 요소( <code>document.title</code> )에 사용해야 할 수도 있습니다.</li><li> 개발 중에는 의사 지역화에 사용되는 추가 <code>pseudo-LOCALE</code> 로케일이 있습니다. 테스트용이므로 프로덕션에는 표시되지 않습니다.</li><li> 프로덕션용으로 빌드할 때 영어( <code>en</code> ) 카탈로그 메시지가 별도로 번들로 제공되지 않습니다. 다른 로케일은 별도의 파일로 번들로 제공되며 요청 시 로드됩니다. 이렇게 하면 <code>en</code> 항상 대체 항목으로 사용할 수 있습니다.</li></ul><div class="markdown-heading" dir="auto"><h3> 자원봉사 번역</h3></div><p dir="auto"> 번역은 Crowdin에서 관리됩니다. 자원봉사 번역을 통해 도움을 줄 수 있습니다.</p><p dir="auto"> 시작하려면 소개 문서를 읽어보세요.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 자체 호스팅</h2></div><p dir="auto"> 이것은 <strong>순수한 정적 웹 앱</strong> 입니다. 원하는 곳 어디에서나 호스팅할 수 있습니다.</p><p dir="auto"> 두 가지 방법(하나 선택):</p><div class="markdown-heading" dir="auto"><h3> 쉬운 방법</h3></div><p dir="auto"> 릴리스로 이동하여 최신 <code>phanpy-dist.zip</code> 또는 <code>phanpy-dist.tar.gz</code> 다운로드하세요. 사전 빌드되었으므로 설치/빌드 명령을 실행할 필요가 없습니다. 그것을 추출하십시오. 추출된 파일의 폴더를 제공합니다.</p><div class="markdown-heading" dir="auto"><h3> 맞춤형 구축 방식</h3></div><p dir="auto"> Node.js가 필요합니다.</p><p dir="auto"> 이 저장소를 다운로드하거나 <code>git clone</code> . <em>안정적인</em> 릴리스에는 <code>production</code> 브랜치를 사용하고, <em>최신</em> 릴리스에는 <code>main</code> 를 사용하세요. <code>npm run build</code> 실행하여 빌드합니다( <code>npm install</code> 이후). <code>dist</code> 폴더를 제공하십시오.</p><p dir="auto"> 환경 변수를 빌드 명령에 전달하여 사용자 정의를 수행할 수 있습니다. 예: </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"> <code>.env</code> 파일에서 설정할 수도 있습니다.</p><p dir="auto"> 사용 가능한 변수:</p><ul dir="auto"><li> <code>PHANPY_CLIENT_NAME</code> (선택 사항, 기본값: <code>Phanpy</code> )은 다음에 영향을 미칩니다.<ul dir="auto"><li> 브라우저 창이나 탭 제목에 표시되는 웹 페이지 제목</li><li> PWA로 설치된 경우 홈 화면, macOS 도크, Windows 작업 표시줄 등에 표시되는 앱 제목</li><li> OpenGraph 카드 제목(소셜 네트워크에서 공유 시)</li><li> 클라이언트 이름, 인증을 위해 앱을 등록할 때 일부 앱/클라이언트의 게시물에 사용되는 클라이언트로 표시됩니다.</li></ul></li><li> <code>PHANPY_WEBSITE</code> (선택 사항이지만 권장됨, 기본값: <code>https://phanpy.social</code> )은 다음에 영향을 미칩니다.<ul dir="auto"><li> 웹사이트의 표준 URL</li><li> OpenGraph 카드 URL(소셜 네트워크에서 공유되는 경우)</li><li> OpenGraph 카드 이미지의 루트 경로</li><li> 클라이언트 URL은 인증을 위해 앱을 등록할 때 일부 앱/클라이언트의 게시물에 사용되는 클라이언트로 표시됩니다.</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE</code> (선택사항, 기본값 없음):<ul dir="auto"><li> 예: <code>https://</code> 없는 'mastodon.social'</li><li> 로그인을 위한 기본 인스턴스</li><li> 로그인 시 사용자는 인스턴스 URL을 수동으로 입력하고 제출할 필요 없이 즉시 인스턴스 인증 페이지로 리디렉션됩니다.</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL</code> (선택사항, 기본값 없음):<ul dir="auto"><li> 인스턴스 등록 페이지의 URL</li><li> 예: <code>https://mastodon.social/auth/sign_up</code></li></ul></li><li> <code>PHANPY_PRIVACY_POLICY_URL</code> (선택사항, 기본값은 공식 인스턴스의 개인정보 보호정책):<ul dir="auto"><li> 개인정보 보호정책 페이지의 URL</li><li> 인스턴스의 자체 개인 정보 보호 정책을 지정할 수 있습니다.</li></ul></li><li> <code>PHANPY_DEFAULT_LANG</code> (선택사항):<ul dir="auto"><li> 지정되지 않은 경우 기본 언어는 영어( <code>en</code> )입니다.</li><li> 여러 감지 방법 이후의 대체 언어( <code>lang</code> 쿼리 매개변수, <code>localStorage</code> 및 <code>navigator.language</code> 의 <code>lang</code> 키)</li></ul></li><li> <code>PHANPY_LINGVA_INSTANCES</code> (선택 사항, 공백으로 구분된 목록, 기본값: <code>lingva.phanpy.social [...hard-coded list of fallback instances]</code> ):<ul dir="auto"><li> 공백으로 구분된 인스턴스 목록을 지정합니다. 첫 번째는 후속 인스턴스로 대체되기 전에 기본값으로 사용됩니다. 인스턴스가 1개만 있으면 대체가 없음을 의미합니다.</li><li> lingva-translate 또는 lingva-api로 구동되는 자체 호스팅 Lingva 인스턴스를 지정할 수 있습니다.</li><li> <code>/.env</code> 에 하드 코딩된 대체 인스턴스 목록</li><li><g-emoji class="g-emoji" alias="arrow_upper_right"> ↗️</g-emoji> lingva-translate 인스턴스 목록</li></ul></li><li> <code>PHANPY_IMG_ALT_API_URL</code> (선택사항, 기본값 없음):<ul dir="auto"><li> img-alt-api의 자체 호스팅 인스턴스에 대한 API 엔드포인트입니다.</li><li> 제공된 경우 사용자가 작성기에서 이미지 설명 생성기를 활성화할 수 있는 설정이 나타납니다. 기본적으로 비활성화되어 있습니다.</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> (선택사항, 기본값 없음):<ul dir="auto"><li> GIPHY용 API 키입니다. API 문서를 참조하세요.</li><li> 제공된 경우 사용자가 작성기에서 GIF 선택기를 활성화할 수 있는 설정이 나타납니다. 기본적으로 비활성화되어 있습니다.</li><li> 이것은 자체 호스팅이 아닙니다.</li></ul></li></ul><div class="markdown-heading" dir="auto"><h3> 정적 사이트 호스팅</h3></div><p dir="auto"> 방법은 다양하므로 "정적 사이트를 자체 호스팅하는 방법"을 온라인으로 검색해 보세요.</p><div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto"> Lingva 번역 또는 lingva-api 호스팅</h4></div><p dir="auto"> lingva-translate 또는 lingva-api에 대한 설명서를 참조하세요.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 커뮤니티 배포</h2></div><p dir="auto"> 이들은 다른 훌륭한 사람들이 자체 호스팅합니다.</p><ul dir="auto"><li> ferengi.one @david@weaknotes.com 작성</li><li> halo.mookiesplace.com(@mookie@mookiesplace.com 작성)</li><li> @b4ux1t3@hachyderm.io의 phanpy.bauxite.tech</li><li> @cassidy@blaede.family의 phanpy.blaede.family</li><li> @snail@crmbl.uk의 phanpy.crmbl.uk</li><li> @zdendys@mamutovo.cz의 phanpy.cz</li><li> @Ganneff@fulda.social의 phanpy.fulda.social</li><li> @admin@gotosocial.social의 phanpy.gotosocial.social</li><li> @admin@hear-me.social의 phanpy.hear-me.social</li><li> @ruud@mastodon.world의 phanpy.mastodon.world</li><li> @maop@mstdn.mx의 phanpy.mstdn.mx</li><li> @milan@social.tchncs.de의 phanpy.social.tchncs.de</li><li> @ben@tilde.zone의 phanpy.tilde.zone</li><li> @vmstan@vmst.io의 phanpy.vmst.io</li><li> @kev@fosstodon.org의 social.qrk.one</li></ul><blockquote><p dir="auto"> 참고: 끌어오기 요청을 생성하여 추가하세요. </p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 소송 비용</h2></div><p dir="auto"> 이 웹 앱을 실행하고 개발하는 데 드는 비용:</p><ul dir="auto"><li> 도메인 이름(.social): <strong>USD$23.18/년</strong> (USD$6.87 1년차)</li><li> 호스팅: 무료</li><li> 개발, 디자인, 유지보수: "무료" (나의 소중한 시간) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 마스코트</h2></div><p dir="auto"> 팬피(Phanpy)는 땅타입 포켓몬입니다.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 유지관리자 + 기여자</h2></div><ul dir="auto"><li> 치 아운(마스토돈) (트위터)</li></ul><div class="markdown-heading" dir="auto"><h3> 번역 자원봉사자</h3></div><ul dir="auto"><li> alidsds11(아랍어)</li><li> 대안(한국어)</li><li> BoFFire(아랍어, 프랑스어, Kabyle)</li><li> 브라와루어(러시아어)</li><li> cbasje(네덜란드어)</li><li> cbo92 (프랑스어)</li><li> CDN(중국어 간체)</li><li> dannypsnl(중국어 번체)</li><li> databio(카탈로니아어)</li><li> 디즈로(이탈리아어)</li><li> Drift6944(체코)</li><li> drydenwu(중국어 번체)</li><li> 엘리사크(프랑스어)</li><li> 엘팜플리나(스페인어)</li><li> Fitik(에스페란토, 히브리어)</li><li> 프리지아(일본어)</li><li> 고스어(갈리시아어)</li><li> 홍민희 (한국어)</li><li> 휴고글리프(에스페란토, 스페인어)</li><li> 이사르어(카탈로니아어)</li><li> 칼리우우(폴란드어)</li><li> karlafej(체코)</li><li> katullo11(이탈리아어)</li><li> 키타(독일어)</li><li> 룬(태국어)</li><li> lucasofchirst(옥시탄어, 포르투갈어, 포르투갈어, 브라질어)</li><li> LukeHong(중국어 번체)</li><li> marcin.kozinski(폴란드어)</li><li> mkljczkk(폴란드어)</li><li> 모조소은(한국어)</li><li> 모리얼 (한국어)</li><li> MrWillCom(중국어 간체)</li><li> nclm(프랑스어)</li><li> 파즈피(이탈리아어)</li><li> 펑크록걸(바스크어)</li><li> 라데코스(프랑스어)</li><li> 라젬(체코)</li><li> realpixelcode(독일어)</li><li> 레자호세인자데(페르시아어)</li><li> rwmpelstilzchen(에스페란토, 히브리어)</li><li> SadmL(러시아어)</li><li> SadmL_AI(러시아어)</li><li> 슈지3(일본어)</li><li> Sky_NiniKo(프랑스어)</li><li> Steffo99(이탈리아어)</li><li> Su5hicz(체코)</li><li> tferrermo(스페인어)</li><li> tkbremnes(노르웨이어 복말)</li><li> tux93 (독일어)</li><li> Vac31. (리투아니아 사람)</li><li> 발틀라이(핀란드어)</li><li> 바시리리(폴란드어)</li><li> 항해(중국어 번체)</li><li> xabi_itzultzaile(바스크어)</li><li> xen4n(우크라이나어)</li><li> xqueralt(카탈로니아어)</li><li> 지리수트(Kabyle)</li><li> zkreml(체코) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 뒷이야기</h2></div><p dir="auto"> 나는 트위터의 초기 사용자 중 한 명입니다. 트위터는 2006년 7월 15일에 시작되었습니다. 저는 2006년 12월에 가입했고 2006년 12월 18일에 첫 트윗이 게시되었습니다.</p><p dir="auto"> 나는 트위터가 얼마나 초기에 생겼는지 압니다. 재미있었습니다.</p><p dir="auto"> 그 당시 저는 Python과 Google App Engine으로 작성된 "Twig"라는 Twitter 복제본을 만들었습니다. 나는 Appcelerator Titanium으로 작성된 나만의 Twitter 데스크톱 클라이언트를 거의 만들었습니다. 나는 미니 컨퍼런스에서 트위터 클라이언트에 관해 최고의 강연을 했습니다. 저는 팔로어 목록, 팔로어의 팔로어, 팔로어, 팔로어의 팔로어 등을 보여주는 웹 앱인 "Twitter Columns"라는 것을 만들었습니다. 2009년에 나는 "내가 트위터를 시작한 방법"이라는 제목의 블로그 게시물을 썼습니다. 저는 DestroyTwitter(Jonnie Hallman이 Adobe Air로 만든 데스크탑 클라이언트)용으로 두 개의 테마를 만들었고 그 중 하나는 "Vimeo"입니다. 2013년에 나는 내 트윗을 볼 수 있는 프런트 엔드와 이를 저장할 CouchDB 백엔드가 있는 나만의 트윗 백업 사이트를 작성했습니다.</p><p dir="auto"> <strong>15년이 넘었</strong> 습니다.</p><p dir="auto"> 그리고 여기 있습니다. Mastodon 웹 클라이언트 구축.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 대체 웹 클라이언트</h2></div><ul dir="auto"><li> 팬피 포크 ↓<ul dir="auto"><li> 아고라</li></ul></li><li> 피나포레(은퇴) - 포크 ↓<ul dir="auto"><li> 신호기</li><li> 에나포레</li></ul></li><li> 뻐꾸기+</li><li> 센기</li><li> 비누 상자</li><li> 엘크 - 포크 ↓<ul dir="auto"><li> elk.fedified.com</li></ul></li><li> 마스토덱</li><li> 트렁크스</li><li> 투티</li><li> 쓰레기통</li><li> 스타츄저</li><li> 엄니</li><li> Mastodon Glitch Edition(독립형 프런트엔드)</li><li> 망간</li><li> 더데스크</li><li> 더... </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ?‍♂️ 다른 모든 소셜 미디어 클라이언트 개발자에 대한 공지</h2></div><p dir="auto"> 이 앱의 UI 아이디어와 실험을 복사해 주세요. 나는 그들 중 일부가 꽤 좋다고 생각하고 더 많은 앱이 있다면 좋을 것입니다.</p><p dir="auto"> 개발자가 아닌 경우 좋아하는 소셜 미디어 클라이언트 개발자에게 이 앱에 대해 알리고 UI 아이디어와 실험을 복사하도록 요청하세요.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 특허</h2></div><p dir="auto"> MIT.</p> </div> <div class="zd_btn more_version_btn" data-more="확장하다" data-less="접기">확장하다</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">추가 정보</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">버전</span> <span class="text"></span> </li> <li> <span class="title">유형</span> <a class="text" href="/ko/category/list_228_1.html">기타 소스코드</a> </li> <li> <span class="title">업데이트 시간</span> <span class="text">2024-11-09</span> </li> <li> <span class="title">크기</span> <span class="text"></span> </li> <li> <span class="title">언어</span> <span class="text">간체 중국어</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">관련 애플리케이션</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">추천</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/ko/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 버전"></a> <div class="content"> <h3><a href="/ko/app/44151.html">Bidi Film and Television bdys Android 버전</a></h3> <div class="cate"> <a href="/ko/category/list_297_1.html">비디오 재생</a> </div> <div class="other"> <span>V2.1.7</span> </div> </div> </li> <li> <a class="img_item" href="/ko/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="어썰트 릴리 게임 다운로드"></a> <div class="content"> <h3><a href="/ko/app/39387.html">어썰트 릴리 게임 다운로드</a></h3> <div class="cate"> <a href="/ko/category/list_301_1.html">역할극</a> </div> <div class="other"> <span>v1.0.5</span> </div> </div> </li> <li> <a class="img_item" href="/ko/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="지식 결제 시스템 소스 코드 丨 온라인 교육 콘텐츠 유료 지식 실현 丨 비디오 Q & A 그래픽 유료 코스 미니 프로그램 맞춤화 H5"></a> <div class="content"> <h3><a href="/ko/download/28990.html">지식 결제 시스템 소스 코드 丨 온라인 교육 콘텐츠 유료 지식 실현 丨 비디오 Q & A 그래픽 유료 코스 미니 프로그램 맞춤화 H5</a></h3> <div class="cate"> <a href="/ko/category/list_55_1.html">기타 카테고리</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/ko/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="식물 vs. 좀비 서부 여행 에디션"></a> <div class="content"> <h3><a href="/ko/app/45483.html">식물 vs. 좀비 서부 여행 에디션</a></h3> <div class="cate"> <a href="/ko/category/list_299_1.html">캐주얼 퍼즐</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/ko/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 하이브리드 버전 2.3.5 내장 메뉴 버전"></a> <div class="content"> <h3><a href="/ko/app/179136.html">PVZ 하이브리드 버전 2.3.5 내장 메뉴 버전</a></h3> <div class="cate"> <a href="/ko/category/list_299_1.html">캐주얼 퍼즐</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/ko/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="피자 타워 소음 DLC 모드"></a> <div class="content"> <h3><a href="/ko/app/176855.html">피자 타워 소음 DLC 모드</a></h3> <div class="cate"> <a href="/ko/category/list_299_1.html">캐주얼 퍼즐</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/ko/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="해피 블록 하우스 패밀리 시뮬레이터 모바일"></a> <div class="content"> <h3><a href="/ko/app/176584.html">해피 블록 하우스 패밀리 시뮬레이터 모바일</a></h3> <div class="cate"> <a href="/ko/category/list_307_1.html">시뮬레이션 비즈니스</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/ko/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="수리 후크 지하철 탈출 설치"></a> <div class="content"> <h3><a href="/ko/app/176463.html">수리 후크 지하철 탈출 설치</a></h3> <div class="cate"> <a href="/ko/category/list_309_1.html">비행 사격</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/ko/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="바디캠 모바일 게임"></a> <div class="content"> <h3><a href="/ko/app/178338.html">바디캠 모바일 게임</a></h3> <div class="cate"> <a href="/ko/category/list_309_1.html">비행 사격</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">관련 정보</span> <a href="/category/list_336_1.html">전체</a> </div> <ul class="cate_list_template"> <li> <a href="/ko/wz/212997.html"> <div class="text">비디필름앤텔레비전(Bidi Film and Television) 공식 웹사이트 주소</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/ko/wz/212996.html"> <div class="text">Assault Lily International Server를 충전하는 방법</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/ko/wz/212995.html"> <div class="text">Stalker 2: Heart of Chornobyl에서 끊김 문제를 해결하는 방법</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ko/wz/212994.html"> <div class="text">Fortnite에서 Juice WRLD는 어디에 있나요?</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ko/wz/212993.html"> <div class="text">Star Wars Outlaws에서 와일드 카드 확장을 시작하는 방법</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ko/wz/212992.html"> <div class="text">베이징, 인공지능 보안 및 거버넌스 레이아웃 개선을 위해 새로운 R&D 기관 추가</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">사용자 리뷰</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 = 'ko'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = '더보기 클릭하여 로드'; $(".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 = 'ko'; let fromto = '출처'; 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>