diff --git a/README.md b/README.md index 0e12a3c..05376ac 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,10 @@ ### 2020 +- [第 31 期 1124](./articles/31.md) + +- [第 30 期 1117](./articles/30.md) + - [第 29 期 1110](./articles/29.md) - [第 28 期 1103](./articles/28.md) diff --git a/articles/29.md b/articles/29.md index 602ce68..8e33aa2 100644 --- a/articles/29.md +++ b/articles/29.md @@ -1,63 +1,55 @@ -![HEADER](http://img20.360buyimg.com/ling/jfs/t1/124524/40/16981/206493/5f9ffeeaEf0f86300/f26d2f46e852ee3a.jpg) +![HEADER](http://img10.360buyimg.com/ling/jfs/t1/123905/10/17859/206819/5faa05b7E5e68db40/d8379aa357e57eae.jpg) -# 蒲公英 · JELLY技术周刊 Vol.28 +# 蒲公英 · JELLY技术周刊 Vol.29 ## 登高远眺 > 天高地迥，觉宇宙之无穷 -### 基础技术 - -#### [在项目中实践 CLS 性能指标优化](http://3.cn/1-00uamwG) - -你是否试过在开始阅读一篇有趣的新闻文章時，因为所有文字突然向下移动而令你要重新找回刚才看到的部分？Chorme 83 中新增了 Cumulative Layout Shift（CLS) 指标来衡量页面「累计版面配置转移」的数值，本文将在项目中实践 CLS 指标的优化。 - ### 前端框架 -#### [Next.js 10 正式发布：带来诸多新特性](http://3.cn/100-ua4Yc) +#### [解析 JSX 的全新机制](http://3.cn/1-00vxL95) -10月27号 Next.js conf 大会上发布了全新的版本-Next.js 10，本次发布的特性主要聚焦于开发者体验的提升和用户体验的提升，还包含了诸多亮点：内置图片组件`Image Component : next/image`，自动进行图片优化；国际化路由`Internationalized Routing`，多语言支持，自动语言检测等，一起来快速了解下吧~ +React 17 中引入了新的 JSX 语法转换机制，好处除了书写 JSX 时不再需要提前引入 `React` 对象外，还做了一些性能优化和概念简化的工作。如 `key` 独立于其它 `props` 而单独传递，不建议在函数式组件中使用 `defaultProps` 等。文章介绍了相关背景和大致的改动内容，以及升级与兼容的方法。关于此改动的动机和实现细节，可以浏览此 [RFC](https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#detailed-design)。 -### 工程化 +### 设计哲学 -#### [腾讯 Code Review 规范](http://3.cn/10-0ualFs) +#### [前端智能化在阿里的那些事儿](http://3.cn/100vx-LTo) -代码，是设计理念落地的地方，是技术的呈现和根本。同学们可以在 review 过程中做到落地沟通，不再是空对空的讨论，可以在实际问题中产生思考的碰撞，互相学习，大家都掌握团队里积累出来最好的实践方式！ +前端智能化方向的提出是为了给前端技术带来变革，借助 AI 和机器学习的能力拓展前端，那在推动这个目标的过程中，遇到哪些问题呢？阿里就前端智能化方向给出了 2020年的年中总结及思考。 ### 图形编程 -#### [使用贝塞尔样条算法生成穿过预定义点的平滑曲线](http://3.cn/100-uan0m) +#### [一个优质的交互体验网站“雷达”](http://3.cn/10-0vxMmf) -在设计师作图时, 通常会先定义若干点, 然后生成一条穿过这些点的平滑曲线, 再进行细节刻画。这种根据预定义点生成平滑曲线的算法叫做贝塞尔样条算法, 它还应用在很多的场景, 比如数据可视化中的曲线图、数值分析中曲线拟合和手绘软件中画笔的线条等。 +这个网站会随机跳转到一些基于 CSS3、Canvas 和 WebGL 技术实现的、具有令人赞叹的界面呈现和交互体验的优秀网站，工作忙碌之余，不妨来体验下 Web 渲染技术的强大能力～ -### 服务端开发 - -#### [TiDB一款同时支持在线事务处理与在线分析处理的融合型分布式数据库产品](http://3.cn/100uamb-H) +### 人工智能 -TiDB 是 PingCAP 公司自主设计、研发的开源分布式关系型数据库，是一款同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP）的融合型分布式数据库产品，具备水平扩容或者缩容、金融级高可用、实时 HTAP、云原生的分布式数据库、兼容 MySQL 5.7 协议和 MySQL 生态等重要特性。目标是为用户提供一站式 OLTP (Online Transactional Processing)、OLAP (Online Analytical Processing)、HTAP 解决方案。TiDB 适合高可用、强一致要求较高、数据规模较大等各种应用场景 +#### [AI 专家知识图谱](http://3.cn/100vx-LTq) -### 人工智能 +人工智能是什么？其中又有哪些细分模块？在这里你可以找到所有和人工智能相关的知识点，每个知识点所罗列的内容还会连接到相对应的资料上，如维基百科等，每当人工智能领域有新的研究出现时，相应的模块也会更新，希望能给对人工智有兴趣的同学一个方向，也给有一定积累的同学查漏补缺时提供一些帮助。 -#### [GPT-3 袭来，前端又要失业？谈谈如何实现智能切图](http://3.cn/10-0uambI) +#### [机器学习在静态代码分析中的应用](http://3.cn/100v-xL96) -曾经，智能切图项目 [pix2code](https://github.com/tonybeltramelli/pix2code) 横空出世，它支持导入设计稿直接生成代码，惊艳了整个前端届，就在大家惊呼前端要失业的时候，这个项目却完美演绎了出道即巅峰，从此再无更新，渐渐被人遗忘。最近 GTP-3 再一次挑战前端，似乎前端这个领域总是充满危机感。本文由百度 FEX 负责人吴多益撰写，他用强悍的学习能力告诉我们，前端er 无需焦虑，任何新技术的出现都应该成为一个合格工程师手中的利剑，学习它，掌握它，然后用它惊艳所有人。So,keep learning,keep growing! +现今，机器学习已经被深度应用在生活中各个领域，本文提出了一个有趣的观点：机器学习能否帮助软件开发者挖掘程序中的 Bug？答案是肯定的。作者首先介绍了行业内已知的基于机器学习的静态分析器，如 DeepCode、Infer（来自 Facebook）、SapFix、Embold、CodeGuru（来自 Amazon）等等。然后，作者以实现一个使用机器学习技术寻找代码缺陷的代码分析器为例，来说明机器学习在代码分析领域里的困难和局限性。通读全文，最大的收益是作者在结合机器学习技术与应用场景的分析思路，有利于丰富我们在 ML 技术上的想象空间。 ### 工具推介 -#### [Framer Motion：让动画创建更加简单](http://3.cn/-100uan0l) +#### [AntV：可视化数据解决方案](http://3.cn/100vxM-6E) -`framer-motion`是适用于`react`的动效库，通过将动作添加到HTML和SVG元素前面来创建动画组件，无需成为CSS专家即可创建精美的动画。本文介绍了其基本的使用方式。 +AntV是蚂蚁金服数据可视化解决方案，其中最常被提及的G2是基于图形出发的可视化引擎，采用The grammar Of Graphics开发理念，以数据为驱动，支持高交互的方案。最新的4.0版本使用TS重写，相较于容易上手的eCharts（底层依赖轻量级的矢量图形库 ZRender），开发文档不够完善，因此对于数据可视化小白同学门槛较高，但在拓展性、创造性拥有更大优势。目前AntV还有系列产品包括：G6（专注于关系数据的可视化引擎，支持交互、分析、动画等等功能）、F2（专注于移动端的解决方案，支持H5）、L7（专注于地理空间数据的解决方案）。其扩展产品有G2Plot、Graphin、ChartCube。 ## 沧海拾遗 > 沧海拾遗，积跬步以至千里 -#### [随机算法: 2D 圆形分布](http://3.cn/100ualF-t) +#### [机器学习 30 分钟入门指北](http://3.cn/100v-xMmg) -前端有什么算法？前端工程师不需要懂算法？或许很多人都有类似这样的误区，觉得前端开发过程中需要用到算法的场景很少，而这篇文章恰恰就写到了随机算法在前端场景下的应用方式。 +前端智能化是未来的大方向，想要紧跟时代快速入门机器学习么，或许你还是觉得工作中没有合适的项目实践，或者觉得因为学历、专业等等因素没有机会找一份机器学习的工作，那么快来跟着马克老师一起来看看吧，30分钟带你了解机器学习的基础知识，打破对于 AI 的刻板印象，同时也一同看看机器学习在凹凸实验室的一些实践和落地项目。 -#### [平面下的物理引擎——Matter.js 的试玩报告](http://3.cn/-100ualqw) +#### [动效其实很简单](http://3.cn/100vx-LTp) -模拟一个接近真实的环境，那么我们很多时候需要去实现一整套系统的算法去描述所有的物理规则，或者我们可以使用某一个引擎来帮助我们完成这些，而在 Web 端的平面世界中就有 Matter.js 这样一个刚体物理学引擎可以实现我们绝大多数的需求。 +前端智能化归根结底还是希望将工程师从“无意义的底层劳动“中解放出来，但是这并不是唯一的道路，在很多开发的领域中都有很多方案可以大幅降低研发的成本。比方说在开发动效的过程中，我们也常常会想，设计师已经将整个动效的逻辑整理出来了，调试却依旧费时费力，为什么不能直接复用设计师的动效逻辑呢？机器取参和人工取参，你更喜欢哪一种？ ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) \ No newline at end of file diff --git a/articles/30.md b/articles/30.md new file mode 100644 index 0000000..38239da --- /dev/null +++ b/articles/30.md @@ -0,0 +1,55 @@ +![HEADER](http://img30.360buyimg.com/ling/jfs/t1/148970/9/14586/206933/5fb24ddeE92fc0196/804d76b790a5cc28.jpg) + +# 蒲公英 · JELLY技术周刊 Vol.30 + +## 登高远眺 + +> 天高地迥，觉宇宙之无穷 + +### 基础技术 + +#### [打怪升级之路——我的富文本编辑器](http://3.cn/100xx-fcF) + +造轮子是程序猿前进的基本动力，文本编辑器更是很多程序猿都尝试挑战过的关卡，本文以作者视角阐述了富文本编辑器的演化历程，从 UEditor、CKEditor 开始，从技术角度揭示其中内涵，并将其分为了 3 个阶段，如果你正在富文本编辑器的坑内，非常推荐深入了解一下。 + +### 前端框架 + +#### [Vue 3.0 Ref-sugar 提案真的是自寻死路吗？](http://3.cn/100-xxfVR) + +最近 Vue 3.0 的 ref-sugar 提案在社区引起了轩然大波，很多人都在对这个提案进行吐槽，指责 Vue 3.0 成了 JS 方言制造者，但是一个标杆型框架的 RFC 的提出，必然是经过作者深思熟虑后的产物，我们需要深入理解 RFC 之后才能更好地对提案发表意见，接下来就跟随 react-lite 的作者工业聚，冷静而审慎地对 ref-sugar 提案进行深度剖析。 + +#### [深入理解 Vue3 Reactivity API](http://3.cn/100xxg-oy) + +乍一看目录和开篇，会让人产生又是一篇 Vue3 响应式 API 的用法介绍。但继续深入，会发现文章环环相扣。如通过 effect 引出 watchEffect 的使用场景和实现思路、由 track、trigger 引出 ref 的实现。令人印象深刻的是 toRefs、自动脱 ref 等比较难以理解的用法，其实是出自我们平时使用拓展运算符时不经意间引出的问题场景。阅读本文，能让我们能对 Vue3 响应式的 API 用法、使用场景和部分实现思路产生一定的了解。 + +### 工程化 + +#### [异常监控系统在前端的落地实践](http://3.cn/-100xxgox) + +文中阐述了前端异常监控的目的，以及市面上已有的脚本/解决方案，并从方案架构、SDK 组成、API 设计、日志上报策略以及可视化几个方面进行了详细的思路说明，有助于大家深入了解前端异常监控的整体组成。 + +### 设计哲学 + +#### [中文技术文档 の 风格指南](http://3.cn/100x-xgEe) + +一个好的项目离不开好的文档，一篇好的技术文档离不开好的规范。这个指南为开发者提供了一个中文技术文档的写作规范以及建议，提高中文文档的可读性和专业性。热爱写文章同学的福音。 + +### 工具推介 + +#### [基于 TypeScript 编写的 JavaScript 解释器](http://3.cn/10-0xxeZ3) + +`eval5`是基于`TypeScript`编写的`JavaScript 解释器`，支持完整 ES5 语法解析，支持浏览器、node.js、小程序等 JavaScript 运行环境。在各类小程序盛行的今天，用它突破小程序对`eval/Function`的禁用限制，让你的应用具备动态执行代码及远程脚本的能力。 + +## 沧海拾遗 + +> 沧海拾遗，积跬步以至千里 + +#### [Vue 3 的小程序开发体验实录](http://3.cn/100xx-fHI) + +没错，这就是一篇软广，或许在不久前你已经在我们的公众号或者其他的渠道上看过，但是不妨碍在这里再看一次～如果你还没有体验过使用`Taro`开发小程序，又或者没有体验过`Vue 3`开发小程序，此时体验一把正是再好不过的时机了。 + +#### [打怪升级之路——我的视频编辑器](http://3.cn/10-0xxfrc) + +这篇文章，其实和本期的第一篇一点关系都没有 ( /) V (\ ) 嘻嘻～～作为凹凸实验室优秀项目，羚珑的视频编辑器是在静态类设计之后的另一赛道的尝试，通过相对很简单的方式去使用高品质的动画和效果就是其主要的目的之一。如果当你需要去完成一个视频编辑器时，你会采用怎样的设计思路呢？欢迎在评论区留言哦！ + +![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) \ No newline at end of file diff --git a/articles/31.md b/articles/31.md new file mode 100644 index 0000000..179163e --- /dev/null +++ b/articles/31.md @@ -0,0 +1,53 @@ +![HEADER](http://img30.360buyimg.com/ling/jfs/t1/140181/32/15583/206440/5fbc76c5E5d1a6c1b/d050137e0de5eac5.jpg) + +# 蒲公英 · JELLY技术周刊 Vol.31 + +## 登高远眺 + +> 天高地迥，觉宇宙之无穷 + +### 基础技术 + +#### [原生瀑布流即将来袭？！FireFox 试验原生瀑布流布局](http://3.cn/100yGvX-W) + +作为一名前端，是否曾为需求中的瀑布流布局想破脑阔？就算用上 JS 第三方库，却对效果和性能不满意？CSS Grid Layout 规范 Level 3 中，为 `Grid-template-columns` 和 `Grid-template-rows` 属性新增了 `masonry` 属性值，可以实现原生的瀑布流布局。目前 Mozilla 正在 FireFox 中试验这个新功能，感兴趣的开发者可以尝一尝鲜。 + +#### [JAMStack，下一代Web建站技术栈？](http://3.cn/100yGvt-H) + +JAMStack（JAM 代表 JavaScript，API 和 Markup）是一种使用 Static Site Generators (SSG) 技术、不依赖 Web Server 的前端架构，这样网站内容可以被托管在 CDN 上，加载速度得到最大程度地优化，安全性也得到保障。 + +### 人工智能 + +#### [Rigging.js: 让 3D 角色动起来的 react.js 开源应用](http://3.cn/100y-GvKG) + +Rigging.js 是一个开源的 react.js 应用，它获取由 TensorFlow.js 模型生成的面部网格关键点，然后将人物在镜头前所做的动作映射到 3D 模型中。 + +### 设计哲学 + +#### [什么是低代码(Low-Code)](http://3.cn/10-0yGvtG) + +近一年，低代码开始频繁地被提起，作为解放 IT 生产力的新概念新技术，还有许多人对其不甚了解。本文从概念定义、市场需求、质疑及可能引发的问题等方面进行了详细分析，便于各位从全局对低代码进行了解与思考，找准自己未来的位置。 + +#### [如何利用AOP+IOC思想解构前端项目开发](http://3.cn/100-yGuuK) + +本文详细介绍 AOP 和 IOC 两种编程设计思想，并结合具体实例深度剖析具体场景下两种编程思想的使用，以解决具体问题，对提升编程架构能力有极大的帮助。 + +### 工具推介 + +#### [比传统手段快 10 倍？！使用 QA Wolf 编写 UI 测试](http://3.cn/100yG-uIX) + +在很多时候，我们不仅需要编写高质量，简介并且可维护的代码，还需要保证程序运行结果与需求的预期完全一致。通常这需要通过单元测试来确保程序运行的结果正确性，这在后端接口开发中非常好办，但这在 UI 开发上就不太好实践。主要是因为 UI 开发通常需要模拟用户的一系列操作（点击按钮，滚动鼠标等）， 并且开始正式的测试逻辑前，还需要编写大量获取元素之类的模板代码。QA Wolf 正是为了解决这些问题而来。 + +## 沧海拾遗 + +> 沧海拾遗，积跬步以至千里 + +#### [Web 全景——沉浸式看房体验](http://3.cn/100yG-vtI) + +未来为何？很多时候看不清也摸不透，只能昂首望着星空一声轻叹，但是面对一些我们熟知的领域的时候，我们却又总能轻易的看到一些可能性，WebVR 就是其中之一，随着技术不断的发展迭代，它在我们生活中的感知也越来越强，你曾经在什么时候会意识到，这就是以后的潮流呢？ + +#### [WebVR 入门攻略报告](http://3.cn/1-00yGuuL) + +下一代交互的形式会是什么，在它真正到来之前我们永远也未可知究竟是何。但是 WebVR 确实开始通过我们开发的项目对着生活不断的渗透，这个时候上手相关的框架或许是个不错的时机，你还能赶上这一班浪潮否？ + +![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) \ No newline at end of file