关于网络社交软件的开发
你站很少看到有人做实际写代码的事情，写实际有用的项目就更少了，因此我想借助开发网络社交软件这样一个项目，把你站从一个 已经死亡的校园论坛 / 本质上是聊天群 的网站，转变成开发人员讨论技术的地方.
sveltebb 这一初步的尝试 目前做到了 基本的 CRUD 逻辑，缩进式回复界面，有 bug 的数据同步.
在这个过程中，我有一些思考 :thinking_face_spider:
-
理清数据同步逻辑
为了彻底解决网络连接不稳定的特色问题，这个 forum/BBS/社区/社交软件的重要特性是离线优先 (offline-first), 这个概念包含了离线可用, 数据优先首先保存在每个用户自己的设备上 (浏览器的 indexedDB).
在基本的数据同步功能实现后，可以增加分布式数据存储，以及 P2P 的数据传输。
progressive / lazy & periodic data loading: e.g. 初次访问时，加载部分数据，滚动到最底下，加载更多。在需要显示用户信息的地方，如果本地没有该用户的信息 (在上一次定期数据同步时没有获取到), 展示用户 ID 直到获取到用户信息. -
采用现代 UI 框架，在开发上述 sveltebb 的过程中，我发现堆叠基础 html 组件和手写 css 调整界面是一件比较痛苦的事情。
我调研了几个:- https://flowbite-svelte.com/
- https://www.shadcn-svelte.com/
我对框架的期望是，开源并积极维护 (github 最新一次 commit 应该在 1 周之内), 良好支持 svelte5, 文档网站没有白色背景加黑色代码块这样傻逼的设计
-
采用 Tauri 将这个 Web App 分发成可安装的，可利用设备原生功能特性的跨平台 App. 潜在问题：Disable SSR
-
用户可以随意操作自己的数据，权限系统 (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:
学不来前端
有什么更有意思的项目吗 🤔
Srotseiticar 这个是前端吗？🤣
光有前端你的程序一般跑不起来 (除非你通过 API 请求存数据)
sveltekit 是一个前后端一体的框架，虽然你写的都是 js, 但一些 js 在浏览器里跑，一些是服务器上的 node 跑
除此之外，还涉及设计，界面，交互方式
从互动娱乐的角度来看，跟你开发游戏差不多
Breski 有没有意思不是谁说了算的，我在写代码的过程中获得了乐趣，虽然累，但是搞到 12 点了还想搞，有点像打游戏，感觉很爽
自己搞的东西，可以点来点去的，虽然简陋了点，但是有一些没有虚度光阴的成就感
我个人感觉比刷 leetcode 有意思，leetcode 更像是做题，没有实际意义，你会解题了，so what?
anonymous_coward, post:1, topic:13872
这个 forum/BBS/社区/社交软件的重要特性是离线优先 (offline-first), 这个概念包含了离线可用, 数据优先首先保存在每个用户自己的设备上 (浏览器的 indexedDB).
admin 还是对数据离线恋恋不舍啊 :magic_wand_grin:
ぜーんぶ弾けなーい！
Soyo34325 https://www.bbc.com/news/world-asia-55889565
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.
Srotseiticar I don't know. Maybe let's have a try.
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 主要面向手机用户，https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens 非常重
edit2: 大致了解了 shadcn 采取复制代码片段而非 flowbite 这种安装 npm 包的方式增加新组件，这样有利于对功能进行定制和修改，是否应该转用 shadcn?
在我重写界面之前，今日
- 调整了 post thread 第一个 post 的回复框和 post 文本不在同一行以避免在手机上文本竖排
- 点击回复按钮展开回复框自动聚焦输入框 (手机上表现为立刻弹出输入法)
- 显示 post 的发送时间
- 用户 post 区分 OP 和回复
数据同步 bug 没有解决，因为我逻辑思维能力很差，每天又浑浑噩噩的，时间又碎片得很，想把这个理清楚有点难
在写这个的过程中，我发现自己想的做法很原始，例如回复功能，discourse 和小红书都是在点击后在屏幕底部弹出文本编辑器.
在重写 UI 的时候需要借鉴现有做法。
选 IconPack 的时候又挑花了眼
Shinichi Okada 为 svelte 适配了很多种 icon pack
https://svelte-svg-icons.codewithshin.com/
我一一点开进行了比较，并搜索 chat/message/reply 相关图标:
- https://www.radix-ui.com/icons 图标少，无智能搜索
- https://heroicons.com/ 由 tailwindcss' makers 制作，无智能搜索
- https://ionic.io/ionicons Inoic Framework 制作，无智能搜索
- https://remixicon.com/ 有智能搜索，3020 icons, 支持 brand icon, 所有图标免费且支持商用
- https://ant.design/components/icon 部分 icon 是动态，无智能搜索
- https://tabler.io/icons 有智能搜索，5718 icons 支持 brand icon, 免费
- https://flowbite.com/icons/ 无智能搜索
- https://lucide.dev/icons 有智能搜索，全都是 outline
- https://fontawesome.com/icons 最牛逼的 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
有上交✌️联系我了，好开心啊 😁
可是明天又要干一堆杂活 :joy_smiling_face_with_tear:
anonymous_coward 有没有虾饺✌联系你
rotartsinimdA rotartsinimdA, post:14, topic:13872, username:Hypocrisy虾饺只有🐭🐭，没有✌🏿吧
虾饺✌️
anonymous_coward 虾饺✌️说笑了😭😭😭
那🐭🐭我怎么办
anonymous_coward 🦐 🥟 🐁 🐁 ✌️
boilerplate with no CRUD logic
https://github.com/fokx/svelte-forum/commit/97c33e7f95de988f3c1b338ce48297a16893681b
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
今日探索了很多 Markdown Editor,
不得不感叹 Discourse 的 Markdown Editor 真的是太完美了，没有找到多么理想的开源 alternative. 所以这一项目最好能和 Discourse 共存，利用 Discourse API 进行互操作.
我的需求:
- 支持 Latex. 如果可以再支持 tikz, mermaid 就更好了
- 对移动装置友好，小屏幕的交互设计很考验开发者
- 支持 svelte. 有些仅支持 react, 想要用在 svelte 项目里会影响性能
- 界面不能太丑
- 易于添加部件，例如保存/发送按钮。支持 dark mode.
- 在维护，排除上次 commit 在一年前的 repo
- 最好不要是中国人开发的
通过在 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 https://github.com/umaranis/svelte-lexical )
这个 Lexical 是 Facebook 开源的，基于 React, 但并不意味着其他框架以及没有用框架的 webapp 不能用
不得不说 Facebook 开源的产品必然是精品 ( https://xjtu.app/t/topic/1569 ), 这个 Lexical 的界面我觉得和 Discourse 的有的一拼 (一些商业/半开源 MD 编辑器如 CKEditor, TinyMCE 也很不错，但我不喜欢商业软件，而且它们也太贵了)
网友做的 svelte binding 有些缺憾，例如编辑器 + 菜单没有完全实现 Lexical 的全部功能，dependency 是 svelte 4(不过我很轻松地用 sv 工具 migrate to 5)
另外 js 的世界实在是太乱啦，我不能花大把时间在挑选最好的组件上，赶紧写业务逻辑吧