站内搜索

本次搜索找到结果 9 条
看到小黑的文章关于webapp中的文字单位的一些捣腾感觉很赞。尤其是,他提到了手机淘宝的meta,所以觉得要讲讲我们这方面的一些实践。手机淘宝从2014年中开始,全面推行flexible设计。什么叫flexible呢?其实flexible就是responsive的低端形态和基础。对我们来说,最直观的感受就是,在超宽屏幕上,网页显示不会两边留白。以前pc时代大家经常讲的流体布局,其实就是一种flexibledesign。只不过,流体的表述角度是实现,flexible的表述角度是结果,为了跟高大上的responsive保持一致,我们这里使用了flexible这个说法。讨论方案之前,需要先了解三个关键概念:单位英寸像素...
序ES6,或许应该叫ES2015(2015年6月正式发布),对于大多数前端同学都不陌生。首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性你可能不知道的事,希望能为各位同学正确使用ES6,提供一些指导。对于ES6,有些同学已经在项目中有过深入使用了,有些则刚刚开始认识他,但不论你是属于哪一类,相信这篇文章都有适合你的部分。针对文章中的问题或不同意见,欢迎随时拍砖、指正。正文Let+Const这个大概是开始了解ES6后,我们第一个感觉自己完全明白并兴致勃勃的开始使用的特性。以如下方式使用的同学请举下手?//定义常量constREG_GET_INPUT=/^\d{1,3}$/;//定义配置项letcon...
作者ZachHolman本文为Coding用户协作翻译,转载请注明来源。如果你对本文的翻译有建议,欢迎提交PullRequest。让我们来聊聊部署无论你何时对自己的代码库做出改动,总会伴随着要破坏一些东西的风险。没有人喜欢宕机,没有人喜欢暴躁的用户,也没有人喜欢生气的经理,所以部署新代码到生产环境变成颇具压力的一个环节。你完全没必要对它有压力,我将在这里重复一遍又一遍这句话:你的部署应该尽可能单调、直接、毫无压力。部署新功能到生产环境中应该像在HackerNews开始一场关于用spaces还是tabs的口水战一样简单。它应该足够简单到让新员工理解,它应该为防止错误而生,它应该在第一个最终用户看到新代码前被很好地测...
这两天在做公司的PC站时因为需要使用angular的$http服务存取数据,而且接口又在另一个域名下面,不得不研究下跨域的问题.以下把这两天遇到的一些问题总结下.(都是我自己遇到的一些问题,所以可能不太全面)Access-Control-Allow-Origin的问题跨域遇到的第一个问题就是Access-Control-Allow-Origin的错误,Chrome报错Responsetopreflightrequestdoesn'tpassaccesscontrolcheck:No'Access-Control-Allow-Origin'headerispresentonthereques...
现在,WebApp日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验。阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度、渲染时间和其他方面的性能表现。概述对WebApp进行性能优化是一份冗杂沉重的工作,这不仅是因为构建一个WebApp需要前后端协作,而且需要多方面的技术栈:数据库、后端、前端,需要运行在多种平台:iOS,安卓,Chrome,Firefox,Edge。这太复杂了!不过,还是有一些历经实践的通用方式可以用来优化WebApp的性能。在接下来的小节中,我们将逐步介绍相关的细节。一份来自Bing的研究表明,页面加载时间每增加10ms,每年就会减少$250k的收入。————RobTrace...
以前或许我们在做前端效果时都是在使用JS来,如JQuery的animate,而如今在前端效果中,CSS3占据越来越重要的作用,如何检测一个CSS3的动画是否结束并在结束后执行下一个动画呢?用jQuery的时候可能是这样:$('.element').animate({left:'100px'},function(){alert('动画执行结束');});下面以一个简单的例子演示下使用CSS3的动画如何响应这种操作:/*一个简单的CSS3动画(这里不再写-webkit-之类的前缀了*/@keyframesfade{from{left:0;}to{left:200px;}}.animate-fade{animation...
做前端的应该都会知道LESS,使用LESS书写CSS样式可以在很大程序上降低工作量以及由拼写造成的错误,但对新手来说除了LESS的语法外,如何在自己的工作环境上用上LESS可能也是个问题。个人认为,使用LESS最简单的方法就是实时编译:即对LESS文件做的修改可以在不额外加任何操作(编译)的情况下应用在测试环境甚至生产环境,毕竟对LESS文件每做一点小修改都要重新编译一次也太麻烦了些,而且很慢。实时编译有两种方法:一是在HTML中引入less.js文件,并且设置工作环境是“development”,这样在网页每次载入时都会重新编译LESS文件;二是使用某些编辑器,如SublimeText,SublimeText有...
CSS3对于前端工程师来说,越来越重要了。有很多CSS3的效果真的不需我们自己一个一个去写,在这种情况就互联网上有关于CSS3的工具就出现了,这些工具将给你的制作节省很多时间,让你有更多的时间去做自己想要做的事情。CSSAnimatieCSSAnimatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码。http://cssanimate.com/LongShadowsGenerateLongShadowsGenerate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。http://sandbox.juan-i.com/longshadows/Fontasti...
本文章来给大家介绍一个jQuery+Ajax+PHP实现“喜欢”评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经“喜欢过了”。数据库设计先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“喜欢”总数,pic_ip则记录用户点击喜欢后的IP数据。CREATETABLEIFNOTEXISTS`pic`(`id`int(11)NOTNULLAUTO_INCREMENT,`pic_name`varchar(60...