交互效率

Archives

文件夹

原文地址:http://elf8848.iteye.com/blog/1582137 Mac 启动加载文件位置(可设置环境变量) ——————————————————- (1)首先要知道你使用的Mac OS X是什么样的Shell,使用命令 echo $SHELL 如果输出的是:csh或者是tcsh,那么你用的就是C Shell。 如果输出的是:bash,sh,zsh,那么你的用的可能就是Bourne Shell的一个变种。 Mac OS X 10.2之前默认的是C Shell。 Mac OS X 10.3之后默认的是Bourne Shell。   (2)如果是Bourne Shell。 那么你可以把你要添加的环境变量添加到你主目录下面的.profile或者.bash_profile,如果存在没有关系添加进去即可,如果没有生成一个。   1./etc/profile   (建议不修改这个文件 ) 全局(公有)配置,不管是哪个用户,登录时都会读取该文件。   2./etc/bashrc    (一般在这个文件中添加系统级环境变量) 全局(公有)配置,bash shell执行时,不管是何种方式,都会读取此文件。 我在这里加入mysqlstart、mysql和mysqladmin命令的别名,保证每一个用户都可以使用这3个命令。   3.~/.bash_profile  (一般在这个文件中添加用户级环境变量) (注:Linux 里面是 .bashrc 而 Mac 是 .bash_profile) 若bash shell是以login方式执行时,才会读取此文件。该文件仅仅执行一次!默认情况下,他设置一些环境变量 我在这里:设置终端配色、 我在这里:设置命令别名alias ll=’ls […]

什么是前端开发工程师 前端开发工程师是Web前端开发工程师的简称,是近五年才真正开始受到重视的一个新兴职业。 这个岗位的职能现在还存在很多争议,尤其是在互联网技术并不发达的地区,但不管如何争执,前端工程师都需要掌握以下几个技能。 HTML CSS JavaScript 而争议就在于上面三个技能水平的不同,能做的事情不尽相同,而且其他岗位,如后端开发也要了解这些技能,一些设计也需要会这三个技能,导致了前端工程师的市场出现了一阵的混乱。 而现在,我们将这些可能造成混乱的岗位,根据岗位需要又进行了细分。   前端开发工程师的分类 美工:从设计,到页面重构全包的岗位,对上面三个技能的要求都只是熟练而已,互联网行业发达的城市几乎看不到该岗位了; 页面重构师:前两年比较标准的前端工程师,精通HTML、CSS,JavaScript是熟练级别能够很好的使用一些现成的类库和框架就好。 高保真原型开发师:一些公司分工非常细,这个岗位不用写JavaScript,但是Html和Css可能是专家级别的,负责将设计稿高度还原成页面。 H5前端开发工程师(JS方向):这个方向的工程师是JavaScript的专家,他们可以不用会写页面,但是写JS是一把好手。 H5前端开发工程师:没有特殊说明的H5前端开发工程师,是三项技能都达到精通的开发者,这类开发者用的前端开发技术比较新,倾向于解决移动端开发方案。 移动端前端开发工程师:很多公司以H5开发工程师来招募这个岗位的人员,然而其实H5开发工程师不一定是移动端开发,所以移动端前端开发工程师是专注移动端页面开发的人员,更了解手持设备。 前端架构师:专家级别的js开发工程师,负责造轮子写公司前端UI架构和脚本架构。 还有与设计和动画相关的前端开发岗位在这里就不赘述了…   前端工程师需要掌握的知识 上面说了3个基本技能,然而这3个基本技能并非像想象的那么简单,尤其是JavaScript,现在的受欢迎程度节节攀升,重要程度也不再是以前那个只做表单验证的被开发人员们嫌弃的语言。 另外前端作为中游开发,负责接收UI设计进行生产,之后产出给后台同学页面(现在一些开发模式不用给后台同学页面了,因为前端包办了后台模板开发的任务),所以前端作为枢纽,需要庞大的知识面,什么都要了解一些才能得心应手地做前端工作。 那么该掌握什么呢? 必须熟练掌握基本的web前端技术,比如:css、js、html 等等; 掌握一个到多个流行的类库(jQuery、zepto等)和框架(Angularjs、backbone、bootstrap等); 至少掌握或了解一门后端语言(JAVA、PHP、.Net); 必须掌握网站的性能优化、SEO、UE、服务器端、兼容性、存在的bug等; 学会用工具辅助开发; 有良好的代码规范编写习惯。 下面的图形象的说明了前端开发根本就是个百晓生… 做前端很简单,做前端很难 前端这个岗位在开发人员中,无疑是最具趣味性的,这得益于所见即所得的开发本质。 任何有一点代码基础的人,甚至不太懂代码的人都可以很快的写出一个页面,并让它运行在你的浏览器里面。 然而前端开发的学习曲线却是异常地陡峭,因此造成了现在市场上该岗位人才的两极分化,也是现在市场上前端开发供不应求的根本原因。   最后说说HTML5 H5前端开发是个奇怪的岗位,因为很多公司招募H5前端开发,其实并不是在用HTML5。 上海这边对稍微高端些的前端开发岗位,尤其是移动端,基本都叫H5开发了。 典型的岗位需求就是你要会一点Nodejs; 要会一个或多个MVVM或MVC框架; 最好会一点Hybrid开发; 能处理手持设备的兼容问题。   结语   智能手机大爆炸时代,移动端用户大暴涨时代,所有的开发应用势必会秉承移动优先的原则,作为专注移动端开发的HTML5,无疑将是未来开发领域的佼佼者。 几年内,HMTL5已经横跨所有智能平台,让我们拭目以待前端开发工程师多彩的未来。  

