Live Note

Remain optimistic

Posted on Edited on In

Delete Service Worker on Safari

To delete a service worker on Safari, you can follow these steps:

  1. Open Safari Developer Console (Press Command + Option + C)
  2. Copy and paste the following JavaScript code into the console:
1
2
3
4
5
6
7
navigator.serviceWorker.getRegistrations().then(function (registrations) {
  for (let registration of registrations) {
    registration.unregister().then(function () {
      console.log("Service Worker Unregistered:", registration.scope)
    })
  }
})

This code will:

  1. Get all registered service workers using navigator.serviceWorker.getRegistrations()
  2. Loop through each registration
  3. Unregister each service worker using the unregister() method
  4. Log a confirmation message with the scope of the unregistered service worker

You can verify that the service worker has been successfully removed by:

  1. Opening Safari Developer Tools
  2. Going to the Application tab
  3. Checking the Service Workers section - it should now be empty

Note: After unregistering the service worker, you might need to close all tabs and restart Safari for the changes to take full effect.

Posted on Edited on In

A drawer animation HOC component

Requirements:

  • react-native-reanimated: animation
  • react-native-root-siblings: root sibling
  • Functional component: require hooks

Drawer HOC

Read more »

Posted on Edited on In

ES2017 新增

padStart(), padEnd()

字符串补全功能，接受两个参数，如果第二个参数为空，则默认使用空格补全。

1
2
3
4
5
6
// fill with the template
"12".padStart(3, "000") // '012'
"12".padEnd(3, "000") // '120'

// fill with space
"12".padStart(4) // '  12'

ES2019 新增

trimStart(), trimEnd()

与String.trim()的行为一致，不会修改原字符串。

1
2
3
4
5
6
7
let str = "    string    "

// str.trimLeft()
str.trimStart() // 'string    '

// str.trimRight()
str.trimEnd() // '    string'

Posted on Edited on In

Class

1
2
3
4
5
6
7
8
9
10
11
// class factory
function classFactory(phone) {
  return class {
    getName() {
      return phone
    }
  }
}

let _187 = classFactory("18720128815")
console.log(new _187().getName())

Calculated attribute name

1
2
3
4
5
6
7
class User {
  ["say" + "Hi"]() {
    console.log("hi")
  }
}

new User()["sayHi"]

Class field

1
2
3
4
5
6
7
8
// class field
class User {
  name = "Edward" // is not at the prototype
}

const user = new User()
console.log(user.name) // Edward
console.log(User.prototype.name) // undefined

Extends — How the super run

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let animal = {
  name: "Animal",
  eat() {
    console.log(this.name + " eat")
  },
}

let rabbit = {
  __proto__: animal, // extends animal
  eat() {
    super.eat()
  },
}

let err = {
  __proto__: rabbit, // extends rabbit
  name: "err obj",
  eat() {
    super.eat()
  },
}

// super.eat() -> [[Rabbit.prototype]].eat
// -> super.eat -> [[Animal.prototype]].eat
// this -> err
err.eat()

class Animal {}
class Rabbit extends Animal {}
console.log(Rabbit.__proto__ === Animal) // class extends link
console.log(Rabbit.prototype.__proto__ === Animal.prototype) // prototype extends link

Prototype

change the basic class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let user = {
  name: "Edward",
  hello(name) {
    console.log(`hi ${this.name}, this is ${name}`)
  },
}

Function.prototype.defer = function (ms) {
  let f = this
  return function (...arg) {
    setTimeout(() => f.apply(this, arg), ms)
  }
}

user.hello = user.hello.defer(1000)
user.hello("Ejklfj") // will delay 1000ms

Magic of the instance of

1
2
3
4
5
6
7
8
class Animal {
  static [Symbol.hasInstance](obj) {
    if (obj.canEat) return true
  }
}

let obj = { canEat: true }
console.log(obj instanceof Animal) // it will find from the [[Prototype]]

Static

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class User {
  static staticMethod() {
    console.log(this === User)
  }
}

class Article {
  constructor(title, date) {
    this.title = title
    this.date = date
  }

  static compare(articleA, articleB) {
    return articleA.date - articleB.date
  }
}

let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("Css", new Date(2019, 0, 1)),
]

articles.sort(Article.compare)
console.log(articles)

Posted on Edited on In

Why is this error occurring?

The ERR_OSSL_EVP_UNSUPPORTED error in a React JS application typically arises due to an underlying issue with the version of Node.js and OpenSSL being used. This error is commonly encountered when certain cryptographic algorithms or keys are not supported by the OpenSSL version bundled with the Node.js installation.

How can I fix this error?

Node.js 17 has a new option called –openssl-legacy-provider. This option lets you go back to using the old way of doing things until you can update your code to work with the new rules.

package.json file

package.json
1
2
3
4
5
{
  "scripts": {
    "start": "node --openssl-legacy-provider index.js"
  }
}

set environment variable

1
export NODE_OPTIONS=--openssl-legacy-provider

change it in the gradle file

build.gradle
1
2
3
project.ext.react = [
    nodeExecutableAndArgs: ["node", "--openssl-legacy-provider"]
]

change it in the Xcode build settings

project.pbxproj
1
2
3
buildSettings = {
  NODE_OPTIONS = "--openssl-legacy-provider";
}

After changes, try running the application again. Or you also need to reinstall the dependencies.