前端基础百炼成仙

# 实习笔记 ⭐️

好记性不如烂笔头！

实习开始啦！记录一下学习过程！⭐️⭐️

目标固然重要,过程才是最真实的！

声明

实习笔记不包含任何公司内部文档和代码

且不提及公司架构和部门名称

# 实习感想

  • 从实习生活先来说
    • 经常参加部门的桌游活动，玩到了平常玩不到的奇怪桌游，还有常客阿瓦隆，还是很放松心情的
    • 代表部门参加了羽毛球比赛的男双比赛，小组赛第二出线，运气很好！最后八强意料之中，淘汰赛对手太强了，哈哈哈
    • 周六早上的篮球对抗，完全被点燃了，我也开始有了自己的篮球梦想了
  • 从技术方面来说
    • 接触了prosemirror编辑器的设计(前端天花板)和Flutter跨端的一些解决方案
    • 然后在技术熟练度上有了一些提升
    • 对一些css3技术有了了解
      • 比如用css3去控制换行等
    • 能够独自去承担网页改版的重任(独立完成负责一个需求)，对自己技术有了自信并为自己的技术感到自豪
      • 会有和mt和ld的沟通交流，过程有mt的指导，但是都是自己来写的

# 第一月

# 第一周

# 5.23入职日

  • ✅设置了公司电脑的新密码和账号sso密码
  • ✅成功连接了********看到了一些好康的文档！
  • ✅两步验证申请了谷歌邮箱
  • ✅完成工程师成长的真相，前端微服务，工程师文化，********内部工具介绍四个课程的视频学习
  • ✅在Mac电脑上下载了vscode和node并成功运行
  • ✅看了一眼****通用,了解到了组件库，Hook工具库，Sab构建

# 5.24

  • ✅解决了一下昨天的提问
    • 之后还要跑一下Garfish来深入理解一下微前端
    • 了解到了Jupiter，这两点后面再深入
  • ✅安装了很多vscode的插件，很多小装备
  • ✅细致学习Git(Git小游戏) (opens new window),并更新笔记到个人站点

# 5.25

  • ✅昨天Git学习很多内容,早上先review一下
  • ✅学习反电信诈骗课程，并完成考试
  • ✅学习信息安全手册，并通过测试
  • ✅看TEA用户行为分析系统,不太清楚如何在研发中使用
  • ✅看新版会话性能监控以及RUM指标
  • ✅看用户个人数据相关制度培训【任务一】并签署承诺书
  • 活动日:英雄联盟内战，被爆杀，八嘎

# 5.26

# 5.27

  • ✅安装npm，npm跑不了,以为大问题，最后发现是没安装npm
    • 之前安装了brew，使用命令安装npm很方便sudo npm install npm -g
  • ✅在vscode配置首选项设置trigger启用，tab快速扩展react语法
  • ✅拉取********代码，成功运行
  • ✅整理本周文档
  • ✅配置vscode快速启动指令
    • shell command比较简单
  • ✅配置vuepress插件(plugin-pwa)

# 第二周

# 5.30

  • ✅成功使用boe运行了本地运行的程序
    • 本地改动在boe上面生效
  • ✅录制React-todolist 视频 (opens new window)

# 5.31

  • ✅学习codebase视频
    • 目前感觉可以直接用git拉取gitlab的项目
    • 所以codebase的实际配置先放下，没有需求，无法验证是否成功
  • ✅观看云开发视频
    • node，c++，python，go等
  • ✅观看**云视频
  • ✅观看SCM视频
    • 需要基于一个已有的git仓库
  • ✅观看TCE视频
    • 公司基础设施资源的入口
  • ✅学习Flutter，flutter入门
    • 安装android studio

# 6.1

# 6.2

  • ✅react-ts-todo+解决两次useEffect的bug+写博客
  • ✅继续看需求的UI和熟悉项目
    • 方便需求的完成

# 周末

# 第二月

# 第三周

