菜单

做 Web 应用要知道的这些事

2019年3月24日 - CSS/CSS3

至于作者:刘健超-J.c

图片 1

前端,在路上…http://jchehe.github.io
个人主页
·
小编的稿子
·
19
·
    

图片 2

八 、好好搭配现有的衣着:Tmall逛了三个又二个钟头,如故索然无味头昏脑涨的密闭天猫商城界面,总觉得壁柜里还差一件衣裳,既然那么累,不及想一想所具备的最棒的陪衬。

UX:带宽

相对于桌面端,移动端的一个大核心是带宽,它是极度可贵的财富。由此,不该放过任何能压缩请求的空子,让它们尽或者地选择异步请求,并裁减请求能源的分寸。

JS & CSS – 合并与减弱:把面向具体运用的 JavaScript 和 CSS
 合并到独门文件里(叁个 JS,三个CSS),并展开压缩。Grunt-contrib-concatGrunt-contrib-cssmin 和 Grunt-contrib-uglify 都以你的好爱人。

抱有财富 – 使用
CDN:它有四个十分重要的优势。第3个是适用托管全体财富,并本地化。CDN
确定保障财富服务都位居三个区域,而该区域在地理地方上是靠近用户请求能源的地方,从而收缩加载时间。

第②个优势是更适用于您的依赖文件(比如,非面向特定应用的体裁和 JS
代码)。为您所重视的文书使用 CDN
能不小地减少加载时间。比如,很多网站正视 Angular.js,使用 CDN 链接
Angular
代码会触发缓存命中,那么移动装备会从设备缓存里搜索,而不是额外新建1个HTTP 请求。

CSS – 裁减占用空间:大部分开发者在开头时阶段,很恐怕行使一些 UI 框架(如
BootstrapFoundation 等)。这个框架能够一点都不小,其压缩版平时能够常用的
CDN 上赢得,但您不太大概使用它富含的享有样式。由此,类似
uncss 工具(一般配对的有 processhtml)能令你狐疑地移除最终未被选用的体裁。

留意那一点很重点:uncss 解析器不可能领到动态样式(即透过 JavaScript
事件添加的体制),所以您不能够不在浏览器进行严酷的测试,以保证不会删除应用程序实际运用的体制。

CSS –
将根本的文件放在头顶:因为样式须要在应用完成加载前阅览;次要的样式能在加载完后提供。

JS – 收缩占用空间:因为使用一旦上线,程序员就不供给考虑 JavaScript
代码里内部变量的可读性,由此得以将富有如 user.name 变量重命名为
u.e,从而减弱文件大小。由此,有贰个工具为此而生 –
下面提及到的 uglify,固然它会使 JS
代码完全看不懂,但巨大地减小文件大小。

图片 3

做 Web 应用要知道的那些事

2015/07/21 · HTML5 ·
Web应用

本文由 伯乐在线
刘健超-J.c
翻译,黄利民
校稿。未经许可,禁止转发!
英文出处:blog.venanti.us。欢迎出席翻译组

在过去一年里,作者从零起头开发一贯在自家的第⑩个基本点的 Web
应用程序。本次经历教会了自己不少事先不知情的东西,特别在平安定祥和用户体验方面。

本身最后贰回尝试开发充足复杂的运用是在 二〇〇六年,所以就自己的立足点的话,有广大事物供给补充。

而外自己所知所见外,要牢记本文清单里的内容。因为在支付 Web
应用时,尤其是刚起先做的时候,简单忘记一些首要的作业。

其一检查清单并不是八面后珑,借使您是八个经验丰硕的开发者,那里大概没有让您感觉惊喜的东西,但自个儿希望能注明它是促进让你回看起一些错过的东西。

柒 、看一看天气预报:纵然没那么纯粹,不过在天天上午,不用那么恐慌的穿什么样,纠结来纠结去,接着一整天要么认为穿着不妥当不自在。

工程

单页面应用:现今单页面(SPA)是王道。它的重中之重优势是很少加载整个页面 –
只需加载所需能源,并且毫不反复重载相同的能源。假使你才刚刚起先开发3个新的
web 应用,那它不小概是 SPA。

③ 、随手记帐:庸庸碌碌,不知晓如何度过了一每2十三日,不领会手里的money怎么样悄悄的散失,这就记录下来,不是本人苛责,而是一种清晰脉络,是怎么把它们开支在了自家所不可或缺和而热爱的事物上。

安全性

承认邮件:当用户注册时,应向他们发送带有点击确认邮箱的链接的邮件。就算用户更新他们的邮箱地址,则要重新重复那几个工作流程。

身价管理:当存款和储蓄密码时,首先对它们举行加盐和散列操作,然后再用今后大规模接纳的
crypto 库。借使你不那样做的话,把地方管理转由给 照片墙(推特(TWTR.US)) / GitHub /
 Instagram / 等,用 OAuth 就能不负众望。

