Lepton -- 想做代码界的“印象笔记”

2017-02-03 10:35:26 +08:00
 CosmoX

·官网链接
·下载页面
·GitHub 项目

功能介绍

Lepton 特色

发开初衷

Lepton的初衷很简单,希望成为一款可以方便保存 snippet (代码片段)的 APP 。

作为一名码匠,平时爱总结有用的代码片段,如果能把它们保存在 Evernote (印象笔记)就好了。

可惜 Evernote 对代码块支持不好,需要在别的地方把代码块高亮,然后再贴回来,这常常导致格式混乱。新的 block 功能{}虽可以方便地把代码块和正文区分,但不能高亮语法。目前找到的最好折中方法是在Marxico使用 Markdown 记录代码,再同步保存到 Evernote 中。

有没有其他方法呢?我们可以使用 Google Drive/Dropbox ,其中 Google docs 还有支持代码高亮的 plugin 。缺点是,这种基于文件夹的管理方式并不如标签适合代码片段的检索。还有一些单机软件比如Snippets, 能实现本地代码保存,可惜不支持跨设备同步。

到 2017 年初为止,GitHub Gist可能是最适合保存代码片段的云端。(其他网站,比如 Stackoverflow ,也提供或将提供部分代码片段保存功能,但目前还不如 Gist 完善。)它不仅支持最基本的代码高亮、分享、隐私设置,还会保存代码的所有历史版本,甚至还提供了 REST API 支持。美中不足的是, Gist 没有提供标签功能,所有代码片段( Gist )按照时间顺序堆积在一起。GistBox 曾是一款不错的 Gist Web App 。可惜近来开发进度缓慢,许多 issue 不修复也不回复。加上代码不开源, community 难以参与

目前 Gist 并还没有类似 Evernote 的桌面客户端, 所以 2017 年第一小目标就是做一款基于 GitHub Gist 的桌面客户端。

开发阶段

通过调研,决定选用 Electron 框架。 Electron 把 Node.js 和 Chromium 两者结合,开发者可以使用 JavaScript 进行跨平台的桌面 APP 开发。

为了快速掌握 Electron 的开发技术,我花了一点时间阅读了另外一个开源的 Electron APP pupaFM 的 commit 历史,大概读到 60 多条吧。作者的开发流程是将 React + Redux 结合来构建前端 UI 和管理 App 的状态,使用 Webpack 来作为构建工具。为了开发过程中少踩坑,我决定采用和 pupaFM 类似的开发流程。(去 Udemy 自学了些 React+Redux ,然后又学了点 Webpack 和 Scss )

主要开发阶段历时 3 周,前两周负责功能实现,第三周负责优化界面。第三周后的工作主要负责解决用户反馈的 bug 和搭建 GitHub Page 。后来又在基本功能基础上加入了个性化标签本地搜索

>>语法高亮

我采用Highlight.js来实现语法高亮。由于作者很傲娇地不支持 line number,所以 line number 部分由自己写。其中难点是如何让用户复制黏贴代码时不把 line number 也一同贴上。我最后使用了data-pseudo-content来标记行数解决了这个问题,这是具体的代码

>>React + Redux 的 state 选择

刚开始开发时候,把一些 Dialog 的 show/hide 作为 React component 的 local state ,以为它们和 app 的全局 state 无关,应该放在 component 中。后来,随着 dialog 数目的增多( search dialog 、 create dialog 、 edit dialog ),属于不同 component 的 dialog 有时候会出现相互覆盖、难以协调的现象。如果一开始就把它们的 state 作为 Redux 的全局 state ,就可以有效避免这些问题。这是一点小经验。

>>标签实现

Gist 本身并不支持标签。我一开始想法是通过一个 scret gist 来保存和同步标签记录。后来发现这个方法效率不高,每次标签变化都要把所有标签记录重新写入这个 scret gist ,而且出错后容易丢失记录,最后弃用。目前方法是通过 description 部分的特殊字符#tags来保存自定义的标签。优点是标签分散到每个 gist 中,每次只需要更新该 gist 对应部分的标签即可,而且可读性高,还能提高本地搜索的准确性。

>>本地搜索

Lepton的本地搜索采用了elasticlunr.js模块。遗憾的是,它目前只支持英文的整词搜索,而且我只让它搜索 Description 部分(因为代码部分常构不成整词)。

>>自动更新

Electron 自带了一个autoUpdater模块,可以自动检测 server 上的新版本,并自动在后台下载。目前这部分还没有集成到Lepton中,也许以后会加上。

>>图标设计

