【学习打卡】6月完结

真就减不下去？废物!

# 6.30

# 6月

这个月貌似重要的事情只有转正。。。其他都是零零散散，细细碎碎。也没什么大事情，过的很平淡，学的东西也不多。

# 生活需要期待

很多周末，都是因为到了周末所以才休息，并不是因为累。没有计划，周末就是躺尸，打游戏，刷剧，逛逛街，没什么不好，也没什么好的。

感觉吧，总要对周末有点期待才行，好比对自然有所敬畏.

这个周末就来一次KTV练练歌吧，周六下午。

# 6.29

# 来一篇ts的文章

# 6.28

# http与https的混合

浏览器的安全策略，在https的域名下，访问一些http的接口,会报错Mixed Content: The page at 'xxx' was loaded over HTTPS,

index.html中使用<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">能解决不报这个错误，但是并不能解决问题。

ajax请求如果是http的，还是报错net::ERR_SSL_PROTOCOL_ERROR

域名和后端接口都不改的话，暂未找到解决办法

# 统一口径

比喻大家对待问题采取一致的态度

最近在做一个项目，我理解的就是改文案，产品是 ‘口径’ 感觉是一个意思

之前是互联网医疗，各行各业都是专业名词

医疗：医保相关，疾病相关，药品名称，药品属性，

# 6.27

# 梅雨季节

梅雨季节，是在每年6、7月份的东南季风带来的太平洋暖湿气流，经过中国长江中下游地区、中国台湾地区、日本中南部以及韩国南部等地出现的持续天阴有雨的气候现象，由于正是江南梅子的成熟期，故称其为“梅雨”，此时段便被称作梅雨季节。

连绵多雨的梅雨季过后，天气开始由太平洋亚热带高压主导，正式进入炎热的夏季。

原来如此，之前只是简单的以为梅雨就只是下雨，接下来就是炎热的夏季了。也确实感觉到了最近湿气很重，之前在桂林感染的脚踝周围长

# 香港电影

很久没有静下心看看电影了，总是用不多的时间去干一些零零散散的事情，到头来也不知道自己干了啥。

「追龙擒虎」还是王晶的关于廉政公署的故事，前面看着还行，到后面的转折太快了。。。没了往日港片的激战，所以也只能给个烂片的名号。

# 6.26

# 聚会

两个前同事换了新工作，都去了大厂，一个字节，一个蚂蚁。出来聚聚，吃个饭，按个摩。

# 165hz 显示器

之前借同事的HDMI线，最高只能60hz，不知道为什么。新买的DP线到了，直接165HZ，很明显的舒服。游戏上倒是没什么感觉。有了大屏幕，也更愿意坐起来学习了。不然就是躺在床上，刷视频，很没意思。

# 周末的睡眠

上班时，想睡不能睡。休息时，不想睡又累。到六点多一醒，想着今天不用上班，就开始了手机。。。然后周五一般也不会睡觉，想完完全全利用好周末

这样的结果实际上就是，休息日比工作日更累。想着能有个稳定的节奏，还是要养成习惯。给自己定个小目标：晚上11点之前放下手机。早上几点起，先试试几点起，白天精神比较好。想要养成自己的习惯。

# 6.25

# HDR

简单理解：亮的地方贼亮，暗的地方贼暗，细节还贼多

# 6.24

# love-fe社区图标设计

个人感觉还可以，不知道选哪个了

iShot2021-06-24 15.27.55.png

iShot2021-06-24 15.33.47.png

iShot2021-06-24 15.38.31.png

iShot2021-06-24 15.44.19.png

# 高考出分

刷抖音，看全国各地都出分了。还记得河南是25号出，但实际上,24号晚上就可以。当时是各种想办法问成绩，也不敢直接问班主任，后来也忘记了是谁

发了整个县城的成绩单Excel表。那个时候还没有电脑，用手机打开也不会搜索，就一点点翻。。。看到自己的成绩的时候，也没啥感觉。就是知道

自己考崩了，数学68分。后来知道也能上个二本，心里压力也没那么大，就感觉很普通的心情。

# 6.23

# react 组件库搭建

几天写个小组件

# 6.22

# 准备整理一波好用的软件

自己再去发现一些，然后总结一下，发个文章啥的，刚好显示器到了。试试水

# git rebase

项目规范起来的话，这个用的应该挺多的

git rebase commitId （不包含当前commitId）

git rebase --abort 放弃当前rebase

