基于Docker的CI工具—Drone

drone

目前我的很多 Github 项目都会使用 travis-ci 来做自动化构建任务,其中的一项主要内容就是代码提交后自动执行单元测试计算测试覆盖率。但是 travis-ci 对于其它平台(例如 Gitlab)甚至说是公司局域网来说都是不支持的,所以萌生了想要找另外一款 CI 工具代替 travis-ci 的想法。对比了几款 CI 产品之后,我最终选择了 Drone。它是一款使用 Go 开发的开源的 CI 自动构建平台,能够单独部署,支持常见的 Git 仓库,例如 Github, Gitlab, Bitbucket 以及 Gogs 等。Drone 主要有以下几个方面吸引我:

阅读全文

webview中viewport初始化不生效

最近做的项目有用户反馈问题,在 WebView 中页面的宽度不对了,显示了 PC 站的大小。我使用 chrome://inspect 调试了一下,发现 WebView 中任何一个自适应网站都有问题了,并且将页面 DOM 删除到最少也还是有问题,确认是客户端 WebView 的问题。

查了下资料后,最开始怀疑是不是客户端没有加上 setUseWideViewPort(true) 让 WebView 支持 viewport 属性。客户端查了下代码告知是有的,只能想想是否是其它问题了。

后来想了一下出问题的页面都比较特别,是需要经过一个中间页的跳转的。而这个中间页是没有设置 viewport 属性的。根据规范,如果在设置了 setUseWideViewPort(true) 的 WebView 中不写 viewport 的话默认是使用屏幕宽度来进行初始化,这里的屏幕宽度是真实的屏幕宽度,所以就看起来不正常了。

由于之前已经了解过 Webview 会有一些初始化的行为,这些行为是在这个 Webview 初始化之后无法改变的,只要这个 WebView 还没有被销毁,不管你切换什么页面都是无法修改的。所以我就在怀疑是不是 Webview 最开始使用了跳转页来初始化 WebView,然后跳转页上没有设置 viewport 属性初始化行为就不正常了。后来跳转后的页面虽然有设置 viewport,但是初始化已经完成所以已经不生效了。

解决的办法也非常简单,直接在跳转页上增加 viewport 设置即可。添加之后测试了下问题真的解决了。

75CDN 增加 SRI 支持

75cdn.png

75CDN 是一个由奇舞团维护的静态资源托管平台,创立至今已经稳定运行了一年多的时间。近期我们增加了 SRI 的支持,作为国内首个提供 SRI 服务的静态资源库了,也算是为 75CDN 一周年庆生吧。

SRI 全称是 Subresource Integrity,是用来解决由于 CDN 资源被污染而导致的 XSS 漏洞的方案。当浏览器检测加载脚本签名与给定的签名不一致时,会拒绝执行该脚本。目前浏览器的支持情况如下:

浏览器 支持版本
Chrome 以及 Chrome for Android 45+
Firefox 以及 Firefox Mobile 43+
Safari 以及 iOS Safari 11+
IE 以及 Edge 不支持
UC 浏览器 不支持

注: 数据来源于 CanIUseMDN

阅读全文

SVG动画实践

SVG 是基于 XML 的矢量图形描述语言,可以近似理解成 HTML,所以能和 JS 以及 CSS 进行交互。 特别是 CSS,配合 CSS Animation 就能实现一些令人心旷神怡的动画,这实在是让人兴奋。下面我们就来看看 SVG 配合 CSS 实现动画的一些方法。

本文内容主要是我之前分享的文字版,若想看重点的话可以看之前的 Slide:

也可以查看分享视频:http://cloud.live.360vcloud.net/theater/play?roomid=2079

阅读全文

Firekylin 多说评论迁移

Firekylin 是一款 Node.JS 的博客系统,由于没有自己实现评论功能,所以一直使用的是第三方的评论系统。使用社交评论系统的一个好处是能够支持社交账号登录,而不用每次都傻乎乎的自己输入昵称和邮箱。之前官方一直都是支持 Disqus多说 两款评论系统的,不过由于 Disqus 在国内的速度堪忧,所以使用多说的用户还是多一点。

