实现点击按钮加载 Gist 代码块

GitHub Gist 应该也是很多人都在用的功能了,我也喜欢把一些大段的代码块贴上去而不是直接写在博文里。

但是 Gist 的 embed js 是在页面加载的时候就直接开始加载了的,所以或多或少还是对网页的性能有所影响。受上次搞的「点击加载 Disqus」启发,我也准备写一个点击加载 Gist。

最开始我尝试了传统方法,即动态创建一个 <script> 标签并添加到文档流中。然而却得到了一个这个错误:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.  

看来动态加载的 js 文件中是不允许写文档流的。而不巧的是 Gist 提供的 embed js 正是使用 document.write 来实现的。

在网上找了一下,虽然也有些利用 iframe 的解决方法,譬如:Dynamic Gist Embedding,但都感觉不咋好(嫌麻烦)

后来,我在 SegmentFault 的动态预览 Gist 的功能上发现了,Gist 竟然能够提供 JSONP 式的回调!

阅读全文→

使用 ADB Shell 刷入 Recovery

众所周知 MTK(联发科)的大部分机器都是没有 fastboot 模式的,也就意味着不能进行普通的依赖于 fastboot 系列命令的线刷模式。普通来讲这也没啥特别大的影响,毕竟刷 recovery 可以直接系统里拿到 root 后用工具刷,救砖有 MTK 专用的线刷工具(这玩意的驱动坑的不行)

但是,在一些神秘的状况下,我有可能会被没有 fastboot 的情况下坑到。

这次我想刷的是「朵唯 iSuper S1」,用的是 MTK6589 芯片组。按照惯例刷机之前首先要把 Recovery 换掉以刷入第三方 ROM 包。照理来说这块是没有问题的,但是不知道为什么,市面上的 Root 工具能够让手机拿到 Root 权限,但是在手机上安装权限管理应用时均告失败,也是迷的不行。

明明 Root 权限都已经拿到了却刷不了 Rec,这也太吃瘪了吧!然而没有 MTK 机子也不能用 fastboot 刷 rec,专门的线刷工具又太难用。。就在这时,我突然想到了一个命令 —— dd

阅读全文→

使用 Nginx 反代并缓存动态内容

因为着实没想到一个皮肤站竟然会有这么大的并发(好吧其实也不大,QPS 大概 50 左右),所以我之前 开发/部署 Blessing Skin Server 的时候是完全没考虑到缓存优化的。直到后来出现了 神秘的高并发(QPS 上 200)导致皮肤站宕机我才意识到缓存的重要性。

我到现在也还是搞不懂那到底是正常流量还是 CC 攻击。。难道正常用户会每秒请求 20+ 次 Json Profile 吗?又不是天天退/进游戏玩 emotion

虽然当时我就花了一点时间给 Json Profile 和皮肤预览之类的地方 加上了缓存,但是由于这些缓存方案都是在 Laravel 层之上的,所以框架的性能依旧是硬伤。试了下 Stone 之类的优化措施也没什么卵效果,再加上我学业也忙了起来,这个问题就被搁置了。

正好最近国庆放假(虽然只有四天),我就抽了点时间出来研究了一下如何给我的皮肤站套一层缓存 ( ・_ゝ・)

阅读全文→

劳资也是开得起 Minecraft 光影的男人辣!

这次国庆去电脑城摸了块 GTX750(原先的 9800GT 实在是烂得不行了)和一块新硬盘回来,克隆完硬盘后就迫不及待地给 MC 打上了 GLSL Shader Mod。玩了一会后我的表情是这样的:emotion1

不得不说上了光影之后的 MC 根本不是一个游戏啊

95e7cf170b0d4f5fbe87e97360faacb9.png

阅读全文→

String.prototype.endsWith() 的浏览器兼容性问题

String.prototype.endsWith() 这个方法是 ECMA6 新加入的,而我当初随手 Google 了一下,也没怎么看就直接用上去了,直到我今天在一台破手机上测试的时候发现有个用到这个方法的值神秘地变成了 undefined ( ´_ゝ`)

我记得上次好像也是这样随手搜索导致使用了不兼容的函数 ( -д-) 论面向搜索引擎编程的坏处

不过我们还是可以通过扩展 String 的原型来实现在不支持的浏览器上使用这个方法:

/**
 * 代码来自 MDN
 * 
 * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith
 */

if (!String.prototype.endsWith) {  
  String.prototype.endsWith = function(searchString, position) {
      var subjectString = this.toString();
      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
        position = subjectString.length;
      }
      position -= searchString.length;
      var lastIndex = subjectString.lastIndexOf(searchString, position);
      return lastIndex !== -1 &
阅读全文→

使用 Laravel 的 RedirectResponse 重定向至任意 URL

Laravel 允许我们在控制器中返回一个 Illuminate\Http\RedirectResponse 的实例来执行重定向。根据文档,我们可以通过 redirect() 帮助函数或者 Redirect Facade 来生成实例,并且可以方便得重定向至命名路由、控制器行为等。

但如果我们想要重定向至自定义 URL 呢?

对于这样的需求,Laravel 官方的文档是完全没有提及的(至少到目前 5.3 是这样),所以估计很多人都是自己实现了一个使用 header() 或者 <meta http-equiv='Refresh' content=''> 的重定向函数(包括以前的我)。

阅读全文→

使用 Certbot 自动签发 Let's Encrypt 证书

今晚一回来就看到 Google Search Console 给我发了封邮件说我站点上的 SSL 证书过期了。我上去一看还真是,这张我从 Andy 手里买来的通配符证书已经在昨天失效了。

唉,时间也是过得忒快啊,转眼间一年就过去了,我也成为了苦逼的高三党,真是惨得不行 ( ・_ゝ・)

不过正好,我从 之前就一直在关注 Let's Encrypt 这个项目了,这次正好试试看它好不好用。

阅读全文→

Sublime Text 3 主题推荐 —— Boxy

BOXY

用了好久的 Predawn,打算换个 Theme 和 Color Scheme 试试。在网上逛了一段时间后,我找到了一个很不错的 ST3 主题,这里分享一下:

Boxy Theme

The most hackable theme for Sublime Text 3

这个主题在 Package Control 上的页面在这里,这是一个非常强大的主题,你可以去看看它的介绍视频。

Boxy 提供了很多自定义选项,因此你甚至可以把 Sublime 打扮成 Atom、VS Code,甚至是同为 ST 主题的 Predawn/Material 的样式,简直碉堡了好吗:

Screenshot

阅读全文→

又是一种用于 JavaScript 的前端国际化方案

现在 Blessing Skin Server 的 HTML 模板是使用 Laravel 自带的本地化来实现多语言支持的,并且使用了 devitek/yaml-translation 这个包把 Laravel 语言文件从默认的 PHP 数组形式改为 YAML 格式的文件。

不得不说数组形式的语言文件简直反人类好吗,一大堆 => 看的眼晕。。YAML 大法好!(ゝ∀・)

回到正题。虽然 HTML 模板里的国际化是解决了,但是整个应用中需要国际化的地方可不止 HTML 模板,同时还有 JavaScript。但是静态的脚本文件中总不能内嵌 PHP 吧,所以我们得搞个单独的解决方案。

虽然说网上现成的 JS 国际化的库很多,但我总觉得有些看不上眼(可能是我没找到好的),就准备自己实现一下。

阅读全文→