Git Product home page Git Product logo

cheatsheets's Introduction

cheatsheets's People

Contributors

dependabot[bot] avatar github-actions[bot] avatar jiangweixian avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

ohmycheatsheet sultondev

cheatsheets's Issues

axios retry 

axios.interceptors.response.use(
  function(response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  },
  function(error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
	const { config } = error
	axios({ ...config, headers: { ...config.headers } })
    return Promise.reject(error);
  }
);

fix nvm n/a

  • 修复N/A: version "N/A -> N/A" is not yet installed nvm alias default node

safe area

safe-area指的是真正内容显示区域。safe-area-inset-top是否有数值取决于webview，例如浏览器中safe-area-inset-top可能就用不到

ios

  1. safe-area-inset-top on ip7 or below指的是status-bar部分。
  2. safe-area-inset-top on ipx or above指的是刘海部分，包括status-bar
  3. safe-area-inset-bottom on ipx or above指的是下面的全面屏导航条

react-native quick find

  • 组合两个style两个使用className={[styles.a, styles.b]}而不是{ ...styles.a, ...styles.b }

threejs coordinate / threejs 坐标系理解

  • 默认中心点 (0, 0, 0)

  • 屏幕是一块8*8的栅栏, (0, -4, 0)代表的是屏幕最下边缘

相同的逻辑还表现在长度和宽度上面, 目前threejs 1unit代表的pixel数值还不太确定

awesome workflows for alfred4

alfred@4 self-use awesome workflows

能不能好好说话

拼音缩写翻译。可以在这里预览效果

https://github.com/TheColdVoid/nbnhhsh

time zone

tz

http://www.packal.org/workflow/timezones-2

caffeinate

就是那个控制亮屏时间的小工具

http://www.packal.org/workflow/caffeinate-control

case

几种字符串类型的快速切换

case

https://github.com/gillibrand/alfred-change-case

toggle airpods

快速的连接airpods（不知道新的macos支不支持快速切换）

airpods

https://github.com/jasonshanks/alfred-workflow-toggle-airpods

terminal finder

在finder中打开iterm，或者在iterm打开finder。和当前focus的finder or iterm窗口有关

tf

https://github.com/LeEnno/alfred-terminalfinder

wechat

use wechat in alfred

https://github.com/MustangYM/WeChatExtension-ForMac

switch windows

switch windows like context

switch

https://github.com/mandrigin/AlfredSwitchWindows

hash

encode with hash md5 etc..

hash

https://github.com/willfarrell/alfred-hash-workflow

lorem

lorem words

lorem

https://www.packal.org/workflow/lorem-ipsum-0

httpstat

show website info

httpstat

https://github.com/leozhang2018/alfred-httpstat

tldr

show cheatsheet of command

tldr

https://github.com/cs1707/tldr-alfred

emoji

search emoji by word and content

emoji

https://github.com/sindresorhus/alfred-emoj

colors

show color

colros

http://www.packal.org/workflow/colors

devdocs

devdocs search，搜索体验可能比不上dash，但是开源免费。

devdocs

https://github.com/yannickglt/alfred-devdocs

ip

show current ip info

ip

https://github.com/zenorocha/alfred-workflows#ip-address-v120--download

vscode

open project in vscode

image

需要配置文件夹路径所在位置，可以通过设置变量方式实现 https://juejin.im/post/5d880368e51d4561c41fb906

translate

show tranlate result in alfred

translate

需要配合alfred-google-translate-config使用，国内请使用translate.cn，请关闭voice

设置trc en&zh-CN

复制通过cmd c

https://github.com/xfslove/alfred-google-translate

kill-process

命令行的方式杀死软件

kill-process

https://cloud.githubusercontent.com/assets/398893/14360276/6d2a33ba-fcaa-11e5-8fa5-4d3703a8129f.png

pkg-management

search pkg in alfred，支持多个平台比如npm等。

pkgman

https://github.com/willfarrell/alfred-pkgman-workflow

base64 string

base64

encode

https://github.com/willfarrell/alfred-encode-decode-workflow/raw/master/screenshots/encode.png

qrcode

qrcode

https://github.com/willfarrell/alfred-encode-decode-workflow/raw/master/screenshots/encode.png

what's jamstack / 什么是jamstack

jamstack 是静态网站生成技术或者方案。提倡在build过程中获取api数据，并生成静态页面。和spa在使用过程中交互数据完全来自api不同。同时jamstack可以是混合的，例如一部分页面数据是通过build中获取api生成的，另外一部分也可以是页面交互动态变化的。其静态部分类似SSR在第一次点击进行渲染类似。

\

how to decalre global type / 如何定义全局类型

无法直接定义global.d.ts。假设存在package rematch，定义了namespace rematch，那么可以在可以创建文件rematch.d.ts，通过以下方式定义全局。

declare global {
  export interface xx = {}
  namespace NodeJS {
    interface ProcessEnv {
      NODE_ENV: boolean;
    }
  }
}

export {};

npm deprecated / 如何废弃一个包

npm无法在npm.org 上删除一个包，只能够弃用。这种情况下，你仍旧可以下载，但是会在命令行看到错误信息。

npm deprecate [email protected] "balaba"

BUG: 理论上不指定版本能够deprecate全部版本，但是并没有成功

可选的优化操作

软优化，可以便于用于联系owner

npm owner add npm styled-cssgg // 添加npm作为owner
npm owner remove <username> styled-cssgg // 移除自己

html2canvas recipes / html2canvas 使用技巧

onclone 可以获取下载完成状态

如何手动下载