有必要重新学一波git的一些高级操作了，比如：git commit规范限制，git ci、cd相关

# DP线

显示器到了，兴奋的开了箱，结果只送了一个DP线，MacBook Pro没有对应的接口，我一个转换器也是HDMI的。气人

大概也去了解了下DP和HDMI的区别

DP主要是电脑用，HDMI主要是电视，这个发明者有关系
DP目前主流是1.2和1.4版本，HDMI是2.0和2.1
综合来看DP要强一些，但是一个带DP口的拓展wu直彪1000块
1.4的看了半天，太贵了。就去淘宝买了个1.2的线。说是1.2和1.4在线比较短的时候没啥区别。
到货试试看

# 6.21

# 周末

好像没有了一些欲望，导致现在有点满足现状，不愿意去主动学习了。最近的状态越来越不好，游戏打到手疼。。。看群友经常出去面试

我在想是不是可以通过一些什么方式，激起自己的学习兴趣. 618买了个小米 27寸 165HZ显示器，有个想法：学习大圣一样，早上六点起来学习。

女朋友一般7.40起，相当于每天有一个半小时的学习时间。应该可以学挺多东西的，晚上得早睡。准备尝试一波

# 6.19

# 汽修考试

2020年还在微医的时候报的名，说是拿到证可以免费申请补贴，减免税额。前期交了1500，后面会补贴1500，相当于白嫖。结果报了个最难搞的项目。。。

先是在微医讲了一天理论课，1天
离职后，又通知回去上实践课， 1天
过一段时间又通知考试实践课，1天
又说要考理论，给了三套题库，害怕挂，不敢不背，0.5天
理论 + 实践考试， 1天

前前后后花了这么多时间，气死😤。。。早知道不报了

# 6.18

# 化妆品

女孩子喜欢的东西还能有啥，老姐推荐了一家店，刚好那家店的线上商城用的有赞，公司每个月发980到有赞账户上，也没啥其他花的地方

就买了500块的化妆品，一个雅诗兰黛粉底液，一个兰蔻大粉水，一个99块钱的盲盒

# 618 显示器

想买显示器很久了，但是思考过后感觉在家放个显示器作用并不大，但是自己又很想要。

去知乎看了一些说法，关于「想买但是作用不大的东西」：

在个人财政允许的情况下，如果你经历了冷静期再回头来评介这次购买的意向，依然感觉有足够的理由去购买，那就放心买好了。在不影响你生活品质的基础上，你要做的是花钱买开心。任何过度关注性价/需求比的购买行为都不是很划算的行为。

花钱买的是开心，一个东西的价值在于个人对它的向往。有时候很羡慕一些人，想要的东西可以不假思考直接买。

我想要的显示器原价1999，618最便宜1700，完全在自己的经济范围内。所以买！！！不买后悔一辈子，买了后悔一会，冲！

# 6.17

# 6.16

# 6.15

# 判断字符串："1<3" true或者false

new Function("return 1<3")()
// or 
eval("1<3" ) // 注意eval安全性问题

1
2
3

# ProtoBuf

protocol buffers 是一种语言无关、平台无关、可扩展的序列化结构数据的方法，它可用于（数据）通信协议、数据存储等。

之前用的基本都是 JSON 或 XML，高性能场景考虑ProtoBuf，暂时还没见过谁在用

# 6.14

# 6.13

# 6.12

# 6.11

# TS typeof

typeof 操作符可以用来获取一个变量或对象的类型。

一般情况下定义一个interface

interface Opt {
  timeout: number
}
const defaultOption: Opt = {
  timeout: 500
}

1
2
3
4
5
6

当一个 interface 总有一个字面量初始值时，可以考虑这种写法以减少重复代码

const defaultOption = {
  timeout: 500
}
type Opt = typeof defaultOption

1
2
3
4

# 6.10

# JavaScript 中哪一种循环最快

答案是： for（倒序）了解一下，实际开发还是要看场景

for 最快，但可读性比较差
foreach 比较快，能够控制内容
for...of 比较慢，但香
for...in 比较慢，没那么方便

# Hidden Bar：隐藏 Mac 菜单栏项

Hidden Bar (opens new window) mac软件装多了，菜单栏no fuck可言

# mac微信助手

WeChatExtension-ForMac (opens new window)

有AI小助手，应付女朋友，简直无敌

很优秀的一个小助手，皮肤比原生的好看，支持防撤回、免认证登录、AI自定义回复消息、手机通过这个控制电脑等功能，不过只建议在个人非工作电脑上玩

