QQs'Note

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.arc(75,75,50,0,Math.PI*2,true);//以(75, 75)为圆心50为半径绘制从0~2pi的圆弧，true为顺时针
ctx.stroke() //使用线条绘制图形轮廓 相对的fill是填充图形

<script type="text/javascript">
    // init webgl
    const canvas = document.getElementById('wordCloud')
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const vpx = canvas.width/2 // 圆心偏移原点(0,0) 使x，y不为负数
    const vpy = canvas.height/2
    const R = 300
    // z: [-300 300]
    f = 600 
    opacity_min = 0.3
    const atoms=[]
    // solid ball 经纬
    // 粒子
    const atom = function(x,y,z,r){
        this.x = x;
        this.y = y;
        this.z = z;
        this.r = r;
    }
    atom.prototype.paint=function(){
        ctx.save() //?
        ctx.beginPath()
        const r_projection = this.r*f/(f-this.z) // projection 投影
        ctx.arc(vpx+this.x,vpy+this.y,this.r,0,Math.PI*2,true)
        ctx.fillStyle=`rgba(255,255,255,${opacity_min + (R+this.z)/2/R})`
        ctx.fill()
        ctx.restore()
    }
    const N = 5
    for(let k=-N; k<=N; k++){ // 2N+1个纬度
        const R_latitude = Math.pow(R*R - Math.pow(R*k/N,2),0.5)
        for(let i = 0; i<2*N; i++){ // 2N条经线
            const x = R_latitude*Math.cos(i*Math.PI/N)
            const y = R_latitude*Math.sin(i*Math.PI/N)
            const z = k/N*R
            const a = new atom(x,y,z,1.5)
            a.paint()
            atoms.push(a)
        }
    }
</script>

let angleX = angleY = 0
function rotateX(angle){
    atoms.forEach(atom=>{
        const y = atom.y*Math.cos(angle) - atom.z*Math.sin(angle) 
        const z = atom.y*Math.sin(angle) + atom.z*Math.cos(angle)
        atom.y = y
        atom.z = z 
    })
}
function rotateY(angle){
    atoms.forEach(atom=>{
        const z = atom.z*Math.cos(angle) - atom.x*Math.sin(angle) 
        const x = atom.z*Math.sin(angle) + atom.x*Math.cos(angle)
        atom.z = z
        atom.x = x 
    })
}
function rolling(){ // click事件，点击一下随机绕x或y转十分之一圆周
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if(Math.random()>0.5){
        rotateX(Math.PI/36)
    }else{
        rotateY(Math.PI/36)
    }
    atoms.forEach(atom=>{
        atom.paint()
    })
}

canvas.addEventListener('mousemove',function(e){
    var x = e.clientX - vpx
    var y = e.clientY - vpy
    angleX = -x*0.00001
    angleY = -y*0.00001
})

let start
function animation(timestamp){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if(!start){
        start = timestamp
    }
    rotateX(angleX)
    rotateY(angleY)
    atoms.forEach(atom=>{
        atom.paint()
    })
    const elapsed = timestamp - start
    if(true){
        requestAnimationFrame(animation)
    }
}
requestAnimationFrame(animation)

str.replace('_','')
str.replace(/[^0-9a-zA-Z]/g,"");

restoreCodeBlocks(str) {
    return str.replace(rCodeBlockPlaceHolder, _restoreContent(this.cache));
}
const _restoreContent = cache => (_, index) => {
  assert(cache[index]);
  const value = cache[index];
  cache[index] = null;
  return value;
};

{
  "short_name": "MY APP",
  "name": "MY APP Full Name",
  "icons": [
      {
      "src": "icon/lowres.webp",
      "sizes": "48x48",
      "type": "image/webp"
    },{
      "src": "icon/lowres",
      "sizes": "48x48"
    },{
      "src": "icon/hd_hi.ico",
      "sizes": "72x72 96x96 128x128 256x256"
    },{
      "src": "icon/hd_hi.svg",
      "sizes": "257x257"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#FFB71B",
  "url": "/",
  "manifestUrl": "/manifest.json",
  "lang": "en",
  "description": "blabla",
  "scope": "."
}

if ('serviceWorker' in navigator) {
// register service worker
 navigator.serviceWorker.register('./sw.js', {scope: './'}) // 参数1：注册提供的脚本URL 参数2：导航匹配
.then(()=>{
    console.log('注册成功')
}).catch(()=>{
    console.log('注册失败')
});
}

// 缓存静态文件
self.addEventListener('install', (event) => {
    event.waitUntil(caches.open('myapp').then((cache) =>  cache.addAll(['**/*'])));
});

// 缓存接口数据
self.addEventListener('fetch', (event) => {
    event.respondWith(caches.match(event.request).then((response) => {
        // 匹配到请求
        if (response !== undefined) {
            return response;
        } else {
            return fetch(event.request).then((response) => {
                // 缓存响应数据
                let responseClone = response.clone();
                caches.open('v1').then((cache) => {
                    cache.put(event.request, responseClone);
                });
                return response;
            }).catch(() => {
                return caches.match('/gallery/myLittleVader.jpg');
            });
        }
    }));
});

// 更新缓存
self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    // 如果有更新
                    if (cacheName !== 'v1') {
                        return caches.delete(cacheName);
                    }
                })
            );
        }).then(function(){
            return self.clients.claim()
        })
    );
});

