标签： 开源

分类
作品

超全面全栈入门项目：fastest

TL;DR.

前些天做了个覆盖面很广的项目：FastTest。涉及到静态网站、node.js 后端 API、响应式、多语言、Vue3 全家桶、前端工具链、nginx 配置等一系列技术，都是很基础的应用，相信对大家入门很有帮助。

GitHub：https://github.com/meathill/fasttest

欢迎阅读学习，有任何问题均可提问或提 issue。

前些日子有个朋友找到我，想请我帮他做个项目。我看了一眼需求，不太想接：这个项目太小，要多了不合适；要少了感觉又不值当——有那时间还不如砍两把胖虎。

后来我仔细一想，感觉这个项目很适合拿来做教程，而且是非常全面的全栈入门教程。

先来看需求。他的需求很简单：开发一个测速应用。用户打开页面，点击按钮，然后下载一些东西，下载完成之后，告诉他他的网速是多少。与之前的测速产品不同，这个应用不下载大文件，而是从各种 CDN 下载 JS 库和 SDK，因为大部分 web 应用都依赖这些资源，所以可能更接近真实体验。

关于需求我们不深入讨论（我觉得挺有道理，但也未必有道理到哪儿去……），只看实现。为了满足这个需求，我们需要开发这些东西：

  1. 静态页，让用户能够测速。这就需要：
    1. HTML+CSS+JS，静态资源
    2. 响应式，支持桌面和移动端
    3. 多语言支持
  2. 后台，能调整待测资源、修改翻译、控制广告、查看数据。这就需要：
    1. 友好的 Admin panel：vue 全家桶
    2. 后端 API：express.js + node.js server
    3. 自动发布静态页（webpack 前端工具链）
  3. 部署到服务器：
    1. 静态服务供给用户端页面和资源
    2. SPA 服务，提供后台 Admin Panel 给管理员
    3. 反向代理 express.js API
    4. 配置 CDN
  4. 其它，比如版本管理、前端预处理工具，等等

这些东西可以说是非常全栈，除了没有移动 App、没有数据库操作，其它 Web 开发的东西都用到了。而且涉及到技术也都很基础，没有特别深入的东西。再加上，这个项目会上线，会迭代，是个真实产品。所以，很适合拿来做教程，大部分观众，不管是什么背景，都可以拿来入门。

于是我就答应了，然后断断续续在直播的时间把它做了出来。当然还有一些问题，不过大部分功能都就绪了。

项目放在 GitHub 上：https://github.com/meathill/fasttest，有需要的同学请自由取用。对其中任何技术点有问题都可以提问或者开 issue。

网站地址在 https://afasttest.com。

视频还需要一些时间来整理，将来慢慢放出来吧。着急且有时间的同学可以自行从百度网盘下载：https://pan.baidu.com/s/1KPuCM-9gPd0hQsr5Df_PnA 提取码: w8f2。

分类
技术

npm 支持开发者添加募款链接

昨天随手升级个人首页的依赖，更新完之后，npm 提示：

6 packages are looking for funding
  run `npm fund` for details

如果你执行 npm fund，可以看到类似这样的信息：

your-repo@0.1.0
├─┬ core-js@3.4.2
│ ├── type: opencollective
│ └── url: https://opencollective.com/core-js
├─┬ eslint@6.7.0
│ └── url: https://opencollective.com/eslint
└─┬ swiper@5.2.1
  ├── type: patreon
  └── url: https://www.patreon.com/vladimirkharlampidi

opencollective 和 patreon 都是众筹网站，只不过众筹的内容不是实物商品，而是支持你喜欢的创作者，无论他是摄影师、画家，还是开源软件作者。据说 Vue 的作者尤雨溪每年可以从 Patreon 上获得将近 $20w 的捐赠，这笔钱可以帮助他以独立身份继续开发 Vue，还可以雇佣一名全职开发者帮助他把这份工作做得更好。

我去 NPM 官网找了一下，npm fund 的文档还没更新上去，只找到这篇 RFC: Add funding support to package.json，大意是包开发者可以在包的描述文件（package.json）里放上一段募款声明，这样包的用户在安装的时候，就会看到我开篇写的那些文字。提醒包的开发者：你们可以通过捐赠的方式，表达对依赖开发者的感谢。

我觉得这种形式挺好的。当然，有些人可能看不惯这种有“伸手嫌疑”的行为，但是，与其在无酬工作中纠结、放弃自己的项目、甚至被别有用心的人利用埋后门，任何不影响安全性、不增加使用负担的变现方式都是合理且值得鼓励的。

希望开源软件开发者越过越好，开源基建开发者越过越好，世界越来越好。

分类
jQuery

推荐类库 jquery-ui-touch-punch

正如我在前一篇文章《前端框架点评》中所说，jQuery UI库中最有用的是那几个 xxxable，而不是里面的组件（因为自带样式且较丑）。所以当它们在某些环境下没法正常工作就比较老火了，比如draggable，在iPad之类的移动设备中，就无法使用，因为它没有针对触摸事件进行侦听。

经过Google，发现有人已经解决了这个问题，就是我说的jquery-ui-touch-punch，开源，代码托管在github。直接在html中引用jQuery UI和这个补充包，后者会覆盖前者的实现，帮助它支持触摸拖动。感兴趣的同学可以到这个页面去尝试。感谢它的作者furf。

顺便说下我对开源、免费、盗版的态度。开源和免费都是好东西，影响着改变着我们的世界。但是决定一个作品一段代码一款产品是否开源免费的人，只能是其作者或者其版权拥有者，别人无权“替”他们做出选择。换句话说，我是反盗版的，对于海盗湾也无甚好感，对于那些有意无意忽视盗版危害反而替海盗湾摇旗呐喊的人，很是反感。

现在的版权政策和专利制度，确实在某种程度上阻碍着创新，也给流氓（比如苹果）留下可乘之机。但是在更好的方案出台之前，我们只应该尽力输送好的原创作品给开源社区，而不是盗版他人的东西，再冠以自己“开放、分享”之名。那样太无耻了。