# 区分图片格式

计算机并不是通过图片的后缀名来区分不同的图片类型，而是通过 “魔数”（Magic Number）来区分。对于某一些类型的文件，起始的几个字节内容都是固定的，根据这几个字节的内容就可以判断文件的类型。

JavaScript 如何检测文件的类型？ (opens new window)

了解一下，实际可能用不到。当用户修改文件格式，还是上传不了，就会很疑惑，可能就会提个BUG过来

# 6.9

# slice（）与splice（）的用法和区别

# slice(start，end)

从start开始截取到end但是不包括end
返回值为截取出来的元素的集合
原始的数组不会发生变化

var arr1 = [1,23,44,55,66,77,888,"fff"];
var arr2 = arr1.slice(2,4) //从index为2截取到index为4之前不包括4
console.log(arr2); //[44,55]
console.log(arr1); // [1,23,44,55,66,77,888,"fff"]原始数组没有被改变

1
2
3
4

# splice(start,deleteCount,item1,item2…..);

start参数开始的位置
deleteCount 要截取的个数
后面的items为要添加的元素
如果deleteCount为0，则表示不删除元素，从start位置开始添加后面的几个元素到原始的数组里面
返回值为由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组
这个方法会改变原始数组，数组的长度会发生变化

# 6.8

# Emoji小网站

Emoji小网站很好玩 (opens new window)

# html显示LaTeX数学公式

MathJax (opens new window)

KaTeX (opens new window) 貌似更强，速度更块

# 6.7

# BFF 实践PDF

蚂蚁财富的 BFF 实践 - 汤尧（新）在线PDF (opens new window)

# git learn

https://learngitbranching.js.org/ (opens new window)

可视化 git 操作，玩的不太会。。。挺有意思

# Nunjucks

模板引擎 [中文文档]https://nunjucks.bootcss.com/getting-started.html()

# 6.6

# 敲敲vue

这才三个月，有些东西写着写着就忘记了写法，hhh

# npm version <update_type>

update_type为patch, minor, major其中之一，分别表示补丁，小改，大改

npm version patch

npm version minor

npm version major

1
2
3
4
5
6

# 6.5

# 汽修培训

前同事和前TL都在，吹吹nb，一天就过去了。后悔报这个班了，没啥用，还暂用时间。

# 6.4

# peerDependencies

目的是提示宿主环境去安装满足插件 peerDependencies 所指定依赖的包，然后在插件 import 或者 require 所依赖的包的时候，永远都是引用宿主环境统一安装的 NPM 包，最终解决插件与所依赖包不一致的问题。

# css @supports

一个demo，如果浏览器支持 CSS 网格功能，则应用 display: grid; 样式到 .site-content 的元素。不支持则降级

@supports (display: grid) {
    .site-content {
        display: grid;
    }
}
@supports not (display: grid) {
    .site-content {
        float: left;
    }
}

1
2
3
4
5
6
7
8
9
10

# 6.3

# sass/less 版本问题

版本太高会报错：TypeError: this.getOptions is not a function

主要原因是高版本依赖webpack5,现在项目基本都没升级，所以降低loader版本即可

# commitizen: 标准化的commit message

npm install -g commitizen

基本都在用的git提交规范

# CSS 自定义变量

带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用的。

 <style>
      :root {
        --global--color-primary: #1851ad;
        --global--color-danger: #880c21;
      }

      .btn {
        width: 100px;
        height: 50px;
        color: #999;
      }
      .btn-primary {
        background-color: var(--global--color-primary);
      }
      .btn-danger {
        background-color: var(--global--color-danger);
      }
    </style>
    <body>
    <div>
      <button class="btn btn-primary">主要按钮</button>
      <button class="btn btn-danger">错误按钮</button>
    </div>
  </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 外界的干扰

各种其他的事情，会影响到自己的心态。

有时候就有会有放纵的心理，然后就会就想着算了

# 查找 mac 系统中所有的 node_modules

npkill (opens new window)

// 安装
sudo npm i -g npkill
// 查找
npx npkill
// 删除， 上下选中
space 空格键删除

1
2
3
4
5
6
7

# 6.2

# 一个 markdown 实时渲染的实现

之前疑惑的，掘金看了篇文章，恍然大悟。

基本就是：将输入框中的值通过开源库转换成 Html，再插入到页面。

import React, { useState } from "react";
import "./theme/github-theme.css"; // 引入github的markdown主题样式
// markdown解析的开源库:Marked、Showdown、markdown-it，后者比较好用
import markdownIt from "markdown-it";

