使用console进行招聘 在上一篇【chrome 的 console 讲解】我们讲解了 console 的详细使用，如果我们在浏览网站的时候，时不时的打开那个网站的 console，或许就能发现一些奇妙的东西。一些比较大型的公司网站都会在 console 里发布招聘信息，这样就能更精确的定位到前端开发人员，通常呢，也就前端程序员有事没事的乱翻别人网站的 console，想看看人家网站的脚本执行情况或者其他比如页面架构、样式等。现在收集了一些网站的 console 招聘信息，有兴趣的可以投下简历：百度搜索：百度知道:百度地图:百度新闻:天猫:知乎:豆瓣最后的最后，你也可以打开本博客的 console 看下！

2015年2月份总结 哇靠靠，2月份在随着春运的到来与退去中结束了，因为公司有一个301周年庆，年前所有的人都是在弄这个周年庆，有一段时间特别的忙，也有好几次都是在晚上10点后才下班回家。不过，在快春节放假时，所有的活儿都弄完了，轻松了很多，在假期里也没有什么负担。2月10日参加了公司的年会，年会还行吧，不能说特别好，但是也没差到哪儿去。白天上来一天的班，下午5点半左右坐着大巴去了年会的地方。年会的视频转播弄得很像专业似的的样式。年会刚开始的CEO讲话是不能少的，“总结过去，展望未来”，反正我是没听出什么有用的信息。年会里最不能少也是最重要的就是抽奖了，不过我毛线都没有得到，部门里的一个同事倒是抽到一个iPhone6。春节放假回家前，从网上给父母买了点零食。其实春节过得也挺没意思的，就那样了，看个春晚，吃吃饺子，然后就过去了。空间里看到有些人抱怨现在的春节没什么年味了，其实“年味一直都在，只是不在我们身上罢了”，看看现在的小孩子，他们不是过得很开心吗？年后，坐着初五晚上的火车回到了北京，羊年的春节就这么结束了。半夜回到住的地方睡了4，5个小时，然后起床把房间收拾一下。收拾着的时候想起了最近上映的几部电影，因为高中时曾经看过《狼图腾》这本书，因此特别期望看到电影会拍成什么样子，狠狠心买了张3D的电影票。说来也特别的尴尬，一个人的票，孤零零的坐在那儿等着电影的开始，其他的都是情侣或者一家子的那种结伴而来，我只能默默低下头玩我的手机！《狼图腾》这部电影，不想过多的评论，只是简单地说下自己的看法：没有原著里的好。不过也是可以理解的，90分钟的电影再怎么拍，也不可能把原著里所有的东西都表现出来。当然，这部电影依然有很多可取可看的地方， 电影从2009年就开始着手准备，2015年的2约19日正式上映 保留了原著中大部分场景，且有超过95%的场面是真实的，而不是用电影特效。比如狼羊大战，狼马大战，入侵羊圈等。 大自然的美景，精致的3D效果。 前几天，自己win8重装win7时，没成功，只能周末去电脑城了！

