2017-07-24

2017

KFE 第39期

一周推荐

前后端分离后的前端时代

在前后端分离的时代，前端不再仅仅切图和编写静态模板，会有更多的承接页面更多的交互了。

前后端分离

JavaScript核心概念归纳整理

查缺补漏，看看自己还有哪些概念不会

Javascript

VueJS 开发常见问题集锦

遇到Vue的问题尝试来这里找解决方法

Vue

2017 Amsterdam CSS Day

赶快补充每个讲座的知识

CSS

只有20行Javascript代码！手把手教你写一个页面模板引擎

简单易懂，自己也可以写一个简单的模板引擎

模板引擎

一周技能加油站

学习模板引擎的时候，对代码中用的正则有点不是很熟悉了，于是对几个关键的正则稍微复习了一下

/<%([^%>]+)?%>/g
() 与模式 匹配并保存匹配项。
[] 字符集 与任何一个指定字符匹配
^  匹配搜索字符串开始的位置。如果将 ^ 用作括号表达式中的第一个字符，则会对字符集求反。
?  零次或一次匹配前面的字符或子表达式。

https://msdn.microsoft.com/zh-cn/library/ae5bf541(v=vs.100).aspx

一周挑战（每周提供一道面试题）

实现extend函数?
有很多的插件库都有实现类似的方法
var isArray = function(obj) {
  return (/Array/).test(Object.prototype.toString.call(obj));
}
var extend = function(to, from, overwrite){
  var prop, hasProp;
  for (prop in from) {
    hasProp = to[prop] !== undefined;
    if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
      if (isArray(from[prop])) {
        if (overwrite) {
          to[prop] = from[prop].slice(0);
        }
      } else {
        to[prop] = extend({}, from[prop], overwrite);
      }
    } else if (overwrite || !hasProp) {
      to[prop] = from[prop];
    }
  }
  return to;
}

一周段子

哥们我上公交时前面一漂亮妹子发夹掉了，
我捡起上前叫住她：“美女你发夹掉了。”
妹子微微一笑，伸手来接。
从没跟妹子搭讪过的我不知哪来的勇气，
我竟然说：“能认识下吗？交个朋友。”
结果，妹子华丽丽地来了句：“算了，发夹我不要了。”

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-07-17

2017

KFE 第38期

一周推荐

如何高效利用 GitHub 提升自己

把github当成微博来刷
github

2017 年学习 JavaScript 最好的书籍

多读书
Javascript

十大经典排序算法

最近对算法知识十分感兴趣，我也要学
算法

从 JavaScript 到 TypeScript

TypeScript是由微软开发和维护的一种开源编程语言，通过作为 ECMAScript 的超集来提供一些额外的功能，如类型检测和更丰富的语法。

TypeScript

大话WEB前端性能优化基本套路

性能优化一个老生常谈的话题，来看看这里的基本套路是不是和你想的一样
性能优化

2017 年 20 个最佳的极简 CSS 框架

来看看有没有可以用的上的
CSS框架

一周技能加油站

通过上期分享了HTML5上传下载相关之后，你可能对一些关键技术还想做更深入了解，例如FileList和File的关系是什么等等

FileList

即所有type属性(attribute)为file的 input 元素都有一个files属性(property),用来存储用户所选择的文件.

File

而File对象就是FileList对象中的每一个文件对象

一周挑战（每周提供一道面试题）

事件委托?
事件委托主要得益于事件冒泡的机制，当多个子元素需要绑定相同事件处理函数是比较麻烦的，通过事件冒泡机制，我们无需通过每一个子元素添加事件处理函数，只需要在他们所在的父元素添加相同的事件处理函数后，当触发监听的事件操作就能执行相应的事件处理函数。

特别声明：不同的浏览器厂商，对于事件的捕获和处理，有不同机制，目前W3C对DOM2.0定义的标准事件流是：

一、事件捕获阶段；二、事件目标阶段；三、事件气泡阶段；

一周段子

