Enable HTTPS on local, even with a customizable domain

Normally, when you're debugging your web app on local, you can access it with either `http://localhost:PORT` or `http://127.0.0.1:POST`.The `POST` might be `8080` or `3000` or what's ever.But sometimes you might need to access your local web app with `https`, like `https://localhost:8080`. So you search online with `local https`, tons of posts/tutorials teach you how to generate self-signed SSL certificate and assign to your localhost.As an app developer, you might feel it's too complicated and don't want to spend half an hour on it.So here I found the easiest way to achieve this with just one small tool and 1 line command, without changing anything in your actual app.This tool is (**local-ssl-proxy**)[https://www.npmjs.com/package/local-ssl-proxy] , it is an open sourced npm package. so you can just install it by running```shell npm install -g local-ssl-proxy ```Then you can just access your local web app with this command(let's assume the app is running on 8080 port):``` local-ssl-proxy -s 8081 -t 8080 ```In this way, your web app's url will be `https://localhost:8081`. And you can still access your app from the original http url and port.The **-s** is the port that the app will be proxies to, the **8080** is the actual port your app running on.### what's more?If you don't like to use the localhost, or you have to assign as domain to your local app. you can simply make it with 2 more steps.- add a line in your computer's **hosts** file. - if you are on Windows, the hosts file's path is `c:\windows\system32\drivers\etc\hosts` - on Mac and Linux the path simply is `/etc/hosts` - you need Admin/root privilege to modify it The line would be ```shell 127.0.0.1 YOUR_DOMAIN ``` The `YOUR_DOMAIN` can be anything, you don't even register the domain, because it only works on your computer. But don't use some famous one like youtube.com or google.com, some browser would block it. Let's say we use the `hank.momane` in below example.- Then run the proxy like this:```shell local-ssl-proxy -s 443 -t 8080 -n hank.momane ```So by using the SSL port **443** and an extra parameter **-n**, now you can access your app via `https://hank.momane`.

Read More

Firefox offline installer official download page

Why do I need offline installer of Firefox?Because its online installer is too slow. (Yes the installer that you download from its index page is online installer, basically it's just a downloader, that when you run it, it just downloads the offline installer and install it for you. If you don't feel it's slow, then you don't need to read this post.) And maybe the online installer even uses P2P so when it will also upload to others while installing.So in this [Firefox offline installer download page](https://www.mozilla.org/en-US/firefox/all/#product-desktop-release), you can pick any version for any OS to download the Firefox, like Firefox Developer Edition, Firefox Beta, for Mac, for Windows, fore Linux and even for Android mobile.![img.png](/blog/firefox_offline_installer.png)And, here is also [Chrome release channels](http://www.chromium.org/getting-involved/dev-channel), where you can download several chrome versions, like Chrome Dev version, Beta, and Canary, for different OS.Like me, I like running different profile in different versions of Chrome and Firefox, because their icon are different ,easier than check the profile name in the top right corner.

Read More

Do not store file outside of WSL, it is slow

For some reason, I have switch back to Windows OS after years of working on MacOS.Most of the time I'm working on frontend projects, so to get better DX, I use Windows Subsystem for Linux (WSL for short). And I'm using version 2 of it.But I'm not a fancy Vim programmer, I heavily relay on IDEs like VS Code and WebStorm. So I still have to install these IDEs on the Windows.I'm able to install zsh, oh-my-zsh, fuck, p10k along with other tools in the WSL, gives me a similar experience as on Mac.At the first I put the project on Windows file system, because in this way I can easily access the file from IDE. And then in the WSL2 terminal, I go to the Windows path like this:```shell cd /mnt/DISK/PROJECT_FOLDER ```I can run all these frontend commands like `yarn`, `nvm`. Seems smooth.Soon I find a big issue. The hot module replacement not working, the building process is very slow. I have to restart the project dev command after making change to the code. Clearly this is not an acceptable solution.After searching a bit on the internet, I move the project back to WSL file system, then every thing works perfectly. The building is faster, the HMR is working.To access the file in WSL from IDEs, VS Code has [extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) to open file from WSL easily, just install it, and in the terminal, just switch to the project folder and type `code .`. Or in the IDE, click `File-Open Folder`, it will show your linux home folder by default. For WebStorm, it will also show the WSL folder in the open file dialog.Finally, I can use my i7+32G Windows, don't need to listen to the crazy fan noise on the MBP :D

Read More

A wrong solution on Leetcode

With all these years as an engineer, I never tried Leetcode.Maybe it's because I never prepared for interview before.Well, now I have to, because the company I just joined in 6 month ago, is gonna shutdown it's office here.Technically not shutdown, it just lays off every programmer because it thinks we are more expensive than those in another country.So people all say you have to try Leetcode to practice your programming skill.As a frontend engineer, why should I try it? Most of the time, I'm building UI, calling API, fighting with webpack configuration, cursing Google Lighthouse always gives my webpage low score, arguing with designer why is same font size seems so big on production than on Figma...After I tried to solve some problems on it, I found it is pretty fun, except it made me think myself not a qualified programmer.For the problem [palindrome permutation](https://leetcode.com/problems/palindrome-permutation/). I found it's top 1 solution is not correct.The code is like this:```javascript var canPermutePalindrome = function (s) { let arr = [...new Set(s.split(''))] let m = arr.length - Math.ceil(s.length / 2) if (arr.length == 1 || m == -1 || m == 0) return true return false } ```The code is very short and clean, pretty impressive at the first glance, and most of the cases it works, Leetcode also thinks it's a correct one. But if you try with a string `aaaabbbbcc`, it returns `false`, while it should be `true`. `ababccbaba` clearly is a palindrome. Clearly the test cases could not cover all the scenes Here is my solution, a simple and basic one:```javascript var canPermutePalindrome = function (s) { let set = new Set() for (const str of s) { set.has(str) ? set.delete(str) : set.add(str) } return set.size

Read More

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