摘要: 一个小时如何编写一个支持七牛上传的 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…
漂亮的loading页面,用 SVG 画，非常漂亮，适合用在 Web APP 中.demo[repo owner=”codrops” name=”PageLoadingEffects”]
第1集:锦绣华南 http://t.cn/zWZF3Er第2集:云翔天边 http://t.cn/zWZF13x第3集:神奇高原 http://t.cn/zWZFB3A第4集:风雪塞外 http://t.cn/zWZFrmJ第5集:沃土中原 http://t.cn/zWZFdYW第6集:潮涌海岸[去旅行]
from: http://www.html-js.com/article/2134Underscore 简介Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。Underscore提供了80多个函数,包括常用的: map, select, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能, 强类型相等测试, 等等. 在新的浏览器中, 有许多函数如果浏览器本身直接支持,将会采用原生的,如 forEach, map, reduce, filter, every, some 和 indexOf.个人感受Underscore 是一个我坚持看完的js源代码，他简单、易懂、实用，细心观察就会发现，每个函数都很简短，作为开源阅读源码，我相信Underscore是不错的选择笔记1：大量的这种方法，应该是 防止原始方法被篡改，同时加快运行速度，而且在严格模式，也不让通过arguments.callee 调用相关方法的原因吧var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;// Create quick reference variables for speed access to core prototypes.varpush = ArrayProto.push, slice = ArrayProto.slice, concat = ArrayProto.concat, toString = ObjProto.toString, hasOwnProperty = ObjProto.hasOwnProperty;2：void 0，开始还好奇为啥用void 0，是undefined 的缩写？后来一打听才知道，原来undefined在旧版本的浏览器中是不可以被赋值的，而新版本的浏览器是可以被赋值的，为了准确的判断，所以就有了void 0_.first = _.head = _.take = function(array, n, guard) { if (array == null) return void 0; if ((n == null) || guard) return array[0]; if (n < 0) return []; return slice.call(array, 0, n);};3：代码短小精干Underscore 代码短小精干没的说，真是精品除了 eq 这个方法长点外 其他方法都很短4：遗憾 这次走读 没记录笔记没调试本菜鸟第一次走读源码 同时欢迎大家把源码走读 放到这个专栏下 O(∩_∩)O~
Haroopad 最好用的markdown编辑器跨平台，代码高亮，Vim 键绑定，多列模式，行号，折叠， Github Flaverd Markdown 等功能.
Notification js提醒插件,有很有炫的效果.demo: http://tympanus.net/Development/NotificationStyles [repo owner=”codrops” name=”NotificationStyles”]
from:http://blog.prosight.me/blogs/984/名称解释0、单一职责原则（SRP）就一个类而言，应该仅有一个引起它变化的原因。一、”开放－封闭”原则(OCP)在软件设计模式中，这种不能修改，但可以扩展的思想也是最重要的一种设计原则。即软件实体（类、模板、函数等等）应该可以扩展，但是不可修改。【通俗】：设计的时候，时刻考虑，尽量让这个类是足够好，写好了就不要去修改了，如果新需求来，我们增加一些类就完事了，原来的代码能不动则不动。二、里氏代换原则（LSP）1.一个软件实体如果使用的是一个父类的话，那么一定适用于该子类，而且他觉察不出父类对象和子类对象的区别。也就是说，在软件里面，把父类都替换成它的子类，程序的行为没有变化。【一句话】：**子类型必须能够替换掉他们的父类型。**三、依赖倒置原则(DIP)1.高层模块不应该依赖于底层模块。两个都应该依赖抽象。2.抽象不应该依赖于细节，细节依赖于抽象（【白话】：针对接口编程，不要针对实现编程。四、接口隔离原则（ISP）1.使用多个专门的接口比使用单一的总接口总要好。换而言之，从一个客户类的角度来讲：一个类对另外一个类的依赖性应当是建立在最小接口上的。2．过于臃肿的接口是对接口的污染。不应该强迫客户依赖于它们不用的方法。五、合成/聚合复用原则（CARP）尽量使用合成/聚合，尽量不要使用类继承。【聚合】：表示一种弱的拥有关系，体现的是A对象可以包含B对象，但B对象不是A对象的一部分。【合成】：一种强的拥有关系，提现了严格的部分和整体的关系，部分和整体的生存周期一致。六、迪米特法则（LoD）最少知识原则强调类之间的松耦合。即：如果两个类不必彼此直接通信，那么着两个类就不应当发送直接的相互作用。如果其中一个类需要调用另一个类的某一个方法的话，可以通过第三者转发这个调用。
作者是阿里巴巴安全工程师@卷成团变成个球的CasperKid君 。文章是CK在2011年编写的，在当下仍具有非常重要参考价值。很多web 站点存在上传验证方式不严格的安全缺陷,是web 渗透中关键的突破口 ，站长小伙伴要注意哦！0x00 上传检测流程概述0x01 客户端检测绕过(javascript 检测)0x02 服务端检测绕过(MIME 类型检测)0x03 服务端检测绕过(目录路径检测)0x04 服务端检测绕过(文件扩展名检测)黑名单检测白名单检测.htaccess 文件攻击0x05 服务端检测绕过(文件内容检测)文件幻数检测文件相关信息检测文件加载检测0x06 解析攻击网络渗透的本质直接解析本地文件包含解析.htaccess 解析web 应用程序解析漏洞及其原理0x07 上传攻击框架轻量级检测绕过攻击路径/扩展名检测绕过攻击文件内容性检测绕过攻击上传攻击框架结语下载: Upload_Attack_Framework.pdf
整理了下做的一个笔记软件,以开放开源的态度做的.jnote是一个开源的笔记软件,类似于Evernote,wiz,麦库,界面也是参考他们做的.当初做只是为了做一个自己可以定制的笔记软件.目前完成的功能:1.新建日记,参考wiz的日记功能,这个功能很实用,可以按照年月分类.2.新建笔记,是一个笔记软件最基本的功能.3.编辑支持高级html编辑器 简单html编辑器 markdown编辑器4.分类支持无限级分类5.简单搜索6.缩小到托盘7.支持多标签8.支持笔记阅读模式9.阅读模式是可以和wiz一样,定义阅读的主题.以后的计划1.添加标签功能2.添加附件功能3.搜索功能加强,计划采用lucene,使用OSChina 网站的全文搜索框架源码做了测试,完成可以使用.4.同步,在选择上面,测试过dropbox的api,计划使用dropbox.5.和evernote 有道 麦库打通api接口,这个还没有测试过,evernote应该是首选.6.用户登录,头像…7.跨平台8…….目前存在的问题1.笔记字数,使用sqlite数据库,存储的文字多少还存在考量.2.编辑器还不完美,编辑器的切换还对笔记的格式存在转换问题.3.内嵌浏览器的问题,这个是java的硬伤,目前使用IE内核,Webkit 由于不支持linux就放弃了,打算使用JF X的内嵌浏览器来实现,提高性能和解决跨平台的问题.4……采用的技术1.界面使用BeautyEye,界面很漂亮2.nutzDao,小巧灵活.3.数据库使用sqlite,4.编辑器使用ueditor wysihtml5 pagedown做笔记软件真不容易,特别还是用java来做.在13年3月份差不多已经这个样子了,之后在忙其他事情,有时间就会继续完善的.看几张截图来看看.项目地址:http://git.oschina.net/imzhpe/jnote