11.4

前端每周清单第 41 期 : Node 与 Rust、OpenCV 的火花,网络安全二三事

作者:王下邀月熊 编辑:徐川

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

新闻热点

国内国外,前端最新动态

  • PWA 是否能带来新一轮大前端技术洗牌?: 本文是 Brilliant Open Web 团队成员,百度资深前端工程师彭星分享的对于 PWA 与大前端技术的看法。本文回顾了 Web 在移动时代遭遇的两大枷锁:用户体验枷锁与用户留存枷锁,讨论了 PWA 成为解开枷锁钥匙的可行性,分析了其是否能真正弥补 Web 的劣势。

  • 77% 的网站仍然使用有漏洞 JavaScript 库: 上周 Snyk 发布了开源社区安全现状报告,发现随着开源社区的日渐活跃,开源代码中包含的安全漏洞以及影响的范围也在不断扩大。本文则是从 Web 安全的角度对于数据进行了深度分析,发现统计的超过 433000 站点中,77% 使用了至少一个包含已知漏洞的前端 JavaScript 库;更多详细的数据描述请查看原文。

开发教程

步步为营,掌握基础技能

  • 基于 CSS Grid 的常见响应式布局: CSS Grid 允许我们在二维坐标系上编排元素,在主流桌面浏览器逐步完善对其的支持之后,CSS Grid 也开始登陆到移动端浏览器;本文即是介绍如何利用 CSS Grid 实现常见的响应式布局。本文依次介绍了图文混排布局、整页图片画廊、卡片布局、Holy Grail 布局等等;更多 CSS Grid 相关资料查看这里

  • 2018 年值得使用的 React 组件库: 工欲善其事,必先利其器;作者根据自身的实践经验与 GitHub、Stack Overflow 等社区的活跃程度,在本文中为我们推荐了十余个值得一试的 React 组件库,以提高应用开发的效率。作者在文中讨论的组件库包括了 React Material UI、React-Bootstrap、React toolbox、React Belle、React Grommet、React Components by Khan Academy、Material Components Web、Ant Design React、Semantic UI React、Onsen UI、React Virtualized 等;更多 React 相关资料参考这里

  • 基于 Rust 编写高效安全的 Node.js 原生模块: RisingStack 一直致力于提升 Node.js 的运行效率;不过去年面临了一个窘境:已然达到 Node.js 本身的瓶颈。为了突破天花板,RisingStack 决定将关键计算模块以原生方式实现;而经过技术选型比较之后,他们决定使用 Rust,而不是 C++ 来编写原生模块。本文首先分析了 Node.js 服务端速度的瓶颈,然后展示了如何用 Rust FFI 与 Rust Neon 实现简单的 URL 分析模块,最后对比了这二者以及 Node.js 实现方案之间的性能;更多 Node.js 学习参考深入浅出 Node.js 全栈架构

  • 使用 Angular 与 Vue.js 实现相同的功能并比较: Angular 与 Vue.js 都是优秀的 Web 组件框架,二者在某些语法风格上也有异曲同工之妙,本系列即是通过利用这两个框架编写相同的,简单而易扩展的应用,来仔细地对比二者。本系列包括了四篇博文,首先从项目文件结构的角度对比了二者;然后细致地对于学习资料、组件语法中相似的代码等内容进行了分析,最后还讨论了如何使用 TypeScript 开发 Vue.js 应用。更多 AngularJS 与 Vue.js 学习资料可以参考这里

工程实践

立足实践,提示实际水平

  • 如何显著提升 React 应用的性能: 应用性能优化是老生常谈的问题,随着我们应用业务需求不断地变化,性能问题也是绵延不绝;本文是又一篇优秀的讨论 React 应用性能优化的文章。本文依次讨论了不恰当的 shouldComponentUpdate 以及对于 PureComponent 的误用反而会造成逆优化、如何快速修改 DOM 元素、如何避免过于频繁地事件触发与回调执行。更多 React 资料可以阅读 React 与前端工程化实践

  • Helmet 与 Express 应用安全: Express 是流行的 Node.js 服务端框架,本文即是介绍如何使用 Helmet 以及其他的框架来增强 Express 应用的安全性。本文详细介绍了 HTTP 响应头中的 X-DNS-Prefetch-Control、X-Frame-Options、Strict-Transport-Security、X-Download-Options、X-Content-Type-Options、X-XSS-Protection 等域的含义与作用;更多 Node.js 学习参考深入浅出 Node.js 全栈架构

  • 或许类属性中的箭头函数并不如你所料: Arrow Function 箭头函数是 ES6 的重要语法特性之一,其能优化我们代码的可读性,还能自动绑定当前的 this 对象。不过本文作者表示,当我们在类属性中使用箭头函数时,却往往会不符合直觉的判断;类属性式的箭头函数会被转换为构造函数中创建,因此并不能被子类继承,并且这种模式的性能表现也差于绑定函数模式。更多 JS 学习可以参阅《JavaScript-Notes》。

