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 -

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181019G0A3FP00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券