阿里云前端周刊 - 第 7 期
推荐
1. GUI 应用程序架构的十年变迁
https://segmentfault.com/a/1190000009346599
随着现代浏览器的日渐流行,Web 以及混合开发技术的发展,大前端的概念日渐成为某种共识;而无论 iOS、Android、Web 这样的端开发还是 React Native、Weex 这样的跨端开发,其术不同而道相似。
2. HTML APIs: What They Are And How To Design A Good One
https://www.smashingmagazine.com/2017/02/designing-html-apis/
As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the curse of knowledge: When we’re an expert on something, we cannot remember how confused we felt as newbies.
3. CSS 变量教程
http://www.ruanyifeng.com/blog/2017/05/css-variables.html
今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。
这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。
其它
1. area、map 标签及在实际开发中的应用
http://www.zhangxinxu.com/wordpress/2017/05/html-area-map/
之前,一直以为HTML 是一个鸡肋HTML,估计到了HTML5时代会被废弃的命。但是,最近一查资料,乖乖了个咚,不仅没被废弃,反而发展了,新增了一些标签属性,例如rel,media,hreflang等。
然后进一步研究发现,尼玛这货居然还可以用来解决一个困扰我很多年的棘手问题,形象立马高大上了起来。
2. 使用 Headless Chrome 进行页面渲染
https://segmentfault.com/a/1190000009353359
使用 Headless Chrome 进行页面渲染 从属于笔者的 Web 开发基础与工程实践系列文章,主要介绍了使用 Node.js 利用 Chrome Remote Protocol 远程控制 Headless Chrome 渲染界面的基础用法。本文涉及的参考与引用资料统一列举在这里。
3. CSS Animations vs Web Animations API
http://www.w3cplus.com/animation/css-animations-vs-the-web-animations-api.html
Web Animations API为开发人员提供了一种方式,使用JavaScript可以直接操作浏览器的动画引擎。
4. Vue 的 Virtual Dom 实现- Snabbdom 解密
http://www.cnblogs.com/xuntu/p/6800547.html
JavaScript 开销直接与求算必要 DOM 操作的机制相关。尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点,但 Vue 的 Virtual Dom 实现(复刻自 snabbdom)是更加轻量化的,因此也就比 React 的实现更高效。
阿里云前端周刊 - 第 8 期
推荐
1. 现代浏览器引擎的构建之道
https://github.com/xitu/gold-miner/blob/master/TODO/quantum-up-close-what-is-a-browser-engine.md
Mozilla 在 2016 年 10 月公布了 Quantum 项目, 旨在开创下一代浏览器引擎。 Firefox 53 中首次包含了该项目部分核心代码 。 本文是深度解读 Quantum 项目的系列文章的第一篇。
2. 最终,JavaScript 成为了一流语言
http://www.infoq.com/cn/news/2017/05/JavaScript-become-language
质疑JavaScript是否是一种「真正的」编程语言的时代已经过去,它的旅程远没有结束,但是其应用率和改进速度使我对其前进道路充满信心。
3. 十个基于 JavaScript 的机器学习实例
https://zhuanlan.zhihu.com/p/26709518?spm=a313p.24.18y0dt9.38691320992&short_name=a.ZPC4&app=chrome
随着人工智能技术的发展,机器学习越来越受到开发者们的关注,从而也导致了机器学习库如雨后春笋般的涌现出来,而且没有任何放缓的趋势。虽然,传统意义上 Python 已经成为了最受欢迎的机器学习语言。但目前神经网络可在任何编程语言中运行,当然也包括 JavaScript!
其它
1. 如何使用CSS Grid布局实现限宽容器全屏效果
http://www.w3cplus.com/css/breaking-out-with-css-grid-layout.html
在 Web 布局设计中时常会碰到全屏的效果时,可能会碰到在限制宽度的容器中实现全屏效果。本文通过 CSS Grid 解决这种布局问题。
2. 如何实现一个 Git Diff 解析器
http://taobaofed.org/blog/2017/05/18/how-to-display-git-diff/
代码审阅中一个重要功能是对两个 commit 进行 diff 并展示到页面中,这篇文章尝试总结其实现过程。
3. 靠谱程序员必备技能——重构
http://gitbook.cn/books/591837cbc9b8f67d6a6a94df/index.html
「重构本质上是一种代码整理技术,这项技术使得代码整理的效率更高,风险更小」,作者从是什么、为什么、怎么做、何时做等多个角度分享了重构中的问题与经验。
4. 如何做好H5性能优化?
https://mp.weixin.qq.com/s/6Jdq4wn03i_flM0s0TeDaw
智能手机的普及、移动互联网的发展、微信异军突起,都为 H5 的发展提供了良好的环境。当前,H5 已被广泛应用于营销、广告、传播之中。而针对 H5 效率慢、体验差的硬伤,如何做好性能测试并优化其性能就显得尤为重要。
阿里云前端周刊 - 第 9 期
推荐
1. Web 开发者安全速查表
http://www.freebuf.com/articles/web/135278.html
如果你觉得你可以在一个月之内开发出一款集使用价值、用户体验度、以及安全性为一身的产品,那么在你将产品原型真正推上市场之前,请一定要三思啊!
当你仔细核查了本文给出的安全小贴士之后,你可能会发现你在产品的开发阶段跳过了很多重要的安全步骤。有的时候,也许你应该对你的用户坦诚一点,你应该诚实地告诉他们这款产品还没有完全搞定,还有很多的安全问题亟待解决。
2. WebAssembly 与代码的编译
http://www.tuicool.com/articles/Nf2uQj2
本文介绍了 WebAssembly 的编译与使用。另外,WebAssembly 和 JS 的关系是怎么样的?Webassembly 如何提高运行速度?为什么要提倡强类型风格代码书写?通过本文可以有一个基本的了解。
3. JS 与多线程
http://www.tuicool.com/articles/viEFnm6
多线程对前端开发人员来说既熟悉又陌生,一方面前端几乎很少写多线程,另一方面多线程又经常会碰到,如你买个电脑它会标明它是四核八线程、四核四线程之类的,它是多核多线程的。什么叫做多核呢?四核四线程和八线程又有什么区别?
其它
1. Canvas 图像旋转与翻转姿势解锁
https://aotu.io/notes/2017/05/25/canvas-img-rotate-and-flip/
结合实际应用场景,介绍了 Canvas 的一些知识,在 Canvas 上会制图像,但图像需要多个角度/多个方向展示,因此需要对图像进行相应的旋转与翻转(镜像),这也是本文所要介绍的重点。
2. React 历史项目维护与优化实践
http://ewind.us/2017/react-legacy-maintain/
本文介绍了接手维护一个中型 React 历史项目时的一系列改进实践,包括模块结构拆分、业务逻辑梳理、Webpack 打包优化等。
3. 2017 年四大网络安全趋势
http://www.infoworld.com/native?prx_t=sI0CAkDgMAMbMMA
在网络安全方面,下面这种情况是非常确定的:安全从业人员正在经历忙碌的一年。2016年的网络攻击创下了纪录,2017年的网络环境威胁将更加严峻。这里有四个需要注意的问题。
4. 谈谈像素以及微信小程序的 rpx
http://huang-jerryc.com/2017/05/21/talk-about-pixel-and-rpx/
本文作者最近在负责有赞的某个业务的微信小程序开发,第一次着手微信小程序的开发,这个过程中发现微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位 rpx,即 responsive pixel