作为非 Designer ,能把图标制作到这个程度我也是很满意的了。制作方法是先画一个逗号,然后去下面第一个网站把图片转换成 svg ,然后再去第二个网站把 svg 文件转换成 Material 风格的图标。

感谢

25464 次点击
所在节点    分享创造
115 条回复
CosmoX
2017-02-04 02:33:08 +08:00
@macroideal 跨平台 SDK ( Win+macOS+Linux ),最近要开始支持 Node.js 。前端是自学的。
rashawn
2017-02-04 07:23:24 +08:00
建议楼主开发从各种编辑器 ide 桌面 capture 代码的插件 如果还是要复制粘贴的话 吸引力不大
scnace
2017-02-04 08:37:16 +08:00
听说以后能更加方便地抄自己的代码了 我就滚进来了(之前也是用 gist 来抄自己的代码的😂
CosmoX
2017-02-04 09:07:25 +08:00
@rashawn 谢谢建议。估计个人不会往这边延伸,但是欢迎 pull request :)
CosmoX
2017-02-04 09:32:09 +08:00
@scnace 能抄自己就不抄别人的哈~
SoulGem
2017-02-04 09:48:42 +08:00
赞一个~加油
CosmoX
2017-02-04 10:05:20 +08:00
*** v1.0.0-beta.4 *** Released
1. 呐,大家要的 markdown rendering
2. 点击头像转跳 GitHub 主页
3. 修复某些情况下登录失败的 bug
4. 修复 Objective-C 高亮失败的 bug

https://github.com/hackjutsu/Lepton/releases/tag/v1.0.0-beta.4
xwartz
2017-02-04 10:12:40 +08:00
我就奇怪这两天 PupaFM 怎么 star 数多起来了,原来是这样子,谢谢楼主。
CosmoX
2017-02-04 10:18:35 +08:00
@xwartz 谢谢 PupaFM 这么给力的 project !
gkiwi
2017-02-04 11:27:43 +08:00
@CosmoX 感谢!

不过现在困住了。。
直接下载的 beta4.dmg 打开后,通过 github 登录,第一次是个授权没太注意,好像是直接同意了(或者没同意?)。之后显示 Sync success 通知,然后又变成需要 github 登录的界面了。。反复如此~
gkiwi
2017-02-04 11:29:18 +08:00
@gkiwi
系统: macOS 10.12.3
不过,我想着是不是我没同意导致的。。
CosmoX
2017-02-04 11:33:56 +08:00
@gkiwi 登录一直是个很难 debug 的地方。你可以去 the GitHub Issue 页面描述一下问题吗? https://github.com/hackjutsu/Lepton/issues
xream
2017-02-04 11:48:12 +08:00
@gkiwi #71
@CosmoX #72 同样的现象 就不多说了
CosmoX
2017-02-04 11:53:42 +08:00
@xream 我大概猜到问题所在 我先去验证一下想法
billion
2017-02-04 12:24:41 +08:00
先给你 82 分,剩下 18 分以 666 的形式给你。
gkiwi
2017-02-04 12:49:16 +08:00
@CosmoX
https://github.com/hackjutsu/Lepton/issues/48 已给。
另外我尝试了 beta3 ,直接 Sync Fail ,当然你这边应该解决了( https://github.com/hackjutsu/Lepton/issues/46 )~
CosmoX
2017-02-04 13:42:47 +08:00
@xream 在 @gkiwi 的帮助下, bug 修复了。 https://github.com/hackjutsu/Lepton/issues/48

原因是当 Gist 的 description 缺失时, GitHub Gist API 有时候返回 null ,有时候返回空字符串。 Lepton 处理了第二种,漏了第一种。现在上传了修复 bug 的版本,欢迎测试:)

https://github.com/hackjutsu/Lepton/releases/tag/v1.0.0-beta.4
chemzqm
2017-02-04 14:10:49 +08:00
@CosmoX #22 我估计没什么时间写 PR ,你可以用 https://github.com/koichik/node-tunnel 这个模块,请求前做为参数传进去就完了,你做的这个 GUI 应用大概需要额外搞个配置界面让用户填配置。
SunFarrell
2017-02-04 14:36:52 +08:00
@CosmoX 本来想做一个和楼主想法一样的东西的,被楼主抢先了!
不过我们想法还真是相似,最近工作再用 electron + react + redux 重构之前公司 electron 的产品,楼主的项目给了我不少启发!!!!!
CosmoX
2017-02-04 16:07:10 +08:00
@SunFarrell 挺有意思的,欢迎一起进步:)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/337825

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX