写点什么

前端每周清单第 52 期: Webpack 4.0,GraphQL 安全加固,去中心化的 Web

  • 2018-02-28
  • 本文字数:3290 字

    阅读完需:约 11 分钟

看新闻很累?看技术新闻更累?试试下载 InfoQ 手机客户端,每天上下班路上听新闻,有趣还有料!

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

新闻热点

国内国外,前端最新动态

  • Webpack 4.0.0 发布: 本周 Webpack 4 正式发布,包含了大量的特性更新,以及极大的性能优化(最高可达 98%)。Webpack 4 中移除了 CommonsChunkPlugin,替换以一系列默认的配置以及简单的 optimize.splitChunks 接口。同时 Webpack 4 为我们带来了 mode 的配置项,允许开发者根据不同的需求选择是面向开发环境优化还是生产环境优化,从而降低了初学者的门槛。更多变化说明参考这里
  • Parcel v1.6.0 发布: 虽然距离 Parcel v1.5.0 发布仅仅过去了三周,Parcel v1.6.0 依然为我们带来了超过十五个的新特性以及大量的修复提升。该版本中值得关注的特性包括:基于 Babel 的 ES6+ 零配置转化,面向 React 以及 Preact 的自动 JSX 支持,Node 以及 Electron 目标的支持,生产环境下包体分析,Node 6 以及 W3C WebManifest 的支持等。
  • npm v5.7.0 发布: 该版本带来了一系列令人激动的特性与修复提升,本文即是对该版本的重点变化的详细说明。该版本引入了 package-lock.json 文件的自动合并功能,开发者使用 npm install 的时候即可以自动合并 package-lock.json 与 npm-shrinkwrap.json。同时该版本引入了新的 ci 命令,其仅会安装 lock 文件中的依赖项,并且会在 package.json 与 lock 文件不一致的时候抛出错误。该命令相较于 npm install 有 2 ~ 10 倍的性能速度提升,能够大大优化目前的 CI 持续集成流程。

开发教程

步步为营,掌握基础技能

  • 你需要知道的关于 CSS Variables 的一切: 大部分的编程语言都支持变量,或者类似的特性;尽管 CSS 长久以来一直不支持自定义变量,随着 Web 的快速发展我们也欣慰地看到它引入了自定义属性,或所谓的变量的特性。本文即是对于 CSS Variables 的全面介绍,从 CSS Variables 的特性原理到它在实际应用开发中的实践;为了更好地进行讲解,作者还从零构建了三个项目:使用 CSS Variables 创建多态组件,基于 CSS Variables 的主题特性,创建小的 CSS Variable Booth。更多相关资料参考现代 Web 开发基础与工程实践 - 基础篇
  • 2018 JavaScript 测试概述: 该指南旨在介绍 2018 年中应该掌握的与 JavaScript 测试相关的概念、名词、工具与方法。本文集合了许多的优秀文章中的理念,以及作者自身多年在构建 Welldone 软件解决方案过程中积攒的经验。作者在多年的工作中曾经面向不同的产品使用实践了不同的测试解决方案的组合搭配,本文则是使用 Jest 进行单元测试与集成测试,并且使用 TestCafe 进行界面测试。更多相关资料参考 Awesome JavaScript Reference
  • 人脸识别:使用 React-Redux 以及 Kairos 来识别你自己: 我们正处在人工智能与机器学习技术迅猛发展的年代,Face ID 与人脸识别也不再遥不可及,而成为了生活中不可缺少的一部分。付诸实践总好过高谈阔论,本文作者即介绍如何使用 React-Redux 以及 Kairos 来创建人脸识别的应用,并且用它做一些有趣的事情。更多相关资料参考 DataScienceAI MindMap

工程实践

立足实践,提示实际水平

  • Spectrum 的 Streaming Server-Side Rendering 以及分布式缓存的实践: React 16 为我们带来了 Streaming ServerSide Rendering,允许并发地进行 HTML 传输与界面渲染。该特性优化了首字节传输与首屏渲染的时间,使得用户能更快地见到有意义的界面。本文则是 Spectrum CTO 分享的,他们是如何使用流式响应以及分布式缓存来保证高性能的 React 应用服务端渲染实践;更多相关资料参考现代 Web 开发基础与工程实践–React 篇
  • GraphQL API 的安全加固: GraphQL 让前端能够便捷,乃至随心所欲地进行数据查询,这样保证了 API 的灵活性,但也带来了一定的安全隐患。除去合法的,有效的查询,恶意的攻击者可能会提交很多耗时的、嵌套多层的查询,从而耗光你的服务器、数据库、网络以及其他的计算与存储资源。本文中,Spectrum CTO 为我们分享了他们在生产环境下是如何对 GraphQL API 进行安全加固的;更多相关资料参考 GraphQL Reference
  • Event sourcing vs CRUD : 很多情况下,事件驱动 (Event Sourcing) 往往与领域驱动开发 (DDD) 以及 CQRS 这种设计模式紧密连接在一起,不过 Event Sourcing 并不仅仅是他们的部分,本文即是对 Event Sourcing 与 CRUD 进行的详细对比介绍。Event Sourcing 也可以看做特殊的数据存储方式,不同于传统的以关系型数据库为核心的存储方式,Event Sourcing 并不会将记录持久化,而是将变化存放为时序序列或者其他类型,从而方便消费者进行处理。更多相关资料参考 MicroService MindMap

深度阅读

深度思考,升华开发智慧

  • Promises 并不中立: Promises 方便了我们在 JavaScript 中进行异步操作,但是本文作者认为 Promise 的中立性不足,以至于对整个生态系统造成了伤害。Promise 最简单的目标,就是包含了某个未来可知的值,可能在下一次的 Event Loop,或者几分钟之后才能得到该值。作者认为 Promise 不够中立的原因包括:非延时执行;不可取消;无法通过;then() 混淆了 map() 与 flatMap()。更多相关资料参考 现代 JavaScript 开发基础
  • CSS 键盘记录: 本项目,CSS Keylogging 包含了一个 Chrome 插件,以及一个 Express 服务器来演示如何利用 CSS 实现键盘记录攻击。该攻击方式的原理很简单,就是利用 CSS 属性选择器来匹配字符,以及 background-image 属性来将判断的字符传到服务器中;该项目还包含了简单的脚本来为每个 ASCII 字符生成独特的请求格式。更多相关资料参考 WebSecurity MindMap
  • 去中心化的意义: 在互联网发展的第一波浪潮,大概是 1980s ~ 2000s 年间,互联网服务都是基于开源的协议构建,并且由社区维护控制。而在第二个年代,大概从 2000 年到现在,Google,Apple,Facebook 以及 Amazon 这样的巨头掌控着互联网。随着以区块链为代表的加密网络的兴起,或许在未来我们可能会进入去中心化的年代。本文即是从宏观的历史发展的角度,讨论了去中心化的意义,以及其与中心化应用相比的不足或优势;加密网络允许我们构建社区主导的网络,并且方便第三方的开发者、创新者以及商业人才加入。更多相关资料参考 Web Series

开源项目

乐于分享,共推前端发展

  • GhostText : GhostText 为我们提供了丰富的编辑器插件,从而允许我们能够直接在编辑器中向浏览器的输入框中写入内容;换言之,所有在编辑器中输入的内容都会实时同步到浏览器中。
  • Proton Native : 移动端开发中,React Native 为我们带来了跨平台的界面构建与状态管理支持,从而能够更方便地构建跨平台应用。Proton Native 则是类似于 React Native 的,依托于 React 生态系统的,开发桌面扩平台应用的框架;它同样允许开发者使用 Redux 这样的流行的库。
  • vue-ethereum-ipfs : vue-ethereum-ipfs 是基于 Vue,Ethereum 以及 IPFS 的分布式应用服务器。Ethereum 可以看做分布式虚拟机,IPFS 则是分布式内容分发网络的一种,Vue 是用于构建 Web 应用的 JavaScript 框架。vue-ethereum-ipfs 通过将状态存放于 Ethereum,并且使用 IPFS 来分发 HTML,从而使得 Web 应用更高效地运行。
  • basicScroll : basicScroll 为我们提供了面向移动端与桌面的,基于 CSS Variables 控制的独立并发滚动效果。basicScroll 允许我们根据滚动位置来改变 CSS Variables,并且可以使用 CSS Variables 来自定义动画。

