React+Webpack 前后端同构(服务端渲染)理论篇

蓝飞 蓝飞 | 时间:2016-09-08, Thu | 2,503 views
前端开发, 后台技术 

什么是前后端同构(isomorphic)?

其实在这个问题上,我想了很久都没有想出一个比较好的答案。前后端同构,简单地说就是前后端共用一份代码,但这样讲起来,未免有点食之无味,所以我们还是先讲讲 Web 服务端渲染的历史,了解一下前后端同构是在什么场景下衍生出来,它又能够解决什么样的问题。

(阅读全文…)

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

蓝飞 蓝飞 | 时间:2015-12-17, Thu | 4,573 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>

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

蓝飞 蓝飞 | 时间:2015-01-07, Wed | 6,640 views
前端开发 

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

android:configChanges="orientation"

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

android:configChanges="keyboardHidden|orientation|screenSize"

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

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

蓝飞 蓝飞 | 时间:2014-12-02, Tue | 12,015 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 就可以了呢?

(阅读全文…)