自制密码管理系统 现在越来越多的网站或者系统需要我们输入密码，通常我们会选择一种密码，这样记起来比较方便，一个密码闯天下。可是这样使用一种密码的也会出现其他的问题，比如： 不安全，若其中一个网站的密码被泄露了，其他网站也就不安全了； 有限制，有时候我们使用的密码在某个网站的限制规则下，并不能使用。比如我们常用的密码里都是小写字母和数字，可是这个网站要求我们的密码必须包含特殊字符。或者我们使用的密码是 20 位的，可是这个网站的密码要求最多只能 15 位。 网站太冷门，我们好长时间也访问不了一回。好不容易访问一回，结果第二次访问时忘记了密码。 考虑到上面的情况，我们需要再想一种密码，当遇到的情况多了，密码也就不好管理了。直接存储吧，怕被别人看到，不直接存储吧，也不知道放到什么地方。而现在网上也有很多的密码管理软件，只是我本人对这些东西不是很放心，因为它是把我们的密码加密后存储到他的服务器上，假如他的服务器被破解了，那我们所有的密码都会被泄露。因此我就想写一个属于自己的密码管理系统！当然，如果这个网站的找回密码更简单一些的话，那就使用这个网站提供的找回密码吧本来是想做出一种列表式的，把所有密码加密后存储到数据库中。可是因为没有现成的空间和数据库，如果使用本地数据库，那么在这个电脑上存储的密码，在另一个电脑上是获取不到的。因此就修改了一下策略，程序放在本地，只提供密码的加密和解密功能，使用邮箱、云盘等工具来存储加密后的字段。如果其他电脑要使用，那么就把该程序 clone 到本地，解密那个字段就能得到密码。讲解一下我存储密码的思路。需要的字段有： url : 要存储密码的网站，也可以是个单词或者字符，只要自己认识就行 password : 加密该密码的密钥； content : 存储的密码； 加密的方法采用的是公认的 AES。这种加密方式的复杂程度是全世界公认的，解密起来非常的复杂。AES 加密过程是在一个 4×4 的字节矩阵上运作，这个矩阵又称为“状态（state）”，其初值就是一个明文区块（矩阵中一个元素大小就是明文区块中的一个 Byte）。（Rijndael 加密法因支持更大的区块，其矩阵行数可视情况增加）加密时，各轮 AES 加密循环（除最后一轮外）均包含 4 个步骤： AddRoundKey — 矩阵中的每一个字节都与该次轮秘钥（round key）做 XOR 运算；每个子密钥由密钥生成方案产生。 SubBytes — 通过个非线性的替换函数，用查找表的方式把每个字节替换成对应的字节。 ShiftRows — 将矩阵中的每个横列进行循环式移位。 MixColumns — 为了充分混合矩阵中各个直行的操作。这个步骤使用线性转换来混合每列的四个字节。 最后一个加密循环中省略 MixColumns 步骤，而以另一个 AddRoundKey 取代。当然，里面的很多原理其实我们不用了解的很深，但是我么应该学会怎么使用，AES 的加密和解密都需要两个参数：encrypt($input, $key), decrypt($sStr, $sKey)。第一个参数是我们要操作的字符串，第二个参数是加密和解密的 key 值，通常加密和解密需要的是同一个 key 值。关于 AES 的更多信息，可以点击这里【AES-百度百科】【AES-维基百科】从上面的内容我们可以看到，如果要加密的话则要两个字段：需要加密的字符串和 key 值；解密时需要的两个字段：需要解密的字符串和 key 值。因此，我的加密过程是这样的：1. 确定 key 值：$code = substr(md5(time()."wenzi".rand(1000, 9999)), 4, 10);// 需要记住 $key = md5($password.'wenzi'.$code); 从上面的代码可以看出，$key 值取决于我们输入的password值和由系统生成的code值。**2. 需要加密的字符串：**不是把密码直接进行加密，而是$url和$content 拼接起来进行加密，等解密时需要验证输入的 url 是不是当时加密时的 url，如果不是则获取不到密码。3. 加密：$content = encrypt($url.$content, $key);4. 确认解密时需要的字段：$url(当时加密时的网址), $code(第一步中随机生成的字符串), $password(密钥), $content(需要解密的内容)为了防止别人看到直接存储的 code 值，我们可以让程序按照我们的需要进行返回，我的程序里，code 值是长度为 10 的字符串， 返回时我们看到的 code 是：前 5 位是单数位，后 5 位是双数位，解密时需要交替输入。$e1=""; $e2=""; for($i=0; $idecrypt($content, $key); if(strpos($result, $url)>-1){ $msg = substr($result, strlen($url)); $s = array('status'=>0, 'msg'=>$msg); }else{ $s = array('status'=>2, 'msg'=>"验证错误"); } 首先通过$key和需要解密的字段$content 来把$content解密出来$result，解密出来后再判断$result里是否包含$url 字段，如果没有包含$url 则解密失败，否则就把密码返回给用户。假如有人获取到你了保存的加密串，如果他没有你的程序也是解不开的；即使加密串和程序都获取到了，他也没有你的密钥，因为密钥是存在你心里的，没有存放在其他任何的文件上。好了，或许有些人觉得这样保存密码很麻烦。我呢，就把它当做一次练手的项目了，顺便存储些比较偏僻网站的密码。在写这个系统时，主要学习了 AES 算法和 bootsrap 的使用。我的程序地址：github-password

