15年来的手艺之路：手艺人赵鹏的自述 嗨，大家好，我是赵鹏，也就是大家所熟知的“手艺人赵鹏”。想来想去，也是有点意思，我的网站已经陪我走过了15年。那天突然想起这个小站从2008年2月7日就开始有了，时光真是个好东西，一转眼都老了。 创站初衷与哲学：技术不只是代码 最初建这个网站的时候，我只是觉得技术真的很酷，不仅仅是写代码那么简单。它像一门手艺，需要时间、耐心和创造性。所以，我就用了“技术也是一门手艺”这个座右铭，现在看来，还挺应景的。 挫折与坚持：数据丢了也没事 说到2015年，那真是个波折的年头。一次数据丢失让我损失了很多年的内容。心里当然难受啦，但也没办法，生活还得继续嘛。重头再来也挺好，反正技术更新这么快，我之前写的很多东西现在也用不上了。 社交媒体：我也玩 Twitter 除了网站，我还有个 Twitter 账号 @zhaopengme。那里我更多是以一个技术爱好者的身份去和大家互动。偶尔也会发一些搞笑的内容或者是一些我觉得很有趣的技术现象。 网站细节：也许你没注意，但我很在意 我很注重网站的每一个小细节，从标题到描述，甚至还用了 <link rel="canonical"> 来避免重复内容。可能你不会注意到这些，但我觉得这些都是给你带来好体验的小细节。 未来规划：谁知道呢？但肯定很酷 未来嘛，也不好说。但是，我还是希望能继续我的手艺之路，无论是新技术的尝试还是深入某个领域。毕竟，一门手艺，哪有练到尽头的道理。 最后的小结 15年了，感觉自己从一个懵懂的小白变成了一个（可能还是懵懂的）老手。但不管怎样，我都很高兴有你们陪我走过这么长的一段路。如果你也觉得技术是一门手艺，那就来我的网站逛逛吧，说不定你会找到一些有用或者有趣的东西。 那就这样吧，赵鹏签个到，希望大家都能在自己的手艺路上越走越远！
引言 今天是一个特殊的日子，因为 Google 正式走过了 25 个充满活力和革新的年头。从最早的搜索引擎到现在多元化的技术帝国，Google 的影响已经深远地渗透到我们生活的各个方面。正如我的网站的主题 "技术也是一门手艺" 所言，Google 无疑是这门手艺的终极代表。 初始阶段：一切从搜索开始 1998 年，斯坦福大学的两位研究生 Larry Page 和 Sergey Brin 推出了一个名为 "Backrub" 的搜索引擎原型。这个原型最终诞生了 Google，一个不仅革新了信息检索，还改变了整个互联网生态的公司。 跨足多个领域：Google 的多元化发展 不仅仅满足于成为搜索业务的霸主，Google 迅速地拓展了其业务范围。今天，从 Google Ads, Gmail, Google Cloud 到 Android 操作系统，Google 的产品和服务已经覆盖了生活的各个方面。 技术创新：人工智能和机器学习 Google 在人工智能和机器学习方面也做出了重要贡献。例如，其语音助手 Google Assistant、图片识别服务 Google Photos，以及自动驾驶项目 Waymo，都是将复杂的算法和高端技术运用得淋漓尽致的实例。 社会责任与全球影响 除了商业成功和技术创新，Google 也致力于承担社会责任。通过其慈善机构 Google.org，公司在全球范围内支持了一系列教育、健康和环境保护等方面的项目。 展望未来：无限可能 对于未来，我们有理由相信 Google 会继续在技术创新和社会发展方面发挥更大的作用。随着物联网、量子计算和生物技术等新兴领域的快速发展，Google 有望继续引领行业趋势。 结论 纵观过去的 25 年，Google 不仅仅是一个搜索引擎，它已经成为了一种文化和生活方式。作为一名长期关注技术发展的观察者，我深感 Google 的成功不仅在于其创新的技术，更在于其将这些技术当作一门手艺来不断精进和完善。
摘要: 一个小时如何编写一个支持七牛上传的 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 的文章模板，有些弹出框显示不完整等等。在以后，会慢慢加进来的。
摘要: 一个小时如何编写一个支持七牛上传的 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 的打包发布，内容也不会太多，但是合并到本篇，和本篇的内容不符，还是单独拆分来吧！
摘要: 一个小时如何编写一个支持七牛上传的 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的步骤.从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 会丢失留言数据.
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…
推荐一款漂亮、简洁的在线编辑器 Quill# Quill 支持常见的所见即所得编辑模式，易于扩展、方便定制、轻量，与 Bootstrap 框架融合的很好，外观简洁、关键功能完备。网址: http://quilljs.com/[repo owner=”quilljs” name=”quilljs”]