视觉

1小时编写一个支持七牛上传的 markdown 客户端1(技术实现篇)

摘要: 一个小时如何编写一个支持七牛上传的 markdown 编辑器的客户端。如何能从零快速学习 nodejs,并付诸实践。介绍说是一个小时,前前后后加上代码重构,优化代码,也用了一两天得时间,但在写第一版代码的时候,的确用了很短的时候。https://github.com/zhaopengme/ndpediter技术点在做这个的时候,出发点是因为 hexo 编辑的时候,我需要使用七牛的图片外链,但是没有一个好用的支持七牛图片外链的工具。就有了自己动手做一个念头,在技术选择的时候,我最熟悉的是后台 java,前端 javascript 的搭配,因为要写一个客户端,首先想到的时候用纯 java 来实现,之前我也用 java 写过一个支持 markdown 的笔记软件 jnote ,或者做一个 web 网站,再加一个浏览器的壳,在几年之前,我写过这样的一个 demo https://github.com/zhaopengme/jbrower-demo,就是用 Mozilla 内核的浏览器框架,嵌入 web 网站的方式。可目前已经有了 node-webkit 这样的技术,就不需要的我之前的想法。用了node-webkit,搭配最好的就是 nodejs 了,我就放弃了用 java 来实现的方式,虽然我不会 nodejs,但这也给了我一个学习的 nodejs 的机会了。那就开始上手了。在内嵌 web 系统和纯 nodejs 的选择在开始设计的时候,依照我原来的想法,是采用内嵌一个 web 系统,通过 node-webkit 来打开内嵌的 web 系统来实现的,所有我开始学习 express 的文档。看了 http://www.expressjs.com.cn/ 文档后,我尝试着使用纯 nodejs 的方式来实现我的需要,读写文件,图片保存,图片上传,发现也是可以的,其实开头想想也是可以的,只是自己一个惯性思维导致的。技术干货列表nodejsnode-webkitqiniu-nodejs-sdkyeomangenerator-node-webkitlayereditormd1. nodejs主要用来实现文件的读写,图片的上传。2. node-webkit基于node.js和chromium的应用程序实时运行环境,可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。从网上扒的介绍,为了占位。3. qiniu-nodejs-sdkhttps://github.com/qiniu/nodejs-sdk.v6七牛的 nodejs 的 api。4. yeomanhttp://yeoman.io/Yeoman 是 Google 的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。Yeoman 的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系。也是从网上扒的介绍,也是为了占位。Yeoman 可以说是对已经成为体系的流程工具的封装,更简单说是”一键开发,一键部署”等等。是 generator-node-webkit 使用的前提。5. generator-node-webkithttps://github.com/Dica-Developer/generator-node-webkitgenerator-node-webkit 是基于 Yeoman 的工具,可以”一键”创建 node-webkit 的开发环境,”一键”打包环境。6. layerhttp://layer.layui.com/一个 jquery 的弹出框插件,我觉得它好用,就单独拉出来了,好东西,值得推荐。比如我得图片上传 配置 关于 保存提醒等都是使用它的。7. editormdhttps://github.com/pandao/editor.md编辑器实现的核心,实现编辑器最为主要的组成部分,在各种 markdown 实现的各种版本中,最优秀的编辑器之一,10分推荐。在开始实现之前,最好先看一下以上的几种技术的说明,方便我们理解。技术实现篇环境准备nodejs 环境作为 hexo 的使用者,nodejs 肯定会有的,即使没有,那自己安装吧,这个很容易。https://nodejs.org/。我装得 mac 版,不会告诉你用 mac 装很多东西都是用 brew 可以一键安装的。yeoman 安装npm install -g yo 这是官方的安装,有可能安装成功了,之后 node-webkit 安装会出现问题,最好用这个 npm i -g yo generator-karma。generator-node-webkit 安装npm install generator-node-webkit -g 用 npm 都是一行命令搞定,很容易吧!用 mac 的童鞋,有没有装 brew 呢?装个 brew 吧!无论是装13还是为了自己开发方便。生成开发环境以上 yeoman 和 generator-node-webkit 我们采用的都是安装全局的办法。1. 自动创建目录结构yo node-webkit 就能生成好我们需要的环境目录了,好吧!这里录个 gif 给大家看看。注意mac 现在基本都是64位的了,不要选择32位的。这个要下载 对应平台的资源,比较慢,我就停止录了。当前创建完成后,就会有下面这样的界面了。2. 下载依赖npm install & bower install 按照提醒,就可以把相关的依赖全部安装了。如果提醒没有 bower,那就 npm install bower -g,bower 也是个常用工具,也作为全局安装吧。3. 下载项目依赖前几个步骤,可以叫做工程依赖,就是每一个这样的工程,都需要这样的步骤的,这个步骤是说,我们项目需要的依赖。比如 qiniu-nodejs-sdk 就是我们项目需要的,可以通过 npm install qiniu来安装,如果我们需要 bootstrap,那么就可以用 bower install bootstrap或者npm install bootstrap…

从 wordpress 转移到 hexo