placehold.it-在线图片生成器 placehold 的介绍 # 当我们进行网页设计时，经常会使用各种尺寸的图片。有时候我们用一个固定宽和高的 div 来进行代替，可是这样的效果不是很明显，而且还要进行各种各样的文字说明；或者我们得从网上寻找各种尺寸的图片然后上传上去，比较麻烦。此时如果有了 placehold，就不用那么的麻烦了。placehold 能够根据用户的需要生成各种尺寸的图片，同时配上自己的文字，而且还能根据自己的需要修改图片的背景颜色和文字颜色。当然，此时肯定会有很多人说，dummyimage也是提供一模一样的功能的，可是很可惜，我们的梯子不够高。在我寻找 dummyimage 的替代工具时，无意间看到了 placehold.it 这个网站，虽然使用起来没 dummyimage 那么顺手，但是了解之后其实也蛮不错的。 placehold 的使用 # 上面简单的介绍了下 placehold，现在来说下这个是如何使用的。 格式说明 # 首先来简单的说下这个网站中图片的地址格式：http://www.placehold.it/widthxheight/bgcolor/textcolor[&text=hello+world] 组成说明： http://www.placehold.it: 网站地址。 widthxheight: 图片的宽(width)和高(height)，注意 width 和 height 的中间是x，而不是*,如 350x200；同时，height 可以缺省，那么就默认 height=width，此时生成的是边长为 width 的正方形图片。 bgcolor: 图片的背景颜色，值为 6 位的 16 进制数字，如 ffffff, 7d7d7d 等。 textcolor: 文字的颜色，可以单独缺省，也可以与 bgcolor 同时缺省，值与 bgcolor 相同。 &text=hello+world: 如果想要在图片上添加文字的话，那么就在整个 url 的最后追加上&text=文字，如果文字中间有空格的话，用+代替；该字段可以缺省，默认显示的是图片的宽和高。 需要特别注意的是： widthxheight 必须是第一个参数； bgcolor/textcolor 中，两个参数必须连着，中间不能不能插入其他的参数； &text= 如果有的话，必须是最后一个参数。 例如：http://www.placehold.it/350x150/http://www.placehold.it/350x150/8B7355/B23AEE/http://www.placehold.it/350x150/8B7355/B23AEE/&text=love+wenzi 图片的格式后缀 # 图片有着各种各样的格式后缀：.gif, .jpeg, .jpg, png 等。placehold 也能添加图片的格式后缀，这些可以后缀可以添加到 widthxheight, bgcolor 或 textcolor 的任意一个参数后面，如：http://www.placehold.it/350x150.png/8B7355/B23AEE/ http://www.placehold.it/350x150/8B7355.gif/B23AEE/ http://www.placehold.it/350x150/8B7355/B23AEE.jpg/ 最后提供一个颜色表，搭配自己喜欢的颜色：http://www.114la.com/other/rgb.htm

