案例分享:阿里巴巴全球化电商核心系统架构实战,点击学习>>> 了解详情
写点什么

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

2019 年 10 月 14 日

前端周报: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:521927

评论

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

Java集合总结,从源码到并发一路狂飙

给你买橘子

Java 编程 算法 集合

数据结构与算法知识点总结

围绕工作的务实学习

编程能力 —— 异步编程

wendraw

Java 前端进阶训练营 编程能力

肖风:数据要素市场与分布式AI平台

CECBC区块链专委会

实验室里的AI激情:腾讯优图的升级修炼之路

脑极体

微服务架构下分布式事务解决方案

Arthur

16种设计思想 - Design for failure

Man

Java 微服务 设计原则

创业使人成长系列 (2)- 散伙协议

石云升

创业 股权 合伙人 散伙协议

漫画通信:一图看懂通信发展史

阿里云Edge Plus

【写作群星榜】6.27~7.10 写作平台优秀作者 & 文章排名

InfoQ写作平台官方

写作平台 排行榜

521我发誓读完本文,再也不会担心Spring配置类问题了

YourBatman

spring springboot @Configuration Spring配置类

编程能力 —— 寻路问题

wendraw

Java 前端进阶训练营 编程能力

最大的 String 字符长度是多少?

武培轩

Java 源码 后端 JVM

编程能力 —— 解析表达式

wendraw

Java 前端进阶训练营 编程能力

30 张图带你分分钟看懂进程和线程基础知识全家桶

爱嘤嘤嘤斯坦

Java 线程 进程 进程线程区别

DDD实施过程中的点滴思考

Winfield

领域驱动设计 DDD

亚马逊:让创新科技成为重启世界的新动能

爱极客侠

啃碎并发(八):深入分析wait&notify原理 猿码架构

猿灯塔

区块链+高考,让世界再无冒名顶替

CECBC区块链专委会

领域驱动设计(DDD)实践之路(一)

vivo互联网技术

架构 领域驱动设计 DDD

5分钟上手部署!!!

清风

Java Spring Boot

Java 后端博客系统文章系统——No2

猿灯塔

Docker基础修炼3--Docker容器及常用命令

黑马腾云

Docker Linux 命令 容器技术

【Java虚拟机】垃圾收集器与内存分配

烫烫烫个喵啊

Java Java虚拟机

SpringBoot入门:01 - 配置数据源

封不羁

Java spring springboot

终于有人把Elasticsearch架构原理讲明白了,感觉之前看的都是渣

爱嘤嘤嘤斯坦

Java elasticsearch 编程 架构

LR.Net平台研发轶事,每一个点都很难,但我们不将就

力软.net/java开发平台

C# .net 跨平台 框架开发

流水账

zack

HTTP/2 总结

guoguo 👻

积极支持EdgeX发展,英特尔为2020 EdgeX中国挑战赛获奖队伍创造广阔合作空间

最新动态

利用 Python 爬取了 13966 条运维招聘信息,我得出了哪些结论?

JackTian

Python Linux 运维 数据分析 招聘

数据库运维技术发展与展望

数据库运维技术发展与展望

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