新工作的开发环境倾向我并不是很熟悉的VS2012,代码习惯和快捷键也进入了新的环境。 经过了一番自定义以后,发现VS2012自带的类似ZenCoding的功能并不是很完整,于是… 可以去官网下载相应扩展,VS2012是最低的支持版本。 ZenCoding的新名字是Emmet(其实也不新了);   官方下载Emmet   直接在开发环境里面安装可以依据以下步骤 工具->扩展和更新->搜索Emmet 找到以后安装即可。   不过VS下面的快捷键不一样~ 补全是Ctrl+1 还有我最爱的块选择是Ctrl+3和Ctrl+4 当然你也可以重新自定义,有兴趣的快去试试吧。

首先让我们假设手机性能并不是很好。 1、做位移动画translate比trbl更流畅; 2、通过backface-visibility可以开启gpu性能; 3、动画期间transform的属性应该是保持一致的,不然部分手机(小米3)只会做最后定义的动作; 4、在ios6的情况下如果动画不用translate3D,内容多了切换会出现花屏(更准确说应该是translateZ); 5、安卓部分机型不支持对:before元素的动画;

事情来自于lazyload的编写,这里以图片()为例: 1.display:none的图片同样会请求; 2.另外设置了display:none元素element.offsetTop 取不到值  而  $(selector).offset().top取到的值等于scollerTop的值 。 因此我们在做通过滚动判断图片是否在屏幕中的时候,要考虑标签切换时图片的读取状态和加载规则。

想说的其实就是个代码容错率的问题。 最近出现了一下几个问题: cookie明明已经存好了,却无论如何取不到—— 是后端同事传cookie的时候在属性名上加了空格; 判断页面状态出现错误(不详述)—— 是用indexOf截取判断url的时候关键字过于简单(比如只判断了indexOf(“10”)),导致url被加入其他参数的时候判断目的出错; 多条件判断逻辑要清晰 —— 经常出现判断遗漏条件、默认执行条件有问题的情况; 以上的问题,思考一下,然后想一些方案来解决。   如何应对: getCookie的时候要对属性名清空格; 关键字尽量完整,因为这是不可预估的问题,测试环境可以方便测试使用,建议生产环境上干脆使用其他方式来达到目的; 判断要靠图来解决了,画出逻辑图,可以直观看出各个条件节点,带着图和产品确认逻辑也可以将风险外包(笑); 大学时候软件工程学习了代码的健壮性,但是每个人自律的情况不一样,再加上经验的差异,往往出现各种不可预知的问题。 最近吃了不少亏,但从大方向讲收获更多,以上分享给朋友们。

