编辑器 我直接用 vscode（其它编辑器同理，预览还是用的微信开发工具），语法高亮将 wxml 设置成 html, wxss 设置成 css {代码...} 也可以安装小程序相关插件 开始写代码 首先需要完整看完微信小程序文档（框架，组件和 API），方便后面用到时查找。 view 组件对应 html 里的 div text 对应 span wxss 里选择器只支持 el...

点击网络面板左上角的第三个摄像机图标按钮，进入录制模式，刷新后就可以录制页面加载渲染过程了（网络加载过快也可以在 No throttling 那里选择限制网络为 3G）录制完成结果如上图，每个快照上面有对应的时间，鼠标移动到每一个快照上时，相应的时间点也在下面的 Timeline 里显示。双击即可打开查看快照时页面的渲染状...

最近有个页面写好后在 Chrome devtools 里运行正常，但是手机上运行时却出了问题，就想着在代码里添加下面的内容，到手机上显示错误消息

因为工作的电脑是 Windows，使用的 msysGit 终端，但是这玩意不支持多 tab，经常要在多个项目中来回操作很麻烦，所以昨天在v2ex 看到这个 小黄鸡 的项目就想到能不能让他操作哪个项目就操作哪个项目呢，刚好周末有空，就写了这个玩意。

前几天在 segmentfault 上看到有人问下面这个效果（segmentfault app 中的）怎么实现，感觉这个效果体验还不错（在移动端没有滚动条的情况能够提示有更多内容可以滚动），就用 overflow-x: auto + width: 80% 在 codepen 上写了个 demo。

本博客是用的hexo，deploy 是配置的 rsync，因为公司用的 windows 上没有 rsync， 所以想到 push 后通过 travis-ci 来自动 deploy，接下来就开工了...

问题 众所周知，移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是著名的滚动穿透问题 之前搜索了一圈，找到下面两种方案<!-- more --> css 之 overflow: hidden {代码...} 页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条但是这个方案有两个缺点： 由于...

首先我们重复135度的透明背景，可以得到下面的<div class="demo-jagged-border-half"></div>

本文全部使用 scss + autoprefixerBrower support: flex box(IE 10+), :before & :after IE 8+(IE8 only supports the single-colon) Sticky footer 内容高度不够时，footer 依然显示到最下面大概有这样的 html 结构 {代码...} flex 布局 {代码...} 查看 demo -margin & padding {代码...} 查看 demo absolute c...

lazyload 时利用 iconfont 显示加载图片和加载失败效果 0. 效果 查看demo 1. 显示加载中或者品牌图 可以是文字或者 iconfont, 并将图标显示到正中间HTML 结构如下： {代码...} {代码...} 2. 利用 lazyload 加载图片 3. 加载加粗文字失败后更改图标（或文字） 这里需要用 js 在图片 onerror 里添加 class="img-error" {代...

0. 效果 1. sass 或 less 编译出错后不退出 需要监听 sass 的error事件 {代码...} 2. 将编译的错误信息显示到页面 受到compass 启发，将出错信息利用 body:before { content: } 输出 完整的代码如下 {代码...} 3. 参考 Debug Sass in Codepen