CSS3实现 横向/竖向 滚动弹幕

最近的项目用到了弹幕功能,尝试使用了CSS3来做,用到了CSS3的动画,并用transform来做滚动处理,相对于 top/left 流畅了很多。话不多说,直接看效果:

http://jsbin.com/rabuxi/edit?html,css,output

再来看实际项目使用的效果,应用弹幕高度不固定,需要用js来实时获取高度:

http://jsbin.com/pihujok/edit?html,css,output

移动端 1px border 最佳实践

在移动端Retina屏,我们用CSS定义1px的边框时,会发现边框线条很粗。实际的原因是CSS中的px单位定义的是逻辑像素值,而实际显示的效果会以物理像素呈现,在Retina屏下,1px不止占了一个像素。

具体1px占了多少个像素,我们可以通过window.devicePixelRatio来获取,devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例,公式表示就是:devicePixelRatio = 物理像素 / dips。如iPhone 4s, 纵向显示的时候,屏幕物理像素640像素。当用户设置的时候,其视区宽度并不是640像素,而是320像素。这样,在视网膜屏幕的iPhone上,屏幕物理像素640像素,独立像素是320像素,因此,window.devicePixelRatio等于2,1px在iPhone 4s就占了2个像素。

如果在Retina屏幕上显示1个物理像素的边框线条,方法有很多种:包括设置border-width: 0.5px、border-image、动态viewport,这些方法有兼容、不支持圆角等问题,不够方便。通过个人实践,目前兼容较好且副作用较少的方式是通过:伪对象 + transform 缩放。

原理:在 Retina 屏幕上,去掉容器的原有 border,利用 :before 或 :after 制造容器尺寸 2 倍或 3 倍的绝对定位伪对象,使用 1px 的 border 定义伪对象边框后,用 transform 的 scale 把伪对象缩小到一半或 1/3,这样看上去伪对象就和容器一样大了,border也相应缩小到单个物理像素。

具体实现方式及主要实现代码如下:

