QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

前端周报:Vue 3 公开代码库;NPM 发布 6.12.0;Sass 推出模块系统

  • 2019-10-14
  • 本文字数:3024 字

    阅读完需:约 10 分钟

前端周报:Vue 3公开代码库;NPM发布6.12.0;Sass推出模块系统

前端周报专注大前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点,分为新闻热点、深度阅读、开源项目 & 工具等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端周报内容。

新闻热点

前端新闻

Vue 3.0 代码仓库公开

Vue 3.0 完全由 TypeScript 编写,目前还处于 alpha 阶段,仓库地址:


https://github.com/vuejs/vue-next


Vue 3 计划于 2020 年第一季度发布,Vue 3 将更小、更快、更易于维护。其重要变化之一是,受 React Hooks 的启发,新的 API 将允许使用基于函数的方式编写组件。用户可以将逻辑封装到“组合函数”中,并在组件之间重用该逻辑。新的 API 与当前语法 100%兼容,并且不会在短期内被弃用。

NPM 发布 6.12.0

现在,npm ci 针对 git 依赖关系运行准备脚本,修复 --no-optional 参数。engine 不匹配将再次显示的警告。

Firefox Preview Nightly 在 Android 和 Pixel 2 中 启用了 WebRender

Mozilla 的 WebRender 技术首次进入 Android。对于 Google Pixel 2 上的 Firefox Preview(Fenix)用户,最近在默认情况下启用了 WebRender。


WebRender 与 Firefox 57 中引入的 Stylo CSS 引擎一样,也来自 Mozilla 的下一代引擎 Servo,并以 Rust 编程语言编写。WebRender 是网页内容的渲染器,其工作方式更像游戏引擎,但针对网页内容渲染进行了优化,因此具有巨大的性能优势。

行业新闻

消息称 TeamViewer 系统后台被黑客组织 APT41 攻破

10 月 11 日,网上流传疑似深圳市网络与信息安全信息通报中心发出紧急通告,指出目前知名远程办公工具 TeamViewer 已经被境外黑客组织 APT41 攻破,提醒企业组织做好防护措施。


通报中心建议各单位采取以下主动防御措施:


  • 近期停止使用 TeamViewer 软件。

  • 在防火墙中禁止用于 TeamViewer 远程通讯端口 5938。

  • 通过 Web 应用防火墙或其它设备禁止单位内主机回连 teamviewer.com 域名。

使用人工神经网络和人工蜂群优化进行语音识别

印度圣雄甘地特派团工程技术学院和杰比信息技术学院的研究人员开发出一种语音识别系统,研究人员在一系列人类语音音频片段上测试了他们的系统,并将其与传统的语音识别技术进行了比较。他们的技术优于其他所有方法,获得了显著的准确性得分。


研究人员开发的系统的独特之处在于使用了 OABC 优化算法来优化 ANN 的层和人工神经元。人工蜂群(ABC)算法旨在模拟蜜蜂的行为,以解决各种优化问题。研究人员在论文中写道:“该方法的灵敏度、特异性和准确性分别为 90.41%、99.66%和 99.36%,比所有现有方法都要好。”将来,语音识别系统可用于在各种环境中实现更有效的人机通信。此外,他们用于开发系统的方法可能会启发其他团队设计类似的模型。

在恐怖活动发生之前进行预测

数据科学家已经开发了一种预警模型,该模型可以基于前 10 次攻击,预测出恐怖组织在未来的致命程度。该模型利用了全球恐怖数据库(GTD)和 RAND 全球恐怖主义事件数据库(RDWTI)公开获得的数据。

深度阅读

介绍 Sass 的模块系统

Sass 模块系统是解决命名冲突的更强大的方案,新增 @use 和 @forward 规则,而 @import 将被 Sass 逐渐放弃。


https://css-tricks.com/introducing-sass-modules/

理解 JavaScript 中的 This, Bind, Call 和 Apply

在本文中,您将了解 this 根据上下文的隐式指向,您将学习如何使用 bind,call 和 apply 方法,明确指定的值 this。


https://www.digitalocean.com/community/conceptual_articles/understanding-this-bind-call-and-apply-in-javascript

实用的 css 自定义属性模式

本文作者一直在使用 CSS Custom Properties 来发现它们的价值,因为浏览器终于支持开发人员在生产中使用它们了。它们是如此有用和强大!


作者将 CSS 变量的用法归类。当然,开发人员可以随意使用 CSS 变量,但是在不同类别中考虑它们可能会帮助您理解使用变量的不同方式。


  • 变量:基础知识。例如设置,在 color 任何需要的地方使用的品牌。

  • 默认值:例如,默认值 border-radius 可以在以后覆盖。

  • 层级覆盖:例如主题样式覆盖。

  • 范围规则集:各个元素的有意变化。例如链接和按钮。

  • Mixins:规则集旨在将其价值带入新的环境。

  • 内联属性:从 HTML 中的内联样式传递的值。


https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

Chrome 78 有哪些更新?

稳定版的 Chrome 78 将在 10 月 22 日发布,普通用户几乎感觉不到变化,但对于开发者而言,会有一些令人兴奋的新功能。


CSS 透明度百分比


opacity 属性当前接受介于 0(完全透明)和 1(完全不透明)之间的值。Chrome 78 还允许百分比从 0%到 100%:


/* identical styles */.style1 { opactity: 0.75; }.style2 { opacity: 75%; }
复制代码


JavaScript Optional chaining


Optional chaining 是 ES2019 提议,它将节省您数小时的打字和调试工作。


let country = (user && user.address && user.address.country) || undefined;// chrome 78let country = user?.address?.country;
复制代码


恶意行为限制


