大前端

华强北在线招聘前端开发工程师(深圳)

浩子 — Wed, 16 May 2012 08:32:32 +0000

公司名称：华强北在线(www.360hqb.com)

工作地点：中国深圳

工作部门：技术部–应用开发团队

联系方式：Peng.Wang@360hqb.com

职位名称：前端开发工程师

工作职责：

负责华强北在线WEB前端JavaScript开发工作
负责华强北在WEB前端性能优化提升
参与WEB前端架构设计工作

任职要求：

2-3 年以上WEB前端开发工作经验；
精通JavaScript、Ajax等Web开发技术；
精通HTML/XHTML、CSS等网页制作技术，熟悉页面架构和布局；
熟悉W3C标准，对表现与数据分离、Web语义化等有较为深刻的理解；
对WEB前端性能提升优化有一定的经验；

满足以下条件者优先考虑：

熟悉Linux平台，熟悉PHP、Java、C/C++中至少一种后端开发语言；
了解HTML5，熟jQuery\Mootools；
对互联网产品和Web技术有浓厚兴趣，有较好的学习能力和强烈的进取心。

简单HTML5打造内涵搜索框

浩子 — Thu, 10 May 2012 10:58:18 +0000

随着HTML5的深入人心，其越来越多的新功能为更多Coder所用，HTML5新增了不少人性化标签和属性，马上介绍的就是新的表单属性。

实例图片：

代码如下：

 type="text" placeholder="输入 回车搜索" autofocus x-webkit-speech>

很赞？Yes！

简短的几个代码就能实现原本多行JS才能实现的完美交互效果，这就是HTML5略窥一点的赞！

placeholder是为了设置初始值，并且这个初始值的颜色为灰色，当input的内容变动时，这个值就消失，它的职责就是给人一种亲和力的指示，十分有爱。

autofocus，顾名思义：自动聚焦，当进入当前页面时，这个input会自动获取焦点，而你可以在打开页面后直接输入东西进行搜索。当autofocus出现两次以上的时候，浏览器会选择最后一个带有autofocus属性的input聚焦。

x-webkit-speech，这个大概不必多解释了，webkit核的浏览器（如Chrome）特有的语音识别工具，给input装上也是再好不过的了，话说Google也给自己的搜索框装上这个工具。

好了，不扯了，简单的一个小框框，其实有更多需要我们研究的东西。比如这个简单CSS3 让搜索更有爱是我之前写的搜索框有爱体验，简单即是美！

HTTP状态码详解

浩子 — Wed, 09 May 2012 10:13:16 +0000

大家都知道404是木有找到东西，301是定义转向，但又有几个人知道206或者307呢？本文就给大家列出了各种HTTP状态码的含义，适合长期收藏。

状态代码	状态信息	含义
100	Continue	初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）
101	Switching Protocols	服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新）
200	OK	一切正常，对GET和POST请求的应答文档跟在后面。
201	Created	服务器已经创建了文档，Location头给出了它的URL。
202	Accepted	已经接受请求，但处理尚未完成。
203	Non-Authoritative Information	文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝（HTTP 1.1新）。
204	No Content	没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205	Reset Content	没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。
206	Partial Content	客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。
300	Multiple Choices	客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
301	Moved Permanently	客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302	Found	类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user（缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。
303	See Other	类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。
304	Not Modified	客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305	Use Proxy	客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。
307	Temporary Redirect	和302 （Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP 1.1新）
400	Bad Request	请求出现语法错误。
401	Unauthorized	客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
403	Forbidden	资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
404	Not Found	无法找到指定位置的资源。这也是一个常用的应答。
405	Method Not Allowed	请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。（HTTP 1.1新）
406	Not Acceptable	指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。
407	Proxy Authentication Required	类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）
408	Request Timeout	在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。（HTTP 1.1新）
409	Conflict	通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新）
410	Gone	所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而 404表示由于未知的原因文档不可用。（HTTP 1.1新）
411	Length Required	服务器不能处理请求，除非客户发送一个Content-Length头。（HTTP 1.1新）
412	Precondition Failed	请求头中指定的一些前提条件失败（HTTP 1.1新）。
413	Request Entity Too Large	目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。
414	Request URI Too Long	URI太长（HTTP 1.1新）。
416	Requested Range Not Satisfiable	服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）
500	Internal Server Error	服务器遇到了意料不到的情况，不能完成客户的请求。
501	Not Implemented	服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。
502	Bad Gateway	服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。
503	Service Unavailable	服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个 Retry-After头。
504	Gateway Timeout	由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新）
505	HTTP Version Not Supported	服务器不支持请求中所指明的HTTP版本。（HTTP 1.1新）

CSS巧妙实现分隔线的几种方法

浩子 — Wed, 02 May 2012 09:00:34 +0000

