A Poem

Posted on 2021-06-16

New York is 3 hours ahead of California,

but it does not make California slow.

Someone graduated at the age of 22,

but waited 5 years before securing a good job!

Someone became a CEO at 25,

and died at 50.

While another became a CEO at 50,

and lived to 90 years.

Someone is still single,

while someone else got married.

Obama retired at 55,

but Trump starts at 70.

Absolutely everyone in this world works based on their Time Zone.

People around you might seem to go ahead of you,

some might seem to be behind you.

But everyone is running their own RACE, in their own TIME.

Don’t envy them or mock them.

They are in their TIME ZONE，and you are in yours.

Life is about waiting for the right moment to act.

So, RELAX.

You’re not LATE.

You’re not EARLY.

You are very much ON TIME, and in your TIME ZONE Destiny set up for you.

React Hooks框架步骤

Posted on 2021-04-20 Edited on 2021-05-17

检查在vscode中是否必要的插件，如Prettier （格式化工具）、Styled-components（针对Styled-components库的一个语法自动补全插件）
vscode shortcut
- Control `: toggle terminal.
- Cmd Shift P: go to Command Palette to run commands.
- Cmd P: open file in project.
- Cmd B: toggle left Side Bar.
gatsby是一个运行于react之上的框架，可以安装预制模板和插件。
1
npm install -g gatsby-cli

初始化项目

1 2	gatsby new designcodeweb https://github.com/mengto/gatsby-starter-designcode gatsby develop

在gatsby.config文件中设置标题
修改component中的layout.css文件中的样式
Styled-components 是一个react的一个样式库，可以和原生库一样在组件中添加样式。
1
npm i styled-components
使用方法：
1
import styled from 'styled-components'

为了解决css正在加载时出现的空白页面

1	npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components

可以然后在gatsby.components文件中添加

1	`gatsby-plugin-styled-components`,

创建TextStyles.js文件

import styled from "styled-components"

export const H1 = styled.h1`
  font-weight: bold;
  font-size: 60px;
`

export const H2 = styled.h2`
  font-weight: bold;
  font-size: 40px;
`

export const H3 = styled.h3`
  font-weight: bold;
  font-size: 30px;
`

export const BodyIntro = styled.p`
  font-weight: 500;
  font-size: 24px;
  line-height: 140%;
`

export const BodyMain = styled.p`
  font-weight: normal;
  font-size: 20px;
  line-height: 140%;
`

export const MediumText = styled.p`
  font-weight: normal;
  font-size: 17px;
  line-height: 130%;
`

export const Caption = styled.p`
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
`

export const Caption2 = styled.p`
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  text-transform: uppercase;
`

export const SmallText = styled.p`
  font-weight: normal;
  font-size: 13px;
  line-height: 130%;
`

export const SmallText2 = styled.p`
  font-weight: 600;
  font-size: 13px;
  line-height: 130%;
  text-transform: uppercase;
`

创建ColorStyles.js

export const themes = {
  light: {
    text1: `black`,
    text2: `rgba(0,0,0,0.7)`,
    primary: `#3913B8`,
    secondary: "#2FB5FC",
    backgroundColor: `#f2f6ff`,
    card: {
      backgroundColor: `rgba(255, 255, 255, 0.6)`,
      boxShadow: `0px 50px 100px rgba(34, 79, 169, 0.3),
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.6)`,
      backgroundColorFull: `rgba(255, 255, 255, 1)`,
    },
    cardHover: {
      backgroundColor: `rgba(68, 66, 178, 0.1)`,
      boxShadow: `inset 0px 0px 0px 0.5px rgba(68, 66, 178, 0.2)`,
    },
    pricingCard: {
      backgroundColor: `rgba(255, 255, 255, 0.3)`,
    },
    status: {
      backgroundColor: "rgba(68, 66, 178, 0.1)",
    },
    modal: {
      backgroundColor: `rgba(255, 255, 255, 0.6)`,
      boxShadow: `0px 50px 100px rgba(34, 79, 169, 0.3),
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.6)`,
      backgroundColorFull: `rgba(255, 255, 255, 1)`,
    },
  },
  dark: {
    text1: `white`,
    text2: `rgba(255,255,255,0.7)`,
    backgroundColor: `#1F1F47`,
    card: {
      backgroundColor: `rgba(25, 24, 63, 0.98)`,
      boxShadow: `0px 30px 60px rgba(0, 0, 0, 0.25),
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.2)`,
      backgroundColorFull: `rgba(15, 14, 71, 1)`,
    },
    cardHover: {
      backgroundColor: `rgba(255, 255, 255, 0.1)`,
      boxShadow: `inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.2)`,
    },
    pricingCard: {
      backgroundColor: `rgba(31, 31, 71, 0.6)`,
    },
    status: {
      backgroundColor: "rgba(0, 0, 0, 0.2)",
    },
    modal: {
      backgroundColor: `rgba(50, 61, 109, 0.5)`,
      boxShadow: `0px 50px 100px rgba(0, 0, 0, 0.25),
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.3)`,
      backgroundColorFull: `rgba(15, 14, 71, 1)`,
    },
  },
}

修改GlobalStyles.js

1
2
3
4
5
6
7
8
9
10
11
12
import { createGlobalStyle } from "styled-components"
import { themes } from "./ColorStyles"

export const GlobalStyle = createGlobalStyle`
    body{
        background:${themes.light.backgroundColor};
        
        @media (prefers-color-scheme: dark) {
	        background: ${themes.dark.backgroundColor};
        }
    } 
`

职业发展话题

Posted on 2021-04-19

经济话题词句

Posted on 2021-04-18 Edited on 2021-04-19

Unit 1 经济发展

economist

“Short-termism” or the desire for quick profits, has worsened in publicly traded companies, says the Bank of England’s top economist.

macro economy

Some economist are more concerned with the state of macro economy operation.

protectionism

The current task is to promote free trade and to avert the threat of increasing protectionism.

L'Hôpital法则证明

Posted on 2021-04-15 Edited on 2021-04-19

L’Hôpital法则

函数比值的极限等于导数的比的极限，只要导数的比的极限存在。

$\displaystyle \lim^{}_{x \to a}{f(x)}=\displaystyle \lim^{}_{x \to a}{g(x)}=0(\infty)$，且$\displaystyle \lim^{}_{x \to a}{f’(x)\over g’(x)}=l$，则$\displaystyle \lim^{}_{x \to a}{f(x)\over g(x)}=\displaystyle \lim^{}_{x \to a}{f’(x)\over g’(x)}$