在 Windows Subsystem for Linux (WSL) 运行 Puppeteer

Windows Subsystem for Linux (WSL) 是微软在 Windows 10 中带来的新功能,在 1709 这个秋季更新的版本后它也脱离了 beta,成为了正式版本。Headless Chrome 是 Google 今年发布的新功能,而 Puppeteer 则是 Headless Chrome Node API,用于 Headless 浏览器可以做的各类事情。

选择在 WSL 运行 Puppeteer,满足了 Linux 环境的需求(可以将写好的代码直接不少到 Linux 服务器上跑),且机器性能比虚拟机里启动 Linux 好的多。默认就有 Linux 环境,就懒得再折腾虚拟机了。

按照官方 GoogleChrome/puppeteer: Headless Chrome Node API 提供的资料,装好依赖后,你在 WSL 上运行代码会得到这样一个报错

1
2
(node:483) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: kill ESRCH 
(node:483) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

你和我的报错不同之处大概就只有 node: 后面的进程号了。如果把代码进行异常捕捉,你会得到这样的报错

1
2
3
4
5
6
7
{ Error: kill ESRCH
at Object._errnoException (util.js:1021:11)
at process.kill (internal/process.js:180:18)
at killChrome (/{jsfolder}/node_modules/puppeteer/lib/Launcher.js:151:21)
at Function.launch (/{jsfolder}/node_modules/puppeteer/lib/Launcher.js:136:7)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7) code: 'ESRCH', errno: 'ESRCH', syscall: 'kill' }

{jsfolder} 是你的代码目录,到了这一步其实还是很疑惑到底报了什么错。

如果你的报错也是上面提到的这个样子,那么可以根据这个 issue 来解决问题,我将步骤提取了出来:

  1. 安装环境依赖
1
sudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
  1. 调整 Puppeteer 启动传参,传入 args
1
2
3
4
5
6
7
8
9
10
11
12
13
const puppeteer = require('puppeteer');
(async () => {
try {
const brower = await puppeteer.launch({args: ['--no-sandbox']});
const page = await brower.newPage();
await page.goto('https://example.com');
console.log(await page.content());
await page.screenshot({path: 'screenshot.png'});
await brower.close();
} catch (e) {
console.log(e);
}
})();

PS:如果是在国内的网络,代码运行时还可能会遇到下面这个报错

1
2
3
4
Error: Failed to navigate: https://example.com
at Page.goto (/{jsfolder}/node_modules/puppeteer/lib/Page.js:470:13)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

解决方法是将 https://example.com 换成国内你能访问的网站,具体原因不详。

用 NVM 或 NVS 管理 Node.js 版本

Node.js 升级非常频繁,当长期使用 Node.js 进行开发工作时,有必要使用一个能够灵活切换 Node.js 版本的工具。

Node.js 版本管理工具主要有两个 NVMNVS,前者出来相对更久一点但不支持 Windows,后者跨平台,所以现在一般推荐安装后者。

关于安装步骤,根据官方教程走就好了,非常简单,Windows NVS 安装与使用需要管理员权限,同时要设置允许运行 Powershell 脚本。

安装完以后,这里有个小建议是把它们的镜像源更改到国内,不然下载速度会非常慢,还有可能下载失败。

替换镜像源的方法如下:

NVM

1
$ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

NVS

1
$ nvs remote taobao https://npm.taobao.org/mirrors/node/

然后就能愉快的切换 Node.js 版本啦。

从 Jekyll 到 Hexo

之前这个博客一直用 Jekyll,虽然 Jekyll 挺方便,但是除了 Jekyll,几乎没有能用到 Ruby 的地方。在折腾的过程中感觉 Ruby 对 Windows 的支持极差,虽然能用但总归不爽。再者自己用的最多的就是 JavaScript 与 Node.js,叛逃到 Hexo 应该是迟早的事。去年折腾过 Hexo,应该是部署过程中有坑,然后就没管它,那时候嫌麻烦吧。昨天给 eggjs 修改文档,刚好手头是 Windows 然后 eggjs 的文档又用了 Hexo,随即尝试了一下,竟然跑起来了。改完文档以后,就果断把自己的博客迁移到了 Hexo。

