How to copy image and text to clipboard with JavaScript

I used to saw my colleague add a 30kb lib only to implement a copy function that when the user clicks on a text, copy it to the clipboard.And I also saw someone still trying to use flash or Clipboard lib to do the same thing.#### Here is how to copy text to your clipboard with JavaScript with just several lines of code. And it's cross-browserand device. No need for any 3rd party lib.```javascript function copyToClipboard(text) { const ta = document.createElement('textarea') ta.value = this.url document.body.appendChild(ta) //hide it ta.style.padding = 0 ta.style.border = 'none' ta.style.outline = 'none' ta.style.boxShadow = 'none' //select the text ta.focus() ta.select() document.execCommand('copy') document.body.removeChild(ta) } ```it's very simple, you just append an invisible textarea to the page, set value as the text you want to copy, and run `document.execCommand('copy')`. Then remove the textarea from the page.#### here is how to copy the image to your clipboard with JavaScriptNote that this one only works on Chrome and Edge right now (2020-10) https://caniuse.com/mdn-api_clipboarditemThis requires you to use `canvas` to port the image to blob first.```javascript function imageToBlob(imageURL) { const img = new Image() const c = document.createElement('canvas') const ctx = c.getContext('2d') img.crossOrigin = '' img.src = imageURL return new Promise((resolve) => { img.onload = function () { c.width = this.naturalWidth c.height = this.naturalHeight ctx.drawImage(this, 0, 0) c.toBlob( (blob) => { // here the image is a blob resolve(blob) }, 'image/png', 0.75 ) } }) } ```Then use the `Clipboard` API to do the magic```javascript async function copyImage(imageURL) { const blob = await imageToBlob(imageURL) const item = new ClipboardItem({ 'image/png': blob }) navigator.clipboard.write([item]) } ```Simple as that.

Read More

如何在电脑上调试手机真机网页以及微信浏览器网页

遇到个需求需要调试在微信中打开的网页。之前没有做过，搜了一圈那个所谓的在微信对话框中打开debugx5.qq.com的方法已经过时无用， 打开就显示你所使用对内核非X5内核。至于TBStool更是在2017年就已经停止更新，打开就闪退，浪费时间安装。看来因为开发人员对QQ搞出来的X5内核怨声载道，所以微信不得不妥协，弃用了X5内核作为内置浏览器内核了。至于spy-debugger等工具，我嫌麻烦也没装。找半天找不到有用的方法，好在同样的问题在手机上的Chrome里面打开也存在，于是就想先在Chrome里调试，万一能一起修复了呢。没想到就发现了Chrome调试工具居然也可以调试微信浏览器里打开的页面。看起来微信内建浏览器也采用了Chromium内核了。以下步骤同时适用于在电脑上调试手机浏览器网页调试和微信内建浏览器网页， 目前只限Android系统。iPhone还没去看。- 打开手机的开发者模式，这个各个手机打开方式都差不多，通过多次点击版本号来开启。- 在开发者模式里面打开 USB 调试功能- 把你要调试的网址发送到微信对话框里，然后点击打开- 将手机通过USB数据线连接到电脑- 在电脑上打开Chrome浏览器- 新建一个标签页，输入网址 `chrome://inspect/#devices`。以前你需要在 Chrome 的开发者工具里面通过点击多个菜单来打开，Chrome现在将这个页面独立出来了，体验更佳。- 这时候你的手机应该会收到 `允许当前连接的设备访问手机数据` 的通知，点击允许即可- 在电脑端 Chrome 的 `chrome://inspect/#devices` 里面就应该能看到你手机 Chrome 里面打开的页面了- 同时如果你已经在微信内建浏览器里打开了网页，你应该也能看到一个名为 `com.tencent.mm` 的浏览器里面打开了一个页面。- 点击网址下面的 `inspect` 就可以打开调试页面，其拥有电脑端Chrome开发工具的几乎所有调试功能。不得不说发现这点还是挺惊喜的。

Read More

Shout out to Jetbrains IDE

I write this post because [Jetbrains](https://www.jetbrains.com/?from=one-click-extensions-manager) just gave me full access to all its tools as an open source project developer. So I just want to say thanks with this post.After I tried Webstorm for several days, I found it's much better than VS Code.What am I saying, Webstorm is a commercial software, while VS Code is open source and free. 😅Anyway, I found myself coding much faster with Webstorm and other [Jetbrains](https://www.jetbrains.com/?from=one-click-extensions-manager) tools. Like, I don't have to pick and configure all those extensions carefully to make so that it won't popup css selector when I'm coding JavaScript. Webstorm also has built-in spell check, it's like a life saver for non-native English speaker.Some people might think that VS code eats less RAM than Webstorm, also faster when launching. While my computer has 32 GB RAM and i7, so I never need to care about the RAM. Plus, if you install and enable too many extensions, you can also notice that VS Code takes a lot of RAM too.And I barely need to code some stuff within 30 sec, so the launching time is not an issue to me too. This is not mean I'm not gonna use VS Code, it's still great, especially it can edit any programming languages, with extensions.Its price is also reasonable, for individual, most of the tools are between $59 - $69 for the first year, cheaper for the next years.It also has many free plans, students, teachers, etc. If you are an active open source developer, you can even ask for a free license.Like me, since I have this small open source project [one click extensions manager](https://github.com/hankxdev/one-click-extensions-manager), it has more than 30k users.[Jetbrains](https://www.jetbrains.com/?from=one-click-extensions-manager) gives me full access to all its tools for a year, and can be re-subscribed every year.So if you also have open source project, try to apply for its license and try this great IDE :D

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

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