刘哇勇
刘哇勇_个人页
刘哇勇
文章
74
问答
0
视频
0
个人介绍
前端，编程语言相关技术专家
擅长的技术
-
发表了文章 2017-06-18
正确地缩写 document.querySelector
北京的夕阳，伴随淡淡的霾殇。从写字楼望去，光线是那么昏黄。没有孤雁，也没有霞光，遥想当年，还是 jQuery 独霸一方。那时的我们，写程序都习惯了使用 $，至少在对美元符号的喜爱上，与 PHP 达成了一致。
-
发表了文章 2017-06-17
Safari Private 模式下 localStorage 的问题
现如今好多浏览器都有「隐身模式」，Safari 管这叫「Private Browing」，国内各种牌子的套壳浏览器叫「无痕浏览」。私以为从命名上来说，倒是国内更中文一些。 这种模式下浏览网页踏雪无痕，雁过不留声。
-
发表了文章 2017-06-17
导入网页数据到 Google Sheet
数据没有用，我们需要的是数据所反映出来的东西。增长率，排名，占比等。而这些结果是通过分析数据得到的。 从网上搜集到数据后，导入到表格程序中便可以进行方便地分析处理了。下面介绍将网页中的表格数据导入到 Google Sheet 中的操作。
-
发表了文章 2016-07-19
Flux 普及读本
话说当时做 APP 时，三月不知肉味，再次将眼光投放前端，有种天上一天，地下一年的感觉。 Flux 是一种思想 了解的最好方式当然是看Flux官方文档了。React 中文站点也能找到对应的翻译版本，但及时性可能无法保证。
-
发表了文章 2016-07-17
CSS3 nth 伪类选择器
考察下面的 HTML 代码片段： section 1 section 2 item 1 sub item 1 sub item 2 ...
-
发表了文章 2015-01-18
详解this
this 虐我千百遍，看完此文效立见！不得不说，这篇文章的总结很地道很全面，适合收藏之用。 原文：all this 习惯了高级语言的你或许觉得JavaScript中的this跟Java这些面向对象语言相似，保存了实体属性的一些值。
-
发表了文章 2015-01-04
关于请求被挂起页面加载缓慢问题的追查
本文前戏较多，务实的同学可以直接跳到结论。 由「钢的琴」网友脑洞大开延伸出了吉的他二的胡琵的琶，以及后来许嵩的「苏格拉没有底」，是否可以再拓展一下，得到哥本不爱吃哈根，哈根爱达斯等剧情乱入的关系。 上面跟本文要讨论的主题有什么关系？ 没关系。
-
发表了文章 2014-12-07
CSS currentColor 变量的使用
CSS中存在一个神秘的变量，少有人知自然也不怎么为人所用。它就是crrentColor变量（或者说是CSS关键字，但我觉得称为变量好理解些）。 初识 它是何物？具有怎样的功效？它从哪里来？带着这些疑问我们继续。
-
发表了文章 2014-11-30
HTML5 <details> 标签
HTML5 中新增的标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。 用法 一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。
-
发表了文章 2014-11-08
延迟求值-如何让Lo-Dash再提速x100?
「注释」作者在本文里没有说明这么一个事实： 目前的版本Lo-Dash v2.4.1并没有引入延迟求值的特性，Lo-Dash 3.0.0-pre中部分方法进行了引入，比如filter(),map(),reverse()。
-
发表了文章 2014-11-02
如何开发一个简单的HTML5 Canvas 小游戏
原文：How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发？下面通过一个例子来进行手把手教学。（如果你怀疑我的资历， A Wizard's Lizard这个游戏的半数以上开发是由我完成的） 我们直接来看源码里的game.js,当然你也可以在线体验一下游戏先。
-
发表了文章 2014-09-14
利用HTML5 的Datalist 元素实现输入提示
HTML5有无限可能，总是在释出一些新鲜实用的功能，让原生的web环境更加炫酷。 今天看到datalist 这个元素，可以用来预先定义一个输入框的潜在选项，也就是我们在平时项目中经常用jQuery插件或者自己写JS来实现的autocomplete「自动补全，但似乎自动提示更贴切一些」功能。
-
发表了文章 2014-09-13
Chrome 控制台不完全指南
Chrome的开发者工具已经强大到没朋友的地步了，特别是其功能丰富界面友好的console，使用得当可以有如下功效： 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「Console大法好」 console.log 大家都会用log，但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理。
-
发表了文章 2014-08-31
自定义Sublime Text的图标
sublime text很赞，windows上最接近mac逼格的轻量编辑器，对于我这样比较喜欢格调的人来说，简直不二之选啊。 美中不足的是，看久了觉得它的图标似乎不是很上心。现在都流行扁平化了而它还停留在拟物的阶段，拟物也就算了还带一点立体感把整个平面内顷，于是乎想自己换个图标，换个好心情。
-
发表了文章 2014-08-31
如果把编程语言比作武器
来自bjorn的一篇吐槽文. C 是经久不衰的M1半自动来复，虽然有些时日了但稳定压倒一切。 c++ 是威力强大的双截棍，看看李小龙使它的时候那鼓威风劲你就领悟了。但问题是掌握它需要很长段时间，而在这段时间内经常是把自己打得鼻青脸肿而不是敌人。
-
发表了文章 2014-05-03
前端面试题：高效地随机选取数组中的元素
有前端题目大概是这样的：考虑到性能问题，如何快速从一个巨大的数组中随机获取部分元素。 比如有个数组有100K个元素，从中不重复随机选取10K个元素。 为了演示方便我们将数据简化，先给出方案最后再用大点的数据来测试性能的对比。
-
发表了文章 2014-04-20
为你的Web程序加个启动画面
.Net开发者一定熟悉下面这个画面： 这就是宇宙第一IDE Visual Studio的启动画面，学名叫Splash Screen（或者Splash Window）。同样，Javar们一定对Eclipse的启动画面不会陌生。
-
发表了文章 2014-04-14
如何在博客中使用SublimeText风格的代码高亮样式
因为觉得博客园自带的代码高亮样式很单一，不符合作为前端的我的审美习惯，于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式。 虽然探索的过程是很痛苦的，但最后还是成功了，但也不枉付出的那些努力。
-
发表了文章 2014-04-14
ES6新特性概览
本文基于lukehoban/es6features ，同时参考了大量博客资料，具体见文末引用。 ES6（ECMAScript 6）是即将到来的新版本JavaScript语言的标准，代号harmony(和谐之意，显然没有跟上我国的步伐，我们已经进入中国梦版本了)。
-
发表了文章 2014-04-10
前端不为人知的一面--前端冷知识集锦
前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。
-
发表了文章 2014-04-06
代码提交的时候可以插入表情了-GitHub表情的使用
GitHub官方有个表情项目，旨在丰富文字信息。意味着你可以在提交代码的时候，在提交信息里面添加表情，同时也可以在项目的ReadMe.md文件里面使用表情。除此之外，当然还有项目在GitHub上的wiki页面，总之在GitHub的页面上，都可以使用。
-
发表了文章 2014-04-05
论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签( Tag)的，但使用的是vtt格式的文件，非常规的字幕（.sub, .srt）或歌词文件（.lrc）。 用法如下（代码来自W3School）： 但遗憾的是，使用起来还有不便之处。
-
发表了文章 2014-03-31
Node.js + Web Socket 打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地，不仅是那些富有创造性的页面，还有那些惊赞的效果及不断推出的新技术。像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端。瞬间就有了一统天下的感觉，来往穿梭于前后端之间代码敲得飞起，从此由前端晋升为'前后端'。
-
发表了文章 2014-03-23
HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。
-
发表了文章 2014-03-23
jQuery编程的最佳实践
好像是feedly订阅里看到的文章，读完后觉得非常不错，译之备用，多看受益。 加载jQuery 1.坚持使用CDN来加载jQuery，这种别人服务器免费帮你托管文件的便宜干嘛不占呢。点击查看使用CDN的好处，点此查看一些主流的jQuery CDN地址。
-
发表了文章 2014-03-20
Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!
继续玩味之前写的音乐频谱作品，将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现，这样就打造出了一个全立体感的频谱效果了。 项目详情及源码 项目GitHub地址：https://github.
-
发表了文章 2014-03-18
由乱序播放说开了去-数组的打乱算法Fisher–Yates Shuffle
之前用HTML5的Audio API写了个音乐频谱效果，再之后又加了个播放列表就成了个简单的播放器，其中弄了个功能是'Shuffle'也就是一般播放器都有的列表打乱功能，或者理解为随机播放。 但我觉得随机播放绝对要好实现些，用Math.random()产生一个介于1到歌曲数目之间的随机数便可，然后player.play(随机数)。
-
发表了文章 2014-03-16
CSS3 制作一个边框向周围散开的按钮效果
我们将要达到的是如下的效果(若效果未出现请刷新)： 分析 主要还是运用CSS3的transition, animation, transform还有渐变背景等特性。 由于按钮在鼠标进入时有不同的样式，所以要对其:hover状态运用另外的背景样式 通过对按钮的:after状态添加一个内容为空的元素，并给其一个边框，这样在鼠标进入后我们让这个隐藏的空元素变大直到淡出，就得到我们看到的效果了 构建基本按钮样式 做为例子，我们的页面会很简单，就放一个a标签作为按钮，然后对其写样式让它看起来更像一个按钮。
-
发表了文章 2014-03-15
CSS3 Animation制作飘动的浮云和星星效果
带平行视差效果的星星 先看效果： 如果下方未出现效果也可前往这里查看 http://sandbox.runjs.cn/show/0lz3sl9y 下面我们利用CSS3的animation写出这样的动画来，要点就是： 用动画不停改变背景图片位置; 动画高为无限循环; 在页面放三个DIV，首先将他们大小铺满整个窗口，这点是通过将其position设为absolute然后分别设置上左下右四个方面距离为0px达到的。
-
发表了文章 2014-03-15
几个毫无节操纯属恶搞的JavaScript插件
fartscroll.js，为放屁而生 你知道么，有了这个js库，你的页面就可以——————————放屁勒！ 打开下面的演示地址，然后滚动页面。 在线演示：http://theonion.github.
-
发表了文章 2014-03-14
没有鼠标的日子多亏了我精湛的手操，各种快捷键分享
《如何优雅地》系列在知乎火得不行了，以至于有机智网友在微博吐槽道：'知乎如何优雅地系列应该单独开一个站叫逼乎'。 早在这个噱头之前，看过一篇如何优雅地使用Windows的文章，无非就是介绍些快捷键，用快捷键就显得高端大气上档次。
-
发表了文章 2014-03-14
如何为你的代码选择一个开源协议
相信很多刚踏入软件这个行业的小伙伴一如当初的我，对开源软件的各种协议不甚了解被搞昏了头脑。毕竟对于一个新生程序员来说，如何写好代码才是亟待解决的问题，无暇了解这些。随着你项目做得多了代码写得多了，你会发现编码过程中会不时用到其他人的成果，一个项目下来多少会引入一些优秀的库，别人放在公网上开源的DLL，以及一些算法等等。
-
发表了文章 2014-03-05
语义化的软件版本号规则,你是否真的了解软件的版本号
每次打开谷歌浏览器的About页面更新的时候，总是期待着一个新版本的到来，新的东西总是让人感到Amazing。这样久了之后心中不免产生一个疑问，什么时候该发布一个新版本了，有什么规律么？平时的小更新总是版本号后面无关仅要的数字的增长，当这个数字增长到何时可以让主版本号加1？ 带着这个疑惑到StackOverflow造访了一下，良久无回音。
-
发表了文章 2014-02-26
HTML5打造的炫酷本地音乐播放器-喵喵Player
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器（Meow meow Player,额知道这名字很二很装萌~），全HTML5打造的网页程序，可本地运行也可以挂服务器上用。 在线Demo及源码 你可以访问下面的地址打开在线demo： http://wayou.
-
发表了文章 2014-02-17
无论何时，记得做好代码的清理工作
在看了一些关于HTML5 Audio API的资源后，一下子热情高涨顺势写了个音乐频谱效果的作品来玩味，也就是上上篇博文里介绍的。今天在测试的时候发现三个问题处理得不是很好： 当歌曲正在播放的时候再选择另一首，页面顶部的标题没有很好地更新 对于有些音频文件，比如在上篇博文中提供的示例音乐里面，bbc_sherlock_openning.mp3这个文件在播放完毕后频谱居然不会归零！ 另一个问题就是重点了，歌曲播放完了后后台代码仍在不停地跑 结论 鉴于后面的内容是跟具体程序有关的（上上篇博文中介绍的Audio Visualizer），所以不知道源码的你或许不太感兴趣，于是把结论提前。
-
发表了文章 2014-02-17
statcounter统计的浏览器市场占有率
Source: StatCounter Global Stats - Browser Market Share
-
发表了文章 2014-02-16
开大你的音响，感受HTML5 Audio API带来的视听盛宴
话说HTML5的炫酷真的是让我爱不释手，即使在这个提到IE就伤心不完的年代。但话又说回来，追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢？所以当你在看本文并且我们开始讨论HTML5等前沿东西的时候，我们默认是把IE排除在外的。
-
发表了文章 2014-02-13
requestAnimationFrame，Web中写动画的另一种选择
HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现; 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。
-
发表了文章 2014-01-22
Windows上帝模式，上帝应该就是这样使用Windows的
Windows上帝模式（Windows Master Control Panel）由来已久，最早是从Win7优化大湿里看到的一个选项，开启后在桌面生成一个图标，点进去后里面包含了几乎全部Windows设置选项。
-
发表了文章 2013-12-11
响应式网页设计简单入门
Overview: 构造基本的HTML页面 动态加载样式表 Viewport 字体缩放 侧边栏 导航菜单 图片自适应 其他 总结 说到响应式网页设计(Responsive web design)，最近在谷歌加上碰到个奇葩贴子，通过一个原始到无法再简单的网页Motherfucking Website及满屏幕的fuck道出了网页设计的真谛，这孩子不是个激进分子就是个报复社会型的货没错，虽然整篇文章就像是泼妇骂街，但我特么是笑着读完的。
-
发表了文章 2013-11-13
CSS3动画：YouTube的红色激光进度条
本文只是讨论和实现了动画效果，并未将动画与页面实际下载关联，有朋友们问如何应用，可以使用现成的一些插件比如这个，这个，还有这个。 之前一篇文章《CSS3 动画一瞥》简单介绍了CSS3动画相关的内容，这里继续讲一个例子。
-
发表了文章 2013-11-10
CSS3 动画一瞥
伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来，而在这之前，一提到动画我们可能会想到JavaScript，Flash，Java插件等。如果是用JavaScript那倒也不是很糟糕的事啦，但如果写出来的效果非要强迫客户端安装第三方插件才能显示，毕竟不是很理想。
-
发表了文章 2013-10-13
自动更新Chromium
Chromium 其实就是开发版本的Chrome, 即Chrome dev 版本。一般他的版本要比正式版的Chrome高两个及以上。比如正式版本现在是29，开发者版本已经是32了。 这表示很多新功能你可以在Chromium中提前体验，这使得像我这种假装极客的程序员爱不释手。
-
发表了文章 2013-10-09
如何方便快速在指定文件夹打开命令行
很多时候我们需要打开命令行然后进入到相应目录进行一些操作。 常规的做法是: Win+R打开运行窗口 输入"cmd"回车打开命令行窗口 假如我们要进入的是D盘foo文件夹下的一个bar子文件夹，路径是这样的D:\foo\bar，首先输入" D："回车进入D盘 再依次输入"cd foo"," cd bar"; 或者在资源管理器的地址栏里复制文件夹地址"D:\foo\bar", 然后输入cd 再把复制的地址一次性粘贴到cd 后面（适用于文件夹路径较长时，避免一个一个地输入） 如果需要进行频繁命令行操作，每次都要通过这样的方式来进行，势必很麻烦。
-
发表了文章 2013-09-23
让Chrome 接管邮件连接，收发邮件更方便了
页面中除了传统的超链接外，还可以将邮箱地址写入标签，意思不表自明，当然是用户点击后就会打开相应的邮件客户端向这个连接指向的邮件地址发邮件。 liuwayong@gmail.com 效果： sample@test.com 了解邮件连接 一般情况下，如果你的浏览器之前有设置过 mailto: 协议的话，它会启动mailto协议里指定的程序来打开这个邮件链接。
-
发表了文章 2013-09-17
Chrome扩展程序的二次开发：把它改得更适合自己使用
我当然知道未经作者允许修改别人程序是不道德的了，但作为学习研究之用还是无可厚非，这里仅供交流。 一切都是需求驱动的 话说某天我在网上猎奇的时候无意间发现这么一款神奇的谷歌浏览器插件：Extension Source Locator。
-
发表了文章 2013-09-14
更改Photoshop 语言为英语（无需语言包）
因为有时看国外教程时，手头上的PS是中文的而教程里的界面是英文的，而且中英菜单顺序在某些地方是不一样的，所以很不方便。 终于找到一个非常完美的方法可以把界面换成英文，而且不需任何语言包。 并且试了在最新的Photoshop CC版本中可用。
-
发表了文章 2013-09-02
Chrome 控制台新玩法-console显示图片以及为文字加样式
有兴趣的同学可以文章最后的代码复制贴到控制台玩玩。 Go for Code 在正常模式下，一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读，除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息，在控制台中出来的效果如下： 在输出信息前面会有一个带感叹号的黄色三角警告符号。
-
发表了文章 2013-09-01
JavaScript—之对象参数的引用传递
变量 1.JavaScript hoisting >>请看例子，我们拿Chrome的console作为JS的运行环境。 上面直接执行console.log(a), 不带一点悬念地抛出了not defined 错误。
-
发表了文章 2013-08-12
jQuery 绑定事件到动态创建的元素上
在进入主题之前，我们先来看一个前台页面经常用到的功能：点击页面输入框时自动选择其中文本。 很容易想到利用输入框的focus事件，当输入框获得焦点时，再调用jQuery的select()方法。 Okay，想法很简单，逻辑似乎也无错。
暂无更多信息
-
发表了文章
2017-06-18
正确地缩写 document.querySelector
-
发表了文章
2017-06-17
Safari Private 模式下 localStorage 的问题
-
发表了文章
2017-06-17
导入网页数据到 Google Sheet
-
发表了文章
2016-07-19
Flux 普及读本
-
发表了文章
2016-07-17
CSS3 nth 伪类选择器
-
发表了文章
2015-01-18
详解this
-
发表了文章
2015-01-04
关于请求被挂起页面加载缓慢问题的追查
-
发表了文章
2014-12-07
CSS currentColor 变量的使用
-
发表了文章
2014-11-30
HTML5 <details> 标签
-
发表了文章
2014-11-08
延迟求值-如何让Lo-Dash再提速x100?
-
发表了文章
2014-11-02
如何开发一个简单的HTML5 Canvas 小游戏
-
发表了文章
2014-09-14
利用HTML5 的Datalist 元素实现输入提示
-
发表了文章
2014-09-13
Chrome 控制台不完全指南
-
发表了文章
2014-08-31
自定义Sublime Text的图标
-
发表了文章
2014-08-31
如果把编程语言比作武器
-
发表了文章
2014-05-03
前端面试题：高效地随机选取数组中的元素
-
发表了文章
2014-04-20
为你的Web程序加个启动画面
-
发表了文章
2014-04-14
如何在博客中使用SublimeText风格的代码高亮样式
-
发表了文章
2014-04-14
ES6新特性概览
-
发表了文章
2014-04-10
前端不为人知的一面--前端冷知识集锦
滑动查看更多
暂无更多信息
暂无更多信息