-
Notifications
You must be signed in to change notification settings - Fork 8
/
yuque.json
812 lines (812 loc) · 316 KB
/
yuque.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
[
{
"id": 1809741,
"slug": "201905",
"title": "将函数式进行到底，用 Hooks 武装组件 - TXD 前端月刊 201905 期",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 10,
"likes_count": 0,
"watches_count": 29,
"content_updated_at": "2019-07-04T03:17:27.405Z",
"updated_at": "2019-07-04T03:17:27.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 106292,
"creator": {
"id": 106292,
"type": "User",
"login": "shengmo",
"name": "绳墨金石",
"description": null,
"avatar_url": "https://cdn.yuque.com/yuque/0/2018/jpeg/106292/1528450129882-avatar/dac5282a-2347-47d1-a445-5d48274685c2.jpeg",
"large_avatar_url": "https://cdn.yuque.com/yuque/0/2018/jpeg/106292/1528450129882-avatar/dac5282a-2347-47d1-a445-5d48274685c2.jpeg?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.yuque.com/yuque/0/2018/jpeg/106292/1528450129882-avatar/dac5282a-2347-47d1-a445-5d48274685c2.jpeg?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.yuque.com/yuque/0/2018/jpeg/106292/1528450129882-avatar/dac5282a-2347-47d1-a445-5d48274685c2.jpeg?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 2,
"public_books_count": 1,
"followers_count": 1,
"following_count": 0,
"created_at": "2018-04-23T09:16:50.000Z",
"updated_at": "2019-07-03T02:37:46.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "\n\n【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；五月清风徐来，跟我们一起来看一看新的风向即将吹向何方，前端的技术力量又将影响哪些新的领域。\n\n> 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues)\n> 编辑：[墨止](https://github.com/damujiangr)\n> 审稿：[尹挚](https://github.com/x-cold)\n\n\n<a name=\"nuDOI\"></a>\n### 学习专栏\n\n<a name=\"GGxyG\"></a>\n#### [《](https://yq.aliyun.com/articles/700174)[深入浅出 React Hooks](https://yq.aliyun.com/articles/700174)[》](https://yq.aliyun.com/articles/700174)\n\nReact 16.8 了，还不了解 React Hooks？！想做前端极客，想写出酷酷的代码，那就赶紧跟 [@x-cold](https://github.com/x-cold) 一起来学习最新的 Hooks 知识吧！原文章看[这里](https://juejin.im/post/5cf475d66fb9a07ea944594e)，一步步进入 React Hooks 的世界。\n\n<a name=\"61Dob\"></a>\n#### [《一个合格的中级前端工程师必须要掌握的 28 个 JavaScript 技巧》](https://juejin.im/post/5cef46226fb9a07eaf2b7516)\n\n对在毕业季还在找工作的同学，可以说很实用的，如果能全部掌握这些技巧，拿到几个offer应该是没有问题的，当然要注意平时的积累，能力要全面。\n\n<a name=\"ycTg8\"></a>\n#### [《Node.js 技术栈》](https://github.com/Q-Angelo/Nodejs-Roadmap)\n\n这是作者从事 Node.js Developer 以来的学习历程，旨在为大家提供一个较详细的学习教程，侧重点更倾向于 Node.js 服务端所涉及的技术栈，如果本文能为您得到帮助，请给予支持！\n\n<a name=\"HeGV9\"></a>\n### 新闻快报\n\n<a name=\"fWxct\"></a>\n#### Github 重磅推出包管理仓库\n\n\n现在使用 Github，你的团队可以发布公共/私有的包到 Github 提供的包管理仓库，目前包含的类型有 Npm, Docker, Maven, NuGet, RubyGems等，更多的类型还在继续添加中。而且该托管服务是完全免费的。[[戳👇传送门]](https://github.com/features/package-registry)\n\n<a name=\"1kh0t\"></a>\n#### Flutter 实现 Web 访问，新增桌面和嵌入式的应用场景\n\n2019 谷歌 I/O 大会上，Flutter Team 公布了 Flutter 可进行 Web 访问、提供自定义图像分类模型等诸多新特性，并且可以应用在桌面系统及嵌入式设备中，给未来提供了更多的想象空间，展现了 Flutter 从移动 UI 到制霸多平台的雄心。Flutter for Web 已发布第一个预览版本，可以查看官网信息进行尝鲜，体验惊喜 [[惊喜门]](https://flutter.dev/web)。在 Facebook 年度开发者大会上宣布了会稳定支持 RN，但是 RN 还要继续步履蹒跚吗？\n\n<a name=\"73Czh\"></a>\n#### HTML 和 DOM 标准统一\n\nW3C 宣布与 WHATWG 达成协议，HTML 和 DOM 标准都以 WHATWG 为准，也就是说以后只有一套 HTML 标准了。正所谓分久必合，合久必分，不过对大多数的框架工程师影响不是很大（扎心了） [[戳👇传送门]](https://www.w3.org/blog/news/archives/7753)\n\n<a name=\"D3i9r\"></a>\n#### Now and the Future: An Overview of the Web in 2019\n\nW3C Web 技术总负责人 Philippe Le Hégaret 在 QCon 2019 全球软件开发大会做的分享，介绍了Web 技术当前关注的技术方向，未来 W3C 更着力拓展新的领域，其中最重要的一项是汽车互联网，期望打造适用于车联网的 通用的 Web 技术方案。在拓展核心能力方面，有 WebRTC（视频通话）、Web Assembly（性能、语言生态）、WebPerf（性能管理）、Service Workers（离线）、Web Components（组件） 等等，前景如此美好，真的希望文中描述的技术能早日落地，给前端开发者们带来福音。[[传送门]](https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247491186&idx=1&sn=235f648fccaf0e2769fa5044418a8b4d&chksm=f951ab31ce262227a867bdaeaa9d967f2be0272108ef51cfdd9fd7c5118dbcb7201b56ded254&mpshare=1&scene=2&srcid=05090EIW4SEAUAWYJrESqW58&from=timeline&as)\n\n<a name=\"uqz2I\"></a>\n#### Ant Design 4.0 进行时！\n\nAnt Design 团队发布 4.0 开发规划，将使用最新的 React API，放弃 IE9/10 浏览器的支持，同时会增加设计资产管理的工具包，预计后续设计师就可以参考到这些资源了\n\n<a name=\"c7MBu\"></a>\n### 工具推荐\n\n<a name=\"Iovc5\"></a>\n#### 微软发布 Windows Terminal\n\n微软正在推出一款名为 Windows Terminal 的新命令行终端工具。它被设计为访问 PowerShell、 Cmd 和 Windows Linux 子系统（WSL）等环境。微软正在为想要调整终端工具的开发人员添加多个选项卡、分割窗口、快捷键支持，另外支持主题和自定义等等。微软这款新的 Windows 终端应用程序在 Build 2019 开发者大会上公布了。[[戳👇传送门1]](https://devblogs.microsoft.com/commandline/introducing-windows-terminal/) 、[[戳👇传送门2]](https://github.com/microsoft/Terminal) \n\n\n\n<a name=\"IM8tz\"></a>\n#### VSCode 添加 Remote Development 特性\n\n使用 Remote Development 特性，开发者可以在远程环境下进行开发和调试，同时具备代码高亮和补充功能，跟在本地使用一样\n\n<a name=\"QlXFL\"></a>\n#### EdgeDB - The next generation database\n\nEdgeDB 结合了 NoSQL 数据库的简单性，关系模型强大的查询、严格、一致性和性能。天然支持 GraphQL 哦。数据库选型又多了一份选择。[[戳👇传送门]](https://edgedb.com/)\n\n<a name=\"gujLJ\"></a>\n#### 基于 Operational Transformation 的实时数据库 sharedb\n\nShareDB is a realtime database backend based on [Operational Transformation (OT)](https://en.wikipedia.org/wiki/Operational_transformation) of JSON documents. It is the realtime backend for the [DerbyJS web application framework](http://derbyjs.com/).\n\n<a name=\"XJNWk\"></a>\n#### create-react-app 发布 3.0\n\n支持了 React Hooks 的代码风格校验、TypeScript Lint、Jest 24，Hooks 语法可以很方便的用起来了[[Release 日志]](https://github.com/facebook/create-react-app/releases/tag/v3.0.0)\n\n<a name=\"4YvDS\"></a>\n### 热门文章\n\n<a name=\"5G2Vg\"></a>\n#### [《前端能力中台化之路—Fusion Design 成长史》](https://mp.weixin.qq.com/s/LJoFj_XbaOqpiiGL1xevVg)\n\nFDCON 2019 演讲的提炼版本，介绍了前端组件库 Fusion Design 的成长演变之路，还有诸多特性的背后的思考，包括对未来的一些探索\n\n<a name=\"qqGqY\"></a>\n#### [《探索 Serverless 中的前端开发模式》](https://mp.weixin.qq.com/s/Z2NDVA_UdsRCS8kgy8ejow)\n\n前端工程师永远在打破边界，在 Web 、App、桌面和服务端等方面都已经伸出了触角，Serverless 的出现，又能在前端圈引领什么样的风向和潮流呢\n\n<a name=\"qn1QC\"></a>\n#### [《大型项目前端架构浅谈（8000字原创）》](https://juejin.im/post/5cea1f705188250640005472)\n\n文中从基础层设计到应用层设计的多种方案、平台等做了简单的介绍，从宏观方面介绍了一个大型前端架构的雏形，可以在自己进行技术设计的做一个参考\n\n<a name=\"fGzcx\"></a>\n#### [《精读《Function Component 入门》》](https://zhuanlan.zhihu.com/p/67087685)\n\n如果你将要使用或者已经开始使用 React 16了，那么小编我推荐来读一下这篇文件，从传统的 Class Component 思维方式转变一下，开始使用 Function Component ，使用 Hooks 来搭建自己的 React 应用吧。\n\n<a name=\"gpFd9\"></a>\n### 小趣味\n\n<a name=\"0fEjB\"></a>\n#### IE 所有版本的下载链接\n\n一个 IE 爱好者收集了 IE1～IE12、EDGE 的所有下载链接，新版的 IE 已经拥抱 Chromium 了，传统的IE即将进入“博物馆”，IE 爱好者过来围观吧。[[IE 时光机]](https://www.my-internet-explorer.com/edge/)\n\n",
"body_draft": "",
"body_html": "<p><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/103147/1559524295409-28a240d8-9eb1-49b4-adf4-8ffd1b049e58.png#align=left&display=inline&height=449&name=image.png&originHeight=898&originWidth=1790&size=2102071&status=done&width=895\" style=\"max-width: 600px; width: 895px;\" /></p><p><br /></p><p><span>【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；五月清风徐来，跟我们一起来看一看新的风向即将吹向何方，前端的技术力量又将影响哪些新的领域。</span></p><p><br /></p><blockquote style=\"padding-left: 1em;\"><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p><p>编辑：<a href=\"https://github.com/damujiangr\" target=\"_blank\">墨止</a></p><p>审稿：<a href=\"https://github.com/x-cold\" target=\"_blank\">尹挚</a></p></blockquote><p><br /></p><h3 id=\"nuDOI\">学习专栏</h3><p><br /></p><h4 id=\"GGxyG\"><a href=\"https://yq.aliyun.com/articles/700174\" target=\"_blank\">《</a><a href=\"https://yq.aliyun.com/articles/700174\" target=\"_blank\"><span>深入浅出 React Hooks</span></a><a href=\"https://yq.aliyun.com/articles/700174\" target=\"_blank\">》</a></h4><p><br /></p><p>React 16.8 了，还不了解 React Hooks？！想做前端极客，想写出酷酷的代码，那就赶紧跟 <a href=\"https://github.com/x-cold\" target=\"_blank\">@x-cold</a> 一起来学习最新的 Hooks 知识吧！原文章看<a href=\"https://juejin.im/post/5cf475d66fb9a07ea944594e\" target=\"_blank\">这里</a>，一步步进入 React Hooks 的世界。</p><p><br /></p><h4 id=\"61Dob\"><a href=\"https://juejin.im/post/5cef46226fb9a07eaf2b7516\" target=\"_blank\">《一个合格的中级前端工程师必须要掌握的 28 个 JavaScript 技巧》</a></h4><p><br /></p><p>对在毕业季还在找工作的同学，可以说很实用的，如果能全部掌握这些技巧，拿到几个offer应该是没有问题的，当然要注意平时的积累，能力要全面。</p><p><br /></p><h4 id=\"ycTg8\"><a href=\"https://github.com/Q-Angelo/Nodejs-Roadmap\" target=\"_blank\">《Node.js 技术栈》</a></h4><p><br /></p><p>这是作者从事 Node.js Developer 以来的学习历程，旨在为大家提供一个较详细的学习教程，侧重点更倾向于 Node.js 服务端所涉及的技术栈，如果本文能为您得到帮助，请给予支持！</p><p><br /></p><h3 id=\"HeGV9\">新闻快报</h3><p><br /></p><h4 id=\"fWxct\"><span>Github 重磅推出包管理仓库</span></h4><p><span><img alt=\"May-31-2019 16-24-50.gif\" title=\"May-31-2019 16-24-50.gif\" src=\"https://cdn.nlark.com/yuque/0/2019/gif/106292/1559291181359-440a4c28-6d31-4942-bb8e-155f7b50b3d3.gif#align=left&display=inline&height=420&name=May-31-2019%2016-24-50.gif&originHeight=420&originWidth=820&size=726404&status=done&width=820\" style=\"max-width: 600px; width: 820px;\" /></span></p><p><br /></p><p><span style=\"color: #24292E;\">现在使用 Github，你的团队可以发布公共/私有的包到 Github 提供的包管理仓库，目前包含的类型有 Npm, Docker, Maven, NuGet, RubyGems等，更多的类型还在继续添加中。而且该托管服务是完全免费的。</span><a href=\"https://github.com/features/package-registry\" target=\"_blank\">[戳👇传送门]</a></p><p><br /></p><h4 id=\"1kh0t\">Flutter 实现 Web 访问，新增桌面和嵌入式的应用场景</h4><p><br /></p><p>2019 谷歌 I/O 大会上，Flutter Team 公布了 Flutter 可进行 Web 访问、提供自定义图像分类模型等诸多新特性，并且可以应用在桌面系统及嵌入式设备中，给未来提供了更多的想象空间，展现了 Flutter 从移动 UI 到制霸多平台的雄心。Flutter for Web 已发布第一个预览版本，可以查看官网信息进行尝鲜，体验惊喜 <a href=\"https://flutter.dev/web\" target=\"_blank\">[惊喜门]</a>。在 Facebook 年度开发者大会上宣布了会稳定支持 RN，但是 RN 还要继续步履蹒跚吗？</p><p><br /></p><h4 id=\"73Czh\"><span>HTML 和 DOM 标准统一</span></h4><p><br /></p><p><span style=\"color: #24292E;\">W3C 宣布与 WHATWG 达成协议，HTML 和 DOM 标准都以 WHATWG 为准，也就是说以后只有一套 HTML 标准了。正所谓分久必合，合久必分，不过对大多数的框架工程师影响不是很大（扎心了） </span><a href=\"https://www.w3.org/blog/news/archives/7753\" target=\"_blank\">[戳👇传送门]</a></p><p><br /></p><h4 id=\"D3i9r\"><span class=\"lake-fontsize-12\" style=\"color: #4A4A4A;\">Now and the Future: An Overview of the Web in 2019</span></h4><p><br /></p><p>W3C Web 技术总负责人 Philippe Le Hégaret 在 QCon 2019 全球软件开发大会做的分享，介绍了Web 技术当前关注的技术方向，未来 W3C 更着力拓展新的领域，其中最重要的一项是汽车互联网，期望打造适用于车联网的 通用的 Web 技术方案。在拓展核心能力方面，有 <span style=\"color: #4A4A4A;\">WebRTC（视频通话）、</span><span style=\"color: #4A4A4A;\">Web Assembly（性能、语言生态）、</span><span style=\"color: #4A4A4A;\">WebPerf（性能管理）、</span><span style=\"color: #4A4A4A;\">Service Workers（离线）、</span><span style=\"color: #4A4A4A;\">Web Components（组件） 等等，前景如此美好，真的希望文中描述的技术能早日落地，给前端开发者们带来福音。</span><a href=\"https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247491186&idx=1&sn=235f648fccaf0e2769fa5044418a8b4d&chksm=f951ab31ce262227a867bdaeaa9d967f2be0272108ef51cfdd9fd7c5118dbcb7201b56ded254&mpshare=1&scene=2&srcid=05090EIW4SEAUAWYJrESqW58&from=timeline&as\" target=\"_blank\">[传送门]</a></p><p><br /></p><h4 id=\"uqz2I\">Ant Design 4.0 进行时！</h4><p><br /></p><p>Ant Design 团队发布 4.0 开发规划，将使用最新的 React API，放弃 IE9/10 浏览器的支持，同时会增加设计资产管理的工具包，预计后续设计师就可以参考到这些资源了</p><p><br /></p><h3 id=\"c7MBu\">工具推荐</h3><p><br /></p><h4 id=\"Iovc5\"><span>微软发布 Windows Terminal</span></h4><p><br /></p><p>微软正在推出一款名为 Windows Terminal 的新命令行终端工具。它被设计为访问 PowerShell、 Cmd 和 Windows Linux 子系统（WSL）等环境。微软正在为想要调整终端工具的开发人员添加多个选项卡、分割窗口、快捷键支持，另外支持主题和自定义等等。微软这款新的 Windows 终端应用程序在 Build 2019 开发者大会上公布了。<a href=\"https://devblogs.microsoft.com/commandline/introducing-windows-terminal/\" target=\"_blank\">[戳👇传送门1]</a> 、<a href=\"https://github.com/microsoft/Terminal\" target=\"_blank\">[戳👇传送门2]</a> </p><p><br /></p><p><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/103147/1559547541629-6b7ca0d0-0d9b-4792-901a-8497131b0c12.png#align=left&display=inline&height=418&name=image.png&originHeight=470&originWidth=728&size=598691&status=done&width=648\" style=\"max-width: 600px; width: 648px;\" /></p><p><br /></p><h4 id=\"IM8tz\">VSCode <span style=\"color: #1A1A1A;\"> 添加 Remote Development 特性</span></h4><p><br /></p><p><span style=\"color: #1A1A1A;\">使用 Remote Development 特性，开发者可以在远程环境下进行开发和调试，同时具备代码高亮和补充功能，跟在本地使用一样</span></p><p><br /></p><h4 id=\"QlXFL\"><span>EdgeDB - The next generation database</span></h4><p><br /></p><p><span style=\"color: #24292E;\">EdgeDB 结合了 NoSQL 数据库的简单性，关系模型强大的查询、严格、一致性和性能。天然支持 GraphQL 哦。数据库选型又多了一份选择。</span><a href=\"https://edgedb.com/\" target=\"_blank\">[戳👇传送门]</a></p><p><br /></p><h4 id=\"gujLJ\"><span>基于 Operational Transformation 的实时数据库 sharedb</span></h4><p><br /></p><p>ShareDB is a realtime database backend based on <a href=\"https://en.wikipedia.org/wiki/Operational_transformation\" target=\"_blank\">Operational Transformation (OT)</a> of JSON documents. It is the realtime backend for the <a href=\"http://derbyjs.com/\" target=\"_blank\">DerbyJS web application framework</a>.</p><p><br /></p><h4 id=\"XJNWk\">create-react-app 发布 3.0</h4><p><br /></p><p><span style=\"color: #1A1A1A;\">支持了 React Hooks 的代码风格校验、TypeScript Lint、Jest 24，Hooks 语法可以很方便的用起来了</span><a href=\"https://github.com/facebook/create-react-app/releases/tag/v3.0.0\" target=\"_blank\">[Release 日志]</a></p><p><br /></p><h3 id=\"4YvDS\">热门文章</h3><p><br /></p><h4 id=\"5G2Vg\"><a href=\"https://mp.weixin.qq.com/s/LJoFj_XbaOqpiiGL1xevVg\" target=\"_blank\">《前端能力中台化之路—Fusion Design 成长史》</a></h4><p><br /></p><p>FDCON 2019 演讲的提炼版本，介绍了前端组件库 Fusion Design 的成长演变之路，还有诸多特性的背后的思考，包括对未来的一些探索</p><p><br /></p><h4 id=\"qqGqY\"><a href=\"https://mp.weixin.qq.com/s/Z2NDVA_UdsRCS8kgy8ejow\" target=\"_blank\">《探索 Serverless 中的前端开发模式》</a></h4><p><br /></p><p>前端工程师永远在打破边界，在 Web 、App、桌面和服务端等方面都已经伸出了触角，Serverless 的出现，又能在前端圈引领什么样的风向和潮流呢</p><p><br /></p><h4 id=\"qn1QC\"><a href=\"https://juejin.im/post/5cea1f705188250640005472\" target=\"_blank\">《大型项目前端架构浅谈（8000字原创）》</a></h4><p><br /></p><p>文中从基础层设计到应用层设计的多种方案、平台等做了简单的介绍，从宏观方面介绍了一个大型前端架构的雏形，可以在自己进行技术设计的做一个参考</p><p><br /></p><h4 id=\"fGzcx\"><a href=\"https://zhuanlan.zhihu.com/p/67087685\" target=\"_blank\">《精读《Function Component 入门》》</a></h4><p><br /></p><p>如果你将要使用或者已经开始使用 React 16了，那么小编我推荐来读一下这篇文件，从传统的 Class Component 思维方式转变一下，开始使用 Function Component ，使用 Hooks 来搭建自己的 React 应用吧。</p><p><br /></p><h3 id=\"gpFd9\">小趣味</h3><p><br /></p><h4 id=\"0fEjB\"><span>IE 所有版本的下载链接</span></h4><p><br /></p><p><span style=\"color: #24292E;\">一个 IE 爱好者收集了 IE1～IE12、EDGE 的所有下载链接，新版的 IE 已经拥抱 C</span>hromium 了，传统的IE即将进入“<span>博物馆</span>”，IE 爱好者过来围观吧。<a href=\"https://www.my-internet-explorer.com/edge/\" target=\"_blank\">[IE 时光机]</a></p><p><br /></p>",
"body_lake": "<!doctype lake><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F103147%2F1559524295409-28a240d8-9eb1-49b4-adf4-8ffd1b049e58.png%22%2C%22originWidth%22%3A1790%2C%22originHeight%22%3A898%2C%22name%22%3A%22image.png%22%2C%22size%22%3A2102071%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A895%2C%22height%22%3A449%7D\"></card></p><p><br /></p><p><span>【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；五月清风徐来，跟我们一起来看一看新的风向即将吹向何方，前端的技术力量又将影响哪些新的领域。</span></p><p><br /></p><blockquote style=\"padding-left: 1em;\"><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p><p>编辑：<a href=\"https://github.com/damujiangr\" target=\"_blank\">墨止</a></p><p>审稿：<a href=\"https://github.com/x-cold\" target=\"_blank\">尹挚</a></p></blockquote><p><br /></p><h3 id=\"nuDOI\">学习专栏</h3><p><br /></p><h4 id=\"GGxyG\"><a href=\"https://yq.aliyun.com/articles/700174\" target=\"_blank\">《</a><a href=\"https://yq.aliyun.com/articles/700174\" target=\"_blank\"><span>深入浅出 React Hooks</span></a><a href=\"https://yq.aliyun.com/articles/700174\" target=\"_blank\">》</a></h4><p><br /></p><p>React 16.8 了，还不了解 React Hooks？！想做前端极客，想写出酷酷的代码，那就赶紧跟 <a href=\"https://github.com/x-cold\" target=\"_blank\">@x-cold</a> 一起<cursor />来学习最新的 Hooks 知识吧！原文章看<a href=\"https://juejin.im/post/5cf475d66fb9a07ea944594e\" target=\"_blank\">这里</a>，一步步进入 React Hooks 的世界。</p><p><br /></p><h4 id=\"61Dob\"><a href=\"https://juejin.im/post/5cef46226fb9a07eaf2b7516\" target=\"_blank\">《一个合格的中级前端工程师必须要掌握的 28 个 JavaScript 技巧》</a></h4><p><br /></p><p>对在毕业季还在找工作的同学，可以说很实用的，如果能全部掌握这些技巧，拿到几个offer应该是没有问题的，当然要注意平时的积累，能力要全面。</p><p><br /></p><h4 id=\"ycTg8\"><a href=\"https://github.com/Q-Angelo/Nodejs-Roadmap\" target=\"_blank\">《Node.js 技术栈》</a></h4><p><br /></p><p>这是作者从事 Node.js Developer 以来的学习历程，旨在为大家提供一个较详细的学习教程，侧重点更倾向于 Node.js 服务端所涉及的技术栈，如果本文能为您得到帮助，请给予支持！</p><p><br /></p><h3 id=\"HeGV9\">新闻快报</h3><p><br /></p><h4 id=\"fWxct\"><span>Github 重磅推出包管理仓库</span></h4><p><span><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F106292%2F1559291181359-440a4c28-6d31-4942-bb8e-155f7b50b3d3.gif%22%2C%22originWidth%22%3A820%2C%22originHeight%22%3A420%2C%22name%22%3A%22May-31-2019%2016-24-50.gif%22%2C%22size%22%3A726404%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A820%2C%22height%22%3A420%7D\"></card></span></p><p><br /></p><p><span style=\"color: #24292E;\">现在使用 Github，你的团队可以发布公共/私有的包到 Github 提供的包管理仓库，目前包含的类型有 Npm, Docker, Maven, NuGet, RubyGems等，更多的类型还在继续添加中。而且该托管服务是完全免费的。</span><a href=\"https://github.com/features/package-registry\" target=\"_blank\">[戳👇传送门]</a></p><p><br /></p><h4 id=\"1kh0t\">Flutter 实现 Web 访问，新增桌面和嵌入式的应用场景</h4><p><br /></p><p>2019 谷歌 I/O 大会上，Flutter Team 公布了 Flutter 可进行 Web 访问、提供自定义图像分类模型等诸多新特性，并且可以应用在桌面系统及嵌入式设备中，给未来提供了更多的想象空间，展现了 Flutter 从移动 UI 到制霸多平台的雄心。Flutter for Web 已发布第一个预览版本，可以查看官网信息进行尝鲜，体验惊喜 <a href=\"https://flutter.dev/web\" target=\"_blank\">[惊喜门]</a>。在 Facebook 年度开发者大会上宣布了会稳定支持 RN，但是 RN 还要继续步履蹒跚吗？</p><p><br /></p><h4 id=\"73Czh\"><span>HTML 和 DOM 标准统一</span></h4><p><br /></p><p><span style=\"color: #24292E;\">W3C 宣布与 WHATWG 达成协议，HTML 和 DOM 标准都以 WHATWG 为准，也就是说以后只有一套 HTML 标准了。正所谓分久必合，合久必分，不过对大多数的框架工程师影响不是很大（扎心了） </span><a href=\"https://www.w3.org/blog/news/archives/7753\" target=\"_blank\">[戳👇传送门]</a></p><p><br /></p><h4 id=\"D3i9r\"><span class=\"lake-fontsize-12\" style=\"color: #4A4A4A;\">Now and the Future: An Overview of the Web in 2019</span></h4><p><br /></p><p>W3C Web 技术总负责人 Philippe Le Hégaret 在 QCon 2019 全球软件开发大会做的分享，介绍了Web 技术当前关注的技术方向，未来 W3C 更着力拓展新的领域，其中最重要的一项是汽车互联网，期望打造适用于车联网的 通用的 Web 技术方案。在拓展核心能力方面，有 <span style=\"color: #4A4A4A;\">WebRTC（视频通话）、</span><span style=\"color: #4A4A4A;\">Web Assembly（性能、语言生态）、</span><span style=\"color: #4A4A4A;\">WebPerf（性能管理）、</span><span style=\"color: #4A4A4A;\">Service Workers（离线）、</span><span style=\"color: #4A4A4A;\">Web Components（组件） 等等，前景如此美好，真的希望文中描述的技术能早日落地，给前端开发者们带来福音。</span><a href=\"https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247491186&idx=1&sn=235f648fccaf0e2769fa5044418a8b4d&chksm=f951ab31ce262227a867bdaeaa9d967f2be0272108ef51cfdd9fd7c5118dbcb7201b56ded254&mpshare=1&scene=2&srcid=05090EIW4SEAUAWYJrESqW58&from=timeline&as\" target=\"_blank\">[传送门]</a></p><p><br /></p><h4 id=\"uqz2I\">Ant Design 4.0 进行时！</h4><p><br /></p><p>Ant Design 团队发布 4.0 开发规划，将使用最新的 React API，放弃 IE9/10 浏览器的支持，同时会增加设计资产管理的工具包，预计后续设计师就可以参考到这些资源了</p><p><br /></p><h3 id=\"c7MBu\">工具推荐</h3><p><br /></p><h4 id=\"Iovc5\"><span>微软发布 Windows Terminal</span></h4><p><br /></p><p>微软正在推出一款名为 Windows Terminal 的新命令行终端工具。它被设计为访问 PowerShell、 Cmd 和 Windows Linux 子系统（WSL）等环境。微软正在为想要调整终端工具的开发人员添加多个选项卡、分割窗口、快捷键支持，另外支持主题和自定义等等。微软这款新的 Windows 终端应用程序在 Build 2019 开发者大会上公布了。<a href=\"https://devblogs.microsoft.com/commandline/introducing-windows-terminal/\" target=\"_blank\">[戳👇传送门1]</a> 、<a href=\"https://github.com/microsoft/Terminal\" target=\"_blank\">[戳👇传送门2]</a> </p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F103147%2F1559547541629-6b7ca0d0-0d9b-4792-901a-8497131b0c12.png%22%2C%22originWidth%22%3A728%2C%22originHeight%22%3A470%2C%22name%22%3A%22image.png%22%2C%22size%22%3A598691%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A648%2C%22height%22%3A418%7D\"></card></p><p><br /></p><h4 id=\"IM8tz\">VSCode <span style=\"color: #1A1A1A;\"> 添加 Remote Development 特性</span></h4><p><br /></p><p><span style=\"color: #1A1A1A;\">使用 Remote Development 特性，开发者可以在远程环境下进行开发和调试，同时具备代码高亮和补充功能，跟在本地使用一样</span></p><p><br /></p><h4 id=\"QlXFL\"><span>EdgeDB - The next generation database</span></h4><p><br /></p><p><span style=\"color: #24292E;\">EdgeDB 结合了 NoSQL 数据库的简单性，关系模型强大的查询、严格、一致性和性能。天然支持 GraphQL 哦。数据库选型又多了一份选择。</span><a href=\"https://edgedb.com/\" target=\"_blank\">[戳👇传送门]</a></p><p><br /></p><h4 id=\"gujLJ\"><span>基于 Operational Transformation 的实时数据库 sharedb</span></h4><p><br /></p><p>ShareDB is a realtime database backend based on <a href=\"https://en.wikipedia.org/wiki/Operational_transformation\" target=\"_blank\">Operational Transformation (OT)</a> of JSON documents. It is the realtime backend for the <a href=\"http://derbyjs.com/\" target=\"_blank\">DerbyJS web application framework</a>.</p><p><br /></p><h4 id=\"XJNWk\">create-react-app 发布 3.0</h4><p><br /></p><p><span style=\"color: #1A1A1A;\">支持了 React Hooks 的代码风格校验、TypeScript Lint、Jest 24，Hooks 语法可以很方便的用起来了</span><a href=\"https://github.com/facebook/create-react-app/releases/tag/v3.0.0\" target=\"_blank\">[Release 日志]</a></p><p><br /></p><h3 id=\"4YvDS\">热门文章</h3><p><br /></p><h4 id=\"5G2Vg\"><a href=\"https://mp.weixin.qq.com/s/LJoFj_XbaOqpiiGL1xevVg\" target=\"_blank\">《前端能力中台化之路—Fusion Design 成长史》</a></h4><p><br /></p><p>FDCON 2019 演讲的提炼版本，介绍了前端组件库 Fusion Design 的成长演变之路，还有诸多特性的背后的思考，包括对未来的一些探索</p><p><br /></p><h4 id=\"qqGqY\"><a href=\"https://mp.weixin.qq.com/s/Z2NDVA_UdsRCS8kgy8ejow\" target=\"_blank\">《探索 Serverless 中的前端开发模式》</a></h4><p><br /></p><p>前端工程师永远在打破边界，在 Web 、App、桌面和服务端等方面都已经伸出了触角，Serverless 的出现，又能在前端圈引领什么样的风向和潮流呢</p><p><br /></p><h4 id=\"qn1QC\"><a href=\"https://juejin.im/post/5cea1f705188250640005472\" target=\"_blank\">《大型项目前端架构浅谈（8000字原创）》</a></h4><p><br /></p><p>文中从基础层设计到应用层设计的多种方案、平台等做了简单的介绍，从宏观方面介绍了一个大型前端架构的雏形，可以在自己进行技术设计的做一个参考</p><p><br /></p><h4 id=\"fGzcx\"><a href=\"https://zhuanlan.zhihu.com/p/67087685\" target=\"_blank\">《精读《Function Component 入门》》</a></h4><p><br /></p><p>如果你将要使用或者已经开始使用 React 16了，那么小编我推荐来读一下这篇文件，从传统的 Class Component 思维方式转变一下，开始使用 Function Component ，使用 Hooks 来搭建自己的 React 应用吧。</p><p><br /></p><h3 id=\"gpFd9\">小趣味</h3><p><br /></p><h4 id=\"0fEjB\"><span>IE 所有版本的下载链接</span></h4><p><br /></p><p><span style=\"color: #24292E;\">一个 IE 爱好者收集了 IE1～IE12、EDGE 的所有下载链接，新版的 IE 已经拥抱 C</span>hromium 了，传统的IE即将进入“<span>博物馆</span>”，IE 爱好者过来围观吧。<a href=\"https://www.my-internet-explorer.com/edge/\" target=\"_blank\">[IE 时光机]</a></p><p><br /></p>",
"public": 1,
"status": 0,
"likes_count": 0,
"comments_count": 0,
"content_updated_at": "2019-07-04T01:18:09.000Z",
"deleted_at": null,
"created_at": "2019-05-30T11:37:55.000Z",
"updated_at": "2019-07-04T01:18:09.000Z",
"published_at": "2019-06-03T10:52:55.000Z",
"first_published_at": "2019-05-31T06:36:15.000Z",
"word_count": 1541,
"cover": null,
"description": "【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；五月清风徐来，跟我们一起来看一看新的风向即将吹向何方，前端的技术力量又将影响哪些新的领域。欢迎 订阅 & 投稿编辑：墨止审稿：尹挚学习专栏《深入浅出 React Hooks》React 16.8 了，还不了解 React...",
"custom_description": null,
"_serializer": "v2.doc_detail"
},
{
"id": 1616726,
"slug": "201904",
"title": "您的四月份前端补给包已到，请查收～",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 9,
"likes_count": 0,
"watches_count": 22,
"content_updated_at": "2019-06-03T01:18:59.604Z",
"updated_at": "2019-06-03T01:18:59.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 276025,
"creator": {
"id": 276025,
"type": "User",
"login": "mavericker",
"name": "Mavericker",
"description": "",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/276025/1558939052560-avatar/e6aabc60-ccfb-40ee-be93-34713877d987.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/276025/1558939052560-avatar/e6aabc60-ccfb-40ee-be93-34713877d987.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/276025/1558939052560-avatar/e6aabc60-ccfb-40ee-be93-34713877d987.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/276025/1558939052560-avatar/e6aabc60-ccfb-40ee-be93-34713877d987.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 11,
"public_books_count": 3,
"followers_count": 3,
"following_count": 4,
"created_at": "2019-02-26T14:34:53.000Z",
"updated_at": "2019-05-30T14:17:32.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "\n\n【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，即将流逝的四月里，[Nodejs](https://www.yuque.com/egg/nodejs/nodejs-12) 发布了 v12 版本，[Chrome75](https://addyosmani.com/blog/lazy-loading/) 也将原生支持懒加载……也许是大潮将至，亦或是好事将近，总之，在下还能学！！！\n\n> 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues)\n> 本期小编：[佐七](https://github.com/Mavericker-1996)\n\n\n<a name=\"O1nBo\"></a>\n## 学习专栏\n<a name=\"7dCRg\"></a>\n#### [2019 前端工程师手册（front-end-handbook-2019）](https://frontendmasters.com/books/front-end-handbook/2019/)\n这个受欢迎的前端详细指南于本年度再次回归。更新了大量有用的资源、学习资料和开发工具。内容非常全面，值得一看。\n\n<a name=\"skEnk\"></a>\n#### [Css Layout Cookbook](https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook)\nMDN 官网为前端开发者总结的一些常用布局模块的实现方案。包括面包屑，分页，导航栏等，值得参考。\n\n\n\n<a name=\"BMdAK\"></a>\n#### [11 个教程中不常被提及的 JavaScript 小技巧](https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d)\n本文作者选取了 11 个在我们工作中经常出现却容易被忽略的 JavaScript 小技巧，可以帮助我们更高效的进行编码。\n\n<a name=\"a7FB6\"></a>\n#### [45 个值得收藏的 CSS 形状](https://juejin.im/post/5cbd1f0ae51d456e5e035f45#heading-14)\n本文列举了一些我们日常会用到的一些 CSS 形状，值得参考。此外，在Houdini 已经到来的当下，也许一句 --shape: 'triangle' ，即可使用，无需重复编写这些 CSS 形状。<br />\n\n<a name=\"5ICk1\"></a>\n## 新闻快报\n<a name=\"Mw386\"></a>\n#### [第五届 CSS 大会顺利举行](https://www.yuque.com/cssconf/5th)\n第五届 CSS 大会于 2019 年 3 月 30 日在深圳举办，本次会议共邀请了 7 位演讲嘉宾出席演讲，其中有我们熟悉的大漠，张鑫旭，勾三股四等，为我们分享了一些新时代下的 CSS 技术。\n\n<a name=\"s25y3\"></a>\n#### [Chrome75 将原生支持懒加载](https://addyosmani.com/blog/lazy-loading/)\n过去我们一直通过 js 来实现图片的延迟加载，而 Chrome75 的到来将原生支持该功能。我们可以通过设置 loading 属性来控制浏览器是否延迟加载屏幕外的图像和 iframe。示例代码如下：\n\n```javascript\n<img src=\"celebration.jpg\" loading=\"lazy\" alt=\"...\" />\n<iframe src=\"video-player.html\" loading=\"lazy\"></iframe>\n```\n\n让我们看一下效果：\n\n\n\n\n<a name=\"QsaVN\"></a>\n#### [微软发布基于 Chromium 的预览版 Edge](https://mp.weixin.qq.com/s/jrwb7rYy_p9g_L_P8oLASQ)\n2018 年 12 月，微软宣布 Edge 将采用 Chromium，这是由谷歌 Chrome 支持的开源项目，其中包含了不少值得我们期待的新特性像自定义元素和 shaodw dom，javascript 字体加载API等。目前预览版现在已经可以在 Windows 上使用，很快就可以在 Mac 上使用。\n\n<a name=\"xvIAC\"></a>\n#### [jQuery 3.4.0 版本发布](http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/)\n4月10 日，jQuery 官博发文宣告 jQuery 3.4.0 正式发布。距离 2018 年 1 月发布 v 3.3.0 版已有一年多了。jQuery 官方表示，这是 3.x 系列的最后一个版本，他们将全力准备 jQuery 4.0。本次更新重点放在一些bug的修理和性能的提升。\n\n<a name=\"h75RV\"></a>\n#### [Nodejs 12发布](https://www.yuque.com/egg/nodejs/nodejs-12)\n时隔一年，Node.js 12 如约而至，正式发布第一个 [Current](https://github.com/nodejs/Release) 版本。（按照当前的节奏一年两更，2063 年我们就能迎来 Node v100 了……）\n\n该版本带来了诸如：\n\n- V8 版本更新带来好多不错的特性；\n- HTTP 解析速度提升；\n- 启动速度大幅提升；\n- 更好的诊断报告和堆分析工具；\n- ESM 模块更新；\n\n同时 [Node v6](https://nodejs.org/en/about/releases/) 也即将停止维护。\n\n<a name=\"xmAEM\"></a>\n#### [第三届 VueConf 将在上海举办](https://vue.w3ctech.com/)\n一年一度的 VueConf 又来啦！VueConf 2018 是在杭州举办的，Vue.js 作者尤雨溪采用了远程参与的方式，给大家带来了精彩了演讲。这一次，VueConf 2019 上海来啦，会议将在 6 月 8 号上海徐家汇华山路举办，尤大将亲临现场，给大家带来主题演讲，赶快点击链接抢票吧！\n\n<a name=\"Qvx0y\"></a>\n## 工具推荐\n<a name=\"8zFYD\"></a>\n#### [Shepherd: Guide Your Users Through a Tour of Your App ](https://shipshapecode.github.io/shepherd/docs/welcome/)\nShepherd是一款便于我们为一款产品做新手指引的工具库，通过一些简单的api就可以实现该功能，目前对于Vue，React，Angular，Ember框架都有支持。\n\n\n\n<a name=\"PyMBv\"></a>\n#### [CloudConvert: 文件格式在线转换平台](https://cloudconvert.com/)\nCloudConvert 是一款强大全能格式在线转换云在线应用，支持跨平台。 ... 支持输入文件 URL、Dropbox、Google Drive 文件源或者直接从电脑上传文件进行转换，你只需要一个浏览器就可以使用它，非常方便。\n\n\n\n<a name=\"ThuWg\"></a>\n#### [Ink: 使用 React 编写命令行界面](https://github.com/vadimdemedes/ink)\nInk 是一款使用 React 风格开发命令行界面应用 (CLI App) 的 Nodejs 工具，也就是说，我们可以使用像 React 那样的方式来组织代码，开发出运行在命令行的工具应用。Ink 2.0 可以无缝支持 React 的某些特性，比如 Hooks 或Context，还可以与 React 生态系统中的其他重要组件（比如 Redux ）发生交互。<br />官方文档提供了如下的示例：\n\n```jsx\nimport React, {Component} from 'react';\nimport {render, Color} from 'ink';\n \nclass Counter extends Component {\n constructor() {\n super();\n this.state = {\n i: 0\n };\n }\n \n render() {\n return (\n <Color green>\n {this.state.i} tests passed\n </Color>\n );\n }\n \n componentDidMount() {\n this.timer = setInterval(() => {\n this.setState({\n i: this.state.i + 1\n });\n }, 100);\n }\n \n componentWillUnmount() {\n clearInterval(this.timer);\n }\n}\n \nrender(<Counter/>);\n\n```\n\n终端上的输出：\n\n\n\n<a name=\"1ffjE\"></a>\n## 热门文章\n<a name=\"bGqFK\"></a>\n#### [我在阿里云做前端](https://zhuanlan.zhihu.com/p/61127760)\n“抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。” 让我们看看阿里巴巴高级前端技术专家城池大大讲述他过去几年在阿里云的前端经验。\n\n<a name=\"ndfIo\"></a>\n#### [Winter 眼中的前端十年：觉醒、全栈、包袱，未来无不可为](https://www.infoq.cn/article/ENA6ooPYgt6*bZieWfCK)\n为什么他能在前端圈如鱼得水？为什么他总能拿到大公司的高薪 Offer？在他眼中：前端 Leader 都该焦虑什么？为什么过去十年是前端觉醒的十年？在杭州家里，本篇文章采访了本期嘉宾 Winter，听他讲述前端行业十年的得与失。\n\n<a name=\"0Zqsn\"></a>\n#### [使用 Typescript 两年之后，它值得推荐吗](https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247491022&idx=1&sn=0f080050f4bb7c3365d5cfbc1b70bea1&chksm=f951a88dce26219bef53994b7608b21b298324f387863401dc2d7e09d13f56782659a1cfc552&xtrack=1&scene=0&subscene=10000&clicktime=1556444647&ascene=7&devicetype=android-28&version=27000439&nettype=WIFI&abtest_cookie=BAABAAoACwASABMABQAjlx4AVpkeAMGZHgDZmR4A3JkeAAAA&lang=zh_CN&pass_ticket=6FpnjH0Xly5DJAnrxT8RH3mjz5WprMiG89TiVaWcA6eIM1QWBOVLN8KBvrCx5v52&wx_header=1) \nTypescript 近两年热度不减，很多大公司都选择去拥抱 TS，但它真的值得被推荐吗？本篇文章站在比较客观的角度从多方面讲述 TS 的优点和缺点。\n\n\n",
"body_draft": "",
"body_html": "<p><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/276025/1556515821434-91b89639-b1b1-446e-a3a2-e625b8a04880.png#align=left&display=inline&height=360&name=image.png&originHeight=360&originWidth=720&size=553714&status=done&width=720\" style=\"max-width: 600px; width: 720px;\" /></p><p><br /></p><p>【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，即将流逝的四月里，<a href=\"https://www.yuque.com/egg/nodejs/nodejs-12\" target=\"_blank\">Nodejs</a> 发布了 v12 版本，<a href=\"https://addyosmani.com/blog/lazy-loading/\" target=\"_blank\">Chrome75</a> 也将原生支持懒加载……也许是大潮将至，亦或是好事将近，总之，在下还能学！！！</p><p><br /></p><blockquote style=\"padding-left: 1em;\"><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p><p>本期小编：<a href=\"https://github.com/Mavericker-1996\" target=\"_blank\">佐七</a></p></blockquote><p><br /></p><h2 id=\"O1nBo\">学习专栏</h2><h4 id=\"7dCRg\"><a href=\"https://frontendmasters.com/books/front-end-handbook/2019/\" target=\"_blank\"><span>2019 前端工程师手册（front-end-handbook-2019）</span></a></h4><p>这个受欢迎的前端详细指南于本年度再次回归。更新了大量有用的资源、学习资料和开发工具。内容非常全面，值得一看。</p><p><br /></p><h4 id=\"skEnk\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook\" target=\"_blank\">Css Layout Cookbook</a></h4><p>MDN 官网为前端开发者总结的一些常用布局模块的实现方案。包括面包屑，分页，导航栏等，值得参考。</p><p><br /></p><p><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/276025/1556455431352-828407a9-780d-4743-aa43-68042bfcdbb0.png#align=left&display=inline&height=600&name=image.png&originHeight=600&originWidth=696&size=125343&status=done&width=696\" style=\"max-width: 600px; width: 696px;\" /></p><p><br /></p><h4 id=\"BMdAK\"><a href=\"https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d\" target=\"_blank\">11 个教程中不常被提及的 JavaScript 小技巧</a></h4><p><span class=\"lake-fontsize-11\" style=\"color: #333333;\">本文作者选取了 11 个在我们工作中经常出现却容易被忽略的 JavaScript 小技巧，可以帮助我们更高效的进行编码。</span></p><p><span class=\"lake-fontsize-11\" style=\"color: #333333;\"><br /></span></p><h4 id=\"a7FB6\"><a href=\"https://juejin.im/post/5cbd1f0ae51d456e5e035f45#heading-14\" target=\"_blank\">45 个值得收藏的 CSS 形状</a></h4><p>本文列举了一些我们日常会用到的一些 CSS 形状，值得参考。此外，在Houdini 已经到来的当下，也许一句 --shape: 'triangle' ，即可使用，无需重复编写这些 CSS 形状。<span class=\"lake-fontsize-11\" style=\"color: #333333;\"><br /></span></p><p><br /></p><h2 id=\"5ICk1\">新闻快报</h2><h4 id=\"Mw386\"><a href=\"https://www.yuque.com/cssconf/5th\" target=\"_blank\">第五届 CSS 大会顺利举行</a></h4><p><span>第五届 CSS 大会于 2019 年 3 月 30 日在深圳举办，本次会议共邀请了 7 位演讲嘉宾出席演讲，其中有我们熟悉的大漠，张鑫旭，勾三股四等，为我们分享了一些新时代下的 CSS 技术。</span></p><p><br /></p><h4 id=\"s25y3\"><a href=\"https://addyosmani.com/blog/lazy-loading/\" target=\"_blank\">Chrome75 将原生支持懒加载</a></h4><p>过去我们一直通过 js 来实现图片的延迟加载，而 Chrome75 的到来将原生支持该功能。我们可以通过设置 loading 属性来控制浏览器是否延迟加载屏幕外的图像和 iframe。示例代码如下：</p><p><br /></p><pre data-lang=\"javascript\"><code><img src="celebration.jpg" loading="lazy" alt="..." />\n<iframe src="video-player.html" loading="lazy"></iframe></code></pre><p><br /></p><p>让我们看一下效果：</p><p><br /></p><p><img alt=\"lazyload.gif\" title=\"lazyload.gif\" src=\"https://cdn.nlark.com/yuque/0/2019/gif/276025/1556457435267-b0ee9630-61f0-46f8-9a0b-14b4cae6592f.gif#align=left&display=inline&height=772&name=lazyload.gif&originHeight=772&originWidth=1342&size=3336715&status=done&width=1342\" style=\"max-width: 600px; width: 1342px;\" /></p><p><br /></p><p><br /></p><h4 id=\"QsaVN\"><a href=\"https://mp.weixin.qq.com/s/jrwb7rYy_p9g_L_P8oLASQ\" target=\"_blank\">微软发布基于 Chromium 的预览版 Edge</a></h4><p>2018 年 12 月，微软宣布 Edge 将采用 Chromium，这是由谷歌 Chrome 支持的开源项目，其中包含了不少值得我们期待的新特性像自定义元素和 shaodw dom，javascript 字体加载API等。目前预览版现在已经可以在 Windows 上使用，很快就可以在 Mac 上使用。</p><p><br /></p><h4 id=\"xvIAC\"><a href=\"http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/\" target=\"_blank\">jQuery 3.4.0 版本发布</a></h4><p>4月10 日，jQuery 官博发文宣告 jQuery 3.4.0 正式发布。距离 2018 年 1 月发布 v 3.3.0 版已有一年多了。jQuery 官方表示，这是 3.x 系列的最后一个版本，他们将全力准备 jQuery 4.0。本次更新重点放在一些bug的修理和性能的提升。</p><p><br /></p><h4 id=\"h75RV\"><a href=\"https://www.yuque.com/egg/nodejs/nodejs-12\" target=\"_blank\"><span>Nodejs 12发布</span></a></h4><p><span>时隔一年，Node.js 12 如约而至，正式发布第一个 </span><a href=\"https://github.com/nodejs/Release\" target=\"_blank\">Current</a><span> 版本。（</span><span>按照当前的节奏一年两更，</span><span style=\"color: #222222;\">2063</span><span> 年我们就能迎来 Node v100 了……</span><span>）</span></p><p><br /></p><p>该版本带来了诸如：</p><p><br /></p><ul><li>V8 版本更新带来好多不错的特性；</li><li>HTTP 解析速度提升；</li><li>启动速度大幅提升；</li><li>更好的诊断报告和堆分析工具；</li><li>ESM 模块更新；</li></ul><p><br /></p><p>同时 <a href=\"https://nodejs.org/en/about/releases/\" target=\"_blank\">Node v6</a> 也即将停止维护。</p><p><br /></p><h4 id=\"xmAEM\"><a href=\"https://vue.w3ctech.com/\" target=\"_blank\">第三届 VueConf 将在上海举办</a></h4><p><span style=\"color: #333333;\">一年一度的 VueConf 又来啦！</span><span style=\"color: #333333;\">VueConf 2018 是在杭州举办的，Vue.js 作者尤雨溪采用了远程参与的方式，给大家带来了精彩了演讲。</span><span style=\"color: #333333;\">这一次，VueConf 2019 上海来啦，会议将在 6 月 8 号上海徐家汇华山路举办，尤大将亲临现场，给大家带来主题演讲，赶快点击链接抢票吧！</span></p><p><br /></p><h2 id=\"Qvx0y\">工具推荐</h2><h4 id=\"8zFYD\"><a href=\"https://shipshapecode.github.io/shepherd/docs/welcome/\" target=\"_blank\">Shepherd: Guide Your Users Through a Tour of Your App </a></h4><p>Shepherd是一款便于我们为一款产品做新手指引的工具库，通过一些简单的api就可以实现该功能，目前对于Vue，React，Angular，Ember框架都有支持。</p><p><br /></p><p><img alt=\"shepherd.gif\" title=\"shepherd.gif\" src=\"https://cdn.nlark.com/yuque/0/2019/gif/276025/1556459532372-fce6df6c-b6b6-4813-9c48-6241afa2a824.gif#align=left&display=inline&height=772&name=shepherd.gif&originHeight=772&originWidth=1342&size=1438302&status=done&width=1342\" style=\"max-width: 600px; width: 1342px;\" /></p><p><br /></p><h4 id=\"PyMBv\"><a href=\"https://cloudconvert.com/\" target=\"_blank\">CloudConvert: 文件格式在线转换平台</a></h4><p>CloudConvert 是一款强大全能格式在线转换云在线应用，支持跨平台。 ... 支持输入文件 URL、Dropbox、Google Drive 文件源或者直接从电脑上传文件进行转换，你只需要一个浏览器就可以使用它，非常方便。</p><p><br /></p><p><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/276025/1556507397357-85217ee1-c574-461f-b3df-71e088cf92fa.png#align=left&display=inline&height=1646&name=image.png&originHeight=1646&originWidth=2878&size=765280&status=done&width=2878\" style=\"max-width: 600px; width: 2878px;\" /></p><p><br /></p><h4 id=\"ThuWg\"><a href=\"https://github.com/vadimdemedes/ink\" target=\"_blank\">Ink: 使用 React 编写命令行界面</a></h4><p>Ink 是一款使用 React 风格开发命令行界面应用 (CLI App) 的 Nodejs 工具，也就是说，我们可以使用像 React 那样的方式来组织代码，开发出运行在命令行的工具应用。Ink 2.0 可以无缝支持 React 的某些特性，比如 Hooks 或Context，还可以与 React 生态系统中的其他重要组件（比如 Redux ）发生交互。</p><p>官方文档提供了如下的示例：</p><p><br /></p><pre data-lang=\"jsx\"><code>import React, {Component} from 'react';\nimport {render, Color} from 'ink';\n \nclass Counter extends Component {\n constructor() {\n super();\n this.state = {\n i: 0\n };\n }\n \n render() {\n return (\n <Color green>\n {this.state.i} tests passed\n </Color>\n );\n }\n \n componentDidMount() {\n this.timer = setInterval(() => {\n this.setState({\n i: this.state.i + 1\n });\n }, 100);\n }\n \n componentWillUnmount() {\n clearInterval(this.timer);\n }\n}\n \nrender(<Counter/>);\n</code></pre><p><br /></p><p>终端上的输出：</p><p><br /></p><p><img src=\"https://cdn.nlark.com/yuque/0/2019/svg/276025/1556507982379-0795e747-d6a0-4631-bda8-435fd2ab8e28.svg#align=left&display=inline&height=250&originHeight=234&originWidth=540&status=done&width=578\" style=\"max-width: 600px; width: 578px;\" /></p><p><br /></p><h2 id=\"1ffjE\">热门文章</h2><h4 id=\"bGqFK\"><a href=\"https://zhuanlan.zhihu.com/p/61127760\" target=\"_blank\"><span>我在阿里云做前端</span></a></h4><p>“抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。” 让我们看看阿里巴巴高级前端技术专家城池大大讲述他过去几年在阿里云的前端经验。</p><p><br /></p><h4 id=\"ndfIo\"><a href=\"https://www.infoq.cn/article/ENA6ooPYgt6*bZieWfCK\" target=\"_blank\">Winter 眼中的前端十年：觉醒、全栈、包袱，未来无不可为</a></h4><p>为什么他能在前端圈如鱼得水？为什么他总能拿到大公司的高薪 Offer？在他眼中：前端 Leader 都该焦虑什么？为什么过去十年是前端觉醒的十年？在杭州家里，本篇文章采访了本期嘉宾 Winter，听他讲述前端行业十年的得与失。</p><p><br /></p><h4 id=\"0Zqsn\"><span><a href=\"https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247491022&idx=1&sn=0f080050f4bb7c3365d5cfbc1b70bea1&chksm=f951a88dce26219bef53994b7608b21b298324f387863401dc2d7e09d13f56782659a1cfc552&xtrack=1&scene=0&subscene=10000&clicktime=1556444647&ascene=7&devicetype=android-28&version=27000439&nettype=WIFI&abtest_cookie=BAABAAoACwASABMABQAjlx4AVpkeAMGZHgDZmR4A3JkeAAAA&lang=zh_CN&pass_ticket=6FpnjH0Xly5DJAnrxT8RH3mjz5WprMiG89TiVaWcA6eIM1QWBOVLN8KBvrCx5v52&wx_header=1\" target=\"_blank\">使用 Typescript 两年之后，它值得推荐吗</a></span> </h4><p><span>Typescript 近两年热度不减，很多大公司都选择去拥抱 TS，但它真的值得被推荐吗？本篇文章站在比较客观的角度从多方面讲述 TS 的优点和缺点。</span></p><p><br /></p><p style=\"text-align: center;\"><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/137059/1554173440911-9bd825a2-0664-4e96-b300-12a855a34e4a.png#align=left&display=inline&height=378&name=image.png&originHeight=1044&originWidth=1080&size=1149092&status=done&width=391\" style=\"max-width: 600px; width: 391px;\" /></p>",
"body_lake": "<!doctype lake><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F276025%2F1556515821434-91b89639-b1b1-446e-a3a2-e625b8a04880.png%22%2C%22originWidth%22%3A720%2C%22originHeight%22%3A360%2C%22name%22%3A%22image.png%22%2C%22size%22%3A553714%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A720%2C%22height%22%3A360%7D\"></card></p><p><br /></p><p>【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，即将流逝的四月里，<a href=\"https://www.yuque.com/egg/nodejs/nodejs-12\" target=\"_blank\">Nodejs</a> 发布了 v12 版本，<a href=\"https://addyosmani.com/blog/lazy-loading/\" target=\"_blank\">Chrome75</a> 也将原生支持懒加载……也许是大潮将至，亦或是好事将近，总之，在下还能学！！！</p><p><br /></p><blockquote style=\"padding-left: 1em;\"><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p><p>本期小编：<a href=\"https://github.com/Mavericker-1996\" target=\"_blank\">佐七</a></p></blockquote><p><br /></p><h2 id=\"O1nBo\">学习专栏</h2><h4 id=\"7dCRg\"><a href=\"https://frontendmasters.com/books/front-end-handbook/2019/\" target=\"_blank\"><span>2019 前端工程师手册（front-end-handbook-2019）</span></a></h4><p>这个受欢迎的前端详细指南于本年度再次回归。更新了大量有用的资源、学习资料和开发工具。内容非常全面，值得一看。</p><p><br /></p><h4 id=\"skEnk\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook\" target=\"_blank\">Css Layout Cookbook</a></h4><p>MDN 官网为前端开发者总结的一些常用布局模块的实现方案。包括面包屑，分页，导航栏等，值得参考。</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F276025%2F1556455431352-828407a9-780d-4743-aa43-68042bfcdbb0.png%22%2C%22originWidth%22%3A696%2C%22originHeight%22%3A600%2C%22name%22%3A%22image.png%22%2C%22size%22%3A125343%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A696%2C%22height%22%3A600%7D\"></card></p><p><br /></p><h4 id=\"BMdAK\"><a href=\"https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d\" target=\"_blank\">11 个教程中不常被提及的 JavaScript 小技巧</a></h4><p><span class=\"lake-fontsize-11\" style=\"color: #333333;\">本文作者选取了 11 个在我们工作中经常出现却容易被忽略的 JavaScript 小技巧，可以帮助我们更高效的进行编码。</span></p><p><span class=\"lake-fontsize-11\" style=\"color: #333333;\"><br /></span></p><h4 id=\"a7FB6\"><a href=\"https://juejin.im/post/5cbd1f0ae51d456e5e035f45#heading-14\" target=\"_blank\">45 个值得收藏的 CSS 形状</a></h4><p>本文列举了一些我们日常会用到的一些 CSS 形状，值得参考。此外，在Houdini 已经到来的当下，也许一句 --shape: 'triangle' ，即可使用，无需重复编写这些 CSS 形状。<span class=\"lake-fontsize-11\" style=\"color: #333333;\"><br /></span></p><p><br /></p><h2 id=\"5ICk1\">新闻快报</h2><h4 id=\"Mw386\"><a href=\"https://www.yuque.com/cssconf/5th\" target=\"_blank\">第五届 CSS 大会顺利举行</a></h4><p><span>第五届 CSS 大会于 2019 年 3 月 30 日在深圳举办，本次会议共邀请了 7 位演讲嘉宾出席演讲，其中有我们熟悉的大漠，张鑫旭，勾三股四等，为我们分享了一些新时代下的 CSS 技术。</span></p><p><br /></p><h4 id=\"s25y3\"><a href=\"https://addyosmani.com/blog/lazy-loading/\" target=\"_blank\">Chrome75 将原生支持懒加载</a></h4><p>过去我们一直通过 js 来实现图片的延迟加载，而 Chrome75 的到来将原生支持该功能。我们可以通过设置 loading 属性来控制浏览器是否延迟加载屏幕外的图像和 iframe。示例代码如下：</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22%3Cimg%20src%3D%5C%22celebration.jpg%5C%22%20loading%3D%5C%22lazy%5C%22%20alt%3D%5C%22...%5C%22%20%2F%3E%5Cn%3Ciframe%20src%3D%5C%22video-player.html%5C%22%20loading%3D%5C%22lazy%5C%22%3E%3C%2Fiframe%3E%22%2C%22id%22%3A%22sndUa%22%7D\"></card><p><br /></p><p>让我们看一下效果：</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F276025%2F1556457435267-b0ee9630-61f0-46f8-9a0b-14b4cae6592f.gif%22%2C%22originWidth%22%3A1342%2C%22originHeight%22%3A772%2C%22name%22%3A%22lazyload.gif%22%2C%22size%22%3A3336715%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A1342%2C%22height%22%3A772%7D\"></card></p><p><br /></p><p><br /></p><h4 id=\"QsaVN\"><a href=\"https://mp.weixin.qq.com/s/jrwb7rYy_p9g_L_P8oLASQ\" target=\"_blank\">微软发布基于 Chromium 的预览版 Edge</a></h4><p>2018 年 12 月，微软宣布 Edge 将采用 Chromium，这是由谷歌 Chrome 支持的开源项目，其中包含了不少值得我们期待的新特性像自定义元素和 shaodw dom，javascript 字体加载API等。目前预览版现在已经可以在 Windows 上使用，很快就可以在 Mac 上使用。</p><p><br /></p><h4 id=\"xvIAC\"><a href=\"http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/\" target=\"_blank\">jQuery 3.4.0 版本发布</a></h4><p>4月10 日，jQuery 官博发文宣告 jQuery 3.4.0 正式发布。距离 2018 年 1 月发布 v 3.3.0 版已有一年多了。jQuery 官方表示，这是 3.x 系列的最后一个版本，他们将全力准备 jQuery 4.0。本次更新重点放在一些bug的修理和性能的提升。</p><p><br /></p><h4 id=\"h75RV\"><a href=\"https://www.yuque.com/egg/nodejs/nodejs-12\" target=\"_blank\"><span>Nodejs 12发布</span></a></h4><p><span>时隔一年，Node.js 12 如约而至，正式发布第一个 </span><a href=\"https://github.com/nodejs/Release\" target=\"_blank\">Current</a><span> 版本。（</span><span>按照当前的节奏一年两更，</span><span style=\"color: #222222;\">2063</span><span> 年我们就能迎来 Node v100 了……</span><span>）</span></p><p><br /></p><p>该版本带来了诸如：</p><p><br /></p><ul><li>V8 版本更新带来好多不错的特性；</li><li>HTTP 解析速度提升；</li><li>启动速度大幅提升；</li><li>更好的诊断报告和堆分析工具；</li><li>ESM 模块更新；</li></ul><p><br /></p><p>同时 <a href=\"https://nodejs.org/en/about/releases/\" target=\"_blank\">Node v6</a> 也即将停止维护。</p><p><br /></p><h4 id=\"xmAEM\"><a href=\"https://vue.w3ctech.com/\" target=\"_blank\">第三届 VueConf 将在上海举办</a></h4><p><span style=\"color: #333333;\">一年一度的 VueConf 又来啦！</span><span style=\"color: #333333;\">VueConf 2018 是在杭州举办的，Vue.js 作者尤雨溪采用了远程参与的方式，给大家带来了精彩了演讲。</span><span style=\"color: #333333;\">这一次，VueConf 2019 上海来啦，会议将在 6 月 8 号上海徐家汇华山路举办，尤大将亲临现场，给大家带来主题演讲，赶快点击链接抢票吧！</span></p><p><br /></p><h2 id=\"Qvx0y\">工具推荐</h2><h4 id=\"8zFYD\"><a href=\"https://shipshapecode.github.io/shepherd/docs/welcome/\" target=\"_blank\">Shepherd: Guide Your Users Through a Tour of Your App </a></h4><p>Shepherd是一款便于我们为一款产品做新手指引的工具库，通过一些简单的api就可以实现该功能，目前对于Vue，React，Angular，Ember框架都有支持。</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F276025%2F1556459532372-fce6df6c-b6b6-4813-9c48-6241afa2a824.gif%22%2C%22originWidth%22%3A1342%2C%22originHeight%22%3A772%2C%22name%22%3A%22shepherd.gif%22%2C%22size%22%3A1438302%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A1342%2C%22height%22%3A772%7D\"></card></p><p><br /></p><h4 id=\"PyMBv\"><a href=\"https://cloudconvert.com/\" target=\"_blank\">CloudConvert: 文件格式在线转换平台</a></h4><p>CloudConvert 是一款强大全能格式在线转换云在线应用，支持跨平台。 ... 支持输入文件 URL、Dropbox、Google Drive 文件源或者直接从电脑上传文件进行转换，你只需要一个浏览器就可以使用它，非常方便。</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F276025%2F1556507397357-85217ee1-c574-461f-b3df-71e088cf92fa.png%22%2C%22originWidth%22%3A2878%2C%22originHeight%22%3A1646%2C%22name%22%3A%22image.png%22%2C%22size%22%3A765280%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A2878%2C%22height%22%3A1646%7D\"></card></p><p><br /></p><h4 id=\"ThuWg\"><a href=\"https://github.com/vadimdemedes/ink\" target=\"_blank\">Ink: 使用 React 编写命令行界面</a></h4><p>Ink 是一款使用 React 风格开发命令行界面应用 (CLI App) 的 Nodejs 工具，也就是说，我们可以使用像 React 那样的方式来组织代码，开发出运行在命令行的工具应用。Ink 2.0 可以无缝支持 React 的某些特性，比如 Hooks 或Context，还可以与 React 生态系统中的其他重要组件（比如 Redux ）发生交互。</p><p>官方文档提供了如下的示例：</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"data:%7B%22mode%22%3A%22jsx%22%2C%22code%22%3A%22import%20React%2C%20%7BComponent%7D%20from%20'react'%3B%5Cnimport%20%7Brender%2C%20Color%7D%20from%20'ink'%3B%5Cn%20%5Cnclass%20Counter%20extends%20Component%20%7B%5Cn%20%20constructor()%20%7B%5Cn%20%20%20%20super()%3B%5Cn%20%20%20%20this.state%20%3D%20%7B%5Cn%20%20%20%20%20%20i%3A%200%5Cn%20%20%20%20%7D%3B%5Cn%20%20%7D%5Cn%20%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CColor%20green%3E%5Cn%20%20%20%20%20%20%20%20%7Bthis.state.i%7D%20tests%20passed%5Cn%20%20%20%20%20%20%3C%2FColor%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%5Cn%20%5Cn%20%20componentDidMount()%20%7B%5Cn%20%20%20%20this.timer%20%3D%20setInterval(()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20this.setState(%7B%5Cn%20%20%20%20%20%20i%3A%20this.state.i%20%2B%201%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D%2C%20100)%3B%5Cn%20%20%7D%5Cn%20%5Cn%20%20componentWillUnmount()%20%7B%5Cn%20%20%20%20clearInterval(this.timer)%3B%5Cn%20%20%7D%5Cn%7D%5Cn%20%5Cnrender(%3CCounter%2F%3E)%3B%5Cn%22%2C%22id%22%3A%228Kmhm%22%7D\"></card><p><br /></p><p>终端上的输出：</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fsvg%2F276025%2F1556507982379-0795e747-d6a0-4631-bda8-435fd2ab8e28.svg%22%2C%22originWidth%22%3A540%2C%22originHeight%22%3A234%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A578%2C%22height%22%3A250%7D\"></card></p><p><br /></p><h2 id=\"1ffjE\">热门文章</h2><h4 id=\"bGqFK\"><a href=\"https://zhuanlan.zhihu.com/p/61127760\" target=\"_blank\"><span>我在阿里云做前端</span></a></h4><p>“抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。” 让我们看看阿里巴巴高级前端技术专家城池大大讲述他过去几年在阿里云的前端经验。</p><p><br /></p><h4 id=\"ndfIo\"><a href=\"https://www.infoq.cn/article/ENA6ooPYgt6*bZieWfCK\" target=\"_blank\">Winter 眼中的前端十年：觉醒、全栈、包袱，未来无不可为</a></h4><p>为什么他能在前端圈如鱼得水？为什么他总能拿到大公司的高薪 Offer？在他眼中：前端 Leader 都该焦虑什么？为什么过去十年是前端觉醒的十年？在杭州家里，本篇文章采访了本期嘉宾 Winter，听他讲述前端行业十年的得与失。</p><p><br /></p><h4 id=\"0Zqsn\"><span><a href=\"https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247491022&idx=1&sn=0f080050f4bb7c3365d5cfbc1b70bea1&chksm=f951a88dce26219bef53994b7608b21b298324f387863401dc2d7e09d13f56782659a1cfc552&xtrack=1&scene=0&subscene=10000&clicktime=1556444647&ascene=7&devicetype=android-28&version=27000439&nettype=WIFI&abtest_cookie=BAABAAoACwASABMABQAjlx4AVpkeAMGZHgDZmR4A3JkeAAAA&lang=zh_CN&pass_ticket=6FpnjH0Xly5DJAnrxT8RH3mjz5WprMiG89TiVaWcA6eIM1QWBOVLN8KBvrCx5v52&wx_header=1\" target=\"_blank\">使用 Typescript 两年之后，它值得推荐吗</a></span> </h4><p><span>Typescript 近两年热度不减，很多大公司都选择去拥抱 TS，但它真的值得被推荐吗？本篇文章站在比较客观的角度从多方面讲述 TS 的优点和缺点。</span></p><p><br /></p><p style=\"text-align: center;\"><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F137059%2F1554173440911-9bd825a2-0664-4e96-b300-12a855a34e4a.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A1044%2C%22name%22%3A%22image.png%22%2C%22size%22%3A1149092%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A391%2C%22height%22%3A378%7D\"></card><cursor /></p>",
"public": 1,
"status": 1,
"likes_count": 2,
"comments_count": 0,
"content_updated_at": "2019-05-31T08:36:49.000Z",
"deleted_at": null,
"created_at": "2019-04-29T05:52:29.000Z",
"updated_at": "2019-05-31T08:36:50.000Z",
"published_at": "2019-05-31T08:36:49.000Z",
"first_published_at": "2019-04-29T05:53:05.000Z",
"word_count": 1542,
"cover": null,
"description": "【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，即将流逝的四月里，Nodejs 发布了 v12 版本，Chrome75 也将原生支持懒加载……也许是大潮将至，亦或是好事将近，总之，在下还能学！！！欢迎 订阅 & 投稿本期小编：佐七学习专...",
"custom_description": null,
"_serializer": "v2.doc_detail"
},
{
"id": 1461381,
"slug": "201903",
"title": "201903",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 9,
"likes_count": 0,
"watches_count": 22,
"content_updated_at": "2019-06-03T01:18:59.604Z",
"updated_at": "2019-06-03T01:18:59.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 137059,
"creator": {
"id": 137059,
"type": "User",
"login": "yufan-8jzfy",
"name": "木子玙",
"description": "做小卡片的girl",
"avatar_url": "https://gw.alipayobjects.com/zos/rmsportal/wYnHWSXDmBhiEmuwXsym.png",
"large_avatar_url": "https://gw.alipayobjects.com/zos/rmsportal/wYnHWSXDmBhiEmuwXsym.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://gw.alipayobjects.com/zos/rmsportal/wYnHWSXDmBhiEmuwXsym.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://gw.alipayobjects.com/zos/rmsportal/wYnHWSXDmBhiEmuwXsym.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 2,
"public_books_count": 0,
"followers_count": 5,
"following_count": 2,
"created_at": "2018-06-14T02:33:58.000Z",
"updated_at": "2019-05-30T01:12:20.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "\n\n\n\n【Alibaba-TXD 前端小报】- 热门前端技术快报，聚焦业界新视界；不知不觉 2019 年已经过去了 1/4，日新月异的前端技术正在蓬勃发展，[ES10](https://segmentfault.com/a/1190000018311280) 都已到来。\n\n> 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues)\n> 本期小编：[玙璠](https://github.com/happyliuliu)\n\n\n<a name=\"333b467a\"></a>\n### 学习专栏\n\n<a name=\"bfdc0174\"></a>\n#### 2019 年前端技术会议\n裕波列出了一份前端技术会议的[清单](https://www.yuque.com/itchina110/giku37/xdzuak)，涵盖国内和海外的重大前端相关的技术会议\n\n<a name=\"343e4191\"></a>\n#### 微软前端训练营\n微软推出另一个前端的学习路径规划，官方提供的[代码仓库](https://github.com/Microsoft/frontend-bootcamp)将一步一步带你走进前端技术领域，囊括基础的 HTML/CSS/JS 学习、TypeScript 强类型、React/Redux 学习和实践等。\n\n<a name=\"81377773\"></a>\n### 新闻快报\n\n<a name=\"9dbc3483\"></a>\n#### 阿里开源 Flutter 应用框架 Fish Redux\n[Fish Redux](https://github.com/alibaba/fish-redux) 框架是基于 Redux 数据管理的组装式 Flutter 应用框架，适合用于构建中大型的复杂应用，解决了集中状态管理和UI组件化等问题，将集中，分治，复用，隔离做的更进一步。\n\n<a name=\"25275f3e\"></a>\n#### Handtrack.js 搞定手部动作跟踪\n这是一个经过训练的产生的开源模型，而不需要用户自己训练。它隐藏了模型的加载步骤，允许用户在没有任何 ML 经验的情况下检测图像中的手，可以直接在 Web 应用使用该库，[传送门](https://github.com/eduardolundgren/tracking.js)。<br />\n\n<a name=\"9c7217f5\"></a>\n#### 小程序多端框架\n如今小程序的发展如日中天，很多公司的业务也都慢慢转向小程序，同时很多应用需要同时兼顾多个小程序平台，所以就有了上层开发框架或者脚手架来优化 DSL 来提高开发效率。其中凹凸实验室从开发体验、兼容性、接入成本、工具链等多个方面对小程序的的多端框架进行了全面的[测评](https://juejin.im/post/5c90eb366fb9a070d4199cc9)，如果准备入坑，可以事先了解一下。\n\n<a name=\"634da4be\"></a>\n#### TWA 让你的 PWA 进入应用商店\nTWA（Trusted Web Activity）的发布，是将 Native 的技术扩展到 Web App，将 PWA 站点打包为 Native App 放入应用商店，用户可以在应用商店中搜索安装 PWA 应用，相比国外，PWA 在国内并非很流行，但这并不代表这个技术就不关键。未来可以考虑如何将该技术融入实践中来，[传送门](https://developers.google.com/web/updates/2019/02/using-twa)，这篇[文章](https://www.infoq.cn/article/XTE9WzSL11iHmW*WBozi)也有全面的解析。\n\n<a name=\"efd3541c\"></a>\n#### Storybook 5.0 正式发布\nStorybook 是一个比较受欢迎的 UI 组件库，为各种视图层（如 React、Vue、Angular、React Native、Ember）提供了结构化的 UI 开发、测试和文档。Storybook 5.0 是目前为止发布的最大的一个版本，新版本的内容包括：全新的开发体验；带有主题的组件库；改进的前端插件架构；全新的[官网](https://storybook.js.org/)。\n\n<a name=\"f73496b9\"></a>\n#### Node.js 和 JS 基金会合并为 OpenJS 基金会\nNode.js 基金会和 JS 基金会宣布合并为 OpenJS 基金会，将提供一个中立的组织来托管项目并协助资助有益于生态系统的活动，简化基金会日常运营的同时满足个基础架构、技术和营销需求，为 Node.js 和 JavaScript 提供更光明的未来，这也是 JavaScript 发展中的一大步。\n\n<a name=\"19024967\"></a>\n#### 5G 来了\n从 2G 的发展，到 3G 的的成熟，再到 4G 落地，继而迎接 5G 时代的全面到来。5G 具有极快的传输速度、更高的网络容量、信息可及时触达等特点，也就是高速率、多连体、低时延。这些优势可带动广泛的行业发展，如物联网、视频、全息技术以及无人驾驶等，让我们，拭目以待。\n\n<a name=\"996.ICU\"></a>\n#### 996.ICU\n相当火爆的 github 项目 [996.ICU](https://github.com/996icu/996.ICU)，由 IT 工作者对工作制度的反抗，以谋求自己的合法权益的一种特别的方式。不得不感叹的是，随着时代及技术的发展，无产阶级的联合方式也在发生着变化。\n\n\n\n<a name=\"39a2dd90\"></a>\n#### TSLint -> ESLint\n继和 Babel 合作，使 Babel 支持编译 TS 语法后，TypeScript 团队又发布了新的 Roadmap，将使用 ESLint 来进行 TS 语法的静态类型检查，统一开发体验。TSLint 和 ESLint 团队也纷纷发文，公布未来的计划，TSLint 在被完全集成之前，会保持维护状态，ESLint 中推荐使用 typescript-eslint 来支持 TS 语法的静态类型检查，具体见 [TSLint Roadmap](https://github.com/palantir/tslint/issues/4534)、[The future of TypeScript on ESLint](https://eslint.org/blog/2019/01/future-typescript-eslint)\n\n<a name=\"c11c7bd5\"></a>\n### 工具推荐\n\n<a name=\"fcca144c\"></a>\n#### [Animations when you scroll](https://github.com/alexfoxy/laxxx)\n\n- 将滚动与动画相结合，使页面更有灵性\n- 支持在 DOM、React、VUE 中使用\n- 支持多种动画参数配置\n\n\n\n<a name=\"948ca773\"></a>\n#### You Dont Need 系列\nYou Dont Need 系列教程目的在于让读者回归基础，在不依赖一些主流的 util 库的情况下，自己动手去实现库里面提供的核心功能；很多情况下，一些 util 库占用了大量的体积，而且业务中实际使用的部分很少，如果能够手工去实现其中使用到的一些方法，就可以轻松通过移除三方库来提高加载速度了。（然而上规模的项目中，依然建议使用统一的 util 库）\n\n- [You-Dont-Need-JavaScript](https://github.com/you-dont-need/You-Dont-Need-JavaScript) 介绍了一些常用的组件、动效、甚至功能，在不通过编写 JavaScript 代码的前提下去实现它！\n- [You-Dont-Need-GUI](https://github.com/you-dont-need/You-Dont-Need-GUI) 许多场景下，我们使用命令交互的方式去操作机器（如文件、进程等处理），能大幅提高工作效率。\n- [You-Dont-Need-Momentjs](https://github.com/you-dont-need/You-Dont-Need-Momentjs) 介绍了 moment.js 对时间处理的核心功能实现。（通常情况下，我们还是需要一个时间处理库，推荐使用体积更小的 date-fns / dayjs）。\n- [You-Dont-Need-Lodash-Underscore](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore) 常用的一些 util 方法的 JavaScript 实现。\n- [You-Dont-Need-jQuery](https://github.com/nefe/You-Dont-Need-jQuery) 去除 jQuery 的一些 Native JavaScript 的方案，一步一步替换 jQuery 的 API。\n\n<a name=\"d7fd5050\"></a>\n#### TypeScript To WebAssembly\n通常我们都需要将 TypeScript 编译成 ES5 的代码，才能在浏览器中正常运行，[assemblyscript](https://github.com/AssemblyScript/assemblyscript) 是一款 TypeScript To WebAssembly 的编译器，通过 Webassembly 运行编译后的二进制代码。\n\n<a name=\"c3fc5b0a\"></a>\n### 热门文章\n\n<a name=\"6b65bba2\"></a>\n#### [我在淘宝做前端的这三年](https://zhuanlan.zhihu.com/yujiangshui)\n红了樱桃，绿了芭蕉。文章将在淘宝的三年时光折射为入职、职业规划、招聘、晋升、离职等与我们息息相关的经验分享，值得品读。\n\n<a name=\"204f357d\"></a>\n#### [前端专业方向的尽头](https://mp.weixin.qq.com/s?__biz=MzI5MTA4ODA3NQ==&mid=2247483710&idx=1&sn=cce855fd797f68ef77da424a7809500b&chksm=ec14b29adb633b8ccd4cab9a84adfd89014c96792c799b8501bdaf99bfc3c916dd298ffd62e3&mpshare=1&scene=2&srcid=&from=timeline&ascene=2&devicetype=androi)\n驽马十驾,功在不舍。或是走一条纯专业的探索之路，或是趋向技术管理，这些都是技术人的选择与坚持，也会拥有独一无二的风景。\n\n<a name=\"0c7751b3\"></a>\n#### [2019年大前端技术趋势深度解读](https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651014404&idx=2&sn=7ed7c965c10af5463b0ffadd9661ab61&chksm=bdbebd578ac93441467b1d81bc81141f2cecbee0b35dd625c62156d8f6abd33d1bea8661bea6&xtrack=1&scene=0&subscene=131&clicktime=1552918479&ascene=7&devic)\n念过去，望未来。前端的发展日新月异，坚持学习的同时也要保持思辨和平和。\n\n\n\n\n\n\n",
"body_draft": "",
"body_html": "<p><br /></p><p><br /></p><p><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/103147/1554174860996-48dafaa4-e8f1-483f-9d05-8ccc91028aa5.png#align=left&display=inline&height=443&name=image.png&originHeight=886&originWidth=1790&size=2086701&status=done&width=895\" style=\"max-width: 600px; width: 895px;\" /></p><p><br /></p><p>【Alibaba-TXD 前端小报】- 热门前端技术快报，聚焦业界新视界；<span>不知不觉</span> 2019 年已经过去了 1/4，日新月异的前端技术正在蓬勃发展，<a href=\"https://segmentfault.com/a/1190000018311280\" target=\"_blank\">ES10</a><span> 都已到来。</span></p><p><br /></p><blockquote style=\"padding-left: 1em;\"><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p><p>本期小编：<a href=\"https://github.com/happyliuliu\" target=\"_blank\">玙璠</a></p></blockquote><p><br /></p><h3 id=\"333b467a\">学习专栏</h3><p><br /></p><h4 id=\"bfdc0174\">2019 年前端技术会议</h4><p>裕波列出了一份前端技术会议的<a href=\"https://www.yuque.com/itchina110/giku37/xdzuak\" target=\"_blank\">清单</a>，涵盖国内和海外的重大前端相关的技术会议</p><p><br /></p><h4 id=\"343e4191\">微软前端训练营</h4><p>微软推出另一个前端的学习路径规划，官方提供的<a href=\"https://github.com/Microsoft/frontend-bootcamp\" target=\"_blank\">代码仓库</a>将一步一步带你走进前端技术领域，囊括基础的 HTML/CSS/JS 学习、TypeScript 强类型、React/Redux 学习和实践等。</p><p><br /></p><h3 id=\"81377773\">新闻快报</h3><p><br /></p><h4 id=\"9dbc3483\">阿里开源 Flutter 应用框架 Fish Redux</h4><p><a href=\"https://github.com/alibaba/fish-redux\" target=\"_blank\">Fish Redux</a> 框架是基于 Redux 数据管理的组装式 Flutter 应用框架，适合用于构建中大型的复杂应用，解决了集中状态管理和UI组件化等问题，将集中，分治，复用，隔离做的更进一步。</p><p><br /></p><h4 id=\"25275f3e\">Handtrack.js 搞定手部动作跟踪</h4><p>这是一个经过训练的产生的开源模型，而不需要用户自己训练。它隐藏了模型的加载步骤，允许用户在没有任何 ML 经验的情况下检测图像中的手，可以直接在 Web 应用使用该库，<a href=\"https://github.com/eduardolundgren/tracking.js\" target=\"_blank\">传送门</a>。</p><p><img alt=\"人工智能.gif\" title=\"人工智能.gif\" src=\"https://cdn.nlark.com/yuque/0/2019/gif/137059/1554173440898-750a723a-7f77-4a2b-8be6-4657f6a1e5d5.gif#align=left&display=inline&height=194&name=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD.gif&originHeight=240&originWidth=320&size=3646259&status=done&width=259\" style=\"max-width: 600px; width: 259px;\" /></p><p><br /></p><h4 id=\"9c7217f5\">小程序多端框架</h4><p>如今小程序的发展如日中天，很多公司的业务也都慢慢转向小程序，同时很多应用需要同时兼顾多个小程序平台，所以就有了上层开发框架或者脚手架来优化 DSL 来提高开发效率。其中凹凸实验室从开发体验、兼容性、接入成本、工具链等多个方面对小程序的的多端框架进行了全面的<a href=\"https://juejin.im/post/5c90eb366fb9a070d4199cc9\" target=\"_blank\">测评</a>，如果准备入坑，可以事先了解一下。</p><p><br /></p><h4 id=\"634da4be\">TWA 让你的 PWA 进入应用商店</h4><p>TWA（Trusted Web Activity）的发布，是将 Native 的技术扩展到 Web App，将 PWA 站点打包为 Native App 放入应用商店，用户可以在应用商店中搜索安装 PWA 应用，相比国外，PWA 在国内并非很流行，但这并不代表这个技术就不关键。未来可以考虑如何将该技术融入实践中来，<a href=\"https://developers.google.com/web/updates/2019/02/using-twa\" target=\"_blank\">传送门</a>，这篇<a href=\"https://www.infoq.cn/article/XTE9WzSL11iHmW*WBozi\" target=\"_blank\">文章</a>也有全面的解析。</p><p><br /></p><h4 id=\"efd3541c\">Storybook 5.0 正式发布</h4><p>Storybook 是一个比较受欢迎的 UI 组件库，为各种视图层（如 React、Vue、Angular、React Native、Ember）提供了结构化的 UI 开发、测试和文档。Storybook 5.0 是目前为止发布的最大的一个版本，新版本的内容包括：全新的开发体验；带有主题的组件库；改进的前端插件架构；全新的<a href=\"https://storybook.js.org/\" target=\"_blank\">官网</a>。</p><p><br /></p><h4 id=\"f73496b9\">Node.js 和 JS 基金会合并为 OpenJS 基金会</h4><p>Node.js 基金会和 JS 基金会宣布合并为 OpenJS 基金会，将提供一个中立的组织来托管项目并协助资助有益于生态系统的活动，简化基金会日常运营的同时满足个基础架构、技术和营销需求，为 Node.js 和 JavaScript 提供更光明的未来，这也是 JavaScript 发展中的一大步。</p><p><br /></p><h4 id=\"19024967\">5G 来了</h4><p>从 2G 的发展，到 3G 的的成熟，再到 4G 落地，继而迎接 5G 时代的全面到来。5G 具有极快的传输速度、更高的网络容量、信息可及时触达等特点，也就是高速率、多连体、低时延。这些优势可带动广泛的行业发展，如物联网、视频、全息技术以及无人驾驶等，让我们，拭目以待。</p><p><br /></p><h4 id=\"996.ICU\">996.ICU</h4><p>相当火爆的 github 项目 <a href=\"https://github.com/996icu/996.ICU\" target=\"_blank\">996.ICU</a>，由 IT 工作者对工作制度的反抗，以谋求自己的合法权益的一种特别的方式。不得不感叹的是，随着时代及技术的发展，无产阶级的联合方式也在发生着变化。</p><p><br /></p><p><img alt=\"加班.gif\" title=\"加班.gif\" src=\"https://cdn.nlark.com/yuque/0/2019/gif/137059/1554173440891-46104a73-a778-4813-b116-2d2840e6795f.gif#align=left&display=inline&height=168&name=%E5%8A%A0%E7%8F%AD.gif&originHeight=104&originWidth=129&size=19061&status=done&width=208\" style=\"max-width: 600px; width: 208px;\" /></p><p><br /></p><h4 id=\"39a2dd90\">TSLint -> ESLint</h4><p><span style=\"color: #24292E;\">继和 Babel 合作，使 Babel 支持编译 TS 语法后，TypeScript 团队又发布了新的 Roadmap，将使用 ESLint 来进行 TS 语法的静态类型检查，统一开发体验。TSLint 和 ESLint 团队也纷纷发文，公布未来的计划，TSLint 在被完全集成之前，会保持维护状态，ESLint 中推荐使用 typescript-eslint 来支持 TS 语法的静态类型检查，具体见 </span><a href=\"https://github.com/palantir/tslint/issues/4534\" target=\"_blank\">TSLint Roadmap</a><span style=\"color: #24292E;\">、</span><a href=\"https://eslint.org/blog/2019/01/future-typescript-eslint\" target=\"_blank\">The future of TypeScript on ESLint</a></p><p><br /></p><h3 id=\"c11c7bd5\">工具推荐</h3><p><br /></p><h4 id=\"fcca144c\"><a href=\"https://github.com/alexfoxy/laxxx\" target=\"_blank\">Animations when you scroll</a></h4><ul><li>将滚动与动画相结合，使页面更有灵性</li><li>支持在 DOM、React、VUE 中使用</li><li>支持多种动画参数配置</li></ul><p><br /></p><p><img alt=\"lax.gif\" title=\"lax.gif\" src=\"https://cdn.nlark.com/yuque/0/2019/gif/137059/1554173440895-2c7ea1b1-3e3c-428b-9c40-fa08b863168c.gif#align=left&display=inline&height=259&name=lax.gif&originHeight=259&originWidth=320&size=634366&status=done&width=320\" style=\"max-width: 600px; width: 320px;\" /></p><p><br /></p><h4 id=\"948ca773\">You Dont Need 系列</h4><p>You Dont Need 系列教程目的在于让读者回归基础，在不依赖一些主流的 util 库的情况下，自己动手去实现库里面提供的核心功能；很多情况下，一些 util 库占用了大量的体积，而且业务中实际使用的部分很少，如果能够手工去实现其中使用到的一些方法，就可以轻松通过移除三方库来提高加载速度了。（然而上规模的项目中，依然建议使用统一的 util 库）</p><p><br /></p><ul><li><a href=\"https://github.com/you-dont-need/You-Dont-Need-JavaScript\" target=\"_blank\">You-Dont-Need-JavaScript</a> 介绍了一些常用的组件、动效、甚至功能，在不通过编写 JavaScript 代码的前提下去实现它！</li><li><a href=\"https://github.com/you-dont-need/You-Dont-Need-GUI\" target=\"_blank\">You-Dont-Need-GUI</a> 许多场景下，我们使用命令交互的方式去操作机器（如文件、进程等处理），能大幅提高工作效率。</li><li><a href=\"https://github.com/you-dont-need/You-Dont-Need-Momentjs\" target=\"_blank\">You-Dont-Need-Momentjs</a> 介绍了 moment.js 对时间处理的核心功能实现。（通常情况下，我们还是需要一个时间处理库，推荐使用体积更小的 date-fns / dayjs）。</li><li><a href=\"https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore\" target=\"_blank\">You-Dont-Need-Lodash-Underscore</a> 常用的一些 util 方法的 JavaScript 实现。</li><li><a href=\"https://github.com/nefe/You-Dont-Need-jQuery\" target=\"_blank\">You-Dont-Need-jQuery</a> 去除 jQuery 的一些 Native JavaScript 的方案，一步一步替换 jQuery 的 API。</li></ul><p><br /></p><h4 id=\"d7fd5050\">TypeScript To WebAssembly</h4><p>通常我们都需要将 TypeScript 编译成 ES5 的代码，才能在浏览器中正常运行，<a href=\"https://github.com/AssemblyScript/assemblyscript\" target=\"_blank\">assemblyscript</a> 是一款 TypeScript To WebAssembly 的编译器，通过 Webassembly 运行编译后的二进制代码。</p><p><br /></p><h3 id=\"c3fc5b0a\">热门文章</h3><p><br /></p><h4 id=\"6b65bba2\"><a href=\"https://zhuanlan.zhihu.com/yujiangshui\" target=\"_blank\">我在淘宝做前端的这三年</a></h4><p>红了樱桃，绿了芭蕉。文章将在淘宝的三年时光折射为入职、职业规划、招聘、晋升、离职等与我们息息相关的经验分享，值得品读。</p><p><br /></p><h4 id=\"204f357d\"><a href=\"https://mp.weixin.qq.com/s?__biz=MzI5MTA4ODA3NQ==&mid=2247483710&idx=1&sn=cce855fd797f68ef77da424a7809500b&chksm=ec14b29adb633b8ccd4cab9a84adfd89014c96792c799b8501bdaf99bfc3c916dd298ffd62e3&mpshare=1&scene=2&srcid=&from=timeline&ascene=2&devicetype=androi\" target=\"_blank\">前端专业方向的尽头</a></h4><p>驽马十驾,功在不舍。或是走一条纯专业的探索之路，或是趋向技术管理，这些都是技术人的选择与坚持，也会拥有独一无二的风景。</p><p><br /></p><h4 id=\"0c7751b3\"><a href=\"https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651014404&idx=2&sn=7ed7c965c10af5463b0ffadd9661ab61&chksm=bdbebd578ac93441467b1d81bc81141f2cecbee0b35dd625c62156d8f6abd33d1bea8661bea6&xtrack=1&scene=0&subscene=131&clicktime=1552918479&ascene=7&devic\" target=\"_blank\">2019年大前端技术趋势深度解读</a></h4><p>念过去，望未来。前端的发展日新月异，坚持学习的同时也要保持思辨和平和。</p><p><br /></p><p><br /></p><p style=\"text-align: center;\"><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/137059/1554173440911-9bd825a2-0664-4e96-b300-12a855a34e4a.png#align=left&display=inline&height=378&name=image.png&originHeight=1044&originWidth=1080&size=1149092&status=done&width=391\" style=\"max-width: 600px; width: 391px;\" /></p><p><br /></p><p><br /></p><p><br /></p>",
"body_lake": "<!doctype lake><p><br /></p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F103147%2F1554174860996-48dafaa4-e8f1-483f-9d05-8ccc91028aa5.png%22%2C%22originWidth%22%3A1790%2C%22originHeight%22%3A886%2C%22name%22%3A%22image.png%22%2C%22size%22%3A2086701%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A895%2C%22height%22%3A443%7D\"></card></p><p><br /></p><p>【Alibaba-TXD 前端小报】- 热门前端技术快报，聚焦业界新视界；<span>不知不觉</span> 2019 年已经过去了 1/4，日新月异的前端技术正在蓬勃发展，<a href=\"https://segmentfault.com/a/1190000018311280\" target=\"_blank\">ES10</a><span> 都已到来。</span></p><p><br /></p><blockquote style=\"padding-left: 1em;\"><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p><p>本期小编：<a href=\"https://github.com/happyliuliu\" target=\"_blank\">玙璠</a></p></blockquote><p><br /></p><h3 id=\"333b467a\">学习专栏</h3><p><br /></p><h4 id=\"bfdc0174\">2019 年前端技术会议</h4><p>裕波列出了一份前端技术会议的<a href=\"https://www.yuque.com/itchina110/giku37/xdzuak\" target=\"_blank\">清单</a>，涵盖国内和海外的重大前端相关的技术会议</p><p><br /></p><h4 id=\"343e4191\">微软前端训练营</h4><p>微软推出另一个前端的学习路径规划，官方提供的<a href=\"https://github.com/Microsoft/frontend-bootcamp\" target=\"_blank\">代码仓库</a>将一步一步带你走进前端技术领域，囊括基础的 HTML/CSS/JS 学习、TypeScript 强类型、React/Redux 学习和实践等。</p><p><br /></p><h3 id=\"81377773\">新闻快报</h3><p><br /></p><h4 id=\"9dbc3483\">阿里开源 Flutter 应用框架 Fish Redux</h4><p><a href=\"https://github.com/alibaba/fish-redux\" target=\"_blank\">Fish Redux</a> 框架是基于 Redux 数据管理的组装式 Flutter 应用框架，适合用于构建中大型的复杂应用，解决了集中状态管理和UI组件化等问题，将集中，分治，复用，隔离做的更进一步。</p><p><br /></p><h4 id=\"25275f3e\">Handtrack.js 搞定手部动作跟踪</h4><p>这是一个经过训练的产生的开源模型，而不需要用户自己训练。它隐藏了模型的加载步骤，允许用户在没有任何 ML 经验的情况下检测图像中的手，可以直接在 Web 应用使用该库，<a href=\"https://github.com/eduardolundgren/tracking.js\" target=\"_blank\">传送门</a>。</p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F137059%2F1554173440898-750a723a-7f77-4a2b-8be6-4657f6a1e5d5.gif%22%2C%22originWidth%22%3A320%2C%22originHeight%22%3A240%2C%22name%22%3A%22%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD.gif%22%2C%22size%22%3A3646259%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A259%2C%22height%22%3A194%7D\"></card></p><p><br /></p><h4 id=\"9c7217f5\">小程序多端框架</h4><p>如今小程序的发展如日中天，很多公司的业务也都慢慢转向小程序，同时很多应用需要同时兼顾多个小程序平台，所以就有了上层开发框架或者脚手架来优化 DSL 来提高开发效率。其中凹凸实验室从开发体验、兼容性、接入成本、工具链等多个方面对小程序的的多端框架进行了全面的<a href=\"https://juejin.im/post/5c90eb366fb9a070d4199cc9\" target=\"_blank\">测评</a>，如果准备入坑，可以事先了解一下。</p><p><br /></p><h4 id=\"634da4be\">TWA 让你的 PWA 进入应用商店</h4><p>TWA（Trusted Web Activity）的发布，是将 Native 的技术扩展到 Web App，将 PWA 站点打包为 Native App 放入应用商店，用户可以在应用商店中搜索安装 PWA 应用，相比国外，PWA 在国内并非很流行，但这并不代表这个技术就不关键。未来可以考虑如何将该技术融入实践中来，<a href=\"https://developers.google.com/web/updates/2019/02/using-twa\" target=\"_blank\">传送门</a>，这篇<a href=\"https://www.infoq.cn/article/XTE9WzSL11iHmW*WBozi\" target=\"_blank\">文章</a>也有全面的解析。</p><p><br /></p><h4 id=\"efd3541c\">Storybook 5.0 正式发布</h4><p>Storybook 是一个比较受欢迎的 UI 组件库，为各种视图层（如 React、Vue、Angular、React Native、Ember）提供了结构化的 UI 开发、测试和文档。Storybook 5.0 是目前为止发布的最大的一个版本，新版本的内容包括：全新的开发体验；带有主题的组件库；改进的前端插件架构；全新的<a href=\"https://storybook.js.org/\" target=\"_blank\">官网</a>。</p><p><br /></p><h4 id=\"f73496b9\">Node.js 和 JS 基金会合并为 OpenJS 基金会</h4><p>Node.js 基金会和 JS 基金会宣布合并为 OpenJS 基金会，将提供一个中立的组织来托管项目并协助资助有益于生态系统的活动，简化基金会日常运营的同时满足个基础架构、技术和营销需求，为 Node.js 和 JavaScript 提供更光明的未来，这也是 JavaScript 发展中的一大步。</p><p><br /></p><h4 id=\"19024967\">5G 来了</h4><p>从 2G 的发展，到 3G 的的成熟，再到 4G 落地，继而迎接 5G 时代的全面到来。5G 具有极快的传输速度、更高的网络容量、信息可及时触达等特点，也就是高速率、多连体、低时延。这些优势可带动广泛的行业发展，如物联网、视频、全息技术以及无人驾驶等，让我们，拭目以待。</p><p><br /></p><h4 id=\"996.ICU\">996.ICU</h4><p>相当火爆的 github 项目 <a href=\"https://github.com/996icu/996.ICU\" target=\"_blank\">996.ICU</a>，由 IT 工作者对工作制度的反抗，以谋求自己的合法权益的一种特别的方式。不得不感叹的是，随着时代及技术的发展，无产阶级的联合方式也在发生着变化。</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F137059%2F1554173440891-46104a73-a778-4813-b116-2d2840e6795f.gif%22%2C%22originWidth%22%3A129%2C%22originHeight%22%3A104%2C%22name%22%3A%22%E5%8A%A0%E7%8F%AD.gif%22%2C%22size%22%3A19061%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A208%2C%22height%22%3A168%7D\"></card></p><p><br /></p><h4 id=\"39a2dd90\">TSLint -> ESLint</h4><p><span style=\"color: #24292E;\">继和 Babel 合作，使 Babel 支持编译 TS 语法后，TypeScript 团队又发布了新的 Roadmap，将使用 ESLint 来进行 TS 语法的静态类型检查，统一开发体验。TSLint 和 ESLint 团队也纷纷发文，公布未来的计划，TSLint 在被完全集成之前，会保持维护状态，ESLint 中推荐使用 typescript-eslint 来支持 TS 语法的静态类型检查，具体见 </span><a href=\"https://github.com/palantir/tslint/issues/4534\" target=\"_blank\">TSLint Roadmap</a><span style=\"color: #24292E;\">、</span><a href=\"https://eslint.org/blog/2019/01/future-typescript-eslint\" target=\"_blank\">The future of TypeScript on ESLint</a></p><p><br /></p><h3 id=\"c11c7bd5\">工具推荐</h3><p><br /></p><h4 id=\"fcca144c\"><a href=\"https://github.com/alexfoxy/laxxx\" target=\"_blank\">Animations when you scroll</a></h4><ul><li>将滚动与动画相结合，使页面更有灵性</li><li>支持在 DOM、React、VUE 中使用</li><li>支持多种动画参数配置</li></ul><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F137059%2F1554173440895-2c7ea1b1-3e3c-428b-9c40-fa08b863168c.gif%22%2C%22originWidth%22%3A320%2C%22originHeight%22%3A259%2C%22name%22%3A%22lax.gif%22%2C%22size%22%3A634366%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A320%2C%22height%22%3A259%7D\"></card></p><p><br /></p><h4 id=\"948ca773\">You Dont Need 系列</h4><p>You Dont Need 系列教程目的在于让读者回归基础，在不依赖一些主流的 util 库的情况下，自己动手去实现库里面提供的核心功能；很多情况下，一些 util 库占用了大量的体积，而且业务中实际使用的部分很少，如果能够手工去实现其中使用到的一些方法，就可以轻松通过移除三方库来提高加载速度了。（然而上规模的项目中，依然建议使用统一的 util 库）</p><p><br /></p><ul><li><a href=\"https://github.com/you-dont-need/You-Dont-Need-JavaScript\" target=\"_blank\">You-Dont-Need-JavaScript</a> 介绍了一些常用的组件、动效、甚至功能，在不通过编写 JavaScript 代码的前提下去实现它！</li><li><a href=\"https://github.com/you-dont-need/You-Dont-Need-GUI\" target=\"_blank\">You-Dont-Need-GUI</a> 许多场景下，我们使用命令交互的方式去操作机器（如文件、进程等处理），能大幅提高工作效率。</li><li><a href=\"https://github.com/you-dont-need/You-Dont-Need-Momentjs\" target=\"_blank\">You-Dont-Need-Momentjs</a> 介绍了 moment.js 对时间处理的核心功能实现。（通常情况下，我们还是需要一个时间处理库，推荐使用体积更小的 date-fns / dayjs）。</li><li><a href=\"https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore\" target=\"_blank\">You-Dont-Need-Lodash-Underscore</a> 常用的一些 util 方法的 JavaScript 实现。</li><li><a href=\"https://github.com/nefe/You-Dont-Need-jQuery\" target=\"_blank\">You-Dont-Need-jQuery</a> 去除 jQuery 的一些 Native JavaScript 的方案，一步一步替换 jQuery 的 API。</li></ul><p><br /></p><h4 id=\"d7fd5050\">TypeScript To WebAssembly</h4><p>通常我们都需要将 TypeScript 编译成 ES5 的代码，才能在浏览器中正常运行，<a href=\"https://github.com/AssemblyScript/assemblyscript\" target=\"_blank\">assemblyscript</a> 是一款 TypeScript To WebAssembly 的编译器，通过 Webassembly 运行编译后的二进制代码。</p><p><br /></p><h3 id=\"c3fc5b0a\">热门文章</h3><p><br /></p><h4 id=\"6b65bba2\"><a href=\"https://zhuanlan.zhihu.com/yujiangshui\" target=\"_blank\">我在淘宝做前端的这三年</a></h4><p>红了樱桃，绿了芭蕉。文章将在淘宝的三年时光折射为入职、职业规划、招聘、晋升、离职等与我们息息相关的经验分享，值得品读。</p><p><br /></p><h4 id=\"204f357d\"><a href=\"https://mp.weixin.qq.com/s?__biz=MzI5MTA4ODA3NQ==&mid=2247483710&idx=1&sn=cce855fd797f68ef77da424a7809500b&chksm=ec14b29adb633b8ccd4cab9a84adfd89014c96792c799b8501bdaf99bfc3c916dd298ffd62e3&mpshare=1&scene=2&srcid=&from=timeline&ascene=2&devicetype=androi\" target=\"_blank\">前端专业方向的尽头</a></h4><p>驽马十驾,功在不舍。或是走一条纯专业的探索之路，或是趋向技术管理，这些都是技术人的选择与坚持，也会拥有独一无二的风景。</p><p><br /></p><h4 id=\"0c7751b3\"><a href=\"https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651014404&idx=2&sn=7ed7c965c10af5463b0ffadd9661ab61&chksm=bdbebd578ac93441467b1d81bc81141f2cecbee0b35dd625c62156d8f6abd33d1bea8661bea6&xtrack=1&scene=0&subscene=131&clicktime=1552918479&ascene=7&devic\" target=\"_blank\">2019年大前端技术趋势深度解读</a><cursor /></h4><p>念过去，望未来。前端的发展日新月异，坚持学习的同时也要保持思辨和平和。</p><p><br /></p><p><br /></p><p style=\"text-align: center;\"><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F137059%2F1554173440911-9bd825a2-0664-4e96-b300-12a855a34e4a.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A1044%2C%22name%22%3A%22image.png%22%2C%22size%22%3A1149092%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A391%2C%22height%22%3A378%7D\"></card></p><p><br /></p><p><br /></p><p><br /></p>",
"public": 1,
"status": 1,
"likes_count": 1,
"comments_count": 0,
"content_updated_at": "2019-04-02T06:08:18.000Z",
"deleted_at": null,
"created_at": "2019-04-02T02:49:45.000Z",
"updated_at": "2019-05-20T06:39:58.000Z",
"published_at": "2019-04-02T06:08:18.000Z",
"first_published_at": "2019-04-02T02:50:56.000Z",
"word_count": 1713,
"cover": null,
"description": "【Alibaba-TXD 前端小报】- 热门前端技术快报，聚焦业界新视界；不知不觉 2019 年已经过去了 1/4，日新月异的前端技术正在蓬勃发展，ES10 都已到来。欢迎 订阅 & 投稿本期小编：玙璠学习专栏2019 年前端技术会议裕波列出了一份前端技术会议的清单，涵盖国内和海外的重...",
"custom_description": null,
"_serializer": "v2.doc_detail"
},
{
"id": 1314115,
"slug": "201902",
"title": "201902",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 9,
"likes_count": 0,
"watches_count": 22,
"content_updated_at": "2019-06-03T01:18:59.604Z",
"updated_at": "2019-06-03T01:18:59.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 106292,
"creator": {
"id": 106292,
"type": "User",
"login": "shengmo",
"name": "绳墨金石",
"description": null,
"avatar_url": "https://cdn.yuque.com/yuque/0/2018/jpeg/106292/1528450129882-avatar/dac5282a-2347-47d1-a445-5d48274685c2.jpeg",
"large_avatar_url": "https://cdn.yuque.com/yuque/0/2018/jpeg/106292/1528450129882-avatar/dac5282a-2347-47d1-a445-5d48274685c2.jpeg?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.yuque.com/yuque/0/2018/jpeg/106292/1528450129882-avatar/dac5282a-2347-47d1-a445-5d48274685c2.jpeg?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.yuque.com/yuque/0/2018/jpeg/106292/1528450129882-avatar/dac5282a-2347-47d1-a445-5d48274685c2.jpeg?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 1,
"public_books_count": 1,
"followers_count": 1,
"following_count": 0,
"created_at": "2018-04-23T09:16:50.000Z",
"updated_at": "2019-05-23T03:59:57.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "【AIS-TXD前端技术月刊】- 本月热门前端技术快报，汇聚 Github Trending 流行 Repo 和热门文章，文末有福利\n\n\n<a name=\"d41d8cd9\"></a>\n### \n> 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues)\n\n> 本期小编：[damujiangr (墨止) ](https://github.com/damujiangr) \n\n\n<a name=\"81377773\"></a>\n### 新闻快报\n<a name=\"6ad7f24d\"></a>\n#### React v16.8 发布:[ The One With Hooks](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html)\n\n- [Hooks 上手介绍](https://reactjs.org/docs/hooks-intro.html) \n- 额外：React 终于开始做国际化了，以后国内的新手们就能看到中文文档的 React 了，目前正在招募 Contributors，有兴趣的可以参看 [Is React Translated Yet? ¡Sí! Sim! はい](https://reactjs.org/blog/2019/02/23/is-react-translated-yet.html) \n<a name=\"d41d8cd9-1\"></a>\n#### \n<a name=\"89d33bf1\"></a>\n#### Vue v2.6 发布: 代号：Macross\n\n- 准备与 v3.0 版本接轨了\n- Slot 引入了新的模版语法， v-slot (默认插槽) v-slot:name (具名插槽)\n- 异步错误处理、编译警告位置信息等等\n- [专栏链接](https://zhuanlan.zhihu.com/p/56260917) \n\n<a name=\"2e5ce74d\"></a>\n#### Flutter 1.2 发布\n\n- Flutter 1.2 是自第一个测试版本，历时一年后，发布的第一次 feature update\n- 除了提升了核心框架的稳定性、性能和质量，完善现在的widget，重要的是为开发者提供了基于 Web 的开发工具，以后还可能会直接构建到VS Code中\n - widget inspector 支持树状层级结构的可视化\n - timeline view 支持帧级别的诊断，发现渲染和计算的问题\n - full source-level debugger 支持设置断点、单步执行，查看调用堆栈\n - logging view 能够显示 app 中的日志、网络、框架和垃圾回收事件\n- [官方介绍链接](https://developers.googleblog.com/2019/02/launching-flutter-12-at-mobile-world.html) \n\n<a name=\"76c13a1a\"></a>\n#### 支付宝小程序向个人开发者开放公测\n\n- 小程序这场围绕流量、场景、创意等诸多概念的新风口，每一家公司都想要分得一杯羹，越来越多的小程序、轻应用涌现出来，支付宝小程序开发公测，说明技术架构上已趋稳定\n- [支付包小程序入驻链接](https://docs.alipay.com/mini/introduce/register) \n- 这里还有一篇技术稿，为支付宝小程序首席架构师白招拒，解读支付宝小程序的技术架构和开发特点，[《独家！支付宝首次披露其小程序技术架构》](https://mp.weixin.qq.com/s/PX7b_qV6tYKnN3ecoz9Ehw) \n\n<a name=\"c9ec687a\"></a>\n#### 阿里云 ARMS 推出小程序监控\n\n- 基础服务的角色来了，可以用于及时发现卡顿、缓慢和一些错误，让小程序不再裸奔\n- 目前支持情况：钉钉E应用、支付宝小程序、微信小程序、其他符合标准的小程序\n- [前端监控接入概述](https://help.aliyun.com/document_detail/106086.html) \n\n<a name=\"4bd515bc\"></a>\n#### Next.js 8 新增支持 Serverless\n\n- 支持 Serverless 可以极大的提高应用开发的可靠性和可伸缩性，启用也很简单，查看[官方详细介绍](https://nextjs.org/blog/next-8/) \n```javascript\n// next.config.js\nmodule.exports = {\n target: \"serverless\",\n};\n```\n\n<a name=\"94fcfe27\"></a>\n#### [Ant Design of Vue](https://vue.ant.design/)\n\n- 近日有开发者基于 Ant Design 的设计语言，开发了一套基于 Vue 组件库，喜欢 antd 风 的 Vue 开发者有福利了\n- 使用体验方面，跟 Ant Design 官网的更新要滞后一些，感官上还是很不错的\n\n<a name=\"46189f83\"></a>\n#### [TSLint in 2019](https://medium.com/palantir/tslint-in-2019-1a144c2317a9) \n\n- 随着TypeScript生态的不断壮大，TSLint也在不断演进，准备提供更多的能力，更加拥抱社区共同发展，和对 ESLint 的兼容，让开发者可以无缝切换\n\n<a name=\"364de9da\"></a>\n#### npm 推出企业版 [npm Enterprise](https://www.npmjs.com/products/enterprise)\n\n- 主打安全性，提供额外的控制权限，还可以定制CI/CD系统集成流程，可以理解为企业私服，比如阿里内部的tnpm与开放的镜像的cnpm\n\n<a name=\"365acd42\"></a>\n### Github Trending\n<a name=\"4a8be53d\"></a>\n#### 好用的代码片段查看工具 推荐者：[x-cold](https://github.com/x-cold) \n\n- 将某一个文件的仓库地址的 `github.com` 替换为 `github.githistory.xyz` ，回车即可访问到代码变更的记录。也可以安装浏览器插件 [Chrome](https://chrome.google.com/webstore/detail/github-history-browser-ex/laghnmifffncfonaoffcndocllegejnf) 或 [Firefox](https://addons.mozilla.org/firefox/addon/github-history/)，在某个文件的网页上就能看到一个 `Open in Git History` 的按钮，点击即可。\n - \n- 对于本地仓库，可以使用命令访问 `npx git-file-history path/to/file.ext` \n- Github 仓库：[pomber/git-history](https://github.com/pomber/git-history) \n\n <br />\n\n\n<a name=\"e87d21dc\"></a>\n#### 让网站变的透明直到消失的方案\n\n- 加入 [kleampa](https://github.com/kleampa)/**[not-paid](https://github.com/kleampa/not-paid)** 后，如果设置的日期即将到来，那么网页会逐天变得越来越透明，直到完全消失\n\n<a name=\"a9b91797\"></a>\n#### 是时候打造一款属于自己的AI助手了\n\n- 使用 [leon-ai](https://github.com/leon-ai)/**[leon](https://github.com/leon-ai/leon)** 即可打造属于自己的AI助手\n- 安装过程中注意需要某些必要的包：如 `brew install pipenv` \n\n<a name=\"c11c7bd5\"></a>\n### 工具推荐\n<a name=\"19eedff8\"></a>\n#### Animation in React\n\n- 使用 React 写动画并不容易，但是借用 `@nearform/react-animation` 提供的组件和预制的 keyframes，就会让动画实现变得轻松起来\n- [使用入门文章](https://www.nearform.com/blog/animation-in-react/) \n- [@nearform/react-animation in NPM](https://www.npmjs.com/package/@nearform/react-animation) \n\n<a name=\"4f4d74a7\"></a>\n#### Webpack 5 的新特性\n\n- 介绍了 Webpack 5 即将带来的新特性 [New Features in Webpack 5](https://blog.logrocket.com/new-features-in-webpack-5-2559755adf5e) \n - 通过持久缓存提高构建性能\n - 代码拆分功能更加强大，更智能的分析模块大小\n - Name Chunk ID 不需要在使用注释定义，而是使用如下配置：\n```javascript\noptimization: { chunkIds: 'named' }\n```\n\n - 尽量遵循在内部作出改变的原则，而不会破坏使用方式\n\n<a name=\"c3fc5b0a\"></a>\n### 热门文章\n<a name=\"c5ae63a8\"></a>\n#### [给2019前端的5个建议](https://zhuanlan.zhihu.com/p/55357377) \n\n- 不断学习 Redux/TypeScript 等等，造轮子覆盖全链路，程序员一直在路上\n\n<a name=\"2876b763\"></a>\n#### [近一万字的ES6语法知识点补充](https://juejin.im/post/5c6234f16fb9a049a81fcca5) \n\n- ES2019 都来了，快来补充学习起来\n\n \n<a name=\"189db772\"></a>\n#### [研发团队资源成本优化实践](https://tech.meituan.com/2019/02/21/rd-team-resource-cost-optimization-practice.html) \n\n- 主要介绍了成本投入与产出的背景、实践过程中的几个阶段，可以对自己的团队管理进行了一个对照和复盘\n\n<a name=\"a567e185\"></a>\n### 福利来了\n\n春天来了，又到了金三银四的季节，我们是阿里巴巴「研发效能部-体验技术」团队，一个集前端、视觉、交互的综合性团队，致力于阿里集团全球数据中心和DevOps的数字化、自动化、智能化的体验设计和前端体系化建设，打造企业级数据可视化产品、探索未来前沿科技创新产品，这里有酒有故事，就等你来，简历请投：`thomasyang.ypf#alibaba-inc.com`、`longbo.ylb#alibaba-inc.com`\n",
"body_draft": "",
"body_html": "<p>【AIS-TXD前端技术月刊】- 本月热门前端技术快报，汇聚 Github Trending 流行 Repo 和热门文章，文末有福利</p><p><br /></p><p><img alt=\"hooks.jpg\" title=\"hooks.jpg\" src=\"https://cdn.nlark.com/yuque/0/2019/jpeg/103147/1551432272343-512be9f6-cff6-43f0-8151-7bed017ec646.jpeg#align=left&display=inline&height=446&name=hooks.jpg&originHeight=808&originWidth=1352&size=24501&status=done&width=746\" style=\"max-width: 600px; width: 746px;\" /></p><h3 id=\"d41d8cd9\"><br /></h3><blockquote style=\"padding-left: 1em;\"><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p></blockquote><blockquote style=\"padding-left: 1em;\"><p>本期小编：<a href=\"https://github.com/damujiangr\" target=\"_blank\">damujiangr (墨止) </a> </p></blockquote><p><br /></p><h3 id=\"81377773\">新闻快报</h3><h4 id=\"6ad7f24d\">React v16.8 发布:<a href=\"https://reactjs.org/blog/2019/02/06/react-v16.8.0.html\" target=\"_blank\"> The One With Hooks</a></h4><ul><li><a href=\"https://reactjs.org/docs/hooks-intro.html\" target=\"_blank\">Hooks 上手介绍</a> </li><li>额外：React 终于开始做国际化了，以后国内的新手们就能看到中文文档的 React 了，目前正在招募 Contributors，有兴趣的可以参看 <a href=\"https://reactjs.org/blog/2019/02/23/is-react-translated-yet.html\" target=\"_blank\">Is React Translated Yet? ¡Sí! Sim! はい</a> </li></ul><h4 id=\"d41d8cd9-1\"><br /></h4><h4 id=\"89d33bf1\">Vue v2.6 发布: 代号：Macross</h4><ul><li>准备与 v3.0 版本接轨了</li><li>Slot 引入了新的模版语法， v-slot (默认插槽) v-slot:name (具名插槽)</li><li>异步错误处理、编译警告位置信息等等</li><li><a href=\"https://zhuanlan.zhihu.com/p/56260917\" target=\"_blank\">专栏链接</a> </li></ul><p><br /></p><h4 id=\"2e5ce74d\">Flutter 1.2 发布</h4><ul><li>Flutter 1.2 是自第一个测试版本，历时一年后，发布的第一次 feature update</li><li>除了提升了核心框架的稳定性、性能和质量，完善现在的widget，重要的是为开发者提供了基于 Web 的开发工具，以后还可能会直接构建到VS Code中</li></ul><ul data-lake-indent=\"1\"><li>widget inspector 支持树状层级结构的可视化</li><li>timeline view 支持帧级别的诊断，发现渲染和计算的问题</li><li>full source-level debugger 支持设置断点、单步执行，查看调用堆栈</li><li>logging view 能够显示 app 中的日志、网络、框架和垃圾回收事件</li></ul><ul><li><a href=\"https://developers.googleblog.com/2019/02/launching-flutter-12-at-mobile-world.html\" target=\"_blank\">官方介绍链接</a> </li></ul><p><br /></p><h4 id=\"76c13a1a\">支付宝小程序向个人开发者开放公测</h4><ul><li>小程序这场围绕流量、场景、创意等诸多概念的新风口，每一家公司都想要分得一杯羹，越来越多的小程序、轻应用涌现出来，支付宝小程序开发公测，说明技术架构上已趋稳定</li><li><a href=\"https://docs.alipay.com/mini/introduce/register\" target=\"_blank\">支付包小程序入驻链接</a> </li><li>这里还有一篇技术稿，为支付宝小程序首席架构师白招拒，解读支付宝小程序的技术架构和开发特点，<a href=\"https://mp.weixin.qq.com/s/PX7b_qV6tYKnN3ecoz9Ehw\" target=\"_blank\">《独家！支付宝首次披露其小程序技术架构》</a> </li></ul><p><br /></p><h4 id=\"c9ec687a\">阿里云 ARMS 推出小程序监控</h4><ul><li>基础服务的角色来了，可以用于及时发现卡顿、缓慢和一些错误，让小程序不再裸奔</li><li>目前支持情况：钉钉E应用、支付宝小程序、微信小程序、其他符合标准的小程序</li><li><a href=\"https://help.aliyun.com/document_detail/106086.html\" target=\"_blank\">前端监控接入概述</a> </li></ul><p><br /></p><h4 id=\"4bd515bc\">Next.js 8 新增支持 Serverless</h4><ul><li>支持 Serverless 可以极大的提高应用开发的可靠性和可伸缩性，启用也很简单，查看<a href=\"https://nextjs.org/blog/next-8/\" target=\"_blank\">官方详细介绍</a> </li></ul><pre data-lang=\"javascript\"><code>// next.config.js\nmodule.exports = {\n target: "serverless",\n};</code></pre><p><br /></p><h4 id=\"94fcfe27\"><a href=\"https://vue.ant.design/\" target=\"_blank\">Ant Design of Vue</a></h4><ul><li>近日有开发者基于 Ant Design 的设计语言，开发了一套基于 Vue 组件库，喜欢 antd 风 的 Vue 开发者有福利了</li><li>使用体验方面，跟 Ant Design 官网的更新要滞后一些，感官上还是很不错的</li></ul><p><br /></p><h4 id=\"46189f83\"><a href=\"https://medium.com/palantir/tslint-in-2019-1a144c2317a9\" target=\"_blank\">TSLint in 2019</a> </h4><ul><li>随着TypeScript生态的不断壮大，TSLint也在不断演进，准备提供更多的能力，更加拥抱社区共同发展，和对 ESLint 的兼容，让开发者可以无缝切换</li></ul><p><br /></p><h4 id=\"364de9da\">npm 推出企业版 <a href=\"https://www.npmjs.com/products/enterprise\" target=\"_blank\">npm Enterprise</a></h4><ul><li>主打安全性，提供额外的控制权限，还可以定制CI/CD系统集成流程，可以理解为企业私服，比如阿里内部的tnpm与开放的镜像的cnpm</li></ul><p><br /></p><h3 id=\"365acd42\">Github Trending</h3><h4 id=\"4a8be53d\">好用的代码片段查看工具 推荐者：<a href=\"https://github.com/x-cold\" target=\"_blank\">x-cold</a> </h4><ul><li>将某一个文件的仓库地址的 <code>github.com</code> 替换为 <code>github.githistory.xyz</code> ，回车即可访问到代码变更的记录。也可以安装浏览器插件 <a href=\"https://chrome.google.com/webstore/detail/github-history-browser-ex/laghnmifffncfonaoffcndocllegejnf\" target=\"_blank\">Chrome</a><span class=\"lake-fontsize-12\" style=\"color: #24292E;\"> 或 </span><a href=\"https://addons.mozilla.org/firefox/addon/github-history/\" target=\"_blank\">Firefox</a>，在某个文件的网页上就能看到一个 `<span style=\"color: #24292E;\">Open in Git History</span><span class=\"lake-fontsize-11\" style=\"color: #24292E;\">` </span>的按钮，点击即可。</li></ul><ul data-lake-indent=\"1\"><li><img alt=\"20190228194645.png\" title=\"20190228194645.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/103147/1551432272343-4a97aefb-0df2-48c2-8bdd-f0555fbf7479.png#align=left&display=inline&height=48&name=20190228194645.png&originHeight=48&originWidth=420&size=9210&status=done&width=420\" style=\"max-width: 600px; width: 420px;\" /></li></ul><ul><li>对于本地仓库，可以使用命令访问 <code>npx git-file-history path/to/file.ext</code> </li><li>Github 仓库：<a href=\"https://github.com/pomber/git-history\" target=\"_blank\">pomber/git-history</a> </li></ul><p> </p><p><img alt=\"TB1aeVCKAvoK1RjSZPfXXXPKFXa-2250-1148.gif\" title=\"TB1aeVCKAvoK1RjSZPfXXXPKFXa-2250-1148.gif\" src=\"https://cdn.nlark.com/yuque/0/2019/gif/103147/1551853326318-c74e199c-a029-4754-a9f1-9367fe9a6810.gif#align=left&display=inline&height=381&name=TB1aeVCKAvoK1RjSZPfXXXPKFXa-2250-1148.gif&originHeight=1148&originWidth=2250&size=7317661&status=done&width=746\" style=\"max-width: 600px; width: 746px;\" /></p><p><span><br /></span></p><p><br /></p><h4 id=\"e87d21dc\">让网站变的透明直到消失的方案</h4><ul><li>加入 <span><a href=\"https://github.com/kleampa\" target=\"_blank\">kleampa</a></span><span>/</span><strong><a href=\"https://github.com/kleampa/not-paid\" target=\"_blank\">not-paid</a></strong> 后，如果设置的日期即将到来，那么网页会逐天变得越来越透明，直到完全消失</li></ul><p><br /></p><h4 id=\"a9b91797\">是时候打造一款属于自己的AI助手了</h4><ul><li>使用 <span><a href=\"https://github.com/leon-ai\" target=\"_blank\">leon-ai</a></span><span>/</span><strong><a href=\"https://github.com/leon-ai/leon\" target=\"_blank\">leon</a></strong> 即可打造属于自己的AI助手</li><li>安装过程中注意需要某些必要的包：如 <code>brew install pipenv</code> </li></ul><p><br /></p><h3 id=\"c11c7bd5\">工具推荐</h3><h4 id=\"19eedff8\">Animation in React</h4><ul><li>使用 React 写动画并不容易，但是借用 `@nearform/react-animation` 提供的组件和预制的 keyframes，就会让动画实现变得轻松起来</li><li><a href=\"https://www.nearform.com/blog/animation-in-react/\" target=\"_blank\">使用入门文章</a> </li><li><a href=\"https://www.npmjs.com/package/@nearform/react-animation\" target=\"_blank\">@nearform/react-animation in NPM</a> </li></ul><p><br /></p><h4 id=\"4f4d74a7\">Webpack 5 的新特性</h4><ul><li>介绍了 Webpack 5 即将带来的新特性 <a href=\"https://blog.logrocket.com/new-features-in-webpack-5-2559755adf5e\" target=\"_blank\">New Features in Webpack 5</a> </li></ul><ul data-lake-indent=\"1\"><li>通过持久缓存提高构建性能</li><li>代码拆分功能更加强大，更智能的分析模块大小</li><li>Name Chunk ID 不需要在使用注释定义，而是使用如下配置：</li></ul><pre data-lang=\"javascript\"><code>optimization: { chunkIds: 'named' }</code></pre><ul data-lake-indent=\"1\"><li><span>尽量遵循在内部作出改变的原则，而不会破坏使用方式</span></li></ul><p><br /></p><h3 id=\"c3fc5b0a\">热门文章</h3><h4 id=\"c5ae63a8\"><a href=\"https://zhuanlan.zhihu.com/p/55357377\" target=\"_blank\">给2019前端的5个建议</a> </h4><ul><li>不断学习 Redux/TypeScript 等等，造轮子覆盖全链路，程序员一直在路上</li></ul><p><br /></p><h4 id=\"2876b763\"><a href=\"https://juejin.im/post/5c6234f16fb9a049a81fcca5\" target=\"_blank\">近一万字的ES6语法知识点补充</a> </h4><ul><li>ES2019 都来了，快来补充学习起来</li></ul><p> </p><h4 id=\"189db772\"><a href=\"https://tech.meituan.com/2019/02/21/rd-team-resource-cost-optimization-practice.html\" target=\"_blank\">研发团队资源成本优化实践</a> </h4><ul><li>主要介绍了成本投入与产出的背景、实践过程中的几个阶段，可以对自己的团队管理进行了一个对照和复盘</li></ul><p><br /></p><h3 id=\"a567e185\">福利来了</h3><p><br /></p><p>春天来了，又到了金三银四的季节，我们是阿里巴巴「研发效能部-体验技术」团队，一个集前端、视觉、交互的综合性团队，致力于阿里集团全球数据中心和DevOps的数字化、自动化、智能化的体验设计和前端体系化建设，打造企业级数据可视化产品、探索未来前沿科技创新产品，这里有酒有故事，就等你来，简历请投：`thomasyang.ypf#alibaba-inc.com`、`longbo.ylb#alibaba-inc.com`</p>",
"body_lake": "<!doctype lake><p>【AIS-TXD前端技术月刊】- 本月热门前端技术快报，汇聚 Github Trending 流行 Repo 和热门文章，文末有福利</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fjpeg%2F103147%2F1551432272343-512be9f6-cff6-43f0-8151-7bed017ec646.jpeg%22%2C%22originWidth%22%3A1352%2C%22originHeight%22%3A808%2C%22name%22%3A%22hooks.jpg%22%2C%22size%22%3A24501%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A746%2C%22height%22%3A446%7D\"></card></p><h3 id=\"d41d8cd9\"><br /></h3><blockquote style=\"padding-left: 1em;\"><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p></blockquote><blockquote style=\"padding-left: 1em;\"><p>本期小编：<a href=\"https://github.com/damujiangr\" target=\"_blank\">damujiangr (墨止) </a> </p></blockquote><p><br /></p><h3 id=\"81377773\">新闻快报</h3><h4 id=\"6ad7f24d\">React v16.8 发布:<a href=\"https://reactjs.org/blog/2019/02/06/react-v16.8.0.html\" target=\"_blank\"> The One With Hooks</a></h4><ul><li><a href=\"https://reactjs.org/docs/hooks-intro.html\" target=\"_blank\">Hooks 上手介绍</a> </li><li>额外：React 终于开始做国际化了，以后国内的新手们就能看到中文文档的 React 了，目前正在招募 Contributors，有兴趣的可以参看 <a href=\"https://reactjs.org/blog/2019/02/23/is-react-translated-yet.html\" target=\"_blank\">Is React Translated Yet? ¡Sí! Sim! はい</a> </li></ul><h4 id=\"d41d8cd9-1\"><br /></h4><h4 id=\"89d33bf1\">Vue v2.6 发布: 代号：Macross</h4><ul><li>准备与 v3.0 版本接轨了</li><li>Slot 引入了新的模版语法， v-slot (默认插槽) v-slot:name (具名插槽)</li><li>异步错误处理、编译警告位置信息等等</li><li><a href=\"https://zhuanlan.zhihu.com/p/56260917\" target=\"_blank\">专栏链接</a> </li></ul><p><br /></p><h4 id=\"2e5ce74d\">Flutter 1.2 发布</h4><ul><li>Flutter 1.2 是自第一个测试版本，历时一年后，发布的第一次 feature update</li><li>除了提升了核心框架的稳定性、性能和质量，完善现在的widget，重要的是为开发者提供了基于 Web 的开发工具，以后还可能会直接构建到VS Code中</li></ul><ul data-lake-indent=\"1\"><li>widget inspector 支持树状层级结构的可视化</li><li>timeline view 支持帧级别的诊断，发现渲染和计算的问题</li><li>full source-level debugger 支持设置断点、单步执行，查看调用堆栈</li><li>logging view 能够显示 app 中的日志、网络、框架和垃圾回收事件</li></ul><ul><li><a href=\"https://developers.googleblog.com/2019/02/launching-flutter-12-at-mobile-world.html\" target=\"_blank\">官方介绍链接</a> </li></ul><p><br /></p><h4 id=\"76c13a1a\">支付宝小程序向个人开发者开放公测</h4><ul><li>小程序这场围绕流量、场景、创意等诸多概念的新风口，每一家公司都想要分得一杯羹，越来越多的小程序、轻应用涌现出来，支付宝小程序开发公测，说明技术架构上已趋稳定</li><li><a href=\"https://docs.alipay.com/mini/introduce/register\" target=\"_blank\">支付包小程序入驻链接</a> </li><li>这里还有一篇技术稿，为支付宝小程序首席架构师白招拒，解读支付宝小程序的技术架构和开发特点，<a href=\"https://mp.weixin.qq.com/s/PX7b_qV6tYKnN3ecoz9Ehw\" target=\"_blank\">《独家！支付宝首次披露其小程序技术架构》</a> </li></ul><p><br /></p><h4 id=\"c9ec687a\">阿里云 ARMS 推出小程序监控</h4><ul><li>基础服务的角色来了，可以用于及时发现卡顿、缓慢和一些错误，让小程序不再裸奔</li><li>目前支持情况：钉钉E应用、支付宝小程序、微信小程序、其他符合标准的小程序</li><li><a href=\"https://help.aliyun.com/document_detail/106086.html\" target=\"_blank\">前端监控接入概述</a> </li></ul><p><br /></p><h4 id=\"4bd515bc\">Next.js 8 新增支持 Serverless</h4><ul><li>支持 Serverless 可以极大的提高应用开发的可靠性和可伸缩性，启用也很简单，查看<a href=\"https://nextjs.org/blog/next-8/\" target=\"_blank\">官方详细介绍</a> </li></ul><card type=\"block\" name=\"codeblock\" value=\"data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22%2F%2F%20next.config.js%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20target%3A%20%5C%22serverless%5C%22%2C%5Cn%7D%3B%22%7D\"></card><p><br /></p><h4 id=\"94fcfe27\"><a href=\"https://vue.ant.design/\" target=\"_blank\">Ant Design of Vue</a></h4><ul><li>近日有开发者基于 Ant Design 的设计语言，开发了一套基于 Vue 组件库，喜欢 antd 风 的 Vue 开发者有福利了</li><li>使用体验方面，跟 Ant Design 官网的更新要滞后一些，感官上还是很不错的</li></ul><p><br /></p><h4 id=\"46189f83\"><a href=\"https://medium.com/palantir/tslint-in-2019-1a144c2317a9\" target=\"_blank\">TSLint in 2019</a> </h4><ul><li>随着TypeScript生态的不断壮大，TSLint也在不断演进，准备提供更多的能力，更加拥抱社区共同发展，和对 ESLint 的兼容，让开发者可以无缝切换</li></ul><p><br /></p><h4 id=\"364de9da\">npm 推出企业版 <a href=\"https://www.npmjs.com/products/enterprise\" target=\"_blank\">npm Enterprise</a></h4><ul><li>主打安全性，提供额外的控制权限，还可以定制CI/CD系统集成流程，可以理解为企业私服，比如阿里内部的tnpm与开放的镜像的cnpm</li></ul><p><br /></p><h3 id=\"365acd42\">Github Trending</h3><h4 id=\"4a8be53d\">好用的代码片段查看工具 推荐者：<a href=\"https://github.com/x-cold\" target=\"_blank\">x-cold</a> </h4><ul><li>将某一个文件的仓库地址的 <code>github.com</code> 替换为 <code>github.githistory.xyz</code> ，回车即可访问到代码变更的记录。也可以安装浏览器插件 <a href=\"https://chrome.google.com/webstore/detail/github-history-browser-ex/laghnmifffncfonaoffcndocllegejnf\" target=\"_blank\">Chrome</a><span class=\"lake-fontsize-12\" style=\"color: #24292E;\"> 或 </span><a href=\"https://addons.mozilla.org/firefox/addon/github-history/\" target=\"_blank\">Firefox</a>，在某个文件的网页上就能看到一个 `<span style=\"color: #24292E;\">Open in Git History</span><span class=\"lake-fontsize-11\" style=\"color: #24292E;\">` </span>的按钮，点击即可。</li></ul><ul data-lake-indent=\"1\"><li><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F103147%2F1551432272343-4a97aefb-0df2-48c2-8bdd-f0555fbf7479.png%22%2C%22originWidth%22%3A420%2C%22originHeight%22%3A48%2C%22name%22%3A%2220190228194645.png%22%2C%22size%22%3A9210%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A420%2C%22height%22%3A48%7D\"></card></li></ul><ul><li>对于本地仓库，可以使用命令访问 <code>npx git-file-history path/to/file.ext</code> </li><li>Github 仓库：<a href=\"https://github.com/pomber/git-history\" target=\"_blank\">pomber/git-history</a> </li></ul><p> </p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F103147%2F1551853326318-c74e199c-a029-4754-a9f1-9367fe9a6810.gif%22%2C%22originWidth%22%3A2250%2C%22originHeight%22%3A1148%2C%22name%22%3A%22TB1aeVCKAvoK1RjSZPfXXXPKFXa-2250-1148.gif%22%2C%22size%22%3A7317661%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A746%2C%22height%22%3A381%7D\"></card><cursor /></p><p><span><br /></span></p><p><br /></p><h4 id=\"e87d21dc\">让网站变的透明直到消失的方案</h4><ul><li>加入 <span><a href=\"https://github.com/kleampa\" target=\"_blank\">kleampa</a></span><span>/</span><strong><a href=\"https://github.com/kleampa/not-paid\" target=\"_blank\">not-paid</a></strong> 后，如果设置的日期即将到来，那么网页会逐天变得越来越透明，直到完全消失</li></ul><p><br /></p><h4 id=\"a9b91797\">是时候打造一款属于自己的AI助手了</h4><ul><li>使用 <span><a href=\"https://github.com/leon-ai\" target=\"_blank\">leon-ai</a></span><span>/</span><strong><a href=\"https://github.com/leon-ai/leon\" target=\"_blank\">leon</a></strong> 即可打造属于自己的AI助手</li><li>安装过程中注意需要某些必要的包：如 <code>brew install pipenv</code> </li></ul><p><br /></p><h3 id=\"c11c7bd5\">工具推荐</h3><h4 id=\"19eedff8\">Animation in React</h4><ul><li>使用 React 写动画并不容易，但是借用 `@nearform/react-animation` 提供的组件和预制的 keyframes，就会让动画实现变得轻松起来</li><li><a href=\"https://www.nearform.com/blog/animation-in-react/\" target=\"_blank\">使用入门文章</a> </li><li><a href=\"https://www.npmjs.com/package/@nearform/react-animation\" target=\"_blank\">@nearform/react-animation in NPM</a> </li></ul><p><br /></p><h4 id=\"4f4d74a7\">Webpack 5 的新特性</h4><ul><li>介绍了 Webpack 5 即将带来的新特性 <a href=\"https://blog.logrocket.com/new-features-in-webpack-5-2559755adf5e\" target=\"_blank\">New Features in Webpack 5</a> </li></ul><ul data-lake-indent=\"1\"><li>通过持久缓存提高构建性能</li><li>代码拆分功能更加强大，更智能的分析模块大小</li><li>Name Chunk ID 不需要在使用注释定义，而是使用如下配置：</li></ul><card type=\"block\" name=\"codeblock\" value=\"data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22optimization%3A%20%7B%20chunkIds%3A%20'named'%20%7D%22%7D\"></card><ul data-lake-indent=\"1\"><li><span>尽量遵循在内部作出改变的原则，而不会破坏使用方式</span></li></ul><p><br /></p><h3 id=\"c3fc5b0a\">热门文章</h3><h4 id=\"c5ae63a8\"><a href=\"https://zhuanlan.zhihu.com/p/55357377\" target=\"_blank\">给2019前端的5个建议</a> </h4><ul><li>不断学习 Redux/TypeScript 等等，造轮子覆盖全链路，程序员一直在路上</li></ul><p><br /></p><h4 id=\"2876b763\"><a href=\"https://juejin.im/post/5c6234f16fb9a049a81fcca5\" target=\"_blank\">近一万字的ES6语法知识点补充</a> </h4><ul><li>ES2019 都来了，快来补充学习起来</li></ul><p> </p><h4 id=\"189db772\"><a href=\"https://tech.meituan.com/2019/02/21/rd-team-resource-cost-optimization-practice.html\" target=\"_blank\">研发团队资源成本优化实践</a> </h4><ul><li>主要介绍了成本投入与产出的背景、实践过程中的几个阶段，可以对自己的团队管理进行了一个对照和复盘</li></ul><p><br /></p><h3 id=\"a567e185\">福利来了</h3><p><br /></p><p>春天来了，又到了金三银四的季节，我们是阿里巴巴「研发效能部-体验技术」团队，一个集前端、视觉、交互的综合性团队，致力于阿里集团全球数据中心和DevOps的数字化、自动化、智能化的体验设计和前端体系化建设，打造企业级数据可视化产品、探索未来前沿科技创新产品，这里有酒有故事，就等你来，简历请投：`thomasyang.ypf#alibaba-inc.com`、`longbo.ylb#alibaba-inc.com`</p>",
"public": 1,
"status": 1,
"likes_count": 0,
"comments_count": 0,
"content_updated_at": "2019-03-06T06:22:13.000Z",
"deleted_at": null,
"created_at": "2019-03-01T08:53:45.000Z",
"updated_at": "2019-05-28T13:46:54.000Z",
"published_at": "2019-03-06T06:22:13.000Z",
"first_published_at": "2019-03-01T08:54:37.000Z",
"word_count": 1475,
"cover": null,
"description": "【AIS-TXD前端技术月刊】- 本月热门前端技术快报，汇聚 Github Trending 流行 Repo 和热门文章，文末有福利欢迎 订阅 & 投稿本期小编：damujiangr (墨止) 新闻快报React v16.8 发布: The One With HooksHooks 上...",
"custom_description": null,
"_serializer": "v2.doc_detail"
},
{
"id": 1226368,
"slug": "201901",
"title": "201901",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 10,
"likes_count": 0,
"watches_count": 29,
"content_updated_at": "2019-07-04T03:17:27.405Z",
"updated_at": "2019-07-04T03:17:27.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 103147,
"creator": {
"id": 103147,
"type": "User",
"login": "yinzhi",
"name": "尹挚 (x-cold)",
"description": "https://github.com/x-cold",
"avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 16,
"public_books_count": 9,
"followers_count": 54,
"following_count": 20,
"created_at": "2018-04-23T00:50:24.000Z",
"updated_at": "2019-06-25T09:10:12.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "重磅消息：GITHUB 宣布私有仓库免费；Jest / Yarn 等大型前端项目纷纷准备迁移到 TypeScript；ES2019 即将到来，你准备好了吗？\n\n> 订阅 / 投稿：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly)\n\n> 本期小编：[x-cold (尹挚)](https://github.com/x-cold)\n\n\n<a name=\"81377773\"></a>\n### 新闻快报\n\n<a name=\"7b918a9a\"></a>\n#### 重磅消息：Github 宣布[私有仓库免费](https://github.com/pricing)，同期还上线了[星标话题](https://github.com/topics) (topics) 的功能\n\n2019 年伊始，GitHub 正式宣布开放无限制创建私有存储库，并开始提供统一的企业版 GitHub 服务，微软正在开始加速 toB 企业服务的布局。开发者们一片叫好声，可谓年度最佳的程序员福利了。\n\n\n\n<a name=\"a06eb1b6\"></a>\n#### 软件技术 B2B 公司 [Idera.inc](https://www.idera.com/) 收购 Travis CI\n\nTravis CI 将结合 Idera 公司其本身的数据库 / 开发者 / 测试等工具发挥更大的商业优势。不过使用免费版的社区同学也不用紧张，**Travis CI 依然保证对开源软件免费的策略，并且其开源证书不会修改 (MIT)**，更多可以参考详细的[官方公告](https://blog.travis-ci.com/2019-01-23-travis-ci-joins-idera-inc)。\n\n> 需要额外提醒的是, Travis-CI 对 Github 私有仓库依然没有提供免费的服务。\n\n\n<a name=\"7372c49b\"></a>\n#### ES2019 即将到来，[新特性](https://github.com/tc39/proposals/blob/master/finished-proposals.md)快速一览\n\n\n\n<a name=\"fef6de94\"></a>\n#### 越来越多的项目开始迁移到 TypeScript\n\nMemSQL Studio 的 3W+ 行前端源代码从 Flow 迁移到 TypeScript，主要目的是加强类型的控制，避免动态/弱类型造成运行时的各种问题。官方总结了一篇[文章](https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/)，介绍了他们为什么要迁移到 TypeScript，以及迁移过程的记录。\n\nFackbook 开源的测试框架 [Jest](https://github.com/facebook/jest) 通过几番的讨论终于从 JavaScript 迁移到使用 TypeScript 构建整个项目了，详细的过程可以查看[关联的 Pull Request](https://github.com/facebook/jest/pull/7554)。\n\n1 月 25 日，Yarn 官方团队在 GitHub issue 中宣布将对 Yarn 进行[重大更改](https://github.com/yarnpkg/yarn)，主要包括：将代码库从 Flow 移植到 TypeScript，不再支持 Node 4 和 Node 6，并为 Yarn 新增了一些功能等，这个更改项目代号为 Berry，目的是增强 Yarn 优势，弥补弱势。(本条消息来自 [InfoQ](https://www.infoq.cn/article/eaRb-EzTimF4kfy4dsg7))\n\n<a name=\"3f696f4f\"></a>\n#### Midway v1.0 社区\n\n[Midway](https://github.com/midwayjs/midway) 是一款基于 Egg 和 TypeScript 的 Web 开发框架，由来自淘宝的 MidwayJS 团队开发。用户可以使用丰富的装饰器快速开发，并且引入了 IoC 的概念，统一管理依赖和统一初始化，是一款面向未来的全栈开发方案。\n\n<a name=\"6270271d\"></a>\n#### JavaScript 成为 2018 年最受欢迎的编程语言\n\n随着前端领域的迅猛发展，JavaScript 语言已经延伸到更丰富的使用场景中，HackerRank 在社区发起了 2018 年度的开发者调查，其中就包含了编程语言和框架。[调查结果](https://mp.weixin.qq.com/s/buLIpFVHkBb9tYReQyBZlA)显示：JavaScript 在 2018 年度荣获最受欢迎的编程语言。\n\n<a name=\"1fac8060\"></a>\n#### 简要讯息\n\n- npm package [可视化视角](https://anvaka.github.io/pm/#/galaxy/npm?cx=-1345&cy=-7006&cz=-6553&lx=0.6217&ly=-0.6459&lz=0.3098&lw=0.3168&ml=150&s=1.75&l=1&v=2018-11-02T00-00-00Z)，你能找到你发过的 npm 包吗？\n- 「墨者修齐」2018 年可视化[年度总结](https://www.yuque.com/mo-college/weekly/ny35wg)，介绍了各种场景下的可视化产品。\n- [SSE Conf](https://seeconf.antfin.com/) 2019 顺利举行，会议相关资料包[下载](https://www.yuque.com/seeconf/content/kbnzac)\n- 第十三届 [D2 前端技术论坛](http://d2forum.alibaba-inc.com/)在杭州举行，精彩回顾 [大合集](https://www.yuque.com/d2forum/content/d213)\n\n<a name=\"365acd42\"></a>\n### Github Trending\n\n> 洞察 Github 近期 Hot Fresh Repository\n\n\n- [flutter-go](https://github.com/alibaba/flutter-go)\n\n[flutter](https://github.com/flutter/flutter) 开发者帮助 APP，包含 flutter 常用 140+ 组件的 demo 演示与中文文档，帮助开发者快速上手 Flutter 内部测试中，1.0 正式版将于 2月 20日 发布。\n\n- [trilium](https://github.com/zadam/trilium)\n\nTrilium Notes 是一款知识库构建工具，支持无限层级扩展，文档可以挂载到多个节点上，采用所见即所得的编辑方式。体验上个人感觉有点像桌面版本的语雀。\n\n- [CSS-Inspiration](https://github.com/chokcoco/CSS-Inspiration)\n\n国服第一切图仔 [chokcoco](https://github.com/chokcoco) 整理的各种 CSS 技巧，帮助学习 CSS 和寻找灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。\n\n- [nuclear](https://github.com/nukeop/nuclear)\n\n一款高颜值的流媒体资源音乐🎵播放器，支持网络上所有免费的流媒体资源。\n\n- [vscode-browser-preview](https://github.com/auchenberg/vscode-browser-preview)\n\n一款“带给我惊喜”的 vscode 插件，提供给给编辑器实时预览页面的能力，可以将 vscode 打造成更强大的集成开发环境 (IDE) 了。\n\n\n\n<a name=\"236b7ba5\"></a>\n### 精品学习\n\n<a name=\"712f2305\"></a>\n#### TypScript 学习指导\n\nTypeScript 最近可谓如火如荼，它是 JavaScript 的超集，其最大的特点就是支持了类型系统。其火爆的中最核心的推动力无非是前端工程规模的增长，覆盖端 (服务端 node / deno、移动端等)的扩展，学习和使用 TypeScript 能够让我们更轻松地应付一些复杂的开发场景。\n\n- 理解类型系统，推荐初级读物 [《A primer of type system》](https://www.cs.uaf.edu/users/chappell/public_html/class/2018_spr/cs331/docs/types_primer.html)\n- 入门 TypeScript 语言，参阅官网文档[英文原版](http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) /[ 中文译版](https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html)\n- 实践参考项目 (starter)\n - [TypeScript-Node-Starter](https://github.com/Microsoft/TypeScript-Node-Starter)\n - [TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter)\n - [TypeScript-Vue-Starter](https://github.com/Microsoft/TypeScript-Vue-Starter)\n - 大家猜猜为啥没有列出 [Angular](https://angular.io/) ???\n\n<a name=\"d29a1623\"></a>\n#### 「墨者修齐」数据可视化[周刊](https://www.yuque.com/mo-college/weekly)\n\n精选文章推荐，可视化入门与进阶权威网站、论文、工具介绍，工程与设计实践分享，2019 年起每周一更新。\n\n<a name=\"423a0558\"></a>\n#### Development 技术播客[列表](https://github.com/rShetty/awesome-podcasts#web-development)\n\n涵盖了开发相关的方方面面，包括编程语言、AI、Devops、Web 开发等丰富的课程体系。\n\n<a name=\"Flutter-learning\"></a>\n#### Flutter-learning\n\n[Flutter-learning](https://github.com/AweiLoveAndroid/Flutter-learning) 整理了 Flutter 相关学习资料，包括 Flutter 安装和配置，Flutter 开发遇到的难题，Flutter 示例代码和模板，Flutter 项目实战，Dart 语言学习示例代码。\n\n<a name=\"c11c7bd5\"></a>\n### 工具推荐\n\n- [RunJS](https://projects.lukehaas.me/runjs/)\n\n一款可以随手验证你的想法的桌面应用程序，输入 JS 代码片段既可预览执行结果，支持最新的 ES 特性。(PS: 也可以用来当做代码片段备忘录)\n\n- [image-map](https://www.image-map.net/)\n\n在线生成 image maps 的可视化工具，如果你想要绘制简单的局部可交互地图、编写邮件时希望添加链接到图片指定区块上，不妨通过 image maps 这项古老悠久的技术来实现，image-map 是一款在线进行可视化编辑，生成对应的 map / area 代码的工具。\n\n- [mjml](https://github.com/mjmlio/mjml)\n\nmjml 是一种用于创建响应式的邮件的标记语言，通过编写语义化的标签，会自动帮助你转换成标准的 html 的代码，并且使用了 table 进行布局，非常适合编写富文本邮件。如果有这方面的需求，不妨进一步试试桌面版的 [mjml-app](http://mjmlio.github.io/mjml-app/) 吧。\n\n- [terminus](https://github.com/Eugeny/terminus)\n\n支持 windows，linux，macos 三端的命令行工具，集成的SSH客户端和连接管理器，可定制化程度非常高。\n\n<a name=\"0d98c747\"></a>\n### 其他\n\n最近在 Reddit 看到的前端 vs 后端的一些[对比图](https://github.com/txd-team/monthly/issues/24)，“很是真实”，献上给大家。\n\n各位客官猪年大吉呀🌺🌺🌺，祝福新一年里猪事顺利！！！ 另外 2020 年毕业的同学别忘了准备阿里巴巴春季实习生招聘哈，需要内推的同学也可以提前发送附件简历到我的邮箱。\n\n<a name=\"2e307a62\"></a>\n### 附录\n\n- [《](https://github.com/shengxinjing/programmer-job-blacklist)[程序员找工作黑名单](https://github.com/shengxinjing/programmer-job-blacklist)[》](https://github.com/shengxinjing/programmer-job-blacklist)\n",
"body_draft": "",
"body_html": "<p>重磅消息：GITHUB 宣布私有仓库免费；Jest / Yarn 等大型前端项目纷纷准备迁移到 TypeScript；ES2019 即将到来，你准备好了吗？</p><p><br /></p><blockquote><p>订阅 / 投稿：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p>本期小编：<a href=\"https://github.com/x-cold\" target=\"_blank\">x-cold (尹挚)</a></p></blockquote><p><br /></p><h3 id=\"81377773\">新闻快报</h3><p><br /></p><h4 id=\"7b918a9a\">重磅消息：Github 宣布<a href=\"https://github.com/pricing\" target=\"_blank\">私有仓库免费</a>，同期还上线了<a href=\"https://github.com/topics\" target=\"_blank\">星标话题</a> (topics) 的功能</h4><p><br /></p><p>2019 年伊始，GitHub 正式宣布开放无限制创建私有存储库，并开始提供统一的企业版 GitHub 服务，微软正在开始加速 toB 企业服务的布局。开发者们一片叫好声，可谓年度最佳的程序员福利了。</p><p><br /></p><p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/103147/1548992494868-94cd1a37-2454-40cd-90bb-7d90c3ad001a.png#align=left&display=inline&height=331&linkTarget=_blank&originHeight=1008&originWidth=1312&width=431#align=left&display=inline&height=573&originHeight=1008&originWidth=1312&width=746\" style=\"max-width: 600px; width: 746px;\" /></p><p><br /></p><h4 id=\"a06eb1b6\">软件技术 B2B 公司 <a href=\"https://www.idera.com/\" target=\"_blank\">Idera.inc</a> 收购 Travis CI</h4><p><br /></p><p>Travis CI 将结合 Idera 公司其本身的数据库 / 开发者 / 测试等工具发挥更大的商业优势。不过使用免费版的社区同学也不用紧张，<strong>Travis CI 依然保证对开源软件免费的策略，并且其开源证书不会修改 (MIT)</strong>，更多可以参考详细的<a href=\"https://blog.travis-ci.com/2019-01-23-travis-ci-joins-idera-inc\" target=\"_blank\">官方公告</a>。</p><p><br /></p><blockquote><p>需要额外提醒的是, Travis-CI 对 Github 私有仓库依然没有提供免费的服务。</p></blockquote><p><br /></p><h4 id=\"7372c49b\">ES2019 即将到来，<a href=\"https://github.com/tc39/proposals/blob/master/finished-proposals.md\" target=\"_blank\">新特性</a>快速一览</h4><p><br /></p><p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/103147/1548992506585-4f3bff27-7235-455e-9808-93e2aad54b1a.png#align=left&display=inline&height=752&linkTarget=_blank&name=image.png&originHeight=2339&originWidth=1080&size=747066&width=347#align=left&display=inline&height=1616&originHeight=2339&originWidth=1080&width=746\" style=\"max-width: 600px; width: 746px;\" /></p><p><br /></p><h4 id=\"fef6de94\">越来越多的项目开始迁移到 TypeScript</h4><p><br /></p><p>MemSQL Studio 的 3W+ 行前端源代码从 Flow 迁移到 TypeScript，主要目的是加强类型的控制，避免动态/弱类型造成运行时的各种问题。官方总结了一篇<a href=\"https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/\" target=\"_blank\">文章</a>，介绍了他们为什么要迁移到 TypeScript，以及迁移过程的记录。</p><p><br /></p><p>Fackbook 开源的测试框架 <a href=\"https://github.com/facebook/jest\" target=\"_blank\">Jest</a> 通过几番的讨论终于从 JavaScript 迁移到使用 TypeScript 构建整个项目了，详细的过程可以查看<a href=\"https://github.com/facebook/jest/pull/7554\" target=\"_blank\">关联的 Pull Request</a>。</p><p><br /></p><p>1 月 25 日，Yarn 官方团队在 GitHub issue 中宣布将对 Yarn 进行<a href=\"https://github.com/yarnpkg/yarn\" target=\"_blank\">重大更改</a>，主要包括：将代码库从 Flow 移植到 TypeScript，不再支持 Node 4 和 Node 6，并为 Yarn 新增了一些功能等，这个更改项目代号为 Berry，目的是增强 Yarn 优势，弥补弱势。(本条消息来自 <a href=\"https://www.infoq.cn/article/eaRb-EzTimF4kfy4dsg7\" target=\"_blank\">InfoQ</a>)</p><p><br /></p><h4 id=\"3f696f4f\">Midway v1.0 社区</h4><p><br /></p><p><a href=\"https://github.com/midwayjs/midway\" target=\"_blank\">Midway</a> 是一款基于 Egg 和 TypeScript 的 Web 开发框架，由来自淘宝的 MidwayJS 团队开发。用户可以使用丰富的装饰器快速开发，并且引入了 IoC 的概念，统一管理依赖和统一初始化，是一款面向未来的全栈开发方案。</p><p><br /></p><h4 id=\"6270271d\">JavaScript 成为 2018 年最受欢迎的编程语言</h4><p><br /></p><p>随着前端领域的迅猛发展，JavaScript 语言已经延伸到更丰富的使用场景中，HackerRank 在社区发起了 2018 年度的开发者调查，其中就包含了编程语言和框架。<a href=\"https://mp.weixin.qq.com/s/buLIpFVHkBb9tYReQyBZlA\" target=\"_blank\">调查结果</a>显示：JavaScript 在 2018 年度荣获最受欢迎的编程语言。</p><p><br /></p><h4 id=\"1fac8060\">简要讯息</h4><p><br /></p><ul><li>npm package <a href=\"https://anvaka.github.io/pm/#/galaxy/npm?cx=-1345&cy=-7006&cz=-6553&lx=0.6217&ly=-0.6459&lz=0.3098&lw=0.3168&ml=150&s=1.75&l=1&v=2018-11-02T00-00-00Z\" target=\"_blank\">可视化视角</a>，你能找到你发过的 npm 包吗？</li></ul><ul><li>「墨者修齐」2018 年可视化<a href=\"https://www.yuque.com/mo-college/weekly/ny35wg\" target=\"_blank\">年度总结</a>，介绍了各种场景下的可视化产品。</li></ul><ul><li><a href=\"https://seeconf.antfin.com/\" target=\"_blank\">SSE Conf</a> 2019 顺利举行，会议相关资料包<a href=\"https://www.yuque.com/seeconf/content/kbnzac\" target=\"_blank\">下载</a></li></ul><ul><li>第十三届 <a href=\"http://d2forum.alibaba-inc.com/\" target=\"_blank\">D2 前端技术论坛</a>在杭州举行，精彩回顾 <a href=\"https://www.yuque.com/d2forum/content/d213\" target=\"_blank\">大合集</a></li></ul><p><br /></p><h3 id=\"365acd42\">Github Trending</h3><p><br /></p><blockquote><p>洞察 Github 近期 Hot Fresh Repository</p></blockquote><p><br /></p><ul><li><a href=\"https://github.com/alibaba/flutter-go\" target=\"_blank\">flutter-go</a></li></ul><p><br /></p><p><a href=\"https://github.com/flutter/flutter\" target=\"_blank\">flutter</a> 开发者帮助 APP，包含 flutter 常用 140+ 组件的 demo 演示与中文文档，帮助开发者快速上手 Flutter 内部测试中，1.0 正式版将于 2月 20日 发布。</p><p><br /></p><ul><li><a href=\"https://github.com/zadam/trilium\" target=\"_blank\">trilium</a></li></ul><p><br /></p><p>Trilium Notes 是一款知识库构建工具，支持无限层级扩展，文档可以挂载到多个节点上，采用所见即所得的编辑方式。体验上个人感觉有点像桌面版本的语雀。</p><p><br /></p><ul><li><a href=\"https://github.com/chokcoco/CSS-Inspiration\" target=\"_blank\">CSS-Inspiration</a></li></ul><p><br /></p><p>国服第一切图仔 <a href=\"https://github.com/chokcoco\" target=\"_blank\">chokcoco</a> 整理的各种 CSS 技巧，帮助学习 CSS 和寻找灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。</p><p><br /></p><ul><li><a href=\"https://github.com/nukeop/nuclear\" target=\"_blank\">nuclear</a></li></ul><p><br /></p><p>一款高颜值的流媒体资源音乐🎵播放器，支持网络上所有免费的流媒体资源。</p><p><br /></p><ul><li><a href=\"https://github.com/auchenberg/vscode-browser-preview\" target=\"_blank\">vscode-browser-preview</a></li></ul><p><br /></p><p>一款“带给我惊喜”的 vscode 插件，提供给给编辑器实时预览页面的能力，可以将 vscode 打造成更强大的集成开发环境 (IDE) 了。</p><p><br /></p><p><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/103147/1548992552938-9984fbf1-2e70-4da4-aee2-12b1a68d05d7.gif#align=left&display=inline&height=452&linkTarget=_blank&name=1548992494875-b282cb53-c06d-40f1-ae4c-d142837e5377.gif&originHeight=858&originWidth=1416&size=2200095&width=746#align=left&display=inline&height=452&originHeight=858&originWidth=1416&width=746\" style=\"max-width: 600px; width: 746px;\" /></p><p><br /></p><h3 id=\"236b7ba5\">精品学习</h3><p><br /></p><h4 id=\"712f2305\">TypScript 学习指导</h4><p><br /></p><p>TypeScript 最近可谓如火如荼，它是 JavaScript 的超集，其最大的特点就是支持了类型系统。其火爆的中最核心的推动力无非是前端工程规模的增长，覆盖端 (服务端 node / deno、移动端等)的扩展，学习和使用 TypeScript 能够让我们更轻松地应付一些复杂的开发场景。</p><p><br /></p><ul><li>理解类型系统，推荐初级读物 <a href=\"https://www.cs.uaf.edu/users/chappell/public_html/class/2018_spr/cs331/docs/types_primer.html\" target=\"_blank\">《A primer of type system》</a></li></ul><ul><li>入门 TypeScript 语言，参阅官网文档<a href=\"http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html\" target=\"_blank\">英文原版</a> /<a href=\"https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html\" target=\"_blank\"> 中文译版</a></li></ul><ul><li>实践参考项目 (starter)</li></ul><ul data-lake-indent=\"1\"><li><a href=\"https://github.com/Microsoft/TypeScript-Node-Starter\" target=\"_blank\">TypeScript-Node-Starter</a></li></ul><ul data-lake-indent=\"1\"><li><a href=\"https://github.com/Microsoft/TypeScript-React-Starter\" target=\"_blank\">TypeScript-React-Starter</a></li></ul><ul data-lake-indent=\"1\"><li><a href=\"https://github.com/Microsoft/TypeScript-Vue-Starter\" target=\"_blank\">TypeScript-Vue-Starter</a></li></ul><ul data-lake-indent=\"1\"><li>大家猜猜为啥没有列出 <a href=\"https://angular.io/\" target=\"_blank\">Angular</a> ???</li></ul><p><br /></p><h4 id=\"d29a1623\">「墨者修齐」数据可视化<a href=\"https://www.yuque.com/mo-college/weekly\" target=\"_blank\">周刊</a></h4><p><br /></p><p>精选文章推荐，可视化入门与进阶权威网站、论文、工具介绍，工程与设计实践分享，2019 年起每周一更新。</p><p><br /></p><h4 id=\"423a0558\">Development 技术播客<a href=\"https://github.com/rShetty/awesome-podcasts#web-development\" target=\"_blank\">列表</a></h4><p><br /></p><p>涵盖了开发相关的方方面面，包括编程语言、AI、Devops、Web 开发等丰富的课程体系。</p><p><br /></p><h4 id=\"Flutter-learning\">Flutter-learning</h4><p><br /></p><p><a href=\"https://github.com/AweiLoveAndroid/Flutter-learning\" target=\"_blank\">Flutter-learning</a> 整理了 Flutter 相关学习资料，包括 Flutter 安装和配置，Flutter 开发遇到的难题，Flutter 示例代码和模板，Flutter 项目实战，Dart 语言学习示例代码。</p><p><br /></p><h3 id=\"c11c7bd5\">工具推荐</h3><p><br /></p><ul><li><a href=\"https://projects.lukehaas.me/runjs/\" target=\"_blank\">RunJS</a></li></ul><p><br /></p><p>一款可以随手验证你的想法的桌面应用程序，输入 JS 代码片段既可预览执行结果，支持最新的 ES 特性。(PS: 也可以用来当做代码片段备忘录)</p><p><br /></p><ul><li><a href=\"https://www.image-map.net/\" target=\"_blank\">image-map</a></li></ul><p><br /></p><p>在线生成 image maps 的可视化工具，如果你想要绘制简单的局部可交互地图、编写邮件时希望添加链接到图片指定区块上，不妨通过 image maps 这项古老悠久的技术来实现，image-map 是一款在线进行可视化编辑，生成对应的 map / area 代码的工具。</p><p><br /></p><ul><li><a href=\"https://github.com/mjmlio/mjml\" target=\"_blank\">mjml</a></li></ul><p><br /></p><p>mjml 是一种用于创建响应式的邮件的标记语言，通过编写语义化的标签，会自动帮助你转换成标准的 html 的代码，并且使用了 table 进行布局，非常适合编写富文本邮件。如果有这方面的需求，不妨进一步试试桌面版的 <a href=\"http://mjmlio.github.io/mjml-app/\" target=\"_blank\">mjml-app</a> 吧。</p><p><br /></p><ul><li><a href=\"https://github.com/Eugeny/terminus\" target=\"_blank\">terminus</a></li></ul><p><br /></p><p>支持 windows，linux，macos 三端的命令行工具，集成的SSH客户端和连接管理器，可定制化程度非常高。</p><p><br /></p><h3 id=\"0d98c747\">其他</h3><p><br /></p><p>最近在 Reddit 看到的前端 vs 后端的一些<a href=\"https://github.com/txd-team/monthly/issues/24\" target=\"_blank\">对比图</a>，“很是真实”，献上给大家。</p><p><br /></p><p>各位客官猪年大吉呀🌺🌺🌺，祝福新一年里猪事顺利！！！ 另外 2020 年毕业的同学别忘了准备阿里巴巴春季实习生招聘哈，需要内推的同学也可以提前发送附件简历到我的邮箱。</p><p><br /></p><h3 id=\"2e307a62\">附录</h3><p><br /></p><ul><li><a href=\"https://github.com/shengxinjing/programmer-job-blacklist\" target=\"_blank\">《</a><a href=\"https://github.com/shengxinjing/programmer-job-blacklist\" target=\"_blank\">程序员找工作黑名单</a><a href=\"https://github.com/shengxinjing/programmer-job-blacklist\" target=\"_blank\">》</a></li></ul>",
"body_lake": "<!doctype lake><p>重磅消息：GITHUB 宣布私有仓库免费；Jest / Yarn 等大型前端项目纷纷准备迁移到 TypeScript；ES2019 即将到来，你准备好了吗？</p><p><br /></p><blockquote><p>订阅 / 投稿：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p>本期小编：<a href=\"https://github.com/x-cold\" target=\"_blank\">x-cold (尹挚)</a></p></blockquote><p><br /></p><h3 id=\"81377773\">新闻快报</h3><p><br /></p><h4 id=\"7b918a9a\">重磅消息：Github 宣布<a href=\"https://github.com/pricing\" target=\"_blank\">私有仓库免费</a>，同期还上线了<a href=\"https://github.com/topics\" target=\"_blank\">星标话题</a> (topics) 的功能</h4><p><br /></p><p>2019 年伊始，GitHub 正式宣布开放无限制创建私有存储库，并开始提供统一的企业版 GitHub 服务，微软正在开始加速 toB 企业服务的布局。开发者们一片叫好声，可谓年度最佳的程序员福利了。</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F103147%2F1548992494868-94cd1a37-2454-40cd-90bb-7d90c3ad001a.png%23align%3Dleft%26display%3Dinline%26height%3D331%26linkTarget%3D_blank%26originHeight%3D1008%26originWidth%3D1312%26width%3D431%22%2C%22originWidth%22%3A1312%2C%22originHeight%22%3A1008%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A746%2C%22height%22%3A573%7D\"></card></p><p><br /></p><h4 id=\"a06eb1b6\">软件技术 B2B 公司 <a href=\"https://www.idera.com/\" target=\"_blank\">Idera.inc</a> 收购 Travis CI</h4><p><br /></p><p>Travis CI 将结合 Idera 公司其本身的数据库 / 开发者 / 测试等工具发挥更大的商业优势。不过使用免费版的社区同学也不用紧张，<strong>Travis CI 依然保证对开源软件免费的策略，并且其开源证书不会修改 (MIT)</strong>，更多可以参考详细的<a href=\"https://blog.travis-ci.com/2019-01-23-travis-ci-joins-idera-inc\" target=\"_blank\">官方公告</a>。</p><p><br /></p><blockquote><p>需要额外提醒的是, Travis-CI 对 Github 私有仓库依然没有提供免费的服务。</p></blockquote><p><br /></p><h4 id=\"7372c49b\">ES2019 即将到来，<a href=\"https://github.com/tc39/proposals/blob/master/finished-proposals.md\" target=\"_blank\">新特性</a>快速一览</h4><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F103147%2F1548992506585-4f3bff27-7235-455e-9808-93e2aad54b1a.png%23align%3Dleft%26display%3Dinline%26height%3D752%26linkTarget%3D_blank%26name%3Dimage.png%26originHeight%3D2339%26originWidth%3D1080%26size%3D747066%26width%3D347%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A2339%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A746%2C%22height%22%3A1616%7D\"></card></p><p><br /></p><h4 id=\"fef6de94\">越来越多的项目开始迁移到 TypeScript</h4><p><br /></p><p>MemSQL Studio 的 3W+ 行前端源代码从 Flow 迁移到 TypeScript，主要目的是加强类型的控制，避免动态/弱类型造成运行时的各种问题。官方总结了一篇<a href=\"https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/\" target=\"_blank\">文章</a>，介绍了他们为什么要迁移到 TypeScript，以及迁移过程的记录。</p><p><br /></p><p>Fackbook 开源的测试框架 <a href=\"https://github.com/facebook/jest\" target=\"_blank\">Jest</a> 通过几番的讨论终于从 JavaScript 迁移到使用 TypeScript 构建整个项目了，详细的过程可以查看<a href=\"https://github.com/facebook/jest/pull/7554\" target=\"_blank\">关联的 Pull Request</a>。</p><p><br /></p><p>1 月 25 日，Yarn 官方团队在 GitHub issue 中宣布将对 Yarn 进行<a href=\"https://github.com/yarnpkg/yarn\" target=\"_blank\">重大更改</a>，主要包括：将代码库从 Flow 移植到 TypeScript，不再支持 Node 4 和 Node 6，并为 Yarn 新增了一些功能等，这个更改项目代号为 Berry，目的是增强 Yarn 优势，弥补弱势。(本条消息来自 <a href=\"https://www.infoq.cn/article/eaRb-EzTimF4kfy4dsg7\" target=\"_blank\">InfoQ</a>)</p><p><br /></p><h4 id=\"3f696f4f\">Midway v1.0 社区</h4><p><br /></p><p><a href=\"https://github.com/midwayjs/midway\" target=\"_blank\">Midway</a> 是一款基于 Egg 和 TypeScript 的 Web 开发框架，由来自淘宝的 MidwayJS 团队开发。用户可以使用丰富的装饰器快速开发，并且引入了 IoC 的概念，统一管理依赖和统一初始化，是一款面向未来的全栈开发方案。</p><p><br /></p><h4 id=\"6270271d\">JavaScript 成为 2018 年最受欢迎的编程语言</h4><p><br /></p><p>随着前端领域的迅猛发展，JavaScript 语言已经延伸到更丰富的使用场景中，HackerRank 在社区发起了 2018 年度的开发者调查，其中就包含了编程语言和框架。<a href=\"https://mp.weixin.qq.com/s/buLIpFVHkBb9tYReQyBZlA\" target=\"_blank\">调查结果</a>显示：JavaScript 在 2018 年度荣获最受欢迎的编程语言。</p><p><br /></p><h4 id=\"1fac8060\">简要讯息</h4><p><br /></p><ul><li>npm package <a href=\"https://anvaka.github.io/pm/#/galaxy/npm?cx=-1345&cy=-7006&cz=-6553&lx=0.6217&ly=-0.6459&lz=0.3098&lw=0.3168&ml=150&s=1.75&l=1&v=2018-11-02T00-00-00Z\" target=\"_blank\">可视化视角</a>，你能找到你发过的 npm 包吗？</li></ul><ul><li>「墨者修齐」2018 年可视化<a href=\"https://www.yuque.com/mo-college/weekly/ny35wg\" target=\"_blank\">年度总结</a>，介绍了各种场景下的可视化产品。</li></ul><ul><li><a href=\"https://seeconf.antfin.com/\" target=\"_blank\">SSE Conf</a> 2019 顺利举行，会议相关资料包<a href=\"https://www.yuque.com/seeconf/content/kbnzac\" target=\"_blank\">下载</a></li></ul><ul><li>第十三届 <a href=\"http://d2forum.alibaba-inc.com/\" target=\"_blank\">D2 前端技术论坛</a>在杭州举行，精彩回顾 <a href=\"https://www.yuque.com/d2forum/content/d213\" target=\"_blank\">大合集</a></li></ul><p><br /></p><h3 id=\"365acd42\">Github Trending</h3><p><br /></p><blockquote><p>洞察 Github 近期 Hot Fresh Repository</p></blockquote><p><br /></p><ul><li><a href=\"https://github.com/alibaba/flutter-go\" target=\"_blank\">flutter-go</a></li></ul><p><br /></p><p><a href=\"https://github.com/flutter/flutter\" target=\"_blank\">flutter</a> 开发者帮助 APP，包含 flutter 常用 140+ 组件的 demo 演示与中文文档，帮助开发者快速上手 Flutter 内部测试中，1.0 正式版将于 2月 20日 发布。</p><p><br /></p><ul><li><a href=\"https://github.com/zadam/trilium\" target=\"_blank\">trilium</a></li></ul><p><br /></p><p>Trilium Notes 是一款知识库构建工具，支持无限层级扩展，文档可以挂载到多个节点上，采用所见即所得的编辑方式。体验上个人感觉有点像桌面版本的语雀。</p><p><br /></p><ul><li><a href=\"https://github.com/chokcoco/CSS-Inspiration\" target=\"_blank\">CSS-Inspiration</a></li></ul><p><br /></p><p>国服第一切图仔 <a href=\"https://github.com/chokcoco\" target=\"_blank\">chokcoco</a> 整理的各种 CSS 技巧，帮助学习 CSS 和寻找灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。</p><p><br /></p><ul><li><a href=\"https://github.com/nukeop/nuclear\" target=\"_blank\">nuclear</a></li></ul><p><br /></p><p>一款高颜值的流媒体资源音乐🎵播放器，支持网络上所有免费的流媒体资源。</p><p><br /></p><ul><li><a href=\"https://github.com/auchenberg/vscode-browser-preview\" target=\"_blank\">vscode-browser-preview</a></li></ul><p><br /></p><p>一款“带给我惊喜”的 vscode 插件，提供给给编辑器实时预览页面的能力，可以将 vscode 打造成更强大的集成开发环境 (IDE) 了。</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F103147%2F1548992552938-9984fbf1-2e70-4da4-aee2-12b1a68d05d7.gif%23align%3Dleft%26display%3Dinline%26height%3D452%26linkTarget%3D_blank%26name%3D1548992494875-b282cb53-c06d-40f1-ae4c-d142837e5377.gif%26originHeight%3D858%26originWidth%3D1416%26size%3D2200095%26width%3D746%22%2C%22originWidth%22%3A1416%2C%22originHeight%22%3A858%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A746%2C%22height%22%3A452%7D\"></card></p><p><br /></p><h3 id=\"236b7ba5\">精品学习</h3><p><br /></p><h4 id=\"712f2305\">TypScript 学习指导</h4><p><br /></p><p>TypeScript 最近可谓如火如荼，它是 JavaScript 的超集，其最大的特点就是支持了类型系统。其火爆的中最核心的推动力无非是前端工程规模的增长，覆盖端 (服务端 node / deno、移动端等)的扩展，学习和使用 TypeScript 能够让我们更轻松地应付一些复杂的开发场景。</p><p><br /></p><ul><li>理解类型系统，推荐初级读物 <a href=\"https://www.cs.uaf.edu/users/chappell/public_html/class/2018_spr/cs331/docs/types_primer.html\" target=\"_blank\">《A primer of type system》</a></li></ul><ul><li>入门 TypeScript 语言，参阅官网文档<a href=\"http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html\" target=\"_blank\">英文原版</a> /<a href=\"https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html\" target=\"_blank\"> 中文译版</a></li></ul><ul><li>实践参考项目 (starter)</li></ul><ul data-lake-indent=\"1\"><li><a href=\"https://github.com/Microsoft/TypeScript-Node-Starter\" target=\"_blank\">TypeScript-Node-Starter</a></li></ul><ul data-lake-indent=\"1\"><li><a href=\"https://github.com/Microsoft/TypeScript-React-Starter\" target=\"_blank\">TypeScript-React-Starter</a></li></ul><ul data-lake-indent=\"1\"><li><a href=\"https://github.com/Microsoft/TypeScript-Vue-Starter\" target=\"_blank\">TypeScript-Vue-Starter</a></li></ul><ul data-lake-indent=\"1\"><li>大家猜猜为啥没有列出 <a href=\"https://angular.io/\" target=\"_blank\">Angular</a> ???</li></ul><p><br /></p><h4 id=\"d29a1623\">「墨者修齐」数据可视化<a href=\"https://www.yuque.com/mo-college/weekly\" target=\"_blank\">周刊</a></h4><p><br /></p><p>精选文章推荐，可视化入门与进阶权威网站、论文、工具介绍，工程与设计实践分享，2019 年起每周一更新。</p><p><br /></p><h4 id=\"423a0558\">Development 技术播客<a href=\"https://github.com/rShetty/awesome-podcasts#web-development\" target=\"_blank\">列表</a></h4><p><br /></p><p>涵盖了开发相关的方方面面，包括编程语言、AI、Devops、Web 开发等丰富的课程体系。</p><p><br /></p><h4 id=\"Flutter-learning\">Flutter-learning</h4><p><br /></p><p><a href=\"https://github.com/AweiLoveAndroid/Flutter-learning\" target=\"_blank\">Flutter-learning</a> 整理了 Flutter 相关学习资料，包括 Flutter 安装和配置，Flutter 开发遇到的难题，Flutter 示例代码和模板，Flutter 项目实战，Dart 语言学习示例代码。</p><p><br /></p><h3 id=\"c11c7bd5\">工具推荐</h3><p><br /></p><ul><li><a href=\"https://projects.lukehaas.me/runjs/\" target=\"_blank\">RunJS</a></li></ul><p><br /></p><p>一款可以随手验证你的想法的桌面应用程序，输入 JS 代码片段既可预览执行结果，支持最新的 ES 特性。(PS: 也可以用来当做代码片段备忘录)</p><p><br /></p><ul><li><a href=\"https://www.image-map.net/\" target=\"_blank\">image-map</a></li></ul><p><br /></p><p>在线生成 image maps 的可视化工具，如果你想要绘制简单的局部可交互地图、编写邮件时希望添加链接到图片指定区块上，不妨通过 image maps 这项古老悠久的技术来实现，image-map 是一款在线进行可视化编辑，生成对应的 map / area 代码的工具。</p><p><br /></p><ul><li><a href=\"https://github.com/mjmlio/mjml\" target=\"_blank\">mjml</a></li></ul><p><br /></p><p>mjml 是一种用于创建响应式的邮件的标记语言，通过编写语义化的标签，会自动帮助你转换成标准的 html 的代码，并且使用了 table 进行布局，非常适合编写富文本邮件。如果有这方面的需求，不妨进一步试试桌面版的 <a href=\"http://mjmlio.github.io/mjml-app/\" target=\"_blank\">mjml-app</a> 吧。</p><p><br /></p><ul><li><a href=\"https://github.com/Eugeny/terminus\" target=\"_blank\">terminus</a></li></ul><p><br /></p><p>支持 windows，linux，macos 三端的命令行工具，集成的SSH客户端和连接管理器，可定制化程度非常高。</p><p><br /></p><h3 id=\"0d98c747\">其他</h3><p><br /></p><p>最近在 Reddit 看到的前端 vs 后端的一些<a href=\"https://github.com/txd-team/monthly/issues/24\" target=\"_blank\">对比图</a>，“很是真实”，献上给大家。</p><p><br /></p><p>各位客官猪年大吉呀🌺🌺🌺，祝福新一年里猪事顺利！！！ 另外 2020 年毕业的同学别忘了准备阿里巴巴春季实习生招聘哈，需要内推的同学也可以提前发送附件简历到我的邮箱。</p><p><br /></p><h3 id=\"2e307a62\">附录</h3><p><br /></p><ul><li><a href=\"https://github.com/shengxinjing/programmer-job-blacklist\" target=\"_blank\">《</a><a href=\"https://github.com/shengxinjing/programmer-job-blacklist\" target=\"_blank\">程序员找工作黑名单</a><a href=\"https://github.com/shengxinjing/programmer-job-blacklist\" target=\"_blank\">》</a></li></ul>",
"public": 1,
"status": 1,
"likes_count": 0,
"comments_count": 0,
"content_updated_at": "2019-02-17T14:43:14.000Z",
"deleted_at": null,
"created_at": "2019-02-03T02:22:57.000Z",
"updated_at": "2019-06-27T06:23:37.000Z",
"published_at": "2019-02-17T14:43:14.000Z",
"first_published_at": "2019-02-03T02:24:55.000Z",
"word_count": 1758,
"cover": "",
"description": "重磅消息：GITHUB 宣布私有仓库免费；Jest / Yarn 等大型前端项目纷纷准备迁移到 TypeScript；ES2019 即将到来，你准备好了吗？订阅 / 投稿：https://github.com/txd-team/monthly本期小编：x-cold (尹挚)新闻快报重磅消息：G...",
"custom_description": "订阅 / 投稿：https://github.com/txd-team/monthly 本期小编：x-cold (尹挚) 新闻快报重磅消息：Github 宣布私有仓库免费，同期还上线了星标话题 (topics) 的功能2019 年伊始，GitHub 正式宣布开放无限制创建私有存储库，并开始提供...",
"_serializer": "v2.doc_detail"
},
{
"id": 1226365,
"slug": "201812",
"title": "201812",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 9,
"likes_count": 0,
"watches_count": 22,
"content_updated_at": "2019-06-03T01:18:59.604Z",
"updated_at": "2019-06-03T01:18:59.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 103147,
"creator": {
"id": 103147,
"type": "User",
"login": "yinzhi",
"name": "尹挚 (x-cold)",
"description": "https://github.com/x-cold",
"avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 15,
"public_books_count": 9,
"followers_count": 46,
"following_count": 19,
"created_at": "2018-04-23T00:50:24.000Z",
"updated_at": "2019-05-30T09:14:59.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "前端小报 - 201812 月刊\n\n> 订阅 / 投稿：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly)\n\n> 本期小编： [Hkmu (扶容)](https://github.com/Hkmu) / [x-cold (尹挚)](https://github.com/x-cold)\n\n\n<a name=\"81377773\"></a>\n### 新闻快报\n\n- npm 发布 2018 年的生态数据，预测 2019 年新趋势\n\nJavaScript 越来越受欢迎，而 npm 是 JavaScript 库的管理中心，目前拥有超过 836,000 个库，是世界上最大的开源库集合。\n\n回顾 2018 年，npm 正在被用在越来越多的场景下，包含浏览器，服务端，移动支持，IoT / 机器人等方面；另外可以看到现在 Web 应用程序中大量依赖 npm，占其代码总量的 97%；npm 本身在 2018 年加入了 [NSP](https://github.com/nodesecurity/nsp) 安全审计，更加注重包的安全管理（当然今年也发生了不少的 npm 包事件，参考工具推荐部分的“翻车现场”）。更多关于 npm 有趣的一些趋势可以浏览前端之巅翻译的[报告](https://mp.weixin.qq.com/s/YBDJzenxlbx-oyEky7oUUw)，英文好的同学可以参考[原始报告](https://blog.npmjs.org/post/180868064080/this-year-in-javascript-2018-in-review-and-npms)。\n\n- Rollup 发布 v1.0 版本\n\n从 Rollup 出现到现在已经接近 3 年半的时间，带来了让人眼前一亮的 Tree Shaking 等特性，前端应用的项目构建上我们使用的频率可能相对低一些，而在一些库/框架的开发中经常会用到它，包括 React, Vue 也在使用。在 2018 年 12 月 28 日，Rollup 终于发布了 1.0.0 版本，结束了 0.x.x 时代。当然，升级到最新版本的 Rollup 需要改动不少的配置，参见[更新日志](https://github.com/rollup/rollup/releases/tag/v1.0.0)。\n\n- Babel 7.2.0 发布，支持私有实例方法\n\n关于[私有作用域](https://tc39.github.io/proposal-private-fields/) (Private Fields) 的支持已经进入最新的提案中，Babel 的更新支持意味着我们可以在语言层面直接在我们的类 (Class) 中定义私有的变量和方法了，可以参考下面的示例：\n\n```javascript\nclass Person {\n #age = 19;\n\n #increaseAge() {\n this.#age++;\n }\n\n birthday() {\n this.#increaseAge();\n alert(\"Happy Birthday!\");\n }\n}\n```\n\n在这个提案之前，我们也可以通过下划线命名，Symbol 命名，闭包和 ES6 Proxy 等方式来实现私有作用域，可以参考这篇[文章](https://github.com/Philon/arts/blob/master/tip/JavaScript/JS%E7%B1%BB%E7%9A%84%E7%A7%81%E6%9C%89%E5%8F%98%E9%87%8F.md)。关于 Babel 7.2.0 带来的更多特性可以读一下官方的[更新日志](https://babeljs.io/blog/2018/12/03/7.2.0)。\n\n- AI 也能帮你写代码 (TypeScript / JavaScript / Python / C++ / C#) 了！！！\n\n微软和 IntelliCode 团队一起推出 [Visual Studio IntelliCode](https://visualstudio.microsoft.com/zh-hans/services/intellicode/) 扩展，预览版可以在 VSCode 插件市场直接查找「Visual Studio IntelliCode」安装。在我们编写代码的时候，插件会自动给出推荐的编码补全，当然它不只是个语法的提示工具，它的做法是根据编码的上下文来提供智能的建议，赶紧安装体验吧~\n\n<br />\n\n- 2019 年十款流行的 Node.js 框架\n\n文章介绍了框架带来的收益以及如何选择适合的框架，并且对比了 10 款目前流行的 Node.js 框架，包括老牌的 Express、Meteor，以及一些新兴框架，例如 Adonis, Nest 等。感兴趣的同学可以[阅读原文](https://scotch.io/bar-talk/10-node-frameworks-to-use-in-2019#toc-introduction)。\n\n值得一提的是，在诸多框架横空出世的黄金开发时代，框架之间更多是特性的互补，所以并没有必要去分出高下，更重要的是选择跟业务成长相契合的框架。另外作者列举的更多的是海外流行的框架，其实国产的 Egg, ThinkJS 也已经有不少的企业级实践，感兴趣的可以到对应的 Github 仓库继续深入了解。\n\n- 阿里开源企业级设计系统最佳解决方案 [Fusion](https://fusion.design/about)\n\n2018 年 12 月 16 号，Fusion Design 在 OSC 深圳源创会年终盛典上正式开源，它是阿里巴巴耗时近三年打造的企业中后台解决方案，关于 Fusion 的详细介绍可以参考[这里](https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247490172&idx=1&sn=4c6f224a74f4e13e37ae112f10f3667a&chksm=f951af3fce26262919bded758a2661dd728038334c81bc7ae257c05b44479adbb984e6589e9e&token=935107263&lang=zh_CN#rd)。\n\n- 微软宣布 Edge 将采用 Chromium 内核\n\n这对于诸多的前端开发者而言，无疑是本年底最大的福音~！具体的计划可以参考官网的[博客](https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/)，在不久的将来，基于 Chromium 的 Edge 浏览器将要正式和我们见面啦。\n\n<a name=\"365acd42\"></a>\n### Github Trending\n\n> 洞察 Github 近期 Hot Fresh Repository\n\n\n- [Magic-Grid](https://github.com/e-oj/Magic-Grid)\n\n一款简单易用，轻量级的动态布局的 JavaScript 库，与它的名字不同，Magic-Grid 不是 CSS Grid 库，它支持弹性布局/瀑布流等，还提供了一个支持 Vue 的[版本](https://github.com/imlinus/Vue-Magic-Grid)。\n\n- [nodebestpractices](https://github.com/i0natan/nodebestpractices)\n\n大型 Node.js 最佳实践的精品总结和分享，里面包含了丰富的使用场景及最佳实践（附带解释），阅读这本大型书籍也能收获不少关于 Node.js 的知识。\n\n- [sharp](https://github.com/lovell/sharp)\n\n高性能的 Node.js 图像处理模块，图像处理又多一种新的选择。\n\n- [bloomrpc](https://github.com/uw-labs/bloomrpc)\n\n不容错过的 GPRC 服务可视化客户端，可以理解为 HTTP 之 Postman, GraphQL 之 Playground，GRPC 之 BllomRPC。\n\n- [devhub](https://github.com/devhubapp/devhub)\n\nGithub 社交聚合平台，个人认为更像是个人工作台，支持 Web, iOS, Android, Desktop 多平台，如果你是 Github 用户，这里可能提供了你想要的一切。\n\n- [rrweb](https://github.com/rrweb-io/rrweb)\n\nrrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 Web 界面中的用户操作。\n\n- [notable](https://github.com/fabiospampinato/notable)\n\n一款基于 Markdown 的笔记应用程序，支持无限文件夹 / 标签管理，喜欢纯粹的 Markdown 编辑体验的同学可以尝试使用一下，README 文件中有和其他竞品对比的报告。\n\n<a name=\"236b7ba5\"></a>\n### 精品学习\n\n- [前端该知道些密码学和安全上的事儿](https://mp.weixin.qq.com/s/eMa4y0-B9xqeB_mNPHeRSw)\n\n在这个经常翻车的年代，网络安全逐渐受到重视。在前端这个开放的世界中，开发人员更应该对安全有所了解，并在自己的应用程序中部署适当的安全工具和策略，保护用户隐私以及系统的安全运行。文章阅读时间约 15 分钟。\n\n- [Why review code](https://mp.weixin.qq.com/s/5m3bBzFTN82ttEFN5EpBew)\n\n如何保证代码的交付质量？结对编程是否有科学依据？实际上，Code Review 无论是在软件工程体系，亦或是开源社区的运行秩序中，都是非常重要的环节。正确的 Code Review 姿势不仅能提高代码质量，降低故障发生的风险，还能给团队开发带来效能的提升。如果你的团队还没有 Review 代码的习惯，不妨来看下燕燕翻译的这篇博客。文章阅读时间约 10 分钟。\n\n<a name=\"c11c7bd5\"></a>\n### 工具推荐\n\n- [quicklink](https://github.com/GoogleChromeLabs/quicklink)\n\n还记得曾今的 WAP 时代吗？当我们在浏览网页的时候，经常能看到一个绿色的下一页按钮，点击之后可以“几乎无刷新”的跳转到新的页面中，它其实是一种预加载的策略。现在 quicklink 也可以给普通的 Web 应用程序提供类似的能力，使用它我们可以让浏览器在空闲的时间预先将用户即将访问的页面预先缓存，从而极大地提高了切换页面的速度。\n\n- [ncc](https://github.com/zeit/ncc)\n\n可以将 Node.js 模块打包成单个文件的神奇工具，让你的模块最小化。这种打包的方式非常适合一些需要更“纯粹”的交付场景，比如 serverless，通过 ncc 我们可以很轻松地把应用程序及依赖转换成单个文件进行交付。\n\n- [npq](https://github.com/lirantal/npq)\n\n最近半年发生的 npm 事故稍微有些频繁，因此通过 npm 安装一个靠谱的 package 和 version 非常重要。npq 会在安装之前进行前置的检查，其中包括了安全扫描、包的发布时间、热度、安装脚本分析等。另外带大家回顾一下今年的大型翻车现场：\n\ndebug：[visionmedia/debug#603](https://github.com/visionmedia/debug/issues/603)<br />React：[facebook/react#14208](https://github.com/facebook/react/issues/14208)<br />event-stream：[https://zhuanlan.zhihu.com/p/50938220](https://zhuanlan.zhihu.com/p/50938220)\n",
"body_draft": "",
"body_html": "<p>前端小报 - 201812 月刊</p><p><br /></p><blockquote><p>订阅 / 投稿：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p>本期小编： <a href=\"https://github.com/Hkmu\" target=\"_blank\">Hkmu (扶容)</a> / <a href=\"https://github.com/x-cold\" target=\"_blank\">x-cold (尹挚)</a></p></blockquote><p><br /></p><h3 id=\"81377773\">新闻快报</h3><p><br /></p><ul><li>npm 发布 2018 年的生态数据，预测 2019 年新趋势</li></ul><p><br /></p><p>JavaScript 越来越受欢迎，而 npm 是 JavaScript 库的管理中心，目前拥有超过 836,000 个库，是世界上最大的开源库集合。</p><p><br /></p><p>回顾 2018 年，npm 正在被用在越来越多的场景下，包含浏览器，服务端，移动支持，IoT / 机器人等方面；另外可以看到现在 Web 应用程序中大量依赖 npm，占其代码总量的 97%；npm 本身在 2018 年加入了 <a href=\"https://github.com/nodesecurity/nsp\" target=\"_blank\">NSP</a> 安全审计，更加注重包的安全管理（当然今年也发生了不少的 npm 包事件，参考工具推荐部分的“翻车现场”）。更多关于 npm 有趣的一些趋势可以浏览前端之巅翻译的<a href=\"https://mp.weixin.qq.com/s/YBDJzenxlbx-oyEky7oUUw\" target=\"_blank\">报告</a>，英文好的同学可以参考<a href=\"https://blog.npmjs.org/post/180868064080/this-year-in-javascript-2018-in-review-and-npms\" target=\"_blank\">原始报告</a>。</p><p><br /></p><ul><li>Rollup 发布 v1.0 版本</li></ul><p><br /></p><p>从 Rollup 出现到现在已经接近 3 年半的时间，带来了让人眼前一亮的 Tree Shaking 等特性，前端应用的项目构建上我们使用的频率可能相对低一些，而在一些库/框架的开发中经常会用到它，包括 React, Vue 也在使用。在 2018 年 12 月 28 日，Rollup 终于发布了 1.0.0 版本，结束了 0.x.x 时代。当然，升级到最新版本的 Rollup 需要改动不少的配置，参见<a href=\"https://github.com/rollup/rollup/releases/tag/v1.0.0\" target=\"_blank\">更新日志</a>。</p><p><br /></p><ul><li>Babel 7.2.0 发布，支持私有实例方法</li></ul><p><br /></p><p>关于<a href=\"https://tc39.github.io/proposal-private-fields/\" target=\"_blank\">私有作用域</a> (Private Fields) 的支持已经进入最新的提案中，Babel 的更新支持意味着我们可以在语言层面直接在我们的类 (Class) 中定义私有的变量和方法了，可以参考下面的示例：</p><p><br /></p><pre data-lang=\"javascript\"><code>class Person {\n #age = 19;\n\n #increaseAge() {\n this.#age++;\n }\n\n birthday() {\n this.#increaseAge();\n alert("Happy Birthday!");\n }\n}</code></pre><p><br /></p><p>在这个提案之前，我们也可以通过下划线命名，Symbol 命名，闭包和 ES6 Proxy 等方式来实现私有作用域，可以参考这篇<a href=\"https://github.com/Philon/arts/blob/master/tip/JavaScript/JS%E7%B1%BB%E7%9A%84%E7%A7%81%E6%9C%89%E5%8F%98%E9%87%8F.md\" target=\"_blank\">文章</a>。关于 Babel 7.2.0 带来的更多特性可以读一下官方的<a href=\"https://babeljs.io/blog/2018/12/03/7.2.0\" target=\"_blank\">更新日志</a>。</p><p><br /></p><ul><li>AI 也能帮你写代码 (TypeScript / JavaScript / Python / C++ / C#) 了！！！</li></ul><p><br /></p><p>微软和 IntelliCode 团队一起推出 <a href=\"https://visualstudio.microsoft.com/zh-hans/services/intellicode/\" target=\"_blank\">Visual Studio IntelliCode</a> 扩展，预览版可以在 VSCode 插件市场直接查找「Visual Studio IntelliCode」安装。在我们编写代码的时候，插件会自动给出推荐的编码补全，当然它不只是个语法的提示工具，它的做法是根据编码的上下文来提供智能的建议，赶紧安装体验吧~</p><p><br /></p><p><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/103147/1546594322606-2ef2f2b7-d52f-44f6-b8aa-36f2bf15d5b1.gif#align=left&display=inline&height=386&linkTarget=_blank&name=intellicode_3.gif&originHeight=772&originWidth=1402&size=744532&width=701#align=left&display=inline&height=411&originHeight=772&originWidth=1402&width=746\" style=\"max-width: 600px; width: 746px;\" /><br /></p><p><br /></p><ul><li>2019 年十款流行的 Node.js 框架</li></ul><p><br /></p><p>文章介绍了框架带来的收益以及如何选择适合的框架，并且对比了 10 款目前流行的 Node.js 框架，包括老牌的 Express、Meteor，以及一些新兴框架，例如 Adonis, Nest 等。感兴趣的同学可以<a href=\"https://scotch.io/bar-talk/10-node-frameworks-to-use-in-2019#toc-introduction\" target=\"_blank\">阅读原文</a>。</p><p><br /></p><p>值得一提的是，在诸多框架横空出世的黄金开发时代，框架之间更多是特性的互补，所以并没有必要去分出高下，更重要的是选择跟业务成长相契合的框架。另外作者列举的更多的是海外流行的框架，其实国产的 Egg, ThinkJS 也已经有不少的企业级实践，感兴趣的可以到对应的 Github 仓库继续深入了解。</p><p><br /></p><ul><li>阿里开源企业级设计系统最佳解决方案 <a href=\"https://fusion.design/about\" target=\"_blank\">Fusion</a></li></ul><p><br /></p><p>2018 年 12 月 16 号，Fusion Design 在 OSC 深圳源创会年终盛典上正式开源，它是阿里巴巴耗时近三年打造的企业中后台解决方案，关于 Fusion 的详细介绍可以参考<a href=\"https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247490172&idx=1&sn=4c6f224a74f4e13e37ae112f10f3667a&chksm=f951af3fce26262919bded758a2661dd728038334c81bc7ae257c05b44479adbb984e6589e9e&token=935107263&lang=zh_CN#rd\" target=\"_blank\">这里</a>。</p><p><br /></p><ul><li>微软宣布 Edge 将采用 Chromium 内核</li></ul><p><br /></p><p>这对于诸多的前端开发者而言，无疑是本年底最大的福音~！具体的计划可以参考官网的<a href=\"https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/\" target=\"_blank\">博客</a>，在不久的将来，基于 Chromium 的 Edge 浏览器将要正式和我们见面啦。</p><p><br /></p><h3 id=\"365acd42\">Github Trending</h3><p><br /></p><blockquote><p>洞察 Github 近期 Hot Fresh Repository</p></blockquote><p><br /></p><ul><li><a href=\"https://github.com/e-oj/Magic-Grid\" target=\"_blank\">Magic-Grid</a></li></ul><p><br /></p><p>一款简单易用，轻量级的动态布局的 JavaScript 库，与它的名字不同，Magic-Grid 不是 CSS Grid 库，它支持弹性布局/瀑布流等，还提供了一个支持 Vue 的<a href=\"https://github.com/imlinus/Vue-Magic-Grid\" target=\"_blank\">版本</a>。</p><p><br /></p><ul><li><a href=\"https://github.com/i0natan/nodebestpractices\" target=\"_blank\">nodebestpractices</a></li></ul><p><br /></p><p>大型 Node.js 最佳实践的精品总结和分享，里面包含了丰富的使用场景及最佳实践（附带解释），阅读这本大型书籍也能收获不少关于 Node.js 的知识。</p><p><br /></p><ul><li><a href=\"https://github.com/lovell/sharp\" target=\"_blank\">sharp</a></li></ul><p><br /></p><p>高性能的 Node.js 图像处理模块，图像处理又多一种新的选择。</p><p><br /></p><ul><li><a href=\"https://github.com/uw-labs/bloomrpc\" target=\"_blank\">bloomrpc</a></li></ul><p><br /></p><p>不容错过的 GPRC 服务可视化客户端，可以理解为 HTTP 之 Postman, GraphQL 之 Playground，GRPC 之 BllomRPC。</p><p><br /></p><ul><li><a href=\"https://github.com/devhubapp/devhub\" target=\"_blank\">devhub</a></li></ul><p><br /></p><p>Github 社交聚合平台，个人认为更像是个人工作台，支持 Web, iOS, Android, Desktop 多平台，如果你是 Github 用户，这里可能提供了你想要的一切。</p><p><br /></p><ul><li><a href=\"https://github.com/rrweb-io/rrweb\" target=\"_blank\">rrweb</a></li></ul><p><br /></p><p>rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 Web 界面中的用户操作。</p><p><br /></p><ul><li><a href=\"https://github.com/fabiospampinato/notable\" target=\"_blank\">notable</a></li></ul><p><br /></p><p>一款基于 Markdown 的笔记应用程序，支持无限文件夹 / 标签管理，喜欢纯粹的 Markdown 编辑体验的同学可以尝试使用一下，README 文件中有和其他竞品对比的报告。</p><p><br /></p><h3 id=\"236b7ba5\">精品学习</h3><p><br /></p><ul><li><a href=\"https://mp.weixin.qq.com/s/eMa4y0-B9xqeB_mNPHeRSw\" target=\"_blank\">前端该知道些密码学和安全上的事儿</a></li></ul><p><br /></p><p>在这个经常翻车的年代，网络安全逐渐受到重视。在前端这个开放的世界中，开发人员更应该对安全有所了解，并在自己的应用程序中部署适当的安全工具和策略，保护用户隐私以及系统的安全运行。文章阅读时间约 15 分钟。</p><p><br /></p><ul><li><a href=\"https://mp.weixin.qq.com/s/5m3bBzFTN82ttEFN5EpBew\" target=\"_blank\">Why review code</a></li></ul><p><br /></p><p>如何保证代码的交付质量？结对编程是否有科学依据？实际上，Code Review 无论是在软件工程体系，亦或是开源社区的运行秩序中，都是非常重要的环节。正确的 Code Review 姿势不仅能提高代码质量，降低故障发生的风险，还能给团队开发带来效能的提升。如果你的团队还没有 Review 代码的习惯，不妨来看下燕燕翻译的这篇博客。文章阅读时间约 10 分钟。</p><p><br /></p><h3 id=\"c11c7bd5\">工具推荐</h3><p><br /></p><ul><li><a href=\"https://github.com/GoogleChromeLabs/quicklink\" target=\"_blank\">quicklink</a></li></ul><p><br /></p><p>还记得曾今的 WAP 时代吗？当我们在浏览网页的时候，经常能看到一个绿色的下一页按钮，点击之后可以“几乎无刷新”的跳转到新的页面中，它其实是一种预加载的策略。现在 quicklink 也可以给普通的 Web 应用程序提供类似的能力，使用它我们可以让浏览器在空闲的时间预先将用户即将访问的页面预先缓存，从而极大地提高了切换页面的速度。</p><p><br /></p><ul><li><a href=\"https://github.com/zeit/ncc\" target=\"_blank\">ncc</a></li></ul><p><br /></p><p>可以将 Node.js 模块打包成单个文件的神奇工具，让你的模块最小化。这种打包的方式非常适合一些需要更“纯粹”的交付场景，比如 serverless，通过 ncc 我们可以很轻松地把应用程序及依赖转换成单个文件进行交付。</p><p><br /></p><ul><li><a href=\"https://github.com/lirantal/npq\" target=\"_blank\">npq</a></li></ul><p><br /></p><p>最近半年发生的 npm 事故稍微有些频繁，因此通过 npm 安装一个靠谱的 package 和 version 非常重要。npq 会在安装之前进行前置的检查，其中包括了安全扫描、包的发布时间、热度、安装脚本分析等。另外带大家回顾一下今年的大型翻车现场：</p><p><br /></p><p>debug：<a href=\"https://github.com/visionmedia/debug/issues/603\" target=\"_blank\">visionmedia/debug#603</a><br />React：<a href=\"https://github.com/facebook/react/issues/14208\" target=\"_blank\">facebook/react#14208</a><br />event-stream：<a href=\"https://zhuanlan.zhihu.com/p/50938220\" target=\"_blank\">https://zhuanlan.zhihu.com/p/50938220</a></p>",
"body_lake": "<!doctype lake><p>前端小报 - 201812 月刊</p><p><br /></p><blockquote><p>订阅 / 投稿：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p><cursor />本期小编： <a href=\"https://github.com/Hkmu\" target=\"_blank\">Hkmu (扶容)</a> / <a href=\"https://github.com/x-cold\" target=\"_blank\">x-cold (尹挚)</a></p></blockquote><p><br /></p><h3 id=\"81377773\">新闻快报</h3><p><br /></p><ul><li>npm 发布 2018 年的生态数据，预测 2019 年新趋势</li></ul><p><br /></p><p>JavaScript 越来越受欢迎，而 npm 是 JavaScript 库的管理中心，目前拥有超过 836,000 个库，是世界上最大的开源库集合。</p><p><br /></p><p>回顾 2018 年，npm 正在被用在越来越多的场景下，包含浏览器，服务端，移动支持，IoT / 机器人等方面；另外可以看到现在 Web 应用程序中大量依赖 npm，占其代码总量的 97%；npm 本身在 2018 年加入了 <a href=\"https://github.com/nodesecurity/nsp\" target=\"_blank\">NSP</a> 安全审计，更加注重包的安全管理（当然今年也发生了不少的 npm 包事件，参考工具推荐部分的“翻车现场”）。更多关于 npm 有趣的一些趋势可以浏览前端之巅翻译的<a href=\"https://mp.weixin.qq.com/s/YBDJzenxlbx-oyEky7oUUw\" target=\"_blank\">报告</a>，英文好的同学可以参考<a href=\"https://blog.npmjs.org/post/180868064080/this-year-in-javascript-2018-in-review-and-npms\" target=\"_blank\">原始报告</a>。</p><p><br /></p><ul><li>Rollup 发布 v1.0 版本</li></ul><p><br /></p><p>从 Rollup 出现到现在已经接近 3 年半的时间，带来了让人眼前一亮的 Tree Shaking 等特性，前端应用的项目构建上我们使用的频率可能相对低一些，而在一些库/框架的开发中经常会用到它，包括 React, Vue 也在使用。在 2018 年 12 月 28 日，Rollup 终于发布了 1.0.0 版本，结束了 0.x.x 时代。当然，升级到最新版本的 Rollup 需要改动不少的配置，参见<a href=\"https://github.com/rollup/rollup/releases/tag/v1.0.0\" target=\"_blank\">更新日志</a>。</p><p><br /></p><ul><li>Babel 7.2.0 发布，支持私有实例方法</li></ul><p><br /></p><p>关于<a href=\"https://tc39.github.io/proposal-private-fields/\" target=\"_blank\">私有作用域</a> (Private Fields) 的支持已经进入最新的提案中，Babel 的更新支持意味着我们可以在语言层面直接在我们的类 (Class) 中定义私有的变量和方法了，可以参考下面的示例：</p><p><br /></p><card type=\"block\" name=\"codeblock\" value=\"data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22class%20Person%20%7B%5Cn%20%20%23age%20%3D%2019%3B%5Cn%5Cn%20%20%23increaseAge()%20%7B%5Cn%20%20%20%20this.%23age%2B%2B%3B%5Cn%20%20%7D%5Cn%5Cn%20%20birthday()%20%7B%5Cn%20%20%20%20this.%23increaseAge()%3B%5Cn%20%20%20%20alert(%5C%22Happy%20Birthday!%5C%22)%3B%5Cn%20%20%7D%5Cn%7D%22%7D\"></card><p><br /></p><p>在这个提案之前，我们也可以通过下划线命名，Symbol 命名，闭包和 ES6 Proxy 等方式来实现私有作用域，可以参考这篇<a href=\"https://github.com/Philon/arts/blob/master/tip/JavaScript/JS%E7%B1%BB%E7%9A%84%E7%A7%81%E6%9C%89%E5%8F%98%E9%87%8F.md\" target=\"_blank\">文章</a>。关于 Babel 7.2.0 带来的更多特性可以读一下官方的<a href=\"https://babeljs.io/blog/2018/12/03/7.2.0\" target=\"_blank\">更新日志</a>。</p><p><br /></p><ul><li>AI 也能帮你写代码 (TypeScript / JavaScript / Python / C++ / C#) 了！！！</li></ul><p><br /></p><p>微软和 IntelliCode 团队一起推出 <a href=\"https://visualstudio.microsoft.com/zh-hans/services/intellicode/\" target=\"_blank\">Visual Studio IntelliCode</a> 扩展，预览版可以在 VSCode 插件市场直接查找「Visual Studio IntelliCode」安装。在我们编写代码的时候，插件会自动给出推荐的编码补全，当然它不只是个语法的提示工具，它的做法是根据编码的上下文来提供智能的建议，赶紧安装体验吧~</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F103147%2F1546594322606-2ef2f2b7-d52f-44f6-b8aa-36f2bf15d5b1.gif%23align%3Dleft%26display%3Dinline%26height%3D386%26linkTarget%3D_blank%26name%3Dintellicode_3.gif%26originHeight%3D772%26originWidth%3D1402%26size%3D744532%26width%3D701%22%2C%22originWidth%22%3A1402%2C%22originHeight%22%3A772%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A746%2C%22height%22%3A411%7D\"></card><br /></p><p><br /></p><ul><li>2019 年十款流行的 Node.js 框架</li></ul><p><br /></p><p>文章介绍了框架带来的收益以及如何选择适合的框架，并且对比了 10 款目前流行的 Node.js 框架，包括老牌的 Express、Meteor，以及一些新兴框架，例如 Adonis, Nest 等。感兴趣的同学可以<a href=\"https://scotch.io/bar-talk/10-node-frameworks-to-use-in-2019#toc-introduction\" target=\"_blank\">阅读原文</a>。</p><p><br /></p><p>值得一提的是，在诸多框架横空出世的黄金开发时代，框架之间更多是特性的互补，所以并没有必要去分出高下，更重要的是选择跟业务成长相契合的框架。另外作者列举的更多的是海外流行的框架，其实国产的 Egg, ThinkJS 也已经有不少的企业级实践，感兴趣的可以到对应的 Github 仓库继续深入了解。</p><p><br /></p><ul><li>阿里开源企业级设计系统最佳解决方案 <a href=\"https://fusion.design/about\" target=\"_blank\">Fusion</a></li></ul><p><br /></p><p>2018 年 12 月 16 号，Fusion Design 在 OSC 深圳源创会年终盛典上正式开源，它是阿里巴巴耗时近三年打造的企业中后台解决方案，关于 Fusion 的详细介绍可以参考<a href=\"https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247490172&idx=1&sn=4c6f224a74f4e13e37ae112f10f3667a&chksm=f951af3fce26262919bded758a2661dd728038334c81bc7ae257c05b44479adbb984e6589e9e&token=935107263&lang=zh_CN#rd\" target=\"_blank\">这里</a>。</p><p><br /></p><ul><li>微软宣布 Edge 将采用 Chromium 内核</li></ul><p><br /></p><p>这对于诸多的前端开发者而言，无疑是本年底最大的福音~！具体的计划可以参考官网的<a href=\"https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/\" target=\"_blank\">博客</a>，在不久的将来，基于 Chromium 的 Edge 浏览器将要正式和我们见面啦。</p><p><br /></p><h3 id=\"365acd42\">Github Trending</h3><p><br /></p><blockquote><p>洞察 Github 近期 Hot Fresh Repository</p></blockquote><p><br /></p><ul><li><a href=\"https://github.com/e-oj/Magic-Grid\" target=\"_blank\">Magic-Grid</a></li></ul><p><br /></p><p>一款简单易用，轻量级的动态布局的 JavaScript 库，与它的名字不同，Magic-Grid 不是 CSS Grid 库，它支持弹性布局/瀑布流等，还提供了一个支持 Vue 的<a href=\"https://github.com/imlinus/Vue-Magic-Grid\" target=\"_blank\">版本</a>。</p><p><br /></p><ul><li><a href=\"https://github.com/i0natan/nodebestpractices\" target=\"_blank\">nodebestpractices</a></li></ul><p><br /></p><p>大型 Node.js 最佳实践的精品总结和分享，里面包含了丰富的使用场景及最佳实践（附带解释），阅读这本大型书籍也能收获不少关于 Node.js 的知识。</p><p><br /></p><ul><li><a href=\"https://github.com/lovell/sharp\" target=\"_blank\">sharp</a></li></ul><p><br /></p><p>高性能的 Node.js 图像处理模块，图像处理又多一种新的选择。</p><p><br /></p><ul><li><a href=\"https://github.com/uw-labs/bloomrpc\" target=\"_blank\">bloomrpc</a></li></ul><p><br /></p><p>不容错过的 GPRC 服务可视化客户端，可以理解为 HTTP 之 Postman, GraphQL 之 Playground，GRPC 之 BllomRPC。</p><p><br /></p><ul><li><a href=\"https://github.com/devhubapp/devhub\" target=\"_blank\">devhub</a></li></ul><p><br /></p><p>Github 社交聚合平台，个人认为更像是个人工作台，支持 Web, iOS, Android, Desktop 多平台，如果你是 Github 用户，这里可能提供了你想要的一切。</p><p><br /></p><ul><li><a href=\"https://github.com/rrweb-io/rrweb\" target=\"_blank\">rrweb</a></li></ul><p><br /></p><p>rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 Web 界面中的用户操作。</p><p><br /></p><ul><li><a href=\"https://github.com/fabiospampinato/notable\" target=\"_blank\">notable</a></li></ul><p><br /></p><p>一款基于 Markdown 的笔记应用程序，支持无限文件夹 / 标签管理，喜欢纯粹的 Markdown 编辑体验的同学可以尝试使用一下，README 文件中有和其他竞品对比的报告。</p><p><br /></p><h3 id=\"236b7ba5\">精品学习</h3><p><br /></p><ul><li><a href=\"https://mp.weixin.qq.com/s/eMa4y0-B9xqeB_mNPHeRSw\" target=\"_blank\">前端该知道些密码学和安全上的事儿</a></li></ul><p><br /></p><p>在这个经常翻车的年代，网络安全逐渐受到重视。在前端这个开放的世界中，开发人员更应该对安全有所了解，并在自己的应用程序中部署适当的安全工具和策略，保护用户隐私以及系统的安全运行。文章阅读时间约 15 分钟。</p><p><br /></p><ul><li><a href=\"https://mp.weixin.qq.com/s/5m3bBzFTN82ttEFN5EpBew\" target=\"_blank\">Why review code</a></li></ul><p><br /></p><p>如何保证代码的交付质量？结对编程是否有科学依据？实际上，Code Review 无论是在软件工程体系，亦或是开源社区的运行秩序中，都是非常重要的环节。正确的 Code Review 姿势不仅能提高代码质量，降低故障发生的风险，还能给团队开发带来效能的提升。如果你的团队还没有 Review 代码的习惯，不妨来看下燕燕翻译的这篇博客。文章阅读时间约 10 分钟。</p><p><br /></p><h3 id=\"c11c7bd5\">工具推荐</h3><p><br /></p><ul><li><a href=\"https://github.com/GoogleChromeLabs/quicklink\" target=\"_blank\">quicklink</a></li></ul><p><br /></p><p>还记得曾今的 WAP 时代吗？当我们在浏览网页的时候，经常能看到一个绿色的下一页按钮，点击之后可以“几乎无刷新”的跳转到新的页面中，它其实是一种预加载的策略。现在 quicklink 也可以给普通的 Web 应用程序提供类似的能力，使用它我们可以让浏览器在空闲的时间预先将用户即将访问的页面预先缓存，从而极大地提高了切换页面的速度。</p><p><br /></p><ul><li><a href=\"https://github.com/zeit/ncc\" target=\"_blank\">ncc</a></li></ul><p><br /></p><p>可以将 Node.js 模块打包成单个文件的神奇工具，让你的模块最小化。这种打包的方式非常适合一些需要更“纯粹”的交付场景，比如 serverless，通过 ncc 我们可以很轻松地把应用程序及依赖转换成单个文件进行交付。</p><p><br /></p><ul><li><a href=\"https://github.com/lirantal/npq\" target=\"_blank\">npq</a></li></ul><p><br /></p><p>最近半年发生的 npm 事故稍微有些频繁，因此通过 npm 安装一个靠谱的 package 和 version 非常重要。npq 会在安装之前进行前置的检查，其中包括了安全扫描、包的发布时间、热度、安装脚本分析等。另外带大家回顾一下今年的大型翻车现场：</p><p><br /></p><p>debug：<a href=\"https://github.com/visionmedia/debug/issues/603\" target=\"_blank\">visionmedia/debug#603</a><br />React：<a href=\"https://github.com/facebook/react/issues/14208\" target=\"_blank\">facebook/react#14208</a><br />event-stream：<a href=\"https://zhuanlan.zhihu.com/p/50938220\" target=\"_blank\">https://zhuanlan.zhihu.com/p/50938220</a></p>",
"public": 1,
"status": 1,
"likes_count": 0,
"comments_count": 0,
"content_updated_at": "2019-02-03T02:28:49.000Z",
"deleted_at": null,
"created_at": "2019-02-03T02:22:50.000Z",
"updated_at": "2019-04-30T03:24:51.000Z",
"published_at": "2019-02-03T06:09:29.000Z",
"first_published_at": "2019-02-03T02:25:04.000Z",
"word_count": 1940,
"cover": "",
"description": "前端小报 - 201812 月刊订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚)新闻快报npm 发布 2018 年的生态数据，预测 2019 年新趋势JavaScript 越来越受欢迎，而 npm ...",
"custom_description": "前端小报 - 201812 月刊 订阅 / 投稿：https://github.com/txd-team/monthly 本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报npm 发布 2018 年的生态数据，预测 2019 年新趋势JavaScript 越来越受欢迎，而 n...",
"_serializer": "v2.doc_detail"
},
{
"id": 1226363,
"slug": "201810-11",
"title": "201810-11",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 9,
"likes_count": 0,
"watches_count": 22,
"content_updated_at": "2019-06-03T01:18:59.604Z",
"updated_at": "2019-06-03T01:18:59.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 103147,
"creator": {
"id": 103147,
"type": "User",
"login": "yinzhi",
"name": "尹挚 (x-cold)",
"description": "https://github.com/x-cold",
"avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 15,
"public_books_count": 9,
"followers_count": 46,
"following_count": 19,
"created_at": "2018-04-23T00:50:24.000Z",
"updated_at": "2019-05-30T09:14:59.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "前端小报 - 201810-11 月刊（包含部分10月份内容）\n\n> 订阅小报：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly)\n\n> 本期小编：[damujiangr (墨止)](https://github.com/damujiangr)\n\n\n<a name=\"b506cde4\"></a>\n### 内容提要\n\n1. React Conf概况：\n - (React 16.7) React Hook：声称不使用 Class 就可以使用 React 的大部分功能，采用逐步推广的策略\n - Suspense(已发布，)\n - (已发布) Suspense for Code Splitting，结合 React.lazy 实现 Code-Splitting, 达到动态加载组件的目的，见 React v16.6.0\n - 同时 React v16.6.0 新增了一个专门用于性能优化的 API：React.memo, 类似于 PureComponent, React.memo 针对于 function component，执行对 props 的浅比较\n - (React 16.9) Suspense for Data Fetching\n - (React 16.9) Concurrent Rendering: 并发渲染\n> 本期评论员：React近期的趋势是要代码更少、运行更快，来解决日益庞大的应用带来的问题，目前可以入手动态加载组件的功能了，有性能瓶颈的项目可以应用一试了\n\n2. Create-React-App 2.0 发布\n - 更新到 webpack 4, Babel 7, 支持 React v16的最新版语法\n - 支持 SCSS 和 CSS Modules\n - v2.1 时, 新增了 TypeScript 支持\n> 本期评论员：2.0 加入了很多新的功能，尤其 TypeScript 支持。学习搭建脚手架和链路工具可以算得上一个很好的模版\n\n3. React Native发布重构路线图，期望让RN更轻量，更适应 JavaScript 生态圈的发展\n - 同期关注 Flutter\n> 本期评论员：大前端的概念已经提了很久了，只说终端方向，尤其是RN、Flutter、Electron的出现，甚至包含嵌入式开发，一人精通 Web 和 Native 开发可能是一个越来越强烈的趋势\n\n4. Vue 3.0 开发路线\n - 最大的部分是渲染函数中使用的 Virtual DOM 格式（美其名曰博众家之长吧）\n - 更全面的使用 TypeScript\n5. Angular 7.0 发布\n - 跨整个平台的大版本，包括核心框架、Angular Material 和与主版本同步的CLI\n6. Node.js 11发布，Node 10正式进入LTS，alinode-v4.5.0也进行了支持\n - v11 支持 V8 新发布的 v7.0\n7. Chrome 70 正式版发布：windows端将支持PWA\n> 本期评论员：拥抱 PWA，今天前端应用越来越庞大，离线和性能的要求就日益凸显，PWA 也在得到各大浏览器厂商的支持，有需可入坑\n\n\n8. Taro 全面支持微信/百度/支付宝小程序\n> 本期评论员：小程序现在处于混战阶段，各类小程序层出不穷，业界确实有场景，有痛点，应用角度上有此需求的开发同学可以入手尝试一下，不失为提高人效的一种方案。但是小程序也在不断演进，坑也肯定特别多。从技术角度来讲个人并不看好这样的集成框架\n\n\n9. top programming languages of 2018\n - [https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/](https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/)\n - TypeScript 增长迅速，是一种开发友好，运营也很好的语法集合，值得拥有\n - 增长迅速的语言的一些特点\n - Type safety 类型安全\n - Python\n - TypeScript\n - Kotlin\n - Interoperability 互通\n - TypeScript <-> Javascript/ES\n - Rust & Kotlin <-> C & java\n - Python <-> ...\n - Open Source 开源\n> 本期评论员：越来越多的成熟的语言特性被引入到前端开发中，从增长趋势来看 TypeScript 势头迅猛，ES超集无缝切换，友好的学习曲线，静态类型检查，类Java 和 C# 的严谨语言结构，受到大批程序员的青睐\n\n10. 一篇介绍 TypeScript 开发指南\n - [https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/](https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/)\n> 本期评论员：TS 风头正劲，赶紧来学习下吧，相信你会爱不释手\n\n11. Github 仓库数量破亿了\n - [https://blog.github.com/2018-11-08-100M-repos/](https://blog.github.com/2018-11-08-100M-repos/)\n\n<a name=\"3ac9f81d\"></a>\n### 未来关注\n\n1. HTTP 3\n - 博文[https://dev.to/grigorkh/what-is-http3--4pib](https://dev.to/grigorkh/what-is-http3--4pib)\n - 官宣[https://mailarchive.ietf.org/arch/msg/quic/RLRs4nB1lwFCZ_7k0iuz0ZBa35s](https://mailarchive.ietf.org/arch/msg/quic/RLRs4nB1lwFCZ_7k0iuz0ZBa35s)\n2. Google 推出 Virtual Scroller，拯救web长列表，(研发阶段)\n - 掘金[https://juejin.im/entry/5bf495d76fb9a049f23c5eac](https://juejin.im/entry/5bf495d76fb9a049f23c5eac)\n3. Webkit 推出新的图形着色语言 whlsl（初级阶段）\n - 对 HLSL（DirectX的高级着色语言） 的拓展\n - Github仓库[https://github.com/gpuweb/WHLSL](https://github.com/gpuweb/WHLSL)\n",
"body_draft": "",
"body_html": "<p>前端小报 - 201810-11 月刊（包含部分10月份内容）</p><p><br /></p><blockquote><p>订阅小报：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p>本期小编：<a href=\"https://github.com/damujiangr\" target=\"_blank\">damujiangr (墨止)</a></p></blockquote><p><br /></p><h3 id=\"b506cde4\">内容提要</h3><p><br /></p><ol start=\"1\"><li>React Conf概况：</li><ul data-lake-indent=\"1\"><li>(React 16.7) React Hook：声称不使用 Class 就可以使用 React 的大部分功能，采用逐步推广的策略</li></ul><ul data-lake-indent=\"1\"><li>Suspense(已发布，)</li></ul><ul data-lake-indent=\"2\"><li>(已发布) Suspense for Code Splitting，结合 React.lazy 实现 Code-Splitting, 达到动态加载组件的目的，见 React v16.6.0</li></ul><ul data-lake-indent=\"3\"><li>同时 React v16.6.0 新增了一个专门用于性能优化的 API：React.memo, 类似于 PureComponent, React.memo 针对于 function component，执行对 props 的浅比较</li></ul><ul data-lake-indent=\"2\"><li>(React 16.9) Suspense for Data Fetching</li></ul><ul data-lake-indent=\"1\"><li>(React 16.9) Concurrent Rendering: 并发渲染</li></ul><blockquote><p>本期评论员：React近期的趋势是要代码更少、运行更快，来解决日益庞大的应用带来的问题，目前可以入手动态加载组件的功能了，有性能瓶颈的项目可以应用一试了</p></blockquote><ol start=\"2\"><li>Create-React-App 2.0 发布</li><ul data-lake-indent=\"1\"><li>更新到 webpack 4, Babel 7, 支持 React v16的最新版语法</li></ul><ul data-lake-indent=\"1\"><li>支持 SCSS 和 CSS Modules</li></ul><ul data-lake-indent=\"1\"><li>v2.1 时, 新增了 TypeScript 支持</li></ul><blockquote><p>本期评论员：2.0 加入了很多新的功能，尤其 TypeScript 支持。学习搭建脚手架和链路工具可以算得上一个很好的模版</p></blockquote><ol start=\"3\"><li>React Native发布重构路线图，期望让RN更轻量，更适应 JavaScript 生态圈的发展</li><ul data-lake-indent=\"1\"><li>同期关注 Flutter</li></ul><blockquote><p>本期评论员：大前端的概念已经提了很久了，只说终端方向，尤其是RN、Flutter、Electron的出现，甚至包含嵌入式开发，一人精通 Web 和 Native 开发可能是一个越来越强烈的趋势</p></blockquote><ol start=\"4\"><li>Vue 3.0 开发路线</li><ul data-lake-indent=\"1\"><li>最大的部分是渲染函数中使用的 Virtual DOM 格式（美其名曰博众家之长吧）</li></ul><ul data-lake-indent=\"1\"><li>更全面的使用 TypeScript</li></ul><ol start=\"5\"><li>Angular 7.0 发布</li><ul data-lake-indent=\"1\"><li>跨整个平台的大版本，包括核心框架、Angular Material 和与主版本同步的CLI</li></ul><ol start=\"6\"><li>Node.js 11发布，Node 10正式进入LTS，alinode-v4.5.0也进行了支持</li><ul data-lake-indent=\"1\"><li>v11 支持 V8 新发布的 v7.0</li></ul><ol start=\"7\"><li>Chrome 70 正式版发布：windows端将支持PWA\n<blockquote><p>本期评论员：拥抱 PWA，今天前端应用越来越庞大，离线和性能的要求就日益凸显，PWA 也在得到各大浏览器厂商的支持，有需可入坑</p></blockquote></li></ol><ol start=\"8\"><li>Taro 全面支持微信/百度/支付宝小程序\n<blockquote><p>本期评论员：小程序现在处于混战阶段，各类小程序层出不穷，业界确实有场景，有痛点，应用角度上有此需求的开发同学可以入手尝试一下，不失为提高人效的一种方案。但是小程序也在不断演进，坑也肯定特别多。从技术角度来讲个人并不看好这样的集成框架</p></blockquote></li></ol><ol start=\"9\"><li>top programming languages of 2018</li><ul data-lake-indent=\"1\"><li><a href=\"https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/\" target=\"_blank\">https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/</a></li></ul><ul data-lake-indent=\"1\"><li>TypeScript 增长迅速，是一种开发友好，运营也很好的语法集合，值得拥有</li></ul><ul data-lake-indent=\"1\"><li>增长迅速的语言的一些特点</li></ul><ul data-lake-indent=\"2\"><li>Type safety 类型安全</li></ul><ul data-lake-indent=\"3\"><li>Python</li></ul><ul data-lake-indent=\"3\"><li>TypeScript</li></ul><ul data-lake-indent=\"3\"><li>Kotlin</li></ul><ul data-lake-indent=\"2\"><li>Interoperability 互通</li></ul><ul data-lake-indent=\"3\"><li>TypeScript <-> Javascript/ES</li></ul><ul data-lake-indent=\"3\"><li>Rust & Kotlin <-> C & java</li></ul><ul data-lake-indent=\"3\"><li>Python <-> ...</li></ul><ul data-lake-indent=\"2\"><li>Open Source 开源</li></ul><blockquote><p>本期评论员：越来越多的成熟的语言特性被引入到前端开发中，从增长趋势来看 TypeScript 势头迅猛，ES超集无缝切换，友好的学习曲线，静态类型检查，类Java 和 C# 的严谨语言结构，受到大批程序员的青睐</p></blockquote><ol start=\"10\"><li>一篇介绍 TypeScript 开发指南</li><ul data-lake-indent=\"1\"><li><a href=\"https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/\" target=\"_blank\">https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/</a></li></ul><blockquote><p>本期评论员：TS 风头正劲，赶紧来学习下吧，相信你会爱不释手</p></blockquote><ol start=\"11\"><li>Github 仓库数量破亿了</li><ul data-lake-indent=\"1\"><li><a href=\"https://blog.github.com/2018-11-08-100M-repos/\" target=\"_blank\">https://blog.github.com/2018-11-08-100M-repos/</a></li></ul><p><br /></p><h3>未来关注</h3><p><br /></p><ol start=\"1\"><li>HTTP 3</li><ul data-lake-indent=\"1\"><li>博文<a href=\"https://dev.to/grigorkh/what-is-http3--4pib\" target=\"_blank\">https://dev.to/grigorkh/what-is-http3--4pib</a></li></ul><ul data-lake-indent=\"1\"><li>官宣<a href=\"https://mailarchive.ietf.org/arch/msg/quic/RLRs4nB1lwFCZ_7k0iuz0ZBa35s\" target=\"_blank\">https://mailarchive.ietf.org/arch/msg/quic/RLRs4nB1lwFCZ_7k0iuz0ZBa35s</a></li></ul><ol start=\"2\"><li>Google 推出 Virtual Scroller，拯救web长列表，(研发阶段)</li><ul data-lake-indent=\"1\"><li>掘金<a href=\"https://juejin.im/entry/5bf495d76fb9a049f23c5eac\" target=\"_blank\">https://juejin.im/entry/5bf495d76fb9a049f23c5eac</a></li></ul><ol start=\"3\"><li>Webkit 推出新的图形着色语言 whlsl（初级阶段）</li><ul data-lake-indent=\"1\"><li>对 HLSL（DirectX的高级着色语言） 的拓展</li></ul><ul data-lake-indent=\"1\"><li>Github仓库<a href=\"https://github.com/gpuweb/WHLSL\" target=\"_blank\">https://github.com/gpuweb/WHLSL</a></li></ul></ol></ol></ol></ol></ol></ol></ol></ol></ol></ol></ol></ol>",
"body_lake": "<!doctype lake><p>前端小报 - 201810-11 月刊（包含部分10月份内容）</p><p><br /></p><blockquote><p>订阅小报：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p>本期小编：<a href=\"https://github.com/damujiangr\" target=\"_blank\">damujiangr (墨止)</a></p></blockquote><p><br /></p><h3 id=\"b506cde4\"><cursor />内容提要</h3><p><br /></p><ol start=\"1\"><li>React Conf概况：</li><ul data-lake-indent=\"1\"><li>(React 16.7) React Hook：声称不使用 Class 就可以使用 React 的大部分功能，采用逐步推广的策略</li></ul><ul data-lake-indent=\"1\"><li>Suspense(已发布，)</li></ul><ul data-lake-indent=\"2\"><li>(已发布) Suspense for Code Splitting，结合 React.lazy 实现 Code-Splitting, 达到动态加载组件的目的，见 React v16.6.0</li></ul><ul data-lake-indent=\"3\"><li>同时 React v16.6.0 新增了一个专门用于性能优化的 API：React.memo, 类似于 PureComponent, React.memo 针对于 function component，执行对 props 的浅比较</li></ul><ul data-lake-indent=\"2\"><li>(React 16.9) Suspense for Data Fetching</li></ul><ul data-lake-indent=\"1\"><li>(React 16.9) Concurrent Rendering: 并发渲染</li></ul><blockquote><p>本期评论员：React近期的趋势是要代码更少、运行更快，来解决日益庞大的应用带来的问题，目前可以入手动态加载组件的功能了，有性能瓶颈的项目可以应用一试了</p></blockquote><ol start=\"2\"><li>Create-React-App 2.0 发布</li><ul data-lake-indent=\"1\"><li>更新到 webpack 4, Babel 7, 支持 React v16的最新版语法</li></ul><ul data-lake-indent=\"1\"><li>支持 SCSS 和 CSS Modules</li></ul><ul data-lake-indent=\"1\"><li>v2.1 时, 新增了 TypeScript 支持</li></ul><blockquote><p>本期评论员：2.0 加入了很多新的功能，尤其 TypeScript 支持。学习搭建脚手架和链路工具可以算得上一个很好的模版</p></blockquote><ol start=\"3\"><li>React Native发布重构路线图，期望让RN更轻量，更适应 JavaScript 生态圈的发展</li><ul data-lake-indent=\"1\"><li>同期关注 Flutter</li></ul><blockquote><p>本期评论员：大前端的概念已经提了很久了，只说终端方向，尤其是RN、Flutter、Electron的出现，甚至包含嵌入式开发，一人精通 Web 和 Native 开发可能是一个越来越强烈的趋势</p></blockquote><ol start=\"4\"><li>Vue 3.0 开发路线</li><ul data-lake-indent=\"1\"><li>最大的部分是渲染函数中使用的 Virtual DOM 格式（美其名曰博众家之长吧）</li></ul><ul data-lake-indent=\"1\"><li>更全面的使用 TypeScript</li></ul><ol start=\"5\"><li>Angular 7.0 发布</li><ul data-lake-indent=\"1\"><li>跨整个平台的大版本，包括核心框架、Angular Material 和与主版本同步的CLI</li></ul><ol start=\"6\"><li>Node.js 11发布，Node 10正式进入LTS，alinode-v4.5.0也进行了支持</li><ul data-lake-indent=\"1\"><li>v11 支持 V8 新发布的 v7.0</li></ul><ol start=\"7\"><li>Chrome 70 正式版发布：windows端将支持PWA\n<blockquote><p>本期评论员：拥抱 PWA，今天前端应用越来越庞大，离线和性能的要求就日益凸显，PWA 也在得到各大浏览器厂商的支持，有需可入坑</p></blockquote></li></ol><ol start=\"8\"><li>Taro 全面支持微信/百度/支付宝小程序\n<blockquote><p>本期评论员：小程序现在处于混战阶段，各类小程序层出不穷，业界确实有场景，有痛点，应用角度上有此需求的开发同学可以入手尝试一下，不失为提高人效的一种方案。但是小程序也在不断演进，坑也肯定特别多。从技术角度来讲个人并不看好这样的集成框架</p></blockquote></li></ol><ol start=\"9\"><li>top programming languages of 2018</li><ul data-lake-indent=\"1\"><li><a href=\"https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/\" target=\"_blank\">https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/</a></li></ul><ul data-lake-indent=\"1\"><li>TypeScript 增长迅速，是一种开发友好，运营也很好的语法集合，值得拥有</li></ul><ul data-lake-indent=\"1\"><li>增长迅速的语言的一些特点</li></ul><ul data-lake-indent=\"2\"><li>Type safety 类型安全</li></ul><ul data-lake-indent=\"3\"><li>Python</li></ul><ul data-lake-indent=\"3\"><li>TypeScript</li></ul><ul data-lake-indent=\"3\"><li>Kotlin</li></ul><ul data-lake-indent=\"2\"><li>Interoperability 互通</li></ul><ul data-lake-indent=\"3\"><li>TypeScript <-> Javascript/ES</li></ul><ul data-lake-indent=\"3\"><li>Rust & Kotlin <-> C & java</li></ul><ul data-lake-indent=\"3\"><li>Python <-> ...</li></ul><ul data-lake-indent=\"2\"><li>Open Source 开源</li></ul><blockquote><p>本期评论员：越来越多的成熟的语言特性被引入到前端开发中，从增长趋势来看 TypeScript 势头迅猛，ES超集无缝切换，友好的学习曲线，静态类型检查，类Java 和 C# 的严谨语言结构，受到大批程序员的青睐</p></blockquote><ol start=\"10\"><li>一篇介绍 TypeScript 开发指南</li><ul data-lake-indent=\"1\"><li><a href=\"https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/\" target=\"_blank\">https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/</a></li></ul><blockquote><p>本期评论员：TS 风头正劲，赶紧来学习下吧，相信你会爱不释手</p></blockquote><ol start=\"11\"><li>Github 仓库数量破亿了</li><ul data-lake-indent=\"1\"><li><a href=\"https://blog.github.com/2018-11-08-100M-repos/\" target=\"_blank\">https://blog.github.com/2018-11-08-100M-repos/</a></li></ul><p><br /></p><h3>未来关注</h3><p><br /></p><ol start=\"1\"><li>HTTP 3</li><ul data-lake-indent=\"1\"><li>博文<a href=\"https://dev.to/grigorkh/what-is-http3--4pib\" target=\"_blank\">https://dev.to/grigorkh/what-is-http3--4pib</a></li></ul><ul data-lake-indent=\"1\"><li>官宣<a href=\"https://mailarchive.ietf.org/arch/msg/quic/RLRs4nB1lwFCZ_7k0iuz0ZBa35s\" target=\"_blank\">https://mailarchive.ietf.org/arch/msg/quic/RLRs4nB1lwFCZ_7k0iuz0ZBa35s</a></li></ul><ol start=\"2\"><li>Google 推出 Virtual Scroller，拯救web长列表，(研发阶段)</li><ul data-lake-indent=\"1\"><li>掘金<a href=\"https://juejin.im/entry/5bf495d76fb9a049f23c5eac\" target=\"_blank\">https://juejin.im/entry/5bf495d76fb9a049f23c5eac</a></li></ul><ol start=\"3\"><li>Webkit 推出新的图形着色语言 whlsl（初级阶段）</li><ul data-lake-indent=\"1\"><li>对 HLSL（DirectX的高级着色语言） 的拓展</li></ul><ul data-lake-indent=\"1\"><li>Github仓库<a href=\"https://github.com/gpuweb/WHLSL\" target=\"_blank\">https://github.com/gpuweb/WHLSL</a></li></ul></ol></ol></ol></ol></ol></ol></ol></ol></ol></ol></ol></ol>",
"public": 1,
"status": 1,
"likes_count": 0,
"comments_count": 0,
"content_updated_at": "2019-02-03T02:28:35.000Z",
"deleted_at": null,
"created_at": "2019-02-03T02:22:44.000Z",
"updated_at": "2019-04-30T03:24:51.000Z",
"published_at": "2019-02-03T06:09:40.000Z",
"first_published_at": "2019-02-03T02:25:10.000Z",
"word_count": 1023,
"cover": "",
"description": "前端小报 - 201810-11 月刊（包含部分10月份内容）订阅小报：https://github.com/txd-team/monthly本期小编：damujiangr (墨止)内容提要React Conf概况：(React 16.7) React Hook：声称不使用 Class 就可以...",
"custom_description": "前端小报 - 201810-11 月刊（包含部分10月份内容） 订阅小报：https://github.com/txd-team/monthly 本期小编：damujiangr (墨止) 内容提要 React Conf概况： (React 16.7) React Hook：声称不使用 Clas...",
"_serializer": "v2.doc_detail"
},
{
"id": 1226362,
"slug": "201809",
"title": "201809",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 9,
"likes_count": 0,
"watches_count": 22,
"content_updated_at": "2019-06-03T01:18:59.604Z",
"updated_at": "2019-06-03T01:18:59.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 103147,
"creator": {
"id": 103147,
"type": "User",
"login": "yinzhi",
"name": "尹挚 (x-cold)",
"description": "https://github.com/x-cold",
"avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 15,
"public_books_count": 9,
"followers_count": 46,
"following_count": 19,
"created_at": "2018-04-23T00:50:24.000Z",
"updated_at": "2019-05-30T09:14:59.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "前端小报 - 201809 月刊\n\n> 订阅小报：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly)\n\n> 本期小编：[roymellon (绘萌)](https://github.com/roymellon)\n\n\n<a name=\"447160dc\"></a>\n### 近期新闻：\n\n- [Babel 7 发布上线](https://babeljs.io/blog/2018/08/27/7.0.0)\n - 不再支持官方不维护的Node.js版本（0.10, 0.12, 4, 5）\n - 移除了一些低版本preset(比如 `preset-2015` )\n - 移除一些低版本的stage(比如 `@babel/preset-stage-0` )\n - 默认移除 `@babel/polyfill`\n - 使用 babel.config.js 替换 .babelrc文件，\n - 支持更多草案内容 TC39\n - 支持TypeScript\n - 构建速度提升\n- [React 16.5.0](https://github.com/facebook/react/blob/master/CHANGELOG.md) 已提交主干，暂未发布。都是些bug修复，很多特性都没用过，有兴趣的可以看看。\n- [GitHub Release Radar](https://blog.github.com/2018-08-17-release-radar-july-2018/) GitHub 会收集当月发布的一些框架/库，不限于前端，可以长期订阅\n- [Uber可视化平台 Maze](https://eng.uber.com/maze/) 定义了很多事件，寻求其中的关系，来优化信息路径\n- [音频操作库 Tone.js](https://github.com/Tonejs/Tone.js) 可以用js创作电子音频了：）可以指定乐器、特效\n- [首届中国React开发者大会](https://fequan.com/2018/) ppt可以在官网查看 [相关视频](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)\n- [第四届FEDAY](https://fequan.com/2018/) ppt可以在官网查看\n- [Google I/O 2018 前端性能解决方案](https://developers.google.com/web/updates/2018/08/web-performance-made-easy)\n\n\n\n[Lighthouse (Chrome devTools) ](https://developers.google.com/web/tools/lighthouse/) 用来衡量页面性能，提供基础指标及优化建议<br />\n[Guess.js](https://github.com/guess-js/guess) 使用机器学习 + 行为数据来度量用户体验\n\n- [前端下半场：构建跨框架UI库](https://www.phodal.com/blog/build-cross-framework-ui-library/)<br />\n提出了一个观点，UI框架太多，特性也不一样，技术层面应该可以相关调用。并且给了个例子 React中引入一个Angular组件，和Angular中引入React组件。<br />\n思考：是一个不错的思路，只是现在有些不够成熟（比如文件过大，语义不明确，版本更新等），而且使用场景较小，为啥不用一个技术栈呢...\n- [微前端的设计理念和初探](https://zhuanlan.zhihu.com/p/41879781)<br />\n对应的微服务概念，把一个大应用拆分为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。<br />\n思考：Emmm, 大应用。貌似我们的应用都比较小，或者天然的都拆分好了... 基于npm的形式去合作，看看就好。\n- [Github 宣布移除 jQuery技术栈](https://githubengineering.com/removing-jquery-from-github-frontend/)<br />\n早期用jQuery是因为解决了浏览器兼容性问题，还有方便的ajax，现在都有原生的和替代方案。<br />\n使用eslint规则来追踪jQuery的使用，并且有相应的polyfill来兼容一些写法。<br />\n思考：我们的一些业务也有jQuery的，有很多页面都不会再改了，所以就没理它们。以后会改么?\n- [Dropbox 从underscore迁移到lodash](https://blogs.dropbox.com/tech/2018/09/migrating-from-underscore-to-lodash/)<br />\n又一个迁移，underscore不更新了... lodash可以独立引用功能，也有大量新方法（相比于underscore, 其实lodash更新的也不频繁）\n- [可视化&图表库收集](https://www.codewall.co.uk/the-best-javascript-data-visualization-charting-libraries/) 确实有很多酷炫的，我们推荐使用 [AISC图表组件](http://aisc.alibaba-inc.com/site/pc#/cate/4/page/95)，如果有特殊需求联系 业枫。蚂蚁的[AntV](https://antv.alipay.com/zh-cn/index.html) 也不错\n- Javascript Robotics & IoT platform, [Johnny-five](http://johnny-five.io/), 支持树莓派等硬件\n\n\n\n\n\n<a name=\"cc81d669\"></a>\n### TOPIC1 [2018 网页开发初学者学什么？](https://zendev.com/2018/08/14/learning-web-development-2018.html)\n\n\n\n文中提到了web developer的一种迷茫，新技术太多了，变化太快了，需要学的太多了。<br />\n判断是否要学习三个维度，是否感兴趣 Motivation / 是否有发展 Momentum / 是否有前途及发展 Money。<br />\n最后文章做出了自己的判断 VUE及REACT 发展程度比较好，REACT比较有前途。（我们这边都是REACT ~）\n\n<a name=\"8f60080c\"></a>\n### TOPIC2 [我们为什么需要一个统一的开发框架？](https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488436&idx=1&sn=b22a02c590ea1b2e85ece70ff0ee2d1e)\n\n技术栈不统一真是一个很普遍的事，前端尤为严重。文章先说了一下起因，业务小团队自我繁衍，部门扩大的时候尽量减少对外依赖（不然怎么升的上去），不断新的产品和新的尝试。<br />\n接着说影响，资源浪费、人员储备困难、很难互助、无法形成高效的开发模式，集成度不高。如果能有统一的开发框架，那么可以避免重复技术研究、标准化技术规范、深入技术沉淀。对研发团队有效的管理和考核。（怎么衡量一个川菜厨师和一个鲁菜厨师谁更优秀？）<br />\n用Java的spring cloud, 作为一个例子提了一下，如何做一个统一的开发框架。\n",
"body_draft": "",
"body_html": "<p>前端小报 - 201809 月刊</p><p><br /></p><blockquote><p>订阅小报：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p>本期小编：<a href=\"https://github.com/roymellon\" target=\"_blank\">roymellon (绘萌)</a></p></blockquote><p><br /></p><h3 id=\"447160dc\">近期新闻：</h3><p><br /></p><ul><li><a href=\"https://babeljs.io/blog/2018/08/27/7.0.0\" target=\"_blank\">Babel 7 发布上线</a></li></ul><ul data-lake-indent=\"1\"><li>不再支持官方不维护的Node.js版本（<span style=\"color: #24292E;\">0.10, 0.12, 4, 5</span>）</li></ul><ul data-lake-indent=\"1\"><li>移除了一些低版本preset(比如 <code>preset-2015</code> )</li></ul><ul data-lake-indent=\"1\"><li>移除一些低版本的stage(比如 <code>@babel/preset-stage-0</code> )</li></ul><ul data-lake-indent=\"1\"><li>默认移除 <code>@babel/polyfill</code></li></ul><ul data-lake-indent=\"1\"><li>使用 babel.config.js 替换 .babelrc文件，</li></ul><ul data-lake-indent=\"1\"><li>支持更多草案内容 TC39</li></ul><ul data-lake-indent=\"1\"><li>支持TypeScript</li></ul><ul data-lake-indent=\"1\"><li>构建速度提升</li></ul><ul><li><a href=\"https://github.com/facebook/react/blob/master/CHANGELOG.md\" target=\"_blank\">React 16.5.0</a> 已提交主干，暂未发布。都是些bug修复，很多特性都没用过，有兴趣的可以看看。</li></ul><ul><li><a href=\"https://blog.github.com/2018-08-17-release-radar-july-2018/\" target=\"_blank\">GitHub Release Radar</a> GitHub 会收集当月发布的一些框架/库，不限于前端，可以长期订阅</li></ul><ul><li><a href=\"https://eng.uber.com/maze/\" target=\"_blank\">Uber可视化平台 Maze</a> 定义了很多事件，寻求其中的关系，来优化信息路径</li></ul><ul><li><a href=\"https://github.com/Tonejs/Tone.js\" target=\"_blank\">音频操作库 Tone.js</a> 可以用js创作电子音频了：）可以指定乐器、特效</li></ul><ul><li><a href=\"https://fequan.com/2018/\" target=\"_blank\">首届中国React开发者大会</a> ppt可以在官网查看 <a href=\"https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw\" target=\"_blank\">相关视频</a></li></ul><ul><li><a href=\"https://fequan.com/2018/\" target=\"_blank\">第四届FEDAY</a> ppt可以在官网查看</li></ul><ul><li><a href=\"https://developers.google.com/web/updates/2018/08/web-performance-made-easy\" target=\"_blank\">Google I/O 2018 前端性能解决方案</a></li></ul><p><br /></p><p><img src=\"https://cdn.nlark.com/lark/0/2018/png/2820/1536568303355-dfcffdd5-3cf4-44e9-bb57-19d21dff0959.png#align=left&display=inline&height=218&originHeight=338&originWidth=800&width=517\" style=\"max-width: 600px; width: 517px;\" /></p><p><br /></p><p><a href=\"https://developers.google.com/web/tools/lighthouse/\" target=\"_blank\">Lighthouse (Chrome devTools) </a> 用来衡量页面性能，提供基础指标及优化建议<br />\n<a href=\"https://github.com/guess-js/guess\" target=\"_blank\">Guess.js</a> 使用机器学习 + 行为数据来度量用户体验</p><p><br /></p><ul><li><a href=\"https://www.phodal.com/blog/build-cross-framework-ui-library/\" target=\"_blank\">前端下半场：构建跨框架UI库</a><br />\n提出了一个观点，UI框架太多，特性也不一样，技术层面应该可以相关调用。并且给了个例子 React中引入一个Angular组件，和Angular中引入React组件。<br />\n思考：是一个不错的思路，只是现在有些不够成熟（比如文件过大，语义不明确，版本更新等），而且使用场景较小，为啥不用一个技术栈呢...</li></ul><ul><li><a href=\"https://zhuanlan.zhihu.com/p/41879781\" target=\"_blank\">微前端的设计理念和初探</a><br />\n对应的微服务概念，把一个大应用拆分为多个<span style=\"color: #1A1A1A;\"><span style=\"background-color: #FFFFFF;\">可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。</span></span><br />\n思考：Emmm, 大应用。貌似我们的应用都比较小，或者天然的都拆分好了... 基于npm的形式去合作，看看就好。</li></ul><ul><li><a href=\"https://githubengineering.com/removing-jquery-from-github-frontend/\" target=\"_blank\">Github 宣布移除 jQuery技术栈</a><br />\n早期用jQuery是因为解决了浏览器兼容性问题，还有方便的ajax，现在都有原生的和替代方案。<br />\n使用eslint规则来追踪jQuery的使用，并且有相应的polyfill来兼容一些写法。<br />\n思考：我们的一些业务也有jQuery的，有很多页面都不会再改了，所以就没理它们。以后会改么?</li></ul><ul><li><a href=\"https://blogs.dropbox.com/tech/2018/09/migrating-from-underscore-to-lodash/\" target=\"_blank\">Dropbox 从underscore迁移到lodash</a><br />\n又一个迁移，underscore不更新了... lodash可以独立引用功能，也有大量新方法（相比于underscore, 其实lodash更新的也不频繁）</li></ul><ul><li><a href=\"https://www.codewall.co.uk/the-best-javascript-data-visualization-charting-libraries/\" target=\"_blank\">可视化&图表库收集</a> 确实有很多酷炫的，我们推荐使用 <a href=\"http://aisc.alibaba-inc.com/site/pc#/cate/4/page/95\" target=\"_blank\">AISC图表组件</a>，如果有特殊需求联系 业枫。蚂蚁的<a href=\"https://antv.alipay.com/zh-cn/index.html\" target=\"_blank\">AntV</a> 也不错</li></ul><ul><li>Javascript Robotics & IoT platform, <a href=\"http://johnny-five.io/\" target=\"_blank\">Johnny-five</a>, 支持树莓派等硬件</li></ul><p><br /></p><p><img src=\"https://cdn.nlark.com/lark/0/2018/png/2820/1536569527635-09306391-ec20-48f6-a0c7-3d18f8d4e7a8.png#align=left&display=inline&height=243&originHeight=317&originWidth=722&width=553\" style=\"max-width: 600px; width: 553px;\" /></p><p><br /></p><p><img src=\"https://cdn.nlark.com/lark/0/2018/png/2820/1536569541895-fdb133b7-7822-4567-9342-5f2b690f8021.png#align=left&display=inline&height=335&originHeight=810&originWidth=795&width=329\" style=\"max-width: 600px; width: 329px;\" /></p><p><br /></p><h3 id=\"cc81d669\">TOPIC1 <a href=\"https://zendev.com/2018/08/14/learning-web-development-2018.html\" target=\"_blank\">2018 网页开发初学者学什么？</a></h3><p><br /></p><p><img src=\"https://cdn.nlark.com/lark/0/2018/png/2820/1536561535910-4ca6160e-3655-4f26-b2bc-dd48fd6096fd.png#align=left&display=inline&height=175&originHeight=600&originWidth=1200&width=350\" style=\"max-width: 600px; width: 350px;\" /></p><p><br /></p><p>文中提到了web developer的一种迷茫，新技术太多了，变化太快了，需要学的太多了。<br />\n判断是否要学习三个维度，是否感兴趣 Motivation / 是否有发展 Momentum / 是否有前途及发展 Money。<br />\n最后文章做出了自己的判断 VUE及REACT 发展程度比较好，REACT比较有前途。（我们这边都是REACT ~）</p><p><br /></p><h3 id=\"8f60080c\">TOPIC2 <a href=\"https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488436&idx=1&sn=b22a02c590ea1b2e85ece70ff0ee2d1e\" target=\"_blank\">我们为什么需要一个统一的开发框架？</a></h3><p><br /></p><p>技术栈不统一真是一个很普遍的事，前端尤为严重。文章先说了一下起因，业务小团队自我繁衍，部门扩大的时候尽量减少对外依赖（不然怎么升的上去），不断新的产品和新的尝试。<br />\n接着说影响，资源浪费、人员储备困难、很难互助、无法形成高效的开发模式，集成度不高。如果能有统一的开发框架，那么可以避免重复技术研究、标准化技术规范、深入技术沉淀。对研发团队有效的管理和考核。（<span style=\"color: #4A4A4A;\"><span style=\"background-color: #FFFFFF;\">怎么衡量一个川菜厨师和一个鲁菜厨师谁更优秀？</span></span>）<br />\n用Java的spring cloud, 作为一个例子提了一下，如何做一个统一的开发框架。</p>",
"body_lake": "<!doctype lake><p>前端小报 - 201809 月刊</p><p><br /></p><blockquote><p>订阅小报：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p><cursor />本期小编：<a href=\"https://github.com/roymellon\" target=\"_blank\">roymellon (绘萌)</a></p></blockquote><p><br /></p><h3 id=\"447160dc\">近期新闻：</h3><p><br /></p><ul><li><a href=\"https://babeljs.io/blog/2018/08/27/7.0.0\" target=\"_blank\">Babel 7 发布上线</a></li></ul><ul data-lake-indent=\"1\"><li>不再支持官方不维护的Node.js版本（<span style=\"color: #24292E;\">0.10, 0.12, 4, 5</span>）</li></ul><ul data-lake-indent=\"1\"><li>移除了一些低版本preset(比如 <code>preset-2015</code> )</li></ul><ul data-lake-indent=\"1\"><li>移除一些低版本的stage(比如 <code>@babel/preset-stage-0</code> )</li></ul><ul data-lake-indent=\"1\"><li>默认移除 <code>@babel/polyfill</code></li></ul><ul data-lake-indent=\"1\"><li>使用 babel.config.js 替换 .babelrc文件，</li></ul><ul data-lake-indent=\"1\"><li>支持更多草案内容 TC39</li></ul><ul data-lake-indent=\"1\"><li>支持TypeScript</li></ul><ul data-lake-indent=\"1\"><li>构建速度提升</li></ul><ul><li><a href=\"https://github.com/facebook/react/blob/master/CHANGELOG.md\" target=\"_blank\">React 16.5.0</a> 已提交主干，暂未发布。都是些bug修复，很多特性都没用过，有兴趣的可以看看。</li></ul><ul><li><a href=\"https://blog.github.com/2018-08-17-release-radar-july-2018/\" target=\"_blank\">GitHub Release Radar</a> GitHub 会收集当月发布的一些框架/库，不限于前端，可以长期订阅</li></ul><ul><li><a href=\"https://eng.uber.com/maze/\" target=\"_blank\">Uber可视化平台 Maze</a> 定义了很多事件，寻求其中的关系，来优化信息路径</li></ul><ul><li><a href=\"https://github.com/Tonejs/Tone.js\" target=\"_blank\">音频操作库 Tone.js</a> 可以用js创作电子音频了：）可以指定乐器、特效</li></ul><ul><li><a href=\"https://fequan.com/2018/\" target=\"_blank\">首届中国React开发者大会</a> ppt可以在官网查看 <a href=\"https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw\" target=\"_blank\">相关视频</a></li></ul><ul><li><a href=\"https://fequan.com/2018/\" target=\"_blank\">第四届FEDAY</a> ppt可以在官网查看</li></ul><ul><li><a href=\"https://developers.google.com/web/updates/2018/08/web-performance-made-easy\" target=\"_blank\">Google I/O 2018 前端性能解决方案</a></li></ul><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Flark%2F0%2F2018%2Fpng%2F2820%2F1536568303355-dfcffdd5-3cf4-44e9-bb57-19d21dff0959.png%22%2C%22originWidth%22%3A800%2C%22originHeight%22%3A338%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A517%2C%22height%22%3A218%7D\"></card></p><p><br /></p><p><a href=\"https://developers.google.com/web/tools/lighthouse/\" target=\"_blank\">Lighthouse (Chrome devTools) </a> 用来衡量页面性能，提供基础指标及优化建议<br />\n<a href=\"https://github.com/guess-js/guess\" target=\"_blank\">Guess.js</a> 使用机器学习 + 行为数据来度量用户体验</p><p><br /></p><ul><li><a href=\"https://www.phodal.com/blog/build-cross-framework-ui-library/\" target=\"_blank\">前端下半场：构建跨框架UI库</a><br />\n提出了一个观点，UI框架太多，特性也不一样，技术层面应该可以相关调用。并且给了个例子 React中引入一个Angular组件，和Angular中引入React组件。<br />\n思考：是一个不错的思路，只是现在有些不够成熟（比如文件过大，语义不明确，版本更新等），而且使用场景较小，为啥不用一个技术栈呢...</li></ul><ul><li><a href=\"https://zhuanlan.zhihu.com/p/41879781\" target=\"_blank\">微前端的设计理念和初探</a><br />\n对应的微服务概念，把一个大应用拆分为多个<span style=\"color: #1A1A1A;\"><span style=\"background-color: #FFFFFF;\">可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。</span></span><br />\n思考：Emmm, 大应用。貌似我们的应用都比较小，或者天然的都拆分好了... 基于npm的形式去合作，看看就好。</li></ul><ul><li><a href=\"https://githubengineering.com/removing-jquery-from-github-frontend/\" target=\"_blank\">Github 宣布移除 jQuery技术栈</a><br />\n早期用jQuery是因为解决了浏览器兼容性问题，还有方便的ajax，现在都有原生的和替代方案。<br />\n使用eslint规则来追踪jQuery的使用，并且有相应的polyfill来兼容一些写法。<br />\n思考：我们的一些业务也有jQuery的，有很多页面都不会再改了，所以就没理它们。以后会改么?</li></ul><ul><li><a href=\"https://blogs.dropbox.com/tech/2018/09/migrating-from-underscore-to-lodash/\" target=\"_blank\">Dropbox 从underscore迁移到lodash</a><br />\n又一个迁移，underscore不更新了... lodash可以独立引用功能，也有大量新方法（相比于underscore, 其实lodash更新的也不频繁）</li></ul><ul><li><a href=\"https://www.codewall.co.uk/the-best-javascript-data-visualization-charting-libraries/\" target=\"_blank\">可视化&图表库收集</a> 确实有很多酷炫的，我们推荐使用 <a href=\"http://aisc.alibaba-inc.com/site/pc#/cate/4/page/95\" target=\"_blank\">AISC图表组件</a>，如果有特殊需求联系 业枫。蚂蚁的<a href=\"https://antv.alipay.com/zh-cn/index.html\" target=\"_blank\">AntV</a> 也不错</li></ul><ul><li>Javascript Robotics & IoT platform, <a href=\"http://johnny-five.io/\" target=\"_blank\">Johnny-five</a>, 支持树莓派等硬件</li></ul><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Flark%2F0%2F2018%2Fpng%2F2820%2F1536569527635-09306391-ec20-48f6-a0c7-3d18f8d4e7a8.png%22%2C%22originWidth%22%3A722%2C%22originHeight%22%3A317%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A553%2C%22height%22%3A243%7D\"></card></p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Flark%2F0%2F2018%2Fpng%2F2820%2F1536569541895-fdb133b7-7822-4567-9342-5f2b690f8021.png%22%2C%22originWidth%22%3A795%2C%22originHeight%22%3A810%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A329%2C%22height%22%3A335%7D\"></card></p><p><br /></p><h3 id=\"cc81d669\">TOPIC1 <a href=\"https://zendev.com/2018/08/14/learning-web-development-2018.html\" target=\"_blank\">2018 网页开发初学者学什么？</a></h3><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Flark%2F0%2F2018%2Fpng%2F2820%2F1536561535910-4ca6160e-3655-4f26-b2bc-dd48fd6096fd.png%22%2C%22originWidth%22%3A1200%2C%22originHeight%22%3A600%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A350%2C%22height%22%3A175%7D\"></card></p><p><br /></p><p>文中提到了web developer的一种迷茫，新技术太多了，变化太快了，需要学的太多了。<br />\n判断是否要学习三个维度，是否感兴趣 Motivation / 是否有发展 Momentum / 是否有前途及发展 Money。<br />\n最后文章做出了自己的判断 VUE及REACT 发展程度比较好，REACT比较有前途。（我们这边都是REACT ~）</p><p><br /></p><h3 id=\"8f60080c\">TOPIC2 <a href=\"https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488436&idx=1&sn=b22a02c590ea1b2e85ece70ff0ee2d1e\" target=\"_blank\">我们为什么需要一个统一的开发框架？</a></h3><p><br /></p><p>技术栈不统一真是一个很普遍的事，前端尤为严重。文章先说了一下起因，业务小团队自我繁衍，部门扩大的时候尽量减少对外依赖（不然怎么升的上去），不断新的产品和新的尝试。<br />\n接着说影响，资源浪费、人员储备困难、很难互助、无法形成高效的开发模式，集成度不高。如果能有统一的开发框架，那么可以避免重复技术研究、标准化技术规范、深入技术沉淀。对研发团队有效的管理和考核。（<span style=\"color: #4A4A4A;\"><span style=\"background-color: #FFFFFF;\">怎么衡量一个川菜厨师和一个鲁菜厨师谁更优秀？</span></span>）<br />\n用Java的spring cloud, 作为一个例子提了一下，如何做一个统一的开发框架。</p>",
"public": 1,
"status": 1,
"likes_count": 0,
"comments_count": 0,
"content_updated_at": "2019-02-03T02:28:16.000Z",
"deleted_at": null,
"created_at": "2019-02-03T02:22:36.000Z",
"updated_at": "2019-04-30T03:24:51.000Z",
"published_at": "2019-02-03T06:09:48.000Z",
"first_published_at": "2019-02-03T02:25:17.000Z",
"word_count": 1109,
"cover": "",
"description": "前端小报 - 201809 月刊订阅小报：https://github.com/txd-team/monthly本期小编：roymellon (绘萌)近期新闻：Babel 7 发布上线不再支持官方不维护的Node.js版本（0.10, 0.12, 4, 5）移除了一些低版本preset(比如 ...",
"custom_description": "前端小报 - 201809 月刊 订阅小报：https://github.com/txd-team/monthly 本期小编：roymellon (绘萌) 近期新闻： Babel 7 发布上线 不再支持官方不维护的Node.js版本（0.10, 0.12, 4, 5）移除了一些低版本prese...",
"_serializer": "v2.doc_detail"
},
{
"id": 1226357,
"slug": "201808",
"title": "201808",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 9,
"likes_count": 0,
"watches_count": 22,
"content_updated_at": "2019-06-03T01:18:59.604Z",
"updated_at": "2019-06-03T01:18:59.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 103147,
"creator": {
"id": 103147,
"type": "User",
"login": "yinzhi",
"name": "尹挚 (x-cold)",
"description": "https://github.com/x-cold",
"avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 15,
"public_books_count": 9,
"followers_count": 46,
"following_count": 19,
"created_at": "2018-04-23T00:50:24.000Z",
"updated_at": "2019-05-30T09:14:59.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "tags: [前端小报]\n\n---\n\n\n前端小报 - 201808 月刊\n\n> 订阅小报：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly)\n\n> 本期小编：[roymellon (绘萌)](https://github.com/roymellon)\n\n\n<a name=\"c66f54ae\"></a>\n### [Dart 2.0 发布](http://www.infoq.com/cn/news/2018/08/dart2-publish-google)\n\n[Dart](https://www.dartlang.org/guides/language)是一门由Google出品的语言，目标成为移动与Web开发主流语言(语言排行可以参考[Github语言提交榜](https://madnight.github.io/githut/#/pushes/2018/2))。\n\n目前主要应用于Flutter, [Flutter](https://flutterchina.club/)是google推出的移动UI框架(2017.5月推出)，看一看使用场景：\n\n\n\n框架层面PK 会关注哪些方面。\n\n\n\n<a name=\"7418d2c2\"></a>\n### The Cost of Javascript\n\n这个话题自从[Medium](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) 提出后， 在知乎上也有[对应的专栏](https://zhuanlan.zhihu.com/p/41292532)说这个事<br />\n主要观点是：\n\n- JavaScript越来越膨胀了，虽然网络情况越来越好了，但依然有很多极端场景\n- JavaScript是可交互性的大问题，执行速度和文件大小同样都是问题\n- 解决方案 代码分离 + 持续集成（度量与优化、监控）\n\n<a name=\"64759915\"></a>\n### 快速新闻\n\n- 玉伯 [从前端技术进化到体验科技](https://mp.weixin.qq.com/s/IYddaaw2ps1wR2VT1dZWPg) , 我们关注的事和几年前已经不一样了。\n- [GraphQL on server](https://www.joyent.com/blog/graphql-on-the-server), GraphQL是个好东西，一旦按约定形成，可以极大的减少前后端接口定义和联调时间。\n- [Android 9 Pie新特性](https://android-developers.googleblog.com/2018/08/introducing-android-9-pie.html)，不知道什么时候才能体验到..\n- [拼多多为什么崛起](https://mp.weixin.qq.com/s/8C4aCqFhXjw9yMjUlWGKzQ)，难道又是 农村包围城市， 得**者得天下？\n- [TypeScript 3.0](https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/)，我只想知道直接用会不会跪\n\n<a name=\"1f6e9f2d\"></a>\n### 相关资料\n\n- [Dart 官方文档](https://www.dartlang.org/guides/language)\n- [Flutter和RN对比](https://juejin.im/post/5b0607c76fb9a07a9b365556)\n- [超大型Javascript应用设计哲学](https://hijiangtao.github.io/2018/04/20/Designing-Very-Large-JavaScript-Applications/)\n- [如何才能写出好的软件设计文档](https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488261&idx=1&sn=c3adf142043b16599ed5e6e85eb87689)\n",
"body_draft": "",
"body_html": "<p>tags: [前端小报]</p><hr /><p><br /></p><p>前端小报 - 201808 月刊</p><p><br /></p><blockquote><p>订阅小报：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p>本期小编：<a href=\"https://github.com/roymellon\" target=\"_blank\">roymellon (绘萌)</a></p></blockquote><p><br /></p><h3 id=\"c66f54ae\"><a href=\"http://www.infoq.com/cn/news/2018/08/dart2-publish-google\" target=\"_blank\">Dart 2.0 发布</a></h3><p><br /></p><p><a href=\"https://www.dartlang.org/guides/language\" target=\"_blank\">Dart</a>是一门由Google出品的语言，目标成为移动与Web开发主流语言(语言排行可以参考<a href=\"https://madnight.github.io/githut/#/pushes/2018/2\" target=\"_blank\">Github语言提交榜</a>)。</p><p><br /></p><p>目前主要应用于Flutter, <a href=\"https://flutterchina.club/\" target=\"_blank\">Flutter</a>是google推出的移动UI框架(2017.5月推出)，看一看使用场景：</p><p><br /></p><p><img src=\"https://cdn.nlark.com/lark/0/2018/png/2820/1534126451055-91a8d72c-690e-4124-8ede-62aaa2f926b5.png#align=left&display=inline&height=371&originHeight=515&originWidth=1038&status=done&width=747\" style=\"max-width: 600px; width: 747px;\" /></p><p><br /></p><p>框架层面PK 会关注哪些方面。</p><p><br /></p><p><img src=\"https://cdn.nlark.com/lark/0/2018/png/2820/1534126091433-2f3c125c-1502-4ce4-8411-ae45883a9573.png#align=left&display=inline&height=539&originHeight=539&originWidth=664&status=done&width=664\" style=\"max-width: 600px; width: 664px;\" /></p><p><br /></p><h3 id=\"7418d2c2\">The Cost of Javascript</h3><p><br /></p><p>这个话题自从<a href=\"https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4\" target=\"_blank\">Medium</a> 提出后， 在知乎上也有<a href=\"https://zhuanlan.zhihu.com/p/41292532\" target=\"_blank\">对应的专栏</a>说这个事<br />\n主要观点是：</p><p><br /></p><ul><li>JavaScript越来越膨胀了，虽然网络情况越来越好了，但依然有很多极端场景</li></ul><ul><li>JavaScript是可交互性的大问题，执行速度和文件大小同样都是问题</li></ul><ul><li>解决方案 代码分离 + 持续集成（度量与优化、监控）</li></ul><p><br /></p><h3 id=\"64759915\">快速新闻</h3><p><br /></p><ul><li>玉伯 <a href=\"https://mp.weixin.qq.com/s/IYddaaw2ps1wR2VT1dZWPg\" target=\"_blank\">从前端技术进化到体验科技</a> , 我们关注的事和几年前已经不一样了。</li></ul><ul><li><a href=\"https://www.joyent.com/blog/graphql-on-the-server\" target=\"_blank\">GraphQL on server</a>, GraphQL是个好东西，一旦按约定形成，可以极大的减少前后端接口定义和联调时间。</li></ul><ul><li><a href=\"https://android-developers.googleblog.com/2018/08/introducing-android-9-pie.html\" target=\"_blank\">Android 9 Pie新特性</a>，不知道什么时候才能体验到..</li></ul><ul><li><a href=\"https://mp.weixin.qq.com/s/8C4aCqFhXjw9yMjUlWGKzQ\" target=\"_blank\">拼多多为什么崛起</a>，难道又是 农村包围城市， 得**者得天下？</li></ul><ul><li><a href=\"https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/\" target=\"_blank\">TypeScript 3.0</a>，我只想知道直接用会不会跪</li></ul><p><br /></p><h3 id=\"1f6e9f2d\">相关资料</h3><p><br /></p><ul><li><a href=\"https://www.dartlang.org/guides/language\" target=\"_blank\">Dart 官方文档</a></li></ul><ul><li><a href=\"https://juejin.im/post/5b0607c76fb9a07a9b365556\" target=\"_blank\">Flutter和RN对比</a></li></ul><ul><li><a href=\"https://hijiangtao.github.io/2018/04/20/Designing-Very-Large-JavaScript-Applications/\" target=\"_blank\">超大型Javascript应用设计哲学</a></li></ul><ul><li><a href=\"https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488261&idx=1&sn=c3adf142043b16599ed5e6e85eb87689\" target=\"_blank\">如何才能写出好的软件设计文档</a></li></ul>",
"body_lake": "<!doctype lake><p>tags: [前端小报<cursor />]</p><card type=\"block\" name=\"hr\" value=\"data:%7B%22id%22%3A%22ACs8R%22%7D\"></card><p><br /></p><p>前端小报 - 201808 月刊</p><p><br /></p><blockquote><p>订阅小报：<a href=\"https://github.com/txd-team/monthly\" target=\"_blank\">https://github.com/txd-team/monthly</a></p></blockquote><blockquote><p>本期小编：<a href=\"https://github.com/roymellon\" target=\"_blank\">roymellon (绘萌)</a></p></blockquote><p><br /></p><h3 id=\"c66f54ae\"><a href=\"http://www.infoq.com/cn/news/2018/08/dart2-publish-google\" target=\"_blank\">Dart 2.0 发布</a></h3><p><br /></p><p><a href=\"https://www.dartlang.org/guides/language\" target=\"_blank\">Dart</a>是一门由Google出品的语言，目标成为移动与Web开发主流语言(语言排行可以参考<a href=\"https://madnight.github.io/githut/#/pushes/2018/2\" target=\"_blank\">Github语言提交榜</a>)。</p><p><br /></p><p>目前主要应用于Flutter, <a href=\"https://flutterchina.club/\" target=\"_blank\">Flutter</a>是google推出的移动UI框架(2017.5月推出)，看一看使用场景：</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Flark%2F0%2F2018%2Fpng%2F2820%2F1534126451055-91a8d72c-690e-4124-8ede-62aaa2f926b5.png%22%2C%22originWidth%22%3A1038%2C%22originHeight%22%3A515%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A747%2C%22height%22%3A371%7D\"></card></p><p><br /></p><p>框架层面PK 会关注哪些方面。</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Flark%2F0%2F2018%2Fpng%2F2820%2F1534126091433-2f3c125c-1502-4ce4-8411-ae45883a9573.png%22%2C%22originWidth%22%3A664%2C%22originHeight%22%3A539%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A664%2C%22height%22%3A539%7D\"></card></p><p><br /></p><h3 id=\"7418d2c2\">The Cost of Javascript</h3><p><br /></p><p>这个话题自从<a href=\"https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4\" target=\"_blank\">Medium</a> 提出后， 在知乎上也有<a href=\"https://zhuanlan.zhihu.com/p/41292532\" target=\"_blank\">对应的专栏</a>说这个事<br />\n主要观点是：</p><p><br /></p><ul><li>JavaScript越来越膨胀了，虽然网络情况越来越好了，但依然有很多极端场景</li></ul><ul><li>JavaScript是可交互性的大问题，执行速度和文件大小同样都是问题</li></ul><ul><li>解决方案 代码分离 + 持续集成（度量与优化、监控）</li></ul><p><br /></p><h3 id=\"64759915\">快速新闻</h3><p><br /></p><ul><li>玉伯 <a href=\"https://mp.weixin.qq.com/s/IYddaaw2ps1wR2VT1dZWPg\" target=\"_blank\">从前端技术进化到体验科技</a> , 我们关注的事和几年前已经不一样了。</li></ul><ul><li><a href=\"https://www.joyent.com/blog/graphql-on-the-server\" target=\"_blank\">GraphQL on server</a>, GraphQL是个好东西，一旦按约定形成，可以极大的减少前后端接口定义和联调时间。</li></ul><ul><li><a href=\"https://android-developers.googleblog.com/2018/08/introducing-android-9-pie.html\" target=\"_blank\">Android 9 Pie新特性</a>，不知道什么时候才能体验到..</li></ul><ul><li><a href=\"https://mp.weixin.qq.com/s/8C4aCqFhXjw9yMjUlWGKzQ\" target=\"_blank\">拼多多为什么崛起</a>，难道又是 农村包围城市， 得**者得天下？</li></ul><ul><li><a href=\"https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/\" target=\"_blank\">TypeScript 3.0</a>，我只想知道直接用会不会跪</li></ul><p><br /></p><h3 id=\"1f6e9f2d\">相关资料</h3><p><br /></p><ul><li><a href=\"https://www.dartlang.org/guides/language\" target=\"_blank\">Dart 官方文档</a></li></ul><ul><li><a href=\"https://juejin.im/post/5b0607c76fb9a07a9b365556\" target=\"_blank\">Flutter和RN对比</a></li></ul><ul><li><a href=\"https://hijiangtao.github.io/2018/04/20/Designing-Very-Large-JavaScript-Applications/\" target=\"_blank\">超大型Javascript应用设计哲学</a></li></ul><ul><li><a href=\"https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488261&idx=1&sn=c3adf142043b16599ed5e6e85eb87689\" target=\"_blank\">如何才能写出好的软件设计文档</a></li></ul>",
"public": 1,
"status": 1,
"likes_count": 0,
"comments_count": 0,
"content_updated_at": "2019-05-07T15:34:48.000Z",
"deleted_at": null,
"created_at": "2019-02-03T02:22:02.000Z",
"updated_at": "2019-05-07T16:26:15.000Z",
"published_at": "2019-05-07T16:26:15.000Z",
"first_published_at": "2019-02-03T02:24:11.000Z",
"word_count": 386,
"cover": "",
"description": "tags: [前端小报]前端小报 - 201808 月刊订阅小报：https://github.com/txd-team/monthly本期小编：roymellon (绘萌)Dart 2.0 发布Dart是一门由Google出品的语言，目标成为移动与Web开发主流语言(语言排行可以参考Gith...",
"custom_description": "前端小报 - 201808 月刊 订阅小报：https://github.com/txd-team/monthly 本期小编：roymellon (绘萌) Dart 2.0 发布Dart是一门由Google出品的语言，目标成为移动与Web开发主流语言(语言排行可以参考Github语言提交榜)。...",
"_serializer": "v2.doc_detail"
},
{
"id": 2018081,
"slug": "201906",
"title": "来看看我们为你开的六月前端小灶～",
"book_id": 214361,
"book": {
"id": 214361,
"type": "Book",
"slug": "fe-report",
"name": "前端小报",
"user_id": 262294,
"description": "前端领域分享之每月好奇新事物",
"creator_id": 103147,
"public": 1,
"items_count": 10,
"likes_count": 0,
"watches_count": 29,
"content_updated_at": "2019-07-04T03:17:27.405Z",
"updated_at": "2019-07-04T03:17:27.000Z",
"created_at": "2019-02-03T02:07:23.000Z",
"namespace": "txd-team/fe-report",
"user": {
"id": 262294,
"type": "Group",
"login": "txd-team",
"name": "TXD",
"description": "阿里巴巴研发效能事业部 TXD",
"avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2019/png/103147/1549159578869-avatar/9a85b981-f123-43b8-a86a-1bd2a9942647.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 3,
"public_books_count": 3,
"followers_count": 0,
"following_count": 0,
"created_at": "2019-02-03T02:06:25.000Z",
"updated_at": "2019-04-30T06:00:09.000Z",
"_serializer": "v2.user"
},
"_serializer": "v2.book"
},
"user_id": 103147,
"creator": {
"id": 103147,
"type": "User",
"login": "yinzhi",
"name": "尹挚 (x-cold)",
"description": "https://github.com/x-cold",
"avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png",
"large_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_320,h_320",
"medium_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_160,h_160",
"small_avatar_url": "https://cdn.nlark.com/yuque/0/2018/png/103147/1537198582768-55bfaa8f-150c-47cd-a259-dc06f1082ea5.png?x-oss-process=image/resize,m_fill,w_80,h_80",
"books_count": 16,
"public_books_count": 9,
"followers_count": 54,
"following_count": 20,
"created_at": "2018-04-23T00:50:24.000Z",
"updated_at": "2019-06-25T09:10:12.000Z",
"_serializer": "v2.user"
},
"format": "lake",
"body": "\n\n【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，在这个过去的六月里，来看看我们为您准备了那些前端小灶吧～\n\n> 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues)\n编辑：> [尹挚](https://github.com/x-cold)\n校对：> [佐七](https://github.com/Mavericker-1996)\n\n<a name=\"pVGwv\"></a>\n## 学习专栏\n\n<a name=\"KyS1u\"></a>\n### [你可能不知道的 VS Code 高级特性](https://www.vscodecandothat.com/#force-collapsible-regions)\n\n这里整理了一份 35 个 VS Code 提高开发效率和体验的高级功能列表，包含用法和视频展示，可以说是非常能提效的一些技巧。\n\n<a name=\"QsI0E\"></a>\n### [你用的那些 CSS 转场动画可以换一换了](https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation/)\n\n传统转场动画就是滑来滑去，淡入淡出这些。时代在召唤，技术在发展，可以试一试使用一些新的转场动画了。作者使用了 CSS3 的一些特性（clip-path、mask、滤镜等）实现一些进阶的转场效果，只需要使用原生的代码就可以像 PPT 里面那样灵活的转场。\n\n<a name=\"fV9GK\"></a>\n### [原生 JS 快速实现拖放效果](https://segmentfault.com/a/1190000019554950)\n\n拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生 Javascript 实现起来也非常的方便。作者用非常简洁的代码实现了最基的拖放效果。\n\n\n<a name=\"V2PxW\"></a>\n### \n<a name=\"tffc6\"></a>\n### [Web Worker 实现多线程计算](https://dassur.ma/things/when-workers/)\n\nJavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行; 那什么时候应该使用 Web Worker，看完这篇文章你或许就有答案了；\n\n<a name=\"OFB9t\"></a>\n### [浅谈小程序运行机制](https://segmentfault.com/a/1190000019131399)\n\n小程序与普通网页开发是有很大差别的，这就要从它的技术架构底层去剖析了。还有比如习惯 Vue，React 开发的开发者会吐槽小程序新建页面的繁琐，page 必须由多个文件组成、组件化支持不完善、每次更改 data 里的数据都得 setData、没有像 Vue 方便的 watch 监听、不能操作 DOM，对于复杂性场景不太好，之前不支持 npm，不支持Sass，Less 预编译处理语言。\n\n<a name=\"TZHjd\"></a>\n## 新闻快爆\n\n<a name=\"o7TvE\"></a>\n### [Node.js 十年回顾，你大爷还是你大爷](https://mp.weixin.qq.com/s/imX5Zt5LdjHr8VA_vbhfwg)\n\nNode.js 从 2009 年诞生开始，到现在已有 10 岁，在这 10 年里，它的成长和成熟是大家有目共睹的。它因后端简化并发编程而被关注，因作为前端辅助开发工具而流行，因异步流程控制和回调地狱而被人诟病，因 npm 批量安装模块而被人敬仰。狼叔新书《更了不起的Node.js》，带你打开Node.js世界的大门，领略大前端领域璀璨的星光。\n\n<a name=\"xjcTs\"></a>\n### [目前可以使用 ES10 的 5 个新特性](https://segmentfault.com/a/1190000019570236)\n\n三月份的前端月刊中文我们提及到 ES10 即将到来，截止今天为止，已经有一些特性可以通过 Babel 等工具使用了。\n\n<a name=\"8VM8r\"></a>\n### [PixiJS V5 发布](https://www.pixijs.com/)\n\n跨设备的快速轻量 2D 引擎库。 让你可以不需要关心 WebGL 深入知识也能充分发挥硬件加速的优势，创建各种 2D 效果。 PixiJS 有很多有趣的 [DEMO](https://pixijs.io/examples/#/demos-basic/container.js) ， 也可以自己尝试[编写一个例子](https://www.pixiplayground.com/#/edit)。\n\n<a name=\"9hYo1\"></a>\n### [RoboMaster S1](https://mp.weixin.qq.com/s/grs_c4ii9Unf29ugb6Qp3w)\n\n大疆发布首款教育机器人机甲大师 RoboMaster S1，启蒙编程思维，程序员要从娃娃抓起（其实是自己想买个大玩具了~~）\n\n[](https://camo.githubusercontent.com/ab0afcfe24341853ac65a312a187a0597033c7f4/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f544231354c455963424b77334b566a535a464f58586172445658612d3732302d3438302e6a7067)\n\n<a name=\"geNIO\"></a>\n## 工具推荐\n\n<a name=\"Ar23v\"></a>\n### [grade.js](https://github.com/benhowdle89/grade)\n\n\n\n这个 JS 库可以从图像提取两种主要颜色，然后生成渐变色背景，主要通过 canvas 来读取图片的像素点，然后做类似于直方图统计，得到图片中的主要色值。\n\n<a name=\"mah9D\"></a>\n### [react-use](https://github.com/streamich/react-use)\n\n必不可少的 React Hooks 集合，libreact 的端口。\n\n<a name=\"IuJRQ\"></a>\n### [theia](https://github.com/theia-ide/theia)\n\nTheia 是一款非常灵活的 Web IDE，可以通过扩展和插件的方式轻松完成定制化需求，官方也提供了丰富的内置扩展（文件、编辑器、终端、SCM...）如果你正在构建一个适用于自己企业的 Web IDE，不妨试试适用 Theia 进行扩展性开发。\n\n<a name=\"BvYcN\"></a>\n## 会议回顾\n\n<a name=\"sxqW7\"></a>\n### [GMTC 全球大前端技术大会](https://gmtc.infoq.cn/2019/beijing/)\n\nGMTC 全球大前端技术大会于 6.20 - 6.21 在北京顺利召开，主题涵盖工程化、移动开发、质量、小程序、架构、管理等前端的方方面面，也讨总结了前端的过去，展望未来的趋势。感兴趣的同学可以到官网查看[精彩回顾](https://gmtc.infoq.cn/2019/beijing/)。\n\n<a name=\"64EgC\"></a>\n### [VueConf 2019](https://www.yuque.com/vueconf/2019)\n\n2019 年 6 月 8 日来自全球各地的开发者齐聚上海，一起见证了 VueConf 2019 的成功举报，作者尤雨溪亲临现场，这里为你整理好了一份大会的[演讲资料（含视频）](https://www.yuque.com/vueconf/2019)。\n\n\n\n\n",
"body_draft": "",
"body_html": "<p><img alt=\"6月封面图.001.jpeg\" title=\"6月封面图.001.jpeg\" src=\"https://cdn.nlark.com/yuque/0/2019/jpeg/276025/1562205453984-89978181-00eb-41e6-8a17-7d2291377b4b.jpeg#align=left&display=inline&height=360&name=6%E6%9C%88%E5%B0%81%E9%9D%A2%E5%9B%BE.001.jpeg&originHeight=360&originWidth=720&size=343369&status=done&width=720\" style=\"max-width: 600px; width: 720px;\" /></p><p><br /></p><p>【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，在这个过去的六月里，来看看我们为您准备了那些前端小灶吧～</p><p><br /></p><blockquote><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p>编辑：<a href=\"https://github.com/x-cold\" target=\"_blank\">尹挚</a></blockquote><blockquote>校对：<a href=\"https://github.com/Mavericker-1996\" target=\"_blank\">佐七</a></blockquote><p><br /></p><h2 id=\"pVGwv\">学习专栏</h2><p><br /></p><h3 id=\"KyS1u\"><a href=\"https://www.vscodecandothat.com/#force-collapsible-regions\" target=\"_blank\">你可能不知道的 VS Code 高级特性</a></h3><p><br /></p><p>这里整理了一份 35 个 VS Code 提高开发效率和体验的高级功能列表，包含用法和视频展示，可以说是非常能提效的一些技巧。</p><p><br /></p><h3 id=\"QsI0E\"><a href=\"https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation/\" target=\"_blank\">你用的那些 CSS 转场动画可以换一换了</a></h3><p><br /></p><p>传统转场动画就是滑来滑去，淡入淡出这些。时代在召唤，技术在发展，可以试一试使用一些新的转场动画了。作者使用了 CSS3 的一些特性（clip-path、mask、滤镜等）实现一些进阶的转场效果，只需要使用原生的代码就可以像 PPT 里面那样灵活的转场。</p><p><br /></p><h3 id=\"fV9GK\"><a href=\"https://segmentfault.com/a/1190000019554950\" target=\"_blank\">原生 JS 快速实现拖放效果</a></h3><p><br /></p><p>拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生 Javascript 实现起来也非常的方便。作者用非常简洁的代码实现了最基的拖放效果。</p><p><br /></p><p><img alt=\"1128277794-5d0ddbf1b2cb6_articlex.gif\" title=\"1128277794-5d0ddbf1b2cb6_articlex.gif\" src=\"https://cdn.nlark.com/yuque/0/2019/gif/103147/1562115476618-6889f7c6-2151-4b98-91b4-810b48146ebf.gif#align=left&display=inline&height=227&name=1128277794-5d0ddbf1b2cb6_articlex.gif&originHeight=227&originWidth=800&size=3243863&status=done&width=800\" style=\"max-width: 600px; width: 800px;\" /></p><h3 id=\"V2PxW\"><br /></h3><h3 id=\"tffc6\"><a href=\"https://dassur.ma/things/when-workers/\" target=\"_blank\">Web Worker 实现多线程计算</a></h3><p><br /></p><p>JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行; 那什么时候应该使用 Web Worker，看完这篇文章你或许就有答案了；</p><p><br /></p><h3 id=\"OFB9t\"><a href=\"https://segmentfault.com/a/1190000019131399\" target=\"_blank\">浅谈小程序运行机制</a></h3><p><br /></p><p>小程序与普通网页开发是有很大差别的，这就要从它的技术架构底层去剖析了。还有比如习惯 Vue，React 开发的开发者会吐槽小程序新建页面的繁琐，page 必须由多个文件组成、组件化支持不完善、每次更改 data 里的数据都得 setData、没有像 Vue 方便的 watch 监听、不能操作 DOM，对于复杂性场景不太好，之前不支持 npm，不支持Sass，Less 预编译处理语言。</p><p><br /></p><h2 id=\"TZHjd\">新闻快爆</h2><p><br /></p><h3 id=\"o7TvE\"><a href=\"https://mp.weixin.qq.com/s/imX5Zt5LdjHr8VA_vbhfwg\" target=\"_blank\">Node.js 十年回顾，你大爷还是你大爷</a></h3><p><br /></p><p>Node.js 从 2009 年诞生开始，到现在已有 10 岁，在这 10 年里，它的成长和成熟是大家有目共睹的。它因后端简化并发编程而被关注，因作为前端辅助开发工具而流行，因异步流程控制和回调地狱而被人诟病，因 npm 批量安装模块而被人敬仰。<span>狼叔新书《更了不起的Node.js》，</span><span style=\"color: #3B3B3B;\">带你打开Node.js世界的大门，领略大前端领域璀璨的星光。</span></p><p><br /></p><h3 id=\"xjcTs\"><a href=\"https://segmentfault.com/a/1190000019570236\" target=\"_blank\">目前可以使用 ES10 的 5 个新特性</a></h3><p><br /></p><p>三月份的前端月刊中文我们提及到 ES10 即将到来，截止今天为止，已经有一些特性可以通过 Babel 等工具使用了。</p><p><br /></p><h3 id=\"8VM8r\"><a href=\"https://www.pixijs.com/\" target=\"_blank\">PixiJS V5 发布</a></h3><p><br /></p><p>跨设备的快速轻量 2D 引擎库。 让你可以不需要关心 WebGL 深入知识也能充分发挥硬件加速的优势，创建各种 2D 效果。 PixiJS 有很多有趣的 <a href=\"https://pixijs.io/examples/#/demos-basic/container.js\" target=\"_blank\">DEMO</a> ， 也可以自己尝试<a href=\"https://www.pixiplayground.com/#/edit\" target=\"_blank\">编写一个例子</a>。</p><p><br /></p><h3 id=\"9hYo1\"><a href=\"https://mp.weixin.qq.com/s/grs_c4ii9Unf29ugb6Qp3w\" target=\"_blank\">RoboMaster S1</a></h3><p><br /></p><p><span class=\"lake-fontsize-12\" style=\"color: #24292E;\">大疆发布首款教育机器人机甲大师 </span>RoboMaster S1<span class=\"lake-fontsize-12\" style=\"color: #24292E;\">，启蒙编程思维，程序员要从娃娃抓起（其实是自己想买个大玩具了~~）</span></p><p><span class=\"lake-fontsize-12\" style=\"color: #24292E;\"><br /></span></p><p><a href=\"https://camo.githubusercontent.com/ab0afcfe24341853ac65a312a187a0597033c7f4/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f544231354c455963424b77334b566a535a464f58586172445658612d3732302d3438302e6a7067\" target=\"_blank\" ref=\"noopener noreferrer\"><img src=\"https://cdn.nlark.com/yuque/0/2019/jpeg/103147/1562114331785-2b004cf3-d308-4317-80fa-06beebd8578b.jpeg#align=left&display=inline&height=480&originHeight=480&originWidth=720&size=0&status=done&width=720\" style=\"max-width: 600px; width: 720px;\" /></a></p><p><br /></p><h2 id=\"geNIO\">工具推荐</h2><p><br /></p><h3 id=\"Ar23v\"><a href=\"https://github.com/benhowdle89/grade\" target=\"_blank\">grade.js</a></h3><p><br /></p><p><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/103147/1562113203307-876c531d-b93d-453a-bc7d-710fddc80c9c.png#align=left&display=inline&height=434&name=image.png&originHeight=434&originWidth=527&size=345779&status=done&width=527\" style=\"max-width: 600px; width: 527px;\" /></p><p><br /></p><p>这个 JS 库可以从图像提取两种主要颜色，然后生成渐变色背景，主要通过 canvas 来读取图片的像素点，然后做类似于直方图统计，得到图片中的主要色值。</p><p><br /></p><h3 id=\"mah9D\"><a href=\"https://github.com/streamich/react-use\" target=\"_blank\">react-use</a></h3><p><br /></p><p>必不可少的 React Hooks 集合，libreact 的端口。</p><p><br /></p><h3 id=\"IuJRQ\"><a href=\"https://github.com/theia-ide/theia\" target=\"_blank\">theia</a></h3><p><br /></p><p>Theia 是一款非常灵活的 Web IDE，可以通过扩展和插件的方式轻松完成定制化需求，官方也提供了丰富的内置扩展（文件、编辑器、终端、SCM...）如果你正在构建一个适用于自己企业的 Web IDE，不妨试试适用 Theia 进行扩展性开发。</p><p><br /></p><h2 id=\"BvYcN\">会议回顾</h2><p><br /></p><h3 id=\"sxqW7\"><a href=\"https://gmtc.infoq.cn/2019/beijing/\" target=\"_blank\"><span>GMTC 全球大前端技术大会</span></a></h3><p><span><br /></span></p><p>GMTC 全球大前端技术大会于 6.20 - 6.21 在北京顺利召开，主题涵盖工程化、移动开发、质量、小程序、架构、管理等前端的方方面面，也讨总结了前端的过去，展望未来的趋势。感兴趣的同学可以到官网查看<a href=\"https://gmtc.infoq.cn/2019/beijing/\" target=\"_blank\">精彩回顾</a>。</p><p><br /></p><h3 id=\"64EgC\"><a href=\"https://www.yuque.com/vueconf/2019\" target=\"_blank\">VueConf 2019</a></h3><p><br /></p><p>2019 年 6 月 8 日来自全球各地的开发者齐聚上海，一起见证了 VueConf 2019 的成功举报，作者尤雨溪亲临现场，这里为你整理好了一份大会的<a href=\"https://www.yuque.com/vueconf/2019\" target=\"_blank\">演讲资料（含视频）</a>。</p><p><br /></p><p><br /></p><p style=\"text-align: center;\"><img alt=\"image.png\" title=\"image.png\" src=\"https://cdn.nlark.com/yuque/0/2019/png/276025/1562202442453-4016bcd0-47ca-4e95-a118-426afc312020.png#align=left&display=inline&height=522&name=image.png&originHeight=1044&originWidth=1080&size=1149092&status=done&width=540\" style=\"max-width: 600px; width: 540px;\" /></p><p><br /></p>",
"body_lake": "<!doctype lake><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fjpeg%2F276025%2F1562205453984-89978181-00eb-41e6-8a17-7d2291377b4b.jpeg%22%2C%22originWidth%22%3A720%2C%22originHeight%22%3A360%2C%22name%22%3A%226%E6%9C%88%E5%B0%81%E9%9D%A2%E5%9B%BE.001.jpeg%22%2C%22size%22%3A343369%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A720%2C%22height%22%3A360%7D\"></card></p><p><br /></p><p>【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，在这个过去的六月里，来看看我们为您<cursor />准备了那些前端小灶吧～</p><p><br /></p><blockquote><p>欢迎 <a href=\"https://zhuanlan.zhihu.com/txd-team\" target=\"_blank\">订阅</a> & <a href=\"https://github.com/txd-team/monthly/issues\" target=\"_blank\">投稿</a></p>编辑：<a href=\"https://github.com/x-cold\" target=\"_blank\">尹挚</a></blockquote><blockquote>校对：<a href=\"https://github.com/Mavericker-1996\" target=\"_blank\">佐七</a></blockquote><p><br /></p><h2 id=\"pVGwv\">学习专栏</h2><p><br /></p><h3 id=\"KyS1u\"><a href=\"https://www.vscodecandothat.com/#force-collapsible-regions\" target=\"_blank\">你可能不知道的 VS Code 高级特性</a></h3><p><br /></p><p>这里整理了一份 35 个 VS Code 提高开发效率和体验的高级功能列表，包含用法和视频展示，可以说是非常能提效的一些技巧。</p><p><br /></p><h3 id=\"QsI0E\"><a href=\"https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation/\" target=\"_blank\">你用的那些 CSS 转场动画可以换一换了</a></h3><p><br /></p><p>传统转场动画就是滑来滑去，淡入淡出这些。时代在召唤，技术在发展，可以试一试使用一些新的转场动画了。作者使用了 CSS3 的一些特性（clip-path、mask、滤镜等）实现一些进阶的转场效果，只需要使用原生的代码就可以像 PPT 里面那样灵活的转场。</p><p><br /></p><h3 id=\"fV9GK\"><a href=\"https://segmentfault.com/a/1190000019554950\" target=\"_blank\">原生 JS 快速实现拖放效果</a></h3><p><br /></p><p>拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生 Javascript 实现起来也非常的方便。作者用非常简洁的代码实现了最基的拖放效果。</p><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fgif%2F103147%2F1562115476618-6889f7c6-2151-4b98-91b4-810b48146ebf.gif%22%2C%22originWidth%22%3A800%2C%22originHeight%22%3A227%2C%22name%22%3A%221128277794-5d0ddbf1b2cb6_articlex.gif%22%2C%22size%22%3A3243863%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A800%2C%22height%22%3A227%7D\"></card></p><h3 id=\"V2PxW\"><br /></h3><h3 id=\"tffc6\"><a href=\"https://dassur.ma/things/when-workers/\" target=\"_blank\">Web Worker 实现多线程计算</a></h3><p><br /></p><p>JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行; 那什么时候应该使用 Web Worker，看完这篇文章你或许就有答案了；</p><p><br /></p><h3 id=\"OFB9t\"><a href=\"https://segmentfault.com/a/1190000019131399\" target=\"_blank\">浅谈小程序运行机制</a></h3><p><br /></p><p>小程序与普通网页开发是有很大差别的，这就要从它的技术架构底层去剖析了。还有比如习惯 Vue，React 开发的开发者会吐槽小程序新建页面的繁琐，page 必须由多个文件组成、组件化支持不完善、每次更改 data 里的数据都得 setData、没有像 Vue 方便的 watch 监听、不能操作 DOM，对于复杂性场景不太好，之前不支持 npm，不支持Sass，Less 预编译处理语言。</p><p><br /></p><h2 id=\"TZHjd\">新闻快爆</h2><p><br /></p><h3 id=\"o7TvE\"><a href=\"https://mp.weixin.qq.com/s/imX5Zt5LdjHr8VA_vbhfwg\" target=\"_blank\">Node.js 十年回顾，你大爷还是你大爷</a></h3><p><br /></p><p>Node.js 从 2009 年诞生开始，到现在已有 10 岁，在这 10 年里，它的成长和成熟是大家有目共睹的。它因后端简化并发编程而被关注，因作为前端辅助开发工具而流行，因异步流程控制和回调地狱而被人诟病，因 npm 批量安装模块而被人敬仰。<span>狼叔新书《更了不起的Node.js》，</span><span style=\"color: #3B3B3B;\">带你打开Node.js世界的大门，领略大前端领域璀璨的星光。</span></p><p><br /></p><h3 id=\"xjcTs\"><a href=\"https://segmentfault.com/a/1190000019570236\" target=\"_blank\">目前可以使用 ES10 的 5 个新特性</a></h3><p><br /></p><p>三月份的前端月刊中文我们提及到 ES10 即将到来，截止今天为止，已经有一些特性可以通过 Babel 等工具使用了。</p><p><br /></p><h3 id=\"8VM8r\"><a href=\"https://www.pixijs.com/\" target=\"_blank\">PixiJS V5 发布</a></h3><p><br /></p><p>跨设备的快速轻量 2D 引擎库。 让你可以不需要关心 WebGL 深入知识也能充分发挥硬件加速的优势，创建各种 2D 效果。 PixiJS 有很多有趣的 <a href=\"https://pixijs.io/examples/#/demos-basic/container.js\" target=\"_blank\">DEMO</a> ， 也可以自己尝试<a href=\"https://www.pixiplayground.com/#/edit\" target=\"_blank\">编写一个例子</a>。</p><p><br /></p><h3 id=\"9hYo1\"><a href=\"https://mp.weixin.qq.com/s/grs_c4ii9Unf29ugb6Qp3w\" target=\"_blank\">RoboMaster S1</a></h3><p><br /></p><p><span class=\"lake-fontsize-12\" style=\"color: #24292E;\">大疆发布首款教育机器人机甲大师 </span>RoboMaster S1<span class=\"lake-fontsize-12\" style=\"color: #24292E;\">，启蒙编程思维，程序员要从娃娃抓起（其实是自己想买个大玩具了~~）</span></p><p><span class=\"lake-fontsize-12\" style=\"color: #24292E;\"><br /></span></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fjpeg%2F103147%2F1562114331785-2b004cf3-d308-4317-80fa-06beebd8578b.jpeg%22%2C%22originWidth%22%3A720%2C%22originHeight%22%3A480%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22link%22%3A%22https%3A%2F%2Fcamo.githubusercontent.com%2Fab0afcfe24341853ac65a312a187a0597033c7f4%2F68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f544231354c455963424b77334b566a535a464f58586172445658612d3732302d3438302e6a7067%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A720%2C%22height%22%3A480%7D\"></card></p><p><br /></p><h2 id=\"geNIO\">工具推荐</h2><p><br /></p><h3 id=\"Ar23v\"><a href=\"https://github.com/benhowdle89/grade\" target=\"_blank\">grade.js</a></h3><p><br /></p><p><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F103147%2F1562113203307-876c531d-b93d-453a-bc7d-710fddc80c9c.png%22%2C%22originWidth%22%3A527%2C%22originHeight%22%3A434%2C%22name%22%3A%22image.png%22%2C%22size%22%3A345779%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A527%2C%22height%22%3A434%7D\"></card></p><p><br /></p><p>这个 JS 库可以从图像提取两种主要颜色，然后生成渐变色背景，主要通过 canvas 来读取图片的像素点，然后做类似于直方图统计，得到图片中的主要色值。</p><p><br /></p><h3 id=\"mah9D\"><a href=\"https://github.com/streamich/react-use\" target=\"_blank\">react-use</a></h3><p><br /></p><p>必不可少的 React Hooks 集合，libreact 的端口。</p><p><br /></p><h3 id=\"IuJRQ\"><a href=\"https://github.com/theia-ide/theia\" target=\"_blank\">theia</a></h3><p><br /></p><p>Theia 是一款非常灵活的 Web IDE，可以通过扩展和插件的方式轻松完成定制化需求，官方也提供了丰富的内置扩展（文件、编辑器、终端、SCM...）如果你正在构建一个适用于自己企业的 Web IDE，不妨试试适用 Theia 进行扩展性开发。</p><p><br /></p><h2 id=\"BvYcN\">会议回顾</h2><p><br /></p><h3 id=\"sxqW7\"><a href=\"https://gmtc.infoq.cn/2019/beijing/\" target=\"_blank\"><span>GMTC 全球大前端技术大会</span></a></h3><p><span><br /></span></p><p>GMTC 全球大前端技术大会于 6.20 - 6.21 在北京顺利召开，主题涵盖工程化、移动开发、质量、小程序、架构、管理等前端的方方面面，也讨总结了前端的过去，展望未来的趋势。感兴趣的同学可以到官网查看<a href=\"https://gmtc.infoq.cn/2019/beijing/\" target=\"_blank\">精彩回顾</a>。</p><p><br /></p><h3 id=\"64EgC\"><a href=\"https://www.yuque.com/vueconf/2019\" target=\"_blank\">VueConf 2019</a></h3><p><br /></p><p>2019 年 6 月 8 日来自全球各地的开发者齐聚上海，一起见证了 VueConf 2019 的成功举报，作者尤雨溪亲临现场，这里为你整理好了一份大会的<a href=\"https://www.yuque.com/vueconf/2019\" target=\"_blank\">演讲资料（含视频）</a>。</p><p><br /></p><p><br /></p><p style=\"text-align: center;\"><card type=\"inline\" name=\"image\" value=\"data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2019%2Fpng%2F276025%2F1562202442453-4016bcd0-47ca-4e95-a118-426afc312020.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A1044%2C%22name%22%3A%22image.png%22%2C%22size%22%3A1149092%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22width%22%3A540%2C%22height%22%3A522%7D\"></card></p><p><br /></p>",
"public": 1,
"status": 1,
"likes_count": 1,
"comments_count": 0,
"content_updated_at": "2019-07-04T02:38:20.000Z",
"deleted_at": null,
"created_at": "2019-07-01T13:21:09.000Z",
"updated_at": "2019-07-04T03:17:27.000Z",
"published_at": "2019-07-04T03:17:27.000Z",
"first_published_at": "2019-07-03T01:00:15.000Z",
"word_count": 1241,
"cover": null,
"description": "【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，在这个过去的六月里，来看看我们为您准备了那些前端小灶吧～欢迎 订阅 & 投稿编辑：尹挚校对：佐七学习专栏你可能不知道的 VS Code 高级特性这里整理了一份 35 个 VS Code 提...",
"custom_description": null,
"_serializer": "v2.doc_detail"
}
]