# 6.6

  • ✅Gecko资源发布工具
    • tea入口，可以数据快速验证
  • ✅jupiter官网好像有点问题
  • ✅Goofy用来部署的工具
    • 要使用SCM仓库(基于git仓库)
  • ✅什么是Libra？为什么要做ab实验？
    • 两套方案，数据说话
  • ✅鹊桥用户文档
    • JSB移动端sdk吧
  • ✅Starling(国际化)翻译上线工具
  • ✅Git Flow提交规范
  • ✅Codebase同时管理Gerrit和GitLab
  • ✅node开发规范
    • 日志
    • 接口命名规范
  • ✅node基础库
    • 没太看懂在干嘛
  • ✅Dart编程规范
  • ✅JSBridge技术原理与使用
    • 感觉是客户端和前端的通信桥梁吧
  • ✅Gulu基于Koa的框架
  • ✅Merlin基于Sentry和patrol实现，主要解决现有监控手段在当前业务开发场景中无法解决的一些通电问题
    • 监控闭环
    • 监控不准确
  • ✅研发驾照分考试
  • ✅员工行为准则学习+考试
  • ✅试着完成了一点点需求，不知道代码能不能康...
    • 在仓库提交了分支切换标题
      • 注意分支规范和commit规范

# 6.7

  • ✅mentor-review代码后修改代码
    • 发布分支切换标题2.0
    • 查看当前分支git branch -vv
  • ✅Typescript的泛型和装饰器+写博客
    • 比较基础的从代码入手

# 6.8

  • ✅git分支合并到另一个分支
    • 发现自己写得是乐色，遂放弃合并
  • ✅直接拉取仓库某个分支
    • git clone -b develop xxx
      • develop是分支名
      • xxx是仓库名
  • ✅完成两个切图(大概)

# 6.9

  • ✅提交DartStudy笔记到仓库
    • 下载dart环境和响应插件在vscode运行
    • dynamic,{},[]可选参数的区别
    • 构造函数可以写有参无参类型等
    • 不至于Dart完全看不懂了
  • ✅需求路由的完善
    • book-manage?type=3换到了short-draft

# 6.10

  • ✅fix: 路由样式冲突
    • 发现是!import引起的
      • 那能不用!import吗？
      • 开发者工具里面发现了select自带的类名，直接在这个类名添加可以改变
    • 还是用自己的类名，但是再加上这个类名
      • 这样有区别，还不会被覆盖
    • 同样地发现对于button组件
      • 不用自己写样式，换type就可以了
  • ✅草稿箱页面左侧nav未高亮
    • 在nav组件中修改对应逻辑

# 本周总结

  • ✅需求开发总结1
    • 开始的想法
      • 把title放到一个数组里面，用map渲染
    • 之后
      • map会有不必要的渲染，而且map一般是对列表的渲染
      • 换用枚举，对枚举判断然后渲染
    • 还是不够完善
      • 发现使用tab组件比较好
  • ✅需求开发总结2
    • 草稿箱用type=3来切换
      • 不够严谨，还是要新开一个路由
  • ✅需求开发总结3
    • less编写要避免直接修改组件自带的类名或者是使用!import
    • 可以使用自己编写的类名+组件自带类名来修改

# 周末

  • ✅完成实验代码的仿真
    • 从导频转换到使用训练序列

# 第四周

# 6.13

  • ✅配置Flutter环境
    • 官网下载并且解压
    • 在解压文件夹进行环境设置export PATH="$PATH:pwd/flutter/bin"
    • 下载Java环境
    • 不如直接brew install flutter
  • ✅下载XCode
    • 这个下载巨大，巨慢
  • ✅提交MR准备合并分支
    • 有很多规范问题...

# 6.14

  • ✅ofdm-3d的代码实验,实验还行，数据可以使用
  • ✅根据comment修改代码
    • 埋点还要研究
    • 组件外套div的写法
  • 今日审查点
    • ✅接口参数的传入
    • ✅接口返回的结果
    • state的枚举值和长篇的是否可以公用,避免重复维护
    • ✅埋点

# 6.15

  • ✅完成第一个需求(大致完成了，细节后面再跟进)
  • ✅埋点
  • ✅实习签字
  • ✅使用工具创建签约作品

