阿里云前端周刊 - 往期回顾(1-3)

阿里云前端周刊 - 第 1 期

一、推荐、

1. 如何撰写 Git 提交信息

https://chris.beams.io/posts/git-commit/

重建一段代码的上下文是非常费时费力的,这是无法完全避免的。所以我们应该努力尽可能的减少它。提交信息可以帮上这个忙,也正因为此,一个提交信息反应了一名开发者是不是个好的协作者。

2. 十个关于 Node.js REST API 的最佳实践

http://zcfy.baomitu.com/article/10-best-practices-for-writing-node-js-rest-apis-risingstack-2608.html

这篇文章里,我们将介绍 Node.js REST API 的最佳实践,包括关于路由命名,身份认证,黑盒测试,使用恰当的网络缓存等内容。

3. WebAssembly 为什么比 asm.js 快?

http://blog.huziketang.com/blog/posts/detail?postId=58ce80d2a6d8a07e449fdd28

WebAssembly 是为 Web 而设计的、可以生成浏览器可执行的二进制文件的编程语言。并且于2017 年 2 月 28 日,四个主要的浏览器一致同意宣布 WebAssembly 的 MVP 版本已经完成,即将推出一个浏览器可以搭载的稳定版本。WebAssembly 的一个主要目标就是变快。本文将给出一些它如何变快的技术细节。

二、ATA

1. React 项目集成 TypeScript 方法综述

https://www.atatech.org/articles/75889

TypeScript 作为 JavaScript 的超集,提供了完整的类型系统,为静态检查提供了可能,静太检查能够让错误暴露在「编译阶段」。这遍文章简单讲一下在 React 项目中使用 TypeScript 的一些步骤。

2. 从iGraph管控系统看前端架构演进--一个后端团队开发眼中的前端进化简史

https://www.atatech.org/articles/75373

随着个性化推荐业务的爆炸式增长,iGraph已经成长为一个托管了3000+张表的在线图存储和查询服务平台。同时,管理iGraph数据和服务的管控系统的前端也在不断地调整以适应业务的快速增长,从业务接入系统Umars-web到iGraph运维白屏化及自动化的Umars-service到如今待上线的iGraph、DII统一管控平台Autoumars(git)经历了几年的变迁。下面我将通过这几个平台的变迁来讲述我所看到的前端演进过程。

3. 浅谈汉字的基础知识与设计方法

https://www.atatech.org/articles/74774

浅谈汉字的基础知识与设计方法,在设计banner的时候,我们通过banner中重要的元素字体进行设计,达到视觉上传达情感,表明文字内容的目的。

三、其它

1. Reduce 和 Transduce 的含义

http://www.ruanyifeng.com/blog/2017/03/reduce_transduce.html

学习函数式编程,必须掌握很多术语,否则根本看不懂文档。
本文介绍两个基本术语:reduce和transduce。它们非常重要,也非常有用。

2. 解析 vue2.0 的 diff 算法

https://github.com/aooy/blog/issues/2

vue2.0加入了virtual dom,有向react靠拢的意思。vue的diff位于patch.js文件中,我的一个小框架aoy也同样使用此算法,该算法来源于snabbdom,复杂度为O(n)。
了解diff过程可以让我们更高效的使用框架。
本文力求以图文并茂的方式来讲明这个diff的过程。

3. 脚本错误量极致优化-监控上报与 Script error

https://github.com/joeyguo/blog/issues/13

在前端开发工作中,除了项目开发保质保量上线以外,项目的数据监控也应该配套起来,确保线上的正常运转。如上报 pv 监控项目是否正常运转;测速上报反应项目质量;脚本错误监控作为监控中重要一环,当页面发生报错的时候,通过上报错误信息,能及时发现存在问题,修复优化、减少损失。

阿里云前端周刊 - 第 2 期

一、推荐、

1. 移动应用设计:综述、导航和浏览

http://mp.weixin.qq.com/s/LYvBXbNwVnwMNyJOPVuG_w

应用程序现在是主流的提供内容和服务的方式,并已经广受用户信赖。但在一个已经高度被开发的市场里,一款移动应用如何做到有用,有意义并且有价值,以使客户满意并留存呢? Google 的 UX 研究主管 Jenny Gove 为您详细介绍了创建一款优秀的移动应用的 25 条原则,我们会在这次连载中分批次为您逐一详述。

2. 如何正确对用户密码进行加密?

http://www.infoq.com/cn/articles/how-to-encrypt-the-user-password-correctly

本文介绍了对密码哈希加密的基础知识,以及什么是正确的加密方式。还介绍了常见的密码破解方法,给出了如何避免密码被破解的思路。相信读者阅读本文后,就会对密码的加密有一个正确的认识,并对密码正确进行加密措施。

3. 跨站的艺术-XSS Fuzzing 的技巧

https://www.qcloud.com/community/article/172258001490259493