setDownloading(true);
html2canvas(document.querySelector("#WEBGRADIENTS") as HTMLElement, {
  onclone: () => {
    setDownloading(false);
  }
})
  .then(canvas => {
    // link是通过document创建的a标签
    link.download = "pixel-crash.png";
    link.href = canvas.toDataURL();
    link.click();
  })
  .then(() => {
    // do something
  });

axios common interceptor 

// Add a request interceptor
axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
axios.interceptors.response.use(
  function(response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response.data;
  },
  function(error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  }
);

zsh control cursor

  • 快速跳到line start ctrl+a
  • 快速跳到line end ctrl+e
  • 删除一个文字 ctrl+w
  • 清空 ctrl+u

macos forward and backward

in .zshrc

bindkey "\e\e[D" backward-word
bindkey "\e\e[C" forward-word
  1. 往前一个word移动 ctrl + <- or alt + <-
  2. 往后一个word移动 ctrl + -> or alt + ->

nvm use persist

  • nvm use在关闭iterm之后还是生效的 nvm alias default <node-version>

zsh config

config zsh once and forever

theme

  1. ZSH_THEME="powerlevel10k/powerlevel10k"

plugins

plugins=(
  git
  z
  zsh-autosuggestions
  git-open
  history
  sudo
  copyfile
  copydir
  git-extras
  common-aliases
  zsh-syntax-highlighting
  osx
)

cli

how define static props of fc / 如何给函数组件定义子组件或者静态属性

在没有类型检查的js下相对容易，这里主要讨论的是ts。

主要有两种方式。

使用 namespace

因为命名空间合并的规则，同名的function和namespace定义会合并

export function a() {}
export namespace a {
  export const b = b;
}

但是function的写法无法在使用react.forwardref之后和namespace一起使用

使用 as

in a.tsx

export const a = () => {};

in index.tsx

import { a as innera } from "./a";
import { b } from "./b";

type Innera = typeof innera;
interface a extends Innera {
  b: typeof b;
}
const a = innera as a;
a.b = b;
export default a;

cheatsheet format

h title

只是用h3 title

ul section

简单的两列布局

  • 文字 code
  • 文字

ol

简单列出了第一步和第二步的文字

  1. 第一步
  2. 第二步

quote

目前quote由于和h3 title没有办法很好的区分, 所以用法待定

强调的陈述说明

threejs quick find

  • scene.toJSON() 配合 ObjectLoader 重现 threejs 网站的有用
  • 理解 geomotry 坐标含义
  • <mesh rotation={[]}> 设置旋转

change appleid / 更换appleid之后你应该做什么

关于更换appleid，官方其实讲的比较清楚的建议是，实现你应该退出你的所有账号。然后再登陆。如果你不小心在没有退出之后就更换了你appleid。可能会遇到无法删除mac上面的iCloud账号。

  1. 更换新的appleid

  2. 推出mac账号重新登陆

  3. 如果遇到iCloud无法重新登陆，且删除之后提示icloud已经存在。可以通过

    defaults delete MobileMeAccounts

brew in cn / brew **区配置

为解决brew update在国区太慢的原因。但是并不推荐这么做，因为 Github 加入了 2FK，更好的方式还是通过 Surge 代理网络。

替换brew.git

cd "$(brew --repo)"
git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git

替换homebrew-core.git

cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git

替换homebrew-bottles.git

echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles' >> ~/.zshrc
source ~/.zshrc

替换homebrew-cask.git:

cd "$(brew --repo)"/Library/Taps/homebrew/homebrew-cask
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-cask.git

brew update --verbose检查是否成功

还原

cd "$(brew --repo)"/Library/Taps/homebrew/homebrew-cask
git remote set-url origin https://github.com/homebrew/homebrew-cask

refs: https://www.raydbg.com/2019/Homebrew-Update-Slow/

nextjs with jamstack / 在nextjs中使用jamstack生成静态网站

在[email protected]支持生成静态网站，同时也支持利用jamstack技术。因为这部分和SSR的某部分很像。

code

const IndexPage = ({ data }: { data?: number }) => {
  return (
    <Layout title="Home | Next.js + TypeScript Example">
      <h1>Hello Next.js 👋</h1>
      <p>
        <Link href="/about">
          <a>About {data}</a>
        </Link>
      </p>
    </Layout>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  return {
    props: { data: 1 }
  }
}
Command Description
next build && next export 生成静态页面
Command Description
npm install server && cd out && serve -p 9000 预览

https capture / 抓包

on mobile device

  • charles -> help -> ssl -> install ssl on device, 此时会出现ip地址, 端口号
  • wifi -> 高级设置 -> 代理服务器填写上面的ip地址，端口号
  • 点击allow pc端同意手机的请求
  • 手机上上输入chro/ls(charles会提示)下载证书, 安卓和iOS不同方式, 但是都需要信任证书

on pc

  • charles -> help -> ssl -> install ssl on pc, 需要双击打开添加证书为信任
  • proxy-ssl-setting -> + -> 链接填写为*, 端口号填写为443

debug page production / 如何生产环境下调试页面

有时你需要模拟真实环境才能够进行调试。特别是对于hybrid页面，以及客户端可能或许对ip页面进行限制。以至于你不得不通过真实的的路由地址访问开发环境。

工具

  1. switchhost
  2. nginx
  3. charles

Steps in macos

  1. brew install nginx

  2. config nginx in /usr/local/etc/nginx/nginx.config

    server {
    listen       80;
    server_name  线上地址;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #

    location / {
        proxy_pass http://127.0.0.1:3000;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

  3. 使用swtichhosts

    image

  4. charles(optional)
    设置代理服务器主机名(ip), 设置服务器端口(8888)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.