# 6.16

  • ✅entries和map的用法+写博客 (opens new window)
  • ✅TCS审核安全级别
  • ✅cycle流程
    • 提交到仓库分支
    • 在代码发布管理发布版本
    • 在goofy平台新增然后发布
    • 下载ENV-Plugin检查boe环境
    • 然后merge master，部署
    • 在流水线进行卡点
  • ✅这个goofy是纯前端
    • 还有node这些的，要用TCE
    • 发布方式还不太一样
    • 直接在cycle上面搞就行了

# 6.17

  • ✅实习签字，还剩一个领导
  • ✅核酸
  • ✅收拾行李
  • ✅研究一下Docusaurus和dumi
    • 具体选择哪一个还不确定
    • 决定使用dumi了
    • 在Github上发现几乎都是用dumi

# 周末

  • ✅租房

# 本周总结

  • 研发总结
    • a.不需要的代码可以直接删掉
    • b.记得用prettier格式代码
    • C.避免magic number
    • d.类名不要太过简单
    • e.import顺序
      • 内置模块
      • 外部依赖
      • 父级目录
      • 兄弟目录
      • 本机目录
      • css样式
    • f.避免错误埋点
    • g.多用枚举
    • 看文档写接口参数和获取res
  • 使用TCS工具
  • 使用goofy工具
  • 使用ENV-Plugin插件
  • 使用cycle工具

# 第五周

# 6.20

  • ✅mac无法连接到app store的bug
  • ✅今天看了一下编辑后台，感觉还是比较蒙的
    • 在写编辑正文互动页面的时候，一直报错，没有找到原因
    • hook不能放在columns里面的render里面，这个很难找到

# 6.21

  • ✅昨天卡了一下的基础上，今天大概完成了切图吧
    • 因为还没有接口，感觉接口出来后还要改一下逻辑
    • 这个明天还要再改一下
  • ✅然后明天先搞一下短篇，搞联调前的工作再捋一下

# 6.22

  • ✅办门禁牌
  • ✅做核酸
  • ✅短篇联调准备(先搞编辑后台了)
    • 加一个白名单
  • ✅沟通ui的改变
  • ✅from组件中时间选择没办法获取信息

# 6.23

  • ✅isEdit还需要不可以改变投稿组吗？
  • ✅select全部和其他选择的冲突bug
  • ✅新增一个活动停止计算排名的时间
  • ✅代码优化
    • typescript规范
    • 代码排版
    • 删除多余代码
    • ...
  • ✅解决全部和其他部分选取的逻辑

# 6.24

  • ✅注意接口的细微区别
    • 比如app/book和api/author
    • 也许你只注意到了api变化，而忽略了author
  • ✅使用泳道的时候要关闭charles
  • ✅只有一个标题也显示是多标题，算bug吗？
    • 处理一下逻辑

# 周末

  • ✅React实现slot并写博客+录制视频
  • ✅btb实验数据的处理

# 本周研发总结

  • ✅遇到阻塞性的问题，直接问，这样可以减少风险
  • ✅开始的时候使用anyscrypt到后面又要重新改一下
    • 还是从一开始就用专业typescript会比较好
  • ✅开发的时候尽量使用组件，不要自己写

# 第六周

# 6.27

  • ✅删除弹窗确认按钮显示保存
  • ✅无法下载发布的新包
    • 更换到npm地址，就可以下载了
  • ✅给book-item组件添加一个draft字段,加了一些逻辑
  • ✅白名单的逻辑编写
  • ✅完成一篇博客

# 6.28

  • ✅接口调用老是超时的检查
  • ✅flutter环境搭建并完成一篇文档
  • ✅代码合并，解决冲突，先pull，不行可以用--no-verify
  • ✅command+shift+.可以切换显示不显示带.文件(隐藏文件)
  • ✅开case评审会

# 6.29

  • ✅删除草稿后,调用的pageIndex没有变化，导致接口访问出错
    • 删除后进行个数的判断，如果tatol_count%10==1,pageIndex-1
  • ✅完成一篇博客

# 6.30

  • ✅工作台的空白页bookitem添加一个draft参数
  • ✅解决select组件选择项不高亮的bug