刚接触手机的时候,前端工程师喜欢用click去处理点击/触摸事件。 渐渐地,通过体验和看过一些文章,我们知道手机上还有touch专用事件,于是我们开始专用touchstart或者touchend来处理触摸事件,然后我们就碰到了各种问题… Click的延迟问题 click从功能上讲问题不大,但是响应有延迟,传说300毫秒,其实根据机能不同会有更长时间的延迟。 据说一些安卓机用click会出现其他的问题,我没碰到过所以不细说了。 各种touch先天不足 touch响应快,但是你碰到屏幕就是一个touchstart事件,离开屏幕就是一个touchend事件,就算你去拖动屏幕也会执行触发这两个事件,产生的问题我们叫误点击。 解决响应时间和误点击的几个方案 首先我这里不谈jqueryMobile。 那么我知道的几个解决方案为: fastclick,https://github.com/ftlabs/fastclick; MBP.fastButton,https://github.com/h5bp/mobile-boilerplate zepto的tap和singleTap事件,http://zeptojs.com/ 上面几个方案都可以很好的解决响应和误点击问题。 那么我们进入正题——“连点”问题 什么是“连点”? 当你点击一个层,而这个层因为事件控制而隐藏了,这时候恰巧这个层下面的区域点击的同一个位置也有点击事件被触发了,那么就是“连点”了。 这个问题发生在弹出层的情况比较多。 上面提到的三个方案在新的手机里面都不太容易(总有特殊情况)出现“连点”问题,但是在老的安卓里面,比如我手上的三星Note中fastclick就会出现连点。 而其他方案表现就很好,所以从这个角度fastclick基本被淘汰了。 还有一种“连点”! 连点还有一种情况,就是你可能在事件里面写了个window.location.href跳转,你这个跳转非常快的完成了,然后又恰巧你跳转的页面在你点击的位置也有个点击事件/链接,那么这个事件/链接也会被触发。 这个是点击问题中最丧心病狂的~ 而且关键的是除了click和a标签本身,其他方案都无法避免这个问题。 所以请避免使用点击事件做跳转。 父子Dom的点击事件关系 如果我的一个大dom上有个点击事件,dom中的子dom也有个点击事件,那么点击子dom会执行谁的事件呢? 如果你用click和fastclick就都会执行,其他的方案是执行子dom的事件。 综上所述 如果你在项目中用了zepto,请优先用zepto的相关点击事件,来避免可能发生的问题。 当然了fastclick还有其他的响应功能,如果你需要的话可以在合适的时候去使用它。

最近在用scrollTop的时候发现的一些问题。 在document.ready中使用scrollTop()获取当前滚屏的值。 假设页面有大于两屏的高度,先把页面拉到中间,然后刷新页面。 其他平台: 先将页面定位到刷新前的位置,然后获得滚动高度。 wap端(iPhone): 先获得滚动高度,再定位到刷新位置。   我在做lazyload的时候,因为这个问题iPhone的初始化出现了问题,在载入页面时无法正确的处理当前页面的图片加载。   暂时的解决方法有以下集中, 1、加个时间延迟,这样能保证页面跳转后执行初始化,但是要注意,如果你的时间延迟快过你页面构建的速度(ajax之类),还是无法读取到正确的滚屏高度。 2、价格window.scrollTop(0),因为获得高度默认为0,所以让设置他为0也可以达到相对正确的初始化。如果你要在页面加载的时候改变dom结构慎用。

这篇文章主要简单介绍浏览器缓存的机制,我们在做Server端响应时间优化的时候经常会接触到缓存的概念,例如经常会用到Memcached或Redis。我曾经使用缓存将原本一分钟才能获取的数据优化到了不到一秒的时间,当然,缓存也不是万能的,某些数据可以使用缓存或者必须使用缓存,有些数据则必须禁用掉缓存,确保每次请求返回的都是最新的数据,技术的运用方式是建立在业务的需求上的。 浏览器有一套自己的缓存机制,而在这个机制的基础上缓存规则的制定则主要依靠后端来实现,这属于一个合格的WEB开发者必须了解的内容。下文中提到的缓存概念,如果没有特殊说明都是指浏览器缓存,本文主要使用Chrome作为客户端,同时对Chrome开发者工具的一些细节进行了介绍。 什么是缓存? 引用Wikipedia上对Web cache的介绍,缓存就是: A web cache is a mechanism for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce bandwidth usage, server load, and perceived lag. 翻一下大意是: WEB缓存就是临时存储WEB文档,例如HTML页面、图片等降低带宽使用、服务器负载、提升响应速度的一种机制。 我们使用的任何一个现代浏览器都支持缓存机制。 缓存在哪里? IE浏览器: 我们可以通过IE的设置界面来查看缓存存放的位置:Internet选项->点击常规选项卡设置按钮->点击查看文件按钮即可自动打开缓存目录。如下图: enter image description here Firfox 查看Firefox浏览器缓存可以在Firefox地址栏输入about:cache来查看缓存详情,如图: enter image description here Chrome Chrome并没有直接说明缓存目录、大小等具体信息,不过我们可以用Google查到,以Windows平台为例,Chrome的缓存目录在C:\Users\{{user name}}\AppData\Local\Google\Chrome\User Data\Default\Cache目录下。 Chrome […]