查看详情

Ghost 版本升级

Ghost 是一款 Node.js 上非常好用的的内容发布平台。 The professional publishing platform 由于博客是 15年暑假弄得,那个时候 Node 版本还比较低,而且那个时候 Ghost 还并非是一个特比出色的产品。不像现在非常强大,有很多的主题可以选择,更加人性化的后台管理。 升级到 1.x 由于我已经很多年没有升级了,这次升级需要先从 0.x 的版本升级到 1.x 的版本,然后再升级到 2.x 的版本保持和 Ghost 的产品线一致。 无论如何都先请备份好你的博客 JSON 数据 资源和图片(content/images) 这目录。 你可以在后台 labs 选项里看到 export 选项,然后选择导出即可获得博客的 JSON 数据资源。 而图片目录需要自己去服务器上进行拷贝。 安装 Ghost-cli ghost-cli 详情 »

查看详情

使用 JavaScript 探测网络状态

同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96 在某些情况下,我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后,我们需要执行一些代码。 naviagtor.onLine naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。 navigator.onLine caniuse figures 而在比较老的 IE8 浏览器,我们小使用 online 事件进行监听。 document.addEventListenner(‘online’, () => { // todo }); document.addEventListenner(‘offline’, () => { // todo }) 网络心跳检测 然后很早的时候,很多浏览器还不支持 naviagtor.onLine。开发者只能通过 XHR 和 Image 发送心跳轮询来判断是否还处在网络连接的状态。 const pingUrl = ‘https://ipv4.icanhazip.com'; 详情 »

修复 CALL_AND_RETRY_LAST Node 运行问题

最近使用 react-native 的时候遇到了下面的异常: CALL_AND_RETRY_LAST Allocation failed - process out of memory 大概是因为你在 JS 执行比较大的 JSON.parse() 的时候,这个时候比较直接的办法是设置 --max_old_space_size。 在你的 .bash_profile 增加这一话就 Ok了。 export NODE_OPTIONS=--max_old_space_size=4096 这只是临时的一个解决方法,有时间还是需要 debug 到源码查看具体哪一个环节出了问题。 详情 »

使用 core-version-manager 解决版本号的问题

最近在写工具处理的时候,想到做这么一个库,用于解决版本号之间的问题,比如打小,比较等问题。常见的比如确定 A/B 两个版本谁比较新,又或者 选出一系列版本中最大的。于是 core-version-manager(名字有点土) Github 怎么使用 $ npm install --save core-version-manager 引入模块; import version from 'core-version-manager' API check() 检测传入的是不是一个版本号; version.check('1.2.4') next() 传入版本的下一个版本号; version.next('1.2.4') // 1.2.5 pre() 传入版本的前一个版本号; version.pre('1.2.4') // 1.2.3 max() 获取传入一系列版本中的最大的版本号; version. 详情 »

查看详情

引入 Brotli 进行 Web Server的压缩

目前我们大多数网站都是启用的 gzip 来进行 资源传输的压缩,这有利于我们更加快速的访问我们的网站;但是除了 gzip 外,我们或许还有别的选项,而且性能会更好,比如 Facebook 便是启用的 Brotli 算法; Brotli Brotli 最初发布于2015年,用于网络字体的离线压缩。Google软件工程师在2015年9月发布了包含通用无损数据压缩的Brotli增强版本,特别侧重于HTTP压缩。新版本还展现了跨平台的性能改进,以及减少解码所需的内存。 与常见的通用压缩算法不同,Brotli使用一个预定义的120千字节字典。该字典包含超过13000个常用单词、短语和其他子字符串,这些来自一个文本和HTML文档的大型语料库。预定义的算法可以提升较小文件的压缩密度。 对全球1000个访问量比较大的地址进行测试,使用 Brotli 算法可以得到明显的性能改善: 14% smaller than gzip for JavaScript 21% smaller than gzip for HTML 17% smaller than gzip for CSS 使用brotli取代deflate来对文本文件压缩通常可以增加20%的压缩密度,而压缩与解压缩速度则大致不变。 当然如同 HTTP2, 详情 »

查看详情

使用 concurrently 运行多个 npm 命令

我们平时可能需要同时在一个 npm scripts 中运行多个 npm 命令。我们第一时间想到了 && 。当然大多数情况我们是可以完成既定的需求,因为其实这些都是在同个进程中,如果我们需要运行的命令需要拿到两个进程的的输出,比如我们同时启动两个 server ,不同端口号。 在日常我们经常会遇到一个用于静态资源的服务器,一个是 业务的 Web 服务器,我们可以使用 webpack 的 middleware 来实现,我们也可以单独拆分。 即分开成两个命令启动。这个适合使用 concurrently 就非常方便了。 比如我们需要启动一个 npm run watch-js 和 npm run watch-less 两个命令。 npm i concurrently -save-dev 安装完成后,我们只需要在我们的 npm scripts 里添加一个合并的命令: "start": "concurrently \"npm run 详情 »

记一次 inline-block 在模板渲染引起的异常

最近在做 nunjucks 的 模板替换工作。然后在做 {% for %} 的时候遇到一个问题: {% for item in episodes %} <div {{ item.itemAttr }} class="{{ item.itemClass }}"> <a href={{ item.url }}>{{item.name}}</a> </div> {% endfor %} 其中 div 设置的样式是通过 display: inline-block; 也就是渲染一个普通的列表: 然而,在实际过程中,我们却看到变成 四个一行的,但是看过样式的距离,算出盒子理论每行确实应该容纳五个 div ; 然后查看 Chrome ,并没有发现异常,所以楼主当时心情: 两天纠结之后,重新排查这个问题,用 详情 »

查看详情

[转] 用 Node.js 实现 BigPipe

原文地址: https://github.com/undoZen/bigpipe-on-node @ undoZen BigPipe 是 Facebook 开发的优化网页加载速度的技术。网上几乎没有用 node.js 实现的文章,实际上,不止于 node.js,BigPipe 用其他语言的实现在网上都很少见。以至于这技术出现很久以后,我还以为就是整个网页的框架先发送完毕后,用另一个或几个 ajax 请求再请求页面内的模块。直到不久前,我才了解到原来 BigPipe 的核心概念就是只用一个 HTTP 请求,只是页面元素不按顺序发送而已。 了解了这个核心概念就好办了,得益于 node.js 的异步特性,很容易就可以用 node.js 实现 BigPipe。本文会一步一步详尽地用例子来说明 BigPipe 技术的起因和一个基于 node.js 的简单实现。 我会用 express 来演示,简单起见,我们选用 jade 作为模版引擎, 详情 »

Node.js process 模块常用属性和方法

如果不是和命令行工具打交道,可能我们很少有机会去用到process模块中的一些方法或者属性。不过如果你要做类似于webpack或者gulp等较为复杂的构建工具,由于bash界面就是和用户直接交流的工具,因此友好的输入输出,完整的提示都非常有必要了。 一张表格大概可以看到process有哪些属性 属性名称 用途 platform 判断当前系统平台 argv 当前进程的命令行参数数组 execPath 当前进程的可执行文件的绝对路径 stdout 指向标准输出 stdin 指向标准输入 stderr 指向标准错误 stderr 指向标准错误 我们可以直接在代码中这样使用 console.log(porcess.platform) // darwin 使用argv 会返回命令行的数组,我们可以通过数组来获取用户具体的命令 console.log(process.argv); // [ '/usr/local/bin/node', '/Users/ali-130257n/www/weex-jackzoo/projects/demo.js', '-p', '-v' ] 一般情况下,我们更想获取最后的一些参数,前面两个不需要,我们可以 let 详情 »

消除mac下npm全局安装使用sudo命令

可能在我们默认安装node.js的使用,npm安装到的目录大多都在/usr/local/bin 下,我们有的时候全局安装某些模块的时候,会出现类似 EACCES 或者无法创建软链 link permission下面的一些提示 npm ERR! Error: EACCES, open '/Users/chietala/.npm/-/all/.cache.json' npm ERR! { [Error: EACCES, open '/Users/chietala/.npm/-/all/.cache.json'] npm ERR! errno: 3, npm ERR! code: 'EACCES', npm ERR! path: '/Users/chietala/.npm/-/all/ 详情 »