阿里巴巴达摩院人机自然交互实验室，成立于2017年 ，隶属于达摩院，致力于通过理解人类行为，应用前沿技术，推动人类与机器自然互动的能力，探索下一代人机交互可能性。团队成员来自全世界不同专业领域以及高校里的设计和技术达人们，共同构建多感官人机交互框架，并在过程中建立情感化的知识图谱，探索多感官，人性化，自然化的交互新方式。感兴趣欢迎来简历: weihua.lwh@alibaba-inc.com

通过上一节的学习，对JavaScript中的DOM有了一定的认识。虽然对DOM中相关的知识点有一定的概念，但还是缺乏对DOM的实际操作。如果你仔细阅读过上一篇文章的话，你应该会发现，当时也提到了一些DOM操作相关的东西，比如，DOM的增、删、改和查等。那么今天我们就来看看这些方面的东西。

JavaScript知识一直都是自己的短板，近一年多来一直在致力于增加这方面的能力，也在W3cplus梳理了一些有关于自己学习JavaScript的笔记。加上最近学习Vue相关的技能，越发自己在JavaScript方面的能力还欠缺很多，所以这段时间一直在补习JavaScript中DOM相关的知识。希望对于初学者有所帮助。

要问2018最让人兴奋的CSS技术是什么，CSS Houdini当之无愧，甚至可以去掉2018这个限定。其实这个技术在2016年就出来了，但是在今年3月发布的Chrome 65才正式支持。CSS Houdini可以做些什么？谷歌开发者文档列了几个Demo，我们先来看一下这几个Demo。

我喜欢使用Vue的原因之一是，Vue中的methods、computed和watchers的使用是多么的有用。如果没有彻底的理解它们之间的区别，就很难充分利用Vue的功能。尽管如此，我看到的大多数人对这个框架感到困惑，他们也会其中的差异感到困惑，所以我们很有必要的去了解一下这方面的知。

假设我告诉你，我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码，也没有使用图像（只是在html元素上使用了background设置了一个背景图片，只是为了表明这个元素有一些透明的部分），同样也没有使用JavaScript代码。你一定会觉得很神奇，对吧！有好奇之心，对于我们做前端的同学而言，应该一直都有，只有这样才能做出很多我们一直以为实现不了的效果，比如接下来要介绍的内容。

前几天想学学Vue中怎么编写可复用的组件，提到要对Vue的render函数有所了解。可仔细一想，对于Vue的render函数自己只是看了官方的一些介绍，并未深入一点去了解这方面的知识。为了更好的学习后续的知识，又折回来了解Vue中的render函数，这一切主要都是为了后续能更好的学习Vue的知识。

前段时间花了不少的时间在学习和了解Vue的组件，虽然中间浅尝了Vue组件的基础，体验了其魅力，但还是有很多深层的东西未掌握，也还不能非常灵活的使用Vue的组件。但这一切并不重要，随着后面的学习，我想会对Vue越来越熟悉。这两天在看Vue中的Vue.extend构造器，今天简单的对这方面的东西做个笔记。

记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力，把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果：CSS如何实现内凹角的效果。

最近我在 Codepen 上看到了一个例子，我的第一个想法是这个案例可以只用三个元素完成：一个容器，一个 range 类型的 input 和一个 output 。在 CSS 方面，涉及到使用一个把 CSS 自定义属性作为范围渲染参数的圆锥渐变函数 conic-gradient() 。