Daily tip 02
砖头
May 8 2020

# font-variant font-feature-settings

https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-feature-settings

# fix node-pre-gyp install --fallback-to-build

issues here (opens new window)

solution: change the node version

# exchange node version with homebrew

brew search node

==> Formulae
libbitcoin-node     node-build          node@12             nodeenv
llnode              node-sass           node_exporter       nodenv
node ✔              node@10
1
2
3
4

brew unlink node brew install node@12 brew link node@12 || brew link node@12 --force --overwrite

# fix macos bluetooth mouse not smooth

  1. open system preferences
  2. choose network
  3. click the left bottom panel gealwheer ⚙️ & click 【set service order】
  4. drag 【Bluetooth pan】 to top first
  5. Apply

the problem is that network trafic,so if you have 5g Wifi, it alse solve this ploblem

# npm package tag

npm publish will default to tag this version to latest, even the version filed in package.json is xxx.beta

you need to specific npm publish --tag beta for a beta version publish

and you can change the published pkg using below commands

npm dist-tag --help
npm dist-tag ls
npm dist-tag add [email protected]  latest
npm dist-tag add [email protected]  beta
1
2
3
4

# circle json structure stringfy

JSON.stringfy will throw TypeError VM126:1 Uncaught TypeError: Converting circular structure to JSON

reference (opens new window)

simple resolvelation

var circularReference = { otherData: 123 }
circularReference.myself = circularReference

const getCircularReplacer = () => {
  const seen = new WeakSet()
  return (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (seen.has(value)) {
        return `[circle]`
      }
      seen.add(value)
    }
    return value
  }
}

JSON.stringify(circularReference, getCircularReplacer())
// "{"otherData":123,"myself":"[circle]"}"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

WeakSet (opens new window)

# monaco-editor format

editor.getAction('editor.action.formatDocument').run()

# import file from outside of src

cause of some shit reasons, I have to import files from anther project into this project. track some problems in this process

  1. create-react-app create-react-app/issues/834 (opens new window) hack solutions (opens new window)

delete ModuleScopePlugin will release this limit. but you also need to setup loaders yourself.

examples

import { resolve } from 'path'
chainWebpack(config) {
   config.module.rule('your-loader').include.add(resolve('../your-path'));
},
1
2
3
4

through the right way is to use yarn/npm link and make monorepo. but making tsconfig.json is really annoying

# youtube-dl (opens new window)

youtube-dl is a command line tool to download videos

brew install youtube-dl
# helpful when download 1080P, it will merge audio and vidwo automatically
brew install ffmpeg
# get download list
youtube-dl -F https://www.youtube.com/watch\?v\=8PYKGIeDZLQ
# download 1080P
youtube-dl -f 137+140  https://www.youtube.com/watch\?v\=8PYKGIeDZLQ
1
2
3
4
5
6
7

# git reset --soft

this comand git reset --soft HEAD~1 can widthdraw the commit operation

# d.ts.map

if npm package provides the d.ts.map file. then you will jump to (.ts) file rather then (.d.ts) file when click the export constant. and this need you can not ignore ts files in .npmigonre.

# webpack compile ts project to version using in node or browser

  1. excepting setting output.libraryTarget: 'umd',, you need also set output.globalObject: this globalObject (opens new window) [wtf?

  2. to avoid annoying default below you need to add output.libraryExport: 'default' to solve this

import xxx from 'xxx'
const xxx = require('xxx').default

import xxx from 'xxx'
const xxx = require('xxx')
1
2
3
4
5
pattern export commonJS consume from common js export from ESM consume from ESM
1: normal export module.exports.cool = const { cool } = require("x") export const cool = import { cool } from "x"
2: default export module.exports.default = (not a special case!) const { default } = require("x") export default ... import cool from "x" (any other name works as well)*
3: replace entire module export module.exports = something cool const cool = require("x") Not possible! People try to achieve this with default, but it's an entirely different beast import * as cool from "X"