浏览器窗口卸载事件 unload、beforeunload 以及类似的 pagehide、visibilitychange 技术上这些事件被用于检查数据是否被保存,或记录用户分析数据。不幸的是,一小部分开发者可以用来添加代码破坏用户体验,从 Chrome 78 开始将不允许:


  • 同步的 Ajax 请求 – 可以在 AllowSyncXHRInPageDismissal 策略标志中覆盖此请求,但是该标志还将在版本 82 中删除。

  • 使用 window.open() 创建阻止页面关闭的弹窗。


短信接收器 API


短信文本消息通常用于验证电话号码或发送一次性密码,新的 SMS Receiver API 允许 Web 应用程序使用特定的格式约定读取发送给他们的 SMS 消息,以避免手动的用户交互。例如:


if (navigator.sms) {  try {    let { content } = await navigator.sms.receive();    console.log('SMS text:', content);  } catch (e) {    console.log('error', e);  }}
复制代码


本机文件系统 API


本机文件系统 API 允许浏览器直接与用户本地设备上选择的文件进行交互。它可以用于从客户端 JavaScript 编辑照片、视频或文本文档,而无需上载和下载过程。


屏幕枚举 API


屏幕枚举 API 提供有关连接到用户设备的所有显示器的信息。在应用程序可以使用多个监视器的情况下(例如,提供面向公众的幻灯片和演讲者备注显示的演示文稿),这通常会很有用。


媒体元素 seekto 事件


Chrome 78 引入了一个新的 seekto 动作处理程序,当将播放移至时间轴上的特定点时会调用该处理程序。这可用于进行 DOM 更改,记录分析等。


WebSocketStream


WebSocket 消息到达的速度比浏览器所能应付的更快。在这种情况下,内存缓冲区可能溢出,或者 CPU 使用率将增加到浏览器无响应的程度。


WebSocketStream 取代 WebSocket API。它是基于 promise 的,并且集成了流,因此可以在接收到完整消息之前解析大量数据。


更多关于 Chrome 78 的更新


请访问相关网址查看。


https://developers.google.com/web/updates/2019/09/devtools

工具 & 库 & 资源

【Pokemon Friends】皮卡丘和妙蛙种子,通过 css(scss) 和 html 实现。


https://codepen.io/acupoftee/pen/YzzzYxj


【Parcel-app】parcel 版的 create-react-app。


https://parcelapp.netlify.com/


【moveable】movable 是可拖动、可调整大小、可缩放、可旋转、可扭曲、可捏、可分组、可捕捉的。


https://github.com/daybrush/moveable


【interview_internal_reference】2019 年阿里、腾讯、百度、美团、头条等技术面试题目及答案最新总结,专家出题人分析汇总。


https://github.com/0voice/interview_internal_reference


2019-10-14 15:522498

评论

发布
暂无评论
发现更多内容

软件架构(2)-框架设计

Zeke

极客大学架构师训练营

单例模式

knight

上手深度学习之前,我们先聊聊“数学”

华为云开发者联盟

神经网络 学习 数学

技术解读丨目标检测之RepPoints系列算法

华为云开发者联盟

算法 神经 目标检查

中秋佳节,程序员教你AI三步成诗,秒变“李白”

华为云开发者联盟

AI 中秋

极光无限:用AI赋能安全 解决安全行业人才紧缺难题

风向标

人工智能

甲方日常 25

句子

生活 随笔杂谈 日常

架构师训练营 1 期第 3 周:代码重构 - 作业

piercebn

极客大学架构师训练营

架构师训练营 1 期 - 第三周 - 设计模式

三板斧

极客大学架构师训练营

GitHub上标星68k,基于SpringBoot+Netty分布式开源的即时通讯系统项目

Java架构之路

Java 程序员 编程语言 Netty 项目实战

架构师训练营 - 作业 - 第二周

Max2012

数据库选型入门必读:如何在眼花缭乱的产品中挑出最适合业务的?

华为云开发者联盟

数据库 数据库选择 关系型

区块链掀起全民创业热潮!数字资产是未来全球最具前景和价值的!

CECBC

区块链 数字货币

代码重构 - 课后作业

Nick~毓

太牛了,这份神仙级面试笔记把所有 Java 知识面试题都详解出来了

Java架构之路

Java 程序员 面试 编程语言

开源=免费?

Philips

开源 开源社区

重塑产业+价值共识,区块链助力供应链金融数字化

CECBC

区块链 供应链物链

从三个产业侧影,打开万物智能的应用之匙

脑极体

2020互联网公司中秋礼盒大比拼!(文末送福利)

Java架构师迁哥

谈谈测试

BigBang!

测试的价值 测试文化 测试落地

LeetCode题解:242. 有效的字母异位词,数组排序,JavaScript,详细注释

Lee Chen

大前端 LeetCode

深入剖析 | Java15语法特性

九叔(高翔龙)

Java 架构 Java 分布式 java15新特性

一周信创舆情观察(9.21~9.27)

统小信uos

第三周学习代码重构总结

三板斧

极客大学架构师训练营

2020HC大会上,这群人在讨论云原生…

华为云开发者联盟

华为 华为云 大会

阿里内部超流行的“SpringBoot+ 微服务指南”,理论与实战双管齐下

Java架构之路

Java 程序员 微服务 Spring Boot 编程语言

国内上市进程或将提速!百度宣布小度科技独立融资

脑极体

一个草根的日常杂碎(9月29日)

刘新吾

随笔杂谈 生活记录 社会百态

关于 UML 类图

西贝

UML 图表

在vue2中使用ts

正经工程师

typescript vue.js

全文!马云对数字时代全球化的全新解读

CECBC

全球化 数字时代

前端周报:Vue 3公开代码库;NPM发布6.12.0;Sass推出模块系统_大前端_Zehao_InfoQ精选文章