摘要: 记录一下建博的历程,再记录一下从wordpress转移到hexo的步骤.从08年开始博客后,用过不少的博客程序,pjblog zblog typecho wordpress gae,还用过一些博客服务,35blog Google博客 点点博客 sae等.各有各的优势,反正是掏钱的稳定放心,免费的不稳定.最近用过的sae,用sae原因是当时有微博认证,用sae基本可以免费使用.自从sae修改了策略之后,送得1万豆也在前几天用完了.现在的我懒得折腾这些,就开始寻找了屌丝使用.一个免费,能绑定域名,还能少折腾的方式.选择 github 的好处github 免费提供了一个 github Pages 服务,300M 的空间,足够屌丝们使用.可以绑定域名.现在流行使用这个,程序员用这个感觉有点 B 格.可以使用 markdown 来编写.选择哪种 github pages 的博客程序可以选择有 jekyll octopress hexo 等一些, 我调查了一些, jekyll octopress 使用比较复杂, hexo 生成静态文件速度快,但我700多篇文章,也用了1分多钟.从 wordpress 转移到 hexo进入 wordpress 后台设置,选择导出,会打出一个wordpress.xml 文件.安装 hexo-migrator-wordpress 插件,执行hexo migrate wordpress wordpress.xml, 就会转化成 .md 格式化的文件.这个过程中,可能会有些错误,无法转换的问题,一般都是 wordpress 文章有一些特殊字符的问题,根据错误修改吧!如果成功,那么你只需要执行 hexo g 和 hexo d 就可以发布了.注意重要的事情要说三次,从 wordpress 转成 hexo 会丢失留言数据. 重要的事情要说三次,从 wordpress 转成 hexo 会丢失留言数据. 重要的事情要说三次,从 wordpress 转成 hexo 会丢失留言数据.

漂亮的loading页面

漂亮的loading页面,用 SVG 画,非常漂亮,适合用在 Web APP 中.demo[repo owner=”codrops” name=”PageLoadingEffects”]

Haroopad 最好用的markdown编辑器

Haroopad 最好用的markdown编辑器跨平台,代码高亮,Vim 键绑定,多列模式,行号,折叠, Github Flaverd Markdown 等功能.

git在线学习

在线学习git命令,15分钟就能会.网址: https://try.github.io

5.1三对新人磊子、子鹏和同桌

5.1是个好日子,一下子就三同学结婚,一个是大学同学陈磊,另外个是高中的同桌吕红娟,还有个子鹏。陈磊啊,好玩的一男娃子,那一笑,怎么那么賊啊!祝福你们哈!┏(^0^)┛同桌啊!叫吕红娟,习惯叫同桌了,陕北其实挺不错的,虽然一年就刮两次风,留在那行了!同样祝福你啊!┗(^0^)┓ 还有一个子鹏,这货的昵称不好听,还是叫名字吧!不习惯叫名字啊!很自恋自己的鹰钩鼻,婚纱照很漂亮哈!继续祝福你们!^V^

nexus7入手

平板一直关注了很久了,关键是不知道平板对我来说,拿它来做什么用。所以,一直也就是关注,也没有决心买了。终于这次出手了,N7,到货了!照片是原生的android系统,不习惯,不习惯,直接用刷机精灵,刷成了MIUI了,MIUI是用习惯了,可MIUI的N7的版本基本就是移植了手机系统,图标大的一米,关键是MIUI习惯了,期待MIUI N7的改进!一直以来要么电脑打字,要么手机打字,最后呢,提笔老忘字!这个也是常常用电脑打字人的通病。今年以来,如果能写字的地方,我基本就是用笔写字的。常常做一些笔记之类的,都是写在本子上面,本子用完就扔,也不做保留,很多有价值的东西,也都没保留下来。这个也是我买平板的原因,给平板的使用定位,一个是阅读,手机阅读,有些吃力哈!另外很重要的原因就是,以后的笔记都用平板来写,有道的手写功能不错,写的字太大,耗费时间。

Sublime Text 2 注册码/破解方法

Sublime Text 2 是我现在编写各种文本,前端开发的主要工具,程序员的必备神器啊!开发者相当的大方,虽然是收费软件,但可以一直使用,很久才会有个弹出框,提醒你去购买,对于一直使用破解软件的人,正版的价格还是有些高了。想不出现这个弹出框,那就破解吧!Sublime Text 2.0.1 2217 版本破解注册方法:准备工具: 十六进制编辑器,这里以WinHex为例。不要使用本身的Sublime Text来编辑。安装最新的Sublime Text 2.0.1 2217版本最好先将sublime_text.exe备份,然后用 WinHex十六进制编辑器打开sublime_text.exe文件,跳到 000CBB70 那一行,将该行的 8A C3 修改为 B0 01 然后保存即可。这种方法不用注册码,修改完后保存即可破解注册成功。如果修改后程序无法运行或破解失败,请将还原备份WinHex(16进制编辑器): http://www.xiazaiba.com/html/427.html用 WinHex 编辑 sublime_text_backup.exe 文件, 跳到 000CBB70 那一行,将该行的 8A C3 修改为 B0 01 然后保存破解注册成功

TTS-API.com —— 高质量的 TTS 在线 API

在oschina上面早上看到的,把文字转换成语音,不幸的是,目前不支持中文。有个支持中文的技巧,把中文写成拼音,比如“你好”,就写“ni hao”!试试发音吧!你好听起来,典型的老外说汉语!

cool左手鼠标指针

右手用的多了,有时感觉不舒服,就换左手试试.鼠标指针都是朝左的,用左手看着真不舒服,用这个,左手专用鼠标指针. 下载: 百度网盘