微信小程序开发一周总结

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

我不知道的 Chrome Network 面板技巧

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

前端 JavaScript 错误收集

2016-09-08
阅读 2 分钟
9.4k
最近有个页面写好后在 Chrome devtools 里运行正常,但是手机上运行时却出了问题,就想着在代码里添加下面的内容,到手机上显示错误消息

git-shortcut 命令行下快捷操作其它项目

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

CSS scroll snap points 实现渐进增强的滚动

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

Hexo 博客 travis-ci 自动部署到VPS

2016-06-11
阅读 2 分钟
7.2k
本博客是用的hexo,deploy 是配置的 rsync,因为公司用的 windows 上没有 rsync, 所以想到 push 后通过 travis-ci 来自动 deploy,接下来就开工了...

移动端滚动穿透问题完美解决方案

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

CSS 无图片技术总结

2016-06-01
阅读 3 分钟
3.2k
首先我们重复135度的透明背景,可以得到下面的<div class="demo-jagged-border-half"></div>

前端常用样式总结

2016-05-15
阅读 3 分钟
4.9k
本文全部使用 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...

CSS 无图片显示加载(&失败)效果

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

gulp sass 出错后显示错误提示到页面,不退出进程

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