到银行汇款，车临时停路边上，为了怕交警罚就把朋友留下看车，跟他说有查车的过来了告诉我一声。进去几分钟果然有交警来了，那个朋友风风火火地闯进银行大声吼到：大哥，警察来了，快走啊！尼玛，偌大的一个大厅几十号人，顷刻间寂静无声，然后人潮像洪水一样湧出银行，接着我就被五六个保安按在了地上……真冤！不怕神一样的对手，就怕猪一样的队友！

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-07-10

2017

KFE 第37期

一周推荐

Web开发野蛮生长的这17年

作者分享了Web开发发展的17年变化，以及对如何学习编程提供了非常好的建议

Web开发

Node.js原生开发入门完全教程

通过一个实例，一步步带你入门Node.js的原生开发
Node.js

工作中，ES6 可能掌握这些就足够了

快速起飞ES6的新特性

ES6

JavaScript 模块简史

依稀记起当年开始学习seajs的场景

模块化

H5 直播避坑指南

相信做视频开发，在这里可以找到很多解决方案

H5视频

一周技能加油站

这周要分享HTML5上传相关知识，相信阅读完会对整个上传下载的过程有进一步的清晰认识

HTML5 进阶系列：文件上传下载

一周挑战（每周提供一道面试题）

1
2
3

CSS3有哪些新特性？
CSS3选择器、@font-face...等等
https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html

一周段子

在日本福岛有非常强烈的辐射，有一个人的眼球白的被辐射成黑的，黑的被辐射成白的，他就是

.

蜡笔小新

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-07-03

2017

KFE 第36期

一周推荐

腾讯Web前端大会精彩回顾

看到吗？我就是中奖的那个

腾讯Web前端大会

CSS 新的长度单位 fr 你知道么？

fr是 CSS Grid 规范中引入的一个新的长度单位，来看看fr实现了什么效果

fr

Vue vs React: Javascript 框架之战

要我说呀，老夫开发只用jQuery

Vue React

HTML 自定义元素教程

浏览器对待自定义元素，就像对待标准元素一样，只是没有默认的样式和行为。所以即使是写错的标签元素也能正常显示标签内容

自定义元素

Server-Sent Events 教程

SSE是服务器向客户端声明，服务端将向客户端发送流信息，从而实现服务端向浏览器推送消息

Server-Sent Events SSE

一周技能加油站

这周打算回顾一下计算机基础，位运算符，准备好智商，发车

ECMAScript 位运算符

论腾讯 TFC 抽奖程序作弊的可能性，以及代码中存在的 bug

~~null;      // => 0
~~undefined; // => 0
~~0;         // => 0
~~{};        // => 0
~~[];        // => 0
~~(1/0);     // => 0
~~false;     // => 0
~~true;      // => 1
~~1.2543;    // => 1
~~4.9;       // => 4
~~(-2.999);  // => -2

对于非数字，~~的结果为0，布尔的true是1

对于大于0的数，~~相当于是Math.floor

对于小于0的数，~~相当于是Math.ceil

一周挑战（每周提供一道面试题）

用一个div模拟textarea的实现？

HTML5中添加了一个新属性contenteditable，该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能；

/contenteditable="true"　　当属性值为true的时候，可编辑标签内可以写入标签，对于复制的具有样式的内容，其样式会保留；
<div contenteditable="true">我是可编辑的富文本框</div>

//contenteditable="plaintext-only"　　当属性值为plaintext-only时，该可编辑标签内只能写入纯文本的数据，对于复制的具有样式的内容，会转换为纯文本，而将样式标签等内容过滤掉；
<div contenteditable="plaintext-only"></div>

一周段子

“儿子，你要不要叫外卖？”

“好！”
.

.

于是爸爸带儿子去派出所改名了

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-06-29

2017

KFE 第33期

You laugh at me for being different, but I laugh at you for being the same.
你嘲笑我和别人不一样，我嘲笑你和大家都一样。

Javascript基础打卡

前端基础进阶（一）：内存空间详细图解

前端基础进阶（二）：执行上下文详细图解

