Nextjs public folder
Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).(import is not needed)
For example, if you add an file to public/default_avatar.svg, then img.scr will be direct to default_avatar.svg in public folder.
1
<AvatarImage src={imageUrl || `/default_avatar.svg`} />
The nullish coalescing operator
??is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. 有点像 logic or.
1
2
3
4
5
6
7
const foo = null ?? "default string";
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
npm run start
- new repo, npm install, npm run start 后,网页报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: eslint-plugin-compat@2.7.0
npm ERR! Found: eslint@7.32.0
...
...
...
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/.../.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/usr/.npm/_logs/2022-10-04T23_11_22_934Z-debug-0.log
the above error indicates a version conflict caused by npm version. use nvm change version
“lockfileVersion” in package-lock.json
lockfileVersion will appear at the top (3rd line for my case) in the package-lock.json file, it will tell you which npm version to use when you try to run npm install, if the npm version does not match, the package-lock.json might be rewritten by npm install.
- The lockfile version used by npm v5 and v6.
- The lockfile version used by npm v7, which is backwards compatible to v1 lockfiles.
- The lockfile version used by npm v7, without backwards compatibility affordances. This is used for the hidden lockfile at node_modules/.package-lock.json, and will likely be used in a future version of npm, once support for npm v6 is no longer relevant.
check readme.md and package-lock.json to determine which npm to use
interface and type
1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface DepositAction{
type:'deposit'
payload:number
}
interface WithdrawAction{
type:'deposit'
payload:number
}
interface BankruptAction{
type:'deposit'
payload:number
}
export type Action = DepositAction | WithdrawAction | BankruptAction
import {Dispatch} from ‘redux’
Dispatch is an type from redux.
export type State = ReturnType
ReturnType
conditional rendering
Ternary operation（三元），
||以及&&可以实现 conditional rendering
1
2
3
4
5
6
7
8
例子: {
showAirQuality && current?.air_quality && (
<li className="mt-2 fs-5">
PM2.5: {current?.air_quality?.pm2_5} kph
<ProgressBar now={barCoverage} className="justify-content-end" />
</li>
);
}
float:right still take the place of the document.
float: right bring element out of flow, but still in the same z-index, still affect the layout of other element. While position:absolute make the z-index higher, and free the space of original flow. this will be extremely useful when I try to use margin:auo to achieve the center effect, and with float:right, margin auto will not be what I want.
use float:right, element will move to right. but still occupy the width, making other element’margin:auto, justify-content failed. 假设给元素 A 设置了右浮动，float:right，此时元素 A 飘会向右边，“部分脱离”文档流。为什么说是部分脱离文档流呢,因为元素 A 还停留在文档流当中,并且占用文档流的空间.假设这时候有个 inline 的 B 元素,和 A 是并列的兄弟关系,如果对 B 元素设置 margin auto,这时候,B 元素只能的位置计算要扣除 A 元素所占的位置后,再计算居中,并不能做到真正的居中.说起来很复杂,我们上图看. 同样的道理,父元素(flex)中设置 justify-content:center,也无法让他真正居中.这时候可用 position:absolute 来实现真正的脱离文档流(配合父元素 relative 来使用).
想要向 onclick 函数传递参数
函数写成高阶函数的形式(HOC)
1
2
3
4
5
6
7
8
<BiSearch
className="search-btn"
disabled={city.length > 1 ? 0 : 1}
onClick={onSearchButtonOnClick(city)}
></BiSearch>;
const onSearchButtonOnClick = (param) => async (e) => {
console.log(param);
};
date type on mobile device
“11-29-2010” dash ‘-‘ is not recognized in mobile device
1
2
alert(new Date("11-29-2010")); //doesn't work in mobile phone
alert(new Date("11-29-2010").replace(/-/g, "/")); //this one will work in mobile phone
SRP Single Responsibility Principle (SRP)
The Single Responsibility Principle (SRP) is the concept that any single object in object-oriented programing (OOP) should be made for one specific function. SRP is part of SOLID programming principles put forth by Robert Martin. Traditionally, code that is in keeping with SRP has a single function per class.
他也有缺点,就是会让代码量变大.
Make an temperature bar with linear gradient color
思路,背景 linear-gradient 固定从绿到红,然后上面覆盖一层灰色的 bar.灰色的长度和温度成反比.温度越高,灰色越短,这样下面的背景(绿到红)就会显示出一整段红色.上代码解释.
with two bar overlap, bar A set green to red linear gradient, and bar B is grey color ,coat on top of bar A.
1
2
// assume 40 is the max temp and shows pure red.
var barCoverage = (1 - temperature / 40) * 100;
1
2
3
4
5
6
7
8
9
10
11
12
.bar {
background: linear-gradient(
90deg,
rgb(0, 255, 1),
yellow,
tomato,
rgba(255, 0, 0)
);
}
.bar-coverage {
background-color: #666;
}