[返回] [最新] [最热门] [最高评价]

把我的个人网站推倒重来(Part 4 - Responsive Image)

网站整体完成后,我就可以开始做各种小优化了。其中一个优化是使用 responsive image 来适应不同分辨率和不同像素密度的屏幕,用到的是 <img /> 新增的 srcset 和 sizes 属性以及新增的 <picture /> 元素。因为现在有多套新旧并存的 responsive image 方案,而且它们使用的属性存在重叠,所以要搞清楚到底这些属性如何运作,还
...

Cat Chen 2018-10-08 11:55 | 查看: 275

把我的个人网站推倒重来(Part 3 - 用 Netlify 做静态网站发布)

之前两篇文章讲述了我用 Harp 和 Bootstrap 搭建新版个人网站的过程,执行 harp compile 进行构建,输出的 www 目录就是我们想要的静态网站。我可以找个传统的静态网站 host,然后通过 FTP 这种古老的方式把文件上传上去。然而这真是我在第一篇文章中说到的一个痛点,我不希望通过 FTP 部署,最好是好像我熟悉的 Heroku 那样通过 GitHub 触发部署,我每次本地
...

Cat Chen 2018-10-01 04:42 | 查看: 417

把我的个人网站推倒重来(Part 2 - 用 Bootstrap 做移动网页)

配置好 Harp 做静态网站构建后,就可以开始做网页了。上一个版本的个人网站样式是我自己设计的,当年用的还是 Macromedia/Adobe Fireworks,做出来一个 PNG 文件然后导出为不同的小图片。这次我也有考虑过要不要自己重新设计一个新的样式,但考虑到新设计不如解决其他几大问题重要,于是决定推迟样式设计。现在的计划是,先用 Bootstrap 解决绝大部分的问题,将来有时间重新设计
...

Cat Chen 2018-09-04 09:38 | 查看: 404

把我的个人网站推倒重来(Part 1 - 用 Harp 做模板引擎)

根据模板和数据生成静态网站的框架有很多,例如说 Harp、Jekyll、Hugo 等等。我对比了一下,最终选择了用 Harp,因为它是用 JavaScript 写的,如果我真的需要做什么改动我可以轻易地去改它的源代码。用 Harp 的坏处也很明显,这个项目在 GitHub 的源代码上已经很久没更新,搞不好将来不再有人维护。
安装 Harp 和用 Harp 编译生成静态页面很容易。因为 Harp
...

Cat Chen 2018-08-31 23:29 | 查看: 319

把我的个人网站推倒重来(Part 0 - 历史背景)

我的个人网站最初是架设在 catchen.biz 上面的,当时还在大学里,只是想做个网站存放简历和作品,方便找工作。那个时候我还自己设计了这个网站的模板,然后用上了时下最流行的 XHTML + CSS + JavaScript 来实现这个模板。每个页面顶部都有一行在 HTML5 时代早已不需要的声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHT
...

Cat Chen 2018-08-24 21:40 | 查看: 297

《The Dictator's Handbook》摘要

这次试试新玩法:在读数过程中把想到的直接发往 Twitter,然后再把所有的 tweets 加到一个 moment 里面,最后把 moment 嵌入到博客当中。这次读的书是《The Dictator’s Handbook: Why Bad Behavior is Almost Always Good Politics》,摘要请看下面嵌入的 tweets。
The Dictator&#
...

Cat Chen 2018-08-22 13:12 | 查看: 385

Sonos One:满足但折中你的每一个愿望

我家里在饭厅和厨房之间放了一个老一代的 Echo,然后在我床头柜上放了一个 Echo Show。因为老一代的 Echo 感觉「听力下降」,整天喊它开电视关灯之类的都听不到,所以就想把它替换掉。正好前几天 Amazon Prime Day,Sonos One 打折到 $150 ,买两个都还是比 Apple HomePod 便宜,所以就赶紧买了两个。我的计划是,把 Sonos One 放到睡房里替换掉
...

Cat Chen 2018-07-22 13:58 | 查看: 694

Heroku + Node.js + HTTPS

昨天把 biz-to-me 升级到支持 HTTPS 了,为此研究了一下如何让 Heroku 上跑的 Node.js 应用支持 HTTPS。我发现并没有任何文章描述这个具体的流程,只有零碎的信息,所以在此记录一下。
首先,Heroku 应用要支持 HTTPS 必须要是付费的等级,最便宜的是每月 $7 的 Hobby 级别。把应用升级到 Hobby 级别后,我们在应用设置里面添加的域名就能自动获得
...

Cat Chen 2018-07-02 05:48 | 查看: 514

iOS Workflow 分享 - Create QR Code

上次我分享了一个 Scan QR Code 的 Workflow,这次我分享一个正好相反的。如果我要分享一个 URL(或者是一段非常短的文本)给别人,我就可以用这个 Workflow 来生成 QR Code 图片然后发送给别人。
如果你还没有安装 Workflow,你可以先去免费下载安装上。然后打开 Create QR Code 并点击「GET WORKFLOW」,这个 Workflow 就会被
...

Cat Chen 2018-06-16 09:00 | 查看: 427

猜想:为什么 QR Code 在中日韩如此流行

为什么 QR Code 在中日韩的流行程度比在欧美地区高得多?我觉得要理解这个问题必须先理解 QR Code 本身解决的是什么问题。
难题 1:输入法
我觉得 QR Code 解决的第一个大问题源自中日韩对输入法的依赖。假设你刚刚认识了新的朋友,要加对方微信或 Facebook,这时候你如何找到对方呢?你可以问「你叫什么啊」,然后搜索对应的名字或 ID。(有些平台的用户更多选择使用真名,而另外
...

Cat Chen 2018-06-11 15:23 | 查看: 565

iOS Workflow 分享 - Scan QR Code

很多时候我们无意识地用微信扫描一个 QR Code,然后无论打开的是什么我们用就是了。我经常会好奇到底 QR Code 编码的是什么信息,到底是一个 ID 呢,还是一个 URL(可能是 deeplink)呢,还是一个 JSON 呢。所以我做了这个简单的 Workflow,先把 QR Code 的纯文本内容显示出来,然后再让我选择使用哪个 app 来接收这个字符串。如果这个字符串是 URL,Work
...

Cat Chen 2018-06-11 14:19 | 查看: 320

邀请链接(referral links)

中场休息,广告时间。以下是一些我的 referral links,如果你使用它们注册对应服务的话,那么你和我都能获得到一些好处。我会为每项服务做简单介绍,是否合适你还是要靠你自己去搜索别人的测评。
Wealthfront
Wealthfront 是一个 robo adviser,跟 Betterment 等服务相似。你把钱放进去,它帮你管理 portfolio,买进股票、债券等 ETF (Ex
...

Cat Chen 2018-06-11 01:00 | 查看: 321

...更多...