2014-09-07

为什么有的字体是16.67px

2014-09-07

vim

好吧，vim的操作，特别是上下左右竟然是 hjkl h跟l 左右还好区分，j k 两个老是分不清楚。
左右比较好分，上下如何分呢？
j在键盘上，正好是食指的地方，最方便按的。而一般看文字的时候，都是从上往下看的，所以按j就是往下。最方便。大概这么记好记一点吧。

难怪这里说 有的人用不惯vim的方向键就早早的退出了

专门给你练习上下左右的贪吃蛇

vimRPG游戏

攻略

2014-09-06

css3阴影box-shadow

box-shadow: 0 0 0px 5px #ff6600最里面的一层,0 0 0px 15px #fff中间的白色,0 0 0 20px #4fc1e9最外一层;

css3多边框demo

 <!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>HTML5 canvas demo</title>
	 <style>
       *{
         box-sizing:border-box;
       }
      .test{
        height:100px;width:100px;
         border:0px solid #4fc1e9;
         border-radius:100%;
         transition:all .3s ease;
         display:flex;
         -webkit-justify-content: center; 
         -webkit-align-items: center;
      }
       .test1{
         padding:5px;
       }
      .test1:hover{
        padding:0;
        border-width:5px;
      }
 
       .test3:hover{
	-webkit-box-shadow: 0 0 0 5px #4fc1e9;
	   -moz-box-shadow: 0 0 0 5px #4fc1e9;
		-ms-box-shadow: 0 0 0 5px #4fc1e9;
		 -o-box-shadow: 0 0 0 5px #4fc1e9;
         box-shadow: 0 0 0px 5px #ff6600/*最里面的一层*/,0 0 0px 15px #fff/*中间的白色*/,0 0 0 20px #4fc1e9/*最外一层*/;
       }
       
    .test4:hover{
	-webkit-box-shadow: 0 0 0 5px #4fc1e9;
	   -moz-box-shadow: 0 0 0 5px #4fc1e9;
		-ms-box-shadow: 0 0 0 5px #4fc1e9;
		 -o-box-shadow: 0 0 0 5px #4fc1e9;
         box-shadow: 0 0 0 5px #ff6600 inset/*最外面的一层*/,0 0 0 10px #ffffff inset/*中间的白色*/,0 0 0 15px #4fc1e9/*最里一层*/ inset;
       }
       
    </style>
    
  </head>
  <body>
    <div class='test test1'>内padding</div>
    <div class='test test3'>外box-shadow 双边效果</div>
    <div class='test test4'>内box-shadow 双边效果</div>
  </body>
</html>

2014-08-24

CSS3-3D-Transform

CSS3D 变形，主要的两个样式就是

1 2	transform-style: preserve-3d; perspective: 800px;

元素设置了此样式后，里面的元素就能按照3D的模式去渲染。
为了更好的理解。
可以看这个DEMO

网上有一个教程是关于如何用css来实现视差滚动，不过原地址打不开了,但是DEMO还可以看。找到一篇中文翻译

当前页面渲染的层级超过3个的时、或者层级使用了透明度。滚动的时候可能会有卡顿。

配合之前的平滑滚动

可以发现，当前视口的视差层级两个的时候，效果如丝般顺滑DEMO地址

试了几次发现如果当前页面的可视区域有 Foreground Layer 渲染时，就会感觉滚轮有点卡。

2014-08-09

平滑滚动SmoothScroll

让滚轮更平滑
js的github地址
访问以下两个demo体验以下
有SmoothScroll
无SmoothScroll

只用在浏览器里面运行载入这段脚本

js结合css一个简单的日历

先看DEMO

先分析一下这张图
demo

//只要知道每个月的第一天是星期几，以及这个月有多少天。
//比如：2014年8月1日是星期5，这个月有31天，那么前面先添加5个空白日期占位，接着在循环31天的日期。
//日历中的每一天，用 ul>li li设置样式{float:left;width:14.28571429% /\* 这里是 100/7 \*/} 控制每排显示7个，前面添加的占位就会把后面的顶下去。


//示例：通过创建function init(y,m,d){...}，传入y(年)、m(月)、d(日)三个参数，来生成日历（其实年月就够了）。

//核心代码：
function init(y,m,d){
	//当月有多少天
	var monthDays = (m + 1 > 12) ? new Date(+new Date(y+1+'/'+1+'/1') - 1).getDate() : new Date(+new Date(y+'/'+(m+1)+'/1') - 1).getDate();
	console.log(m+'月有'+monthDays+'天');		
	//第一天是星期几
	var firstDay = new Date(y+'/'+m+'/1').getDay();
	console.log('第一天'+y+'/'+m+'/1'+'是星期'+firstDay+'前面要添加'+(firstDay)+'个空白日期');
	var dayHtml = [];

	//填充空白日期
	for(var i = 0, len = firstDay; i < len; i++){
		dayHtml.push("<li><a></a></li>");
	}
	//填充日期
	for(var i = 1, len = monthDays; i <= len; i++){
		dayHtml.push("<li title='"+y+"/"+m+"/"+i+"'><a>" + i + "</a></li>");
	}
	
	//日历容器 ul.innerHTML = dayHtml.join('');
}