迁移过程中,发现大致要注意一下几个点吧:

  • 配置 github ssh key (解决自动部署没有权限的问题)
  • 指定合适的部署 branch,我指定的是 gh-pages (因为 Hexo 会默认把其它不是从 source 目录上生成的内容在提交时干掉),然后用master保存其它没有提交的内容。
  • 给 git 加个代理,你会发现 github 还是能用的

主机连接 CentOS 需要做的一些设置

主要是为了更新这个 Blog,在 Windows 下 Ruby 环境安装一直出现问题,所以就打算直接用 Linux 了。今天在折腾环境的过程中发现了 taobao 提供了 gem 依赖的镜像站 ruby.taobao.org,使用了以后部署起来基本无痛了,不知道主要是使用 Linux 导致还是镜像地址导致的,不过两方面的原因应该都有 gem 官方源抽风的概率太高了。

对于 Linux 桌面版已经没兴趣了,况且虚拟机里有图形界面会卡不少,所以安装的 CentOS 并没有带图形界面,这使得网页预览成了一个问题,遂想着用主机来浏览。

这就涉及到了一个怎么做的问题。

其实,当初建好这个虚拟机以后我就用 ssh 的方式来登录了,直接用虚拟机的界面太麻烦特别是要开多个终端的时候,在 Windows 可以使用 Xshell,相当好用,虽然是付费软件但对家庭与学校使用是免费的。主机对虚拟机进行 ssh 的登录其实和 http 访问原理是相同的,都是虚拟机中暴露出一个端口,然后通过访问虚拟机的 ip 以及相应的端口来进行内容访问。

所以把这两个内容放在一起说了,其实这个过程中主要要做的就是端口转发,整个过程下来,大概进行了以下几个步骤:

  1. 虚拟机建立相应的服务(ssh,serve)
  2. 暴露端口 How to open a port in the firewall on CentOS or RHEL
  3. 端口转发,这部分需要针对你的虚拟机软件来设置 VirtualBox 等都提供的非常方便设置选项
  4. 使用相应的方式访问

可能你会发现设置以后访问不了的情况,请确认端口号是否对外开启,同时端口转发的端口与地址是否准确。

我眼中的 Presentation

Presentation 很多情况下会被表达为「PPT」、「演示文稿」、「幻灯片」以及「Keynote」,之所以不用后面四种称呼来表达是因为个人觉得表述不太严谨,因为「PPT」是国内对微软 PowerPoint 广为流传的缩写,而「演示文稿」与「幻灯片」大概算是其译名,后者则是 Apple 公司 iWork Office 套件中用来制作 Presentaion 的软件。

我应该是在大一对它产生兴趣的,具体时间已经忘得一干二净了。最初吸引我的是那无比帅气的动画,那种放着放着能把 PowerPoint 搞崩溃的动画。我应该痴迷了挺久的,与此同时发现并关注了秋叶、曹将、孙小小等一溜在网上做这个东西比较出名的人。

对动画的痴迷到后来还是淡了下来,估计是因为我不会画画(现在终于会了点),然后又懒,我看过别人分享的源文件,里面设置的路径动画和其它一些东西,完全将整个页面都堆积全了,太过繁琐了。应该还有一点,这样制作的动画运行效率太低了。不过那时候我并不懂什么电脑技术,只是单纯觉得如果连自己的新电脑都运行不起来的,那么学校的那些古董机子肯定是没戏的。然后,应该就这么弃坑了,现在回想起来这个决定是相当明智的。

但故事并没有结束,因为我们的毛概老师是一个有品的人。毛概老师上课有个规矩,就是班级里的人要分组,然后轮流播报一周的新闻。反正组长这种事情总能轮到我的,我也不想说什么了……为什么说毛概老师是个有品的人呢?大概毛概老师除了会指出你说的这个料够不够料以外,还会看你 Presentation 的质量。下面是常见吐槽点:首行缩进、段前标点、长文本风格、图文协调性,应该还会有些特别的美感喜好,对不起,我记不清了……

在上有政策的情况下,也就顺带开始寻找对策,这应该是刚开始关注 Presentation 质量的阶段。在第一阶段期间应该看过秋叶出的书,肯定是没看完,太长了……其实这个阶段自己并没有做什么实质性的东西,基本都是池同学帮我搞定的,作为组长只负责看一下就好。

关于这个过程的内容太多,我就写到这里。