对于XSS的漏洞挖掘过程,其实就是一个使用Payload不断测试和调整再测试的过程,这个过程我们把它叫做Fuzzing;同样是Fuzzing,有些人挖洞比较高效,有些人却不那么容易挖出漏洞,除了掌握的技术之外,比如编码的绕过处理等,还包含一些技巧性的东西,掌握一些技巧和规律,可以使得挖洞会更加从容。

二、ATA

1. 业务运营前端团队工具集-dbl-zcache

https://www.atatech.org/articles/76631

ZCache是一种在线资源的强缓存方案。前端在AWP后台配置要ZCache的资源列表,WindVane提前下载更新配置和资源,使得客户端可以从本地读取这些资源。

2. 聊聊 HSTS 下的 HTTPS 降级问题

https://www.atatech.org/articles/76639

HSTS 的作用是为了在用户通过 HTTP 访问网站时不需要服务器做 301/302 跳转,直接一个 307 本地强制使用 HTTPS 访问网站,这可以防止用户在第一次发出请求时被劫持,也减少了一次请求。

3. 我所理解的工程师文化

https://www.atatech.org/articles/76564

对于什么是工程师文化,很多人都能说出很多关键词,比如:匠心,创新,专业,担当,开放……
然而如果要用一句话来描述什么是工程师文化,如何判断一家公司是不是一家工程师文化的公司,却不是一个很容易的问题。

三、其它

1. 深入理解 JSON

https://segmentfault.com/a/1190000008832185

我们再追本溯源问一下,JSON究竟是什么东西?为什么JSON就是易于数据交换?JSON和JS对象的区别?JS中JSON.parse、JSON.stringify和不常见的toJSON,这几个函数的参数和处理细节到底是怎样的?

2. 精读 js 模块化发展

http://mp.weixin.qq.com/s/kfXJ8ixpWq32hEAE3phcUA

如今,Javascript 模块化规范非常方便、自然,但这个新规范仅执行了2年,就在 4 年前,js 的模块化还停留在运行时支持,10 年前,通过后端模版定义、注释定义模块依赖。对经历过来的人来说,历史的模块化方式还停留在脑海中,反而新上手的同学会更快接受现代的模块化规范。

3. 真正了解CSS3背景下的@font face规则

http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/

很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下。

阿里云前端周刊 - 第 3 期

一、推荐、

1. 在 Node.js 中引入模块:你所需要知道的一切都在这里

http://huziketang.com/blog/posts/detail?postId=58eaf471a58c240ae35bb8e3

本文介绍了 Node.js 中引入模块的解析、加载、打包、VM 功能处理、缓存等五大步骤。

2. 为什么你统计 PV 的方式是错的?

http://www.jianshu.com/p/84e617daf484

翻译自 Google 工程师 Philip Walton 的文章。共 3754 字,读完需 7 分钟。合格的工程师要能认识到数据和功能一样重要,因为准确的数据收集是产品迭代、市场营销的决策基础。本文会帮你剖析为什么你常用的统计方式是错的?然后给出可行的解决方案。

3. 深入研究Chrome:Preload与Prefetch原理,及其优先级

https://mp.weixin.qq.com/s/O5E2ASBEzfKOxgzCCJDlfw

preload 是声明式的 fetch,可以强制浏览器请求资源,同时不阻塞文档 onload 事件。 prefetch 提示浏览器这个资源将来可能需要,但是把决定是否和什么时间加载这个资源的决定权交给浏览器。

4. 天天写业务代码的那些年,我们是如何成长过来的

https://www.phodal.com/blog/howto-learn-technoloty-from-legacy-system-project/

天天写业务代码如何成长?本文作者分享了自己的经验:组内技术活动,花时间投入练习,假想项目的重构。

三、其它

1. GPU 加速是什么

https://aotu.io/notes/2017/04/11/GPU/

本文主要介绍了以下几点问题:GPU 加速能做什么;GPU 是什么,如何用 Chrome devtools 进行分析 debug;如何开启 GPU 加速;GPU 加速隐藏的坑。

2. CSS 揭秘整理之半透明边框

http://mp.weixin.qq.com/s/kfXJ8ixpWq32hEAE3phcUA

和 CSS 边框有关的那些事儿。

3. 深入理解 CSS:font metrics, line-height 以及 vertical-align

http://zcfy.baomitu.com/article/deep-dive-css-font-metrics-line-height-and-vertical-align-vincent-de-oliveira-2616.html

Line-height 和 vertical-align 可能并不如你所想的那般简单。

4. 通往未来的前端工程师

http://www.jianshu.com/p/6884c603d43c

畅想一下,未来的前端工程师会是什么样的呢?

时间: 2024-11-03 00:36:22

阿里云前端周刊 - 往期回顾(1-3)的相关文章

阿里云前端周刊 - 第 24 期

