原创

1小时编写一个支持七牛上传的 markdown 客户端3(打包发布篇)

摘要: 一个小时如何编写一个支持七牛上传的 markdown 编辑器的客户端。本地主要是讲解下最后的打包发布,和里面的一些注意内容。本篇的内容不会太多,就是几个打包命令的执行。我们打开 Gruntfile.js 这个文件。会看到有很多 grunt.registerTask 这样的代码,用过 grunt 的应该知道,这就是注册的任务,grunt.registerTask('dist-win' 例如这个,执行grunt dist-win就会打包成 window 平台的文件,对应的也就有 mac 平台 、linux 平台的。注意打包的时候,要注意是否下载了对应的平台包。在第一篇 文章中,有说明下载平台的包,否则是无法打包成功的。注意打包的时候,把'jshint',给注释掉。这个是Javascript代码验证工具,用来检测你的代码规范性,合理性的。比如你在 js 中写a==b,用jshint的时候,就必须是a===b,采用恒等的方式。还有很多要求,用jshint,你的代码习惯会越来越好。如果对这些不是特别严格,也可用去掉。未来计划目前已经足够我使用,但是还有很多缺点,比如打开文章,没有插入 hexo 的文章模板,有些弹出框显示不完整等等。在以后,会慢慢加进来的。

1小时编写一个支持七牛上传的 markdown 客户端2(代码优化篇)

摘要: 一个小时如何编写一个支持七牛上传的 markdown 编辑器的客户端。继续上次的内容,本次内容主要是讲解代码优化,如何进行模块化的拆分。写文章,尤其是技术类的文章,我们是需要将文章进行一个条理性的说明,我依旧是采用按要点来说明。要点模块化把这个放在签名,主要是为了说明一个宏观的思维,人干事情是需要一种思维的。万事万物皆有模块,人的手、足、眼、鼻、耳等等都是模块,东西南北是模块,天、地都是模块。文章的分段落,分篇章也是模块,咱们前端的拆分文件当然也是模块,在一个文件中,写不同的函数,也是一种模块。就是看你把这个模块拆分有多细,最总要的是要合适,适度。我承认我在 ndpeditor 中,是有些过度模块化了,当然是有原因的,原因看下面。优化原因习惯,应该说是有代码洁癖。看到代码不整齐,没有逻辑的代码,就想动手整一整。把简单文件当作一个项目去做,项目是需要有结构意识。代码的可读性,代码是让机器执行,但需要人来读的。开源的代码,更应该有可读性。功能的可扩展性,当我们基础结构搭建好了,之后代码的可扩展功能就越强。…其实还有很多,但是切记,切记,切记,不要过渡设计,不要过度优化。代码拆分优化前代码demo.js 这个文件,我添加了些注释,看一遍应就能懂了,200行的代码。优化后代码优化后的代码我拆分如下几个:https://github.com/zhaopengme/ndpediter/tree/master/app/js 代码内容到这里直接看,都是几十行的代码,不多,而且我的注释足够,看看就懂了。模块划分app.js 应用启动模块。config.js 配置文件的保存读取。editor.js 也属于一个核心部分,就是对编辑器进行初始化,设置,事件处理。index.js 应用加载启动模块,其实也可以和app.js进行合并的。util.js 工具类。麻雀虽小五脏俱全。至少我保证了一个完整项目结构的完整性。结语本篇内容不多,关键内容还就是,代码要有逻辑,有条理,分模块,当然,还需要多看代码,多练。下一篇,说下 node-webkit 的打包发布,内容也不会太多,但是合并到本篇,和本篇的内容不符,还是单独拆分来吧!

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…

总结 web 应用中常用的各种 cache

from : https://ruby-china.org/topics/19389总结web应用中常用的各种cachecache是提高应用性能重要的一个环节,写篇文章总结一下用过的各种对于动态内容的cache。文章以Nginx,Rails,Mysql,Redis作为例子,换成其他web服务器,语言,数据库,缓存服务都是类似的。以下是3层的示意图,方便后续引用: +-------+1 | Nginx | +-+-+-+-+ | | | +---------------+ | +---------------+ | | | +---+---+ +---+---+ +---+---+2 |Unicorn| |Unicorn| |Unicorn| +---+---+ +---+---+ +---+---+ | | | | | | | +---+---+ |3 +-------------+ D B +-------------+ +-------+1. 客户端缓存一个客户端经常会访问同一个资源,比如用浏览器访问网站首页或查看同一篇文章,或用app访问同一个api,如果该资源和他之前访问过的没有任何改变,就可以利用http规范中的304 Not Modified 响应头(http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3.5 ),直接用客户端的缓存,而无需在服务器端再生成一次内容。在Rails里面内置了fresh_when这个方法,一行代码就可以完成:class ArticlesController def show @article = Article.find(params[:id]) fresh_when :last_modified => @article.updated_at.utc, :etag => @article endend下次用户再访问的时候,会对比request header里面的If-Modified-Since和If-None-Match,如果相符合,就直接返回304,而不再生成response body。但是这样会遇到一个问题,假设我们的网站导航有用户信息,一个用户在未登陆专题访问了一下,然后登陆以后再访问,会发现页面上显示的还是未登陆状态。或者在app访问一篇文章,做了一下收藏,下次再进入这篇文章,还是显示未收藏状态。解决这个问题的方法很简单,将用户相关的变量也加入到etag的计算里面: fresh_when :etag => [@article.cache_key, current_user.id] fresh_when :etag => [@article.cache_key, current_user_favorited]另外提一个坑,如果nginx开启了gzip,对rails执行的结果进行压缩,会将rails输出的etag header干掉,nginx的开发人员说根据rfc规范,对proxy_pass方式处理必须这样(因为内容改变了),但是我个人认为没这个必要,于是用了粗暴的方法,直接将src/http/modules/ngx_http_gzip_filter_module.c这个文件里面的这行代码注释掉,然后重新编译nginx: //ngx_http_clear_etag(r);或者你可以选择不改变nginx源代码,将gzip off掉,将压缩用Rack中间件来处理: config.middleware.use Rack::Deflater除了在controller里面指定fresh_when以外,rails框架默认使用Rack::ETag middleware,它会自动给无etag的response加上etag,但是和fresh_when相比,自动etag能够节省的只是客户端时间,服务器端还是一样会执行所有的代码,用curl来对比一下。Rack::ETag自动加入etag:curl -v http://localhost:3000/articles/1< Etag: "bf328447bcb2b8706193a50962035619"< X-Runtime: 0.286958curl -v http://localhost:3000/articles/1 --header 'If-None-Match: "bf328447bcb2b8706193a50962035619"'< X-Runtime: 0.293798用fresh_when:curl -v http://localhost:3000/articles/1…

移动端重构系列

给大家推荐一个《移动端重构系列》(作者[@结一w3cplus](http://weibo.com/n/%E7%BB%93%E4%B8%80w3cplus) )教大家从零基础制作移动端页面。想动手写移动端页面,但又不知道如何入手的童鞋可以好好看看。地址: http://www.w3cplus.com/blog/tags/429.html

BootstrapValidator 表单检验jQuery插件

BootstrapValidator 是一款专门针对Boostrap v3的表单检验jQuery插件,能够实现众多常用的检验功能,并且易于扩展,还支持中文![给力]对于bootstrap用户来说能够开箱即用.网址: http://bootstrapvalidator.com/[repo owner=”nghuuphuoc” name=”bootstrapvalidator”]&nbsp;

漂亮、简洁的在线编辑器 Quill

推荐一款漂亮、简洁的在线编辑器 Quill# Quill 支持常见的所见即所得编辑模式,易于扩展、方便定制、轻量,与 Bootstrap 框架融合的很好,外观简洁、关键功能完备。网址: http://quilljs.com/[repo owner=”quilljs” name=”quilljs”]

漂亮的loading页面

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

web应用开发运维需要掌握的相关知识

web应用开发运维需要掌握的相关知识,程序员也应该了解一下吧 !&nbsp;

BBC与中国合拍经典自然纪录片巅峰之作《美丽中国》

第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集:潮涌海岸[去旅行]

1 2 54