const md = new markdownIt();

export default function MarkdownEdit() {
  // 存储解析后的html字符串
  const [htmlString, setHtmlString] = useState("");
  // 解析markdown语法
  const parse = (text: string) => setHtmlString(md.render(text));

  return (
    <div className="markdownEditConainer">
      <textarea className="edit" onChange={(e) => parse(e.target.value)} />
      <div
        className="show"
        id="write" // 新增write的ID名
        dangerouslySetInnerHTML={{ __html: htmlString }}
      />
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 一个 webpack plugin

Plugin 其实就是一个类。
类需要一个 apply 方法，执行具体的插件方法。
插件方法做了一件事情就是在 run 这个 Hook 上注册了一个同步的打印日志的方法。
apply 方法的入参注入了一个 compiler 实例，compiler 实例是 Webpack 的支柱引擎，代表了 CLI 和 Node API 传递的所有配置项。
Hook 回调方法注入了 compilation 实例，compilation 能够访问当前构建时的模块和相应的依赖。
compiler 实例和 compilation 实例上分别定义了许多 Hooks，可以通过实例.hooks.具体 Hook 访问，Hook 上还暴露了 3 个方法供使用，分别是 tap、tapAsync 和 tapPromise。这三个方法用于定义如何执行 Hook，比如 tap 表示注册同步 Hook，tapAsync 代表 callback 方式注册异步 hook，而 tapPromise 代表 Promise 方式注册异步 Hook

const pluginName = "ConsoleLogOnBuildWebpackPlugin";

class ConsoleLogOnBuildWebpackPlugin {
  // Compiler 对象包含了 Webpack 环境所有的的配置信息，包含 options，loaders，plugins 这些信息，这个对象在 Webpack 启动时候被实例化，它是全局唯一的，可以简单地把它理解为 Webpack 实例；
  apply(compiler) {
    // 代表开始读取records之前执行
    compiler.hooks.run.tap(pluginName, (compilation) => {
      //  Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的 Compilation 将被创建。Compilation 对象也提供了很多事件回调供插件做扩展。通过 Compilation 也能读取到 Compiler 对象。
      console.log("webpack 构建过程开始！");
    });
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

# 6.1

# 剩余操作符

解构正常都知道，...other 第一次用到

const a = { x: 1, y: 2, c: 3 };
const { x, ...other } = a;
x; // 1
other; // {y: 2, c: 3}

1
2
3
4

# 解构重命名

const { y: renameY } = a;
renameY; // 2

1
2

#学习打卡

最近更新时间： 2021/07/06 16:08:30

【学习打卡】6月完结

# 6.30

# 6月

# 生活需要期待

# 6.29

# 来一篇ts的文章

# 6.28

# http与https的混合

# 统一口径

# 6.27

# 梅雨季节

# 香港电影

# 6.26

# 聚会

# 165hz 显示器

# 周末的睡眠

# 6.25

# HDR

# 6.24

# love-fe社区图标设计

# 高考出分

# 6.23

# react 组件库搭建

# 6.22

# 准备整理一波好用的软件

# git rebase

# DP线

# 6.21

# 周末

# 6.19

# 汽修考试

# 6.18

# 化妆品

# 618 显示器

# 6.17

# 6.16

# 6.15

# 判断字符串："1<3" true或者false

# ProtoBuf

# 6.14

# 6.13

# 6.12

# 6.11

# TS typeof

# AST 编辑器

# css Loading 动画

# 文字成手写体

# 6.10

# JavaScript 中哪一种循环最快

# Hidden Bar：隐藏 Mac 菜单栏项

# mac微信助手

# 区分图片格式

# 6.9

# slice（）与splice（）的用法和区别

# slice(start，end)

# splice(start,deleteCount,item1,item2…..);

# 6.8

# Emoji小网站

# html显示LaTeX数学公式

# 6.7

# BFF 实践PDF

# git learn

# Nunjucks

# 6.6

# 敲敲vue

# npm version <update_type>

# 6.5

# 汽修培训

# 6.4

# peerDependencies

# css @supports

# 6.3

# sass/less 版本问题

# commitizen: 标准化的commit message

# CSS 自定义变量

# 外界的干扰

# 查找 mac 系统中所有的 node_modules

# 6.2

# 一个 markdown 实时渲染的实现

# 一个 webpack plugin

# 6月

# 165hz 显示器