xxl520 发表于 2017-2-23 12:41:00

新应用上线 Snippet

  Snippet 是一款代码片段收集工具,经过一天三夜的开发终于上线了。


[*]应用地址:snippets.barretlee.com
[*]源码地址:barretlee/snippets
  由于使用原生 JS 开发,效果利用 CSS3 实现,所以如果想有一个好的视觉体验,请使用 Chrome/FireFox 预览(后续会持续优化)。


基本功能
  代码片段收集工具?你说的是 gist 么?这东西有用?昨天我在社交平台发上线预告的时候,有几个朋友提出来疑问。二话不多说,先去看线上效果。
  本应用使用 Jekyll 构建,托管在 github 上,提供了如下基本功能:


[*]Snippet 按照文件夹储存分类呈现
[*]整合在一起之后,单页面预览所有 Snippet
[*]提供了快捷的搜索功能
[*]每个 Snippet 对应 github 直接编辑的地址
[*]提供了一个添加 Snippet 的快捷入口
[*]Snippet 的语法就是 markdown ,当然也可以跟写博客似的写 snipet,嵌入 demo,嵌入说明等。
  所以只要有 github 权限,可以直接编辑代码,立即生效。

使用说明
  一个小东西,硬生生开发了十几个小时。我对很多小细节扣的比较多,虽然自己不是设计出身,但是要求自己设计出来的东西能看、好看,所以常常走简约路线,复杂的设计搞不定。为了体验更好一些,我在页面上添加了几个小功能:
  1. 添加 snippet

  进入页面之后,你可能看清楚了,左上角位置有个不是很明显的加号,点进去就会跑到 github 页面,由于是我的仓库,只有我能够直接编辑,其他人如果想添加代码段,需要 fork 过去之后,提交 PR,后续我会开发一个工具,方便其他人直接提交代码。

  新建文件夹十分方便,输入 /foldName 然后回车,github 就会自动建立一个文件夹,当然,如果文件夹存在,就会是进入文件夹。
  2. 搜索 snippet

  当我做完之后,发现找到一个自己收藏的 snippet 可真难,于是很自然的开发了一个搜索工具,搜索的范围是所有 snippet 的 title 名称,如果匹配到了就展示出来(当然,需要你点击 Enter 按钮)。
  3. 编辑 snippet

  这个快捷入口直达该 snippet 的编辑地址,可以线上编辑,commit 之后立即生效。

  这也是我为什么不使用 hexo 本地构建而使用 Jekyll 让 github 自动构建的目的(hexo 写插件用的语言是 nodejs,而 jekyll 是 ruby,所以各有利弊,本博客使用的就是 hexo 构建)。如果你喜欢这个 snippet ,可以点击编辑按钮左侧的小红心,哈哈~

后续开发
  整个应用的开发,相对还是比较仓促的,存在比较多大的问题,所以后续有空也会不断优化它,直到我和大家用的都爽~ 那么,后续需要做的事情有:


[*]响应式预览页面
[*]收集 snippet 的工具
[*]补充更多类型 snippet,提升完整度
[*]github 访问较慢,托管到 gitcafe 或者 coding
  好了,如果大家喜欢这个应用,就去 github 上 start/fork 并且提交你的 snippet 吧!!

贡献代码
  如果你想贡献代码,可以执行如下操作:


[*]fork barretlee/snippets 仓库
[*]然后执行如下命令



git clone https://github.com/{YOUR_GITHUB_NAME}/snippets.git
cd snippets
git chechout -b gh-pages
cd snippets
# 选择你想提交的文件类型,比如 html
cd html
touch {YOUR_CONTRIBUTE_FILE_NAME}.snippet
  
可以使用 markdown 语法。其中,{YOUR_CONTRIBUTE_FILE_NAME}.snippet 的格式为:



---
title: {NAME}
---
{CONTENT}

[*]提交代码



git add --all
git commit -m "add file html/{YOUR_CONTRIBUTE_FILE_NAME}.snippet"
git push origin gh-pages

[*]然后在你的 PR 页面提交一个 PR 到 barretlee/snippets 的仓库

本文转自我的个人博客:http://www.barretlee.com/blog/2015/09/29/new-application-snippet/
页: [1]
查看完整版本: 新应用上线 Snippet