profile
viewpoint
Yadong Xie vthinkxie @alibaba HangZhou https://xieyadong.com I remember I was here not because the way in front of me, but the way behind me. Google Developer Expert in 🅰️ Angular and Web Technologie

ant-design/ant-design 61327

🌈 A UI Design Language and React UI library

ant-design/ant-design-icons 343

⭐ Ant Design SVG Icons

ng-docs/ng-docs.github.io 74

Angular 官方文档中文版预编译网站

antsgroup/KOP-DPI-System 12

A KOP(Keen On Packet, 靠谱) DPI System which supports script rules which can describe behavior instead of application and performs triple speed to OpenDPI with less limitation and memory

ngChina/ng-china-2019-web 11

ng-china-2019 website

vthinkxie/angular-radar 7

A light weight tools to display radar chart using angularjs

vthinkxie/angular-bookmark 3

some articles related to angular

hsuanxyz/zeppelin 1

Mirror of Apache Zeppelin

startedng-web-apis/canvas

started time in a day

issue commentNG-ZORRO/ng-zorro-antd

zorro从7升级到9后,栅格布局nz-row与nz-col之间多了一层自定义的标签,栅格布局不生效

也可以给已有的组件上增加css样式,或者不引入 nz-col 和 nz-row 的 module,自己实现 nz-col 和 nz-row

007GitHu

comment created time in a day

issue commentNG-ZORRO/ng-zorro-antd

zorro从7升级到9后,栅格布局nz-row与nz-col之间多了一层自定义的标签,栅格布局不生效

nz-row 与 nz-col 都是 directive, 可以直接和你的组件混用,nz-col 是可以直接写在你的组件上的

007GitHu

comment created time in a day

issue closedNG-ZORRO/ng-zorro-antd

zorro从7升级到9后,栅格布局nz-row与nz-col之间多了一层自定义的标签,栅格布局不生效

Reproduction link

https://stackblitz.com/edit/angular-nmgbo1?file=src/app/app.component.ts

Steps to reproduce

<form nz-form [formGroup]="validateForm" class="ant-advanced-search-form">
<div nz-row > <app-test> <div nz-col [nzSpan]="8" > <nz-form-item> <nz-form-label >FieldFieldFieldField </nz-form-label> <nz-form-control> <input nz-input placeholder="placeholder" /> </nz-form-control> </nz-form-item> </div> </app-test> </div> </form>

What is expected?

栅格布局nz-row与nz-col之间能加上自定义的标签,封装各个组件后,使用时会有一层标签,而9版本栅格布局中,多了一层自定义的标签,栅格布局失效

What is actually happening?

可自定义标签

Environment Info
ng-zorro-antd 9.2.2
Browser 谷歌浏览器

<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

closed time in a day

007GitHu

issue commentNG-ZORRO/ng-zorro-antd

zorro从7升级到9后,栅格布局nz-row与nz-col之间多了一层自定义的标签,栅格布局不生效

在 9 的时候样式同步了 ant design 4.0 的设计方案,在4.0 的设计方案中,所有的样式均采用 flex 布局,对于中间增加嵌套标签的情况不再支持

007GitHu

comment created time in a day

startedTinkoffCreditSystems/ng-polymorpheus

started time in a day

push eventNG-ZORRO/ng-zorro-antd

Hsuan Lee

commit sha 4dcc428fc68913abb36e81f1009d5e86c3887b16

