Posts related to programming category

How to trigger click event in Gmail

If you want to hack Gmail UI, to build web extension or any other similar tool that works on top of Gmail, you always want or need to trigger some DOM events in Gmail UI, like you want to click on some buttons/icons, to send out email, to make the compose window pop out, etc.You can't do it by simply use `click` function, either by Vanilla JS or jQuery, either `click` or `trigger` function can not achieve your goal.You need to do this by using [`Document.createEvent()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent).Take `click` for example, you want to click an `icon`:```javascript const mouseDown = document.createEvent('MouseEvents') mouseDown.initEvent('mousedown', true, false) icon.dispatchEvent(mouseDown)const mouseUp = document.createEvent('MouseEvents') mouseUp.initEvent('mouseup', true, false) icon.dispatchEvent(mouseUp) ```You may want to make it as a function so that you can use it click any element.

Read More

Boost your Frontend development speed in China

Waiting for something is wasting time, especially when development, you always need to wait for compiling, wait for install dependencies...And if you are in China, this waiting time will be much longer because of some well known reason.Here are some changes that will save you some time in China if you are doing frontend development.## Ruby and Railschange your gem source to China mirror, source: https://ruby-china.org/```bash gem source -a https://gems.ruby-china.com ```## npmchange your npm source to China mirror, source , source: https://developer.aliyun.com/mirror/NPM```bash npm config set registry https://registry.npm.taobao.org ```or you can also install a `cnpm`, use `cnpm` rather than `npm`, to avoid change the source url permanently.```bash $ npm install -g cnpm --registry=https://registry.npm.taobao.org ```## yarnSame as npm.```bash yarn config set registry https://registry.npm.taobao.org --global ```there is no `cyarn` though## ubuntuchange sourcelist, check [this post](/change-ubuntu-18-04-source-to-china-mirror)## homebrewchange homebrew core source and repo to USTC (University of Science and Technology of China) [Mirror](https://lug.ustc.edu.cn/wiki/mirrors/help/brew.git).- change brew.git: ```bash cd "$(brew --repo)" git remote set-url origin https://mirrors.ustc.edu.cn/brew.git ```- change homebrew-core.git ```bash cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core" git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git ```- change homebrew bottles source for `bash` user ```bash echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.bash_profile source ~/.bash_profile ``` for `zsh` user ```bash echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.zshrc source ~/.zshrc ```

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

用 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

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