加密:全体证件难点,还有如何比 SSL
更好。使用它呢。还是能够利用 HSTS

凭据:不要把服务器身份新闻(API
密钥、数据库密码等)放到版本控制里,不然就泄密了。

九 、发呆:没事就发发呆吧,纪念也好,幻想也好,它总是下意识的在向和睦打听真正的所求,安静的和投机相处一会,听一听大家本身。有个别事情是不能够告诉旁人的,有个别工作是无须告诉他人的,有些业务事情是根本不可能告诉外人的,而且有个别事情是,即便告知了外人,

打赏匡助本人翻译更多好文章,感激!

任选一种支付格局

图片 4
图片 5

1 赞 1 收藏
评论

10、过去的心绪收藏好呢,即使那时的山再青、水再绿、这风再温柔,也是早已了,太深的恋恋不舍正是约束,绊住的不光是前天,还有以后。

用户体验(UX)

表单:当提交2个表单后,用户应收取提交后的报告。假诺提交后不向用户发送叁个两样的页面,那么就应当有弹框或
alert 一些音讯,以便让用户知道此次提交是还是不是成功。

签到重定向:假如用户打算在您的网站打开四个页面,但并从未登录,那么他们应该率先接受到3个能登录的页面,并在报到后重定向到三个他们原来想打开的1个页面(当然,前提是已收获授权)。

若是他们尝试登录,但提供了1个破绽百出的密码,这时,用户有可能是忘记了密码,那我们就活该提供一个视觉线索来提示她们,要有多个重置密码的选项。

四 、背单词:总是有想学一门语言的意念,但漫长的进度令人在初叶就慌张,背单词枯燥而无聊,初叶与坚定不移都很难,可是既然闲着也难熬发慌,不及试试吧。

电子邮件

订阅设置:任何发送到用户的 email
,都应当至少含有四个链接,能链接到修改他们的邮箱设置的应用程序页面,并且最好各样邮件都有五个单身的链接,能收回订阅。

千万别让用户为了撤除订阅而向你发送邮件。

贰 、收拾壁柜:衣橱总是最隐衷和芜杂的地点,压在产业的服装,不再喜欢了的送给须求的人,过于陈旧的就剪开擦地板。

移动端

就算你不用支付活动端…但不管您是不是做,你都应当保险那是多少个能动的控制,因为那会对您的应用程序设计和工程有实质性影响。

上边包车型客车注意事项是一旦你已选拔移动端作为你的平台之一。小编正要选拔 Grunt
作为自个儿的创设筑工程具,所以自身得利用一些 Grunt-specific
插件,但您可能应用类似的 JavaScript 创设筑工程具。

六 、记点有意思的事物:刷尽了天涯论坛、空间、朋友圈又光阴虚度的时候,把遇见的在前面发亮的事物用笔记下来吗,想成为一个幽默的人,用笔记录那多少个让祥和激动的欢笑的有感触的,当遇见有趣的人,再说给她们听,终归,贰个会讲轶事的人是何其动人啊。

用户体验:表单

那是三个很好的提出:保持表单和行事流程的简易性,当您针对移动设备作为铺排平台时,那一点更为关键。因为从没人乐于在小叔子大上填满
5 页的表单。


小编愿意那列表对Yu Gang初阶支付第一个款式 Web
应用的你富有帮衬,甚至对那多少个以前不领悟前端的片段优化技术的后端或设计师。借使你有此外提出或记起有个别事物,那么请让本身清楚,我会考虑将它添加到该列表。

感谢 Chris Dean (@ctdean),Danny King
(@dannykingme) 和 Allen Rohner
(@arohner),他们不仅审阅本文的草稿,而且添加了提议。

打赏协助作者翻译越来越多好小说,感谢!


打赏译者

伍 、养植物:植物是平静的陪伴,有细小裂纹渗水而不可能再利用的水杯,用来随手撒一把种子吗,喜欢一种祥和积累的意义感,每日长出的一片新叶,都以中度浅浅呼吸啊。

用户界面(UI)

分辨率:当你付出 MVP (Minimum Viable Product
–最简化可实施产品)时,不用先急着相当种种尺寸的 UI
,那是等你的出品一下子火了随后才必要去做的事情,但要确认保障扶助主流设备(尺寸)。

壹 、整理遗物:把毫不相关首要的总想着之后可能会用到的东西丢掉,缺点和失误了几颗水钻的发卡,不再行路的钟表,假设没有专门珍藏的意义,就丢了吗,尽管再昂贵的价钱,也错过了应用价值。

工程:动画

享有的爱,都是神圣的。但别为使用里的持有因素添加动画。因为超过八分之四 CSS
动画都会接触布局重绘;最棒尽只怕地界定自身行使 transform 和 opacity。

制止进行缓慢的交接运算,要是非要使用,那么有限支撑它是本着某些属性的(如,”transition:
opacity 250ms ease-in” ,而不是 “transition: all 250ms ease-in”)。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图