巅峰人生

  • Hinton:人类就是机器,绝妙的机器: 本文是对于深度学习之父,Geoffrey Hinton 人生与职业经历的简要介绍。三十多年来,Geoffrey Hinton 一直徘徊在人工智能研究的边缘地带。他像局外人一样坚守着一个简单的观点:计算机可以像人类一样思考,依靠直觉而不是规则。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com,注明 “ 前端之巅投稿 ”。

2018-02-28 18:002600
用户头像

发布了 60 篇内容, 共 18.1 次阅读, 收获喜欢 9 次。

关注

评论

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

专访|开源之夏最佳质量奖 Apache RocketMQ Committer 黄章衡

Apache RocketMQ

#开源 消息列队

武汉大数据培训机构怎么样

小谷哥

BI智慧仓储行业应用方案,让你的仓储物流不再复杂

葡萄城技术团队

前端 数据可视化 仓储 智慧仓储 大屏

功能强大的国产API管理神器 Eolink,亲测好用

海拥(haiyong.site)

开发工具 API API测试

想学习大数据怎么选择培训机构

小谷哥

为什么很多产品经理,做不了产品管理?

LigaAI

产品经理 敏捷开发 产品管理 产品功能 12 月 PK 榜

什么是IT资产?如何保障IT资产安全?

行云管家

网络安全 数据安全 IT资产

面对庞大复杂的身份和权限管理,企业该怎么办?

华为云开发者联盟

后端 开发 数字化 华为云 12 月 PK 榜

如何利用A/B实验提升产品用户留存?看字节实战案例给你答案!

字节跳动数据平台

大数据 AB testing实战 12 月 PK 榜

如何将传统 Web 框架迁移部署到 Serverless 架构?

Serverless Devs

Python 架构 前端

LED电子显示屏加速在生活中的应用

Dylan

LED LED显示屏 led显示屏厂家

不足10人的创业团队,怎么在半个月内上线一个新产品?

LigaAI

创业 敏捷开发管理 创业公司 远程开发 12 月 PK 榜

云安全系列5:2023 年需要了解的 40个云安全术语

HummerCloud

云计算 云安全

RISC-V SIG 推出基于openEuler 的下游发行版 Eulaceura

openEuler

Linux 开源 操作系统 openEuler risc-v

java程序员培训好就业吗

小谷哥

SpringBoot内置tomcat启动过程及原理

京东科技开发者

tomcat 后端 tomcat源码解读 编程‘ spring-boot

多样化功能助力企业精准决策,瓴羊Quick BI数据看板解析

对不起该用户已成仙‖

NFT盲盒质押分红挖矿dapp系统开发源码搭建

开发微hkkf5566

“零代码”的瓴羊Quick BI即席分析,业务人员也能轻松上手

夏日星河

cleanmymac2023免费绿色版下载安装教程

茶色酒

CleanMyMac2023

RTS超低延时直播技术:保障大型赛事直播零时差互动

阿里云CloudImagine

云计算 阿里云 世界杯

企业想要提升数据分析能力,还需要选择瓴羊Quick BI

三十

跟我学Python图像处理丨带你入门OpenGL

华为云开发者联盟

Python 人工智能 华为云 12 月 PK 榜

应用瓴羊Quick B,可以有效地提升企业的数据化分析能力

对不起该用户已成仙‖

纷繁复杂见真章,华为云产品需求管理利器CodeArts Req解读

华为云开发者联盟

云计算 需求管理 华为云 12 月 PK 榜

linux高可用小知识点汇总-行云管家

行云管家

高可用 ha 双机热备

Web前端培训机构有哪些?

小谷哥

前端培训学习就业前景怎么样?

小谷哥

FL Studio正式推出全新21版首发新版DAW(数字音乐工作站)工具

茶色酒

FL STUDIO20.9 FL Studio 21 FL Studio21

HMS Core 6.8.0版本发布公告

HarmonyOS SDK

HMS Core

2022最新版SpringCloudAlibaba笔记,把微服务玩的出神入化

架构师之道

Java 微服务 架构师

前端每周清单第 52 期: Webpack 4.0,GraphQL 安全加固,去中心化的 Web_语言 & 开发_王下邀月熊_InfoQ精选文章