├── .github └── ISSUE_TEMPLATE │ └── -----2021.md ├── .gitignore ├── README.md ├── articles ├── 01.md ├── 02.md ├── 03.md ├── 04.md ├── 05.md ├── 06.md ├── 07.md ├── 08.md ├── 09.md ├── 10.md ├── 11.md ├── 12.md ├── 13.md ├── 14.md ├── 15.md ├── 16.md ├── 17.md ├── 18.md ├── 19.md ├── 20.md ├── 21.md ├── 22.md ├── 23.md ├── 24.md ├── 25.md ├── 26.md ├── 27.md ├── 28.md ├── 29.md ├── 30.md ├── 31.md ├── 32.md ├── 33.md ├── 34.md ├── 35.md ├── 36.md ├── 37.md ├── 38.md ├── 39.md ├── 40.md ├── 41.md ├── 42.md ├── 43.md ├── 44.md ├── 45.md ├── 46.md ├── 47.md └── 48.md ├── config ├── dev.js ├── index.js └── prod.js ├── global.d.ts ├── package.json ├── project.config.json ├── src ├── app.scss ├── app.tsx ├── index.html └── pages │ └── index │ ├── index.scss │ └── index.tsx ├── tsconfig.json └── yarn.lock /.github/ISSUE_TEMPLATE/-----2021.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 推荐模版 2021 3 | about: 2021 版本蒲公英推荐模版 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | [标题](链接) 11 | 12 | **概要**： 13 | 14 | 15 | 16 | **推荐语**： 17 | 18 | 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | dist/ 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | # temp 23 | .temp/ 24 | .rn_temp/ 25 | deploy_versions/ 26 | 27 | npm-debug.log* 28 | yarn-debug.log* 29 | yarn-error.log* 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JELLY Tech Weekly 2 | 3 | > 沧海拾遗，积跬步以至千里 4 | 5 | ## 简介 6 | 7 | 蒲公英·JELLY技术周刊，由京东·[凹凸实验室](https://aotu.io)维护整理的技术周刊，从团队专注的研究技术方向出发，深入挖掘业界热点，聚焦技术动态。 8 | 9 | 技术周刊内容分类主要包括如下： 10 | 11 | - **基础技术**，前端领域的基础技术内容，如 ECMAScript、TypeScript、WebAssembly、Node 等等 12 | - **工程化**，工程化相关技术动态，如 Webpack、Parcel 等等 13 | - **跨端框架技术**，跨端与跨框架的技术动态，如小程序跨端解决方案动态等等 14 | - **图形编程**，动画、游戏、AR/VR 等技术动态 15 | - **服务端开发**，与前端紧密相关的服务端技术动态，如传统服务端开发、Severless 等等 16 | - **桌面开发**，PC 桌面跨平台软件开发技术，如 NW、Electron 等等 17 | - **人工智能**，AI 相关技术动态，如深度学习等等 18 | - **设计哲学**，关于工作、开发、设计的思考 19 | - **前端框架**，前端流行框架如 React、Vue、Angular 等的最新动态、技术分析、生态分享等等 20 | - **工具推介**，介绍业界有意思、好玩的工具 21 | 22 | ## 内容 23 | 24 | ### 2022 25 | 26 | - [第 48 期 0126](./articles/48.md) 27 | 28 | ### 2021 29 | 30 | - [第 47 期 1223](./articles/47.md) 31 | 32 | - [第 46 期 1123](./articles/46.md) 33 | 34 | - [第 45 期 1025](./articles/45.md) 35 | 36 | - [第 44 期 0923](./articles/44.md) 37 | 38 | - [第 43 期 0826](./articles/43.md) 39 | 40 | - [第 42 期 0727](./articles/42.md) 41 | 42 | - [第 41 期 0624](./articles/41.md) 43 | 44 | - [第 40 期 0525](./articles/40.md) 45 | 46 | - [第 39 期 0427](./articles/39.md) 47 | 48 | - [第 38 期 0330](./articles/38.md) 49 | 50 | - [第 37 期 0309](./articles/37.md) 51 | 52 | ### 2020 53 | 54 | - [第 36 期 1229](./articles/36.md) 55 | 56 | - [第 35 期 1222](./articles/35.md) 57 | 58 | - [第 34 期 1215](./articles/34.md) 59 | 60 | - [第 33 期 1208](./articles/33.md) 61 | 62 | - [第 32 期 1201](./articles/32.md) 63 | 64 | - [第 31 期 1124](./articles/31.md) 65 | 66 | - [第 30 期 1117](./articles/30.md) 67 | 68 | - [第 29 期 1110](./articles/29.md) 69 | 70 | - [第 28 期 1103](./articles/28.md) 71 | 72 | - [第 27 期 1027](./articles/27.md) 73 | 74 | - [第 26 期 1020](./articles/26.md) 75 | 76 | - [第 25 期 1013](./articles/25.md) 77 | 78 | - [第 24 期 0929](./articles/24.md) 79 | 80 | - [第 23 期 0922](./articles/23.md) 81 | 82 | - [第 22 期 0915](./articles/22.md) 83 | 84 | - [第 21 期 0908](./articles/21.md) 85 | 86 | - [第 20 期 0901](./articles/20.md) 87 | 88 | - [第 19 期 0825](./articles/19.md) 89 | 90 | - [第 18 期 0818](./articles/18.md) 91 | 92 | - [第 17 期 0811](./articles/17.md) 93 | 94 | - [第 16 期 0728](./articles/16.md) 95 | 96 | - [第 15 期 0720](./articles/15.md) 97 | 98 | - [第 14 期 0713](./articles/14.md) 99 | 100 | - [第 13 期 0706](./articles/13.md) 101 | 102 | - [第 12 期 0623](./articles/12.md) 103 | 104 | - [第 11 期 0616](./articles/11.md) 105 | 106 | - [第 10 期 0609](./articles/10.md) 107 | 108 | - [第 09 期 0602](./articles/09.md) 109 | 110 | - [第 08 期 0526](./articles/08.md) 111 | 112 | - [第 07 期 0519](./articles/07.md) 113 | 114 | - [第 06 期 0511](./articles/06.md) 115 | 116 | - [第 05 期 0506](./articles/05.md) 117 | 118 | - [第 04 期 0427](./articles/04.md) 119 | 120 | - [第 03 期 0420](./articles/03.md) 121 | 122 | - [第 02 期 0414](./articles/02.md) 123 | 124 | - [第 01 期 0407](./articles/01.md) 125 | 126 | ## 贡献指南 127 | 128 | - [周刊贡献指南](http://3.cn/12dbZQ-x) 129 | -------------------------------------------------------------------------------- /articles/01.md: -------------------------------------------------------------------------------- 1 | ![](https://img20.360buyimg.com/ling/jfs/t1/111379/22/1109/222796/5e946660Ee802273f/c7837170e83a34f1.jpg) 2 | 3 | # 蒲公英·JELLY技术周刊 Vol.01 4 | 5 | > 「蒲公英」期刊全新升级——JELLY技术周刊！深度挖掘业界热点动态，来自团队大咖的专业点评，带你深入了解团队研究的技术方向。 6 | 7 | ## 登高远眺 8 | 9 | > 天高地迥，觉宇宙之无穷 10 | 11 | ### 基础技术 12 | 13 | #### [JavaScript 平行化使用 Web Worker、SharedArrayBuffer、Atomics](http://3.cn/-10I8lhK) 14 | 15 | Web Worker 让网页具备了多线程运行的能力。但 Worker 之间是相互独立的，内存空间彼此独立。虽然可以通过 IPC 方式进行通信，但在载荷较大的情况下就不太现实。我们就需要用到共享内存 SharedArrayBuffer。这篇文章介绍了 Web Worker、SharedArrayBuffer 等概念，并教我们如何使用 Atomics 避免资源竞争。 16 | 17 | #### [ant-design-blazor](http://3.cn/10I-8QCt) 18 | 19 | Blazor 的 Ant Design 版本，想法很好，但目前还没到时候。WebAssembly 目前还没有操作 DOM 的接口，使用 WebAssembly 操作 UI 既没有性能优势也没有体积优势。Blazor 本身作为只支持 Web 的 UI 框架也略微受限，Qt 和 [iced](https://github.com/hecrj/iced) 都可以既使用 WebAssembly 开发 Web，同时生成接近原生性能的桌面端应用。 20 | 21 | ### 工程化 22 | 23 | #### [《模块化系列》snowpack，提高10倍打包速度](http://3.cn/10I-8VKZ) 24 | 25 | 前端领域出现过不少模块化规范，CommonJS、CMD、AMD、UMD 等等层出不穷。由于浏览器无法直接支持这些模块，我们还需要 Browserify、webpack 等工具进行打包。如今，一款新的工具出现了。它宣称能让开发者使用更少的工具，并获得 10 倍的速度提升。这就是 snowpack。 26 | 27 | #### [Webpack 5 Module Federation: A game-changer in JavaScript architecture](http://3.cn/10I8-TUF) 28 | 29 | Webpack 是现代前端开发中必不可少的基础工具，已经深入我们工作的方方面面。但是一直以来多个应用之间如何进行共享始终没有一个非常优雅的方式进行解决，我们尝试过公共代码发布到 NPM 等方式，到效果还是不尽如人意。在这篇文章中我们将了解到 Webpack 5 的新特性「模块联邦」，看看 Webpack 5 是如何帮我们优雅地解决这个问题的。 30 | 31 | ### 设计哲学 32 | 33 | #### [设计模式在外卖营销业务中的实践](http://3.cn/10I900-k) 34 | 35 | 使用设计模式能够帮助我们编写出可重用的代码，提高软件的可维护性。作者从营销业务出发，介绍了领域模型到代码工程之间的转化，从DDD引出设计模式，详细介绍了工厂方法模式、策略模式、责任链模式以及状态模式这四种模式在营销业务中的具体实现。 36 | 37 | ### 图形编程 38 | 39 | #### [A Primer on Bézier Curves](http://3.cn/1-0I95h1) 40 | 41 | 图形数字化中最常见的函数——贝塞尔曲线函数，所有接触过计算机图形绘制、动效开发的人一定都不陌生。这本电子书从44个方面对贝塞尔曲线绘制算法进行了详细的拆解，内容极其硬核，适合对数学与图形学有兴趣的开发同学仔细阅读。 42 | 43 | #### [从阿凡达到图灵奖，皮克斯元老的动画梦](http://3.cn/10I-99if) 44 | 45 | 计算机领域最高荣誉——图灵奖，2019年颁给了两位与计算机图形学发展息息相关的人，Patrick Hanrahan 和 Edwin Catmull。作为皮克斯的创始成员，二人在影视、CG 界带来的革命，即使是不知道他们名字的人，也一定看过他们在 3D 创新技术影响下产出的影视作品。大家可以通过这篇文章来了解好莱坞大片背后的这两个男人。 46 | 47 | ### 服务端开发 48 | 49 | #### [从 Java 到 TS，阿里妈妈的接口管理一把梭](http://3.cn/10I97-pJ) 50 | 51 | 阿里提出的一套接口自动化制定规则，通过 Rap （接口管理后台）来制定接口规范以及接口文档，然后使用自己封装的请求工具来生成请求函数和 TypeScript 定义，配合 vscode 强大的类型提示极大地提高了开发体验和开发效率，最重要的是不同开发端同学的都能很好地理解并运用，降低了接口沟通的成本。 52 | 53 | #### [When to Use What: REST, GraphQL, Webhooks & gRPC](http://3.cn/10I99s-V) 54 | 55 | REST，GraphQL，Webhooks，gRPC 四类接口设计方案各自应用的场景的比较，较为全面地分析了目前的几种接口设计方案的使用场景，在特定的使用场景下正确使用更好的接口设计方案对团队整体协作效率有着比较大的提升。 56 | 57 | ### 桌面开发 58 | 59 | #### [neutralinojs](http://3.cn/100aN7Z-N) 60 | 61 | 和 Electron 一样基于 Web 技术的桌面端跨平台解决方案，应用体积比 Electron 小近 100 倍，内存占用少 5 倍。但由于使用是操作系统内置的 WebView，且没有 Node.js 运行时，无法无缝接入 NPM 生态，操作系统控件的 API 也暂时没有，如果是小型应用可以考虑使用它开发。 62 | 63 | ### 人工智能 64 | 65 | #### [Dive into deep learning](http://3.cn/100a-N7fH) 66 | 67 | 该书是 《Dive Into Deep Learning》的中文版，基于 Apache MXNet 框架，全面介绍深度学习从模型构造到模型训练的方方面面，以及它们在计算机视觉和自然语言处理中的应用，还提供完整的学习代码和与训练数据。一书在手，Deep Learning 我有！ 68 | 69 | #### [Working with the Python Interactive window](http://3.cn/100aN-aeZ) 70 | 71 | 终于可以在 VS Code 中使用 jupyter 了。对前端童鞋， 机器学习爱好者，VS Code 重度用户来说实在是个再好不过的消息！各种插件用起来！ 72 | 73 | ## 沧海拾遗 74 | 75 | > 沧海拾遗，积跬步以至千里 76 | 77 | ### [MongoDB Schema 设计](https://aotu.io/notes/2019/12/04/6-Rules-of-Thumb-for-MongoDB-Schema-Design/?from=dandelion) 78 | 79 | ![前端也要懂一点 MongoDB Schema 设计](https://user-gold-cdn.xitu.io/2020/4/8/1715892c9eb6b8c6?w=900&h=383&f=png&s=520287) 80 | 81 | 当前技术分界线日益模糊，许多前端同学也免不了接触到 MongoDB 开发和 Schema 设计，本文翻译自 MongoDB 优质博客：6 Rules of Thumb for MongoDB Schema Design，为你提供全面的 MongoDB Schema 设计原则指导。[查看文章](https://aotu.io/notes/2019/12/04/6-Rules-of-Thumb-for-MongoDB-Schema-Design/?from=dandelion) 82 | 83 | ### [Mongoose Modified](https://aotu.io/notes/2019/10/28/modified-at/?from=dandelion) 84 | 85 | ![Mongoose-modified-at 时间自动记录插件介绍](https://user-gold-cdn.xitu.io/2020/4/8/1715892ccd81bda0?w=900&h=500&f=jpeg&s=186706) 86 | 87 | Mongoose-modified-at 是一款自动更新字段变化时间并记录到数据库中的 Mongoose 插件，类似 Mongoose 自带的 timestamps 功能。 [查看文章](https://aotu.io/notes/2019/10/28/modified-at/?from=dandelion) 88 | 89 | ![](https://img12.360buyimg.com/ling/jfs/t1/102344/12/17767/162369/5e8c6326Eb4f51f3e/22181919d04772a6.jpg) 90 | -------------------------------------------------------------------------------- /articles/02.md: -------------------------------------------------------------------------------- 1 | ![](https://img12.360buyimg.com/ling/jfs/t1/97809/34/18559/223591/5e946661E5820b2be/b9682e51c31ad218.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.02 4 | 5 | > 「蒲公英」期刊全新升级——JELLY技术周刊！深度挖掘业界热点动态，来自团队大咖的专业点评，带你深入了解团队研究的技术方向。 6 | 7 | ## 登高远眺 8 | 9 | > 天高地迥，觉宇宙之无穷 10 | 11 | ### 基础技术 12 | 13 | #### [如何处理浏览器的断网情况？](http://3.cn/1-0Yoshx) 14 | 15 | “断网”是生活中经常发生的一种普遍情况，好的断网处理会让用户感到舒适，如网游断网后的重连，确保了游戏的继续进行；而坏的断网处理会让用户的体验大幅度地下降。身为重度依赖网络请求的前端，要如何正确且恰当地处理断网情况呢？让我们跟着文章的作者一探究竟。 [查看文章](http://3.cn/1-0Yoshx) 16 | 17 | #### [Node.js 是如何和 libuv 以及 v8 一起合作的？](http://3.cn/10YoC-mR) 18 | 19 | 深入 Nodejs 底层探究核心模块 libuv 与 v8 ，分析 Nodejs 的启动过程、各个模块加载原理以及 js 代码调用 C++ 函数的原理，本篇文章从源码层面带我们深入 Nodejs 一探究竟。 [查看文章](http://3.cn/10YoC-mR) 20 | 21 | ### 前端框架 22 | 23 | #### [SWR：最具潜力的 React Hooks 数据请求库](http://3.cn/-10YoC2X) 24 | 25 | 常见的数据请求库有 fetch、axios 等。如果你碰巧是一名 React 用户，现在你有了一种新选择。作为开源仅 3 天就获得 2.5K Star 的项目，Next.js 团队的新作品 SWR 提供了更多有想法、有脑洞的功能，比如导航切换时优先渲染缓存数据，再进行对比更新，数据在 focus 时更新，轮询检查更新，分页按需更新等等。这篇文章对 SWR 的用法进行了详细的介绍。 [查看文章](http://3.cn/-10YoC2X) 26 | 27 | #### [15 个在 Bit.dev 中构建组件库的原因](http://3.cn/10YoH-CB) 28 | 29 | Bit.dev 是一个非常优秀的共享、发现和协作组件的社区，支持 React、Vue、Angular、Nodejs 等框架，可以有效提升项目开发效率和代码复用度，且与 Bit （组件隔离和发布的开源工具）完美配合。本文阐述了使用 bit.dev 构建组件库的 15 个理由，相信会有让你心动的点。 [查看文章](http://3.cn/10YoH-CB) 30 | 31 | ### 设计哲学 32 | 33 | #### [Ant Design 开源项目经验分享，你想知道的都在这儿了](http://3.cn/-10YoKxQ) 34 | 35 | 来自前端界顶级开源项目 Ant Design 灵魂人物偏右的干货分享，教你如何打造一个业界顶尖的开源项目，从如何撰写一个专业的 Readme， 到项目 badges 的选择，再到如何进行全方位的测试覆盖、标准的 CI 流程与规范的 issue 管理等等，事无巨细，面面俱到，将一个开源项目的完整的生命周期与必备的专业要素一一铺陈在读者面前，让人在收货满满地同时也不禁感叹做开源之不易。 [查看文章](http://3.cn/-10YoKxQ) 36 | 37 | ### 跨端框架技术 38 | 39 | #### [前端五大跨平台技术](http://3.cn/10YoP-Cr) 40 | 41 | 作者洋洋洒洒 5000 字，结合自身的实践经验，为我们介绍了为什么需要跨平台技术、跨平台技术的主要分类和相关技术如 Cordova、React Native、Flutter 等、以及各技术的基本原理和优缺点。让读者能对跨平台技术的总体脉络有了基本的认识。 [查看文章](http://3.cn/10YoP-Cr) 42 | 43 | #### [你想知道的 Kbone 适配](http://3.cn/10-YoPuV) 44 | 45 | 微信官方推出的小程序框架 Kbone 推出已有一段时间。它通过实现一个适配器，在适配层里模拟出浏览器的环境，从而可以让 web 端代码直接运行在小程序端。文章介绍了 Kbone 适配器兼容浏览器环境时常遇的问题及解决办法，其中提到的 Kbone-ui 值得持续关注。 [查看文章](http://3.cn/10-YoPuV) 46 | 47 | ### 图形编程 48 | 49 | #### [什么是计算机图形学](http://3.cn/10YoT-0R) 50 | 51 | 计算机图形学是一个庞大的学科，且与计算机学、数学、物理学等等盘根错节，本文对它的产生、发展以及应用进行了全面系统的概述。虽然面向的读者是正在选择研究生方向的本科生 ，且撰写的时间较早，不过依旧十分适合想对计算机图形学进行宏观了解的同学阅读，便于建立对应的知识框架。 [查看文章](http://3.cn/10YoT-0R) 52 | 53 | ### 人工智能 54 | 55 | #### [COVID-19 中的数据科学和人工智能课程](http://3.cn/10-YoURY) 56 | 57 | 冠状病毒全球肆虐，全球的研究和开发人员正在尽最大努力遏制和预防COVID-19。近日，斯坦福大学新开放了一门特别的春季课程，该项目课程使用数据科学和机器学习中的工具对COVID-19进行调查和建模。课程将于4月10日开始并持续到6月，感兴趣的童鞋可以关注下。 [查看文章](http://3.cn/10-YoURY) 58 | 59 | #### [线性回归的数学推导及 NumPy 实现](http://3.cn/10Y-oV1o) 60 | 61 | 知其然更知其所以然。所有机器学习库都封装好了线性回归算法，但手推公式能更了解算法的局限性。该文章对线性回归进行了数学推导，并使用纯 numpy 实现了回归模型。 [查看文章](http://3.cn/10Y-oV1o) 62 | 63 | ## 沧海拾遗 64 | 65 | > 沧海拾遗，积跬步以至千里 66 | 67 | ### [GPU 加速是什么](https://aotu.io/notes/2017/04/11/GPU/?from=dandelion) 68 | 69 | ![GPU加速是什么](https://o2team.github.io/misc/beidan/gpu/fengmian.png) 70 | 71 | 众所周知，网页不仅应该被快速加载，同时还应该流畅运行，比如快速响应的交互，如丝般顺滑的动画…… [查看文章](https://aotu.io/notes/2017/04/11/GPU/?from=dandelion) 72 | 73 | ### [动画：从 AE 到 Web](https://aotu.io/notes/2018/03/06/ae2web/?from=dandelion) 74 | 75 | ![动画：从 AE 到 Web](https://misc.aotu.io/JChehe/2018-03-06-ae2web/cover.jpg) 76 | 77 | 『甩锅』是一项“富有竞技精神的运动项目”，让我们一起把『锅』扔给设计师吧！ [查看文章](https://aotu.io/notes/2018/03/06/ae2web/?from=dandelion) 78 | 79 | ![](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) 80 | -------------------------------------------------------------------------------- /articles/03.md: -------------------------------------------------------------------------------- 1 | ![](https://img10.360buyimg.com/ling/jfs/t1/94929/1/18535/223333/5e946661Ead3c31cf/7a210e51b34b685c.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.03 4 | 5 | > 「蒲公英」期刊全新升级——JELLY技术周刊！深度挖掘业界热点动态，来自团队大咖的专业点评，带你深入了解团队研究的技术方向。 6 | 7 | ## 登高远眺 8 | 9 | > 天高地迥，觉宇宙之无穷 10 | 11 | ### 基础技术 12 | 13 | #### [HTTP/2 还没普及，HTTP/3 就要来了？](http://3.cn/11-7Irff) 14 | 15 | 来自最大的 CDN 服务提供商之一 Cloudflare 团队的文章。尽管 HTTP/3 规范仍在起草中，Cloudflare 在2019年9月便宣布了对 HTTP/3 的支持，同时最新版的 Chrome Canary 也已支持 HTTP/3。HTTP/3 悄然来临，它究竟有哪些优势，请看这篇文章最新的评测报告。 16 | 17 | ### 前端框架 18 | 19 | #### [打造一个自己的 React 框架](http://3.cn/117IvE-M) 20 | 21 | 本文基于 React 16.8 并遵循真实源码的架构，手把手教学重写 React。为了降低阅读和学习难度，作者使用了丰富的 css 动画来呈现编码过程，视觉效果和干货值拉满。 22 | 23 | #### [Svelte: 一个让网站减肥的框架](http://3.cn/117IA-pj) 24 | 25 | 非常少见的来自于 [Wired](https://www.wired.com/) 对前端框架的报道。文章提及了 Svelte 作者前端轮子王 [Rich Harris](https://github.com/Rich-Harris) 的创作 Svelte 心路历程，并采访了若干个 svelte 用户，其中一位从 React 切换到 Svelte，他的应用体积由 190K 降低到了 9K。Svelte 在前端框架中的[总体用户满意度](https://2019.stateofjs.com/front-end-frameworks/svelte/)也达到了88%，排名第二，仅次于 React 的 89%。 26 | 27 | #### [Vue 3 有哪些新特性？](http://3.cn/117Iy-MT) 28 | 29 | 来自于 Vue 核心团队成员的文章，解释了 Vue 3 在 Composition API、TypeScript 适配、性能优化、框架体积上做的各项优化，作者本人同时在 [Vue.js Amsterdam 2020](https://www.youtube.com/watch?v=eQpVcZa8dVQ) 做了相关分享。 Vue 3 离我们比想象的近，在 [2020年 Q2](https://github.com/vuejs/vue/projects/6) 就会正式发布。 30 | 31 | ### 图形编程 32 | 33 | #### [工具推荐：dat.guiVR](http://3.cn/-117IJ1S) 34 | 35 | dat.gui 的可视化配置思路为不少游戏、动效开发者解决了参数调试这一老大难题，而推出这款工具的团队没有将视野限制在二维平面上，于 2016 年推出了 dat.guiVR。顾名思义，dat.guiVR 解决的正是 VR 开发场景中的参数调试问题。这款基于 Three.js 的库可以将配置面板插入三维体系中，并随着 camera 的移动而变化，可以通过官网的示例直观地感受一下。dat.guiVR 可设置对鼠标事件、手持设备、眼动追踪设备的交互，方便开发者在不同终端进行调试。配置项类型包括可限制范围的数值、事件触发的按钮、映射值的选择框，dat.gui 所具备的配置面板可拖动、非 GUI 值变化监听的功能也延续了下来。 36 | 37 | ### 服务端开发 38 | 39 | #### [工具推荐：pdf-lib](http://3.cn/117I-Nvk) 40 | 41 | pdf-lib 是一个可以任何 JS 环境创建和修改 PDF 文档的工具，可以帮助你快速完成 PDF 合并、添加页码、打水印及切割 PDF 等，值得一试。 42 | 43 | #### [工具推荐：routing-controllers](http://3.cn/117-IRUb) 44 | 45 | Routing-Controllers 是一个 nodejs HTTP 服务器 REST 路由控制库，在 Express / Koa 中使用大量的装饰器创建结构化、声明式且组织精美的基于类的控制器。它的核心思想是面向切面编程，通过`装饰器`这个特性来实现路由控制、权限验证、错误处理等；配合 class-validator 实现高效的数据校验；配合 typedi 实现依赖注入。它不像 nestjs 把所有模块都帮你封装好了，它专注路由，更加轻量和高效。 46 | 47 | ### 人工智能 48 | 49 | #### [Tensorflow.js 海量图标，毫秒级识别！](http://3.cn/11-7IW0x) 50 | 51 | 相信每位前端都有过在海量图标库中寻找需要的图标的经历，从成百上千个图表中找出自己想要的样式，如果换成机器来做，是不是就能大大减少了筛选图标的工作量？本文通过使用 Tensorflow.js 以及深度学习技术，仅仅在前端，便完成了图标icon识别的功能，让我们来一起初探这前端智能工程化的冰山一角吧~ 52 | 53 | #### [开源动漫生成器](http://3.cn/117J-0vu) 54 | 55 | 想知道自己的老婆/爱豆，在宫崎骏的动漫里面是长什么样子的吗？只需要简单运行几行代码，这个项目就能帮你实现这个愿望！ 56 | 57 | #### [Tensorflow.js 更新计划](http://3.cn/11-7J4yS) 58 | 59 | 近日，TensorFlowJS 2.x 版本计划于本月更新，TF团队也分享了他们的更新计划，包括TFJS 2.0 和 TFJS 3.0 的版本计划，并且表示会更新相应的版本教程。希望 TFJS 的API 及部署能够更加的简洁易用，为面向生产环境的前端开发者带来更多的效率提升！ 60 | 61 | ## 沧海拾遗 62 | 63 | > 沧海拾遗，积跬步以至千里 64 | > 65 | > 看完今天的推荐文章，是不是还想了解更多 VR 相关的内容呢？这两篇 Web VR 文章或许可以给你带来更多收获～ 66 | 67 | ### [GPU A-Frame WebVR试玩报告](http://3.cn/117K7-Ky) 68 | 69 | 什么叫真？你怎样给真下定义，如果你说真就是你能感觉到的东西，你能闻到的气味，你能尝到的味道，那么这个真只是你大脑作出反应的电子信号。 —— 《黑客帝国》 70 | 71 | ### [浅谈 WebVR](http://3.cn/11-7Kd6V) 72 | 73 | VR（Virtual Reality）是利用电脑模拟产生一个三维空间的虚拟世界，提供用户关于视觉等感官的模拟，让用户感觉仿佛身历其境，可以及时、没有限制地观察三维空间内的事物。 74 | 75 | ![](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) 76 | -------------------------------------------------------------------------------- /articles/04.md: -------------------------------------------------------------------------------- 1 | ![](https://img12.360buyimg.com/ling/jfs/t1/103246/10/18486/223179/5e946664E97fed297/88dc0a9214f3c6e4.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.04 4 | 5 | > 「蒲公英」期刊全新升级——JELLY技术周刊！深度挖掘业界热点动态，来自团队大咖的专业点评，带你深入了解团队研究的技术方向。 6 | 7 | ## 登高远眺 8 | 9 | > 天高地迥，觉宇宙之无穷 10 | 11 | ### 基础技术 12 | 13 | #### [WebAssembly 入门](http://3.cn/100d-doDq) 14 | 15 | WebAssembly 是一种类汇编语言，相比 Javascript 有着更快的解析和执行速度，能帮助我们突破 Web 应用中的性能瓶颈。文章介绍了 WASM 的开发背景、发展愿景、关键概念还有主要用途，能让我们清晰地了解 WASM 技术的整体脉络，为拓展性能优化新的思路。 16 | 17 | #### [从代码到像素，现代浏览器如何把页面呈现给你？](http://3.cn/100ddo8-u) 18 | 19 | 谷歌出品的系列文章，用精美的图表和简洁的文字，从非常基础的硬件知识，浏览器的的架构到渲染的进程，深入浅出地介绍了现代浏览器是如何进行工作的。了解浏览器的工作过程，有助于我们编写合理的代码，找出或者避免页面中的性能瓶颈，带来更好的用户体验。 20 | 21 | ### 跨端框架技术 22 | 23 | #### [一个易迁移、兼容性高的 Flutter 富文本方案](http://3.cn/1-00ddpQY) 24 | 25 | 在Flutter的富文本中，不同的版本的实现方式是不一样的，因此我们需要找到一个兼容性高、易迁移的富文本方案，来方便我们把富文本的功能从低版本迁移到高版本的Flutter中，在本篇文章中，作者将通过分析高版本富文本的实现原理，并通过正则替换，以及对HTML Node Tree的分析来逐步实现迁移的目的。 26 | 27 | #### [百度小程序框架性能优化实践](http://3.cn/100ddqQ-G) 28 | 29 | 本文首先阐述了百度智能小程序整体的框架及演进，然后介绍了小程序框架自身的性能优化实践。最后结合百度小程序的底层原理，从开发者角度为我们罗列了一系列具体的优化方案。如业务骨架屏反而会影响展示速度等，相信大家阅读后能更好地提高小程序的性能。 30 | 31 | ### 设计哲学 32 | 33 | #### [一个好的组件应该是什么样的？](http://3.cn/1-00ddmVJ) 34 | 35 | 如今组件/组件库已经以各种形态存在于每一个前端团队中，但是一个好的组件/组件库不单单只是功能的输出，清晰的文档说明、友好的 Demo 演习以及便捷的索引能力也同等重要，作者用轻松的文字带领读者重新认识组件，讲述开发一个组件/组件库的各种最佳实践，相信能给正在搭建自己团队组件库的同学一些启发。 36 | 37 | ### 图形编程 38 | 39 | #### [算法推荐：位图转矢量图算法 Potrace](http://3.cn/11-hgNeD) 40 | 41 | Potrace 是一套用于将位图转换为矢量图形的算法，由于其具有高性能和输出质量高的优点被广泛应用于各种图形编辑软件中，典型的应用场景是从扫描的图像数据（例如公司或大学的徽标、手写的笔记等）生成 SVG或 PDF 文件。输出过程中，算法会对图像做平滑处理后再进行转化，保证图形的完整性与可读性。 42 | 43 | ### 人工智能 44 | 45 | #### [机器学习的诊断可视化平台](http://3.cn/100ddn-pQ) 46 | 47 | Yellowbrick 是一个图形化展示机器学习效果的平台。机器学习输入输出都是数据集，对于效果评估特别是多个参数对比的时候会非常不直观。而这个平台提供了多个常用算法、维度的辅助方法，能以图表的方式直观展现不同参数/算法效果间的差异。 48 | 49 | ### 工具推介 50 | 51 | #### [赛高！一个扫码就可以跨端传输文件的工具](http://3.cn/100ddp-QZ) 52 | 53 | 4 月 24 日，一个通过生成二维码实现电脑和手机之间互传文件的项目登上了 GitHub 热榜第一。扫描生成的二维码，电脑和手机上的文件就可通过 Wi-Fi 互传。简单来说，就是将 Web 服务器绑定到随机端口上的 Wi-Fi 网络接口地址，然后为其创建一个处理程序。Linux 系统和安卓系统互传文件也不在话下。 54 | 55 | ## 沧海拾遗 56 | 57 | > 沧海拾遗，积跬步以至千里 58 | > 59 | > 看完今天的推荐文章，让我们来回顾下关于调试的内容吧，希望这两篇调试的指北文章能让你有所收获。 60 | 61 | #### [Node 生产环境调试](http://3.cn/10-0ddnpR) 62 | 63 | 本文以问答的形式，介绍生产环境中该如何去调试 Node 应用。文章覆盖到了性能问题、崩溃问题、内存泄露的检查和解决手段，还不快来了解一下！ 64 | 65 | #### [移动端真机调试指南](http://3.cn/100ddo-8v) 66 | 67 | 随着移动设备的普及以及微信庞大的用户量，移动端的需求也随之爆发式增长，平时我们使用 Chrome 进行手机模拟页面开发，但模拟终究是模拟，不可避免的还是需要真机调试，本文会以图文并茂介绍了几种常用的移动端真机调试方案。 68 | 69 | ![](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/05.md: -------------------------------------------------------------------------------- 1 | ![](https://img13.360buyimg.com/ling/jfs/t1/110568/11/14394/223585/5ea7c45fE2f81ba3f/eadec5d7d4eedc0d.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.05 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [使用 JavaScript 框架的代价](http://3.cn/-100dMMGs) 12 | 13 | 作者从 JavaScript 下载时间、解析时间、执行时间、内存占用四个角度评测了 jQuery、Angular、React、Vue 四个框架，最终得出结论：「框架不值得」，应该选择原生 JavaScript 或选择超轻量级框架或在服务端渲染。此文可配合[蒲公英技术周刊第三期](http://3.cn/117IA-pj)的 Svelte 安利文一同复用。 14 | 15 | #### [Node.js 14 正式版发布](http://3.cn/1-00dMMtL) 16 | 17 | 作为下一个 LTS 版本的 Node.js 14 终于发布了。Node.js 把 V8 升级到了 V8(8.1) 版本，原生支持了热门语法 Optional Chaining 和 Nullish Coalescing，并且移除了使用 ESM Modules 时的警告。同时开启了实验性的 [AsyncStorage](https://nodejs.org/api/async_hooks.html#async_hooks_async_hooks) 支持和 [WebAssembly System Interface(WASI)](https://wasi.dev/) 支持。 18 | 19 | ### 前端框架 20 | 21 | #### [ali-react-table: 高性能 React 表格组件](http://3.cn/1-00dMMVZ) 22 | 23 | 在前端的开发中，表格一直都是最复杂的组件之一，由于要提供丰富的功能支持，许多的表格组件一开始并没有考虑到性能优化的问题，导致在表格数据量过大的情况下，表格会遇到严重的性能瓶颈问题。而文章中介绍的ali-react-table表格组件，作者在一开始开发时就考虑到了性能的问题，并通过虚拟滚动的方法解决了表格数据量较大时的性能问题，同时该表格组件没有绑定特定的React组件库，仅依赖了一些工具类库，配合 webpack/rollup 的 tree shaking 特性，引入 ali-react-table 所产生的额外 JS 体积非常有限，是一款高性能、高可定制性的 React 表格，方便上层进行封装和定制并接入到不同的系统和业务中。 24 | 25 | ### 桌面开发 26 | 27 | #### [用 Rust 构建一个快速的 Electron 应用](http://3.cn/100dM-LJ1) 28 | 29 | Electron 是当前相当流行的跨平台桌面应用构建框架。在褒奖之余，Electron 也有饱受诟病的地方，性能可能是被提及次数最多的一点。不同于常规的优化手段，Kevin J.Lynagh 使用 Rust 构建了核心功能的 node 模块，使 Finda 在性能上有着不俗的表现。这篇文章介绍了 Finda 软件是如何做到在 16ms 内完成每个用户交互的。 30 | 31 | ### 图形编程 32 | 33 | #### [实现动效太难了？试试 Material Design](http://3.cn/1-00dMNlS) 34 | 35 | 使用过谷歌产品的很难不注意到其 UI 交互上的流畅、舒适与统一，这源于谷歌有着一套完整的 UI 动效设计理论体系以及规范。设计团队基于迪士尼动画 12 原则的理论规范经过多年的探索与实践，演化出了一套灵感来源为“量子纸”（Quantum Paper）的动效体系——Material Design。基于这套动效体系，谷歌推出了对应的 Android、Flutter 版 Material 动效系统，方便开发进行 UI 动效的开发。文中还推荐了一款可视化调整动效的工具，由谷歌设计师操刀，本文包含了多篇扩展阅读文章，适合设计与开发更为全面地了解谷歌 UI 动效体系的概念。 36 | 37 | ### 人工智能 38 | 39 | #### [一图梳理吊打一切的 YOLOv4](http://3.cn/100dMLJ-2) 40 | 41 | 这几天最大的新闻就是YOLO v4的发布，YOLO是一个快速而高效的目标检测器，而 v4 的发布象征着他在该领域的地位是其他算法无法企及的。作者根据 YOLOv4 的论文，帮助我们梳理了v4 的整体结构和创新点，帮助我们更快地认识 YOLOv4 。 42 | 43 | #### [YOLOv4 Keras实现版](http://3.cn/100dM-KYM) 44 | 45 | YOLOv4 原版本是基于 Darknet 实现的，该仓库作者仅在 YOLOv4 发布的第二天就实现了其 keras 版本，造福万千 TF 党。 46 | 47 | ## 沧海拾遗 48 | 49 | > 沧海拾遗，积跬步以至千里 50 | > 51 | > 本期小助手还为大家带来了两篇关于 electron 的项目经验之作，如果你也对跨平台桌面开发感兴趣，会从中收获不少～ 52 | 53 | #### [feWorkflow - 桌面应用工程化](http://3.cn/100dMO-e8) 54 | 55 | 使用react, redux, immutable框架做ui开发，仍然基于运行gulpfile的方案，这样可以使每个使用自己团队的gulp工作流快速接入和自由调整。 56 | 57 | #### [性能优化: Electron 与 Vue 结合的 Excel 数据清洗工具](http://3.cn/10-0dMNIq) 58 | 59 | XCel 是一款基于用研组需求的 Excel 数据过滤工具，本文将分享 Electron、Vue 等相关涉及技术的基本知识和性能优化经验。这也许是Jc的2016年最后一篇文章，且看且不珍惜。 60 | 61 | ![](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/06.md: -------------------------------------------------------------------------------- 1 | ![](https://img13.360buyimg.com/ling/jfs/t1/114697/37/6275/223417/5eb91a74Ee9c270c6/553f3ff62eac11a5.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.06 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [Deno 1.0 即将发布，你需要知道的都在这里了](http://3.cn/100ec1n-e) 12 | 13 | Deno——来自 Node 之父 Ryan Dahl 的最新力作，在开源 2 年之际，终于将迎来 1.0 的正式版本。Deno 并不是 Node 的替代品，根据 Deno GitHub 官网上的介绍，Deno 是一款通用的 JavaScript/TypeScript 编程环境，它汇集了许多最出色的开源技术，并使用一个很小的可执行文件提供了全面的解决方案。如今的 Deno，基于 Rust，内置了 TypeScript 的支持，抛弃 npm 式的中心化包管理，兼容拥抱 Web API，相信会给开发者带来令人惊喜的开发体验。本文将为大家介绍 Deno 的各种杀手级功能，带领大家深入了解这一可能会成为下一个热点的技术。 14 | 15 | #### [Continuation 在 JS 中的应用](http://3.cn/100ec1-D2) 16 | 17 | continuation 是计算机程序控制状态的抽象表示。一个坊间更通俗的说法是：它代表程序的剩余部分。像 continue、break 这类控制流操作符一样，continuation 能够暴露给用户程序从而可以在恰当时机恢复执行，这种基本能力大大扩展了编程语言使用者的发挥空间，也为 excpetion handling、generators、coroutines、algebraic effects 等提供了坚实基础。这篇长文能帮助大家理解 continuation 一些设计背后的思路，拓展一点前端工程师的技术视野，了解到整个编程领域内的优秀实践。 18 | 19 | #### [100 行代码实现 Promises/A+ 规范](http://3.cn/100e-c1Sy) 20 | 21 | 单看标题这像是一片博人眼球随处可见的坏文章，但作者不仅仅从代码、规范、思路三个角度讨论了一个简单 Promise 的实现，更重要的是还深入地讨论了 JavaScript 异步方案的演进、 Generator 和 Async/Await 的区别。 22 | 23 | ### 图形编程 24 | 25 | #### [作品推荐：3 Dreams of Black](http://3.cn/11yHA-Ut) 26 | 27 | 这个基于 WebGL 的试验性 VR 影片融合了 2D 影像、绘图画面、3D 虚拟现实，配合明快的配乐，为大家展示了一段身临其境般的由城市到平原的旅程。在影片的不同阶段，鼠标交互有不同的效果，非常巧妙地将 web 技术与影片叙事结合到了一起。这个项目由第一批吃 WebGL 螃蟹的大拿联手开发，其中一位正是 Threejs 的作者。对应的技术相关页面（http://www.ro.me/tech/）附上了影片中出现的鼠标跟随动物的建模展示，同时还有8个 WebGL 的场景示例，展示了 WebGL 在 web 图形编程中的强大潜力。 28 | 29 | ### 人工智能 30 | 31 | #### [分类器大全评价](http://3.cn/100ec2-7M) 32 | 33 | 一大堆算法分类器无从下手，一篇好文替你分析。虽然是14年的文章，但列举了179 个分类器对 121 的数据集 (UCI 数据库) 进行分类预测。可以当文档用。 34 | 35 | ### 工具推介 36 | 37 | #### [GitHub：重磅发布四大新功能！](http://3.cn/100ec-1Sz) 38 | 39 | 2020 年 5 月 6 日，GitHub 在线上举办了 Satellite 2020。每年的 Satellite 是 GitHub 年度最大型的国际产品和社区活动，由于受新型冠状病毒肺炎疫情的影响，GitHub 今年将 Satellite 搬到线上。在 Satellite 2020 上，GitHub 一口气发布了四款新品：Codespaces、GitHub Discussions、Code scanning 和 secret scanning 以及 GitHub Private Instances。 40 | 41 | #### [FastOrSlow：一个新的网站测速工](http://3.cn/10-0ec1D3) 42 | 43 | FastOrSlow 是一个新型的网站测试，会从首次内容渲染、交互起始时间、阻塞时间、CPU 闲置时间等多个纬度给网站加载速度评分，并给出优化建议。除此之外还提供了全球数十个节点的数据，同时网站本身的 UI、图表、交互也做得非常棒。 44 | 45 | ## 沧海拾遗 46 | 47 | > 沧海拾遗，积跬步以至千里 48 | 49 | #### [漫漫编程路上必读的 7 本书](http://3.cn/1-00ebZvG) 50 | 51 | 读完 deno 的文章，你是否也会觉得前端更新太快，学不动了呢？快来回顾一下入行之初的 7 本必读书籍吧～ 52 | 这几本书对于提升程序员编程思想、软件工程理论大有裨益的通用读物，不分专业，不分语言，不分排名先后，希望在知识快速变革的浪潮之下，我们依旧可以初心不变。 53 | 54 | #### [直播回顾：程序媛的成长蜕变](http://3.cn/1-00ec0pr) 55 | 56 | 漂亮的小姐姐总是让人赏心悦目，技术实力不俗的小姐姐更是如此，这是一篇直播回顾文章，讲述了阿姣小姐姐一步一个脚印，从小白时期逐步成长为高级工程师的学习历程，探讨程序员如何提升自身的技术实力，妈妈再也不会担心我们跟不上技术迭代了！ 57 | 58 | ![](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/07.md: -------------------------------------------------------------------------------- 1 | ![](https://img11.360buyimg.com/ling/jfs/t1/118379/1/6338/222891/5eb91a75Ed5f4943d/8c4b53792f67f3fd.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.07 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [ES2020：所有你想要知道的都在这](http://3.cn/100eJ-MFL) 12 | 13 | 「学不动啦！」如果 ES2015 你还没学会的话，TC39 委员会可不会停下他们的脚步，ES 2020 已经正式定稿了：其中 BigInt、Optional Chaining、Dynamic Import()、Nullish Coalescing Operator 等特性相信很多同学在日常开发中已经用上了。如果你对以上名词都很陌生的话，那要准备好看到一堆新符号一脸懵逼的表情包了。 14 | 15 | #### [Deno 1.0 正式发布](http://3.cn/100e-JNoS) 16 | 17 | Deno 1.0 在 5.13 日如期发布了！2 年前 Node 之父 Ryan Dahl 发表了一个演说《十件关于 NodeJS 让他感到遗憾的事》，演说的同时他介绍了 Deno，一个全新的、安全优先且抛弃 npm 的 JavaScript 运行时。如今，在吃瓜群众大呼“学不动了”之时，Deno “无情地” 发布了 1.0 版本。[JELLY 技术周刊的上一篇文章](http://3.cn/100ec1n-e)已经大致介绍了 Deno 的重磅特性，而通过这篇官方文章，你将对 Deno 有更加深入的了解。 18 | 19 | ### 前端框架 20 | 21 | #### [Crank.js - 使用函数、Promise、Generator开发JSX项目](http://3.cn/100eJM-TH) 22 | 23 | Brainkim 为我们带来了使用 JSX 进行开发的新思路，Crank.js。不同于寻常观点，Brainkim 认为，现代 JavaScript 已经包含了 Promise、async/await 等让异步代码写起来更像同步代码的能力，那么组件也应当支持这种模式。基于上面的观点，Crank.js 的一大特色便是 Async Component。目前这个项目已经在 [Github](https://github.com/bikeshaving/crank) 上开源。在上手之前，你也可以在 [知乎](https://www.zhihu.com/question/388457689) 上参与对于这个框架的讨论。 24 | 25 | ### 图形编程 26 | 27 | #### [2D 插画实时生成动画 -- 中国程序媛出品](http://3.cn/100eJMd-5) 28 | 29 | 「猜画小歌」项目发起人，谷歌创意技术专家基于 TensorFlow.js 的 PoseNet 和 FaceMesh 模型，识别摄像头中的人脸与肢体，结合骨骼动画，将 2D 矢量图进行实时动画处理，实现输入静态 SVG、输出人体跟随动画的项目——Pose Animator。文中附有效果动图，结尾附带了项目源码地址与 demo 地址，快去试试吧！ 30 | 31 | ### 人工智能 32 | 33 | #### [深度增强学习量化交易](http://3.cn/100e-JMTI) 34 | 35 | 一个使用 DQN 尝试对股票趋势进行预测的项目。阅读项目的 README 能够了解在具体场景下算法选择和落地流程是如何思考的，项目源码的注释也非常清晰值得一读。 36 | 37 | ### 工具推介 38 | 39 | #### [MDX：在 Markdown 中使用 JSX](http://3.cn/100eJO8-5) 40 | 41 | MDX 是一种可以在普通 Markdown 文件中使用 JSX 语法的解决方案。在一个复杂的文档中，条件性地渲染或复用已有模块是一种常见的需求，而 MDX 可以直接使用 JSX 甚至定义 React / Vue 组件，很好地解决了复杂文档系统的需求。更棒的是，最终编译出来的文件是不含运行时代码的。 42 | 43 | ## 沧海拾遗 44 | 45 | > 沧海拾遗，积跬步以至千里 46 | 47 | #### [大规格文件上传的体验优化](http://3.cn/100eJN-9K) 48 | 49 | 看完最新的技术热点，是不是肥肠激动呢？但是我们也千万不要忘记基础才是我们立足的根本，快来和我们一起回顾一下，那些年业务中的基础优化细节吧！超大规格文件一定是其中难以规避的一环，快来看看吧～【内附样例】 50 | 51 | #### [某超长文档 の 探索之路](http://3.cn/1-00eJOzp) 52 | 53 | 来自凹凸实验室的工程🦁️如是叫嚣到：“加量不加价~ 比字数谁都赢不了我!”，一定要做全办公室最嚣张的崽！！！作为凹凸实验室的核心之一，Littly 在各个领域都留下了非常多值得称道的传说，相信这一篇他在成长之初的文章，会给你不一样的视角体验。 54 | 55 | ![](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) 56 | -------------------------------------------------------------------------------- /articles/08.md: -------------------------------------------------------------------------------- 1 | ![HEADER](https://img30.360buyimg.com/ling/jfs/t1/123947/12/1049/223668/5eb91a75E22df386d/f512ca91ea849911.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.08 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [官宣: Typescript 3.9 正式发布](http://3.cn/10-0fjfdC) 12 | 13 | TypeScript 3.9 正式发布，这个版本主要聚焦于性能、改进某些特性和提升稳定性。编译器效率在这一版有了极大提升，平均编译时长从 26 秒缩短至 10 秒，改善了编辑体验，同时修复了早期 Typescript 版本面临的 Promise 困扰等等，快点升级到 3.9 尝尝鲜吧。 14 | 15 | #### [史上最详尽的 Git 分支管理实践](http://3.cn/1-00fjfdB) 16 | 17 | Git 作为我们日常开发必不可少的代码管理工具，掌握好它，可以达到事半功倍的效果，特别在多人协作的项目中尤为重要。本文不单讲解了 Git 的设计理念，同时带领我们重新认识分支，用实战的方式详细讲解了日常工作中可能遇到的问题及最佳实践。 18 | 19 | #### [懂你的测试框架 -- Cypress](http://3.cn/100f-jhBK) 20 | 21 | Cypress 是基于 node.js 研发的 E2E 测试框架。解决了开发人员和 QA 工程师在测试现代应用程序时面临的关键难点问题。拥有着开箱即用，文档清晰美观的优点，语法用起来比较舒服优雅，最重要的一点是测试跑在 Chrome 的标签页里，使得开发者可以方便地在测试和开发中进行便捷的切换。 22 | 23 | ### 图形编程 24 | 25 | #### [开发必备: Opentype.js](http://3.cn/100fj-gan) 26 | 27 | opentype.js 是一款用于 TrueType 和 OpenType 字体的JavaScript解析器和编写器, 它可以直接提取字体文件中的文字 bézier 路径, 允许你直接访问文字的局部字形, 并对其做任意修改。 28 | 29 | #### [高盛 VR 与 AR 报告：下一个通用计算平台](http://3.cn/100fj-hpd) 30 | 31 | 随着今年突发疫情的持续，房地产界悄然崛起了 VR 看房的浪潮，例如最为人所知的贝壳 VR 看房。而在 2016 年，高盛发布的 VR 与 AR 调研报告，全面针对当前 VR/AR 软硬件的发展现状，结合 PC 与智能手机的发展走向，辅以大量的数据论证，对 VR/AR 的未来发展进行了分析，并对若干行业在应用方面进行了详尽的分析，为投资者提供建议。 32 | 33 | ### 跨端技术 34 | 35 | #### [Flutter 1.17重磅发布：多个新增特性及增强，2020年首个稳定版](http://3.cn/100fjf-rT) 36 | 37 | 不久前 Flutter 发布了 1.17 版本，新版本修复了大量问题，优化了移动端的性能以及引入了一些新的特性， Web 端的支持也得到进一步提高。即使不打算使用 Flutter，相信文章中提到的 Flutter 版本发布流程也能给大家带来项目版本控制上的启发。 38 | 39 | #### [Flutter 在 PLUS 业务中的探索和实践](http://3.cn/-100fjfdD) 40 | 41 | 京东 PLUS 前端团队是京东里最早实践 H5 业务改版 Flutter 的团队，籍此文章为我们分享了 Flutter 由引入期向规模化演进过程的宝贵实践经验。文中详细介绍了入坑 Flutter 前需要面对的各种具体的业务问题、PLUS Flutter 业务开发架构、以及 Flutter + Serverless 等生态探索经验。 42 | 43 | ### 人工智能 44 | 45 | #### [《可解释机器学习》中文版](http://3.cn/100fjhB-L) 46 | 47 | 《Interpretable Machine Learning》是由德国慕尼黑大学的一名博士 Christoph Molnar 耗时两年编著完成的，这本书是技术圈少有的，对机器学习可解释性作出完整诠释的精品书籍。如今有爱好者将其翻译成了中文版本，并得到了原作者的推荐，飙星2000+！ 48 | 49 | #### [「Pose Animator」一键生成个人角色](http://3.cn/10-0fjhBN) 50 | 51 | 「Pose Animator」项目是由一位叫做 Shan Huang 的小姐姐，利用 TensorFlow 实现的，使用拍摄的 2D 矢量图，并基于 PoseNet 和 FaceMesh 的识别结果，实时对结果及包含的曲线进行动画处理，生成个人角色动画。这是一个能让人自娱自乐，并且丝毫察觉不到时间流逝的神奇工具。 52 | 53 | ### 工具推介 54 | 55 | #### [Facebook 发布实验性 React state 管理库 Recoil](http://3.cn/100fk-qGf) 56 | 57 | Recoil 是 Facebook 最新发布的实验性 React state 管理库，项目开源 20 天，目前在 Github 上已经有 5000 多 Star 了，核心优势如下： 58 | - React 风格：Recoil 像 React 一样思考和工作（能更好与 React 或其它技术配合使用），借助 Recoil 可以让你的应用快速灵活的共享状态数据。 59 | - 数据流图：通过纯函数和高效的订阅让派生数据和异步查询的处理变得非常简单。 60 | - 应用级监听：通过监听整个应用（即应用生命周期中）的状态变化，能在不影响 code-splitting 的前提下，提供持久化、路由、时间穿梭调试和撤销等功能。 61 | 62 | ## 沧海拾遗 63 | 64 | > 沧海拾遗，积跬步以至千里 65 | 66 | #### [羚珑 x 自动化 -- 测试方案实践](http://3.cn/100fjh-BM) 67 | 68 | 看完今天的推荐文章，有没有觉得测试也会是我们开发中必不可少的一环，来看看京东羚珑设计平台是怎么做的吧，相信你会有所收获～ 69 | 70 | #### [京喜：前端自动化测试的自我修养](http://3.cn/10-0fjfGg) 71 | 72 | 作为一个超大型的项目，京喜的测试方案，不可谓不详尽。翔哥这篇自动化测试的文章深入浅出，从技术选型到开发实录，一定不可以错过！ 73 | 74 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/09.md: -------------------------------------------------------------------------------- 1 | ![HEADER](https://img13.360buyimg.com/ling/jfs/t1/127219/11/3865/226888/5ed5efe9E5fa16b78/abc4e4bc7b19d1c0.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.09 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [StackOverFlow 2020 年开发者报告](http://3.cn/100-fWR6E) 12 | 13 | 技术问答社区 StackOverFlow 的年度报告，本次报告统计了来自于全球各地共 65000 名开发者。有几项数据令人震惊： 14 | 1. 2020 年 jQuery 仍然是最受欢迎的 Web 开发者框架； 15 | 2. Rust 以 20% 的领先成为最受喜爱的技术； 16 | 3. Perl 是全球范围内收入最高的语言； 17 | 4. 美国开发者是全球最勤奋的开发者，平均每周工作 41.8 个小时（可以推算出此问卷的中国样本很少）。 18 | 19 | #### [高性能的 Google 字体实践](http://3.cn/100-fWPCg) 20 | 21 | 在大多数情况下，使用网络字体并不需要延迟网页渲染，也不会对其他性能指标产生不良影响。随着浏览器对 FOUT/FOIT 行为的标准化，以及最新制定的 font-display 规范，网络字体的渲染性能似乎得到了更多开发者的关注，本文将深入剖析 Google Fonts 加载优化。 22 | 23 | #### [初识 Records 和 Tuples](http://3.cn/1-00fWQQK) 24 | 25 | “Record & Tuple” （作者：Robin Ricard 和 Rick Button）是 ECMAScript 的提议之一 ，现在正处于 Stage 1。这个提议是在 JavaScript 引入了两种新的 deeply immutable 的数据结构： 26 | * Records：按值比较的不可变对象 27 | * Tuples：按值比较的不可变数组 28 | 本文将带着你抢先了解该提议的内容、使用场景以及优缺点。 29 | 30 | ### 前端框架 31 | 32 | #### [使用 Svelte 开发 Web Component](http://3.cn/100-fWPSG) 33 | 34 | 在[往期周刊](https://github.com/o2team/tech-weekly/blob/master/articles/03.md)中我们曾介绍过 Svelte 框架。其实 Svelte 除了能用于编写网页应用之外，还能用来编译可独立分发的 Web Component。作者使用 Svelte 开发了一个贪吃蛇 Web Component，通过文章详细介绍了如何编写、构建和使用此 Web Component。如果你正在考虑使用什么框架构建 Web Component，此篇文章应该能令你有所启发。 35 | 36 | ### 图形编程 37 | 38 | #### [北大图灵班本科生带来动画CG福音，「最懂骨骼的卷积网络」，无需配对样本实现动作迁移 | SIGGRAPH](http://3.cn/100fWQB-h) 39 | 40 | 继中国程序媛结合骨骼动画实现 2D 插画实时变动画之后，北大与北影的最新研究更进一步，实现了同一套动作快速移植到不同 3D 骨骼框架上。本文详细介绍了论文中的具体技术点与技术贡献，大大减少了动画制作中骨骼重构的时间，很有可能成为未来 3D 动画业界的革命性研究。（别人的大三系列） 41 | 42 | #### [深入细胞、遨游博物馆: AR 搜索让宅家学习更硬核](http://3.cn/1-00fWQBi) 43 | 44 | 随着疫情的逐渐日常化，各行各业在 VR/AR 上加速发力，Google 搜索结合 ARCore 技术“打破”社交距离限制，在搜索某些关键词（circulatory system「循环系统」、skeletal system「骨骼系统」等）时提供了 AR 探索的入口，无需安装特定应用，浏览器即可直接体验。本次 AR 搜索涵盖了人体模型、动植物和细菌的细胞、航空航天博物类，让过往较为枯燥的知识更加真实有趣。开发者可前往 Google ARCore（https://developers.google.com/ar/discover）平台获取相应的开源详情，构建自己的 AR 应用。 45 | 46 | ### 桌面开发 47 | 48 | #### [Electron 9.0.0发布！带来三项重大改进，不再支持Electron 6](http://3.cn/100fW-S2Y) 49 | 50 | 近日，Electron 团队宣布 Electron 9.0.0正式发布。新版包括了Chromium 83、V8 8.3和Node.js 12.14几个组件的升级。此次更新为拼写检查器功能新增多项改进、Linux上的窗口事件处理程序效率提升、同时新增了PDF查看器，还有很多其他的更新。 51 | 52 | ## 沧海拾遗 53 | 54 | > 沧海拾遗，积跬步以至千里 55 | 56 | #### [Web 开发实战 -- 中文字体优化](http://3.cn/100fX-1qI) 57 | 58 | Web 字体处理一直是个难题，看过了 Google 字体的优化方案，你可能依旧会想要用其他的方法来处理 Web 字体，毕竟设计师的像素眼总能洞悉每一处差异，更何况是没有使用定制的中文字体！Web 开发实战中，中文字体优化是更高标准中不可或缺的组成部分之一，如果你还不了解，一定要补起来哦！ 59 | 60 | #### [Taro IDE -- Electron 的开发实践小记](http://3.cn/100fX-0L8) 61 | 62 | Electron 版本迭代的速度可谓是非常快，9.0.0 版本的正式也意味着其能力的更进一步，如果你还没有过相关的经验，可以来看看 Taro 团队出品的这篇实战文，文章内详细介绍了在 Taro IDE 开发过程中遇到的各种问题，以及相关的处理方式，相信 Littly 的文字，一定能带你深入 Electron 跨端开发的方方面面～ 63 | 64 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/10.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img20.360buyimg.com/ling/jfs/t1/129438/13/3860/205943/5ed5f548E894ffa6f/4a0e23a2849723b9.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.10 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [直播延迟？为什么流媒体直播的延迟那么高](http://3.cn/100gL-uYF) 12 | 13 | 随着通信技术的发展，视频点播、直播业务也逐渐兴起。在这些业务形态中，流媒体技术扮演着重要的角色。但在实际使用中，即便是在优良的网络环境中，主播和观众间依然可以体验到明显的延迟。为何会产生这种延迟？这篇文章从编码、传输、缓存等方面入手，分析了延迟产生的原因。 14 | 15 | #### [何时使用 TypeScript - 使用场景全解](http://3.cn/-100gLt6t) 16 | 17 | 距离微软 2012年10 月首次发布 TypeScript 0.8 版本已将近 8 年，越多的公司和团队开始尝试 TypeScript ，尽管如此，依然有大量开发者对 TypeScript 适合的场景感到迷惑。在这篇文章中，我们会探讨什么情况下绝对应该使用 TypeScript 这种类型严格的编程语言，又在什么情况下应该继续使用原生的 JavaScript。 18 | 19 | ### 前端框架 20 | 21 | #### [Atomic CSS-in-JS](http://3.cn/100gLsQ-x) 22 | 23 | 你可能听说过Atomic CSS，还有 CSS-in-JS，但你想过他们可以合起来使用吗？Twitter 和 Facebook 正在进行这方面的实践。Twitter 公司的 React-Native-Web 项目已经在 Twitter 桌面客户端中使用，而 Facebook 的 Stylex 项目也已经进入测试阶段。Atomic CSS-in-JS 具备怎样的魔力，让两大社交巨头如此着迷？这篇文章可以解答你的一些困惑。 24 | 25 | #### [为什么我们创建了 Rematch](http://3.cn/10-0gLu0W) 26 | 27 | Rematch 作者 Shawn McKay 的文章除了阐述了为什么我们需要状态管理工具、Redux 数据流，以及对 Redux API 的7个思考与改进之外，还提出了 API 设计质量公式：独自解决的时间 / 框架学习时间 = API 设计质量。如果你的项目需要暴露一些 API 或是框架的作者，这个公式能帮助你思考如何去提供 API 的质量。 28 | 29 | ### 工程化 30 | 31 | #### [Esbuild，可能是目前最快的 JS/TS 模块打包工具](http://3.cn/100g-LsAM) 32 | 33 | 该打包工具是使用 Go 语言开发的 JavaScript 模块打包工具，支持 TypeScript。根据该项目介绍 benchmarks 测试，在同一份代码（three.js）的情况下，esbuild 比其他打包工具（rollup / webpack / parcel等）快了至少 100 倍！Vue 作者尤雨溪的新工具 vite 也是基于 esbuild 转换库来添加对 TypeScript 的支持。 34 | 35 | ### 图形编程 36 | 37 | #### [揭秘皮克斯 - 逐帧解析《Soul》带你全方位了解皮克斯的动画技法](http://3.cn/100g-Lt6s) 38 | 39 | 对于前端开发来说，在开发动画时或许根据动效设计师提供的 demo 一比一还原即可，但实践过的同学都知道要做到真正的「一比一」有多难。其实这考验了开发解读动效的能力。本文对皮克斯新的动画电影《Soul》的预告片 (https://mp.weixin.qq.com/s/D7xE3Wbd4I0gd35zz5OwaQ) 进行了专业、详细的逐帧解读，深度分析了角色动线与节奏设计，从细节处感知动画巨头之是如何与大众市场拉开差距的。 40 | 41 | ### 服务端开发 42 | 43 | #### [如何大幅度减少 Node 应用 Docker 镜像大小？](http://3.cn/100gLsA-N) 44 | 45 | 作者根据 carbon.now.sh 尝试创建一个最小的镜像，从一个 2.43 GB的镜像一步一步优化至 100M 以下。在这边文章中，我们可以了解到减少镜像大小的一些方法和技巧，进一步提升镜像构建的效率。 46 | 47 | ### 人工智能 48 | 49 | #### [数据集大全: 机器学习的制胜宝典](http://3.cn/1-00gLuYE) 50 | 51 | 兵马未动，粮草先行。算法调参前需要找到合适的数据验证效果。该网站搜集了计算机视觉，自然语言处理，自动驾驶等机器学习热门方向的规模最大、质量最高训练数据集，极大减少花费在找合适数据集上的时间。 52 | 53 | #### [Google 开源表格解析器 TAPAS：使用表格数据回答自然语言问题](http://3.cn/10-0gLtBg) 54 | 55 | Google 开源了表格解析器（简称：TAPAS），它是一个使用表格数据回答自然语言问题的深度学习系统。TAPAS 接受了从维基百科提取的 620 万个表格数据的训练，在几个基准环境上其性能都达到甚至超过当下最先进的其他系统。 56 | 57 | ## 沧海拾遗 58 | 59 | > 沧海拾遗，积跬步以至千里 60 | 61 | #### [开发实用: 那些 Webpack 配置的小技巧](http://3.cn/100-gLt6u) 62 | 63 | Webpack 是我们当下在前端开发中不可缺少的重要工具，看完 ESBuild 如果你心动了，希望这篇文章可以让你冷静冷静，基础就是基础，如果这些都还不会，那可就不要在追求极致的路上一路狂飙，是时候慢下脚步，去夯实基础！ 64 | 65 | #### [与 Docker 相处的开始](http://3.cn/100-gLtlS) 66 | 67 | Docker 相信大家并不陌生，就算没有使用过，也必然是听过其大名，协同开发、环境切换、线上测试，不管你做什么，Docker 在我们开发过程中都有适用的使用场景，如果你还不了解，看完这篇文章，你的开发效率一定会多有提升。 68 | 69 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/11.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img20.360buyimg.com/ling/jfs/t1/146955/32/684/204771/5ee726d1Ebdd603b6/b4f3fe2f18ccb82a.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.11 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [Lighthouse 测试内幕](http://3.cn/100ho-WtV) 12 | 13 | 文章分享了网易云音乐前端性能监控平台使用 Lighthouse 的实践经验，介绍了 Lighthouse 的测试流程、内部模块实现以及性能指标计算等。文章循循善诱，使用清晰明了的架构图和简单易懂的代码例子，剖析了 Lighthouse 从建立链接、搜集、审计评分到主要性能指标的审计实现原理。本文鞭辟入里，干货满满，实在为不可多得的深度好文。 14 | 15 | ### 前端框架 16 | 17 | #### [Vue3 究竟好在哪里？](http://3.cn/100hoWf-g) 18 | 19 | 文章从逻辑复用、代码组织、使用案例、技术原理等方面较为深入地剖析了 Vue 3 的 Composition API，最终得出结论：1. 使用 Vue 3 还写意大利面条式的代码是开发者水平不足导致的；2. 使用 Vue 3 心智负担不高。除此之外，Vue 的作者尤雨溪也出没在本文评论区，在线推销 Vue 3。 20 | 21 | ### 设计哲学 22 | 23 | #### [圣杯与银弹 · 没用的设计模式](http://3.cn/100-hoYcw) 24 | 25 | 文章理性且批判性地诠释了怎样才是学习设计模式的最佳方式，盲目套用书中的抽象理论往往只会使项目变得更糟糕。设计模式都是从大量的实践项目中总结出的抽象理论，在不同的编程范式和项目场景下，同一种设计模式可能会产出完全不同的实现。所以，作者推荐学习系统设计的更好方式是：选择优秀的开源项目学习其顶层设计和底层实现并在项目中不断实践。在我看来，这篇文章的价值远不止于此，作者的思考方式对于学习软件开发的方方面面都存在宝贵的指导作用。 26 | 27 | ### 图形编程 28 | 29 | #### [使用 Three.js 实现 3D 动态文字](http://3.cn/1-00hoXGU) 30 | 31 | 手把手教你如何使用 Three.js 把文字作为贴图附着在 3D 模型表面，并使之运动起来，实现 2D 动画难以带来的视觉冲击。 32 | 33 | ### 人工智能 34 | 35 | #### [VALSE 技术研讨会](http://3.cn/100hoXX-b) 36 | 37 | 一个能够跟大牛近距离接触的公众号，每周会请来自各大学/大厂的AI专家对自己领域的进展做分享。目前已有邀请阿里达摩院高级开发，电子科大教授等大牛进行图像分析方面的分享。能够极大的方便跟踪现在业界最前端的探究方向。 38 | 39 | #### [如何使用深度学习识别 UI 界面组件？](http://3.cn/100-hoVYi) 40 | 41 | 详细的介绍了使用机器学习来识别 UI 界面元素的完整流程，包括：现状问题分析、算法选型、样本准备、模型训练、模型评估、模型服务开发与部署、模型应用等。 42 | 43 | #### [广告点击率预估是怎么回事？](http://3.cn/10-0hoWXj) 44 | 45 | 在电商全图片场景的背景下，探究广告图对用户点击率及转化率的影响必定十分有意义，广告也成为众多一线大厂的必争之地，借助于AI来建立广告预测模型用更科学的方法来提升设计效率及用户体验。本文带你了解点击率预测到底是什么以及建立CTR模型的步骤和常见CTR预估算法。 46 | 47 | ### 工具推介 48 | 49 | #### [any-rule](http://3.cn/-100hoXsu) 50 | 51 | any-rule 仓库收录了日常开发中较为常用的正则表达式，包括手机号、各类链接地址、各平台账号等 60+ 条精准匹配的正则式，另外支持 web / vscode / idea / Alfred Workflow 多平台，建议收藏。再也不用担心 Google 搜索到的正则不准确啦～ 52 | 53 | ## 沧海拾遗 54 | 55 | > 沧海拾遗，积跬步以至千里 56 | 57 | #### [AI Typography](http://3.cn/100h-oWtU) 58 | 59 | 人工智能始终是未来的主要方向之一，文字识别、UI组件学习、广告点击率估算？除此以外还能有什么合适的场景呢？或许你已经听过了凹凸实验室的羚珑，但是对其不甚了解，那么这篇关于 AI 版式设计的文章，可能会帮助你更好地思考我们与人工智能的关系。 60 | 61 | #### [羚珑AI系列分享之机器学习科普入门](http://3.cn/100hoY-sT) 62 | 63 | 文字是很好的载体，但是视频也是一样，人工智能并不是一两句话能够讲完的事情，不过相信这一期凹凸极客沙龙的回顾视频，Mark 老师能够给你一个带来不一样的视角，深入浅出讲解在我们身边那些人工智能应用的场景！ 64 | 65 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/12.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img14.360buyimg.com/ling/jfs/t1/125883/9/5392/206233/5ef0bbc9E56775583/4f9cc5fa6f175dec.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.12 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 前端框架 10 | 11 | #### [Vue3 Composition API 提案](http://3.cn/12IPz3-9) 12 | 13 | Vue3 其中一个重量级的特性就是 Composition API，它能帮助我们更好地组织代码。本网页是 Composition API 的草案，详细介绍了 Composition API 的设计动机、设计细节、具体 API 用法等。文章篇幅较长，推荐找一个悠闲的周末，泡上咖啡，带上耳机，细细品读一番。 14 | 15 | #### [工具测评: React Hook Form VS Formik](http://3.cn/1-00i5jW7) 16 | 17 | 使用 React 构建表单是一件痛苦的事情，官方推荐了 Formik。本文对使用 Formik 和 React Hook Form 构建表单进行了比较，得出 React Hook Form 比 Formik 更易用、更高效的结论。如果你正巧在这方面有困惑，可实践尝试体验。 18 | 19 | #### [Quark-h5 -- 从零开始的可视化编辑器](http://3.cn/1-00i5m9R) 20 | 21 | 想必你一定使用微场景生成工具制作过炫酷的 h5 页面，除了感叹其神奇之处有没有想过其实现方式呢？本文从零开始实现一个 H5 编辑器项目完整设计思路和主要实现步骤，并开源前后端代码。有需要的小伙伴可以按照该教程从零实现自己的H5编辑器。 22 | 23 | ### 图形编程 24 | 25 | #### [初探虚幻引擎5](http://3.cn/100-i5lri) 26 | 27 | 5月底, 游戏公司Epic揭开了虚幻5引擎神秘的面纱，此次更新包含 Nanite虚拟微多边形 和 全新的动态全局光照Lumen 两大核心技术，然后展示了该引擎运行在PS5上实时渲染效果，其逼真的光照和媲美电影的细节震惊了整个行业。 28 | 29 | ### 工程化 30 | 31 | #### [Vite -- 入门到实战](http://3.cn/100-i5lGs) 32 | 33 | Vite 是 Vue 技术生态新推出的开发工具，针对 Vue 应用的无打包开发服务器，开发者无需借助 webpack 等打包工具，即可直接在浏览器中预览 Vue 项目。Vite 的原理与本技术周刊之前介绍过的 snowpack 有着异曲同工之处，Vite 本身也表示一部分灵感来自 snowpack 项目。本文从 0 开始一步一步实现了一个简易版本的 Vite 来讲解 Vite 的技术原理，读过本文之后，再去阅读 Vite 的项目源码，相信会有不小的收获。 34 | 35 | ### 人工智能 36 | 37 | #### [杜克大学出品 AI 黑科技 PULSE 算法，让你的照片有码变高清](http://3.cn/1-00i5kX8) 38 | 39 | 近日杜克大学开源了新型超分辨率图像算法 PULSE，可将16x16像素的低分辨率人像放大到1024x1024像素的高分辨率。 40 | 41 | ### 工具推介 42 | 43 | #### [手把手教你快速搭建专属的 StoryBook](http://3.cn/100-i5lVZ) 44 | 45 | Storybook是一个辅助UI控件开发的工具。通过story创建独立的控件，让每个控件开发都有一个独立的开发调试环境。 Storybook的运行不依赖于项目，开发人员不用担心由于开发环境、依赖问题导致不能开发控件。Storybook支持的框架覆盖主流的框架（React、Vue、Angular）。 由于使用React作为技术栈，本文将介绍使用react的项目如何配置Storybook环境。 46 | 47 | ## 沧海拾遗 48 | 49 | > 沧海拾遗，积跬步以至千里 50 | 51 | #### [ELF - 灵活可扩展的 HTML5 构建工具](http://3.cn/100-i5ky5) 52 | 53 | 前端工程化的问题由来已久，除了尤老师正在努力的方向，还出现过很多优秀的小工具帮助我们解决各个方面的问题，ELF 就是其中一种解放我们重复劳动的构建工具之一。 54 | 55 | #### [用 Git 钩子进行简单自动部署](http://3.cn/100i5k-No) 56 | 57 | 除了这些工具，工程化中也还是有很多小问题，可以用很多方法去解决，自动化部署就是其中之一，如果你还不懂的如何利用 Git Hook 完成自动化部署的方法，赶紧补起这一课吧，未来正在向你招手～ 58 | 59 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/13.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img20.360buyimg.com/ling/jfs/t1/118829/9/11690/206197/5f030d56E89f7da6e/68f86e7edb98795d.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.13 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [跟 VSCode 学习如何开发大型 IDE 项目](http://3.cn/-100jaq65) 12 | 13 | VSCode 是当下非常流行的微软开源的代码编辑器，它在满足多样性插件化生态的同时保证了软件的健壮和性能，这得益于其优秀的插件化内核架构设计。本文作者是蚂蚁金服云凤蝶团队成员，文中对 VSCode 的关键技术架构作了深刻的剖析和理解，包括内核分层隔离与扩展机制、依赖注入、命令系统、插件化架构等等，如果你正在打造一个可扩展的软件系统，这篇解读非常值得去学习参考。其实，VSCode 的优秀架构离不开其专注而克制的产品定位——“编辑器 + 代码理解 + 调试”，其他的内容交给社区生态来扩展。最完美的设计，往往是精简到极致，而无法再做减法了。 14 | 15 | #### [前端进阶：跟着开源项目学习插件化架构](http://3.cn/10-0japS7) 16 | 17 | 微内核（插件化）架构被广泛应用于软件系统设计中，譬如 Vue 的插件机制 `Vue.use(Plugin)` 就是一个简单的插件化设计。微内核架构既能满足灵活扩展的特性，又不影响系统的稳定性。本文基于西瓜视频播放器项目来阐述微内核架构的实践应用，在播放器中，小到一个播放按钮大到一项直播功能特性都可以理解为一个插件模块。作者贴合简练的代码，讲述了插件系统中插件管理、连接和通信的全过程，非常通俗易懂。 18 | 19 | ### 图形编程 20 | 21 | #### [UI 交互动效合辑](http://3.cn/100-jap8B) 22 | 23 | 这个合辑收集了近期较有创意的 UI 交互转场动效，可以看到许多不同于寻常转场交互的想法，比如波纹、图形变形与转场动画的结合，又比如利用弧形色块的变化进行的转场效果等等，目前已发布了8期内容，有网页动效设计需求的设计或开发都可以浏览参考，同时感受一下优秀动效设计中的缓动曲线。 24 | 25 | #### [AR 体验的“后浪”来了：ARCore Depth API 让遮挡难题迎刃而解](http://3.cn/100jaq-Bj) 26 | 27 | 针对 AR 开发场景中景深算法的 Depth API 正式发布。有了这个 API，开发者在支持 ARCore 的 Android 设备上开发 AR 场景时可以更准确地处理虚拟物体与现实物体的遮挡关系，完全杜绝虚拟物体与透视关系不符的“贴图”问题，使得虚拟物体沉浸效果更为真实。文中还有更多的应用场景，并提供了海量动图演示。 28 | 29 | ### 桌面开发 30 | 31 | #### [Flutter 在桌面端的最新进展：支持打包 Windows 和 Linux 应用了](http://3.cn/100jap-oq) 32 | 33 | Flutter 的目标是支持尽可能多的平台和设备，我们已经知道它可以很好地在 iOS 和 Android 设备上运行了，那么它对桌面端的支持情况如何呢？Tim Sneath，Flutter 产品经理，在最近的一篇博文中分享了他们最新的进展，聊到了他们支持了打包 Windows 和 Linux 应用了，如何调用不同桌面系统的原生组件，以及更新插件模型来方便开发者更容易地支持不同的平台等工作。Tim Sneath 还分享了有开发者已经利用 Flutter 发布了最新的桌面端应用，你也可以跟随本文，尝试一下，看看 Flutter 桌面端能否满足你的需求。 34 | 译文：https://jelly.jd.com/article/5ef9e4ac7c53070156dd5b8a 35 | 36 | ### 服务端开发 37 | 38 | #### [Easy-Monitor3 开始你的Node.js内核性能监控之旅](http://3.cn/-100jaqlR) 39 | 40 | Easy-Monitor3是一款基于 Node.js Addon实现的开源内核采样以及收集工具，提供完整的Web UI支持(APM)，支持私有化部署，全平台支持。可用于内存泄露分析，性能瓶颈分析，监控告警等。 41 | 42 | ### 工具推介 43 | 44 | #### [AutoCannon：一款http压测工具](http://3.cn/-100japop) 45 | 46 | AutoCannon是一款使用node编写的压测工具，能比wrk生成更多负载，市面上类似的产品很多，老牌的ab，带有图形界面的soap ui等。不过AutoCannon可以方便的进行命令行调用，甚至还能在代码内调用，这对于写压测脚本来说就非常方便。另外它还能结合node clinic 一起使用，定位性能问题无往而不利。 47 | 48 | ## 沧海拾遗 49 | 50 | > 沧海拾遗，积跬步以至千里 51 | 52 | #### [实现一个简单但有趣的 AR 效果](http://3.cn/100ja-qlQ) 53 | 54 | 看完 Depth API 这样的 AR 后浪，不知道你有没有心动呢？如果你也想快速上手 AR，不妨来试试这样一个简单的效果，让你快速对 Web AR 有一个了解，这些基础能帮助我们在 AR 这条路上走的更远。 55 | 56 | #### [碰撞检测 -- 源自生活的特效](http://3.cn/100ja-qlS) 57 | 58 | Web 中有很多常见的 2D 碰撞检测，掌握这些实用的小技巧，在特定需求的页面中会有更为出色的体验。你对这些方法熟悉么？还不了解的话可以进来试试看哦～「内含基于 Canvas 的运行实例、图片说明」 59 | 60 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/14.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img13.360buyimg.com/ling/jfs/t1/112179/19/12147/205472/5f0c4889E43970b47/c4eb31f313238169.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.14 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 前端框架 10 | 11 | #### [Vue 3: 2020 年中的状态更新](http://3.cn/100jK1X-Z) 12 | 13 | 近日 Vue3 团队对 Vue 3 的状态进行了更新，介绍了各个主要工具的开发进度。整体计划是 7 月中旬推出 RC 版本，8 月早些时候能够推出正式版。在各工具在密锣紧鼓升级兼容 Vue3 的同时，受 [Svelte](https://svelte.dev/tutorial) 启发，尤大新增了[三个语法糖特性](https://github.com/vuejs/rfcs/pull/182)用于优化 SFC 的开发体验，一起来了解一下吧～。 14 | 15 | ### 设计哲学 16 | 17 | #### [前后端一体化：前后端分离将死？](http://3.cn/100jK-1wl) 18 | 19 | 天下大势，分久必合，合久必分，在几年前由于 NodeJS 等技术的蓬勃发展，业界涌现出前后端分离的技术架构体系，仿佛前后端分离，才是自然的法则。而如今，也是因为技术的不断发展，作者基于自身敏锐的观察，开始探索前后端一体化的架构，并列举了一系列关于前后端一体化即将到来的观点，非常值得学习、思考。不过，不管是哪种架构，都是为了在合适的时机出现，解决当下的问题，架构，没有终点。 20 | 21 | ### 图形编程 22 | 23 | #### [如何挑选数据可视化框架及平台](http://3.cn/100jK2-em) 24 | 25 | 在数字化成为趋势的今天，数据可视化需求也越来越常见。这篇文章挑选了市面上较活跃较稳定的框架进行了详细的测评，包含框架的发展历史、优劣势、与其他框架存在的区别等角度，适合正在或即将挑选数据可视化框架的前端开发对这些框架进行一个全面的了解，以便选择最为适合的框架。 26 | 27 | #### [【站点推荐】Cassie Evans 的博客](http://3.cn/100jK1-Im) 28 | 29 | 这是一个充满了 SVG 动效小心思的个人博客，从左上角的 Logo 到首屏的空心字 hover 效果，以及最后一屏目光跟随鼠标的个人画像，这个博客首页的所有图形都是使用 SVG 绘制而成。博客中包含了关于 SVG 动效开发入门、绘制等内容，适合对 SVG 动效感兴趣的人边探索边学习。 30 | 31 | ### 服务端开发 32 | 33 | #### [Node.js Legacy url API 的安全风险](http://3.cn/10-0jK2el) 34 | 35 | 在 Node.js v11.0.0 的版本中Legacy URL API已被弃用转而使用WHATWG API，但V11以下的版本中还会存在相关漏洞，由于兼容问题，Node.js 并未直接移除 legacy API。两套 API 尽管看起来提供一样的能力，但是底层对 url 规范的定义不一样，且实现也略有不同，legacy API 中隐藏了一些严重的安全风险。 36 | 37 | ### 工具推介 38 | 39 | #### [构建在 DevOps、CI/CD 之上的研发效能度量工具](http://3.cn/100jK1-gd) 40 | 41 | 这款工具处理的是人机协作时代，如何进行研发管理。通过标准化开发流程、CI/CD集成来实现。结合本身的业务线，在此基础上扩展开，我们可以考虑通过CI实现团队协作、前端自动化工作流，完成本地的构建部署发布测试等工作。 42 | 43 | ## 沧海拾遗 44 | 45 | > 沧海拾遗，积跬步以至千里 46 | 47 | #### [京喜小程序: 高性能实践](http://3.cn/100jK1-Y0) 48 | 49 | 如何在小程序上实现高性能的体验，这是我们一直在思考的问题。京喜小程序作为一个电商门户，细微的体验细节都会被无限放大，那么追求极致的性能、友好的体验和稳定的服务，就是最为基本的原则。相信你也会好奇，京喜怎么来定义高性能？又是如何分析性能指标？同时又从哪些方面着手优化小程序的性能？这篇文章一定会给你一个满意的答案！ 50 | 51 | #### [JDR DESIGN 开发全体验](http://3.cn/-100jK2XF) 52 | 53 | 门户网站开发这样一件事情，易者易矣，难者难矣。随便做一做很轻松，但是想要做好，其中依旧有很多门道。更何谈京东零售设计中台门户这样的站点，其中不论是设计细节，还是对于用户体验的追求，都是非常极致的。阿姣小姐姐在其中的诸多设计，都很有巧思，细细品读，多有收获。 54 | 55 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/15.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img20.360buyimg.com/ling/jfs/t1/141678/15/3459/206425/5f15a527E803aeb7e/f305e6d244775cfd.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.15 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 前端框架 10 | 11 | #### [Vue 3 RFC](http://3.cn/100kj-JOd) 12 | 13 | 在 2019 年初，Vue 团队开始采用了 RFC (Request for Comments) 机制，Vue 3 的所有重大特性更新都可以在这里看到。每份 RFC 有固定的模板，提出者必须列出草案的动机、设计细节、缺陷和兼容策略等，这不仅能让提出者认真思索方案的可行性和各种边界情况，还能让社区参与到新特性的讨论与设计中来。无论是开源项目还是内部的大型项目，相信一定能从 RFC 机制中获益。 14 | 15 | ### 图形编程 16 | 17 | #### [云鹭科技的原生云游戏创意分享会](http://3.cn/100-kjKOi) 18 | 19 | 云概念在互联网界喊了好几年，终于轮到游戏了。7月15日，云河原生云游戏开发中心首次原生云游戏研发创意分享会在斗鱼直播平台进行。云鹭科技CEO温向东在直播中为大家剖析了目前游戏开发者遇到的困难，提出了入局云游戏产业来打破目前游戏研发困境的解决方法。在中国5G云游戏产业联盟的指导下成立的云河原生云游戏中心，将在“原生云游戏”的这条赛道上，扮演一个“推进者”的角色。 20 | 21 | ### 服务端开发 22 | 23 | #### [错误码如何设计才合理？](http://3.cn/-100kjLj3) 24 | 25 | 对于错误码的设计，不同的开发团队有不同的风格习惯。而优秀的错误码设计，不仅能够帮助快速定位问题，让代码结构更清晰，还能间接地反映了整个架构的设计和划分。本文分享阿里文娱技术专家长统对于错误码的看法，希望从错误码使用的不同场景讨论得到一个合理的错误码规约，得到一个面向日志错误码标准和一个面向外部传递的错误码标准。 26 | 27 | ### 人工智能 28 | 29 | #### [Sqlflow: 蚂蚁金服开源的基于sql的描述语言](http://3.cn/10-0kjKy2) 30 | 31 | Sqlflow 是蚂蚁金服开源的一种基于sql的描述语言，用户可以基于sql的方式实现机器学习模型训练和预测。打通了数据训练过程中提数，模型打造，训练三个步骤的隔阂。能够大大提高炼丹的效率以及开发者的专注度。目前已支持MySQL、Oracle、Hive。 32 | 33 | #### [Pipcook：前端开发者的机器学习工具箱](http://3.cn/100k-jJyC) 34 | 35 | Pipcook 发布了 1.0，是淘系技术部 FX Team 研发的一款面向前端开发者的机器学习工具箱，通过 Boa 提供了无缝使用 Python 生态的能力，解决了机器学习与 JavaScript 的物理距离，对前端开发者上手机器学习更友好。 36 | 37 | ### 工具推介 38 | 39 | #### [一款让你精通正则书写的工具库 super-expressive](http://3.cn/100k-jJOe) 40 | 41 | 相信正则一定是你编程路上拦路虎，没有 Google 你可能很难能够书写出能正常运行的正则表达，而 super-expressive 可以让这一工作变得非常轻松，super-expressive 是一款 0 依赖的工具库，可以让你以非常自然的语法来书写出复杂的正则表达式，就像说话一样自然。 42 | 43 | ## 沧海拾遗 44 | 45 | > 沧海拾遗，积跬步以至千里 46 | 47 | #### [FIGlet：互联网上的字体艺术](http://3.cn/10-0kjLj4) 48 | 49 | 你知道 FIGlet 么？这类古早的字体艺术至今都可以在很多工具或者代码库中看到，可能是注释或者各种形式出现。如果你对此不了解，从此一窥那些早期互联网的时尚文化。 50 | 51 | #### [那些不得不知正则表达式理论](http://3.cn/100kjJ-8z) 52 | 53 | 正则表达式是我们开发过程中难以忽视的一环，不论你是前后端的开发者亦或是其他，都不可能和它绝缘，Super Expressive这样的工具可以帮助我么快速的书写正则，但是了解正则理论依旧会是一门必修课。 54 | 55 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/16.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img30.360buyimg.com/ling/jfs/t1/115345/34/13449/206486/5f1f8e8dEd592a00e/55195d6f14edf4a6.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.16 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [谷歌发布首个线上 Web 开发者大会](http://3.cn/10-0kTKjG) 12 | 13 | 谷歌在本月初完成首次线上 Web 开发者大会 (web.dev/live)，以线上视频的形式，分享关于优化核心 Web 指标的最佳实践，Cookie 隐私和安全保护、构建工具与打包优化、Chrome DevTools 改进等技术干货。 14 | 15 | #### [深入浅出现代 Web 编程](http://3.cn/100kTK-zN) 16 | 17 | 这是芬兰赫尔辛基大学公开的全栈课程资源，内容包括 React, Redux, Node.js, MongoDB, GraphQL 以及 TypeScript 等，教你利用 ReactJS 搭配 Node.js 开发 REST API，搭建属于自己的单页应用程序（SPA：Single Page Application）。 18 | 19 | ### 前端框架 20 | 21 | #### [在 React 内使用内联函数的性能损耗究竟有多少？](http://3.cn/100-kTJFn) 22 | 23 | 一直有人教导我们：在 React 里用形如 `onClick={() => { /* xxx */ }}` 函数内联的写法会降低性能，是不好的。但你想过具体有多大影响吗？Matthew Gerstman 想知道影响的具体程度，所以他做了验证。结果发现，尽管内联函数存在着性能损耗，但这种损耗近乎可以忽略不计。 24 | 25 | ### 图形编程 26 | 27 | #### [支付宝 App 3D 动画和小游戏背后的故事](http://3.cn/10-0kTJFo) 28 | 29 | 3D 动画和游戏一直是前端领域的难点，支付宝 App 从 2017 年春节推出 AR 红包开始，一直在 Web3D 领域进行探索和实践。本文中介绍了支付宝业务线从 17 年推出 AR 红包开始，在 Web3D 上的尝试。通过从0开发 R3 渲染引擎、下至由浏览器层面针对 Web3D 进行兼容等等努力，诞生了「星星球」等营销方案成功的 Web3D 游戏。在此过程中，团队也在“技术落地，业务探索，降低成本”方面做了不少尝试。文末分析了 Web3D 的短板所在，并结合技术趋势推测出未来的发展前景，值得思考。 30 | 31 | #### [华人团队打造3D手环, 让VR告别手柄](http://3.cn/1-00kTHXM) 32 | 33 | 最近, 康奈尔大学的华人教授带领国内本科生通过手环获得手指红外线成像结合深度神经网络, 以3D的形式对手指骨骼20多个关节进行了重建，该技术将在 VR、手语翻译、人机交互等方向有广泛的应用。 34 | 35 | #### [当原生云游戏遇上互动直播](http://3.cn/100kT-K5H) 36 | 37 | 7月22日的云鹭科技云游戏互动直播分享会上，云鹭科技 CEO 温向东在直播中为大家分析了目前游戏开发者们遇到的困境，并针对这些困境提出了“入局云游戏”的解决方法。从轻量级游戏入手，并成立委员会，以对原生云游戏进行多方位的支持。 38 | 39 | ### 人工智能 40 | 41 | #### [可视化卷积神经网络解释器](http://3.cn/1-00kTK5I) 42 | 43 | CNN（卷积神经网络）是学习AI过程中必定会了解到的概念。但了解CNN的工作原理需要大量专业知识，小白使用的时候不得不把它当成一个黑箱处理。而佐治亚理工中国博士出品的可视化解释器，把CNN按步拆解并辅以图形解释通过点击CNN不同模块就能展示是怎么识别图片和物品的。 44 | 45 | ## 沧海拾遗 46 | 47 | > 沧海拾遗，积跬步以至千里 48 | 49 | #### [Taro H5 - 决战性能之巅](http://3.cn/10-0kTKzO) 50 | 51 | 只有 Web 需求时，你会选择 Taro H5 么？或许你有自己的答案，但是在很多场景下， Taro H5 已经为很多开发者达成了非常多优化去应对，或许不完美，但是在社区很多开发者的贡献之下，Taro H5 在性能还有诸多方面，都已经成为了一套完成度很高的方案，来听听 Taro H5 的第一作者 xiaoli 怎么说吧！ 52 | 53 | #### [京东 PC 首页 - 电商门户的迭代之路](http://3.cn/100kTK-zP) 54 | 55 | 提起门户网站，算是个古早的话题，但是想要做好却依旧有很多我们需要考虑的问题，电商门户更是其中非常重要的环节，各类优化和体验，都需要做到极致。那么对于京东来说，想要适应当下前端开发的环境，对自家门户首页的改版，需要注意那些呢？ 56 | 57 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/17.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img20.360buyimg.com/ling/jfs/t1/130287/9/6710/205601/5f31fb72E28a08444/9d651467612b24c8.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.17 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [2020 Chrome DevTools 的新特性介绍](http://3.cn/100m-5DTe) 12 | 13 | 作为前端开发，与 Chrome 打交道是家常便饭，我们有必要了解 Chrome 调试工具的更新迭代，对日常开发和调试带来哪些帮助和改善。新 Chrome DevTools 集成了 lighthouse，并且在元素审查面板和性能面板都有一定程度的优化，本文还提供了相关特性的视频演示，非常易于理解学习。 14 | 15 | #### [浏览器的任务、微任务、队列和调度](http://3.cn/1-00m5Dps) 16 | 17 | 浏览器里的事件循环（Event Loop）一直都是一个老生常谈的话题，社区里各种文章和资料也不少，但是你真的清楚事件循环里面的 tasks、microtasks、queues 这些概念以及他们的调度关系吗？本文是 Google Chrome 的开发人员 Jake Archibald 撰写的一篇博客，内容深入浅出，在任务调度及 JS 栈的部分还细心的绘制了 CSS 交互动画，最后还探讨了不同浏览器的差异以及相关规范的定义，非常值得一读。 18 | 19 | #### [Node.js 内存泄漏指南](http://3.cn/100m-5Flj) 20 | 21 | 由于 Javascript 采取了基于垃圾回收机制的内存管理方式，所以开发人员一般不会关注内存的分配和释放，但在开发过程中稍不注意就可能造成严重的内存泄漏。本文解释了 Javascript 的垃圾回收机制，列举实际例子介绍 Node 服务中的内存泄漏场景，并且重点讲述了如何利用 heapdump 和 chrome devtools 来精准定位线上服务的内存泄漏位置，对于 Node 服务的性能优化有参考意义。 22 | 23 | ### 前端框架 24 | 25 | #### [仿照 React 源码流程打造 90 行代码的 Hooks](http://3.cn/100m-5DEu) 26 | 27 | 作者通过模拟 React 的数据结构与工作流程，来使用精简的代码实现出 useState Hook。学懂本文的剖析和对应的源码后再去看 React Hooks 的源码部分，能更加容易的理解。如果你只是简单使用过 Hooks 或还没了解过 Hooks，阅读本文是一个很好的学习机会。 28 | 29 | ### 图形编程 30 | 31 | #### [使用 web worker 驱动 webGL 渲染](http://3.cn/100m5ER-x) 32 | 33 | 介绍透过 OffscreenCanvas API，实现 web worker 驱动 webGL 渲染。把更新渲染的逻辑分到主线程之外能有效减少 js 执行导致的页面响应阻塞。文中提供了一个 demo 的对比数据。 34 | 35 | ### 工具推介 36 | 37 | #### [PolyK - 用 Javascript 编写的多边形库](http://3.cn/100m5Dp-t) 38 | 39 | [PloyK.js](http://polyk.ivank.net/?p=documentation) 提供了多个函数来帮助你更轻松的处理多边形，搭配一些物理引擎也可以做出一些有趣的效果，例如下面这个使用 phaser+matter.js 的 [demo](https://www.emanueleferonato.com/2019/03/15/slicing-splitting-and-cutting-html5-physics-bodies-using-phaser-matter-js-and-polyk/)，基于 ployk.js 库可以用很少的代码实现物体的切片，这可能可以给你开发 H5 游戏带来一些新的想法。 40 | 41 | ## 沧海拾遗 42 | 43 | > 沧海拾遗，积跬步以至千里 44 | 45 | #### [Nerv - 类 React 组件框架](http://3.cn/100-m5DTf) 46 | 47 | 当我们在前端领域不断向上攀爬的过程中，随着对 React 这一类框架的不断深入理解，大脑中总是会冒出一个这样的想法：“我也能实现一个像是 React 这样的框架”，Nerv 就是在京东这样想法就的落地实现，相信通过 Nerv，你会对 React 有不一样的了解。 48 | 49 | #### [在小程序中使用 React Hooks](http://3.cn/1-00m5Dbf) 50 | 51 | 如果选择 React 来开发小程序，相信你对于 Taro 多少有一定的了解，或许你现在正在通过 Taro 3.x 在小程序平台中按自己的意愿构建想要的小程序。但是回顾 Taro 发展的过程中，支持 Hooks 也曾是需要针对性优化的特性之一，通过这些特性实现的思考，对自身技术的提升大有裨益。 52 | 53 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/18.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img10.360buyimg.com/ling/jfs/t1/143314/37/5731/206061/5f3b3ebaEb3673ddd/20c69a204542071b.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.18 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [深色模式适配指南](http://3.cn/100mIn-WV) 12 | 13 | 自从 iOS13 自带支持深色模式（dark mode）以来，就一直为大家所关注，仿佛支持深色模式已经成为现代移动应用和网站的一个潮流，这不得不证明 iOS 的影响力之强大。本文就 Web、APP、Flutter 如何来实现深色模式适配，进行了深入地剖析。其中 Web 适配最终采用的是 CSS 变量+降级的方案，而 iOS、Android 原生以及 Flutter 都有各自系统提供的 API 能够比较容易地实现深色模式适配。 14 | 15 | ### 前端框架 16 | 17 | #### [超简单 Algebraic Effects 入门 -- React Team 出品](http://3.cn/148b-Zgr) 18 | 19 | React team 的 Sebastian（曾提出 Hooks 与 Suspense 等特性） 常常谈到 React 的某些特性其实是以 Algebraic Effects 作为心智模型，这让他的同事 Dan （Redux 作者）非常好奇。一番探索之后 Dan 发现这个从函数式编程领域而来的概念并没有一些学术论文上写的那么复杂，因此透过本文向不了解 Algebraic Effects 的开发者进行科普，并讲述了它与一些 React 特性之间的抽象联系。 20 | 21 | #### [Recoil - 面向 React 设计的状态管理库](http://3.cn/100mI-nsN) 22 | 23 | 在 5 月的 React Europe 2020 上，Dave McCabe 为我们分享了 FaceBook 推出的状态管理工具 Recoil。在状态管理工具琳琅满目的今日，为什么 React 官方要躬身入局？Recoil 的诞生是为了解决什么问题？Recoil 又是如何兼容 React 最新的特性呢？详情请看视频回顾。 24 | 25 | #### [深入解析 React Fiber 架构及源码](http://3.cn/100mIn-2P) 26 | 27 | 在React框架中，总是有一个用于保持状态的内部实例树(internal instances)（组件，DOM节点等），与之相对的是跟具体平台有关的public instance，也被称为Host instance 。从React 16开始，React推出了该内部实例树的新实现以及负责操作树的算法，被称为Fiber，它能够将任务分片，划分优先级，同时能够实现类似于操作系统中对线程的抢占式调度，功能非常强大。有兴趣的小伙伴可以通过这篇文章进行深入的了解~ 28 | 29 | ### 设计哲学 30 | 31 | #### [除了 Todo App 之外，我们如何才能获得实践技术的新点子？](http://3.cn/100mI-och) 32 | 33 | 学习新技术的时候，你会拿什么项目来练手呢？大部分人都会选择写一个 Todo App（提醒事项程序） 吧。作为过来人，GaneshMani 认为，Todo App、聊天室等简单的小项目固然可以让初学者熟悉语言、框架的运作，但对于职业生涯，甚至是激烈的面试竞争来说，都是远远不够的。如何想到一个更合适、更有实践意义的项目？这篇文章手把手进行了教学。 34 | 35 | ### 工具推介 36 | 37 | #### [Postwoman - 一个开源、免费、快速、漂亮的女邮差？](http://3.cn/100mI-mkU) 38 | 39 | Postman（邮差）你肯定听说过，那 Postwoman（女邮差） 呢？不满足于 Postman 的收费，又受不了 cURL 等工具的繁琐用法，Liyas Thomas 决定用 node + Vue 自己造一个轮子，这便是 Postwoman 的由来。Postwoman 是一款开源的请求构造器，支持调试 Restful 接口，WebSocket、GraphQL 等也不在话下，用法与 Postman 没有太大区别，最重要的是免费，永久的免费。 40 | 41 | ## 沧海拾遗 42 | 43 | > 沧海拾遗，积跬步以至千里 44 | 45 | #### [使用 react-docgen 自动生成组件文档](http://3.cn/100mI-mO2) 46 | 47 | 写文档是不可能的，但是开发却也离不开文档，那么一个自动化文档就是必不可少的！如果你也用 React 完成开发工作，相信 react-docgen 会给日常的开发工作带来极大的便利，统一文档格式，节省时间做更多有意义的事情～～ 48 | 49 | #### [手写 webpack 打包一个 react 单页面应用](http://3.cn/-100mIni7) 50 | 51 | 打包是前端工程化中不变的问题，如何高效高质量的完成它，在开发和发布过程中，都可以节省很多成本。但是你真的了解打包的原理么？这次我们就从一个简单的 react 单页面应用着手，来详细讲讲 webpack 到底干了啥。 52 | 53 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/19.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img10.360buyimg.com/ling/jfs/t1/149414/10/6492/206030/5f446c39Eaf0706a1/76c6105a450e028b.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.19 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [[官宣] TypeScript 4.0 正式发布](http://3.cn/-100no97u) 12 | 13 | TypeScript 4.0 正式发布啦！官方团队在这一版本中加入了如可变参数元组类型、构造函数的类属性推断、短路分配运算符、自定义 JSX Factories 等多项激动人心的特性，同时官方站点也进行了重写，看上去更加清爽。在 Stackoverflow 的开发者报告中，TypeScript 已经成为仅次于 Rust 的第二受欢迎语言，它的社区已经成熟完善，并在不断发展，拥有很多很棒的新资源可供学习，如果你之前没有使用过 TypeScript，那么现在正是上车的最佳时机。 14 | 15 | #### [不用 Javascript！基于 CSS Space Toggle + HTML 打造一个扫雷游戏](http://3.cn/100-noa5j) 16 | 17 | Space Toggle 是 CSS 变量的一种 trick 用法。使用复选框作为数据来源，通过一定的 CSS 变量组合，Space Toggle 使 CSS 具备了基础的逻辑控制能力。这个仓库仅使用 CSS + HTML 实现一个扫雷游戏，ReadME 文档中也介绍了 Space Toggle 的用法以及社区的讨论。从仓库中可以看到，除了扫雷游戏，这个技巧还有其他用法。比如，有人打造了一个 7 段数码管 Orz...。 18 | 19 | #### [深入解析 CSS 样式表中 line-height 和 vertical-align 对渲染结果的含义](http://3.cn/1-00noaPm) 20 | 21 | 你真的了解那些的 css 样式么？很多属性的工作原理看似简单，在渲染元素时却隐藏了很多页面渲染的小秘密。其中就包括了本文介绍的字符在渲染结果中所占区域的决定因素，文中对多字符组合的行的高度，和字符在行中的垂直方向对齐作了深入解析，如果你专注于这个方向，相信这是在能力提升中必不可少的一课。 22 | 23 | ### 桌面开发 24 | 25 | #### [多语言 Cloud & Desktop IDE 的架构设计](http://3.cn/100no-bKW) 26 | 27 | Eclipse Theia 是一个可以利用最先进的 Web 技术开发多语言的 Cloud & Desktop IDE 的可扩展的平台。使用 Theia，你可以从源码开始开发一个 IDE，然后在浏览器或者以本地桌面应用程序的方式运行。如今 Cloud IDE 的概念大行其道，想了解业内先驱 Theia 的架构设计和技术选型吗？来看看官方的架构设计文档吧。 28 | 29 | ### 图形编程 30 | 31 | #### [基于虚幻 4 引擎打造的国产游戏《黑神话: 悟空》刷爆全网](http://3.cn/10-0noazr) 32 | 33 | 最近, 使用虚幻 4 游戏引擎打造的国产游戏《黑神话: 悟空》的游戏试玩视频刷爆全网, 甚至在 YouTube 也是反响热烈, 游戏从画质、特效、动画等多方面都属于高水准, 网友看得热血澎湃, 惊叹: 这将是第一款国产3A大作！ 34 | 35 | ### 工具推介 36 | 37 | #### [react-spring，一个API更全面的物理引擎驱动曲线的动画框架](http://3.cn/10-0nobKV) 38 | 39 | 一个使用物理引擎（弹簧/缓震器）计算动画曲线的动画框架。比起react-motion，提供了更多的动画曲线配置项；在使用上，支持hooks和组件的方式调用，方便驱动不同的渲染方式。 40 | 41 | ## 沧海拾遗 42 | 43 | > 沧海拾遗，积跬步以至千里 44 | 45 | #### [十分钟打造 3D 物理世界](http://3.cn/100n-oaka) 46 | 47 | 最近小助手的朋友圈被《黑神话：悟空》刷屏了，不知道你们有没有看他们的宣传片呢？各个方面品质都很超预期，也期待这款游戏可以尽快问世。同样对于 H5 小游戏来说，也是需要时间和开发者们在不断的去打磨细节才可以有更高的品质给到玩家或是用户，选择 3D 引擎打造一个拟真的物理世界就更是如此，而本文提供了一个快速上手的教程，详细讲解了开发 3D 项目中会遇到的问题以及各种工具和解决方案，快来开启“新世界”的征程吧！ 48 | 49 | #### [什么时候网页会使用 GPU 加速](http://3.cn/100no-bwA) 50 | 51 | 总所周知，GPU 作为专门在 PC、工作站、游戏机等各种设备上运行绘图运算工作的微处理器，在图形处理上有着无可比拟的优势，那么如果你写一个网页，在什么时候会使用 GPU 完成页面渲染，提供更加丝滑的体验呢？本文为你一一揭晓。 52 | 53 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/20.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img10.360buyimg.com/ling/jfs/t1/116095/1/16821/206634/5f4dac95E66d6ecc7/4b19bd98f85ed54a.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.20 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 前端框架 10 | 11 | #### [TypeScript + React 的最佳实践](http://3.cn/100nK-q28) 12 | 13 | 使用 TypeScript 编写 React 应用的类型 Cheatsheets，也可以看做是 TypeScript + React 最佳实践。它介绍了我们在使用 React 各种特性时最佳的 TypeScript 类型写法，帮助你解答各种类型上的问题。看完这篇，妈妈再也不用担心我不会写 tsx 了。 14 | 15 | #### [Vue3 Compiler 优化细节，如何手写高性能渲染函数](http://3.cn/10-0nKqhR) 16 | 17 | Vue3 通过编译时和运行时相配合，让 diff 性能进一步得到提升。文章详细介绍了 Compiler 会对模板分析出哪些关键信息，运行时又是怎样利用这些信息对 diff 进行优化的。假如我们不编写 template 而是直接编写渲染函数，作者也在文末介绍了我们怎么样编写渲染函数能够让 diff 进入优化模式。文章整体内容非常硬核，需要花费一定时间的进行阅读，希望读者能坚持到到最后。这里姑且引用文章中的最后一句："Don't stop learning..."，共勉。 18 | 19 | ### 基础技术 20 | 21 | #### [Core Web Vitals--聚焦新一代Web性能体验指标](http://3.cn/10-0nKq29) 22 | 23 | 对于如何衡量用户体验，Google提供了多个工具（Lighthouse等等），在Chrome83中新增了Core Web Vitals指标。主要关注用户体验的3个方面：加载、交互性和视觉稳定性。对应的指标为：LCP、FID、CLS。降低使用者门槛。 24 | 25 | #### [美国人如果把根域名服务器封了，中国将会从网络上消失？](http://3.cn/100nKqh-S) 26 | 27 | 自从美国宣布“清洁网络”行动后，很多懂点网络的人，第一反应是，美国人会下手根域名服务器吗？这里先给出简要回答：不排除这种可能性，但并不是没有办法。一句话原因：虽然根不在我们手里，但我们有镜像。 28 | 29 | ### 图形编程 30 | 31 | #### [“亲亲抱抱举高高”？这款游戏满足你对VR的所有期待](http://3.cn/100-nKqxe) 32 | 33 | 虚拟现实的概念在近几年被提及的越来越频繁，但对于大众来说似乎还是一款“科幻”产品。由 Valve 公司出品的《半衰期》VR 游戏，结合 VR 设备操作上更为多样的操控设备，进行了不同于以往鼠标键盘操控游戏的交互尝试，使得游戏中的角色动作更为接近真实世界，也产生了更多的可能性。 34 | 35 | ### 人工智能 36 | 37 | #### [3D特效师可以下班了](http://3.cn/100-nKp41) 38 | 39 | 还记得“抢钱大楼” SM 娱乐公司门口的电子屏海浪吗？一看就很贵。但 DeepMind 和斯坦福等一众科学家研究出了一款图网络模拟器——GNS 框架，转变思路，由当前市场上普遍使用的通过物理规律进行 CG 计算，转向机器学习以实现物理模拟器的方案。这将大大降低 CG 特效的门槛，可能将深远地影响到这一市场。 40 | 41 | ## 沧海拾遗 42 | 43 | > 沧海拾遗，积跬步以至千里 44 | 45 | #### [京喜小程序跨端开发实战](http://3.cn/-100nKon2) 46 | 47 | 京喜小程序的在跨端开发上的开发与优化实战文，详细讲述了 19 年双十一期间，京喜改版中面临的一系列问题，以及相关的思考。其中对于 Web、小程序、RN 三端详细提出了很多思路和实践集锦，很值得借鉴。 48 | 49 | #### [小程序体验评分满分优化](http://3.cn/1-00nKqxd) 50 | 51 | 同样是京喜小程序，历经多次改版和优化后，在 Audits 评分中已经获得了满分。文中提到了多种优化的细节和方法，尝试了很多优化的可能，相信这些思路能够在其他的项目中，也能够得到应用，并大幅提升性能和用户的体验。 52 | 53 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/21.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img10.360buyimg.com/ling/jfs/t1/138789/2/7786/206164/5f56f68eE132ae8b3/676d9ba500416d23.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.21 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [Lodash 安全漏洞背后，你不得不知道的 JavaScript 知识](http://3.cn/10-0o4C6t) 12 | 13 | 该篇文章内容可以加深读者对JavaScript基础知识的理解，通过对`Loadsh`潜在安全漏洞及其修复方案的分析，可以帮助读者对原型污染的产生、原型污染攻击方式及相关防范措施进行深入了解，涉及到的知识点包括但不限于：`Object 原型`、`原型`、`原型链`、`NodeJS 相关问题`、`Object.create 方法`、`Object.freeze 方法`、`Map 数据结构`、`深拷贝`。 14 | 15 | #### [从 Web 图标演进历史看最佳实践](http://3.cn/100-o4Aqy) 16 | 17 | 在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。 18 | 19 | ### 前端框架 20 | 21 | #### [用 React 和 Vue 做了两个完全一样的 App 之后，这是我的完整对比评测](http://3.cn/100-o4Acy) 22 | 23 | “对比一下 React 和 Vue” 是一道常见的面试题。Sunil Sandhu 兄弟想要更为中立地回答这个问题，所以他一直在尝试构建一个标准、完整的 Todo App 来对比这俩框架的工作流程。在 React Hooks 和 Vue Composition Api 分别发布后，他发布了 2020 版的 React & Vue 对比评测。 24 | 25 | ### 图形编程 26 | 27 | #### [不顾一切找圆角 —— Figma 实时平滑圆角方案探究](http://3.cn/100o4-Acz) 28 | 29 | 你还在粗暴地使用直角圆角吗？在 iOS7 时代，苹果对主屏图标做了非常精巧的改动，引入了平滑圆角的概念。使用数学语言来描述便是：平滑圆角的边缘曲率是连续的，而直角圆角不是。这看似微不足道，但这种设计小细节却有很大的体验影响。 30 | > 【译文】http://www.martinrgb.com/blog/#/Figma_Round_Corner 31 | 32 | ### 设计哲学 33 | 34 | #### [细说 SOLID —— OOD 的 5 原则](http://3.cn/-100o4C6u) 35 | 36 | 在程序设计领域，面向对象是我们逃不开的话题，而 SOLID 原则是一种为了避免不良而设计的编码标准，是所有的软件开发人员都应该清楚的，但很少人能够概括面向对象方法和原则，面向对象设计和过程式设计的关键区别在哪，以及怎么定义和衡量可读性、究竟什么是可复用性、怎样的代码称为脆弱和僵化的。这篇文章从 SOLID 原则出发，通过更贴近业务的解释性文字和具体的代码示例来回答这些问题。 37 | 38 | #### [只写 2 行代码，为何需要 2 天？](http://3.cn/100o4C-mf) 39 | 40 | 很多时候我们会把代码行数作为一个重要的 KPI 指标，来量化我们的工作，但是它真的可以决定我们工作的价值么？针对不懂技术的上司或者 PM，该如何回答这个问题？本文列出了一些可能的理由。 41 | > 【译文】https://zhuanlan.zhihu.com/p/162925587 42 | 43 | ### 人工智能 44 | 45 | #### [【好书推荐】算法的落地《推荐系统实践》](http://3.cn/100o4Bn-q) 46 | 47 | 本书主要提供了搭建推荐系统过程会遇到的数据来源，数据分类，算法/模型选择，以及效果评价等问题的思考方向。并以大量工程化的内容结合少量算法讲解，十分适合了解算法落地。 48 | > 【豆瓣评分 8.1】https://book.douban.com/subject/10769749/ 49 | 50 | ## 沧海拾遗 51 | 52 | > 沧海拾遗，积跬步以至千里 53 | 54 | #### [从程序媛角度去看项目管理](http://3.cn/10-0o4Aqz) 55 | 56 | 合理的设计项目构架很重要，合理的去管理项目同样重要，如何分析需求、拆分、排期是开发中重要的一环。虽然学校不会教大家该怎么做，但是我们的程序媛小姐姐却深谙此道，现在就让小姐姐为大家补上这关键的一课，管理预期，控制风险，让上线再无压力。 57 | 58 | #### [Design Tokens —— 设计与开发碰撞的火花](http://3.cn/100o4-ATp) 59 | 60 | 前端开发的过程中，设计师的参与是必不可少的，他们也是开发中的重要一环。在业务流程中，设计师将自己的设计稿交付给开发者，期望可以在项目中完美复现，但是想要在所有细节上都能复刻难度非常大，这时候 Design Tokens 就承载者双方的期待应运而生。 61 | 62 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/22.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img20.360buyimg.com/ling/jfs/t1/150452/32/705/206759/5f601f45Ed0bf705e/16126177d509fdfd.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.22 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [Text Fragments，一种你没见过的锚点技巧 ](http://3.cn/100-ot74Z) 12 | 13 | Text Fragments（文本片段）是 Chromium 80+ 的新功能。使用 Text Fragments，我们可以在 URL 中指定文本片段作为锚点。当浏览器打开一个带有 Text Fragments 的 URL 时，浏览器会对匹配到的文本进行强调，引起用户的注意。 14 | 15 | #### [AVIF 已经来了](http://3.cn/100ot-5pB) 16 | 17 | 本文使用四幅不同的图片：细节丰富的照片/平面插画/重型SVG/渐变图作为 Demo，将常见的图片格式：JPEG，WebP，PNG 与 AVIF 进行比较，揭秘 Netflix 为什么选择 AVIF 作为下一代的图片压缩技术。【译文】https://juejin.im/post/6870741995204132877 18 | 19 | #### [【WASM 开发】Emscripten 使用入门](http://3.cn/100o-t6pq) 20 | 21 | Emscripten 是 WebAssembly 工具链里重要的组成部分。它能够帮助我们把 C/C++ 编译为 asm.js 或 WebAssembly，输出可以运行在 Web、Node.js 和 wasm runtimes 的代码。文章从一个 C 的 HelloWorld 展开，逐步介绍了调试、WASM 与 JavaScript 相互调用、Emscripten API 等知识点。阅读完本文后，读者能够掌握 Emscripten 的基本用法，学习到 asm.js/WASM 与 JavaScipt 实现交互的部分细节。 22 | 23 | ### 前端框架 24 | 25 | #### [【React 动态】React Router 6 新特性](http://3.cn/100ot5-DX) 26 | 27 | React Router 最近发布了 6.x 的 beta 版本，相信很快将会发布正式版。作为 React 生态的重要组成部分，React Router 被广泛用于各 React 项目中。本次的升级将会引入哪些新特性、又是否会带来非兼容性改动呢？本文详细介绍了 React Router 6 的各项具体改动，其中 Route/Link 组件需要书写相对路径、支持以对象形式定义路由以及 suspense-ready navigate API 比较值得关注。 28 | 29 | ### 服务端开发 30 | 31 | #### [libuv 教程](http://3.cn/100ot-5DY) 32 | 33 | 熟悉 Node 的同学，对 libuv 肯定不陌生。libuv 是一个高性能的，事件驱动的I/O库，并且提供了跨平台（如 Windows，Linux）的API。[Nikhil Marathe](http://nikhilism.com/) 在写node-taglib 的时候苦于没有好理解的 libuv 教程，于是就写了这本小册，现在已经被纳入 libuv 官方文档，有兴趣的同学，不妨尝试看一看，一定会为你打开一个新的世界。 34 | 35 | ### 设计哲学 36 | 37 | #### [如何为数据可视化选择颜色？](http://3.cn/100ot6p-r) 38 | 39 | 选择好用的颜色往往不是一件容易的事情，为图表选择合适的颜色也是如此，如果您完全不懂颜色，在选择颜色这件事情上有很大的困难，那么希望本文可以教会您寻找适合数据可视化的颜色，或者是制作 PPT 的色板。 40 | 41 | ## 沧海拾遗 42 | 43 | > 沧海拾遗，积跬步以至千里 44 | 45 | #### [CSS层叠上下文和层叠顺序原理探究](http://3.cn/100o-t750) 46 | 47 | 作为前端开发，CSS 是我们惯手的工具，它和 HTML 充斥着日常工作的方方面面，但是对于它的原理却不是每个人都可以心中有数的。作为一篇 15 年的“古文”，这些细致的知识点经过岁月的沉淀至今，都依旧是大家需要好好学习的。 48 | 49 | #### [设计稿の超完美复刻](http://3.cn/1-00ot751) 50 | 51 | 完美还原设计稿，不仅承载着设计师们的期待，更是对前端基本功的一个考验，但是很多时候，除了技术本身，还有很多以外的东西是我们需要思考判断的。如果只是复刻设计稿，在实际工作中并不足以将项目的体验做到极致，发挥出主观的能动性才能让项目完成最终 101% 的呈现。 52 | 53 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/23.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img13.360buyimg.com/ling/jfs/t1/150617/9/1290/206619/5f6952f8Ee23dab26/468c1983f71c544d.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.23 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 前端框架 10 | 11 | #### [【Vue3】 Live Free Online Announcement](http://3.cn/100oM-BM2) 12 | 13 | 2020年9月18日，Vue 3.0 One Piece 历时两年终于发布了，当天晚上尤雨溪也在主题为“Live Free Online Announcement”的线上直播中讲述了整个 Vue 3.0 的历程，同时介绍了各种 Vue 3.0 的新特性，以及一些未完特性的计划表。在直播中尤老师还解答了很多社区中特别关心的问题，以及很多开发者的疑惑。那么 Vue 3，会是你心中的 One Piece 么？ 14 | 15 | #### [【Vue3】Vue Teleport 快速上手](http://3.cn/1-00oMBM4) 16 | 17 | Teleport 是 Vue3 的一个新特性，作用与 React Portal 类似。它能让我们把指定的模板节点渲染到特定的容器上，非常有助于实现如 Modals、Notifications 等“全局”模块。本文介绍了引入 Teleport 的背景以及其基本用法，配合 Vue3 teleport 文档服用，效果更佳。 18 | 19 | #### [70 行代码实现 Vue Composition API](http://3.cn/100oMB-he) 20 | 21 | 本文介绍了 Vue3 作者尤大在 GitHub 上发布的一个可以使用 Vue 的写法来渲染成 Web Component 的验证性库。vue-lit 借助 @vue/reactivity 和 lit-html 两个库将 vue 与 Web Component 结合到一块儿，这个想法还是非常有趣的。众所周知 Web Component 是浏览器原生的组件化能力，如果我们能用现代前端框架的 API 来进行原生组件化开发，而不需要引入前端框架和打包编译，那岂不是非常美好。vue-lit 本身非常短小精悍，建议可以通过阅读源码了解精髓。 22 | 23 | ### 图形编程 24 | 25 | #### [Twitter 点赞动画集锦](http://3.cn/10-0oMBM1) 26 | 27 | 前段时间在 Twitter 上只要是附上 #AppleEvents 的推文，都有属于苹果的点赞动画，其实早在之前 Twitter 就有许多不一样的点赞动画了，这里集合这些不错的设计～ 28 | 29 | #### [使用 WebGL 实验图像三角形实现转场效果](http://3.cn/100o-MANS) 30 | 31 | 作者凭借着对三角几何图形浓厚的爱，设计了一种针对图像的三角形转场效果。基于这一想法，作者提供了5种转场效果，包含区域切割、图形翻转等。 32 | 33 | ### 工具推介 34 | 35 | #### [深入浅出现代 Web 编程](http://3.cn/1-00oMChJ) 36 | 37 | 一站式学习 React, Redux, Node.js, MongoDB, GraphQL 以及 TypeScript！这门课程会向你介绍基于 JavaScript 的现代 Web 编程技术（翻译质量和设计质量都很还不错）。 38 | 39 | ## 沧海拾遗 40 | 41 | > 沧海拾遗，积跬步以至千里 42 | 43 | #### [Vue 1.x vs Vue 2.x](http://3.cn/100oM-BM3) 44 | 45 | 虽然 Vue 已经释出 3.0 正式版本，但是这并不意味着 1.x 和 2.x 就失去了价值，相反这正是一个最好的时间来回顾 Vue 的发展历程，通过明晰 Vue 每一代的差异来更好的理解 Vue3 新版的设计思路，来理解设计者在规划每个版本中的特性解决的实际问题和用心。 46 | 47 | #### [Taro x Vue3 小程序开发的新方案](http://3.cn/100oM-ANR) 48 | 49 | 作为开放式跨端框架解决方案，Taro3 在不久前也释出了正式版本，或许你已经体验过了 Vue 甚至是 jQuery 来开发小程序，同样早在 RC 版本，Taro 团队就已经完成了对 Vue3 的支持，如今 Vue3 发布正是时候，还不快来使用 Vue3 体验一把小程序开发。 50 | 51 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/24.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img30.360buyimg.com/ling/jfs/t1/113426/32/18535/207031/5f6fff04E0667ed52/644a0cacec237581.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.24 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [TC39: proposal-decorators 装饰器提案](http://3.cn/100p3sl-N) 12 | 13 | TC39 对装饰器方案的研究已经有超过5年的历史，本次提出的方案与Babel基于旧提案实现的装饰器、Typescript 的试验性装饰器都有所不同，这主要是出于对引擎的可优化性考虑。 14 | 15 | ### 前端框架 16 | 17 | #### [100 行代码重写 Recoil 状态管理库](http://3.cn/1-00p3tBd) 18 | 19 | Recoil 是 Facebook 官方推出的一个状态管理器解决方案，更好地拥抱 hooks。本文作者用 100 行内的代码实现了一个简化版的 Recoil，其对 Recoil Atom 和 Selector 的实现都做了手把手的讲解，有利于读者更好地理解 Recoil 的个中原理。 20 | 21 | #### [microcosmos 微前端框架的实现](http://3.cn/1-00p3sC8) 22 | 23 | 作者参考阿里 qiankun 微前端框架的设计思路，自己实现了一个微前端框架。本文对微前端的方案介绍、实现思路都提供了详细的阐述，对于微前端技术感兴趣的同学很有帮助。 24 | 25 | ### 图形编程 26 | 27 | #### [Airbnb 发布 Visx 1.0 正式版](http://3.cn/100p-3sC7) 28 | 29 | 时隔三年，Airbnb 使用 TypeScript 重写并发布了 Visx 1.0 正式版，Visx 是一套结合 D3 开发的 React 低阶可视化原型组件。 30 | 31 | ### 人工智能 32 | 33 | #### [Danfo.js ：深受 Pandas 启发的 JavaScript 开源库](http://3.cn/100-p3rRi) 34 | 35 | Danfo.js 是个 JavaScript 开源库，提供了高性能、直观易用的数据结构，支持结构化数据的操作和处理。Danfo.js 深受 Python Pandas 库的启发，并提供了类似的接口/API。因此熟悉 Pandas API 且了解 JavaScript 的用户可以轻松上手。 36 | 37 | ### 工具推介 38 | 39 | #### [为什么要使用 pnpm？](http://3.cn/100p-3sRp) 40 | 41 | pmpm 是类似于 npm 和 yarn 的一个 Javascript 包管理器。作为 npm 的直接替代品，pnpm 的速度更快、效率更高，且不存在像 yarn 一样的磁盘空间占用问题，非常适合 monorepos 的仓库模式。如果你感兴趣了，一定要读读这篇 pnpm 作者写的文章：为什么要使用 pnpm？ 42 | 43 | ## 沧海拾遗 44 | 45 | > 沧海拾遗，积跬步以至千里 46 | 47 | #### [GraphQL 入门小册](http://3.cn/-100p3rBN) 48 | 49 | 12年内测，15年发布，18年成立开源基金会，如今已经 2020年了，GraphQL 多年来在社区得到了长足的发展，也一步步被很多项目采用，逐渐成为很多项目选择方案之一。如果你还没有上手，那么这篇 GraphQL 的入门就很能帮助快速理解，我们可以不用 GQL，但是不能完全不懂 GQL。 50 | 51 | #### [CreateJS 入门攻略](http://3.cn/10-0p3sRq) 52 | 53 | H5 游戏开发了解一下～～来自被单小姐姐的 CreateJS 入门攻略，如果你也需要完成 Web 端的游戏开发或者相关的需求，这篇踩坑攻略相信会很有帮助。 54 | 55 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/25.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img13.360buyimg.com/ling/jfs/t1/117628/13/19961/206371/5f845304E26f04ff1/62f212f29f1d1062.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.25 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [看完这篇文章，我奶奶都懂了https的原理](http://3.cn/100r-jEX4) 12 | 13 | 文章由浅入深展示了对称加密、非对称加密、数字证书、CA机构、数字签名等在 https 协议过程中所扮演的角色，语言通俗易懂，虽然拉着奶奶一起看，奶奶表示看不懂，但还是值得推荐！ 14 | 15 | ### 工程化 16 | 17 | #### [阔别两年，webpack 5 正式发布](http://3.cn/-100rjG9H) 18 | 19 | 自从 2018 年 2 月，Webpack 4 发布以来，Webpack 就暂时没有更进一步的重大更新，为了保持 API 的一致性，旧的架构没有做太多改变，遗留了很多的包袱。阔别 2 年多后，2020 年 10 月 10 日，Webpack 5 正式发布，并带来了诸多重大的变更，将会使前端工程师的构建效率与质量大为提升。Webpack 5 的 Release Note 非常长，本文尝试摘出最简练的信息。 20 | 21 | ### 图形编程 22 | 23 | #### [AR 核心概念及技术解析](http://3.cn/100rj-FIE) 24 | 25 | 这是谷歌推出的 ARCore 开发入门课程系列中的第二节课，介绍了 AR 的六大理念，以及 ARCore 实现这六大理念的思路与技术解决方案。文章开头提到的上节课《解密 AR 增强现实》的内容也同样值得一读。 26 | 27 | #### [RTF: 用 React 来写 three.js](http://3.cn/-100rjEX2) 28 | 29 | 如何优雅地使用 React 写 three.js，本篇文章提供了入门教程。文中罗列了选择 R3F（react-three-fiber）的理由：组件化场景的开发模式可读性极高且便于复用，内置了很多相当有用的辅助函数，暴露了足够多的 hooks 以便开发者灵活扩展，提前预处理画布尺寸，不限制 three.js 的使用版本，对二次渲染的算法做了优化。 30 | 31 | ### 人工智能 32 | 33 | #### [AI 聊天机器人——京东·数据科学实验室](http://3.cn/100rjE-GE) 34 | 35 | A Survey on Dialogue Systems: Recent Advances and New Frontiers.（智能对话系统调查：前沿与进展）\ 36 | \ 37 | 虽然也是2018年的，全文引用了124篇论文，是一篇综合全面的介绍对话系统的文章，现在看来仍具有参考意义。 38 | 39 | #### [论文解读：基于动态词表的对话生成研究](http://3.cn/100rjE-X3) 40 | 41 | 虽然是18年的文章，但通过本文主要可以了解聊天机器人的分类以及实现思路，至于本文的核心内容，用动态词典替换静态词典的实现思路以及优化词预测损失和回复生成损失方法，则适合更深入研究的读者。 42 | 43 | ### 工具推介 44 | 45 | #### [历经十年岁月磨砺，这个网页视频播放器中的王牌终于开源了！](http://3.cn/100rj-G9I) 46 | 47 | ckplayer 是一款用于网页上播放视频的软件，它有着高度自定义化的特点；而且作为一个老牌的网页视频播放器，使用起来只需几个简单的文件即可插入视频。而在最近，该播放器作者在更新了 X2 版本后，又将 ckplayer 正式开源给各位开发者，本文将带大家简单介绍该播放器的特点以及使用和安装方式。 48 | 49 | ## 沧海拾遗 50 | 51 | > 沧海拾遗，积跬步以至千里 52 | 53 | #### [Nginx 配置 HTTPS 服务器](http://3.cn/100rjG-mg) 54 | 55 | 了解了那些关于 HTTPS 的基础，在实际的项目中该如何应用呢？本文讲解了如何使用 Nginx 来配置 HTTPS 服务器，还不快用起来，给自己的小网站按上象征安全认证的「绿锁」。 56 | 57 | #### [Webpack原理浅析](http://3.cn/100r-jGmf) 58 | 59 | Webpack 5 正式发布了，当我们抽丝剥茧的去学习其中的内容时，还是需要先对 Webpack 有更为深刻的了解，这篇 Webpack 原理浅析，就是很好的教程，文章以实现一个简单的打包工具为路线图，逐一解析了 Webpack 中的各项能力，如果将它放在收藏夹吃灰就太可惜了。 60 | 61 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/26.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img12.360buyimg.com/ling/jfs/t1/127434/8/15443/206447/5f8d8288E9059593b/e6689387e072fecb.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.26 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [NPM v7.0.0 发布](http://3.cn/100-s3uf4) 12 | 13 | npm v7.0.0 带来了比较多的新特性，`Workspaces`、`peerDependencies`自动被安装、支持`yarn.lock`等，将与`NodeJS v15`一起发布。如果你想立即尝试，可以使用`npm i -g npm@7`在终端运行安装。 14 | 15 | #### [Chrome 正在启用 HTTP/3，支持 IETF QUIC](http://3.cn/100s3u-oG) 16 | 17 | QUIC（Quick UDP Internet Connections）是谷歌制定的一种基于UDP的低延时的互联网传输层协议，结合了TCP、TLS等协议的特性。HTTP/3 是HTTP的最新版本，仅在QUIC上运行。\ 18 | 译文：https://www.oschina.net/news/119045/chrome-is-deploying-http3-and-ietf-quic 19 | 20 | ### 工程化 21 | 22 | #### [Webpack 5 Module Federation: JavaScript 架构的变革者](http://3.cn/1-00s3vm0) 23 | 24 | `Module Federation`是 Webpack 5 的新特性之一，它可以使 JavaScript 应用在客户端或服务器上动态运行另一个 bundle 或者 build 的代码。在了解学习这个特性的过程中，本文是最好的教程，因为它是由`Module Federation`的作者之一的[Zack Jackson](https://github.com/ScriptedAlchemy)发布的，他在文中写到"`Module Federation`之于`JavaScript Bundler`，如同`Apollo`之于`GraphQL`"，并阐述了相关的技术实现以及项目实践。\ 25 | 译文: https://zhuanlan.zhihu.com/p/120462530 26 | 27 | ### 图形编程 28 | 29 | #### [iOS UIScrollView 动画的力学原理](http://3.cn/100s-3uEe) 30 | 31 | 了解动画效果的力学原理对于设计的还原度非常重要，本文深度剖析 iOS UI 滚动视图动画的力学原理。\ 32 | 译文：http://www.martinrgb.com/blog/index.html#/HOW_UIScrollView_Works 33 | 34 | ### 设计哲学 35 | 36 | #### [被忽视的设计：中文字体](http://3.cn/100s-3uS6) 37 | 38 | 字体是设计的基本要素之一，然而关于 Type Design 的视频少之又少，非专业人士对其认知也非常有限，很多人都会觉得：“啊，原来空气也是要设计的吗？”，字体作为设计的基本要素之一，它关乎着一个民族的设计风格，这个视频用短短的六分钟简单动画和旁白将中文字体的基础知识给说明白了～ 39 | 40 | ### 工具推介 41 | 42 | #### [svga——AE动画的另一个实现/展示方法](http://3.cn/15w-rjhn) 43 | 44 | 相比起有名的bodymovin lottie，svga使用了另一种方法记录动画信息：每一帧的信息在导出前计算好，记录在导出好的文件中，播放器在渲染时只需逐帧渲染，不需关心关键帧间插值的计算。由此带来的是解析、播放器的库比lottie的精简许多(gzip前57KB)，导出的文件也较小；另外限制也更多：不支持复杂的矢量形状图层、不支持AE自带的渐变、生成、描边、擦除等、对设计工具原生动画不友好，对图片动画友好 45 | 46 | ## 沧海拾遗 47 | 48 | > 沧海拾遗，积跬步以至千里 49 | 50 | #### [设计稿 101% 还原之 Web 字体处理](http://3.cn/100s3u-oH) 51 | 52 | 字体设计是设计中的基本要素，同样也是在还原设计稿的过程中，提升用户体验的重要一环，在兼顾体验的同时 101% 的来还原设计稿的所有细节才能不负项目中所有同学的心血。这篇关于 Web 中文字体处理的方案总结，相信会让大家都有所收获，特殊字体和网页性能再也不是一道单选题了～ 53 | 54 | #### [1KB 的 3D 游戏 ？？？](http://3.cn/10-0s3v7p) 55 | 56 | JS1k 这个大赛不知道有多少同学听过，在限制 1024 字节内的 JavaScript 代码完成一个参赛作品，而本期推荐的这个 3D 小游戏就出自这个比赛，很难以置信对吧，还不快进来爽一把！（顺便给大家一个小问题，如果让你来用 1KB 以内的代码完成一个 3D 小游戏，可以做到吗？） 57 | 58 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/27.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img10.360buyimg.com/ling/jfs/t1/146858/12/12067/206319/5f978b2bE84381631/ce7a68044bab1870.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.27 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [Rust 给 web 开发生态带来的冲击](http://3.cn/100sXWm-c) 12 | 13 | 伴随着 WebAssembly 的面世，越来越多的 Javascript 工具选择使用 Rust 语言来开发。众所周知，Javascript 是单线程的，基于事件循环和垃圾回收机制；而 Rust 则是基于静态类型、没有垃圾回收机制且支持多线程的。那么，使用 Rust 开发 web 应用相较于使用 Javascript 来开发具有哪些好处？本文提供了丰富的 Benchmark 来印证 Rust 在某些场景下的性能优势，相信随着社区应用 Rust 的方案日益完善，Rust 在浏览器端也会大放异彩。 14 | 15 | #### [聊聊 CSS Functions](http://3.cn/-100sXVqJ) 16 | 17 | 随着响应式设计的发展和日益细化，CSS 也在不断发展，并为开发者提供更多的样式控制权，本文从 min(), max(), clamp() 这三个函数来实现动态布局。 18 | 19 | ### 前端框架 20 | 21 | #### [React：发布正式版 v17.0](http://3.cn/10-0sXWmd) 22 | 23 | React 17 终于发布了，本次的发布非比寻常，它没有增加任何面向开发者的新特性，但这个版本会使得 React 自身的升级变得更加容易，想了解更多具体详情请查看更新日志。 24 | 25 | #### [Create React App 正式发布！](http://3.cn/10-0sXWCa) 26 | 27 | CRA 是用于创建 React 项目的脚手架，它封装了 Webpack、Babel 等工具链。最近 CRA 发布了 4.0 正式版，对工具链进行了升级，并引入了如能代替 React Hot Loader 的 Fast Refresh、PWA 相关的 Workbox、方便测试网页渲染性能指标的 web-vitals 等新工具。一起来快速了解下吧~ 28 | 29 | ### 服务端开发 30 | 31 | #### [Node.js 15 正式发布](http://3.cn/100-sXWC9) 32 | 33 | 上期期刊我们提到了 npm 7 可以直接升级体验，同样它也是在升级 Node.js 15 的基本配置之一，而这个新版本的 Node.js 中还包含了许多新特性：AbortController、N-API 版本 7、unhandled rejections 默认抛出、QUIC、V8 8.6 等等。 34 | 35 | ### 设计哲学 36 | 37 | #### [临时方案传染性](http://3.cn/100sXW-6z) 38 | 39 | 迫于业务的复杂性与业务常见的紧迫性，「临时性方案」大量存在于研发工作中，常常引发「临时方案传染」，导致项目的开发越来越困难。文中分析了这种模式产生的原因，修正成本，以及应对方案，了解后有助于研发在项目过程中保持较好的开发意识。 40 | 41 | ### 人工智能 42 | 43 | #### [简单粗暴 TensorFlow.js：从安装到训练全程实例教学](http://3.cn/100sXW6-y) 44 | 45 | 对于前端来说，TensorFlow.js 充满了诱惑，它能直接在浏览器（PC/Mobile）、Node.js、微信小程序环境中进行模型部署和训练，本文除了介绍了这些优势，还介绍了如何在浏览器中使用 MobileNet 进行摄像头物体识别，让读者实践感受其魅力。 46 | 47 | ### 工具推介 48 | 49 | #### [RSLint: 一款超快的 JavaScript linter](http://3.cn/100sX-Vce) 50 | 51 | 使用 Rust 来编写的一款超快的、可定制的以及易使用的 JavaScript linter。它的目标是为整个 JavaScript 生态系统提供超快以及对用户友好的 linter。 52 | 53 | ## 沧海拾遗 54 | 55 | > 沧海拾遗，积跬步以至千里 56 | 57 | #### [Serverless——云计算时代的号角](http://3.cn/-100sXWQM) 58 | 59 | Serverless 架构即“无服务器”架构，它是一种全新的架构方式，是云计算时代一种革命性的架构模式。与云计算、容器和人工智能一样，Serverless 是这两年IT行业的一个热门词汇，它在各种技术文章和论坛上都有很高的曝光度，它就像是一把号角，宣告了云计算时代不断向着各个领域不断扩张的序幕。 60 | 61 | #### [CSS 预处理器已经过时了么？](http://3.cn/100sXW-6A) 62 | 63 | 十二年沉浮，CSS 预处理已经成为项目中不可或缺的一部分，很多时候我们已经非常享受于 CSS 预处理器带来的便捷，但是多年来 W3C 的 CSS 工作组也一直在持续从社区汲取营养，加快 CSS 的迭代。那么到现在为止，CSS 是否可以取代 CSS 预处理器的地位？CSS 预处理器会不会成为 CSS 过渡时期的产物呢？ 64 | 65 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/28.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img20.360buyimg.com/ling/jfs/t1/124524/40/16981/206493/5f9ffeeaEf0f86300/f26d2f46e852ee3a.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.28 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [在项目中实践 CLS 性能指标优化](http://3.cn/1-00uamwG) 12 | 13 | 你是否试过在开始阅读一篇有趣的新闻文章時，因为所有文字突然向下移动而令你要重新找回刚才看到的部分？Chorme 83 中新增了 Cumulative Layout Shift（CLS) 指标来衡量页面「累计版面配置转移」的数值，本文将在项目中实践 CLS 指标的优化。 14 | 15 | ### 前端框架 16 | 17 | #### [Next.js 10 正式发布：带来诸多新特性](http://3.cn/100-ua4Yc) 18 | 19 | 10月27号 Next.js conf 大会上发布了全新的版本-Next.js 10，本次发布的特性主要聚焦于开发者体验的提升和用户体验的提升，还包含了诸多亮点：内置图片组件`Image Component : next/image`，自动进行图片优化；国际化路由`Internationalized Routing`，多语言支持，自动语言检测等，一起来快速了解下吧~ 20 | 21 | ### 工程化 22 | 23 | #### [腾讯 Code Review 规范](http://3.cn/10-0ualFs) 24 | 25 | 代码，是设计理念落地的地方，是技术的呈现和根本。同学们可以在 review 过程中做到落地沟通，不再是空对空的讨论，可以在实际问题中产生思考的碰撞，互相学习，大家都掌握团队里积累出来最好的实践方式！ 26 | 27 | ### 图形编程 28 | 29 | #### [使用贝塞尔样条算法生成穿过预定义点的平滑曲线](http://3.cn/100-uan0m) 30 | 31 | 在设计师作图时, 通常会先定义若干点, 然后生成一条穿过这些点的平滑曲线, 再进行细节刻画。这种根据预定义点生成平滑曲线的算法叫做贝塞尔样条算法, 它还应用在很多的场景, 比如数据可视化中的曲线图、数值分析中曲线拟合和手绘软件中画笔的线条等。 32 | 33 | ### 服务端开发 34 | 35 | #### [TiDB一款同时支持在线事务处理与在线分析处理的融合型分布式数据库产品](http://3.cn/100uamb-H) 36 | 37 | TiDB 是 PingCAP 公司自主设计、研发的开源分布式关系型数据库，是一款同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP）的融合型分布式数据库产品，具备水平扩容或者缩容、金融级高可用、实时 HTAP、云原生的分布式数据库、兼容 MySQL 5.7 协议和 MySQL 生态等重要特性。目标是为用户提供一站式 OLTP (Online Transactional Processing)、OLAP (Online Analytical Processing)、HTAP 解决方案。TiDB 适合高可用、强一致要求较高、数据规模较大等各种应用场景 38 | 39 | ### 人工智能 40 | 41 | #### [GPT-3 袭来，前端又要失业？谈谈如何实现智能切图](http://3.cn/10-0uambI) 42 | 43 | 曾经，智能切图项目 [pix2code](https://github.com/tonybeltramelli/pix2code) 横空出世，它支持导入设计稿直接生成代码，惊艳了整个前端届，就在大家惊呼前端要失业的时候，这个项目却完美演绎了出道即巅峰，从此再无更新，渐渐被人遗忘。最近 GTP-3 再一次挑战前端，似乎前端这个领域总是充满危机感。本文由百度 FEX 负责人吴多益撰写，他用强悍的学习能力告诉我们，前端er 无需焦虑，任何新技术的出现都应该成为一个合格工程师手中的利剑，学习它，掌握它，然后用它惊艳所有人。So,keep learning,keep growing! 44 | 45 | ### 工具推介 46 | 47 | #### [Framer Motion：让动画创建更加简单](http://3.cn/-100uan0l) 48 | 49 | `framer-motion`是适用于`react`的动效库，通过将动作添加到HTML和SVG元素前面来创建动画组件，无需成为CSS专家即可创建精美的动画。本文介绍了其基本的使用方式。 50 | 51 | ## 沧海拾遗 52 | 53 | > 沧海拾遗，积跬步以至千里 54 | 55 | #### [随机算法: 2D 圆形分布](http://3.cn/100ualF-t) 56 | 57 | 前端有什么算法？前端工程师不需要懂算法？或许很多人都有类似这样的误区，觉得前端开发过程中需要用到算法的场景很少，而这篇文章恰恰就写到了随机算法在前端场景下的应用方式。 58 | 59 | #### [平面下的物理引擎——Matter.js 的试玩报告](http://3.cn/-100ualqw) 60 | 61 | 模拟一个接近真实的环境，那么我们很多时候需要去实现一整套系统的算法去描述所有的物理规则，或者我们可以使用某一个引擎来帮助我们完成这些，而在 Web 端的平面世界中就有 Matter.js 这样一个刚体物理学引擎可以实现我们绝大多数的需求。 62 | 63 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/29.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img10.360buyimg.com/ling/jfs/t1/123905/10/17859/206819/5faa05b7E5e68db40/d8379aa357e57eae.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.29 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 前端框架 10 | 11 | #### [解析 JSX 的全新机制](http://3.cn/1-00vxL95) 12 | 13 | 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)。 14 | 15 | ### 设计哲学 16 | 17 | #### [前端智能化在阿里的那些事儿](http://3.cn/100vx-LTo) 18 | 19 | 前端智能化方向的提出是为了给前端技术带来变革，借助 AI 和机器学习的能力拓展前端，那在推动这个目标的过程中，遇到哪些问题呢？阿里就前端智能化方向给出了 2020年的年中总结及思考。 20 | 21 | ### 图形编程 22 | 23 | #### [一个优质的交互体验网站“雷达”](http://3.cn/10-0vxMmf) 24 | 25 | 这个网站会随机跳转到一些基于 CSS3、Canvas 和 WebGL 技术实现的、具有令人赞叹的界面呈现和交互体验的优秀网站，工作忙碌之余，不妨来体验下 Web 渲染技术的强大能力～ 26 | 27 | ### 人工智能 28 | 29 | #### [AI 专家知识图谱](http://3.cn/100vx-LTq) 30 | 31 | 人工智能是什么？其中又有哪些细分模块？在这里你可以找到所有和人工智能相关的知识点，每个知识点所罗列的内容还会连接到相对应的资料上，如维基百科等，每当人工智能领域有新的研究出现时，相应的模块也会更新，希望能给对人工智有兴趣的同学一个方向，也给有一定积累的同学查漏补缺时提供一些帮助。 32 | 33 | #### [机器学习在静态代码分析中的应用](http://3.cn/100v-xL96) 34 | 35 | 现今，机器学习已经被深度应用在生活中各个领域，本文提出了一个有趣的观点：机器学习能否帮助软件开发者挖掘程序中的 Bug？答案是肯定的。作者首先介绍了行业内已知的基于机器学习的静态分析器，如 DeepCode、Infer（来自 Facebook）、SapFix、Embold、CodeGuru（来自 Amazon）等等。然后，作者以实现一个使用机器学习技术寻找代码缺陷的代码分析器为例，来说明机器学习在代码分析领域里的困难和局限性。通读全文，最大的收益是作者在结合机器学习技术与应用场景的分析思路，有利于丰富我们在 ML 技术上的想象空间。 36 | 37 | ### 工具推介 38 | 39 | #### [AntV：可视化数据解决方案](http://3.cn/100vxM-6E) 40 | 41 | AntV是蚂蚁金服数据可视化解决方案，其中最常被提及的G2是基于图形出发的可视化引擎，采用The grammar Of Graphics开发理念，以数据为驱动，支持高交互的方案。最新的4.0版本使用TS重写，相较于容易上手的eCharts（底层依赖轻量级的矢量图形库 ZRender），开发文档不够完善，因此对于数据可视化小白同学门槛较高，但在拓展性、创造性拥有更大优势。目前AntV还有系列产品包括：G6（专注于关系数据的可视化引擎，支持交互、分析、动画等等功能）、F2（专注于移动端的解决方案，支持H5）、L7（专注于地理空间数据的解决方案）。其扩展产品有G2Plot、Graphin、ChartCube。 42 | 43 | ## 沧海拾遗 44 | 45 | > 沧海拾遗，积跬步以至千里 46 | 47 | #### [机器学习 30 分钟入门指北](http://3.cn/100v-xMmg) 48 | 49 | 前端智能化是未来的大方向，想要紧跟时代快速入门机器学习么，或许你还是觉得工作中没有合适的项目实践，或者觉得因为学历、专业等等因素没有机会找一份机器学习的工作，那么快来跟着马克老师一起来看看吧，30分钟带你了解机器学习的基础知识，打破对于 AI 的刻板印象，同时也一同看看机器学习在凹凸实验室的一些实践和落地项目。 50 | 51 | #### [动效其实很简单](http://3.cn/100vx-LTp) 52 | 53 | 前端智能化归根结底还是希望将工程师从“无意义的底层劳动“中解放出来，但是这并不是唯一的道路，在很多开发的领域中都有很多方案可以大幅降低研发的成本。比方说在开发动效的过程中，我们也常常会想，设计师已经将整个动效的逻辑整理出来了，调试却依旧费时费力，为什么不能直接复用设计师的动效逻辑呢？机器取参和人工取参，你更喜欢哪一种？ 54 | 55 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/30.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img30.360buyimg.com/ling/jfs/t1/148970/9/14586/206933/5fb24ddeE92fc0196/804d76b790a5cc28.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.30 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [打怪升级之路——我的富文本编辑器](http://3.cn/100xx-fcF) 12 | 13 | 造轮子是程序猿前进的基本动力，文本编辑器更是很多程序猿都尝试挑战过的关卡，本文以作者视角阐述了富文本编辑器的演化历程，从 UEditor、CKEditor 开始，从技术角度揭示其中内涵，并将其分为了 3 个阶段，如果你正在富文本编辑器的坑内，非常推荐深入了解一下。 14 | 15 | ### 前端框架 16 | 17 | #### [Vue 3.0 Ref-sugar 提案真的是自寻死路吗？](http://3.cn/100-xxfVR) 18 | 19 | 最近 Vue 3.0 的 ref-sugar 提案在社区引起了轩然大波，很多人都在对这个提案进行吐槽，指责 Vue 3.0 成了 JS 方言制造者，但是一个标杆型框架的 RFC 的提出，必然是经过作者深思熟虑后的产物，我们需要深入理解 RFC 之后才能更好地对提案发表意见，接下来就跟随 react-lite 的作者工业聚，冷静而审慎地对 ref-sugar 提案进行深度剖析。 20 | 21 | #### [深入理解 Vue3 Reactivity API](http://3.cn/100xxg-oy) 22 | 23 | 乍一看目录和开篇，会让人产生又是一篇 Vue3 响应式 API 的用法介绍。但继续深入，会发现文章环环相扣。如通过 effect 引出 watchEffect 的使用场景和实现思路、由 track、trigger 引出 ref 的实现。令人印象深刻的是 toRefs、自动脱 ref 等比较难以理解的用法，其实是出自我们平时使用拓展运算符时不经意间引出的问题场景。阅读本文，能让我们能对 Vue3 响应式的 API 用法、使用场景和部分实现思路产生一定的了解。 24 | 25 | ### 工程化 26 | 27 | #### [异常监控系统在前端的落地实践](http://3.cn/-100xxgox) 28 | 29 | 文中阐述了前端异常监控的目的，以及市面上已有的脚本/解决方案，并从方案架构、SDK 组成、API 设计、日志上报策略以及可视化几个方面进行了详细的思路说明，有助于大家深入了解前端异常监控的整体组成。 30 | 31 | ### 设计哲学 32 | 33 | #### [中文技术文档 の 风格指南](http://3.cn/100x-xgEe) 34 | 35 | 一个好的项目离不开好的文档，一篇好的技术文档离不开好的规范。这个指南为开发者提供了一个中文技术文档的写作规范以及建议，提高中文文档的可读性和专业性。热爱写文章同学的福音。 36 | 37 | ### 工具推介 38 | 39 | #### [基于 TypeScript 编写的 JavaScript 解释器](http://3.cn/10-0xxeZ3) 40 | 41 | `eval5`是基于`TypeScript`编写的`JavaScript 解释器`，支持完整 ES5 语法解析，支持浏览器、node.js、小程序等 JavaScript 运行环境。在各类小程序盛行的今天，用它突破小程序对`eval/Function`的禁用限制，让你的应用具备动态执行代码及远程脚本的能力。 42 | 43 | ## 沧海拾遗 44 | 45 | > 沧海拾遗，积跬步以至千里 46 | 47 | #### [Vue 3 的小程序开发体验实录](http://3.cn/100xx-fHI) 48 | 49 | 没错，这就是一篇软广，或许在不久前你已经在我们的公众号或者其他的渠道上看过，但是不妨碍在这里再看一次～如果你还没有体验过使用`Taro`开发小程序，又或者没有体验过`Vue 3`开发小程序，此时体验一把正是再好不过的时机了。 50 | 51 | #### [打怪升级之路——我的视频编辑器](http://3.cn/10-0xxfrc) 52 | 53 | 这篇文章，其实和本期的第一篇一点关系都没有 ( /) V (\ ) 嘻嘻～～作为凹凸实验室优秀项目，羚珑的视频编辑器是在静态类设计之后的另一赛道的尝试，通过相对很简单的方式去使用高品质的动画和效果就是其主要的目的之一。如果当你需要去完成一个视频编辑器时，你会采用怎样的设计思路呢？欢迎在评论区留言哦！ 54 | 55 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/31.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img30.360buyimg.com/ling/jfs/t1/140181/32/15583/206440/5fbc76c5E5d1a6c1b/d050137e0de5eac5.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.31 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [原生瀑布流即将来袭？！FireFox 试验原生瀑布流布局](http://3.cn/100yGvX-W) 12 | 13 | 作为一名前端，是否曾为需求中的瀑布流布局想破脑阔？就算用上 JS 第三方库，却对效果和性能不满意？CSS Grid Layout 规范 Level 3 中，为 `Grid-template-columns` 和 `Grid-template-rows` 属性新增了 `masonry` 属性值，可以实现原生的瀑布流布局。目前 Mozilla 正在 FireFox 中试验这个新功能，感兴趣的开发者可以尝一尝鲜。 14 | 15 | #### [JAMStack，下一代Web建站技术栈？](http://3.cn/100yGvt-H) 16 | 17 | JAMStack（JAM 代表 JavaScript，API 和 Markup）是一种使用 Static Site Generators (SSG) 技术、不依赖 Web Server 的前端架构，这样网站内容可以被托管在 CDN 上，加载速度得到最大程度地优化，安全性也得到保障。 18 | 19 | ### 人工智能 20 | 21 | #### [Rigging.js: 让 3D 角色动起来的 react.js 开源应用](http://3.cn/100y-GvKG) 22 | 23 | Rigging.js 是一个开源的 react.js 应用，它获取由 TensorFlow.js 模型生成的面部网格关键点，然后将人物在镜头前所做的动作映射到 3D 模型中。 24 | 25 | ### 设计哲学 26 | 27 | #### [什么是低代码(Low-Code)](http://3.cn/10-0yGvtG) 28 | 29 | 近一年，低代码开始频繁地被提起，作为解放 IT 生产力的新概念新技术，还有许多人对其不甚了解。本文从概念定义、市场需求、质疑及可能引发的问题等方面进行了详细分析，便于各位从全局对低代码进行了解与思考，找准自己未来的位置。 30 | 31 | #### [如何利用AOP+IOC思想解构前端项目开发](http://3.cn/100-yGuuK) 32 | 33 | 本文详细介绍 AOP 和 IOC 两种编程设计思想，并结合具体实例深度剖析具体场景下两种编程思想的使用，以解决具体问题，对提升编程架构能力有极大的帮助。 34 | 35 | ### 工具推介 36 | 37 | #### [比传统手段快 10 倍？！使用 QA Wolf 编写 UI 测试](http://3.cn/100yG-uIX) 38 | 39 | 在很多时候，我们不仅需要编写高质量，简介并且可维护的代码，还需要保证程序运行结果与需求的预期完全一致。通常这需要通过单元测试来确保程序运行的结果正确性，这在后端接口开发中非常好办，但这在 UI 开发上就不太好实践。主要是因为 UI 开发通常需要模拟用户的一系列操作（点击按钮，滚动鼠标等）， 并且开始正式的测试逻辑前，还需要编写大量获取元素之类的模板代码。QA Wolf 正是为了解决这些问题而来。 40 | 41 | ## 沧海拾遗 42 | 43 | > 沧海拾遗，积跬步以至千里 44 | 45 | #### [Web 全景——沉浸式看房体验](http://3.cn/100yG-vtI) 46 | 47 | 未来为何？很多时候看不清也摸不透，只能昂首望着星空一声轻叹，但是面对一些我们熟知的领域的时候，我们却又总能轻易的看到一些可能性，WebVR 就是其中之一，随着技术不断的发展迭代，它在我们生活中的感知也越来越强，你曾经在什么时候会意识到，这就是以后的潮流呢？ 48 | 49 | #### [WebVR 入门攻略报告](http://3.cn/1-00yGuuL) 50 | 51 | 下一代交互的形式会是什么，在它真正到来之前我们永远也未可知究竟是何。但是 WebVR 确实开始通过我们开发的项目对着生活不断的渗透，这个时候上手相关的框架或许是个不错的时机，你还能赶上这一班浪潮否？ 52 | 53 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/32.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img13.360buyimg.com/ling/jfs/t1/150729/31/8676/207175/5fc5aff6E190e42c1/c5ee57b29b5f2c30.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.32 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [Chrome 发布 M87: 性能大幅提升](http://3.cn/-100zJArq) 12 | 13 | 2020年11月17日，Chrome 发布 M87，这是今年的最后一个正式版本，Chrome 产品总监 Matt Waddell 在一篇博客文章中写道：“该版本是多年来Chrome浏览器性能获得最大提升的一次”，那么到底是什么给了他如此强大的信心敢放此豪言，赶紧打开文章来一探究竟吧。 14 | 15 | #### [从零开始来探索计算机如何工作](http://3.cn/100zJ-AFK) 16 | 17 | 简单易懂的计算机原理，如何通过 `AND` `NOT` 一步步实现 `OR` `XOR` `ADD` `ALU` ？视频中通过几个生动的例子非常形象的表述其原理，看完相信一定会有所收获。同时期待作者的下一个作品 “内存是如何工作”，在线催更～ 18 | 19 | ### 前端框架 20 | 21 | #### [基于 Ant Design 的页面级前端组件库](http://3.cn/100-zJBjv) 22 | 23 | Ant Design 提供了大量的基础组件给开发者使用，但在大部分的实际应用场景中，我们需要在这些组件的基础上再去添加许多重复且耦合的行为逻辑。本文将介绍如何使用重型组件 ProComponents 来解决这种“每增加一个状态我们就需要一系列的行为来进行管理”的问题，提出了页面级别的抽象组件的概念。 24 | 25 | ### 服务端开发 26 | 27 | #### [2w字 + 40张图带你参透并发编程](http://3.cn/-100zJzVO) 28 | 29 | 并发编程是一个程序员最重要的技能之一，本文比较全面的介绍了并发历史、进程跟线程、并发跟并行、并发带来的一些问题、线程安全性、锁、优先级等概念，图文并茂，并夹带一些简单易懂的 java 示例，值得一看。 30 | 31 | ### 工具推介 32 | 33 | #### [一款浏览器端的 Markdown 编辑器——Vditor](http://3.cn/100zJAF-L) 34 | 35 | Vditor 是一款浏览器端的 Markdown 编辑器，针对富文本编辑器用户的使用场景，Vditor 支持所见即所得，同时，为了让熟悉 Markdown 的用户更专注于内容创作，Vditor 提供即时渲染（类似 Typora）的编辑方式以及分屏预览的模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。 36 | 37 | #### [TypeScriptToLua：采用 TypeScript 编写 Lua](http://3.cn/100z-JAV0) 38 | 39 | Lua 是一种轻量小巧的语言，广泛应用于游戏开发、Nginx等，通过 TypeScriptToLua 这个工具，提供了编写 TypeScript 并能够转化为 Lua 的可能性，也就是原本 TS 写的微服务可以快速转换成 Lua 来提升其效率，前端模块也可快速通过 Lua 转换为 WebAssembly 提升前端应用的性能。 40 | 41 | ## 沧海拾遗 42 | 43 | > 沧海拾遗，积跬步以至千里 44 | 45 | #### [你真的了解 Fetch API 么](http://3.cn/100z-JCAA) 46 | 47 | 提起前端和服务端的异步通信，你会想到什么 XMLHttpRequest、Ajax、还是 axios？原生不方便，所以才有了各式各样的封装库，来帮助我们简化使用的方法。不过 fetch 确实是个例外，很多项目里面，直接使用 fetch 已经足够满足开发所需，快来看这篇老文，一起回顾一下那些关于 Fetch API 的知识点吧！ 48 | 49 | #### [whistle 使用实践](http://3.cn/100z-JBQR) 50 | 51 | 调试代理，对很多项目的新同学来说，不可为不是一件麻烦事儿，不仅影响开发效率，更是拖慢整体的开发进度，whistle 作为一款 node 实现的跨平台 web 调试代理工具，完全可以替代 Fiddler、Charles 这些工具，日常开发中也更加得心应手。 52 | 53 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/33.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img11.360buyimg.com/ling/jfs/t1/133198/29/18815/207291/5fce2a3dE658dd77f/49e403228a07971c.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.33 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [怎么使用 WebWorker 提高用户界面的响应速度](http://3.cn/10-0CQLoY) 12 | 13 | 浏览器执行javascript脚本是单线程的，当执行一些耗时较长的任务时，本来响应用户操作的任务会阻塞；一个解决方法是把这些耗时长的任务改造成异步操作，但在一些不好改造的任务，如图片像素分析或处理等，可以使用WebWorker处理，以让出主线程响应用户界面操作。 14 | 15 | #### [如何优雅的使用自定义字体](http://3.cn/100CQLD-L) 16 | 17 | 使用自定义字体时，如果先加载字体文件，再渲染文本内容，则会加长文本渲染前的空白时间。本文介绍了一种使用预连接、异步加载的方法加载字体文件，并使用和自定义字体相近的系统字体作为兜底，从而达到内容渲染速度与避免文本闪动的平衡。 18 | 19 | #### [CSS3 Patterns: 纯 CSS 图案效果](http://3.cn/10-0CQLDN) 20 | 21 | 通过纯 CSS3 渐变特性实现的一系列非常有趣的图案效果的集合，如透明底、墙面、棋盘、鱼纹、蜂窝、Lined Paper、各类布料纹理等，代码简洁明了，可以方便地应用到我们的实际项目中。如果你也有创意与技巧，独乐乐不如众乐乐，去提交一个分享吧。 22 | 23 | #### [2020 年 CSS 年度报告](http://3.cn/100CQLD-M) 24 | 25 | 2020 年 CSS 使用报告，可以借此了解 CSS 的开发者现状，了解特性使用情况及周边工具等。 26 | 27 | ### 设计哲学 28 | 29 | #### [在千亿的成交额背后，前端工程师是如何做“资损防控”的？](http://3.cn/1-00CQLTr) 30 | 31 | 资损，顾名思义就是平台发生了与用户或客户心理预期不符、直接或间接产生经济损失的场景。本文通过阿里前端同学的思考以及淘系双 11 的实践为大家提供一些资损防控的经验参考。 32 | 33 | ### 跨端框架技术 34 | 35 | #### [什么？Kubernetes已然弃用Docker？](http://3.cn/100CQK-Og) 36 | 37 | 目前，Kubelet 中的 Docker 支持功能现已弃用，并将在之后的版本中被删除。Kubelet 之前使用的是一个名为 dockershim 的模块，用以实现对 Docker 的 CRI 支持。但 Kubernetes 社区发现了与之相关的维护问题，因此建议大家考虑使用包含 CRI 完整实现（兼容v1alpha1或v1）的可用容器运行时。 38 | 39 | ## 沧海拾遗 40 | 41 | > 沧海拾遗，积跬步以至千里 42 | 43 | #### [怎么使用 Service Workers 动态响应图片](http://3.cn/100CQL-oX) 44 | 45 | 有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app，如果下载不了它，也是非常糟糕的体验。Service Worker 可以使你的应用先访问本地缓存资源，所以在离线状态时，在没有通过网络接收到更多的数据前，仍可以提供基本的功能。 46 | 47 | #### [从浏览器渲染层面解析 CSS3 动效优化原理](http://3.cn/100-CQKOh) 48 | 49 | 在网页开发中，我们经常会需要实现一些动效来让页面视觉效果更好，谈及动效便不可避免地会想到动效性能优化这个话题，减少页面DOM操作，减少页面的重排，开启硬件加速……那么这些和动画优化又有何关系？就让小编。。额，小助手为你揭开其中原理。 50 | 51 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/34.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img30.360buyimg.com/ling/jfs/t1/137095/21/20075/206808/5fd81c32E1edc09ef/6ce412954ce16f5c.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.34 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [使用 CSS Scroll Snap 实现滑动容器](http://3.cn/100Eepp-V) 12 | 13 | 你是否曾希望 CSS 能原生实现一个可吸附的滑动容器呢？本文将深入 CSS Scroll Snap 属性，带你了解滚动捕抓技术。 14 | 15 | ### 跨端框架技术 16 | 17 | #### [纯 Dart 的挑战：美团外卖 Flutter 动态化实践](http://3.cn/10-0Eeq98) 18 | 19 | 文章以美团外卖对用户端和商家端的技术选型为切入，为我们介绍了商家端为什么选择 Flutter，以及选型之后对包体积和动态化的一些思考。为了支持动态化能力，美团内部立项了 Flap 项目，并将于下一年进行开源。文章最后对 Flap 如何实现纯 Dart 的动态化方案进行了展开详细介绍。 20 | 21 | ### 工程化 22 | 23 | #### [百亿业务流量-如何做好稳定性监控](http://3.cn/100-EeqAz) 24 | 25 | 文章介绍了淘系前端团队对监控体系的思考与整体解决方案。根据对前端故障进行统计分析，分别从发现难、恢复慢两个方向进行思考，然后详细介绍了为应对上述两大问题所引入的监控覆盖策略和灰度监控流程。最后展示了监控覆盖、灰度监控等能力建设之后，如何为业务保驾护航。 26 | 27 | ### 服务端开发 28 | 29 | #### [Headless Chrome：更优秀的 SSR 解决方案](http://3.cn/1-00Eeqmu) 30 | 31 | 为了提高 SPA 应用的首屏速度，或者针对搜索引擎优化，我们通常会用到 SSR 技术，但现有的 SSR 方案往往不尽人意。在本文中，Google 工程师 Eric Bidelman 展示了如何使用 Pupteer 的 API 向 Express web 服务器添加服务器端渲染（SSR）功能，最棒的是这个功能的实现几乎不需要修改代码，且所有的重活都是 Headless 处理的，通过几行代码你就可以对任何页面做 SSR。 32 | 33 | ### 人工智能 34 | 35 | #### [3D Deep Learning 入門](http://3.cn/10-0EepTY) 36 | 37 | 3D 数据分析的应用很广泛，特别是在自动驾驶和 AR/VR 领域，深度学习的盛行也促进了 3D Deep Learning 的研究。\ 38 | 2017 年 IEEE 国际计算机视觉与模式识别会议 CVPR 中的一个讲座 3D Deep Learning tutorial 从基础介绍了 3D Deep Learning 39 | 40 | ### 工具推介 41 | 42 | #### [程序员写 PPT 的正确姿势 — Reveal.js](http://3.cn/-100EeqQv) 43 | 44 | 作为一个程序员，在工作中需要做一些技术分享或项目汇报时，往往需要花费很长时间去做一个 PPT。Reveal 是一个运行在浏览器上的 PPT，让我们可以使用 HTML 甚至是 Markdown 语法去实现一个 PPT。Reveal 支持众多特性，例如自动动画、演讲者注释、代码语法高亮、导出 PDF 等，同时内置了若干默认主题。另外介绍一个项目 [reveal-md](https://github.com/webpro/reveal-md)，它对 Reveal 进行了一层封装，帮助我们使用 Markdown 语法快速地实现一个 PPT。 45 | 46 | ## 沧海拾遗 47 | 48 | > 沧海拾遗，积跬步以至千里 49 | 50 | #### [Flutter 性能优化：tree shaking 和延迟加载](http://3.cn/1-00EeqAA) 51 | 52 | 为了获得最佳的用户体验，应用程序的加载速度必须很快。加载web应用程序的初始加载时间可以通过最小化 JavaScript 包来改进。Dart 编译器包含诸如树抖动和延迟加载等特性，这两个特性都使 JavaScript 捆绑包最小化。本文将解释它们的工作原理以及如何在应用程序中使用它们。 53 | 54 | #### [Flutter 性能优化：图片占位符、预缓存和禁用导航过渡动画](http://3.cn/-100EepFI) 55 | 56 | 性能感知是指应用程序对用户的感觉有多快，在本文中详细介绍了三种可以在应用程序中使用的提高感知性能的策略：图像占位符、预缓存图像和禁用导航过渡动画。 57 | 58 | #### [Flutter 性能优化：打造高性能 widget](http://3.cn/100E-epFJ) 59 | 60 | 本文和上述两篇文章都是 Flutter 性能优化系列文章之一，记录了 Flutter 团队优化 [Flutter Gallery](https://gallery.flutter.dev/#/) 的实践，相信这些文章对于想要入门 Flutter 会有很大的裨益，使得开发的应用更具性能。 61 | 62 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/35.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img14.360buyimg.com/ling/jfs/t1/145398/24/19665/207107/5fe15becEa01b9518/dda38b83836108ca.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.35 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [玩转前端 Video 播放器](http://3.cn/100G-73V7) 12 | 13 | 随着5G网络的普及，直播行业的火热，在h5上多媒体的场景也越来越多。对于video标签的使用，前端需要考虑加载时长以及各终端兼容，这篇文章给出了流媒体的解决方案，从HLS、DASH概念，自适应比特率流技术及流媒体加密技术，FLV文件格式、MSE API、视频播放器原理、MP4 与 Fragmented MP4 封装格式的区别进行了介绍，文章末提供了video播放器示例，根据实际工作场景，可以自行选择媒体格式，同时通过canvas播放，可以探讨实现绿幕、弹幕等等更多的可能。 14 | 15 | ### 图形编程 16 | 17 | #### [Flash 终于进入倒计时，细数它犯下的四宗罪](http://3.cn/-100G73V8) 18 | 19 | Adobe 宣布，将在2020年12月31日停止对 Flash 的支持。昔日火遍大街小巷，无论看视频还是玩游戏，处处都是它的身影。然而24年过去了，它已被用户、行业所唾弃，只因四宗罪。可人们怀念的「Flash 闪客文化」又是什么？那今天我们就一起来聊聊 Flash 的辉煌与没落。 20 | 21 | ### 人工智能 22 | 23 | #### [推荐算法的“五环之歌”](http://3.cn/100G753-r) 24 | 25 | 这是一篇关于推荐系统算法介绍文章，梳理了推荐算法的发展脉络，非常形象地阐述推荐算法里面最重要的几个idea的核心思想，让大家理解推荐算法的基本套路。 26 | 27 | ### 设计哲学 28 | 29 | #### [命令行程序设计指南](http://3.cn/179g2c-p) 30 | 31 | 该文档在传统 UNIX 设计哲学基础上以现代软件开发的视角总结了一些命令行程序的最佳实践和设计规范，帮助你写出体验良好的命令行程序。 32 | 33 | ### 工程化 34 | 35 | #### [前端工程的性能优化导览](http://3.cn/1-00G74CP) 36 | 37 | 前端性能优化已是老生常谈的事情，但真正在项目中落地又是一件略具挑战的任务，本文将罗列一些常用的性能优化方法，带大家重新拾回「前端用户体验」。 38 | 39 | ### 工具推介 40 | 41 | #### [无侵入的 REST/GraphQL API 模拟库——mswjs](http://3.cn/100G74-CO) 42 | 43 | 当我们在写前端测试用例时，不可避免的需要面对如何模拟后端接口数据的问题，本文介绍了几种处理方式，从测试用例代码的简洁性和接口数据的保障性上进行的比较说明。 44 | 45 | ## 沧海拾遗 46 | 47 | > 沧海拾遗，积跬步以至千里 48 | 49 | #### [游戏开发: “九亿”指尖的大冒险](http://3.cn/10-0G7tL8) 50 | 51 | 快来看，快来瞧，“九亿”指尖的梦想，看不了吃亏，看不了上当……好了不说笑了，在 SNS 游戏的开发过程中，会遇到什么问题呢？无限循环滚动？随机阶梯和障碍的生成和定位？物品掉落显示……来看这篇文章就足够咯～ 52 | 53 | #### [算法解析: 波动均分算法](http://3.cn/10-0G7tL9) 54 | 55 | “波动”是一种常见的物质运动形式，“均分”指平均划分、分配，那么“波动均分”又是什么意思呢？波动均分算法该如何实现？这个算法有何应用场景？读完这篇文章，定会有所见解。 56 | 57 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/36.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img11.360buyimg.com/ling/jfs/t1/154208/30/12298/206967/5fea8679Efc687b9a/bde2024f4d0e1ac1.jpg) 2 | 3 | # 蒲公英 · JELLY技术周刊 Vol.36 4 | 5 | ## 登高远眺 6 | 7 | > 天高地迥，觉宇宙之无穷 8 | 9 | ### 基础技术 10 | 11 | #### [文本长度不一如何影响界面布局](http://3.cn/-100IcAmY) 12 | 13 | 使用 CSS 构建布局时，如何做好短文本内容与长文本内容的兼容，是每位优秀前端工程师的基本修养，当清楚地知道文本长度变化是否会影响界面布局时，可以避免很多不必要的问题。 14 | 15 | ### 前端框架 16 | 17 | #### [使用 Hooks 的五个常见错误（2020 版本）](http://3.cn/100-IcALH) 18 | 19 | 在 React 支持使用 Hooks 编写组件后，越来越多的同学已完全投入 Hooks 的怀抱，本文总结了五个常见错误，大家可以看看自己是否也遇到过，查漏补缺。 20 | 21 | ### 图形编程 22 | 23 | #### [手把手教你做游戏，金币小镇 EVA 全解](http://3.cn/10-0IcAmZ) 24 | 25 | EVA 互动技术体系为手淘在互动游戏前端开发的一整套技术解决方案，包含了资源管理方案、IDE 方案以及技术选型方案，并针对金币小镇这款游戏进行了详细的落地说明，为营销互动开发提效提供了一些思路。 26 | 27 | ### 工程化 28 | 29 | #### [淘宝小程序还可以这么玩？私域互动实战指北！](http://3.cn/10-0IcAxe) 30 | 31 | 超级 APP 中的小程序创意互动能怎么开发，本文给出了答案。通过 200+ 个品牌定制创意互动的落地，验证了这一整套技术方案的可行性，从技术设计，到生产链路的打通，再到多端协调达到性能最优化等等的推进，展示了如何基于业务进行架构设计的强大专业力。 32 | 33 | #### [丁香园的前端研发效能讲义](http://3.cn/100Ic-B24) 34 | 35 | 无论对于前端还是后端，都涉及到各种复杂程度不一的研发工作流，对于研发效能提升的思考和探索，从未停止过。往往需求从开发到上线，均会经历准备、开发、测试验收和发布 4 个阶段，每个阶段又涉及到各种环节，导致研发流程冗长且容易出错。一个好的工程化平台，能够串联起研发过程中的各个环节，让开发人员更加聚焦于业务开发，而不是疲于应对工具带来的问题，最终达到降本增效的目的。 36 | 37 | ### 设计哲学 38 | 39 | #### [基于 C4 模式绘制软件架构图](http://3.cn/100IcBg-h) 40 | 41 | 随着敏捷开发的流行，很多团队停止或缩减了他们的图表和文档工作，包括使用UML。即使有团队在使用软件架构图，也往往也混淆不清。为此，2013 IEEE 先驱奖获得者 Simon Brown 提出了 C4 Model。C4 Model 由一系列分层的软件架构图组成，这些架构图用于描述上下文、容器、组件和代码，C4 图的层次结构提供了不同的抽象级别，每种抽象级别针对不同的受众。如果你还在苦恼架构图规范和统一，也许你应该尝试了解一下。 42 | 43 | ## 沧海拾遗 44 | 45 | > 沧海拾遗，积跬步以至千里 46 | 47 | #### [CSS3 动效优化: 从浏览器层面解析原理](http://3.cn/100IcBv-N) 48 | 49 | 切图仔，真的懂自己的代码为什么要这么写么？能够知道怎么做才是性能最佳，同时还能理解其原理？如果不懂，那还不快来看看这篇文章，从根本上解释清楚了为什么我们要这么写！ 50 | 51 | #### [Animation 动画: 那些你不曾知晓的技巧与细节](http://3.cn/100IcB2-3) 52 | 53 | 实现动画效果往往有很多方案，实际开发中我们往往根据需要来选择最适合的最优解。这篇文章详细讲解了动画开发中常用的各种属性、效果以及可能遇到的问题，梳理了各类实践下的技巧和细节，快来看看，为自己的知识体系查漏补缺吧～ 54 | 55 | ![FOOTER](https://img20.360buyimg.com/ling/jfs/t1/93326/34/18555/167361/5e946665E13c912ae/9a8405dd8be2dad4.jpg) -------------------------------------------------------------------------------- /articles/37.md: -------------------------------------------------------------------------------- 1 | ![HEADER](https://img11.360buyimg.com/ling/jfs/t1/165227/14/10742/355517/60463f91E8b67ac16/c3806dcdd2a0c71e.jpg) 2 | 3 | # 蒲公英 · JELLY技术期刊 Vol.37 4 | 5 | ## 观海志 6 | 7 | > 登山则情满于山，观海则意溢于海 8 | 9 | ### [前后端协作模式面临革新](http://3.cn/101b-slzP) 10 | 11 | **梗概**：在 20 年的圣诞前夕，Dan 和我们分享了 React 团队正在探索的新特性“服务端组件 RSC”。Dan 提出在以往的界面开发中，用户体验、可维护性、性能三者不可兼得，而使用 RSC 则能在很大程度上解决此问题。视频详细介绍了 RSC 的具体用法与优势：减少打包体积、自由获取服务端资源、自动分割客户端代码等。RSC 能让我用编写老式 Web 页面的方式，构建出很像应用程序的现代化用户体验。 12 | 13 | **推荐语**：从 Fiber 到 Hooks，React 团队每年都能给前端技术圈带来新的玩法与惊喜。从 Concurrent Mode 到 Suspense，这次 React 团队为我们带来的是 RSC（React Server Component）。React 开发团队正在逐步引导、帮助开发者打造体验出色的应用程序。回顾前端技术的发展，从最早期的服务端模板渲染，到前后端分离的开发模式，到服务端渲染（SSR）技术的出现，前后端协作方式一直在升级。**React 能否凭借 RSC 技术重新定义前后端协作模式？我们需要继续保持关注。** 14 | 15 | ### [跳动的 React Fiber](http://3.cn/101bsl-kd) 16 | 17 | **梗概**：React 16 开始，采用了 Fiber reconciler 机制替代了 Stack reconciler， 提高了页面渲染性能和用户体验。文中列出了 Fiber 的关键特性，如：增量渲染、渲染任务的暂停/恢复/复用及任务调度策略并详细介绍了其中的运行机制。 18 | 19 | **推荐语**：提高用户体验，底层技术上能做的就是及时响应用户交互，Fiber 机制打破原有不可中断的渲染模式，以可被调度的细粒度的任务进行拆分，每一次的调度好似 React 的脉搏，接收来自用户指尖的距离。 20 | 21 | ### [系统设计是前端的基础课](http://3.cn/101bsm-Fs) 22 | 23 | **梗概**：本仓库围绕如何设计大型系统展开，全面的讲解了在系统设计中需要考虑到的设计原则。包括了性能与拓展性、延迟与吞吐量、可用性与一致性、负载均衡和数据库等等。目前 repo 已被翻译成 20+ 个语言版本，star 数量达到了 120+k。 24 | 25 | **推荐语**：在前端的日常工作中，系统设计往往偏向 Client 端 ，如反向代理、缓存、通讯协议等。然而也有需要设计整个系统的场景，我们需要考虑使用 SQL 还是 NoSQL、CP 还是 AP （CAP 理论）、如何做到系统高可用。系统设计不像技术知识，需要多年的沉淀和经验，本仓库精心整理的系统设计资源，将帮助你更快的积累设计经验！ 26 | 27 | ### [机器学习是新时代的魔法](http://3.cn/1-01bslPq) 28 | 29 | **梗概**：这是一本机器学习的入门教科书，书中剖析了许多重要的机器学习方法、模型、概念。包含了4大块的内容：基础知识和概念，经典的机器学习方法模型（如决策树、支持向量机、集成学习等），进阶理论、前沿探索和研究，基本上涵盖了机器学习的方方面面。 30 | 31 | **推荐语**：数智化作为当前移动互联网最重要的发展方向，伴随着不断涌现的各种数据“魔法”，这趋势已经不可阻挡。**在这个数智化时代浪潮底下，我们不能止步于当个见证者，更要作为参与者创造我们的数据“魔法”。**机器学习就是一把创造数据“魔法”的魔杖，我们得学会怎么用好这把魔杖，魔杖的说明书已经给你了，启程吧！ 32 | 33 | ## 眺望阁 34 | 35 | > 一区聊寄尘嚣外，万景皆归眺望中 36 | 37 | ### 专题话题: AI 竟在我身边 38 | 39 | 人工智能的发展是很多时候都很难想象，我们一边展望它未来的前景，一边又时不时抵触 AI 可能会带来的隐患，作为程序员可能会比较担心 Bug 都被自己写的 AI 都写完了，然后就面临一波失业潮……当然虽然业界已经有很多尝试，但还远没有到这个地步，我们日常可能接触的也就一些代码补全插件，诸如: [IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) 或者 [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) 等等帮助我们快速编写代码。 40 | 41 | 小助手最近在观察凹凸实验室的在研项目中，发现了一个特殊的存在，那就是 [Deco](https://mp.weixin.qq.com/s/R3Nsrwyy9kFbjG65zA-eCw)，相信很多小伙伴们都在去年底的[周年系列](https://mp.weixin.qq.com/mp/appmsgalbum?action=getalbum&album_id=1664686948306780160)中窥见端倪，那么 Deco 到底发展到什么地步？它真的可以帮助研发流程加速么？未来它又会走向何方？或许小助手之前做项目时找大佬们调研的聊天记录能够解开大家的一些疑惑。 42 | 43 | ![](https://img12.360buyimg.com/ling/jfs/t1/158736/14/11633/346105/60463610E2c38e815/f87347d38b3fc936.jpg) 44 | 45 | ![](https://img13.360buyimg.com/ling/jfs/t1/167765/15/10937/498877/60463610Ea7941c3a/6accd74ddcb69a29.jpg) 46 | 47 | ![](https://img12.360buyimg.com/ling/jfs/t1/167045/26/10916/910374/60463611E1d378961/639f94bbad7feaf9.jpg) 48 | 49 | ![](https://img14.360buyimg.com/ling/jfs/t1/163776/29/10942/2254737/60463614Eadcb74bd/c462e6db8605c3fe.jpg) 50 | 51 | ![FOOTER](https://img11.360buyimg.com/ling/jfs/t1/156651/28/14271/309634/60463f91E7afc1e75/aaf38867ca4f1514.jpg) -------------------------------------------------------------------------------- /articles/38.md: -------------------------------------------------------------------------------- 1 | ![HEADER](https://img13.360buyimg.com/ling/jfs/t1/164852/1/15242/330235/60617ad1E8c34ff85/84ccf424a143b283.jpg) 2 | 3 | # 蒲公英 · JELLY技术期刊 Vol.38 4 | 5 | ## 观海志 6 | 7 | > 登山则情满于山，观海则意溢于海 8 | 9 | ### [Web 开发成长图谱](http://3.cn/-1cEDb6i) 10 | 11 | **梗概**：本仓库/网站收录了 2021 年成为 Web 开发者所可选的技术路线图，且内容不止于 Web 领域，涵盖了前端、后端、DevOps、安卓、DBA、React 等几大领域。除此，作者还按照“推荐”、“可选”、“优先级低”和“不推荐”四个等级对各项技术点进行筛选划分，开发者通过这些路线图可以清晰地了解自己不熟悉的技术领域以及学习该领域的较优路线，而对于有能力的开发者来说，进一步优化完善路线图也是非常推荐的做法。 12 | 13 | **推荐语**：近些年来，提起高速迭代的前端领域，总有人忍不住吐槽“学废了”，不断涌现出新的技术创新和新颖概念：大前端、Serverless、Cloud IDE、智能前端、WebAssembly 等等，并且逐渐往技术深水区发展，开发者想对各门技术都面面俱到是非常困难的，筛选出适合自身的核心技术并打造一专多长的技术能力矩阵是更为理智的做法。技术路线图的存在是帮助开发者对领域全景图有更全面的理解，有利于在方案选型和发展规划时更从容。往往，在具体场景和领域面前，适合比先进更重要。 14 | 15 | ### [下一代前端构建技术](http://3.cn/101jM-hUx) 16 | 17 | **梗概**：伴随下一代构建工具Vite的横空出现，传统构建工具Webpack的速度诟病再一次被鞭尸。文章主要剖析了近期发布的Vite2.0带来的一些新亮点，包括实现原理、关键的依赖预编译、全新的插件机制以及与其他ESM构建的优劣对比。主要围绕着Vite是如何提升开发响应速度的方法进行分析介绍。 18 | 19 | **推荐语**：大家都经历过'npm run dev'然后转身上厕所倒咖啡的场景。传统构建工具通过动态语言JS编写的程序确实存在性能瓶颈， 而Vite通过巧妙地运用了Esbuild和ESM为开发模式下的响应速度带来了质的飞跃。**随着构建工具的变革，必然影响着未来前端的插件生态，下一代的构建技术已经到来，此时不学更待何时？**让我们一起来拥抱变化。 20 | 21 | ### [AI 应用下支离破碎的真实](http://3.cn/-101jMhFG) 22 | 23 | **梗概**：本文通过使用大量伪造的明星 / 名人等搞怪动态表情，引申出 AI 视觉技术在娱乐性上的突破与应用。文章介绍了创作这类动态表情的步骤，以及 AI 技术是如何让各位大佬来唱歌的。其中原理部分通俗易懂，对一阶运动模型，运动估计模块，图形生成模块等视觉处理技术进行了全面科普。 24 | 25 | **推荐语**：俗话说“耳听为虚，眼见为实”“无图无真相”，在 AI / 视觉处理技术迅猛发展的当下已经不再是真理。让我们一起紧跟科技步伐，拓展眼界，来看看大佬们集体唱歌的样子吧。 26 | 27 | ### [不懂产品不会开发](http://3.cn/101j-Mgyt) 28 | 29 | **梗概**：本书诠释了以用户为中心的设计思路在产品设计中的重要性，系统详尽地介绍了在产品设计的过程中五个层面的要素（战略层，范围层，结构层，框架层，表现层），自下而上地分析产品，重点关注设计思路，而不是工具和技术。 30 | 31 | **推荐语**：这是一本很好的培养产品分析思维的教材，作者是AJAX之父。行业在发展，开发也需要产品思维，这本书的读者并不囿于产品经理，开发同学也可以在里面获得启发，正所谓埋头做事，也要抬头看路。作者循循善诱，深入浅出地将对产品的思考拆解为5个层面的分析要素，建立起一个系统地分析产品的方法。 32 | 33 | ## 流觞亭 34 | 35 | > 因山卜地心机巧，望水如天眼力穷 36 | 37 | ### [虚拟货币是新时代的黄金](http://3.cn/1-01jMglh) 38 | 39 | **梗概**：新时代的金融实验？用数字货币发红包或许是其中之一。数字货币是一种不受管制的、数字化的货币，通常由开发者发行和管理，被特定虚拟社区的成员所接受和使用，而数字人民币是以一国政府的信用担保的一种发型币，虽然没有大访问流通，但却已经拥有了一定程度上的影响力。数字货币电子支付作为虚拟货币的交易系统，相较于传统的电子支付，更接近于实体货币的交易逻辑；而作为新时代的黄金，虚拟货币的特殊性和它象征的价值给大家看到了某种意义上的未来。 40 | 41 | **推荐语**：经过国家长时间的宣传，很多朋友对于 E-CNY，也就是数字人民币相信是不陌生的。而作为早期接入 DCEP(数字货币电子支付) 的项目之一，京东的数字人民币项目是很有价值的，不论是其中对于程序设计的一些观点，还是面对实际问题的一些解决方案，都十分亮眼，值得深入学习。 42 | 43 | ![FOOTER](https://img11.360buyimg.com/ling/jfs/t1/156651/28/14271/309634/60463f91E7afc1e75/aaf38867ca4f1514.jpg) -------------------------------------------------------------------------------- /articles/39.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img14.360buyimg.com/ling/jfs/t1/168978/6/20940/293867/6085058dE1ff6fdf1/f815c8a105addcf3.png) 2 | 3 | # 蒲公英 · JELLY技术期刊 Vol.39 4 | 5 | ## 观海志 6 | 7 | > 登山则情满于山，观海则意溢于海 8 | 9 | ### [SpaceX 上的前端架构](http://3.cn/101w20u-q) 10 | 11 | **梗概**：本文带你看看 SpaceX 上天的项目是如何开发的，并且通过学习该项目的一些开发规范和代码层次结构得出前端架构的一些思考。SpaceX 的火箭控制台是使用 JavaScript 开发的，”面试造火箭“这句话真的不假。 12 | 13 | **推荐语**：前端没有架构？？？\ 14 | \ 15 | 我们在很多时候都可以听到这样的暴论，但是这就是我们不得不接受的现实？恐怕也未必。那么作为前端架构师又应该为何负责那些内容，我们如何成为一名前端架构师？或许这个“上天的项目”能给到一点点启发，让我们在这条成长的路上向前迈进。 16 | 17 | ### [跨平台新选择](http://3.cn/101-w21uD) 18 | 19 | **梗概**：Flutter 2 正式亮相，作为 Flutter 的一次重大版本升级，Flutter 2 将帮助开发人员在任意平台创建优雅、高性能且能够轻松移植的应用程序。在 Flutter2 的支持下，你可以使用相同的代码库将原生应用程序发布至 iOS、Android、Windows、macOS 以及 Linux 五大系统阵营之上。此外，Flutter 2 还能够完美契合 Chrome、Firefox、Safari 以及 Edge 等网络浏览器，甚至可以被嵌入至汽车、电视与智能家居当中，借此带来最普遍、最具便携性的计算体验。 20 | 21 | **推荐语**：Flutter 是 Google 发布的一个用于创建跨平台、高性能移动应用的框架。自 2018 发布以来， 16 个月时间，有超过 200 万开发人员用过了 Flutter。\ 22 | \ 23 | 在软件开发领域，跨平台一直是老生常谈的话题，而且随着可穿戴设备/智能家居/智能汽车等概念的兴起而愈演愈烈。从 H5 cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放。 24 | 25 | ### [开源世界的新“大门”](http://3.cn/101-w21KK) 26 | 27 | **梗概**：GitHub 是全世界构建软件的地方。全球有超过 5,600 万名开发人员在 GitHub 上构建和协作。透过全新主页，GitHub 团队向社区展示开源开发如何超越我们所生活的边界，并通过开发者的旅程来讲述的产品故事。 28 | 29 | **推荐语**：GitHub 前段时间更新了官网首页，其中 Globe 地球动效十分吸引人，本文来自 GitHub 团队的博客，以技术角度分析如何使用 WebGL 构建实时地球动效的，其中很多细节的优化和思考，如创意与性能优化之间的平衡，感知速度、动效质量等等都值得细细揣摩。 30 | 31 | ### [用户推荐算法的敲门砖](http://3.cn/101w-1ZuJ) 32 | 33 | **梗概**：逻辑回归是CTR预测场景上的常用模型，深入思考理解透彻其背后的逻辑和机理，不仅能使我知道如何去调优改进模型、也能带动我们以点带面的，让我们对机器学习的方法论有一个更全面更清晰的认知。这篇文章主要回顾了逻辑回归算法，并具体从数学角度去剖析算法背后的建模思路和实现逻辑。 34 | 35 | **推荐语**：逻辑回归是一种广义的线性回归分析模型，常用于数据挖掘等领域，是机器学习中，监督学习下的一种用于解决二分类问题的实用方法，用来判断事件的可能性。移动互联网时代，所有公司不断挖掘用户的潜力，推荐算法就是其中重要的基石，被广泛应用于短视频、电商等诸多领域，而逻辑回归就是推荐模块中最常见的设计，用于分析用户数据的特征……相信本文可以帮助你快速入门逻辑回归，在机器学习领域中打开一片天地。 36 | 37 | ## 流觞亭 38 | 39 | > 因山卜地心机巧，望水如天眼力穷 40 | 41 | ### [关于“鸿蒙”，你应该知道这些](http://3.cn/101-wVweq) 42 | 43 | **梗概**：在中国传统文化中，鸿蒙有着特殊的位置，作为开天辟地前的一团混沌元气，它被看作是万物的起源，由此可见华为对 Harmony OS 的期许为何。所谓“盘古一笑鸿蒙开，神马负图从天来”，以此为契机“开天辟地”，打开局面，为国内开源带来新面貌。 44 | 45 | **推荐语**：常言道：“虚游身在鸿蒙外，一览浮青遍九垓”，但随着时间推移，我们也不该一直以最初的眼光来看待它，在华为不断推进下，鸿蒙“衍化”出不一样的姿态，不断回应各行各业对它的期许。所以鸿蒙到底是怎样的系统？我们什么时候会用到它？作为开发者，如何以自己的方式去接入鸿蒙？这篇文章，或许能给你一个清晰的认知。 46 | 47 | ![FOOTER](https://img11.360buyimg.com/ling/jfs/t1/156651/28/14271/309634/60463f91E7afc1e75/aaf38867ca4f1514.jpg) 48 | -------------------------------------------------------------------------------- /articles/40.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img20.360buyimg.com/ling/jfs/t1/142394/28/17992/313503/60ac954dEa61334c0/6a78aee4ba5ed868.png) 2 | 3 | # 蒲公英 · JELLY技术期刊 Vol.40 4 | 5 | ## 观海志 6 | 7 | > 登山则情满于山，观海则意溢于海 8 | 9 | ### [把 Node.js 搬进浏览器](http://3.cn/101O-jEkj) 10 | 11 | 12 | 13 | **梗概**：几年前，我们意识到网络正朝着一个关键的拐点发展。WebAssembly 的出现让我们可以有能力编写基于 WebAssembly 的操作系统，这个操作系统的功能强大到可以完全在浏览器中运行 Node.js。我们设计了一个比本地环境更快，更安全和一致的高级开发环境，可以实现无缝代码协作，而不需要设置本地环境。两年后的今天，他终于诞生了！ 14 | 15 | 16 | 17 | **推荐语**：在最近的 Google I/O 主题演讲中，Stackblitz 向大家介绍了他们与 Next.js 和 Google 团队合作开发的 IDE WebContainers，给 CloudIDE 带来了革命性的变化，非常惊艳！ 18 | 19 | ### [GitHub 团队的跨框架组件](http://3.cn/101OcMX-0) 20 | 21 | 22 | 23 | **梗概**：为什么完全移除了 jQuery 并转向 Web Components？怎么高效书写健壮、无依赖、高质量的 Web Components？ViewComponent 、Catalyst 真的好用么？这篇基于 GitHub 团队开发 Web Components 并大量实践使用的总结文章会给你答案，同时 GitHub 团队将以「Github Elements」的名义开源更多通用的 Web Components。 24 | 25 | 26 | 27 | **推荐语**：Web Compoents 技术是由 Google 推动的浏览器原生组件，已发布将近四年的时间，一直处于不温不火的状态。在 GitHub 大规模使用 Web Components，并且开源自家的 GitHub Elements 组件之后，Web Components 能否有所起色呢，敬请期待吧~ 28 | 29 | ### [系统架构整洁的基本要素](http://3.cn/10-1OcRst) 30 | 31 | 32 | 33 | **梗概**：关于整体系统架构的想法有非常多，有着相似之处。本文围绕这些系统架构的关键点展开讲解，由内及外分别是实体、用例、适配器、框架和驱动。需要遵循的规则是内层永远不能依赖于外层的数据结构或者逻辑，对于代码的易读、可扩展、可维护、可重用将有很大提升。[翻译版本](https://zhuanlan.zhihu.com/p/64343082) 34 | 35 | 36 | 37 | **推荐语**：本文为 Uncle Bob 的 [`The Clean Architecture 《架构整洁之道》`](https://item.jd.com/12447192.html) 的前身。你是否可以在短时间内对所使用的 Web / RPC 或者数据库进行切换，是否在为项目整体架构、代码分层踩过的坑感到困扰，通过这篇文章来获取启发！本文只是简短的讨论了架构设计，而书中的内容可以让你从代码层面和宏观两个层面对整个软件设计有一个全面的了解。 38 | 39 | ### [改写规则的 Shell 脚本工具](http://3.cn/10-1OcQ2u) 40 | 41 | 42 | 43 | **梗概**：Bash 很棒没错，但在编写脚本工具时，人们通常会选择一种更方便的编程语言。标准的 Node.js 库在使用之前需要许多额外的操作，例如安装依赖、引入库等。zx 提供一个 child_process 的封装，减少转义参数、返回值处理等繁琐操作。 44 | 45 | 46 | 47 | **推荐语**：这是一个对开发者更友好的编写脚本的工具，短短几天就获得破万的 Star（谷歌出品加持）。zx 工具跟以往写 Node.js 脚本最大的不同，是对 child_process 模块的封装，设计和体验都俱佳，另外还支持执行远程脚本。\ 48 | \ 49 | `友情提示：这并不是谷歌官方支持的产品哦～` 50 | 51 | ### [思考产品“靠谱程度”](http://3.cn/10-1OcQjR) 52 | 53 | 54 | 55 | **梗概**：本文通过一些小案例详细介绍了“卫哲的3+1思考法”的内容：需求是从哪里来的，目标客户是谁？有多少人有这样的需求，这个需求紧迫吗？他们的痛是什么，场景是什么（用产品之前/之后）？解决之后在网站数据上会有什么表现？以及在现实场景中对评估项目的帮助。 56 | 57 | 58 | 59 | **推荐语**：都说要站在用户的鞋子里看问题，无论是产品还是项目，找到其背后的本质问题才能更好的规划和实现；“3+1”可以帮助产品同学理清思路，准确找到“用什么方法解决哪些人的什么问题“的答案，也可以帮助开发同学更好的理解需求，降低评估过程中的误差；文章和案例有些年头了，但是思想还是值得学习一下的，提供了一个思考问题的切入点。 60 | 61 | ## 眺望阁 62 | 63 | > 一区聊寄尘嚣外，万景皆归眺望中 64 | 65 | ### 专题话题: 云巅上的 Tide 66 | 67 | Cloud IDE 已经不是什么新概念了，但是作为开发，它到底能够给我们带来什么？工程化和研发上云？选择云开发又会有哪些优势？很遗憾小助手也不太懂，不过近期有接到一个 Tide 插件的新需求，打算找 Tide 团队的童鞋调研一下。 68 | 69 | ![](https://img14.360buyimg.com/ling/jfs/t1/127887/19/18999/237975/60ac7347Ec875ccf9/20e36346ffd18868.png) 70 | ![](https://img11.360buyimg.com/ling/jfs/t1/192521/35/4783/271714/60ac7347Eedbec6df/631923a523ebe8ee.png) 71 | ![](https://img14.360buyimg.com/ling/jfs/t1/180778/15/5793/279236/60ac7348E6fc9a25c/d725212cc48c8a15.png) 72 | 73 | ![FOOTER](https://img11.360buyimg.com/ling/jfs/t1/156651/28/14271/309634/60463f91E7afc1e75/aaf38867ca4f1514.jpg) 74 | -------------------------------------------------------------------------------- /articles/41.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img30.360buyimg.com/ling/jfs/t1/188133/29/9908/298780/60d3e408Ed439af87/df4cdfb577b67bd0.png) 2 | 3 | # 蒲公英 · JELLY技术期刊 Vol.41 4 | 5 | ## 观海志 6 | 7 | > 登山则情满于山，观海则意溢于海 8 | 9 | ### [Google 出品的 CSS 课程](http://3.cn/-1026Dina) 10 | 11 | 12 | 13 | **梗概**：本课程将系统地介绍 CSS 基础，适用于初学者和高阶开发人员，通过学习课程的各个模块，您将会了解 CSS 的核心概念，并且知道如何在项目中有效地运用。 14 | 15 | 16 | 17 | **推荐语**：Google 出品必属精品，CSS 作为前端最基础的技能，跟着 Una Kravets 大神重新学习 CSS，大概率会有新的收获。另外，安利 Una Kravets 大神的播客「The CSS Podcast」 18 | 19 | ### [React 18 更极致的批处理优化](http://3.cn/1026Df-TS) 20 | 21 | 22 | 23 | **梗概**：以往 React 在某些情况下会对多个更新动作进行批处理，最终只重新渲染一次，优化更新性能。React 18 默认会进行更多的批处理操作，开发者无需再调用 unstable_batchedUpdates 手动启动批处理。Dan 在文中详细讲解了批处理是什么，它当前是怎么工作的，React 18 中又带来了什么变化，以及潜在的 Breaking Changes。 24 | 25 | 26 | 27 | **推荐语**：如果你不了解当前 React 批处理的具体行为，不清楚为什么事件回调中多个 `setState` 会被合并，而事件回调中调用 `setTimeout` 里的 `setState` 又不会被合并，这篇文章将会很好地为你答疑解惑。此外，React 18 最近发布了 alpha 版本，如果你对 React 18 的新特性有兴趣，可以浏览 [React 18 工作组](https://github.com/reactwg/react-18/discussions)，这里汇集 React 团队对 React 18 新特性的介绍、设计原理解析等内容。 28 | 29 | ### [深入 React 18 的 Suspense SSR 架构](http://3.cn/1-026DjCL) 30 | 31 | 32 | 33 | **梗概**：React 18 将会推出全新的 Suspense SSR 架构，这一特性汇聚了 React 团队多年的心血，能显著提升 React SSR 的性能和用户体验。Dan 在文章中详细讲解了 Suspense SSR 的设计目的、两大特性以及整体架构设计。文章图文并茂，能让读者学习到 SSR 的原理、存在的问题和 Suspense SSR 所带来的改进。 34 | 35 | 36 | 37 | **推荐语**：尽管引入 `Suspense` 的最初目的在于改变异步加载的用户体验，但一直以来它只能用于在前端配合 `React.lazy` 进行使用。这将会在 React 18 中得到根本的改变，`Suspense` 能把应用拆分为独立的小块，在服务端借助 [pipeToNodeWritable](https://github.com/reactwg/react-18/discussions/22) 实现流式推送，在浏览器借助 [Concurrent Mode](https://github.com/reactwg/react-18/discussions/5) 根据优先级进行 hydrate。这样我们能够对 SSR 的内容进行精细化控制，解决以往服务端全量传输、客服端全量 hydrate 带来的阻塞性问题，带来类似 **BigPipe** 的功能，显著提升用户体验。 38 | 39 | ### [React 18 新特性：startTransition](http://3.cn/1026Dj-nC) 40 | 41 | 42 | 43 | **梗概**：按紧急程度划分，React 的渲染可以分为两类：Urgent updates 和 Transition updates，在 React 18 中所有的更新默认为 Urgent updates。文章以一个输入框的例子，描述了 startTransition 是如何通过改变渲染优先级到 Transition updates，从而解决 UI 阻塞问题，进而提高用户体验的。 44 | 45 | 46 | 47 | **推荐语**：自 `Concurrent Mode` 概念推出以来，我们了解到渲染可以是有优先级、可中断的。而 `startTransition` API 让我们能够把某些渲染（渲染逻辑重的或网络延迟严重）的优先级降低，避免阻塞交互性渲染（如点击、输入引起的渲染），提高用户体验。以往我们常常使用 `setTimeout`、`debounce` 等手段优化阻塞性渲染，但需要注意 `startTransition` 和它们之间的区别（可感知 Pending 状态等）。相信 React 18 广泛普及后，这是一个非常重要而且常用的优化手段。 48 | 49 | ### [轻量级 Postman 工具](http://3.cn/1026Dja-z) 50 | 51 | 52 | 53 | **梗概**：Postman 替代工具，轻量级 Rest Client，目前在 VSCode 插件市场中有接近 16w 下载量，入股不亏！ 54 | 55 | 56 | 57 | **推荐语**：Postman 毕竟是付费软件，日常的业务开发场景下，开发者往往只需要轻量的测试 API 的工具，Thunder Client for VSCode 也许是更好的选择。 58 | 59 | ### [十分钟弄懂用户画像](http://3.cn/1026Dg-UY) 60 | 61 | 62 | 63 | **梗概**：这篇文章给我们介绍了什么是用户画像，为什么需要用户画像，用户画像对我们有什么意义，以及用户画像标签算法，让我们对用户画像有了比较全面清晰的认知。 64 | 65 | 66 | 67 | **推荐语**：用户画像是在构建推荐系统中，一项是非常基础的技术，可以说是个性化推荐服务的前提。用户画像必须深入具体的业务场景，不同业务场景用户画像是不一样的，但是构建用户画像的算法思路是大同小异。掌握了这些技术方法，深入理解业务场景，是做好用户画像的两个大前提。 68 | 69 | ![FOOTER](https://img11.360buyimg.com/ling/jfs/t1/156651/28/14271/309634/60463f91E7afc1e75/aaf38867ca4f1514.jpg) 70 | -------------------------------------------------------------------------------- /articles/42.md: -------------------------------------------------------------------------------- 1 | ![HEADER](http://img10.360buyimg.com/ling/jfs/t1/181188/18/15664/295059/60fec242E974a9c75/3d0a9f978ed9e1e4.png) 2 | 3 | # 蒲公英 · JELLY技术期刊 Vol.42 4 | 5 | ## 观海志 6 | 7 | > 登山则情满于山，观海则意溢于海 8 | 9 | ### [Uber 工程师的 JS 算法课](http://3.cn/102pBI4-K) 10 | 11 | 12 | 13 | **梗概**：文章针对计算机开发中，经常需要使用到的一些思维方式和基础原理，整理成分模块介绍，如数据结构：链表、队列、栈、树；如算法：割圆术、笛卡尔积、正则、二分查找、冒泡排序等等，以供大家学习和研究。主要包含有概念介绍、图示、练习以及视频演示教学。这个对于前端，乃至所有的程序开发的进阶，都有着极大的指导作用。 14 | 15 | 16 | 17 | **推荐语**：在我们的日常开发中，如果能结合数据结构和算法，了解这些思维后，能简化我们的程序，增强程序健壮性和可读性，优化性能往往也需要这类知识的支持。让我们一起code！ 18 | 19 | ### [大数据时代的个人隐私](http://3.cn/102pBJY-N) 20 | 21 | 22 | 23 | **梗概**：数字化技术在不停进步，个人隐私的保护变得更加重要，本文分析了浏览器指纹技术怎么去定义和定位到一个具体的用户，以及一些具体的应用场景。 24 | 25 | 26 | 27 | **推荐语**：在使用智能设备的时候难免会暴露一些个人信息，但是一定要记得在一些关键信息推送获取的权限上格外留意，尽可能避免个人隐私信息的暴露，这会是我们在新时代的重要能力。 28 | 29 | ### [设计师的 Github](http://3.cn/10-2pBJm2) 30 | 31 | 32 | 33 | **梗概**：一次的 Figma Config 2021 发布了一款全新的白板工具 FigJam，推出了期待已久分支管理功能，同时也告别鸡肋的 Mirror，有了全新手机应用 Figma Mobile，其他内容包括实时语音工具、多人在线编辑上限 500 人以及社区正式开放给所有人~ 34 | 35 | 36 | 37 | **推荐语**：设计师终于迎来了开源社区 Figma Community，属于设计师的「Github」，另外设计稿也支持分支管理功能，告别了传统的多文件版本管理方式，极大的提升设计协作效率。 38 | 39 | ### [告别 PPT 工程师](http://3.cn/102-pBJYO) 40 | 41 | 42 | 43 | **梗概**：为开发者打造的演示文稿工具，支持 Markdown 语法，可定制主题，快速生成演示文稿…… `Slidev` 旨在为开发者提供灵活性和交互性，通过使用他们已经熟悉的工具和技术，使他们的演示文稿更加有趣、更具表现力和吸引力。 44 | 45 | 46 | 47 | **推荐语**：写文档、写 PPT 占据了大部分日常的工作时间，你是否想过更好的解决方案呢？Slidev 是一个 Markdown 转 PPT 的工具，支持导出 PDF 和 SPA 应用，并提供 VSCode 辅助插件。另外精读该工具源码，可以学习如果基于 Vite 封装完整应用。 48 | 49 | ## 流觞亭 50 | 51 | > 因山卜地心机巧，望水如天眼力穷 52 | 53 | ### [从零开始实现的像素画](http://3.cn/102pBKc-Z) 54 | 55 | 56 | 57 | **梗概**：像素风是永不过时的经典，本文从零开始教你如何实现超像素分割 SLIC 算法，并完成一个图片像素化工具，快来和小姐姐一起来学算法吧。 58 | 59 | 60 | 61 | **推荐语**：还记得自己曾经玩过哪些像素风游戏么，救赎之钟、诡居小镇还是魔塔？这篇文章当然不会告诉你怎么去开发这些游戏，但是像素风格的算法实现，和游戏相比也不失趣味～ 62 | 63 | ![FOOTER](https://img11.360buyimg.com/ling/jfs/t1/156651/28/14271/309634/60463f91E7afc1e75/aaf38867ca4f1514.jpg) -------------------------------------------------------------------------------- /articles/43.md: -------------------------------------------------------------------------------- 1 | ![HEADER](https://img13.360buyimg.com/ling/jfs/t1/192793/12/19911/292003/6126f010E5dd65fae/3805c24ec78c1744.jpg) 2 | 3 | # 蒲公英 · JELLY技术期刊 Vol.43 4 | 5 | ## 观海志 6 | 7 | > 登山则情满于山，观海则意溢于海 8 | 9 | ### [Vue 3.2 正式发布！](http://3.cn/1-02EEKYc) 10 | 11 | 12 | 13 | **梗概**：近日，Vue 正式发布了 3.2 版本，版本名延续了以往的风格，依然使用动漫命名 —— "Quintessential Quintuplets"。此版本包括了许多新的特性与性能优化。新特性方面，` 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /src/pages/index/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2team/tech-weekly/f9635590567ab060252e7b596be366bb490bd869/src/pages/index/index.scss -------------------------------------------------------------------------------- /src/pages/index/index.tsx: -------------------------------------------------------------------------------- 1 | import Taro, { Component, Config } from '@tarojs/taro' 2 | import { View, Text } from '@tarojs/components' 3 | import './index.scss' 4 | 5 | export default class Index extends Component { 6 | 7 | componentWillMount () { } 8 | 9 | componentDidMount () { } 10 | 11 | componentWillUnmount () { } 12 | 13 | componentDidShow () { } 14 | 15 | componentDidHide () { } 16 | 17 | /** 18 | * 指定config的类型声明为: Taro.Config 19 | * 20 | * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型 21 | * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string 22 | * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型 23 | */ 24 | config: Config = { 25 | navigationBarTitleText: '首页' 26 | } 27 | 28 | render () { 29 | return ( 30 | 31 | Hello world! 32 | 33 | ) 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "module": "commonjs", 5 | "removeComments": false, 6 | "preserveConstEnums": true, 7 | "moduleResolution": "node", 8 | "experimentalDecorators": true, 9 | "noImplicitAny": false, 10 | "allowSyntheticDefaultImports": true, 11 | "outDir": "lib", 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "strictNullChecks": true, 15 | "sourceMap": true, 16 | "baseUrl": ".", 17 | "rootDir": ".", 18 | "jsx": "preserve", 19 | "jsxFactory": "Taro.createElement", 20 | "allowJs": true, 21 | "resolveJsonModule": true, 22 | "typeRoots": [ 23 | "node_modules/@types", 24 | "global.d.ts" 25 | ] 26 | }, 27 | "exclude": [ 28 | "node_modules", 29 | "dist" 30 | ], 31 | "compileOnSave": false 32 | } 33 | --------------------------------------------------------------------------------