Posts related to programming category

Use git archive to zip your source code

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 More

how to use jQuery with TypeScript

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 写了一个微信小程序

最近尝试写微信小程序，毕竟是现在的趋势。然后发现因为入场太晚，各种轮子已经造得遍地飞了。比如这里有一个框架，出自京东，叫做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`，编译不出来的。![hot](https://github.com/hankxdev/taro-v2ex/raw/master/readme/hot.png)

Read More

How to fix You have to set a contact email in Chrome Web Store

I have multiple accounts in Chrome Web Store to manage multiple Chrome extensions.Today I found that one of my extension [one click extensions manager](https://chrome.google.com/webstore/detail/one-click-extensions-mana/pbgjpgbpljobkekbhnnmlikbbfhbhmem) did not get updated as schedule. which is very abnormal because it's scheduled by Github action, and the log shows that the latest version had been submitted to the store several days ago.In the dashboard it's telling me to add a contract email in my account so that I could publish it. And I already added it long time ago.After several meaningless refreshes and clicking on the save button, I realized it might because of my other accounts. So I switched to other accounts and found there is one account without contact email. And the item got published once I fixed this issue.So weird because it never asks me to add contact email before. And the store hint is so unclear, it needs you to add contact email on every account, not just the current one.Honestly, the new Chrome web store dashboard is not as easy to use as the old one. Only the UI is fresher than before.Also, got an email from Microsoft Edge team, they ask me to submit my extension to Edge store, as Edge is using Chromium now. So if you have published Chrome extension before, you can try to submit it to Edge store too. The process would take less than 30 min to do it.And, the Edge store dashboard is hard to use too, especially if your extension surppots multiple language, you will need to set information like logo, screenshot, description for every language. insane, right?.

Read More

Use Husky to manage git hooks

[Git hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) is a powerful tool to make your life easier.It fires off custom scripts when certain important actions occur. one common scene like: you want to lint your code every time when you commit changes, so that your code has a good style and following your team's code specification. Or you want to run test before pushing your code/> Like many other Version Control Systems, Git has a way to fire off custom scripts when certain important actions occur. There are two groups of these hooks: client-side and server-side. Client-side hooks are triggered by operations such as committing and merging, while server-side hooks run on network operations such as receiving pushed commits. You can use these hooks for all sorts of reasons.With git hooks, you can make these actions automatically.While [**husky**](https://www.npmjs.com/package/husky) is a tool to make Git hooks easier to use. To use it is very easyFirst you install it as a development dependency with npm:```bash npm install husky --save-dev ```OR **yarn**:```bash yarn add husky -D ```Then in your `package.json` , add:```json { "husky": { "hooks": { "pre-commit": "yarn lint", "pre-push": "yarn test", "...": "..." } } } ```In the example, we added 2 hooks, `pre-commit` and `pre-push`, they are meant what they named.- **pre-commit** means, every time you run `git commit`, it will run `yarn lint` first, and commit the code if `yarn lint` passes without error. - **pre-push** run command `yarn test` when you run `git push` - `yarn lint` and `yarn test` are commands that you define in your `scripts` in package.json. normally those commands that you runs manually, like `yarn start` or `yarn dev`, etc. you can add any command you want and run the, in the hooks.Pretty straight forward and easy :)

Read More