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

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: ## 阿里云前端周刊 - 第 1 期 ### 一、推荐、 ##### 1. 如何撰写 Git 提交信息 https://chris.beams.io/posts/git-commit/ 重建一段代码的上下文是非常费时费力的,这是无法完全避免的。所以我们应该努力尽可能的减少它。提交信息可以帮上这个忙,也正因为此,一个提交信息反应了一名开发者是不是个好的协作者。 ####

阿里云前端周刊 - 第 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

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

相关实践学习
部署Stable Diffusion玩转AI绘画(GPU云服务器)
本实验通过在ECS上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。
目录
相关文章
|
3月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
7月前
|
前端开发 JavaScript API
前端 JS 经典:阿里云文件上传思路
前端 JS 经典:阿里云文件上传思路
108 0
|
8月前
|
敏捷开发 缓存 前端开发
阿里云云效产品使用问题之流水线构建前端项目比较慢。该如何优化
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
8月前
|
前端开发 对象存储 数据安全/隐私保护
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
801 2
|
8月前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
9月前
|
存储 监控 前端开发
【专栏】阿里云ARMS前端监控的引入方法,以提升应用质量和稳定性
【4月更文挑战第29天】本文介绍了阿里云ARMS前端监控的引入方法,以提升应用质量和稳定性。该工具通过实时收集和分析用户行为、性能数据,提供错误监测和实时告警。步骤包括注册阿里云账号,创建前端监控项目,获取并嵌入监控代码到页面中,部署并运行,最后查看监控数据。案例和经验分享强调了合理设置监控指标、与其他工具结合以及定期分析数据的重要性。注意保护用户隐私,正确管理监控代码,并解决可能出现的数据不准确和大量错误告警问题。
244 1
|
9月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
1409 1
|
机器学习/深度学习 XML 人工智能
|
前端开发 应用服务中间件 Linux
使用阿里云服务器部署前端项目
使用阿里云服务器部署前端项目,完成后可通过服务器域名访问网页
2169 0
使用阿里云服务器部署前端项目
|
监控 JavaScript 前端开发
如何引入阿里云ARMS前端监控?
如何引入阿里云ARMS前端监控?

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    智能编码在前端研发的创新应用
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    50
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    139
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    118
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75