yarn add react-intl
yarn add -D @formatjs/ts-transformer

import * as React from 'react'
import {IntlProvider, FormattedMessage, FormattedNumber} from 'react-intl'

<IntlProvider messages={messagesInFrench} locale="fr" defaultLocale="en">
    <p>
    <FormattedMessage
        id="myMessage"
        defaultMessage="Today is {ts, date, ::yyyyMMdd}"
        values={{ts: Date.now()}}
    />
    <br />
    <FormattedNumber value={19} style="currency" currency="EUR" />
    </p>
</IntlProvider>

yarn add -D @formatjs/cli

"extract": "formatjs extract"

yarn extract 'src/**/*.ts*' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'
或
npm run extract -- 'src/**/*.ts*' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'

"compile": "formatjs compile"

yarn compile lang/fr.json --ast --out-file compiled-lang/fr.json
或
npm run compile -- lang/fr.json --ast --out-file compiled-lang/fr.json

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import {IntlProvider} from 'react-intl'

function loadLocaleData(locale: string) {
  switch (locale) {
    case 'fr':
      return import('compiled-lang/fr.json')
    default:
      return import('compiled-lang/en.json')
  }
}

function App(props) {
  return (
    <IntlProvider
      locale={props.locale}
      defaultLocale="en"
      messages={props.messages}
    >
      <MainApp />
    </IntlProvider>
  )
}

async function bootstrapApplication(locale, mainDiv) {
  const messages = await loadLocaleData(locale)
  ReactDOM.render(<App locale={locale} messages={messages} />, mainDiv)
}

const intl = useIntl()
return (
  <span title={intl.formatDate(date)}>
    <FormattedDate value={date} />
  </span>
)

dragAreaSupportTip(format: string) {
  const messages = defineMessages({
    supportTip: {
      id: 'dragArea.supportTip',
      defaultMessage: 'Only supports {format} files',
    },
  })
  return intl.formatMessage(messages.supportTip, { format });
}

translateEnums(name:string){
  name = name.replace(/ /g, '_')
  const messages = defineMessages({
    transName: {
      id: 'enums.name',
      defaultMessage: `{name, select,
        dog {dog}
        cat {cat}
        King_Kong {King Kong}
        other {{name}}
      }`,
    },
  })
  const translatedName = this.intl.formatMessage(messages.transName, { name:name });
  return translatedName.replace(/_/g, ' ')
}

npm install @material-ui/system@next @emotion/react @emotion/styled

const StatHeader = styled('div')(z
  ({ theme }) => `
  color: blue;
`,
);

...
return (
  <StatHeader>font color is blue here</StatHeader>
)

return (
   <Box sx={{ color: 'text.secondary' }}>this color is blue here</Box>
)

$qqs-design:(
    50: #e7f6f9,
    100: #c3e7ef,
    200: #9bd8e4,
    300: #72c8d9,
    400: #54bcd1,
    500: #36b0c9,
    600: #30a9c3,
    700: #29a0bc,
    800: #2297b5,
    900: #1687a9,
    A100: #dcf6ff,
    A200: #a9e9ff,
    A400: #76ddff,
    A700: #5dd6ff,
    contrast: (
      50: #262626,
      100: #262626,
      200: #262626,
      300: white,
      400: white,
      500: white,
      600: white,
      A100: #262626,
      A200: white,
      A400: white,
      A700: white
    )
);

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
@import 'theme.scss';
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$CSDPartnerPortal-primary: mat-palette($csd2021);
$CSDPartnerPortal-accent: mat-palette($csd2021, 500, A100, A400);

// The warn palette is optional (defaults to red).
$CSDPartnerPortal-warn: mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$CSDPartnerPortal-theme: mat-light-theme((
  color: (
    primary: $CSDPartnerPortal-primary,
    accent: $CSDPartnerPortal-accent,
    warn: $CSDPartnerPortal-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($CSDPartnerPortal-theme);