Skip to content

Latest commit

 

History

History
177 lines (152 loc) · 4.57 KB

TODO.md

File metadata and controls

177 lines (152 loc) · 4.57 KB

Tech Stack

  1. React
  2. NextJS
  3. Vercel AI
  4. web3js
  5. webpack or vite
  6. axios
  7. chatgpt key
  8. Open AI Quickstart
npm install axios
  1. ahooks
  2. ant-design
  3. country-locale-map: 多语言
  4. crypto-js: 加密
  5. dayjs or moment
  6. mqtt
  7. swiper

构建工具

前端框架

UI 框架

SEO

<title>XXX</title>
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="description" content="">
...一堆，参考苹果官网


xxx.com/robots.txt
xxx.com/sitemap.xml

https://www.apple.com/robots.txt

h1 标签

SSO 埋点

埋点 GA
https://analytics.google.com/analytics/web/provision/#/provision/create
Clarity
https://clarity.microsoft.com/projects

顶栏弹窗 ptengine
https://www.ptengine.com/app/47j8ocnn/home
https://www.ptengine.cn/

Cookies 授权 & 扫描
https://app-apac.onetrust.com/cookies/websites

app route

// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

CSS

  • CSS margin-trim、initial-letter
  • @container容器查询，@scope规则，CSS嵌套，CSS数学函数，CSS滚动
  • @starting-style规则、transition-behavior属性
  • 锚点定位里面的@position-try, anchor-size(), inset-area, position-try-options, position-visibility等特性
  • DOM里面的WebCodecs API，popover特性，Screen Wake Lock API，PerformanceObserver API、Background Sync API、Payment Handler API、Periodic Background Sync API、Reporting API等。
  • CSS的6个新特性
CSS 新特性 [https://developer.chrome.com/blog/anchor-positioning-api?hl=zh-cn]
1.仅使用transition属性，实现元素从 display:inline ↔ none 的过渡效果
img {
 transition: .25s allow-discrete;
 opacity: 1;
}

img[hidden] {
 opacity: 0;
}

2.@starting-style顾名思义就是声明起始样式，专门用在transition过渡效果中
img {
 transition: .25s allow-discrete;
 opacity: 1;
 @starting-style {
 opacity: 0;
 }
}

3.CSS 锚点定位 position-anchor
.trigger {
 anchor-name: --my-anchor; 
}
.target {
 position: absolute;
 position-anchor: --my-anchor;
 left: anchor(left);
 top: anchor(bottom);
 margin-top: .5rem;
}

居中对齐
.trigger2 {
 anchor-name: --anchor2; 
}
.target2 {
 position: absolute;
 position-anchor: --anchor2;
 left: anchor(center);
 top: anchor(bottom);
 justify-self: anchor-center;
}

4.使用 anchor-size() 设置元素大小
button {
 anchor-name: --anchor-select;
 position: relative;
 width: fit-content; 
}
menu:popover-open {
 position: absolute;
 position-anchor: --anchor-select;
 left: anchor(left);
 top: anchor(bottom);
 width: anchor-size(width);
 margin-top: -1px;
}

5.使用 @position-try 调整锚点位置
.trigger {
 anchor-name: --my-anchor; 
}
.target {
 position: absolute;
 position-anchor: --my-anchor;
 inset-area: right span-bottom;
 /* 候补位置选项 */
 position-try-options: --bottom-left;
}
/* 候补位置 */
@position-try --bottom-left {
 inset-area: bottom span-left;
}

6.position-visibility与滚动溢出显隐
position-visibility: always;
position-visibility: anchors-visible;
position-visibility: no-overflow;

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type
scroll-snap-type
css 滚动吸附

content-visibility是CSS新增的属性，用来提高页面渲染性能，可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。

韩文换行加 word-break: auto-phrase;

color()是 CSS 中颜色函数，提供了一种统一的方式来指定任何 RGB 颜色空间中的颜色值。
background-color: color(prophoto-rgb 0 1 0);