[HTML5]前端开发攻城师绝对不可忽视的五个HTML5新特性

蓝飞 蓝飞 | 时间:2014-03-25, Tue | 6,529 views
前端开发 

HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标,HTML5绝对不容忽视。

在今天这篇技术分享文章中,我们将介绍几个HTML5的重要特性,能够帮助你提高整个web应用的使用体验和开发效率,相信大家会感兴趣的!

特性一:正则表达式

相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTML5的pattern属性,我们可以很方便的整合这个功能,代码如下:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

特性二:数据列表元素

在没有HTML5的日子里,我们会选择使用一些JS或者知名的jQuery UI来实现自动补齐的功能,而在HTML5中,我们可以直接使用datalist元素,如下:

<form action="/server" method="post">
    <input list="jslib" name="jslib" >
    <datalist id="jslib">
        <option value="jQuery">
        <option value="Dojo">
        <option value="Prototype">
        <option value="Augular">
    </datalist>
    <input type="submit" value="完成" />
</form>

特性三:下载属性

HTML5的下载属性可以允许开发者强制下载一个页面,而非加载那个页面,这样的话,你不需要实现服务器端的一些功能来达到同样的效果,是不是非常贴心?

<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a> 

特性四:DNS的预先加载处理

要知道DNS的的解析成本很高滴,往往导致了网站加载速度慢。现在浏览器针对这个问题开发了更智能的处理方式,它将域名缓存后,当用户点击其它页面地址后自动的获取。

如果你希望预先获取NDS,你可以控制你的浏览器来解析域名,例如:

<link rel="dns-prefetch" href="//www.gbtags.com">
<link rel="dns-prefetch" href="//www.gbin1.com">
<link rel="dns-prefetch" href="//m.gbin1.com">
<link rel="dns-prefetch" href="//s.gbin1.com">

特性五:链接网页的预先加载处理

要知道链接能够在也页面中帮助用户导航,但是页面加载的速度快慢决定了用户体验的好与坏,使用如下HTML5的prefetch属性可以帮助你针对指定的地址预加载页面或者页面中的特定资源,这样用户点击的时候,会发现页面加载速度提高了。

<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />

或者可以使用prerender属性,这个属性能够帮助你提前加载整个页面,如下:

<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />

通过设置这个属性,登录极客社区后,极客搜索页面已经加载了,这样如果你需要搜索,页面会立刻加载,相信你的用户肯定喜欢访问这样的网站!

以上就是我们今天分享的五个实用的HTML5特性,希望大家喜欢。

转自:极客社区

[神器]使用ngrok快速地将本地Web服务映射到外网

蓝飞 蓝飞 | 时间:2014-02-20, Thu | 22,930 views
后台技术 

为什么要使用ngrok?

作为一个Web开发者,我们有时候会需要临时地将一个本地的Web网站部署到外网,以供它人体验评价或协助调试等等,通常我们会这么做:

  1. 找到一台运行于外网的Web服务器
  2. 服务器上有网站所需要的环境,否则自行搭建
  3. 将网站部署到服务器上
  4. 调试结束后,再将网站从服务器上删除

