深蓝的天空

一只切图喵的碎碎念

LAMP 启用 HTTP/2 一波三折

最近在优化博客的访问速度(最终也会总结成文的,无意中又双叒叕立了个 Flag,无视就好),针对静态资源优化还是停留在 HTTP/1.1 时代的老思路:无非是静态资源合并压缩、启用 CDN、雪碧图、静态资源多域名加载,巴拉巴拉~~最近受到 Jerry Qu 的启发,HTTP/2 对前端页面加载有着巨大提升,前端界也在关注,我也得赶趟启用上,反正现在用上了 VPS,随便我折腾!既然是折腾免不了踩坑,特别是对于我这只抠脚菜鸡前端,运维白痴来说。

Read More »

前端动画交互类优化

前端优化是个很广泛的命题,铺开去得出本书了(事实上我也没那本事),实际上市面上也有很多相关的书籍。动画与交互上的性能问题最容易被察觉,特别是在机能较低的移动端。由于自己有过一段移动开发的经历,较为关注这块且作为一个爱拾人牙慧的切图狗,现将一些他人成熟的优化方法总结如下:

当然,所有的优化都是有场景,请根据实际的场景去选择最优的方案使用。

Read More »

Vue.js & checked 半选

引子

上周项目中有一常见的场景需求:一组 checkbox,然后一 checkbox 控制该组的全选/全不选状态,如该组未全选中需展示成半选中的状态。可能我描述的不够清楚,反正就是如下的样子(我用 jQuery 写了个 demo)。实现起来并不复杂,为了保持跨浏览器样式一致性,之前是其他 DOM 元素去模拟 checkbox,半选状态是用添加特殊的 className 然后去实现对应的样式。为了提升效率(其实是懒),这次我直接用了系统控件。结果问题来了,原生控件半选模式怎么展示?学了这么多年 HTML,抓耳挠腮貌似没有表示 checkbox 半选状态的属性。

Read More »

更好的 box-shadow 动画

引子

某日移动端有一需求:要求一 App Logo 有一层外阴影闪动效果,实现起来倒也不复杂。简单粗暴直接在 keyframes 中定义 box-shadow 动画即可交差,最终代码如下:

.box {
  margin: 100px auto;
  width: 200px;
  height: 200px;
  border-radius: 4px;
  animation: boxAnimation 1s infinite linear alternate-reverse;
}

@keyframes boxAnimation {
    form {
      box-shadow: 0 0 0px rgba(0, 0, 0, .4);
    }
    to {
      box-shadow: 0 0 50px rgba(0, 0, 0, .4);
    }
}

Read More »

移动端浏览器兼容问题汇总

大概两年前做过一年微信宣传页(也就是俗称的 H5 )开发,期间遇到一系列 Bug,现总结成文,由于时间较久远,能回忆起的不多了,现拼凑记忆记录如下,防止遗忘。
Read More »

WordPress @ LAMP 踩坑

引子

一直将博客托管在虚拟主机上,然鹅自己有一台 VPS 用于科学上网有些浪费,索性将博客迁移了过来,因为从合租变成别墅,速度也有小小提升。折腾期间遇到一些问题,记录如下,如遇到新问题,也会不断更新。

lamp_banne

Read More »

TypeScript Learning

TypeScript 是 JavaScript 类型的超集,它可以编译成纯 JavaScript。
typescript-learning
Read More »

Mocha learning

mocha 是一款测试框架,支持node端与浏览器端的测试框架。

mocha

Read More »