# 7.1

  • ✅完成白名单接口的联调
  • ✅解决首屏tab闪动bug
  • ✅接口排序参数
  • ✅退出vim
    • :然后q

# 本周研发总结

  • 目录,文件命名不要用大写字母，-连接
  • 要用全等好，避免类型转换
  • 熟悉组件库,避免自己造轮子
  • 活用布局，减少复杂的css样式
  • 减少anyScript的使用

# 周末

  • ✅option优雅写法视频

# 第三月

# 第七周

# 7.4

  • ✅解决缺陷
  • ✅记得pull后npm i,会有包更新的情况出现，导致有些功能报错
  • ✅记录一个兜底,超出两行控制在两行
    • .split('').splice(0,35).join('')+'...'
    • 后面使用css了line-clamp
  • ✅安装mysql
    • /usr/local/MySQL/bin/mysql -u root -p

# 7.5

  • ✅下载DBeaver
    • 免费的，用起来挺不错
  • ✅和后端对了一下接口
  • ✅上传cdn
  • ✅解决大量缺陷
  • ✅文章数量的逻辑有点意思

# 7.6

  • ✅在link中埋点好像没有成功
    • 重新开一个页面埋点取消
      • 控制页面在本页面打开埋点不取消
  • ✅删除时候pageindex改变的逻辑
  • ✅切换selectState时候,pageindex需要刷新
    • 添加一个变量记录上一个state状态
  • ✅读取数据|给一个值,比如 |[]可以避免null，undefined的背刺

# 7.7

  • ✅can not open project.pbxprojxcode爆裂bug
    • 卑微Chrome启动
  • ✅react类组件一定要对state进行初始化
  • ✅line-clamp神奇css控制行数
    • 注意要display:-webkit-inline-box
    • -webkit-box-orient:vertical
    • overflow:hidden
  • ✅select逻辑的完善
    • 之前使用Object.entries导致value为字符串，在初始化的时候转一下数字
    • 代替了之前赋初值的转字符串
  • ✅.finally不管成功还是失败都调用

# 7.8

  • wryyyyyyy！
  • ✅字节云的编译和部署
  • ✅遇到了es6语法静态检测

# 本周研发总结

  • 1.要写别人读得懂的代码，比较好理解
  • 2.仔细看报错,根据文件点之类的进行排查
  • 3.要考虑周全,比如后端返回为null，undefined怎么办？
  • 4.list或者说使用map一定要记得给key
  • 5.活用finally来赋值

# 第八周

# 7.11

  • ✅1.对接口进行页面的搭建，调查问卷
  • ✅2.对之前的部分代码进行重构
    • 从54行到3行,代码减少94%-弹窗出现位置代码重构
    • 从38行到19行,代码减少50%-添加标签代码重构
    • 从35行到10行,代码减少71%-提交标签方法重构
  • ✅3.类组件不熟，在构造函数里面给初值，写在render里面无法改变值了

# 7.12

  • ✅进行调研问卷优化的联调
  • ✅will-change优化页面

# 7.13

  • ✅优化validata方法76行到15行,代码减少80%
  • ✅学习Flutter，总结笔记

# 7.14

  • ✅部署的时候记得观察是不是boe，不要部署错地方了
  • ✅flutter平时会用到诊断树吗？
  • ✅调研问卷优化的自测完成已经提测
  • ✅最近的博客整理
  • ✅个人博客评论系统研究
    • vvsue将评论存储到github的issue系统中
    • 配好了，没有显示
    • 显示了无法登录github？
  • ✅request封装自带app_id和后端接口参数冲突
    • 给一个-1把默认的0给冲掉
    • 然后后端给一个-1的判断，不更改

# 7.15

# 本周研发总结

  • 注意部署的环境是不是boe
  • 注意查的logid是不是boe的
  • 后端如果有暗号，要注意暗号类型，不然会被背刺
  • 感觉前期对好接口会比较好，避免后期跟着接口改