现在对 Presentation 的理解是这个东西脱离了演讲人并没有多大的意义,虽然大多数情况下我们依旧在被那古老的版式、糟粕的排版、连绵无尽长文本的 Presentation 污染。对于那些不愿意随着时代进步的老师我已经无话可讲了,但对于充满活力的少年竟然能深深维系这种习惯,想想也是惨不忍睹。

Presentation 的作用是让听众更易于理解你在说什么,如果把所有内容都放在上面,你站在上面又是为何。如果你的目的是教学,明明可以有更好展示内容的方式,做成 PDF 能让版式变得更为清楚,学生打印还更为方便。在这一层面上属于偷懒。

现在又有一种奇怪的趋势,可能真的是网络的鸡汤太多了,很多人都会觉得只要做个漂亮的 Presentation 就行了,然后对讲出来的东西却没有好好了解过,恩,很多时候好像还得去掉漂亮。

在时间有限的情况下,我更主张尽量把 Presentation 做得精简,然后把精力放在演讲的内容上,或许这样才更对得起观众。

Presentation 无非是让你多了一种表达的手段,做的好不好全凭心意,讲的好不好才是本事。

备注:这里说的 Presentation,确切的讲应该指 Presentation Slides。

对于重装系统方法的总结

如无必要,请不要重装系统。

除非我还要新配置台式机或者运维服务器,不然这种事基本不会再干了。所以将以前的积累的思路写出来,希望有需要的人可以收藏着,这个方法这几年里应该都是有用的。再过几年,真没人干这事了。

这个文章应该是针对 Windows 用户的,但其实也没那么针对性。主要有下面几个步骤(我这里只提一种安装方式):

  1. 准备镜像文件与硬件驱动
  2. 将镜像写入 U 盘
  3. U 盘启动安装
  4. 安装驱动

准备镜像文件与硬件驱动

镜像文件:搜某某系统 ISO 文件即可。但这样毕竟乱,「MSDN, 我告诉你」这个网站整理了,可以直接去那里找,但安全性我不保证。如果要保证安全,就去检验 SHA1 值,它都提供了,自己弄个校验工具就好。

驱动:如果是笔记本就去该品牌官网下载,而组装机去各自配件的官网下载。

将镜像写入 U 盘

用 UltraISO(软碟通) 即可,免费使用即可,具体操作可看官方教程。

U 盘启动安装

将写入后的 U 盘插在电脑上重启,然后调整启动顺序,现在一般都有快捷键,F8 或者 Esc,如果不是请搜关键字「某某主板某某电脑 U 盘启动」。

安装过程中会让你选择安装分区的,你如果不格式化现在的操作系统一般会保留原来的系统,你直接这么做就好了。除非数据都不要了,就格式化。

安装驱动

先安装主板驱动,后面随意。(如果提示重启,就请先重启,然后继续安装)

为什么不推荐重装系统

因为很多时候并没有这个必要,且不是什么有意义的活动。说白了它的原理就是将镜像中的文件解压在放到合适的位置,然后让主板能够顺利找到启动的入口,就是一个长时间的复制粘贴……

如果你觉得电脑卡了,就整理下自己的软件是否安装过多,然后同时启动太多了。如果不是,你该换电脑了。


关于系统升级

随系统的提示升级就好,不会有过多的操作,文件会原模原样保留的。推荐你升级,因为能获得更好的体验。新系统的状态一般都能足够稳定让你使用原来的软件。不过也有特例,Windows 用户没机会感受的-,-

做一些有价值的事

今天在看「微信力量」的直播,觉得有很多同感,便暂停了手头话题的发送。张小龙与他的微信团队思考得非常深入,他提到了微信公众号并不是为了单纯做营销的存在,而为了让有价值的事能够得到更好的传播。

这几年来,我通过网络学习到了很多东西,也交到了不少朋友。接触过的网站和应用有很多,也关注过许多不同领域的人。最初的信息来源非常狭窄,也导致在那时候见到更多的是不少鸡汤与劣质内容。随着对网络的不断深入,便遇到了一些对网络有着更深入思考的人,也从他们那里了解到了更加优质的网站与应用,对网络的认识也发生了不断的变化。

微信公众号对于原创内容的保护,以及其从用户角度发生的思考然后产生的许多改进与功能提升,让我再次体验到了一款精致好产品的魅力。