以下是完整代码

angularjs学习笔记.md

找到angular.js 中文网，发现由于google 被屏蔽，angularjs压根就加载不鸟。
于是找到bootstrap开源CDN里的angularjs 。

选择 1.2.6版本。

1	<script src="http://cdn.bootcss.com/angular.js/1.2.6/angular.js"></script>

先走完这个教程 http://www.angularjs.cn/tag/AngularJS?p=1

再走这个
http://www.zouyesheng.com/angular.html#toc1

看不懂http://www.youtube.com/watch?v=aXuK2ACHLcU 估计要等基础教程看完了再看这个。

资源http://www.iteye.com/news/28651-AngularJS-Google-resource

首先从angularjs 中文网开始吧，先要搭建学习环境，需要在本地

1	git clone git://github.com/angular/angular-phonecat.git

可是下载奇慢。索性放到网盘里下载地址

2014年8月3日20:21:46
http://angularjs.cn/A003
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743858312764dca7ad6d0754f76aa562e3789478044000

引导程序说运行 node scripts/web-server.js 不过这个文件貌似木有。
翻墙到官网 https://docs.angularjs.org/tutorial/step_00
需要
npm start
ok，总算把环境搭建起来了。
浏览 http://localhost:8000/app/
看到 Nothing here yet!

chrome 翻译插件找了几个都不好用，索性直接用chorme的翻译

chrome 浏览器插件 Batarang 调试 angular 安装好后F12可以看到angular的标签
git 小乌龟

http-server 将任意目录当web服务器 github

单元测试karama
安装:npm install -g karma

jasmine 分组 用例 期望 匹配
    describe(string,function) 分组，一组测试用例
    it(string,function) 单独的测试用例
    expect(expression)表示期望值
    to***(arg) 匹配

安装bower
npm install bower -g

通过bower 安装jasmine

Protractor 一款集成测试工具抓们为angularjs应用而设计

不要试图去复用Controller，一个控制器一般只负责一小块视图
不要在Controller中操作DOM，这不是控制器的职责
不要在Controller里面做数据格式化，ng有很好用的表单控件
不要在Controller里面做数据过滤操作，ng有$filter服务
一般来说，controller是不会互相调用的，控制器之间的交互会通过事件进行。

可以用angular.element($0).scope()进行调试，查看当前$scope

Ui-route 深层次嵌套

2014-08-02

wordpress取消加载google字体

google 被屏蔽了，由于wordpress 加载了google字体，导致网页打开缓慢，字体显示不出来。
解决方法：找到主题文件中的functions.php，注释掉 twentytwelve_get_font_url()中的 return $font_url;

比如：

1	.\wp-content\themes\twentytwelve

下的functions.php

...
twentytwelve_get_font_url() //方法  大概121行
...
...
// return $font_url;  //注释掉

2014-07-10

zepto 插件写法

一个更换背景颜色的小插件

html

1	<div id="box">content</div>

javascript

 //改变元素背景颜色
 ;(function($){
	$.fn.vgoPlugin = function(option){
	  var opts = $.extend({}, $.fn.vgoPlugin.defaults  , option);
		this.css('backgroundColor',opts.color);
	};
	$.fn.vgoPlugin.defaults = {
		 color:'#f60'
	};
})(Zepto);

 //$("#box").vgoPlugin();
 //$("#box").vgoPlugin({color:'#369'});

 ;(function($){
    $.extend($.fn, {
    vgoPlugin1: function(option){
		var defaults = {
			color:'red'
		};
		var opts = $.extend({},defaults , option);//注意这里顺序option在前面
		this.css('background',opts.color);
		return this;
		}
    })
})(Zepto);
 //$("#box").vgoPlugin1();
 //$("#box").vgoPlugin1({color:'#369'});

两种写法都可以

2014-07-06

移动端开发资源搜集

慢慢完善
前端资源博客 https://github.com/foru17/front-end-collect
前端网址导航 http://www.whycss.com/

移动端开发
https://speakerdeck.com/edokeh/xin-zhan-html5-hong-ping-ban-kai-fa-zong-jie

https://github.com/hoosin/mobile-web-favorites 给力

来自google移动端网页优化建议
http://luolei.org/google-io-2014-web-fundamentals-lessons-learned-from-analyzing-websites-at-scale/

@勾三股四 Google I/O 2014 发布的 Material Design 将会成为统一 Android Mobile，Android Table, Desktop 等平台的设计语言规范，对从业人员意义重大，我们正通过互联网的方式将其翻译成中文~
http://design.1sters.com/

框架
用zepto.js 类似jquery

UI 库
Swipe 针对Slider 组件简单无依赖
iScroll 局部滚动
手势库 hammer.js
模板引擎 https://github.com/wycats/handlebars.js/
video https://github.com/videojs/video.js 播放视频
移动端事件处理 https://github.com/chenmnkken/monoevent 带刀

滚动条 http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/

弹出层，Tab Folder 自己编写

工具库 http://lodash.com/

ajax库 https://github.com/visionmedia/superagent

http://jsdashi.com/development/420.html 指尖的触动-制作一个web App应用程序

http://isux.tencent.com/pull-down-to-reflesh.html 下拉刷新