关于网络社交软件的开发

[anonymous_coward]

你站很少看到有人做实际写代码的事情，写实际有用的项目就更少了，因此我想借助开发网络社交软件这样一个项目，把你站从一个 已经死亡的校园论坛 / 本质上是聊天群 的网站，转变成开发人员讨论技术的地方.

sveltebb 这一初步的尝试 目前做到了 基本的 CRUD 逻辑，缩进式回复界面，有 bug 的数据同步.

在这个过程中，我有一些思考

1. 理清数据同步逻辑
   为了彻底解决网络连接不稳定的特色问题，这个 forum/BBS/社区/社交软件的重要特性是离线优先 (offline-first), 这个概念包含了离线可用, 数据优先首先保存在每个用户自己的设备上 (浏览器的 indexedDB).
   在基本的数据同步功能实现后，可以增加分布式数据存储，以及 P2P 的数据传输。
   progressive / lazy & periodic data loading: e.g. 初次访问时，加载部分数据，滚动到最底下，加载更多。在需要显示用户信息的地方，如果本地没有该用户的信息 (在上一次定期数据同步时没有获取到), 展示用户 ID 直到获取到用户信息.

2. 采用现代 UI 框架，在开发上述 sveltebb 的过程中，我发现堆叠基础 html 组件和手写 css 调整界面是一件比较痛苦的事情。
   我调研了几个:

   • https://flowbite-svelte.com/
   • https://www.shadcn-svelte.com/
     我对框架的期望是，开源并积极维护 (github 最新一次 commit 应该在 1 周之内), 良好支持 svelte5, 文档网站没有白色背景加黑色代码块这样傻逼的设计

3. 采用 Tauri 将这个 Web App 分发成可安装的，可利用设备原生功能特性的跨平台 App. 潜在问题：Disable SSR

4. 用户可以随意操作自己的数据，权限系统 (moderator) 决定了别人看到你的是什么样的; 分类&标签
   把这些做完就可以将你站的 Discourse 域名换到 west.xjtu.app 并将 east.xjtu.app 尊奉为 xjtu.app 了

---

This is not a plan, it is what we do.

Let’s our get hands dirty instead of fiddling around with junky things like study or attending university.

repo:

GitHub - fokx/svelte-forum: A forum app built with Svelte

[Racitiestors (Unidentified🌌)]

学不来前端

[anonymous_coward]

这个是前端吗？
光有前端你的程序一般跑不起来 (除非你通过 API 请求存数据)
sveltekit 是一个前后端一体的框架，虽然你写的都是 js, 但一些 js 在浏览器里跑，一些是服务器上的 node 跑

除此之外，还涉及设计，界面，交互方式

从互动娱乐的角度来看，跟你开发游戏差不多

[卡冈图亚 (Breski)]

有什么更有意思的项目吗

[anonymous_coward]

有没有意思不是谁说了算的，我在写代码的过程中获得了乐趣，虽然累，但是搞到 12 点了还想搞，有点像打游戏，感觉很爽
自己搞的东西，可以点来点去的，虽然简陋了点，但是有一些没有虚度光阴的成就感
我个人感觉比刷 leetcode 有意思，leetcode 更像是做题，没有实际意义，你会解题了，so what?

[Aicnal (可樂不是真樂)]

@anonymous_coward

这个 forum/BBS/社区/社交软件的重要特性是离线优先 (offline-first), 这个概念包含了离线可用, 数据优先首先保存在每个用户自己的设备上 (浏览器的 indexedDB).

admin 还是对数据离线恋恋不舍啊

[anonymous_coward]

Myanmar coup: How the military disrupted the internet

When the network is down, it will be cool if we can still communicate wirelessly. Via bluetooth, personal hotspot / soft AP, WLAN router / Wifi mesh (even if WAN is not connected), we can still form network, though scattered and partitioned.

[Racitiestors (Unidentified🌌)]

SvelteHack

是要这个吗

[anonymous_coward]

I don’t know. Maybe let’s have a try.

[anonymous_coward]

JS 界的 UI framework 真的是看花了眼

