todo

Advanced_technology

GraphQL

5 why

  1. 背景
  2. 原理
  3. 应用场景
  4. 与 restful 区别
  5. 未来

核心概念

  1. IDL(接口定义语言)、SDL(架构定义语言)

参考

  1. react + ts + graphql example
  2. hot to graphql
  3. 官网
  4. applo

PWA

  1. pwa

微前端

CSS

  • 媒体查询
  • 选择器 — postcss

布局

Grid

flex

模块化

css_in_js

less

sass

ECMASCript

ES6

函数式编程

正则

HTML

  • bom
  • dom
  • 语义化
  • 事件

Node.js

前端安全

动画

  • echarts
  • d3
  • antv
  • three.js
  • cesium.js
  • openlayer

实践

优先级最高

清单池

  • 小程序

    • 事项提醒
      • 纪念日提醒
      • 重要事项提醒
    • 日期、天气
    • 每日歌曲、文字、天气提醒
    • 四象法则
  • 接口缓存优化

  • 按需加载

  • webpack 实现自动添加 fc 的 memo

  • 整合关注 blog,技术更新自动推送邮件

  • nodejs 常用操作

    • path 下面空的文件夹
    • 按行读取
    • 复制文件
    • 移动文件
  • mrm-core

    • branchclear
    • browserlist
    • cz
    • editorconfig
    • eslint
    • gitignore
    • husky
    • license
    • lint-staged
    • npmrc
    • package
    • prettier
    • readme
    • monorepo、sigorepo

    node 包

    react 包

小程序

工具调试

charles

chrome

控制台

插件

vscode

快捷键

  • alt + shift + 左键

工程化

CI&CD

Travis

test1

mock

  • 接口 mock
    • yapi
    • mockjs
  • ...

代码格式化和校验

  • husky
  • lint-staged
  • prettier
  • stylus-supremacy
  • eslint
  • teslint
  • commitizen
  • commitlint
  • ...
  • 为什么文件最后一行加个空行?

eslint

依赖管理

  1. npx
  2. npm scripts
  3. pnpm & yarn pnp & npm & yarn
  4. npm dist-tags ls。 npm install 默认 latest
  5. Npm token or npm _auth username:password

埋点和异常上报

打包

webpack

loader
plugins
版本

版本管理系统

git

svn

组件化

脚手架

yemoan mrm

create-react-app

vue-cli

微信公众号

性能优化

  1. google 性能测试工具
  2. 函数记忆缓存实践

js

  1. 记忆函数缓存实践、memorize
  2. if else 优化

图片

  1. 模糊加载
  2. traced placeholder
  3. 响应式图像
    • Images that have a fixed width and height
    • Images that stretch across a fluid container

操作系统

linux

文档

  • gitbook
  • storybook
  • docz
  • gatsby
  • dumi
  • docusaurus 小恐龙

框架

angular

react

学习

react 全家桶

  • 路由
    • react-router
    • react-router-dom
  • 数据管理
    • redux
    • react-redux
    • reselect
    • 中间件
      • redux-thunk
      • redux-saga
  • 动画
    • react-transiton-group
  • immutable
    • immutable.js
    • immer
  • 性能优化
  • hooks
    • useMemo 和 useCallback 区别
    • react-query
  • ssr(服务端渲染)
    • next.js
  • rxjs
  • 框架
    • react-admin

问题

  1. PropTypes.node 和 PropTypes.element 区别

优化

不可变数据
Immer

状态管理方案

redux

vue

测试

E2E测试

cypress

单元测试

浏览器

存储

cookie

indexDB

localStorage

sessionStorage

性能

渲染机制

缓存

  1. from disk cache
  2. from memory cache

跨域

移动端跨平台开发

  • react native
  • flutter
  • weex

算法和数据结构

  • 时间和空间复杂度

网络协议

  1. 阅读《图解 http》,并更新 md

设计模式

运维

面试

https://juejin.im/post/6844904116339261447

http://47.98.159.95/my_blog/nav/#html%E9%83%A8%E5%88%86

https://react.iamkasong.com/#%E7%AB%A0%E8%8A%82%E5%88%97%E8%A1%A8

https://juejin.im/post/6844903985338400782#heading-30

http://caibaojian.com/vue-design/art/

https://ustbhuangyi.github.io/vue-analysis/