Use git archive to zip your source code
- Hank
- 29 Aug, 2020
To zip compiled project file is easy, normally I just use [archivejs](), write a small nodejs script, and then add a script in `package.json`.And then I need to zip the source code only. Exclude the dist folder, the huge `node_modules` folder and other folders.Basically just source code and exclude everything in .gitignore file.I tried to use `archivejs`'s `glob` api. Like so:```javascript archive.glob('**', { ignore: ['folder/**', 'file'] }) ```But I could not make it works, it either zip nothing or zip everything in my folder, I think it's because the path that I set is not correct. And I don't want to spend too much time on reading and exploring archivejs's api doc.So I came to use `zip` command in terminal. To use it is very simple, just use `-x` to exclude file, like this```bash zip -r output.zip directory -x \*\*/\*/node_modules/\* ```Which is great. But the command is too long and if there are many files you want to exclude, you will need to write down them every time.At the same time I found that with `git archive` I can do this easily. so just run```bash git archive --format=zip HEAD -o zipfile.zip ```it will pack all your source code into zip file, exclude everything in the .gitignore file. Super neat.
Read Morehow to use jQuery with TypeScript
- Hank
- 06 Aug, 2020
It's 2020, why do you still need to use jQuery?Yeah, jQuery has 53.8k stars on Github. And still, there are more than 97% of websites are using it.Even if you don't want to use it in your fancy project. It's still a good choice to use it when you are building a demo, prototype, or some small side project. I mean, when you are configuring your fancy project with wepack, react/vue/angular, babel, I already have done a small page which can send request to the API and show the result on the page.Anyway, if you want to use jQuery with TypeScript. Here are the steps that you need to do.#### add jquery```bash yarn add jquery ```### add jquery typesthis will suppress VS Code complains that it can not find jquery types```bash yarn add @types/jquery ```### config tsconfig.json to suppress another warning message> can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259) > index.d.ts(35, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.goto your `tsconfig.json` file, add one line in your the `compilerOptions` block. if you don't have this tsconfig file in your project's root folder, then create one.```json "allowSyntheticDefaultImports": true, ```Then you can use jquery in your ts file like this:```javascript import $ from 'jquery'$.ajax().then().catch().finnally() ```
Read More用 Taro 和 Vue 写了一个微信小程序
- Hank
- 05 Aug, 2020
最近尝试写微信小程序,毕竟是现在的趋势。然后发现因为入场太晚,各种轮子已经造得遍地飞了。比如这里有一个框架,出自京东,叫做Taro,它的目的是写一份代码,就可以在诸如微信、支付宝、字节跳动(它家的什么app支持小程序?)等端作为小程序运行。于是拿来试了以下。我本来只熟悉Vue的,这个Taro原生支持React,代码风格也都是React的样式。虽说现在3.0以上支持Vue了,可是要做的时候还是有一些转换成本。然后框架本身也还存在一些bug,不过一次编写,多端运行还是挺有意思的。项目地址:https://github.com/hankxdev/taro-v2ex以下内容来自README:### Taro + Taro-UI + Vue + V2EX API 多端小程序如题,这是一个使用了这几个技术的练习项目。我是第一次使用Taro和写微信小程序。Taro官方有个[渐进式教程](https://taro-docs.jd.com/taro/docs/guide/),使用的也是V2EX的API。#### 技术栈:- [Taro](https://github.com/NervJS/taro) - [Taro-UI](https://github.com/NervJS/taro-ui) - [Taro-ui-vue](http://taro-ui-vue.fontend.com/) - [V2EX API](https://github.com/igaozp/V2EX-API) - Vue - Vuex - SCSS - Typescript#### 本地运行和测试- `yarn` - `yarn dev:weapp` - 因为调用了v2ex 的API,用自己的微信小程序ID的话,需要去后台设置一下域名白名单,否则 API 调用会失败。#### 比教程多了一些的是:- 代码完整。官方教程的代码比较零散,甚至有些跑不通。 - 用户详情页面和节点详情页面 - 全部使用真正的V2EX API 而不是使用自定义数据 - 自定义 Tabbar - 使用了Taro-UI来做界面#### 项目存在的问题:以下是我知道的主要问题。大佬们如果发现新问题或者知道这些问题的答案,欢迎提 issues 或者 PR, 望不吝赐教。- 几个页面在切换的时候并不会刷新。这里怀疑是Taro的bug,文档中写的 [onShow](https://nervjs.github.io/taro/docs/vue/#onshow-1) 方法并不能在页面显示的时候被成功调用。 - 不怎么好看。因为主要用来熟悉Taro以及微信小程序和多端小程序开发,因此并未在界面上花功夫,几乎没有怎么写样式。使用的全都是Taro-UI 默认的组件。 - 有点卡。一方面v2ex并未提供分页的API。有些 endpoints 诸如获得节点列表、帖子列表等,都是一大堆上千条数据一下子全返回。网络慢的时候导致卡顿更加明显。 - TypeScript 使用并不规范。我很少写 TypeScript。也一直懒得学,因此基本上都是用JavaScript 的写法在写 TypeScript。同样,写好或者学习 TypeScript 也并不是我写本项目的目的。略过。 - CustomTabBar 的实现并不规范。现在的做法是写一个 CustomTabBar, 然后放置进每个页面中。正确的做法应该是。1. 在 `app.config.ts` 中的`tabList` 里,设置 `custom: true` 2. 在 `src` 目录下新建 `custome-tab-bar` 文件夹 3. 在 `custome-tab-bar` 下面添加 `index.js`,`index.wxml`, `index.wxss` 来自定义 tabbar 的样式和行为。 需要注意的是,这里不能直接写 `index.vue`,编译不出来的。
Read MoreHow to fix Git show all file as modified in WSL
- Hank
- 14 Jul, 2020
## SolutionIf you open your code in Windows, and run git in WSL bash, you will have a big chance to meet an issue that `git status` shows all your file get modified. To fix the issue, run this in WSL bash:```bash git config --global core.autocrlf true ```Normally I use OSX, but today I have to go back to my Windows PC to try an extension on Edge.I'm using WSL (that's Windows Subsystem for Linux) to manage and build my projects.After I cloned my repo from Github, I tried to create a new branch for Edge version. But after I ran `git branch branchname` , it told me that there were changes need to commit first.So I ran `git status`, to check what's been changed. Then I got this:This was a simple app. so it's basically showing that every file got modified. But I hadn't do anything to any file.It's because I was using git in WSL, but I opened files in Windows system. So the line ending is `CRLF`, but git thought it's on Linux so the line should ends with `LF`.So the fix command will tell git to use `CRLF` and line ending.
Read MoreChange Ubuntu 20.04 update source to mirror site in China
- Hank
- 13 Jul, 2020
Ubuntu 20.04 has been released for a while, its code is `Focal Fossa`. Again, if you are in China, better change the update source to mirror sites.This post is just a copy from [Change Ubuntu 18.04 update source to mirror site in China](https://momane.com/change-ubuntu-18-04-source-to-china-mirror), and I just replaced the source url from thoes ones of 18.04 to 20.04Here are several famous mirror sites. What you need todo is pick one from below and edit `etc/apt/sources.list`, replace the content in this file.There are some links beend commented out.- starts with`deb-src` is for source code, without them the speed would be even faster - the one with `focal-proposed` are just proposed updates, only enable them if you know the risk.**Better backup you `etc/apt/sources.list` before you do this**#### 163 (netease)_source:http://mirrors.163.com/_``` deb http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse # deb http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse ```#### alibaba (aliyun)_source:https://opsx.alibaba.com/mirror_``` deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse # deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse # deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse # deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse # deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse # deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse # deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse ```And here are also two Chinese university mirror, use them only if you are in Chinese university.#### tsinghua university``` deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse ```#### ustc (university of science and technology of China)``` deb https://mirrors.ustc.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.ustc.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.ustc.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.ustc.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb https://mirrors.ustc.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse # deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse ```Enjoy:)
Read More