• flowbite-svelte: 这个是我看起来最舒服的。虽然自称是 free and open-source UI component library, 但让人看不懂的是支持多种前端框架的 flowbite 有需要花不菲的一笔钱 (CNY 2000, 学生半价) 解锁全部组件的 pro 版,以及这个仓库的 commiter 几乎就是一个人 Shinichi Okada, 从 01/22 年维护至今
• Tailwind UI 由 tailwind 官方做的，但不支持 svelte 且有些组件需要花钱解锁
• daisyui 看起来挺好看，但文档自相矛盾，一会说支持 svelte，但浏览组件发现全是面向 React 的 jsx. repo owner 是工作在 Türkiye 的 Iranian
• 一位老哥 huntbyte 维护/参与维护了好几个框架：bits-ui, melt-ui, shadcn-svelte, 看提交历史，差不多是另外一个老哥 tglide 在 03/23 创建了 melt-ui, 他在 05/23 创建了把原来面向 React 的 shadcn 框架移植到 svelte 的 shadcn-svelte, 结果在搞一些新组件的过程发现得依赖自己的代码，于是创建了底层基于 melt-ui 的 bits-ui.
  shadcn-svelte 最近几个月的提交有一些社区贡献者。有人搞了一个 shadcn 的 jetbrains 插件.
• Svelte Material UI 顶部支持 ukraine 是败笔 (so do emberjs)
• smelte 简陋
• carbon-components-svelte: IBM 的设计系统。我讨厌顶部给你搞一长条黑色导航栏
• svelte-headlessui 组件太少

---

我为了比较把一些库克隆下来看看提交历史，发现有个看起来还挺好看的牛逼库 daisyui 高达接近 10GB:

uil@S /g % clone https://github.com/saadeghi/daisyui           
Cloning into 'daisyui'...
remote: Enumerating objects: 832420, done.
remote: Counting objects: 100% (35550/35550), done.
remote: Compressing objects: 100% (21664/21664), done.
Receiving objects:   1% (16384/832420), 172.68 MiB | 9.56 MiB/s 
remote: Total 832420 (delta 14465), reused 34707 (delta 13733), pack-reused 796870 (from 1)
Receiving objects: 100% (832420/832420), 8.79 GiB | 9.93 MiB/s, done.
Resolving deltas: 100% (298752/298752), done.
git clone --recursive https://github.com/saadeghi/daisyui  145.07s user 36.84s system 19% cpu 15:25.54 total

其他库大不了十几/几十 M

---

所以最终决定用什么呢？
我准备先试试 flowbite, 如果真的是付费墙就转用 shadcn

edit: 今天了解到 flowbite-svelte 的作者正在适配 svelte 5, 为了支持新的 rune 功能，搞了一个新的 UI Lib: https://svelte-5-ui-lib.codewithshin.com/ , 看 git 提交历史，每天都有提交，而老的 flowbite-svelte 上次提交还是 3 周前，所以我应该选择面向未来的 svelte-5-ui-lib

这个 app 主要面向手机用户，Responsive Design - Tailwind CSS 非常重

edit2: 大致了解了 shadcn 采取复制代码片段而非 flowbite 这种安装 npm 包的方式增加新组件，这样有利于对功能进行定制和修改，是否应该转用 shadcn?

[anonymous_coward]

在我重写界面之前，今日

• 调整了 post thread 第一个 post 的回复框和 post 文本不在同一行以避免在手机上文本竖排
• 点击回复按钮展开回复框自动聚焦输入框 (手机上表现为立刻弹出输入法)
• 显示 post 的发送时间
• 用户 post 区分 OP 和回复
  数据同步 bug 没有解决，因为我逻辑思维能力很差，每天又浑浑噩噩的，时间又碎片得很，想把这个理清楚有点难

在写这个的过程中，我发现自己想的做法很原始，例如回复功能，discourse 和小红书都是在点击后在屏幕底部弹出文本编辑器.
在重写 UI 的时候需要借鉴现有做法。

[anonymous_coward]

选 IconPack 的时候又挑花了眼
Shinichi Okada 为 svelte 适配了很多种 icon pack