/* 在头部获取设置devicePixelRatio */
!function(win) {
	var doc = win.document;
	var dpr = win.devicePixelRatio;
	if (dpr > 2) {
		dpr = 3
	} else {
		if (dpr > 1) {
			dpr = 2
		} else {
			dpr = 1
		}
	}
}(window);
/*根据dpr缩放border*/
@mixin dpr-border($class, $color, $radius:0, $position:all) {
%border {
  @if $position == 'all' {
    border: 1px solid $color;
  } @else if $position == 'right' {
    border-right: 1px solid $color;
  } @else if $position == 'left' {
    border-left: 1px solid $color;
  } @else if $position == 'top' {
    border-top: 1px solid $color;
  } @else if $position == 'bottom' {
    border-bottom: 1px solid $color;
  }
}
.#{$class} {
  @extend %border;
  border-radius: $radius;
  position: relative;
}
$dpr: (2, 3);
@each $value in $dpr {
  [data-dpr^='#{$value}'] .#{$class} {
    border: none;
    $rValue: 1/$value;
    &:before{
   content: ' ';
   position: absolute;
   left: 0;
   top: 0;
   width: 100%*$value;
   height: 100%*$value;
   @extend %border;
   border-radius: $radius;
   -webkit-transform: scale($rValue) translate(-50% * ($value - 1),-50% * ($value - 1));
    transform: scale($rValue) translate(-50% * ($value - 1),-50% * ($value - 1));
  }
}
}
}
/* 引用方法,设border */
@import '../base/mixins';
@import '../base/function';
.border {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  border: 1px solid #999;
}
.border2,.border3 {
  margin: 20px auto;
  width: 100px;
  height: 100px;
}
@include dpr-border(border2,#999);
@include dpr-border(border3,#999,20px);

最终效果:点击查看
二维码扫一扫:

1border

通过 Sublime Snippet 定制自己的代码片段

在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet功能,就能很好的解决这一问题。

创建方法:Tools > New Snippet,可以看到新建的文件格式:

<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!– Optional: Set a tabTrigger to define how to trigger the snippet –>
<!– <tabTrigger>hello</tabTrigger> –>
<!– Optional: Set a scope to limit where the snippet will trigger –>
<!– <scope>source.python</scope> –>
</snippet>

简要介绍一下snippet四个组成部分:

content:其中必须包含<![CDATA[…]]>,否则无法工作, Type your snippet here用来写你自己的代码片段
tabTrigger:用来引发代码片段的字符或者字符串, 比如在以上例子上, 在编辑窗口输入hello然后按下tab就会在编辑器输出Type your snippet here这段代码片段

scope: 表示你的代码片段会在那种语言环境下激活, 比如上面代码定义了source.python, 意思是这段代码片段会在python语言环境下激活.

description :展示代码片段的描述, 如果不写的话, 默认使用代码片段的文件名作为描述

${1:name}表示代码插入后,光标所停留的位置,可同时插入多个。其中:name为自定义参数(可选)。

${2}表示代码插入后,按Tab键,光标会根据顺序跳转到相应位置(以此类推)。

创建完毕以后,保存在\Packages\User目录下,文件后缀名为:.sublime-snippet。

附上 list of scopes:

ActionScript: source.actionscript.2
AppleScript: source.applescript
ASP: source.asp
Batch FIle: source.dosbatch
C#: source.cs
C++: source.c++
Clojure: source.clojure
CoffeeScript: source.coffee
CSS: source.css
D: source.d
Diff: source.diff
Erlang: source.erlang
Go: source.go
GraphViz: source.dot
Groovy: source.groovy
Haskell: source.haskell
HTML: text.html(.basic)
JSP: text.html.jsp
Java: source.java
Java Properties: source.java-props
Java Doc: text.html.javadoc
JSON: source.json
Javascript: source.js
BibTex: source.bibtex
Latex Log: text.log.latex
Latex Memoir: text.tex.latex.memoir
Latex: text.tex.latex
LESS: source.css.less
TeX: text.tex
Lisp: source.lisp
Lua: source.lua
MakeFile: source.makefile
Markdown: text.html.markdown
Multi Markdown: text.html.markdown.multimarkdown
Matlab: source.matlab
Objective-C: source.objc
Objective-C++: source.objc++
OCaml campl4: source.camlp4.ocaml
OCaml: source.ocaml
OCamllex: source.ocamllex
Perl: source.perl
PHP: source.php
Regular Expression(python): source.regexp.python
Python: source.python
R Console: source.r-console
R: source.r
Ruby on Rails: source.ruby.rails
Ruby HAML: text.haml
SQL(Ruby): source.sql.ruby
Regular Expression: source.regexp
RestructuredText: text.restructuredtext
Ruby: source.ruby
SASS: source.sass
Scala: source.scala
Shell Script: source.shell
SQL: source.sql
Stylus: source.stylus
TCL: source.tcl
HTML(TCL): text.html.tcl
Plain text: text.plain
Textile: text.html.textile
XML: text.xml
XSL: text.xml.xsl
YAML: source.yaml

相关资料:

http://docs.sublimetext.info/en/latest/extensibility/snippets.html

http://www.imooc.com/video/6402

Javascript中浮点数的计算精度问题

在打开console之前,先想想 0.1 + 0.2 == 0.3  返回的是true还是false。

现在再来console里运行下,发现返回的竟然是false,再运行下 0.1 + 0.2,得到却是 0.30000000000000004。

站在计算机的角度来分析一下这个问题,在计算机的世界中,计算机只认识0,1,我们传入的十进制数字并不会被计算机直接识别。计算机会先将其转换成二进制,然后使用转换后的二进制进行计算。那么0.1和0.2转换成二进制(进制转换工具)分别是:

(0.1) => 0.0001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 101
(0.2) => 0.0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 01

然后对上面的两个二进制数字做加法,得到的结果是:

0.0100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1101 01

再把这个二进制转换成十进制,就是我们前面的结果0.30000000000000004了。

计算机世界的数值计算基本上都是这个过程,采用了IEEE-745浮点数表示法(几乎所有的编程语言都采用),只不过C++、C#、Java这些传统强类型语言将这个边界问题封装在内部了,它们在进行浮点数四则运算时,会在语言层面自动解决这个问题。而Javascript作为一门弱类型的语言,它在语言层面并没有对这个问题进行处理,所以需要我们手动去处理。

那么,我们如何去避免这个问题呢?

基本上有两种思路。

1.先扩大数值到javascript可精确识别的精度级别(比如个位数级别)然后再进行计算,然后再对结果除以放大的倍数。

var a = 0.1;
var b = 0.2;

var ret = (a * 10 + b * 10) / 10;
console.log(ret);

2.在运算的过程中通过toFixed()指定运算的精度要求。注意toFixed()返回的是一个String,所以我们还需要进行parseFloat操作

var a = 0.1;
var b = 0.2;

var ret = (a + b).toFixed(1);
var ret = parseFloat(ret);

处理浮点数最好的建议是使用库,像sinfuljsmathjs。但实际上,任何和数学相关的我甚至不会使用JavaScript去做。当需要任意精度数学计算的时候,BigDecimal也是非常有用的。

在Dcloud 下开发 iOS App 的上架 App Store 流程

在Dcloud开发app也有一段时间了,针对iOS App,一直是使用企业账号进行打包,并上传到fir.im进行分发测试。最近申请了公司账号,打包后不能再使用企业账号的in-house方式打包了,只能使用ad-hoc方式(需要为每个测试的设备添加UDID,并且最多支持100台设备)。

下面来说说打包发布 App Store 的过程,首先,按照官方提供的教程申请发布(Distribution)证书和描述文件,注意是发布的证书,不是开发的,完成后,在HBuilder中采用刚才申请的发布证书和描述文件进行打包。

接着下载ApplicationLoader,安装后,通过公司账号登录,并上传刚才打包的app,在iTunes Connect会使用到。

登录iTunes Connect,点击进入My App ,创建新的App,并填写相关的资料,在构建版本选择刚才在ApplicationLoader上传的app。App 预览和屏幕快照的图片,可以通过iOS模拟器截图,快捷键Command + s。完成后,点击提交审核即可。

 

Mac下 oh-my-zsh 的中文乱码问题

oh-my-zsh是个很强大的shell。不过默认却对中文支持不好,ls查看中文目录会显示乱码。这是因为locale没有设置为utf-8的原因。

修改方法:

在终端下输入

vi ~/.zshrcn 

在文件内容末端添加:

export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8

接着重启一下终端,或者输入

source ~/.zshrc

完成!