其实从朋友圈出现的那一天,我就极其讨厌这个功能。因为这让那一群浮夸的人们又找到了一个可以随意推送垃圾内容的窗口。「微商」、「丑娃」、「心灵鸡汤」、「自拍」和商家的各种诱导分享。不过在这些事情上,微信并没有不作为,而是在用它的方式来控制这种行为的发生,如禁止诱导性分享。我并没有说上述的事情不容许发生,只是觉得我们的网络生活为什么也要沾满了牛皮癣,而不能变得更为优雅一点。你可以换个更优雅的姿势自拍,而不是发一张你到此一游的糖水照片。

在我心中,在网络上做一些有价值的事并不是为了炫耀自己有多么厉害,而是想让大家都变得更好。你或许会疑惑,什么是有价值的事,我觉得付出努力过后的产出都是有价值的。朋友关注了你,便表明了他们对你的内容有兴趣,对自己产生的内容负责,也是对朋友的一种关心。

如果你关注过网络中大体的信息来源情况,就会发现二八定律很适用,只有极少一部分人在产生有价值的内容。张小龙还提到了一个很有意思的现象,就是鸡汤与谣言,远远比有价值的内容传播更快且受众更广,比如昨天那个朋友圈的极蠢谣言与官方辟谣的传播速度一对比就可以轻松发现了。

有价值的内容,或许看得人少,没鸡汤喝得那么爽,就如那咸鱼,爱吃的人吃,不爱吃的闻都不想闻。其实,我不想说做一些有价值的内容到底会有什么本质的作用与结果,只是觉得人该让自己活得有挑战点,让生活更精彩一点。明明有机会看到更美的风景,为什么不试着去寻找一下呢。

Jekyll 在本地以及 GitHub Pages 上的部署方法

因为今天需要迁移多篇已经发在微信公众号的文章,所以就在本地对 Jekyll 进行了环境部署,方便批量修改与提交。Fork Jekyll 快有一年的时间了,自己 GitHub 仓库上的版本还是 1.0 而最新的 Jekyll 已经升级到了 3.0.1,对比来看,变化还是比较大的,所以就直接新建了一个基础项目,然后将内容进行了迁移。

整个过程下来,大概进行了以下几个步骤:

  1. Ruby 运行环境安装
  2. Gem 安装
  3. Jekyll gem 安装
  4. github-pages gem 安装
  5. bundle 安装

Ruby 运行环境安装

这一步不用多说,下载地址:Installing Ruby

Gem 安装

Gem 是 Ruby 的包管理框架,用来下载依赖。
下载地址:Download RubyGems

下载后需要用终端进行安装,Windows 下可以用 PowerShell。

Jekyll gem 安装

使用以下命令安装:

$ gem install jekyll

安装完成后用:

$ jekyll new myblog

该命令会新建 myblog 文件夹,然后将 Jekyll 的基础文件放在里面。

github-pages gem 安装

使用以下命令安装:

$ gem install github-pages

内容比较多,安装时间较长。

bundle 安装

bundle 是 Ruby 下用来确保项目一致性的工具,具体可参见官网

使用以下命令安装:

$ gem install bundler

安装完成以后,需要在你的项目根目录下建立 Gemfile 文件,文件名为 Gemfile,不要后缀名。

内容为:

source ‘https://rubygems.org'
gem ‘github-pages’

然后使用:

$ bundle install

进行依赖安装,但其实我们已经预先安装好了 github-pages,之所以这么做是因为国内的网络环境。

官方说明:

然后在本地进行测试:

$ bundle exec jekyll serve


在这些步骤完成以后,在你的 GitHub 上新建一个 username.github.io 为名的仓库,然后 push 内容即可。(username 即你的用户名)

具体细节可以参考:GitHub Pages Basics

别让自己成为谣言传播机

从以前的 QQ 空间,到现在的微信朋友圈,哪里人多哪里谣言便传播得更快。不是针对这两个平台,而是这两个平台几乎所有的群体都会使用。不过也会有人站出来说,我都不用啊。请别忘了便捷的微信公众号,这可真可谓是发源地啊。别以为你自己不订阅就收不到咯,好心的朋友会认真转发给你的。

那么,关键的问题又来了,谣言在哪里?我怎么从来没察觉到过。其实你察觉过,如「哇,什么什么出大事啦,一定要看」,然后好奇心会驱使你点进去,然后一不小心你还分享了出去。你察觉到了标题让你觉得事情很重要,然后内容描述让你觉得这事还真得要让别人知道,却没思考过内容的真与否。