Svelte Svg Icon Sets

我一一点开进行了比较，并搜索 chat/message/reply 相关图标:

• Radix Icons 图标少，无智能搜索
• https://heroicons.com/ 由 tailwindcss’ makers 制作，无智能搜索
• Ionicons: Premium Open Source Icon Pack for Ionic Framework Inoic Framework 制作，无智能搜索
• https://remixicon.com/ 有智能搜索，3020 icons, 支持 brand icon, 所有图标免费且支持商用
• https://ant.design/components/icon 部分 icon 是动态，无智能搜索
• Tabler Icons: 5750+ free vector icons for web design 有智能搜索，5718 icons 支持 brand icon, 免费
• https://flowbite.com/icons/ 无智能搜索
• Lucide 有智能搜索，全都是 outline
• Find Icons with the Perfect Look & Feel | Font Awesome 最牛逼的 icon 大全 (53,662 Icons), 很多需要付费，免费的有 2,058 Icons, 价格$100/y
• https://icons.getbootstrap.com/ 有智能搜索

接下来就是在 remix, tabler, bootstrap 里面选
tabler 搜索后图标下面不显示名字
remix github commiters’ names are mainly hanyu pinyin

[anonymous_coward]

有上交联系我了，好开心啊

可是明天又要干一堆杂活

[Hypocrisy (Administrator)]

有没有虾饺联系你

[anonymous_coward]

@Hypocrisy

虾饺

虾饺只有，没有吧

[Hypocrisy (Administrator)]

虾饺说笑了
那我怎么办

[anonymous_coward]

[anonymous_coward]

boilerplate with no CRUD logic

import boilerplate from svelte-5-ui-lib, with responsive Navbar & BottomNav, automatic dark/light mode & manual toggle in avatar dropdown, search in Navbar

todo:
fix responsiveness problem (tailwindcss)
https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens
add sidebar, handle sidebar and hamburger menu carefully
https://svelte-5-ui-lib.codewithshin.com/components/sidebar

[anonymous_coward]

今日探索了很多 Markdown Editor,
不得不感叹 Discourse 的 Markdown Editor 真的是太完美了，没有找到多么理想的开源 alternative. 所以这一项目最好能和 Discourse 共存，利用 Discourse API 进行互操作.

我的需求:

1. 支持 Latex. 如果可以再支持 tikz, mermaid 就更好了
2. 对移动装置友好，小屏幕的交互设计很考验开发者
3. 支持 svelte. 有些仅支持 react, 想要用在 svelte 项目里会影响性能
4. 界面不能太丑
5. 易于添加部件，例如保存/发送按钮。支持 dark mode.
6. 在维护，排除上次 commit 在一年前的 repo
7. 最好不要是中国人开发的

通过在 github 搜索并按 star 排序
https://github.com/search?q=svelte+markdown+editor&type=repositories
https://github.com/topics/markdown?l=javascript

排除了一些作为独立 App 使用的 repo, 实在是没找到好的

---

今天在 reddit 上找，做了一个各种编辑器 (bytemd carta milkdown quill tipex tiptap typewriter vditor) 的比较:
https://github.com/fokx/svelte-markdown-editor-comparison

最终 settle down with Lexical (with svelte binding by GitHub - umaranis/svelte-lexical: Rich text editor for Svelte based on lexical )

这个 Lexical 是 Facebook 开源的，基于 React, 但并不意味着其他框架以及没有用框架的 webapp 不能用

不得不说 Facebook 开源的产品必然是精品 ( 关于美国大互联网公司的感想 ), 这个 Lexical 的界面我觉得和 Discourse 的有的一拼 (一些商业/半开源 MD 编辑器如 CKEditor, TinyMCE 也很不错，但我不喜欢商业软件，而且它们也太贵了)

网友做的 svelte binding 有些缺憾，例如编辑器 + 菜单没有完全实现 Lexical 的全部功能，dependency 是 svelte 4(不过我很轻松地用 sv 工具 migrate to 5)

另外 js 的世界实在是太乱啦，我不能花大把时间在挑选最好的组件上，赶紧写业务逻辑吧