前几天一@同事看新浪微博里有个类似分隔线的提示，就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法，个人比较喜欢第二种，我也给出了最后第五种比较2的写法，请大家拍砖，或者提供其他好的方法。

单个标签实现分隔线：

小小分隔线单标签实现

.demo_line_01{
    padding: 0 20px 0;
    margin: 20px 0;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
}

优点：代码简洁

巧用背景色实现分隔线：

小小分隔线巧用色实现

.demo_line_02{
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
}

优点：代码简洁，可自适应宽度

inline-block实现分隔线：

小小分隔线 inline-block实现

.demo_line_03{
    width:600px;
}
.demo_line_03 b{
    background: #ddd;
    margin-top: 4px;
    display: inline-block;
    width: 180px;
    height: 1px;
    _overflow: hidden;
    vertical-align: middle;
}
.demo_line_03 span{
    display: inline-block;
    width: 220px;
    vertical-align: middle;
}

优点：文字可多行

浮动实现分隔线：

小小分隔线浮动来实现

.demo_line_04{
    width:600px;
}
.demo_line_04{
    overflow: hidden;
    _zoom: 1;
}
.demo_line_04 b{
    background: #ddd;
    margin-top: 8px;
    float: left;
    width: 26%;
    height: 1px;
    _overflow: hidden;
}

优点：NUN

利用字符实现分隔线：

———————————小小分隔线字符来实现————————————

 class="demo_line_05">———————————>小小分隔线 字符来实现>————————————>

.demo_line_05{
    letter-spacing: -1px;
    color: #ddd;
}
.demo_line_05 span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}

优点：代码简洁

以上简单介绍了分隔线的写法，也许还有其它比较合适的写法，看环境各取所需吧！

主机点评网是时候给你的主机跳槽啦

浩子 — Tue, 01 May 2012 11:48:54 +0000

大家都知道，大前端一直以来使用的都是万网的主机，因为在我看来别的都不靠谱。有这种想法无疑是个错误，前不久听一网友说到主机点评网，忍不住去看了看，发现真一个不错的“大众点评网”，只是点评对象只有主机，显然很专业。

主机点评网介绍

主机点评网 (Hostucan) 来自美国, 通过主机搜索和主机用户提供的点评信息, 帮助更多需要主机服务的站长找到最好最适合的主机空间产品.

中国有中国的特色, 除了直接的主机服务商还是很多 IDC 服务, 所以主机点评网创建了他们在中国的网站, 并且搜录各个主机和空间服务商, 收集用户点评.

主机搜索和点评

主机点评网覆盖了很多主机, 基本上你能想到和不能想到的主机信息都可以找到. 无论你是主机服务商还是主机用户, 也可以提交自己的主机.

对主机用户来说, 最有价值的莫过于主机的点评信息. 而上面的信息都是真实的评论, 有一定参考价值. 对于我这个一直使用万网的主机用户来说，主机点评无疑是个好东西，因为我可以通过它寻找更好更快评价更好的主机，而不是一味的只相信万网，毕竟还给我挂了好几次，早就有主机跳槽的想法了。

点评主机换监控

因为从美国到中国, 服务对象不一样, 用户习惯有异, 点评信息也会主要采用中文站长的点评. 为了刺激用户留下评论, 现在用户点评主机即可换取半年的网站监控.

我也通过点评换取了监控服务, 试用两个星期, 效果还是不错的. Hostucan 会在各个布点收集数据以图形化方式向用户展示网站的访问成功率和打开速度. 而它的特点是在国内外多个地方有布点, 用户可以自主选择某一地区的服务器来监控你的主机. 上图是我的网站在电信和联通中的表现.

当然, 如果你愿意. 点评后不要监控服务, 可以领取 10 元人民币作为报酬.

wordpress 标签添加个性化图标的方法

浩子 — Tue, 24 Apr 2012 11:35:09 +0000

不少同学问到一个同样的问题，如何给标签添加一个图标。

这个展示是大前端D5主题才出现的，也是借鉴国外的一个网站的展示方式，如下图：

是不是很好看呢？方法很简单。

第一步：在wordpress循环中加入以下php代码：

$posttags = get_the_tags();
if ($posttags) {
	foreach($posttags as $tag) {
		echo '$tag->term_id . '" href="'.get_tag_link($tag).'">'. $tag->name .'';
	}
}

第二步：在css文件中设置背景图：