前端基础进阶（三）：变量对象详解

前端基础进阶（四）：详细图解作用域链与闭包

前端基础进阶（五）：全方位解读this

看完这一系列文章说不定你对JS有一个重新的认识，大家不要忘记给作者点赞

Javascript

其它

动态加载css方法实现和深入解析

思想剥离子seajs,作者还做了优化，兼容各浏览器

css 动态加载

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-06-29

2017

KFE 第35期

一周推荐

如何用Mocha测试JavaScript - 基础知识

如何用Mocha测试JavaScript - 第2部分

轻松入门mocha，看看你写的代码有啥毛病

Mocha

2017 年 6 月：15 个有趣的 JS 和 CSS 库

我就喜欢这些炫“库”

JS CSS

谁说Javascript简单的？ – Hacker Noon

简单？不简单？

JS

十行 HTML 实现增强现实

重拾VR乐趣
增强现实

一周技能加油站

这周要分享的技能是css3 clip-path
相信掌握clip-path后，你可以绘制出各种漂亮的图形

CSS的clip-path

奇妙的 CSS shapes(CSS图形)

一周挑战（每周提供一道面试题）

HTML中<input>和<textarea>的区别?
 在HTML中有两种方式表达文本框，一个是<input>元素的单行文本框，一种是<textarea>的多行文本框。

  <input>元素：

  1.一定要指定type的值为text；

  2.通过size属性指定显示字符的长度，value属性指定初始值，Maxlength属性指定文本框可以输入的

     最长的长度；
     
<textarea>元素

  1.使用<textarea></textarea>标签对

  2.内容放在<textarea></textarea>标签对中

  3.使用row、col指定大小

区别：一个是单行文本框，一个是多行文本框。

一周段子

小明：“爸爸，我到底是哪里来的？”

爸爸：“这个，这个……你是网上下载的。”

小明：“可是，我们家去年才有网络啊，我都6岁了啊？”

妈妈在旁边打圆场：“傻孩子，是蹭了隔壁王叔叔家的WIFI。”

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-06-29

2017

KFE 第34期

一周推荐

写写对于Web开发需要知道的 2017 WWDC

很好的总结，可以重点关注web developers部分的技术

WWDC

Web性能优化：图片优化

你网站一半的流量是不是给图片吃了，那么图片优化必然是你需要优化的一部分了。

图片优化

渐进式动画解决方案

带你如何从专业角度看动画，很有意思

渐进式动画

初探 Headless Chrome

是不是等不及想试一下新功能了

Headless Chrome

比较详细的采访 Vue 作者尤雨溪

来看看尤大大的成长历程

尤雨溪

一周技能加油站

这周加油技能是CSS3 filter属性,以及通过filter可以制作出非常精致的磨砂玻璃效果

filter

CSS3 Filter的十种特效

CSS秘密花园:磨砂玻璃效果

一周挑战（每周提供一道面试题）

● HTML5新增了哪些内容或API，使用过哪些?
答：
语义：<audio>、<video>、<ouput>、 <section>、<article>、<nav>、<header>、<footer>、<aside> 、 <hgroup>、<mark>、 <figure> 和 <figcaption>

通信：Web sockets、Server-sent events、WebRTC

离线 & 存储：离线资源：应用程序缓存、IndexedDB

3D, 图像 & 效果：<canvas>、WebGL、SVG
等等


参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

一周段子

在某一天晚自习的时候，我的同桌问我：「嘿，你知不知道嘴巴可以干什么？」

我愣了一下，这位同学是我们班上的一位学霸。我当初还以为她只是一个清纯的女孩。为了保持我优雅的风度，我摇了摇头。

她笑了笑，继续说道：「可以用来……

.

逗逼。」

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-03-10

2017

KFE 第32期

Do you want to know who you are? Don’t ask. Act ! Action will delineate and define you.—-Thomas Jefferson
你想知道你是什么样的人吗？不要问。行动！行动将会勾画并且定义你。——托马斯·杰斐逊