推荐 1. Firefox 引入 Headless 模式 https://developer.mozilla.org/en-US/Firefox/Headless_mode 类似于 Chrome 的 Headless 模式,现在 Firefox 也引入了 Headless 模式,其允许开发者利用 Firefox 进行更加方便地自动化测试.动态网页抓取等操作:本文也介绍了如何利用 Selenium 控制 Firefox 进行自动化浏览器操作等内容. 2. Webpack 4 开发计划 https:

阿里云前端周刊 - 第 20 期

推荐 1. 阿里电商架构演变之路 https://yq.aliyun.com/articles/161190 首届阿里巴巴中间件技术峰会上,阿里巴巴中间件技术部专家唐三带来"阿里电商架构演变之路"的演讲,本文从阿里业务和技术架构开始引入,分别分享了阿里电商从1.0到4.0架构的演变之路,着重分析了分布式和异地多活的改变之路. 2. WebVR开发教程 - 深度剖析 https://zhuanlan.zhihu.com/p/28324884 最近WebVR API 1.1已经发布,2.0

阿里云前端周刊 - 第 32 期

推荐 1. Preact:一个备胎的自我修养 https://zhuanlan.zhihu.com/p/30796007 前一段时间由于React Licence的问题,团队内部积极的探索React的替代方案,同时考虑到之后可能开展的移动端业务,团队目标是希望能够找到一个迁移成本低,体量小的替代产品.经过多方探索,Preact进入了我们的视野.从接触到Preact开始,一路学习下来折损了许多头发,也收获不少思考,这里想和大家介绍一下Preact的实现思路,也分享一下自己的思考所得. 2. 图片即

阿里云前端周刊 - 第 19 期

推荐 1. 高性能 MobX 模式(part 3)- 用例教程 https://zhuanlan.zhihu.com/p/28199184 前面两部分把重点放在了 MobX 基础模块的构建上.用这些模块我们可以开始解决一些现实场景的问题了.这篇文章将会通过一系列的示例来应用我们已经了解的概念. 当然了,这不会是一个冗长的列表,而是可以让你尝试转变思维去应用 MobX.所有示例都没有使用 @decorator 的语法来实现.这样可以让你在 Chrome 控制台.Node命令行环境或者是像 Webs

阿里云前端周刊 - 第 30 期

推荐 1. React 16 新特性尝鲜实战教程 https://juejin.im/post/59f26fe5f265da43252889d9 React 16 的发布除开源许可证和 Fiber 机制全面开启之外,还为我们提供了部分非常强大的新特性,本视频教程将通过实例带你探索这些新特性,从 Error Boundary 到 Text Only Component,再到 Portal,共 6 小节,19 分钟,每个小节实例讲解一个新特性,在讲解新特性基本用法的同时会介绍新特性的最佳实践.学完本

阿里云前端周刊 - 第 23 期

推荐 1. 组件化设计思维 – 从规范到工具的构建与探索 http://www.zcool.com.cn/article/ZNTQ4NjE2.html 阿里巴巴在中台战略的背景下,设计提效又再次推动着设计思维的变革.设计师们不仅仅需要出色地完成业务需求的设计,同时还需要思考设计的价值,也就是经常提到的最佳方案性价比.我们需要在设计的个性化表达和资源投入之间找到最佳的平衡点,在关注出色视觉表现的基础上,逐渐加强对项目协同及体验价值的关注,逐步形成新的设计思维模式. 2. 如何使用 Issue 管理

阿里云前端周刊 - 第 31 期

推荐 1. 利用 Dawn 工程化工具实践 MobX 数据流管理方案 https://zhuanlan.zhihu.com/p/30554301 项目在最初应用 MobX 时,对较为复杂的多人协作项目的数据流管理方案没有一个优雅的解决方案,通过对MobX官方文档中针对大型可维护项目最佳实践的学习和应用,把自己的理解抽象出一个简单的todoMVC应用,供大家交流和讨论. 2. FreeWheel 前后端分离改造实践 http://www.infoq.com/cn/articles/freewhee

阿里云前端周刊 - 第 29 期

推荐 1. RESTful API 设计最佳实践 https://blog.philipphauer.de/restful-api-design-best-practices/ 项目资源的URL应该如何设计?用名词复数还是用名词单数?一个资源需要多少个URL?用哪种HTTP方法来创建一个新的资源?可选参数应该放在哪里?那些不涉及资源操作的URL呢?实现分页和版本控制的最好方法是什么?因为有太多的疑问,设计RESTful API变得很棘手.在这篇文章中,我们来看一下RESTful API设计,并给

阿里云前端周刊 - 第 27 期

推荐 1. Facebook 宣布重置 React,Jest,Flow 与 Immutable.js 的开源证书 https://code.facebook.com/posts/300798627056246 自宣布保留 React 等开源项目附带专利要求的开源协议之后,社区反馈了极大的不满与怀疑,包括 WordPress 在内的许多开源项目也宣布即将切换技术栈:鉴于此,Facebook 宣布将在下周统一地重置 React,Jest,Flow,Immutable.js 为 MIT 开源协议.亡羊