[米随随] s5s5

年终总结2013

2013年是移动端技术大发展的一年，从老婆的小米1s和老爸使用红米的情况上可以看出，手机在改变他们的生活。而我，做为一个技术人员，则有必要满足和他们一样的人民群众的需要，而不只是死抱着PC端不放，拥抱变化，因为变化让生活更加的美好。

但目前看来手机性能的问题制约着我所掌握的技术，做个简单页面还OK，如果复杂些和原生的就差远了，所以有必要研究一些原生的东东了。所以2014年会学习些原生APP技术，期望可以借此提高收入，哈哈哈……

好吧，让2014来的更猛烈些吧！

手机中的页面

今年折腾手机里的页面折腾的不少，一开始要求是用响应式，结果发现做点不变更需求的不要求快速上线的需求还好，可这TMD世界上有不变更的不快速上线的需求吗？
答案是木有啊！！！

先说说响应式页面
一套页面就要适应所有终端有木有，这是一个无底洞啊同志们！！！你要测多少设备，切多少适应式图片，写多少兼容性代码，特别是设计师同志设计出来的没有mobile first，这一开始就注定了后面源源不断的微调啊！！！
当然，今年主要都是跟活动类的需求，比起平台类的来说，时间要求高，过了这个点这活动上线就没什么意义了。所以在我分析了不少响应式页面后……
终于发现，原来做成PC和手机两套页面就可以了。为什么呢？

第一，从数据上来说，现在手机和PC是最大头的访问来源，别的设备，只要显示PC或手机中的页面就OK。
第二，从开发效率上来说，只做手机和PC很有针对性，不像响应式什么都是目标，那什么可能都捞不着。
第三，从性能上来说，因为有第二条有针对性，那么我们也可以针对两种设备做优化，响应式怎么个优化？

接下来就是手机中的页面要怎么弄
继续阅读“手机中的页面”

CSS动画

今年前些日子在 2013 WebRebuild 成都站上做的了关于CSS动画的分享，所以把分享PPT放出来了，欢迎大家接着拍砖。呵呵，这几天有点小暴发，因为2013年快过去了，赶紧要把一年的心得分享出来，从而好迎接2014的挑战呢~

这个PPT，为了与以往大家的不一样，在表现形式上用了WEB方式实现，切换特效就是用的CSS，谁让咱讲的就是CSS动画呢，为了这，可花了一整天的时间呢。然后里面有不少的DEMO，基本上都是我写的啊，这一年真是一把鼻涕一把泪啊，另外DEMO太多为了性能所以DEMO默认是不显示的，按一下R键就显示当前DEMO，同时也会关闭别的DEMO。当然也是和公司说好，可以放出来的一些代码，虽然前端代码原本别人想看就能看……

好嘛，地址是：http://s5s5.github.io/CSS-Animations/
国际惯例也是放在Github上的：https://github.com/s5s5/CSS-Animations
继续阅读“CSS动画”

行进记录

刚在Github上开了一项目：行进记录（https://github.com/s5s5/move-log）。这是一个记录你的移动，并在地图上画出你的行进路线的WEBAPP，使用了百度地图API，因为WEBAPP的局限性在交互和性能上有很多缺点，求拍砖。

访问地址：http://s5s5.github.io/move-log/

继续阅读“行进记录”

我的一些代码片断

我常用的一些代码片断，欢迎大家拍砖！已经放到Github上了，请访问：
https://github.com/s5s5/Code-snippets-of-s5s5
这里复制一份，但不在这里更新了，以后在Github上更新。

HTML

HTML文档声明

<!DOCTYPE html>

HTML编码使用utf-8，放置于

区最上方（文件保存时存为 utf-8 无BOM）

<meta charset="utf-8">

强制IE系浏览器用最新渲染模式渲染

<meta http-equiv="X-UA-Compatible" content="edge">

多终端设备访问时自动缩放到屏幕宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta 值是SEO优化的关键

<meta name="description" content="" />
<meta name="keywords" content=""/>

Title 部分更是SEO优化的关键

<title></title>

继续阅读“我的一些代码片断”

锋利的jQuery

优点：轻量、选择器、DOM操作、事件处理、兼容、链式操作
理念：write less, do more.
PS：windows.onload 与 $(document).ready() 区别
代码风格：1、链式操作风格（同级多行、子级缩进），2、注释
jQuery对象与DOM对象：1、方法不通用，2、可互转（$(cr), $cf[0]）
PS：is(‘:checked’)
与其它库的冲突：在别的库之前JQ被引入用jQuery. ，之后用noConflict()
—
基本选择器：#id .class element * selector1,…,selectorN
层次选择器：$(‘ancestor descendant’) $(‘parent > child’) $(‘prev + next’) $(‘prev ~ siblings’)
过滤选择器：:first :last :not(selector) :even : odd :eq(index) :gt(index) :lt(index) :header :animated :focus :contains(text) :empty :has(selector) :parent :hidden :visible [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attribute|=value] [attribute~=value] [attribute1][attributeN] :nth-child(index/even/odd/equation) :first-child :last-child : only-child :enabled :disabled :checked :selected
表单选择器：:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden
继续阅读“锋利的jQuery”

以用户为中心
挑战：适应用户、吸引用户、留住用户
从用户的角度换位思考：别把自己当典型用户、重视第一次体验、先场景
访谈和观察身边的用户：多开放式问题、多WHY、观察用户行为

竞品：特点、发展、用户反馈
可能性测试：验证想法

定位=目标用户+策略：功能、体验（海底捞）、用户群差异（YY）

需求设计：过滤和排序（基础核心 > 口碑 > 长尾）
体验设计：别让我等、别让我想、别让我烦（在使用过程中的感受，细节成就体验）

年终总结2013

手机中的页面

CSS动画

行进记录

我的一些代码片断

HTML

锋利的jQuery

跨平台密码管理方案

非产产6

非产产5

非产产4