深度阅读

深度思考,升华开发智慧

  • 我是如何 7 分钟之内黑进 40 个网站的: 本文作者详细介绍了对于某个包含漏洞的网站渗透提权的过程,是一篇不错的安全实践教程。作者依次使用了 Nmap 进行嗅探踩点,使用 gobuster 进行路径枚举,构造虚拟邮箱地址并且上传 WebShell;然后从 cgi-admin/pages 获取明文数据库密码并且成功地获取全部数据库权限。更多 Web 安全相关知识可以阅读现代 Web 开发工程化实践

  • Atom 中的远程代码执行: 本文作者针对 Atom 1.21.1 版本中,因为 Markdown 解析漏洞导致的远程代码执行(RCE ),进行了深度分析,也是不错的了解常见的 Web 安全问题对桌面应用的影响的文章。本文首先介绍了 Atom 如何通过 CSP 来限制 XSS,然后分析了 Atom 是如何解析 Markdown 文件,如何针对这种解析机制构造 local DOM XSS Payload,以及如何执行本地任意代码并且加载执行远程代码;更多 Web 安全相关知识可以阅读现代 Web 开发工程化实践

  • 使用 Node.js 与 OpenCV 实现人脸识别: 近年来人工智能与深度学习的概念火热,相关的理论技术也在工程项目中得到了广泛的应用,每周清单之前也推荐过如何用 JavaScript 来实现机器学习算法;本文则是循序渐进地介绍如何使用 Node.js 来构建简单的人脸识别应用。本文从数据集准备开始入手,然后讨论了如何训练识别器、如何进行模型检验等内容;更多 Node.js 学习参考深入浅出 Node.js 全栈架构

开源项目

乐于分享,共推前端发展

  • node-prune: node-prune 是简单的用来移除 ./node_modules 中不必要文件的工具,譬如 MarkDown、TypeScript 源代码文件等;从而尽可能地减少 node_modules 中文件的体积,以加快应用部署的速度。

  • react-i18next: react-i18next 是便捷易用的 React 国际化辅助库,其能帮助我们快速实现应用地国际化改造。

  • bundle-buddy-webpack-plugin: Bundle Buddy 是著名的能够发现多个 JavaScript Chunks/Splits 中重复冗余源代码的工具,从而方便我们选取合适的代码分割参数,来最终提升页面加载的性能。bundle-buddy-webpack-plugin 则是基于 Bundle Buddy 封装的 Webpack Plugin,方便我们集成到现有的开发流程中。

  • aws-amplify: AWS Amplify 是面向 Web 前端与移动端开发者的,用于构建云端应用的工具库;其由 AWS 开源,目前仅支持 Amazon Web Services,但是其设计的初衷是提供插件化的、能够适用于多种云端或者自定义服务端的工具。Amplify 提供了声明式的接口,能够帮助开发者迅速添加使用情况收集、权限校验等功能。

巅峰人生

  • 那个逃离北京的程序员说:我想工作到 70 岁: 本文是二叉树出品的《众生相》十集人物纪录片的第三集,讲述了绰号老神仙的 Linux 内核开发者, 吴峰光博士 “ 逃离北京 ” 之旅;这个带有梦幻色彩的词是如此代价高昂,以至于对不少人而言成为一种奢侈的选择。而踏上这条 “ 逃离 ” 之路的实践者们,是否真的收获了他们想要的东西?本文并未谈及具体的技术,而是从生存、生活等等角度谈谈技术人员的道路选择。

前端之巅

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

前端之巅微信底图-5.jpg

上一页