Posts related to programming category

how to skip git hooks when committing

Well, it's not very recommended skipping git hooks. These hooks are often for formatting code, running tests, etc.But life happens, sometimes you want to commit something quickly or even an empty commit to the server so that you can trigger some CI/CD, but you have to wait for 5 min for those tests running.So if you want to skip git hooks while commting, simply run command like this:```bash git commit --no-verify -m "YOUR COMMIT MESSAGE" ```or for short```bash git commit -n -m "YOUR COMMIT MESSAGE" ```BTW, the command to push an empty commit is```bash git commit --allow-empty -m "YOUR COMMIT MESSAGE" ```Just remember only use these commands when you are really urgent and confident about your change.

Read More

How to fix: Enzyme expects an adapter to be configured

Working on updating a legacy React project. It's still using React 8 and Node 7.9, I'd like to upgrate it to the latest React and Node.The upgrading process was boring and straight forward, I just upgrade the dependencies and fix those broken changes in some dependencies, luckily most of them do noe need any change.#### ProblemBut when I run jest test, there is an error popup in almost every test file:``` Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })` before using any of Enzyme's top level APIs, where `Adapter` is the adapter corresponding to the library currently being tested. For example: import Adapter from 'enzyme-adapter-react-16'; ```Searched a bit, it looks like after Enzyme 3.0 and React15, you have to configure the `Adapter` to run the tests.#### SolutionTo fix it is very simple, just put these lines on the top of your test file:``` import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-15';configure({ adapter: new Adapter() }); ```While `enzyme-adapter-react-15` is also needed, you will need to use correct version per your react version.But, what if your project is very large, it has like more than 30 test files, is it mean that you will need to put these line on top of every of your test file?Of course no, here is what you should do.- create a js file, name it as `jestConfig.js` or any name you think is best. put it in any path in your project. - either create a `jest.config.js` in your project root or a block in `package.json` file - put/append these content into it:``` "jest": { // ... other jest configrations "setupFilesAfterEnv": ["/path/to/your/jestConfig.js"], } ```Notice that some tutorial might suggest you to do this with old Enzyme version``` "jest": { // ... other jest configrations "setupTestFrameworkScriptFile": "/path/to/your/jestConfig.js" } ```In newer version the key has been changed from `setupTestFrameworkScriptFile` to `setupFilesAfterEnv`, and you can use multiple config file since it now uses array as value.#### what about React 17While the most recent official `ezyme-adapter-react` is for 16, the 17 is not surpported yet, so if you are using React 17, here is another unofficial package you can use [@wojtekmaj/enzyme-adapter-react-17](https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17)It has more than 6k downloads every week now, seems reliable.

Read More

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