refactor(module:*): migrate the source code to Angular v10 (#5494)

view details

push time in 3 days

PR merged NG-ZORRO/ng-zorro-antd

Reviewers
refactor(module:*): migrate the source code to Angular v10 PR: partially-approved

PR Checklist

Please check if your PR fulfills the following requirements:

  • [x] The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
  • [x] Tests for the changes have been added (for bug fixes / features)
  • [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[x] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->

Other information

+23 -25

1 comment

9 changed files

hsuanxyz

pr closed time in 3 days

issue closedNG-ZORRO/ng-zorro-antd

跟angular10 不兼容

What problem does this feature solve?

跟angular10 不兼容

What does the proposed API look like?

打包报错<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

closed time in 3 days

qyjs

issue commentNG-ZORRO/ng-zorro-antd

跟angular10 不兼容

duplicate #5471

qyjs

comment created time in 3 days

issue closedNG-ZORRO/ng-zorro-antd

How to implement light/dark theme toggle?

What problem does this feature solve?

The instruction in this page https://ng.ant.design/docs/customize-theme/en#switch-theming is not clear, it would be great if you provide a "stackblitz" example.

What does the proposed API look like?

There are 2 separate pieces of code provided in https://ng.ant.design/docs/customize-theme/en#switch-theming , but I have no idea what should be the file name, where should it be placed? How and when should it be called? It will be great if you update that page with an example of doing that on stackblitz<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

closed time in 4 days

IsaacHub

issue commentNG-ZORRO/ng-zorro-antd

How to implement light/dark theme toggle?

https://stackoverflow.com/questions/61901234/how-to-change-the-ng-zorro-theme-at-runtime

IsaacHub

comment created time in 4 days

issue commentangular/angular

bug happened when animations work with ng-content

Hi, this bug till happens in angular 10, and if listen to (@antimaiton.done) would make the component crash in this situation.

https://stackblitz.com/edit/angular-ivy-mbd6hr?file=src%2Fapp%2Fapp.component.ts

  1. click the toggle button
  2. click toggle again, all elements are gone
  3. click updateList button, would report Error: Cannot read property 'tagAnimation' of undefined
vthinkxie

comment created time in 4 days

IssuesEvent

startedryansolid/solid

started time in 4 days

startedpaulhodel/jexcel

started time in 4 days

startedecomfe/zrender

started time in 4 days

startedangular-vietnam/100-days-of-angular

started time in 5 days

startedtrungk18/jira-clone-angular

started time in 5 days

startedmanfredsteyer/module-federation-with-angular

started time in 6 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 93d7af2b43980b6897482183dd18351dd51c1dc1

Auto-generated commit

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha dc04de32b37590b2b800de15f1a6c31a99c8c083

feat: add blog

view details

push time in 7 days

startedgithub/hub

started time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 3a0f8fd9423ce1646285904d21bfef2182b1248d

Auto-generated commit

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 543f3a3ad47a6db00cfa85a89c130b4a8c7fd2f3

feat: add blog

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha b7c53a5f1675e8b77a66516a5f60667dfb8341ec

Auto-generated commit

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 974e19ce1c46829eee460615b90bbcfd8ebd16b0

feat: add blog

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 39c89a9bc01868a794b738b2b8c5c3ee695a6c13

feat: add blog

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha c8c499ea547bf87aeac2fa8d323cd92fdd42c0aa

Auto-generated commit

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha df6702cf6e1c1a7bde6ba473594536495e64142e

feat: add blog

view details

push time in 7 days

issue openedvthinkxie/portfolio

在 2020 年聊聊 Angular 的现状

不知道大家最近有没有注意过这条新闻:GitHub封禁自家开源项目Aurelia引众怒。我看到这条新闻的第一反应是: Aurelia 还有人维护?被封禁还会引起众怒?

实际上,作为早期从 Angular 项目组跳槽后独立开发的 Aurelia 不仅正常运转,还运转的挺不错。不仅不停的有 backer 对其进行赞助,还有独立的 Blue Spire 公司在对其进行管理,Github Star 也早就过万。在大家认定“火”的框架之外,Polymer 也运转的挺好,今年 1 月份还激动地宣布终于所有的主流浏览器都支持了 webcomponents 规范。 image

还有 Svelte,它在 2018 年底发表了一篇向 Virtual DOM 宣战的檄文,一夜之间热度暴增,但是在这之前,Svelte 已经不温不火了好几年的时间。按照有些前端的评判标准,Aurelia,Polymer 和 Svelte,对了,还要加上 Angular 应该都是过时技术。

Angular 在国内很火吗?显然不够火,现在国内还有相当多的前端开发者分不清 angular.js 和 Angular,喜欢拿着 angular.js 的缺点批判 Angular 一番

但是国内看起来不火的技术就是过时的吗?

显然不是

如果把时间推回 2016 年 9月,在这个时候诞生了一款前端框架,它有着以下众多特性:

  1. 零配置 CLI,享受到 webpack 每次升级(2,3,4,5....)的好处,但是不用关心任何 webpack config
  2. 官方提供所有的必须组件(http、router、animation、ssr、e2e 等等),在 2000+ 内部应用测试之后才会发布,基本零 bug,并且保证在未来很多年内一直保证兼容升级
  3. 提供官方的应用市场和 low code 生成工具,一行命令就可以生成 Dashboard 和各种页面
  4. 框架 100% 由 TypeScript 开发,并且生态内的所有三方库都是(只能用) TypeScript 开发
  5. 内置 RxJS,并且从 View 的操作到 Http 全部都是 Reactive 的,可以随意组合
  6. 每次升级只要运行一行命令就会帮你修复所有的可能的不兼容问题
  7. 通过 Template 隔绝底层的 Compiler 升级成本,Compiler 迭代了三代,性能不断提升,bundle size 不断减少,但是用户代码一行不用改

以上任何一条,在 2020 年有框架支持其中任意一条应该都会引起不小的热度和讨论,但是以上的这些,2016 年的 Angular 就已经支持了

Angular 在 2016 年就已经支持的几个技术方向,在 4 年后的今天看起来都是超前的

脚手架 + 自动升级 + 零配置

大概两年前 Angular CLI 还是被各种社区诟病的对象,CLI 太重,不灵活,等等等等。

到 2019 年的时候各个框架也有了自己的 CLI,看来大家虽然嘴上不承认,用起来还是真香的。无论是只要运行一次可以将所有的 Angular 环境升级至最新,并且会自动修正掉所有的不兼容代码的 ng udpate,还是默认零配置并且隔绝了底层 webpack 升级,让用户从webpack config 中直接解放出来(当然用户还可以通过自定义 builders 获得 webpack 的自定义能力)的 angular.json,不管你是否承认,Angular CLI 仍然是目前所有框架中最强大的脚手架。

三方组件初始化

ng add @angular/material // 初始化 material design 工程 ng add @angular/pwa // 为当前项目增加 pwa 支持

打包与部署

ng add angular-cli-ghpages && ng deploy // 部署到 Github Pages ng add @netlify-builder/deploy && ng deploy // 部署到 Netlify

Schematics

Schematics 支持的本质上就是一种 low code platform,由于 Angular 的 Template 本身就代表着 View 层,或者可以当做 config 文件,Angular 做这种低代码生成工具格外得心应手。

在 Angular 生态下直接直接通过 ng generate 命令就可以随意的搭建出来整个项目,也是所有的组件库基本都支持。

ng generate @angular/material:dashboard // 直接生成 material dashboard ng generate ng-zorro-antd:table-row-selection-and-operation // 直接生成 ng-zorro 表格页面

image

Angular 官方提供了一整套 Schemantic 系列 low code 的搭建文档,企业可以很容易根据自己的业务需要,自定义各种企业 Layout 和 Component 的快速生成器,快速提升企业开发效率。

RxJS

Angular 从第一个版本开始就是based on RxJS,无论是 HttpClient 还是对 View 的操作,如果你愿意可以随意用 RxJS 的 operator 发挥他们的最大作用。最近还有 RxJS 社区的 Michael 搞出来了 rx-angular, 让 Angular 直接可以充当 RxJS 的 View 层使用,配合刚发布的 RxJS 7.0 beta 的调试工具,也会让数据的中间过程更加透明。

image

TypeScript

再提一句 Typescript,记得前几年 Angular 刚开始用 TypeScript 的时候还有人说前端不要学后端那套,到今年的时候有人居然会觉得 Angular 只是 TypeScript 的用户,TypeScript 的普及没有 Angular 的功劳。

即使不说后续 Angular 团队贡献的代码,只提 TypeScript 是 AtScript 和 TypeScript 合并的产物,Angular 团队怎么也能算 TypeScript 的半个亲爹,没想到不到几年的时间在知乎就已经被人喷成过时技术的代表了。

此外,脱离第三方包谈 TypeScript 支持完全是空中楼阁,Angular 是目前所有前端框架中,唯一所有的三方库 100% 支持 Typescript 的 ,不知道大家有没有被各种有问题的 d.ts 误导过,这件事情在 Angular 社区中是根本不可能发生的。

Ivy Compiler

Ivy 其实从好几年之前就开始立项了,核心思想是通过 Compiler 静态编译减少实际运行时的代码量,之所以做了这么久是因为 Ivy 要保证与之前 Angular 版本的所有兼容情况,相当于在给一辆高速公路上运行的车辆换Engine。

其实所有的 Compiler + Template 的框架想要发挥最大优势基本这是必经路线。Minko 在 Ivy 正式发布之后发布了这样一条 twitter,如果你感兴趣这部分的话,可以直接在 Angular 9.0 之后的项目中运行 npx ngc,结果一定会让你对整个 Angular 项目组的技术实力刮目相看。

如果你认为 Svelte 的技术方向够 fancy,就没有任何理由去贬损 Angular,要不然就是真正的大型双标现场。

image

当然,先进不一定代表 100% 的会火,每一种框架都有自己的取舍,不同的场景的使用者、不同的背景的程序员对于 Angular 可能有完全不一样的感受。

我认为 Angular 在国内不够"火"的原因有以下几点:

发布时间

Angular 的 发布时间(2016年9月)是 晚于 Vue(2014年2月)两年 和 React(2013年3月) 三年半的,所有的第三方生态的建立都需要时间。

另外晚于 React 和 Vue 发布,实际上大量的国内前端开发者在那个时刻已经更换到 React 或者 Vue,Angular 能够带来的工程化收益又不足以让很多开发者更换框架(现在让很多 Angular 用户切换到 React 自然也是不愿意的,同样的原因)。如果把 Angular 作为一款在售产品的话,这个产品的发布时间显然有待考量。

早期 Bundle Size 问题

Angular 早期市场定位把所有关心 bundle size 的用户都排除在外了,Angular 4.0 之前 bundle size 轻松超过 1MB,对于很多移动端开发是不可接受的。

虽然这个问题在 Angular 最近几个版本中已经得到了彻底解决(目前 Hello World 包含所有必须套件的情况下 gzip 后的尺寸在 30KB 以内,与 vue 或者 react 增加必须套件 gzip 之后体积没有区别),但是仍然给很多早期用户留下了 Angular 应用打包太大的印象。

用户定位与限制

如果你只需要一款简单的应用,而不是直接要做一款大型应用,Angular 应该 100% 会给你一种 over design 的假象。甚至官方文档也是直接默认把用户当做要开发大型项目来对待,直接从 Router 开始教学(唯一一个这么做的前端框架),应该让很多入门者当场弃坑。

Angular 直接用户定位一直在大中型项目上,规范一直是 Angular 团队最看重的东西,Angular 从各种行为模式上限制了开发者的自由度,很多操作不是不能做,而是 Angular 从最佳实践上限制了你的花式写法,官网文档压根不给用户提供超出最佳实践范围的写法指南(比如runtime compile template),直接从源头避免了 100 个开发者的 101 种开发姿势,这很容易给很多人一种 Angular 官网大而不全的错觉。说直白一些就是“这也不准做,那也不准做”,这真的太容易被很多热爱自由的前端开发者的攻击了,是典型的吃力不讨好的操作。

而实际上前端框架的 用户/开发团队 选型转换无非有两种情况,一种是从 大型项目-》小型项目,有些 用户/开发团队 感受到了一个框架企业级的好处,然后在小型的项目中也会采用。而另一种是从 小型项目 -》大型项目,用户/团队 在小型项目中熟悉了某种框架的使用,然后在大型项目中采用。

在后一种路径下,用户和部分团队可以通过自己的努力开发出来能满足大型项目的三方库,虽然大部分不会像 Angular 官方提供的这样稳定,但是从另外一个维度也必定激活了大量社区开发者与团队的热情与KPI(非贬义),变得很火。

不搞新概念

Angular 整个开发团队都有服务端的背景,从起名到营销上都比其他框架差了不是一点半点。举个栗子,Angular 底层的所谓 DirtyCheck 与所谓的 Virtual DOM 相比,从原理上无论如何 DirtyCheck 是要更快的(当然这是在牺牲了灵活性的基础上),但是估计大家听到 DirtyCheck 第一反应就是 angular.js 那套(根本不是一回事)。

今年大火的微前端的概念,95% 微前端要解决的问题,在 Angular 体系内都可以通过 module + DI + submodule 解决,我们两年前在业务中解决这些问题的时候,完全没有意识到整套 Angular 提供好的解决方案,事实上就是微前端。

最近社区搞出来的那套可以全 Reactive Programing 的方案,直接起名叫 ngrx/components,营销效果 0 分。这几年整个 Angular 团队在营销上最好的表现,应该就是给新的 Compiler + Render 起了个新名字。其余的 Dependency Injection,装饰器等等 100% 会劝退很多追求 fancy 的前端开发工程师。

开发者与公司背景

从公司背景来说,我们维护 Angular 开源库已经有超过 3 年的时间,根据我们的用户统计,大量的 toB 的企业使用 Angular 并且有内部组件库的,但是这些传统 toB 企业受限于各种原因,又不会开源内部的组件库(非贬义)。甚至有大量的国内企业使用了 ng-zorro-antd 但是由于 toB 企业内部审批的原因不能对外公布,这可以解释为什么你在国内很少看到国内 Angular 开发者发声的原因。

从开发者背景来说,大量的 Angular 开发者与 Angular 官方都有着相同的服务端背景,如果你关注过 Github 的 trends 就能理解服务端项目的人有多么不善于创造“火”的概念。

官方职责与三方库边界

Angular 官方负责维护了大量的官方库,并且保障了每次升级的兼容性(Angular 甚至保障了很多非 Angular 官方开发包的兼容性)。

范围广泛的官方职责对于需要长期维护的前端项目自然是好事情,但是这也必定社区的第三方库看起来不那么“火“,比如 router ,在 Angular 提供了官方 router 的前提下,社区的 router 很难再有独立发展并且火爆的可能性,说白了就是官方的职责太广,反而减少了社区的表面繁荣的现象。

按照 KANO 模型, Angular 有些功能对于企业开发者来说都是 Basic Needs,然而对于期盼自由度的开发者却很容易成为 Reverse Quality。甚至很多对 Angular 工具库的不满也会直接影响被指向 Angular 本身。

react-router 不兼容升级的时候不会有人怪罪 react,但是 @angular/router 如果不兼容升级(是一个假设),一定在社区会被拉去祭天。同样的,Angular CLI 即使提供了 webpack 的自定义方式,也总会有人指责 Angular CLI 没有一键满足他们的需求,虽然 Angular 一样可以手写 webpack config 编译,即使回退到最原始的情况下也没有比其他框架更差。

官方的职责范围一旦覆盖了太多领域,就很难让所有用户满意,甚至会让很多用户产生敌意。这也可以用来解释为什么同样使用 Angular,不同用户的感受会差别很多。

image

总体而言

如果你在前端框架上追求的更多是:升级稳定、标准统一、长期维护成本低、协作方便,不需要频繁重构,Angular 的使用感受应该还是相当不错的,这也是为什么目前大量企业用户会选择 Angular 的原因。

反过来,如果你追求的是绝对的自由,那你使用 Angular 的时候感受到的一定会是各种限制。

不过 Angular 在 Ivy 项目开启的时候就已经开始为追求自由/小型应用的程序员提供更多的支持,比如First-Class LazyLoad Component,renderComponent 这些新的 API 也会让 Angular 在小型化应用上更加得心应手,甚至可以直接 renderComponent from Scratch

这些都是不同框架职责范围的取舍而已,希望这篇文章能给大家框架选型带来更多思路。

created time in 7 days

issue openedvthinkxie/portfolio

也谈对开源的理解

参与开源已经有4年的时间了,找个机会聊聊自己对开源的理解。

参与比使用更加重要

开源社区 90% 的魅力不在于使用,而是在于参与。可能很多人会觉得自己很菜,不好意思给开源社区提交代码,可是我们每个人都是曾经的菜鸟,参与开源正是让开发者提升自我的最好机会,就像 Open Source Guides 中说的那样:

在 [自由代码] 下工作,让我学习到了职业生涯中非常重要的技能,无论是大学还是实际的工作,我认为从开源项目中得到的收获的远大於我的贡献!

参与开源社区可以给个人带来很好的自我提升。如果不是参与开源系统,我可能到现在也不会了解到Semantic VersioningLinear Commit History 的重要性,更不用说如何基于各种社区资源搭建全套工作流程。在 commit 代码的过程中,无论是 review 别人的代码,还是被别人 review 代码,都可以帮助你纠正自己的很多认知误区,收获的其实是一对一的免费 coaching。而与社区开发者一起沟通 roadmap 的时候碰撞出的思路和想法也是闭门造车不可能产生的。

参与开源社区可以获得日常工作比较难获得的高成就感,这种高成就感会形成正向反馈让你更加努力和严谨。当看到来自全球的近 30w 开发者使用着这个项目,来自数十个不同的国家和地区的开发者一起共同工作贡献代码的时候。作为项目开发者的一员,你100%会为自己感到骄傲,也一定不敢辜负这么多人的信任,催自己更加努力。

“小白”用户才是未来

相信很多开源项目最"不待见"的就是“小白”用户,我们刚开始做开源的时候也一样。

  • 为什么这些人不看文档就跑来提问?
  • CSS都不懂为什么要来写前端?
  • JavaScript Date 对象不知道?

是我们最开始维护开源项目最真实的内心反应,毕竟即使有全能工作流帮你降低了大量的时间成本,也挡不住各种“小白”用户提问占用的时间。

我的心态在我们开源的第二年发生了变化,因为我渐渐的发现很多曾经的“小白”用户变得不再那么“白”了,会主动帮我们回答钉钉群、stackoverflow 上的问题,在社区上写技术文章分享,会帮我们提 PR 修 bug,甚至有人成为了我们的 core contributor,还有人做了基于我们开源项目的二次开源项目。

这些曾经的“小白”用户后来成为了我们项目发展的基石,所以,“小白”真的是小白吗?

1. 程序员跨界之后都是小白

我们的开源项目虽然是前端项目,但是有相当比例的的开发者是 C# 和 Java 开发者,所有开发者脱离了自己熟悉领域之后必然是小白。但是程序员的自我学习能力却是通用的,只要给予开发者一些时间,很多人都会成为新领域的专家。

2. 错误的行为不一定有恶意

18年的时候 deno 的 issue 被中文刷屏,当时我的回答就是很多人不一定真的有恶意,而是真的不知道 issue 是用来做什么的。很多用户的留言很可能是他们第一次使用 github 账号,对初次犯规的用户不妨多一些引导和善意。毕竟嫌货才是买货人,嫌弃你的用户很多正是你的目标用户。

3. 开源作者的自我反思

如果用户反复咨询同一个看起来很低级的问题,开源作者可能反思一下以下几个问题:文档有没有写好,FAQ 有没有适当的引导,还有最重要的,文档的搜索功能是否健全。

我们在官网提供了基于 algolia 的全文搜索之后,issue 和日常提问中的“小白”问题比例就直接大幅度降低了。而对于那些第一次接触开源社区,却又不知道怎么提问题的开发者。不妨在官网文档附上《提问的智慧》的链接,我相信真正看完了的开发者会感谢你的。

低能耗维护开源项目

有非常多的开源项目第一版本发布的时候轰轰烈烈,但是没过一年就会不了了之,真正能长期维护的开源项目更是少之又少。很多时候可能真的不是“KPI项目”在作祟,而是“高功耗”的维护成本最后压垮了维护者的热情。

是的,很多开源项目作者在宣布项目开源的时候都忽略了一件事情,那就是:维护比开发要更加“耗能”。

拿我们的项目举例,2年半的时间我们处理了社区提出了将近 3000 个 Issue 和 1700 个 Pull Request。想象一下,如果你是一个业余维护开源项目的开源作者,在你精疲力尽 996 完成工作之后,发现还有几十个 issue 和 pr 等着你处理,如此这般,经年累月,你还会对开源有着最初的热情吗?

无论是背后有大公司站台的 “3A“ 级开源项目,还是个人驱动的业余项目,维护成本最后都会不停的消耗掉开发者的时间和热情,而想要长期将一个项目稳定维护下去,低能耗维护项目其实是一件很重要的事情。这件事情我们的经验是:

1. 尽量全自动化工作流

全自动化工作流是降低项目维护功耗最有效的手段。

在我们的项目中,除了大家都了解的 CI 流程以外,Issue 和 PR 的中英文翻译、筛选、分类、分配,到最后的关闭,整理和锁定。甚至每周的项目进展,还有 Changelog 文档的生成,甚至版本的发布,全部都是全部交给 bot 完成的。

大家也可以在 Github Marketplace 找到适合自己的 bot,配合 Github ActionAzure Pipeline(对开源项目无上限免费)等工具可以极大的降低开源项目作者的维护负担,让开源作者更聚焦在代码的开发上。

2. 项目规范与测试

好的项目规范和测试在项目开发的时候会让你付出更多的精力和时间,但是这些成本在后续的维护过程中很快就会收回。这些努力会至少帮你挡住超过 95% 的不合格代码提交,极大的降低你 review 到不合格代码的概率,而当你需要在保证兼容的情况下做项目重构的时候,你一定会感谢自己曾经辛苦写下的单元测试。

最后

参与开源项目的过程很像种树,无论你是种下了树苗,还是参与了浇水施肥。

当它最终长成参天大树,大家可以一起乘凉的时候,你一定会很开心自己也为世界更美好做出了一点点贡献。而种一棵树最好的时机是十年前,其次正是现在。

开源一定会让世界更美好。

created time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha a6eaf16a45165737953413dede155b3f0db7baaa

Auto-generated commit

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 18ac065409e5374fae2699eb31b234e18e967147

feat: add home page

view details

push time in 7 days

push eventvthinkxie/portfolio

vthinkxie

commit sha cd3a2db00a228e955703b3e55d6bc51da3c85ff4

Auto-generated commit

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha edcc9ec69a893ba171b5605d8072a030fb2bcfd0

feat: add home page

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 5b2e8febdb64632e3fdd4987732fa7fbadea57ab

Auto-generated commit

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha b62b9698b61be19df9a6c6122dee13f96930f075

feat: add home page

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha db82391aa1d0946a1715ad89bc87c62bdd29a09c

Auto-generated commit

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 5ec49535669e5f314222a443a33200c5b9c1bcea

feat: add home page

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 395338b13840ecd56d756214260751341681a36c

Auto-generated commit

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha f4b2014a2fc01aea2db38cef0313b99ab14edb8e

feat: add home page

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha a9227d138b84a37b197a99d4768f5d49532ff41c

Auto-generated commit

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 6bac2530ec26b75cb577a6bc00cfb9eb54a04e94

feat: add home page

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha a347d8b394571b06f9249cfddf93aaa466c9a217

Auto-generated commit

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 7a80648976c2ce155edcd7daf671871955d2b394

feat: add home page

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 22a69aa240b6888e46e7145703bc98805e4d1fdb

Auto-generated commit

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha e214d5a58f40fbf346ded2d20d1a70d161d23adc

feat: add home page

view details

push time in 8 days

issue closedant-design/ant-design-icons

Icon Dynamic Loading Logic Might Cause Incorrect SVG Element Rendering

Issue Story

Recently I use a way that listen the mouse enter/leave event to control the nzType property for the [nz-icon] directive (ng-zorro). Let's say the initial icon type is A:A, and the hover state icon type is A:B (mouse entered). I found that while I move my mouse super fast, which make the mouseenter and mouseleave event triggered so closely, the icon style will remain on the hover state (A:B), but not the initial state A:A.

This might be a rare case but it surely would occured under some circumstances.

Why?

The reason that causing this issue is the mishandle ajax promise mechanism, which, the icon directive does not check if the resolved svg data is the same type/name with the current type. Because the A:A is the initial state and was loaded the time the application ready, but A:B was load dynamically at the very first mouse enter event. If the A:B svg data resolved time is later than the mouse leave event trigger time (which now the icon type in the icon directive is A:A), the resolved A:B svg will be rendered on the page:

  // file: ant-design-icons/packages/icons-angular/src/component/icon.directive.ts (line: #32)
  protected _changeIcon(): Promise<SVGElement | null> {
    return new Promise<SVGElement | null>(resolve => {
      if (!this.type) {
        this._clearSVGElement();
        resolve(null);
      } else {
        this._iconService.getRenderedContent(
          this._parseIconType(this.type, this.theme),
          this.twoToneColor
        ).subscribe(svg => {
          this._setSVGElement(svg);
          resolve(svg);
        });
      }
    });
  }

How to Fix?

As the Why? section mentioned, the key to solve this issue is to stop rendering svg to the page which does not match the current type (theme or twoToneColor). So, we can:

Option 1

Firstly: Change the return type of _loadSVGFromCacheOrCreateNew (https://github.com/ant-design/ant-design-icons/blob/14912a18fac76d25ce983ac11047670fd8b4b072/packages/icons-angular/src/component/icon.service.ts#L286) to a type that contains the icon key {key: string, svg: SVGElement}, as well as the getRenderedContent function, to make its subscribers know what more information of the resolved svg data;

Then: In the _changeIcon() function of icon.directive.ts (https://github.com/ant-design/ant-design-icons/blob/14912a18fac76d25ce983ac11047670fd8b4b072/packages/icons-angular/src/component/icon.directive.ts#L32), add a validation for the svg information before execute the this._setSVGElement(svg);. If the validation passed, continue execution; otherwise, do not call this._setSVGElement(svg); and resolve a null value. This can prevent the incorrect svg element being rendered on the page.

Option 2

While Option 1 got lot of things to do, we can also simplify the process, by recording the icon information at the beginning of the _changeIcon() method and ensure them before rendering the svg data on the page. The updated _changeIcon() function may look like:

protected _changeIcon(): Promise<SVGElement | null> {
  // record the icon information
  const iconState = `${this.type}_${this.theme}_${this.twoToneColor}`;
  return new Promise<SVGElement | null>(resolve => {
    if (!this.type) {
      this._clearSVGElement();
      resolve(null);
    } else {
      this._iconService.getRenderedContent(
        this._parseIconType(this.type, this.theme),
        this.twoToneColor
      ).subscribe(svg => {
        // generate the current icon information and see if it is the same as before.
        const curIconState = `${this.type}_${this.theme}_${this.twoToneColor}`;
        if (curIconState === iconState) {
          this._setSVGElement(svg);
          resolve(svg);
        } else {
          resolve(null);
        }
        
      });
    }
  });
}

Ending

I'm happy to listen for your feedback, and ready for a PR anytime you needed.

closed time in 8 days

Roman-Lo

push eventant-design/ant-design-icons

wendellhu

commit sha e2041e6e1c8d2706bf0d2ec7614bcfa9d5e15d8a

[release] angular v10 beta (#320) * fix(module:angular): fix dynamic loading race condition close #315 * fix: fix typo * doc: change case * release(module:angular): release 9.0.2 * release(module:angular): release 10.0.0-beta.0 * chore: update peerDependencies

view details

push time in 8 days

push eventvthinkxie/portfolio

vthinkxie

commit sha fd7bc8cadbff5d55814d60626e818cff5e3653bf

Auto-generated commit

view details

push time in 9 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 01f74a94a8ca49e66e6bb88e5cf2d84ccd480434

feat: add home page

view details

push time in 9 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 34e496914634ebead9dad856b98ff0d6cf0bf265

Auto-generated commit

view details

push time in 9 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 0b3714d01ada55a5f24e7b07ec0aeb25e8b4f338

feat: add home page

view details

push time in 9 days

push eventvthinkxie/portfolio

vthinkxie

commit sha d5a9b13fd010e40646fbf17ea6ac341531af6b4d

Auto-generated commit

view details

push time in 9 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 121d9fd73fe3aef9ab5a29e0fb9aa0a661f36db3

chore: init sketch

view details

vthinkxie

commit sha ed11059d346fd580872b3e5229f455534fe8afde

feat: add home page

view details

push time in 9 days

Pull request review commentant-design/ant-design-icons

[release] angular v10 beta

     "Wendell Hu <wendellhu95@gmail.com>"   ],   "dependencies": {-    "@ant-design/colors": "^3.1.0"-  ,    "tslib": "^2.0.0"+    "@ant-design/colors": "^3.1.0",+    "tslib": "^2.0.0" },   "peerDependencies": {-    "@angular/common": "^9.0.0",-    "@angular/core": "^9.0.0",-    "@angular/platform-browser": "^9.0.0",+    "@angular/common": "^10.0.0",+    "@angular/core": "^10.0.0",+    "@angular/platform-browser": "^10.0.0",     "rxjs": "^6.4.0"

rxjs should also update?

wendellhu95

comment created time in 9 days

Pull request review commentant-design/ant-design-icons

[release] angular v10 beta

 {   "name": "@ant-design/icons-angular",-  "version": "9.0.1",+  "version": "10.0.0-beta.0",   "license": "MIT",   "repository": "https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-angular",   "contributors": [     "Wendell Hu <wendellhu95@gmail.com>"   ],   "dependencies": {     "@ant-design/colors": "^3.1.0"-  },+  ,    "tslib": "^2.0.0"+},   "peerDependencies": {     "@angular/common": "^9.0.0",

peerDependencies needs update too

wendellhu95

comment created time in 9 days

startedngnice/site-builds

started time in 9 days

push eventvthinkxie/portfolio

vthinkxie

commit sha e841255e7cbfa37d83b6224882addb1157358f42

Auto-generated commit

view details

push time in 9 days

push eventNG-ZORRO/ng-zorro-antd

Hsuan Lee

commit sha 074a3da1a7094fc9b29fe836021e69359e1fde2b

chore(release): release 9.2.2 (#5467)

view details

push time in 11 days

PR merged NG-ZORRO/ng-zorro-antd

chore(release): release 9.2.2 PR: unreviewed

PR Checklist

Please check if your PR fulfills the following requirements:

  • [ ] The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
  • [ ] Tests for the changes have been added (for bug fixes / features)
  • [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[x] Other... Please describe:

What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->

Other information

+34 -2

2 comments

5 changed files

hsuanxyz

pr closed time in 11 days

push eventNG-ZORRO/ng-zorro-antd

Hsuan Lee

commit sha 6a26143a8f0dfa424f2d218222b50ab848163b97

fix(module:modal): throw an error when autofocus on the confirm-mode (#5462) close #5454

view details

push time in 11 days

PR merged NG-ZORRO/ng-zorro-antd

fix(module:modal): throw an error when autofocus on the confirm-mode PR: reviewed-approved

close #5454

PR Checklist

Please check if your PR fulfills the following requirements:

  • [x] The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
  • [x] Tests for the changes have been added (for bug fixes / features)
  • [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

Issue Number: #5454

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->

Other information

+17 -0

2 comments

3 changed files

hsuanxyz

pr closed time in 11 days

issue closedNG-ZORRO/ng-zorro-antd

Confirm modal always throws error in console

Reproduction link

https://stackblitz.com/edit/angular-aaqib1?file=src/app/app.component.ts

Steps to reproduce

  1. open Chrome dev console
  2. click confirm button

What is expected?

console is empty

What is actually happening?

console prints: ERROR TypeError: Cannot read property 'focusInitialElementWhenReady' of undefined

Environment Info
ng-zorro-antd 9.2.1
Browser Chrome latest

it can be reproduced on https://ng.ant.design. The bug might be introduced by 9.2.1<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

closed time in 11 days

rppig42

Pull request review commentNG-ZORRO/ng-zorro-antd

refactor(module:all): support Angular 7.0

+import { animate, style, transition, trigger } from '@angular/animations'; import {   AfterViewInit,+  ChangeDetectionStrategy,   Component,   ElementRef,   Input,-  NgZone,   OnInit,   Renderer2,   ViewChild } from '@angular/core'; -import {-  animate,-  style,-  transition,-  trigger-} from '@angular/animations';-+import { AnimationCurves } from '../core/animation/animation'; import { isEmpty } from '../core/util/check';-import { toBoolean } from '../core/util/convert';+import { InputBoolean } from '../core/util/convert';++const ANIMATION_TRANSITION_IN = `0.3s ${AnimationCurves.EASE_IN_BACK}`;+const ANIMATION_TRANSITION_OUT = `0.3s ${AnimationCurves.EASE_IN_BACK}`;  export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | 'warning';  @Component({   selector           : 'nz-badge',   preserveWhitespaces: false,+  changeDetection    : ChangeDetectionStrategy.OnPush,   animations         : [-    trigger('enterLeave', [-      transition('void => *', [-        style({ opacity: 0 }),-        animate('0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46)')+    trigger('zoomAnimation', [+      transition(':enter', [+        style({ opacity: 0, transform: 'scale(0) translateX(50%)' }),+        animate(ANIMATION_TRANSITION_IN, style({+          opacity  : 1,+          transform: 'scale(1) translateX(50%)'+        }))       ]),-      transition('* => void', [-        style({ opacity: 1 }),-        animate('0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46)')+      transition(':leave', [+        style({ opacity: 1, transform: 'scale(1) translateX(50%)' }),+        animate(ANIMATION_TRANSITION_OUT, style({+          opacity  : 0,+          transform: 'scale(0) translateX(50%)'+        }))       ])     ])   ],   templateUrl        : './nz-badge.component.html',   host               : {     '[class.ant-badge]'       : 'true',     '[class.ant-badge-status]': 'nzStatus'-  },-  styles             : [-    `-      :host:not(.ant-badge-not-a-wrapper) .ant-badge-count {-        position: absolute;-        transform: translateX(50%);-        right: 0;-      }--      :host .ant-badge-dot {-        position: absolute;-        transform: translateX(50%);-        right: 0;-      }-    `-  ]+  } }) export class NzBadgeComponent implements OnInit, AfterViewInit {-  private _showDot = false;-  private _showZero = false;-  private _count: number;   maxNumberArray = [];   countArray = [];   countSingleArray = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];   @ViewChild('contentElement') contentElement: ElementRef;+  @Input() @InputBoolean() nzShowZero = false;+  @Input() @InputBoolean() nzShowDot = true;

ok

vthinkxie

comment created time in 12 days

push eventvthinkxie/portfolio

vthinkxie

commit sha acc199f5fd92d6ebb6d8cc2e4b2e9253dcbe4119

Auto-generated commit

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha e506572f55751809cfeb4dc107fd34251b56dbad

chore: init sketch

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha a3d8ea702856451eb4d8bd4e89fdc44439249de3

chore: init sketch

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 73d721013e84ce1895ef5a72d6da7ce1cb6944aa

Auto-generated commit

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha b3da52f92bbc9c747f399609c770dcc9b5fd1b89

chore: init sketch

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha fbba4154afda3d755ca89b5fce8fe78eadbbccf8

Auto-generated commit

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha a683b02b127b60964f37390a312c382713811c99

chore: init sketch

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 038b09998885cc99c4b4d258d4bb3235de21997b

Auto-generated commit

view details

push time in 13 days

push eventvthinkxie/portfolio

Yadong Xie

commit sha 5c880d2303a7778fb3c11154c7805c1f64fa9ba8

Create CNAME

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 4a1ca881e21ef77e86bb195a445171be340e070f

Auto-generated commit

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha fbd9856efef10ead493f877cdc2b81b4edcc3384

chore: init sketch

view details

push time in 13 days

push eventvthinkxie/portfolio

Yadong Xie

commit sha 9b2b7e2abcb8c54bb98107d34708d90410e4b07e

Create CNAME

view details

push time in 13 days

create barnchvthinkxie/portfolio

branch : gh-pages

created branch time in 13 days

create barnchvthinkxie/portfolio

branch : master

created branch time in 13 days

created repositoryvthinkxie/portfolio

created time in 13 days

create barnchvthinkxie/vthinkxie.github.io

branch : gh-pages

created branch time in 13 days

push eventvthinkxie/vthinkxie.github.io

Yadong Xie

commit sha 05af8ddbed8879da5a7109f120f1ee3536cb50c4

Create CNAME

view details

push time in 13 days

push eventvthinkxie/vthinkxie.github.io

vthinkxie

commit sha a584e2080efb2a0ba4640a8784d79ef945449331

chore: init sketch

view details

push time in 13 days

push eventvthinkxie/portfolio

Yadong Xie

commit sha a6515b159fb313be266fba4d7529c5f34e1d4c06

Create CNAME

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha e57790d6f8765c01dfba2e3589bc5eb778ce65a2

Auto-generated commit

view details

push time in 13 days

push eventvthinkxie/portfolio

vthinkxie

commit sha 2da972dfb2d11436015c24a6ddcdf0e530885e18

chore: init sketch

view details

push time in 13 days

push eventvthinkxie/portfolio

Yadong Xie

commit sha cf20a9d14d12debc4bdfa769ed18d392b5526303

Create CNAME

view details

push time in 13 days

create barnchvthinkxie/portfolio

branch : gh-pages

created branch time in 13 days

create barnchvthinkxie/portfolio

branch : master

created branch time in 13 days

created repositoryvthinkxie/blog

created time in 13 days

fork vthinkxie/L-ink_Card

Smart NFC & ink-Display Card

fork in 13 days

startedpeng-zhihui/L-ink_Card

started time in 13 days

startedlukechilds/merge-images

started time in 15 days

startedng-web-apis/resize-observer

started time in 16 days

startedvendure-ecommerce/vendure

started time in 16 days

issue closedNG-ZORRO/ng-zorro-antd

nz-table There is a default td under expanded row

Reproduction link

https://stackblitz.com/edit/angular-xsdpnt-1f6zcy

Steps to reproduce

展开的行下存在默认的td标签,导致展开行中的元素都包含在这个td中 <br>在开发者工具定位到展开的tr,会发现tr下面的td都被包含在了一个默认的td中

What is expected?

展开的tr保持开发者写的内容,不在其中增加任何元素

What is actually happening?

展开的tr下被增加td标签,并且原tr下的td都又被包含在了这个td下

Environment Info
ng-zorro-antd 9.1.2
Browser Chrome

8.5.2升级9.1.2遇到的问题<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

closed time in 17 days

erdongerzhong

issue commentNG-ZORRO/ng-zorro-antd

nz-table There is a default td under expanded row

9.x 之后展开 td 的colspan 由 组件自动计算,不再需要在 tr 内手动声明 td

erdongerzhong

comment created time in 17 days

startedxzhih/one-key-hidpi

started time in 17 days

more