huhaixiao / app

Created with CodeSandbox

todo

• <S extends string = never>
• onxxx & addEventListener('xxx')
• react-is
• happy path
• 图灵完备
• 同构 vs 异构

utils

• Create React App
• ahooks
• react spring

ref

• 掘金网页 Dashboard
• csb Demo
• Day.js
• codepen
• Bulletproff React
• css Grid Tracks
• css grid-auto-rows
• css fit-content
• codepen waterfall
• requestIdleCallback

packages

• prettier-plugin-import-sort
• rc-form

.waterfall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(133px, 1fr));
  grid-gap: 0.25em;
  grid-auto-flow: row dense;
  grid-auto-rows: 20px;
}
.waterfall .item {
  width: 100%;
  background: #222;
  color: #ddd;
}
.waterfall .item:nth-of-type(3n + 1) {
  grid-row: auto / span 5;
}
.waterfall .item:nth-of-type(3n + 2) {
  grid-row: auto / span 6;
}
.waterfall .item:nth-of-type(3n + 3) {
  grid-row: auto / span 8;
}

npm

packages

• antd
• classnames

cli

• npm view <package>
• npm view <package> version
• npm view <package> versions

Bulletproff React

src
|
+-- assets            # assets folder can contain all the static files such as images, fonts, etc.
|
+-- components        # shared components used across the entire application
|
+-- config            # all the global configuration, env variables etc. get exported from here and used in the app
|
+-- features          # feature based modules
|
+-- hooks             # shared hooks used across the entire application
|
+-- lib               # re-exporting different libraries preconfigured for the application
|
+-- providers         # all of the application providers
|
+-- routes            # routes configuration
|
+-- stores            # global state stores
|
+-- test              # test utilities and mock server
|
+-- types             # base types used across the application
|
+-- utils             # shared utility functions