然而多说虽然做为国内评论系统一哥,却一直没有找到变现方法,最近不得已更是发布了关服通知,让 Firekylin 的用户着实蛋疼了一把。好在我不就之前就在 Firekylin 中增加了 畅言 的支持,最近又增加了 网易云跟帖 的支持,让大家的评论系统有了更多的选择。

如果是直接切换服务,非常简单,在后台“评论设置”中选择相应的服务并填写对应的 ID 即可。下面我就来说说如何导入原来的多说评论到新的评论服务中。

阅读全文

升级到 webpack2

前些天 webpack2.2 发布了正式版。个人觉得 webpack2 带来的最大的变化莫过于新的官网了 https://webpack.js.org,新官网带来的新的文档比之前的要好太多了。而且早就想试试 Tree Shaking 了,所以趁此时间赶紧升级了一把。虽然已经发布了 2.2 的正式版,不过目前还需要通过 npm install webpack@beta 来安装,大家要注意哦~最新消息,官方已经把 beta 去掉了,现在直接安装 npm install webpack 就是最新 2.2.1 的版本了,如果要装老版本的话需要 npm install -g webpack@1。另外官方给出了详细的webpack1升级到webpack2的迁移指南,也可以参考其对应的的中文翻译版。以下就按照我的认识给大家梳理一下 webpack2 的一些变化,详细的更新情况还请参考官方文档。

阅读全文

Firekylin 如何自定义首页

之前用 WordPress 和 Typecho 的时候有个功能特别好用,那就是自定义首页。用户可以将某个页面指定成首页,而页面又可以通过自定义模板来个性化。最终达到了个性化首页的目的。这么棒的功能当然 Firekylin 也要支持啦,下面就和大家说说在 Firekylin 中如何实现个性化首页功能。

页面自定义模板

0.15.0 版本新增自定义模板的功能,将自定义模板放置在主题目录的 template 文件夹下,程序就会识别该自定义模板。模板的内容随意,可以是纯静态的 HTML 内容,也可以是 nunjucks 语法。后台新建页面右侧可以选择你设定的自定义模板,选择该模板之后程序就会使用它替换默认的 page.html 模板渲染该页面。

选择自定义模板

阅读全文

ThinkJS 开启 HTTPS 服务

大家在使用 ThinkJS 的时候一般都会搭配 Nginx 使用,在 Nginx 中配置 HTTPS 是非常简单的,具体可以参考屈屈老师的《Let's Encrypt,免费好用的 HTTPS 证书》。这样做的原理是 Nginx 接收到 HTTPS 的请求后反向代理到 ThinkJS 服务的端口上,从而达到了 ThinkJS 项目开启 HTTPS 服务的目的。不过有些比较轴的同学可能觉得这种方法还是太麻烦了,经常问 ThinkJS 有没有自带启动 HTTPS 服务的方法。今天我就来给大家说说。

阅读全文

ThinkJS 开发之前端热更新

用过 ThinkJS 的人都知道,开发模式下 ThinkJS 是支持实时更新的,也就是说不需要我们重启服务就能让修改生效,不得不说这种开发方式真的非常方便。然而对于前端代码我们还是得老老实实的刷新页面才能看到效果,我们能不能让前端代码也支持热更新呢?答案是肯定的。首先我们看一张动图了解我们最终想要功能是什么样的(点击图片查看大图)。

阅读全文

基于 ThinkJS 程序的自动更新

众所周知,PHP 是文件型程序,每次请求访问的时候会去读取 PHP 文件然后执行程序。这种机制的程序做更新是非常简单的,把文件更新了下一次请求读取的就会是最新的程序。和 PHP 文件型程序不同,Node 是常驻“内存型”程序,代码在最开始执行脚本的时候就已经读取,模块和依赖都会缓存在内存中。这样的好处就是减少了请求每次读取的时间,能够更快的响应。但是也注定了不能像 PHP 一样只是简单的更新下文件就能达到更新的目的了。本文就 Firekylin 的在线更新功能来说说 ThinkJS 程序更新的那些事。

阅读全文