杰拉斯的博客

[CSS3] 纯 CSS 实现未知高度垂直居中

杰拉斯 | 时间：2015-12-17, Thu | 26,221 views
前端开发　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现未知高度垂直居中</title>
    <style>
    .outer {
        font-size: 0;
        height: 200px;
        background: #0099ff;
        white-space: nowrap;
    }
    
    .outer:before {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    
    .inner {
        font-size: 14px;
        white-space: normal;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            第一行<br>第二行<br>第三行
        </div>
    </div>
</body>
</html>

不惑

杰拉斯 | 时间：2015-04-30, Thu | 45,380 views
心路历程　

人三十而立，四十而不惑，不惑是什么？有一段关于快乐的采访是这样说的：『以前小时候很快乐，但长大了渐渐就不快乐了，可能现阶段有很多困惑想不明白，等到这些事情渐渐想明白了，就会重新变得快乐起来。』窃以为不惑不仅仅是想通了许多事情，更是明白了世界上永远会有更多想不明白的事情，但却能够泰然处之，虚心学习。人这个时候会有两种表面上截然相反的特质，自信而谦虚。从术的角度上讲，自信在于已经悟出了自己的『道』，从科学的角度来说，即是形成了一套自己的价值观和方法论，能够圆满地解释和应对曾经经历的和可能发生的绝大部分事情；而谦虚则在于改变，当视野和经历更加丰富时，往往会发现自己的『道』并不完美，能够有勇气去改变甚至颠覆曾经的想法，能够放下身段向身份地位不如自己的人学习，也就是『空杯心态』。

然而，改变恰恰是最难达成的一个条件。改变甚至可以说是一个伪命题，一个没有追求的人可以通过改变成为一个有梦想的人，一个技术菜鸟可以通过努力成长为一个极客，但是一个不懂改变的人如何才能通过改变成为一个敢于自我改变的人？所以，改变往往需要一个契机，这个契机往往是一个外力的作用。真正不惑的人通常有一个共同点：遭遇过至少一次很大的挫折和失败，但又从中走了出来，两个条件缺一不可。只有从根本上颠覆一个人的思想，才能够明白自我与世界的冲突，而只有不沉浸在受害者心态中，才能够大彻大悟，浴火重生。

但是，即便是经历了许多颠覆和改变，并不意味着在不惑的前进道路上一路坦途。当自己的『道』似乎接近完美，任何事情都无法撼动时，或许不是『道』已大成，而是已经走火入魔，沉浸在自己构建的世界中。此时的问题在于，并非自己不想改变，而是自以为无需改变，画地为牢而不自知。这时候则需要通过切换状态，转换角度来验证自我，比如出世与入世，乐观与悲观，专注与发散等等。

以上算是入世一年多以来的总结沉淀，如今正在往出世的状态切换。其实出世入世相辅相生，没有入世何来出世，而无论出世还是入世，都应该留有一丝清明，才能够不忘初心，避免走火入魔。举一个具象一些的例子，在入世享受小幸福的时候应该居安思危，才能够保持进步；而在出世追逐梦想的时候，也应该关心身边人，争取理解和支持。最后附文一篇，以此自勉。

生于忧患死于安乐

舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。

故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。

人恒过，然后能改。困于心，衡于虑，而后作；征于色，发于声，而后喻。入则无法家拂士，出则无敌国外患者，国恒亡。然后知生于忧患，而死于安乐也。

[安卓]防止Activity在横竖屏切换时重新创建

杰拉斯 | 时间：2015-01-07, Wed | 12,781 views
前端开发　

这两天在写一个安卓应用内嵌 WebView 的小 Demo，其中需要支持 HTML5 视频的全屏播放，结果就卡在了横屏切换上，在切换到横屏时正在播放的视频就消失了，但声音还在，排查了许久发现是横屏时 Activity 会被重新创建，百度给的答案是在 AndroidManifest.xml 中对应的 activity 标签中增加属性：

android:configChanges="orientation"

折腾许久无果，只好祭出大招，在 StackOverflow 中查找结果，发现在安卓3.2版本后需要再增加一个属性：

android:configChanges="keyboardHidden|orientation|screenSize"

国内的技术信息还是比较滞后，有时候寻求答案没有结果时，应该去外国网站试试。同时也把解决方案撰写博文一篇，用以造福人类。

nginx 中 location 的匹配规则

杰拉斯 | 时间：2014-12-24, Wed | 16,956 views
后台技术　

location 匹配规则

=     # 普通字符精确匹配
^~    # 普通字符路径前缀匹配
~     # 区分大小写的正则匹配
~*    # 不区分大小写的正则匹配

location 匹配优先级

官方文档：

Directives with the = prefix that match the query exactly. If found, searching stops.
All remaining directives with conventional strings, longest match first. If this match used the ^~ prefix, searching stops.
Regular expressions, in order of definition in the configuration file.
If #3 yielded a match, that result is used. Else the match from #2 is used.

中文翻译：

精确查找 = 前缀的匹配。如果找到，停止搜索。
其它的普通字符串匹配，按照表达式长度优先查找。如果这个匹配使用 ^〜 前缀，搜索停止。
正则表达式匹配的优先级，则根据在配置文件中定义的顺序来确定。
如果第 3 条规则产生匹配的话，使用该匹配结果。否则，如同使用第 2 条规则的匹配结果。

[HTML5]如何在 Canvas 中绘制扇形

杰拉斯 | 时间：2014-12-02, Tue | 43,126 views
前端开发　

在 HTML5 Canvas 中，我们可以通过 arc 方法来绘制圆形：

// context.arc(x, y, r, sAngle, eAngle, counterclockwise);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

但如何绘制一个扇形呢？是不是简单地修改结束角度 2 * Math.PI 就可以了呢？

(阅读全文…)