# 周末

  • ✅为站点和github-readme更换shields:io
    • 发现可以添加图标的新大陆
    • 可以提一个小pr?
  • ✅个人站点优化
    • 排版，docs整理等
    • 添加跳转github-discussion
      • 样式冲突了
    • 添加首页导航
      • 需要写组件
  • ✅看一下上周的调研资料
    • 周一脑子预热

# 第九周

# 7.18

  • ✅同时提交到github和gitee
    • 在.git文件中修改config文件
    • 遇到一个github同步，gitee没有同步的问题
      • 应该两变对齐就可以一起提交了
      • 但是没必要
  • ✅写了一个基于webpack的ProseMirror脚手架
    • 可以直接跑prosemirror的代码了
  • ✅今天看代码示例
    • 比如图片视为一个dom节点
  • ✅缺陷
    • 下划线颜色也要跟着改变
  • ✅个人站点添加导航item

# 7.19

  • ✅偷icon 403
  • ✅cross-env not found
    • 乱七八糟的，后面重新拉用yarn可以了
  • ✅安装nvm
  • ✅Access denied for user 'root@localhost'(using password:NO)
    • 用dbeaver连接本地数据库的时候忘记给密码了

# 7.20

  • ✅个人站点导航的icon找不到的bug
    • 应该是别的网站设置了cors，不让用呗
  • 站点更新prosemirror文档
  • ✅导航栏分类
    • 搜索工具
      • 百度，google，Github，Gitee
    • 前端学习
      • MDN，Lodash，Vue.js，React.js
      • HTML,HTML5，CSS，CSS3
      • Webpack,vite,Leetcode,大全
      • csdn，掘金,bilibili
    • 前端工具-组件库
      • antd,arco,element
    • 前端工具-icon
      • iconfont,fontAwesome，ShieldsIO，substats
    • 其他工具

# 7.21

  • ✅prosemirror插件无法运行的bug
    • concat到setup那个插件后面可以
    • 或者不用setup
  • ✅媒体查询出错

# 7.22

  • ✅bun性能比node,deno好
    • 存在内存泄漏问题
    • 也许能改变格局
  • ✅solid和svelte
    • solid很像react但是确实不错

# 周末

  • ✅写一篇webpack的文章，一个小模板
  • ✅整理最近的博客和bug回忆录
  • ✅把koa搭建的模板写一个cli

# 第十周

# 7.25

  • ✅查找输入为空的时候,编辑器报错
    • 如何text为空，就设置为初始值，这个值很奇怪就行了
  • ✅如何fake
    • 开权限,按插件，ppe使用
    • 注意boe是无法使用的
  • ✅搜索没有找到第一个
    • 原因是打log的时候把第一个值运行过了

# 7.26

  • ✅七天冷启需求
  • ✅发现本地分支很多，删掉
    • 删除本地分支git branch -d xxx
    • 删除远程分支git push origin --delete xxx

# 7.27

  • ✅需求的开发

# 7.28

  • ✅七天冷启的联调和自测
  • ✅token自更新资料的整理
  • ✅插件的设计文档

# 7.29

  • ✅编辑器插件添加两个返回数据的函数
  • ✅七天冷启的测试

# 周末

  • ✅模仿开发一个立体卡片

# 第四月

# 第十一周

# 8.1

  • ✅muye-novel-web-pc的运行
    • 求小改动直接提交了,boe可以了，本地运行还没研究

# 8.2-8.5

  • ✅正文插图条件放宽，联调自测提测
  • ✅jest学习
  • ✅syl学习
  • ✅个人站点添加樱花
  • ✅编辑器插件的视频
  • ✅写一篇单元测试的文章

# 最近

  • 录一个动态规划的视频
  • token的视频
    • token的实现
  • 入门一下canvas
  • 个人站点添加友链
  • 个人站点添加音乐播放器

# 后来

  • 在9月10月完成了查找替换插件和专区改版两个比较大的需求吧
    • 所以后面也没有什么时间来更新每天的日报了
  • 在中间获得的成长是超乎想象的，最重要的是获得了自信，我觉得我可以了
  • 比较艰难地转正了，未来充满希望
lastUpdate: 3/20/2023, 7:48:36 PM

Charles学习 →