1 “TinyShare”酷炫的border-radius；JS和WebAssembly的互相调用终于变快了；自定义HTML

TinyShare是一个英文前端技术文章分享博客网站，它有以下特点：

1.推荐的文章，都是我（目前是我一个人）自己仔细阅读过，从中挑选出的优秀的前端相关的文章，绝不为了应付而胡乱推荐；2.网站会尽量简洁，更多地专注于内容。推荐的文章中，很多都是英文文章，我没有精力每天都去翻译这些文章（我每天也有很多工作要做），所以建议大家直接阅读英文文章，也是一种锻炼。3.每次推送五篇文章，不多也不少，坚持每天推送。4.点击文末左下角“查看原文”，查看分享的文章原文。

· · ·

酷炫的border-radius，可以做更多的事

border-radius这个css属性，相信都不陌生。但是，你知道它可以设8个值吗？

一般，常用的场景下，border-radius都是设置成一个属性，如：10px 或 30%。这篇文章会讲述border-radius一个不常用的特性，利用这个特性可以做出很炫酷的边框效果，你可以设置成”4em 8em“、”4em / 8em“、”70% 30% 30% 70% / 60% 40% 60% 40%“等。

· · ·

JS和WebAssembly的互相调用终于变快了

Webassembly或许将成为颠覆前端开发的一项新技术，它可以打破前端开发一定要使用JavaScript的界限，使得那些使用c、c++、golang等的后端开发者也可以写前端页面。

Webassembly发展初期，不可避免地要和JavaScript模块进行交互，而这种跨语言的交互很耗时，现阶段下还有很多事情要做。

作者在Mozilla为Firefox的新浏览器做Webassembly方面的工作，文中介绍了他们团队在最新的工作中，使得Webassembly和JS互相调用的速度有了非常大的提升。下图列出了改造前后执行一亿次函数调用所需时间的对比：

改造前后执行一亿次函数调用所需时间的对比

本文还介绍了浏览器的引擎是如何与计算机进行数据的交互的知识，并由浅入深地介绍他们是怎么一步步地将模块间地调用进行优化的。

· · ·

一个自定义HTML标签的简短介绍

自定义标签是Web Components的一个子集，通过自定义标签可以实现任意你想要实现的效果，是一件很酷的事情。让你不用React、Vue、Angular这样的框架就能实现。

文中通过示例，使用ES6语法，介绍了如何写一个自定义的标签。在自定义标签的对象中，比如可以通过observedAttributes定义组件内可观察变化的属性，还有该自定义标签的声明周期函数：connectedCallback(插入到DOM之后触发)、disconnectedCallback(从DOM中被移除后触发)、attributeChangedCallback(属性发生变化之后触发)等。丰富的API可以让开发者实现更复杂的应用系统更加的方便。

需要注意的是，自定义标签的兼容性不是很好，不建议在生产环境使用。各浏览器的支持程度如下：

1.Chrome/Opera 支持

2.Firefox 63中默认支持（beta）

3.Safari 支持程度较低

4.Edge 还在开发中

· · ·

「 我是如何记住CSS Grid的属性的 」

CSS Grid布局是CSS中一个强大的布局系统，与Flex不同，Grid是一个基于网格的二维布局方式，你可以同时处理行和列的结构。

Grid的强大决定了Grid有很多的属性，每个属性又有多个属性值，所以要记住这些属性并能灵活运用不是一件简单的事。作者在该文中介绍了他是怎么记住这些属性及其属性值的方法，这个方法也许对你也很适用。

· · ·

写出更好、更简洁的JavaScript条件语句的五个小提示

在JavaScript编码过程中，我们经常需要写很多if...else...的条件语句，在看别人写的代码时，也经常会遇到可读性很差的代码，大多数这种代码都是有很多的判断条件，看的人眼花缭乱，不知该如何下手。

该文介绍了五个小的技巧，教你巧妙地使用ES6语法，写出更好、更简洁的代码，让你不用写注释，也能提升代码的可读性。

- The End -