谣言的特点其实挺明显,让你觉得其内容真实而有影响力。但这个特点也导致分辨起来比较困难。我通常的做法是,如果这个内容确实觉得有传播的必要性,就去参考论文或官方第一手消息来判断真伪。很多消息也会说,此文来自某某外国媒体,那么你就有搜索引擎搜,到底是哪家外国媒体。他都用中文表述,你就翻译成英文去搜索。如果是重点新闻,搜索结果第一条绝对妥妥的就是,要是相关结果很少,你还信个鬼啊!!!英文要是不好你就别操心,也别瞎相信了,不要闹出 Dr.gossip 教授这种笑话了。其它语言翻译过来的内容也类似,请记得变通。还有一些内容涉及到非常深入的专业知识,个人建议,看看就好,除非你是本专业人士有足够的分辨力或者内容提供者有足够的可信度。

在分享内容前,请记得为你的行为负责。好内容的传播会让人受益,但糟糕的东西同样会使人受损。也许你以为没那么严重,但你永远无法想象群众平均的判断力有多么低下。「上辈子折翼的天使」、「不转不是中国人」这样的内容你难道只见过一次亦或一次也没有见过吗?

还有一个现象不知道你发觉了没有?我们的父母辈,大多在移动互联网的兴起之后才开始使用网络,许多人对互联网充满了信任感,没有将现实中的那份思考也用于网络的使用当中。他们的许多转发内容,让我又一次见到了那个满地垃圾的互联网。也许一不小心间,最大的受害者或许是他们,而他们为此触发的行为会反过来影响我们。或许有人会认为我偏驳,但你自己试着点击进去看看那个浏览量,你应该不会再这么说了。如果遇到自己的上一辈还在这么无知无畏地分享,请记得轻声提醒他们,然后顺手举报那些内容。

底部的链接是果壳提供的「2015 抗谣性马力测试」,虽然只有几道题,但也会暴露不少问题。你能毫不犹豫全做对吗?如果不能,那你或多或少已经受到了谣言的伤害。

认真对待自己分享的内容,到头来受益的还是自己。

2015 抗谣性马力测试

内容与样式分离

依照国内的环境,我们进行文本内容编辑使用的工具基本开始于微软 Office 套件中的 Word。Word 是典型的 WYSISYG 的内容编辑工具,也就是所见即所得,在设置完段落和文本格式后会立马展示给你视觉效果,这种软件的特点就是简单易用,学习成本相对比较低。也因为如此,我们常常会忘记内容与样式分离的重要性。

什么是内容与样式分离

通俗的讲就是文字或者图像等元素为内容,排版效果为样式,在制作过程中先进行内容的创作,再进行内容呈现样式的设计与执行。

有何种关系

那么 Word 跟内容与样式分离有什么关系那?有人会说,明明我设置样式的时候跟编辑内容也粘连在一块儿啊。是的,确实可以这么做,那么同时,或许你已经为自己的这种行为付出过一些代价了。举个例子,有没有碰到过编辑完内容后,使用目录生成工具并不能生成完整的目录以及页码的情况。如果有同学学习过办公软件应用的话,大概会明白为什么了。Word 还提供样式的功能,让你在设定样式以后再统一将样式应用到文本上,这样你的样式不仅统一且设置得快,然后在目录生成时可以很容易将文本标题排序以及链接。

为什么要这么做

如前面提到的一点,我们能够更高效地完成内容样式的设置。除此之外,还有一个更加重要的意义:我们能够专注于内容地创作。这是很关键的一步,在内容创作初期,你完全没必要打开一个庞大的 Word,你只需要一个简单的记事本或者一个更加完善的文本编辑软件如 Windows 下的 Notepad++。

该如何做

操作的方法很简单,上面其实已经间接提到了。在创造内容时,认真把自己当作者;在设计排版时,就认真设计版式效果把自己当设计师。让两者的操作时间尽量不重叠在一起。具体的样式设计方法,随处都可以搜索到。

内容与样式的分离实践其实很简单,但困难在于明白自己为什么要这么做。排版软件不止是 Word,还有 InDesign、TeX 等各种类型的软件。但如果掌握了这个思想,用什么软件都一样。为什么想写这篇文章,是因为发现了真的有人会觉得不一样……

Proudly powered by Hexo and Theme by Hacker
© 2020 Eli Yao