How to shuffle an array

In a small talk, one of my friends asked me, without searching or using AI, can you figure out how to shuffle an array in JavaScript? Surprisingly, I couldn't answer him immediately. I was thinking about the `sort` method, but I couldn't remember the exact implementation, and I even thought about using timestamp as seed to generate a random number.After the talk, I figured out the answer in a very short time. Here is the code:```javascriptconst shuffle = (arr) => arr.sort(() => Math.random() - 0.5); ``` Fine, this code is written by AI and its so simple and obvious. And here is the code that I want to write:```javascript const shuffle = (arr) => { const len = arr.length; for (let i = 0; i { for (let i = arr.length - 1; i > 0; i--) { const randomIdx = Math.floor(Math.random() * (i + 1)); [arr[i], arr[randomIdx]] = [arr[randomIdx], arr[i]]; } return arr; } ```why it is more effective? Because - compare with using sort function, it only needs to iterate through the array once, while the sort method may iterate multiple times - compare with my implementation, mine always generates a random number which from 0 to the length of the array, while Fisher-Yates shuffle algorithm only generates a random number which from 0 to the current index of the array. - compare with my implementation, mine always swaps the element with itself, while Fisher-Yates shuffle algorithm only swaps the element with the element that has not been swapped.-EOF-

Read More

A Simple bash script to modify macOS DNS by detecting SSID

I believe most of us have different DNS settings for different networks. For example, in my case, I use Google's public DNS `8.8.8.8` and Cloudflare's `1.1.1.1` at home, but at work, I have to clearthe DNS reacord and let my Mac use the default DNS provided by the company.It's a bit annoying to change the DNS settings manually every time I switch networks. So I wrote a simple bash script to automatically change the DNS settings based on the SSID of the network I'm connected to.Here is the script:```bash #!/bin/bash # clear or set dns function set_or_clear_dns() { local current_ssid=$(networksetup -getairportnetwork en0 | cut -d ':' -f 2 | xargs) if [[ "$current_ssid" == "YOUR_COMPANY_WIFI_SSID" ]]; then # Clear DNS to Automatic (Empty) sudo networksetup -setdnsservers Wi-Fi empty else # Set DNS to 1.1.1.1 and 8.8.8.8 sudo networksetup -setdnsservers Wi-Fi 1.1.1.1 8.8.8.8 fi } set_or_clear_dns ```You can replace `YOUR_COMPANY_WIFI_SSID` with your company's Wi-Fi SSID. Ofcause, you can add more SSID conditions and DNS settings as needed. And in the code I just simply clear the DNS settings to automatic when connected to the company's Wi-Fi, you can also set it to other DNS servers, by replacing `empty` with the DNS servers you want to use.

Read More

JavaScript :How to detect if an element is visible

There are many ways to detect if an element is visible on page. like```javascript element.style.display !== none && element.visibility !== hidden ```And what if you want to detect if an elemtn is in current viewport?Easy, right? You just need to use `getBoundingClientRect`, check if it's top and bottom are all in viewport:```javascript const position = element.getBoundingClientRect()if (position.top >= 0 && position.bottom I'm not visible```If you run `document.querySelector('child').style.display === 'block'`, you will get a **true**.How to fix this?Well we can use `offsetParent`. The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.so if `elment.offsetParent === null`, then we can tell that the `element` is not visible.

Read More

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