再说仿微博的发布与删除 很久之前闲着没事仿照新浪微博的发布与删除，写过一次代码！那时主要是实现滑动的效果，不过代码却是非常的乱，html 与 css 样式混用等。可是这段代码也没怎么用过，就一直在那扔着。点击查看效果直到昨天下午，有一妹子说她想实现那种跟新浪微博似的那种效果，我才想起我原先也写过这个东西，不过因为那时的代码啊有段乱，也就没给妹子推荐。然后晚上回到家后，就把我一年前写的代码重新设计了一下，相对来说结构更加清晰了一些！新代码和旧代码都放在一个仓库里，不过这两个没有纠缠。旧代码就一个文件：microblog.html，剩下的全部都是新代码，若不想要旧的代码，删了这个文件就是。放上代码地址：github-microblog说下这次的重构主要都进行了哪些工作： 更新了 jQuery 的版本：由 1.7.1 升级到了 1.11.1，同时也废除了 live 方法，改用 on; 把 html, css 与 js 进行相互的分离，不再集合到一个文件里； 添加了字数的统计和限制，最多只能输入 140 个字； 添加了输入框为空或字符超过限制时的提示； 添加了表情的插入 这次重写也学到了很多的东西，比如 CSS3 中的 animation，字数的限制，表情的添加等。点击链接【新的效果页面】，看看重构后的效果。 1. CSS3 中的 animation # 在输入框为空时或者字数超过了限制，输入框就是闪两下进行提示，这是通过 CSS3 中的 animation 属性实现的。关于 animation 更多的介绍，可以参考这个链接，本文就不展开说明了，你可以通过此链接【CSS3 的 animation】查看 animation 更多详细的信息与使用，这里简单的介绍下 animation 的使用：.send .warning { background: #fff; animation: "wobble" 0.8s ease-in-out; } @keyframes wobble { 0% { background: #fff; } 25% { background: #ffc0cb; } 50% { background: #fff; } 75% { background: #ffc0cb; } 100% { background: #fff; } } animation 中的参数分别表示： 'wobble' : 动画的名称，随便定义 0.8s : 动画执行的总时间 ease-in-out : 动画执行的方式 在 wobble 的结构体里，有很多的百分比数字，这些就是在 0.8s 里的执行时间里的各个进度，我们可以定义每个当前进度展示怎样的属性。定义了样式，还要确定触发点是什么？当用户点击确定“发布”按钮或者使用 ctrl+enter 组合键时进行信息的校验，如果输入框为空或者字数超过了限制，那么 textarea 标签就添加 warning 类，执行完成后再去掉该类名。const obj = { timer: null, warning: function () { $("#say").addClass("warning"); this.timer && clearTimeout(this.timer); this.timer = setTimeout(function () { $("#say").removeClass("warning"); }, 800); }, }; 2. 字数的限制 # 字数的限制，叫实时显示剩余字数更加确切一些。在这里我是让 textarea 标签监听 keydown 事件实现的，这里为什么不选择监听 keypress 或 keyup 事件呢？因为： keypress 与 keydown 事件差不多，keydown 是监听按键按下事件，keypress 是监听按下与松开事件；但是 keypress 只能监听单个按键事件，不能监听组合按键。这里使用到了 ctrl+enter 组合按键提交，因此就不能使用 keypress 了；关于 keydown 和 keyup，假如在输入英文字符或者数字时，虽然按键一直没有松开，但是一直在进行输入（没有松开按键则表示 keydown 事件无限执行），那么如果使用 keyup 事件来计算剩余字数就不准确了。因此最终选择了keydown事件 每次执行 keydown 事件时，均获取 textarea 的值的长度，然后计算出剩余的字数，如果剩余字数为 0，则不再让用户进行输入。 3. 将内容添加到列表中 # 参考现在的 html 结构，每条留言都是一个 li 标签，因此插入新留言时，也是要插入一个 li 标签。正常情况下，应该是： 添加成为 ul 标签的第一个 li 标签 默认隐藏这个刚添加的 li 标签 使用 slideDown()、fadeIn()等函数显示出来 可是这里，在我的代码里，有一个很难理解的问题：需要添加的 li 标签必须添加成为第二个 li 标签，如果是添加成为第一个 li 标签，执行显示动画或者删除该留言时，会闪动一下，也不知道为什么？ 不知有谁能解决下不？var $ul = $("#talklist"), $one = $( '' + word + '' + datetime + '