.tag-link{color:#888;border:solid 1px #d6d6d6;border-radius:2px;box-shadow:0 1px 1px #eee;padding:2px 6px;margin-right:4px;display:inline-block;}
.tag-link:hover{background-color: #fbfbfb;border-color:#bbb;color: #444;box-shadow:0 1px 1px #ddd}

.tag-link-101,.tag-link-23{background-image:url(../img/tag.png);background-repeat:no-repeat;padding-left:25px}
.tag-link-101{background-position:4px 3px}
.tag-link-23{background-position:4px -17px}

给少数同学讲解一下吧！

php中设置了tag的链接，并给与每个链接加上一个公共class="tag-link"和一个私有class="tag-link-tag的ID"，css中先给公共class定义tag的公共样式，然后在私有class上写图标（这里一般指的是定位：background-position）,完事儿。

Win8 App使用Listview的简单方法

浩子 — Mon, 23 Apr 2012 00:31:31 +0000

最近在搞公司的win8 app，说白了就是按照微软的一套东西来写出个什么什么来，其中用到最多的就是图文列表的排列，也就是“Listview”这个东西，下面就简单说说这个东西是怎么来的。

这是Win8 App神圣不可侵犯的头文件：

>
     charset="utf-8">
    >ListViewExample>

    
     href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
     src="//Microsoft.WinJS.0.6/js/base.js">>
     src="//Microsoft.WinJS.0.6/js/ui.js">>

    
     href="/css/default.css" rel="stylesheet">
     src="/js/default.js">>

    
     src="/js/dataExample.js">>

>

HTML页面加入以下代码：

 id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
     style="width: 150px; height: 100px;">

        
         src="#" style="width: 60px; height: 60px;"
             data-win-bind="alt: title; src: picture" />
        >

            
             data-win-bind="innerText: title">>

            
             data-win-bind="innerText: text">>
        >
    >
>       

 id="basicListView" data-win-control="WinJS.UI.ListView"
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
>

js文件夹中dataExample.js中的js文件：

(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

ok，余下的就是加入图片，你懂的！

微软对这个方法的详解，E文的，挺啰嗦，看完本文在看它的后半部分还是不错的，http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

写在最后：

话说我本人并不看好Win8 App和它的模式，不过就开发Win8 App来说，各种问题的暴露也给开发带来不少趣味，喜欢的同学可以研究下，写个自己网站的App在现今来看还是不错的，因为Win8 App的商店现今差不多是空的，赶时间吧！

30个超赞纹理设计网站实例

浩子 — Sun, 08 Apr 2012 12:29:07 +0000

如今，你可以看到纹理设计在名片、移动应用和网站设计中的肯定！适当使用纹理有助创造美好的设计感觉。本文为你展现30个质感网站的简约，干净，含蓄和新鲜纹理的例子，希望对你的设计能有所帮助！

wordpress 时间显示格式为“xx前”

浩子 — Sat, 07 Apr 2012 10:25:29 +0000

这个相当有用，希望自己的文章时间显示格式像微博时间格式一样，它就可以；如果你发文频率很高，这个时间格式很是友好！刚刚发布的文章，时间显示为“1分钟前”，还有“1天前”、“1分钟前”、“1秒前”等等！

添加方法很简单，把以下代码贴入主题的functions.php，调用方法是wp默认的“the_time()”，不用修改。

//时间显示xx前
add_filter('the_time', 'past_date');
function past_date(){
	$suffix='前';
	$endtime='2419200';
	$day = '天';
	$hour = '小时';
	$minute = '分钟';
	$second = '秒';
	if ($_SERVER['REQUEST_TIME'])
			$now_time = $_SERVER['REQUEST_TIME'];
	else
			$now_time = time();
	$m = 60;  // 一分钟
	$h = 3600;  //一小时有3600秒
	$d = 86400;  // 一天有86400秒
	$endtime = (int)$endtime;  // 结束时间
	$post_time = get_post_time('U', true);
	$past_time = $now_time - $post_time;  // 文章发表至今经过多少秒
	if($past_time < $m){ //小于1分钟
			$past_date = $past_time . $second;
	}else if ($past_time < $h){ //小于1小时
			$past_date = $past_time / $m;
			$past_date = floor($past_date);
			$past_date .= $minute;
	}else if ($past_time < $d){ //小于1天
			$past_date = $past_time / $h;
			$past_date = floor($past_date);
			$past_date .= $hour;
	}else if ($past_time < $d*10){
			$past_date = $past_time / $d;
			$past_date = floor($past_date);
			$past_date .= $day;
	}else{
			echo get_post_time('m-d');
			return;
	}
	echo $past_date . $suffix;
}

解决Firefox下input button内文字垂直居中

浩子 — Wed, 21 Mar 2012 08:20:28 +0000

很老的问题了，如今再次碰到，记录下来，给后来者方便！

众所周知，在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己比较二，弄了个私有属性，导致以下问题的出现：

按钮左右本身有2px的间距（FF私有属性写了padding:0 2px所致）；
按钮文字居中是不行的（此时设置padding-bottom是没用的）；
等等…

解决办法：

input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{
	border:none;padding:0;
}

因为简单，所以不多写了，研究更是无从说起。

大前端