只不过是想向朋友展示一下网站而已,要不要这么麻烦,累感不爱╰(`□′)╯

有了ngrok之后,世界是如此的美好

  1. 首先注册并下载ngrok,得到一串授权码
  2. 运行命令ngrok -authtoken 你的授权码 80,80是你本地Web服务的端口,而之后ngrok会记住你的授权码,直接ngrok 80就OK了
  3. 你会得到一串网址,通过这个网址就可以访问你本地的Web服务了

获取ngrok

ngrok官网

提升代码质量的 6 个重构方法

蓝飞 蓝飞 | 时间:2014-02-04, Tue | 5,827 views
编程算法 

在过去做了不少代码走读,发现了一些代码质量上比较普遍的问题,以下是其中的前五名:

  1. 臃肿的类:类之所以会臃肿,是因为开发者缺乏对最基本的编码原则,即“单一职责原则”(SRP)的理解。这些类往往会变得很臃肿,是由于不同的且在功能上缺少关联的方法都放在了相同的类里面。
  2. 长方法:方法之所以会变得很长主要是有以下几个原因:

    1. 许多没有关联性的、功能复杂的模块的代码都放在相同的方法内。这主要是开发者缺乏SRP的概念。
    2. 多种条件都放在同一个方法内,这在长方法内经常会发生的。这是由于缺乏McCabe代码复杂度和SRP的概念的比较。
  3. 大量的传参:我经常遇到这几种情况,一些方法跟另一些方法进行交互,或者调用另一些方法的时候传入大量的参数。这就会出现如果更改了其中一个参数,就得在多个方法内进行更改。
  4. 常量值无处不在:经常会发现开发者(尤其是新手)会使用一些具有明确含义的常量值(主要是魔鬼数字),但没有给它们赋予合适的常量变量。这会降低代码的可读性和可理解性。
  5. 模糊的方法名:许多时候,以下取的方法名会影响代码的可读性和可理解性:

    1. 模糊的不具有任何意义的方法名
    2. 技术性的,却没有提及相关领域的名称

(阅读全文…)

伪青春必然速朽,真青春无需缅怀

蓝飞 蓝飞 | 时间:2014-02-04, Tue | 4,809 views
心路历程 

大学一毕业即成中年人,中国人的青春很短

赵薇的《致青春》是一部写实的片子。中国大陆的大多数80后90后,说起青春来,也就大学那几年的青春正宗一点。大学之前,十二年教育只为了一个目的:高考。必须心无旁骛,不能谈恋爱,明明看到喜欢的男生女生心里小鹿乱撞,也要硬生生地把情愫压下去,转移到厚厚的高考真题卷子里;老师整齐划一地说“青涩的果子是不能吃的”,多年来连修辞也不改一下。

大学过后,不,准确的说应该是从大四那年开始,残酷的就业压力如山雨欲来风满楼,大家再也无心在宿舍里煮个方便面,谈个无目的的恋爱,在草地上拨拉点吉他,读点柏拉图哲学了。我们的国情是,房子很快就成为后大学时代的主题。微博上流传的一段话并不假:“中国的高房价毁灭了年轻人的爱情,也毁灭了年轻人的想象力。他们本可以吟诵诗歌,结伴旅行,开读书会。现在,年轻人大学一毕业就成为中年人,为了房子精打细算。他们的生活,从一开始就是物质的,世故的,而不能体验一段浪漫的人生,一种面向心灵的生活方式。”<!--more-->

年轻不等于青春,太多人其实从未有过青春期

如果青春指的是一段生理年龄上的时光,那每个人都有。但如果指的是一种朝气蓬勃、勇于尝试、有好奇心和新鲜感、敢于反叛的心态,我想我们很多人未必真的拥有青春。事实上,我们很多人的生活轨迹是“未大先衰”,“未老先衰”。为了高考,我们可以压抑爱好、全盘接受标准答案;为了赚更多钱,我们可以成为自己最痛恨的人——而这些,都很有可能是我们在15岁-25岁时做的事,在我们拥有最年轻的身体的时候。

青年节刚刚过去,我们国家对青年的定义是“14-28岁”,而联合国将“青年”的年龄上限延至了45岁。从世界人均寿命走向80岁的趋势来看,联合国的定义无疑是更为合理的。

我并不赞同《致青春》里的青春观。电影里,郑薇对死去的阮莞说:“阮莞,只有你的青春是不朽的”。如果青春就只是一段非常短的年龄区间,那我们所有人的青春都终将死去。相比之下,几年前的《老男孩》对青春的致敬更有诚意。青春是热情,是好奇,是勇敢,是尝试,是不信邪,是在我们体内跳动的一颗小火苗,随时有窒息死亡的可能,它需要我们的呵护,然后可以一直燃到70岁。没错,滚石乐队的老头子在70岁还在舞台上玩摇滚,还唱着“我无法得到满足,我就是要不停去试、去试、去试……”这应该是对“青春”的更纯正的诠释。

中国人习惯在年龄上互相和自我胁迫,尤其迫害女性

整体观察起来,中国人对年龄,特别是女性年龄的看法,还具有一种动物性的狭隘,仿佛还停留在过了30岁就要挂掉的原始人时代。我们在年龄上的相互胁迫和自我胁迫简直就是一种“集体犯罪”。

最可怕的一种是全社会对女人的胁迫。中国男人择偶,看女人第一就是要年轻。有人发现美国人娶的中国太太多数不漂亮而且年纪偏大——40岁的中国女人在国内根本不受待见,但出了国,境遇就完全不一样。在中国征婚网站上,男人几乎一律要25岁以下的女人,而西方男人对于年纪基本不设限。西方男人并不是不知道二十岁的女孩更能带动荷尔蒙,但他们对女人的欣赏超越了完全动物性的原始冲动。比起纯粹的年龄来,他们更想知道一个女人爱玩什么运动,爱听什么音乐,爱读什么书籍,有过哪些生活经历,是否和自己有共同语言。

在社会观念上,连中国妇联都将28岁定义为“剩女”的门槛,可见女人们生活在多么危险的环境里。“女人30豆腐渣”的恐吓还无处不在,导致女人在年龄上强烈不自信。相比之下,法国女人的青春可以绵延到五六十岁,在我们这儿是老祖母级别的人,仍然可以穿得优雅美丽,谈一场浪漫的恋爱,享受男人的欣赏和赞美。

另一种非常显而易见的是长辈对年轻人的胁迫。中国的长辈也大多是一群未老先衰的人,个人生活严重匮乏,自己一辈子没啥指望,就全指望在子女身上了。对老去的恐慌更加剧了他们对年轻人的控制。典型的中国爹妈就是在孩子20岁前千叮嘱万叮嘱别谈恋爱,一到了大学毕业就开始安排各种相亲,各种唠叨:“年纪不小了啊,要抓紧了啊”,“你再不结婚生孩子,我就要犯病了啊”,“隔壁的小王,都当爸爸啦”。我们这儿有一大群大爷大妈,年纪大了没事做,就等着抱孙子来填充晚年,要是孩子一说“不急,还早着呢”,他们就开始追溯他们的年轻时代,“还早啊!想当初我在你这个年纪,都几个孩子的爹(妈)了呀。”他们火急火燎地提醒着你:你已经老了。哪怕你才刚毕业两年。

还有一些特别喜欢自我摧残的。穿梭在80后90后里,你会听到大量的抱怨:“我老了。”“我已经是个资深剩女了。”“再不嫁人就没人要了。”“00后都要出来了呀,岁月不饶人哪。”——我的感觉是,这群人从来就没有年轻过,接着又迅速地老去了。

伪青春必然速朽,真青春无需缅怀

随着身体的新陈代谢而速朽的,只是伪青春,就和一盆塑料花没两样。真的青春,是不朽的。与其缅怀它,不如保护好它,它可以在你身上存活得更久。

转自:@人民日报

(阅读全文…)

新浪微博表情插件——jQuery Sina Emotion 2.0发布

蓝飞 蓝飞 | 时间:2014-01-09, Thu | 15,602 views
前端开发 

jQuery Sina Emotion

重要说明:已更新,请通过 GitHub 获取最新版本。

这是什么?

一个用来方便快速地创建新浪微博表情选择对话框的jQuery插件。

有何特点

  • 使用简单,一行代码即可创创建出表情选择对话框
  • 自带智能表情解析方法(但还是建议表情解析在服务端进行)
  • 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

(阅读全文…)