博客升级

新的访问地址:www.jingzhengyi.top

之前写博客是用的hexo, https://blog.jingzhegyi.top 感觉也挺好用的,然后他是基于node的去实现的, 最后编译成静态问 ..对SEO什么之类等友好
. 我心目中 一个好用的博客应该:

• 样式,hexo 的样式有点简单,我倒是不太在意.不过最近感觉可能好的版面设计还是挺对用户存留挺有帮助的.
• SEO 友好. url里基本就包含相关的meta信息, 这个我感觉hexo 就很好了.
• 评论. 个人感觉一定要有,而且越简单越好.
  • 自己写的文章如果有人想评论,有点想法 如果要鼓励他写,肯定评论得越简单越好. 博客最重要的其实就是能够希望对路的人能沟通一些想法,所以一定要简单方便.
  • 个人感觉hexo最大的缺点就是写评论. 之前用过很多的评论插件但是基本上大家推荐的都是gitalk 之类的 基于github的. 这种就对国内用户非常不友好,,哦之前小的时候可能评论的是程序员,无所谓. 但是最近感觉这个我还是想嗯有一个简单的,所以做了升级.
  • 基于监管的要求,可能要加上审核检测.

哈哈,总之感觉还是挺满意的.这次升级.

有个程序员喝醉酒,然后分享的自己的经验 ,从 阮一峰博客看的

有个程序员喝醉酒,然后分享的自己的经验 ,从 阮一峰博客看的

(1)职业发展的最好方法是换公司。

(2)技术栈不重要。技术领域有大约 10-20 条核心原则，重要的是这些原则，技术栈只是落
实它们的方法。你如果不熟悉某个技术扰一不需要过度担心。

(3)工作和人际关系是两回事。有一些公司，我交到了好朋友，但是工作得并不开心；另一
些公司，我没有与任何同事建立友谊，但是工作得很开心。

(4)我总是对经理实话实说。怕什么？他开除我？我会在两周内找到一份新工作。

(5)如果一家公司的工程师超过 100 人，它的期权可能在未来十年内变得很有价值。对于
工程师人数很少的公司，期权一般都是毫无价值。

(6)好的代码是初级工程师可以理解的代码。伟大的代码可以被第一年的CS 专业的新生理
解。

(7)作为一名工程师，最被低估的技能是记录。说真的，如果有人可以教我怎么写文档，我
会付钱，也许是1000 美元。

(8)网上的口水战，几乎都无关紧要，别去参与。

(9)如果我发现自己是公司里面最厉害的工程师，那就该离开了。

(10)我们应该雇佣更多的实习生，他们很棒。那些精力充沛的小家伙用他们的想法乱搞。
如果他们公开质疑或批评某事，那就更好了。我喜欢实习生。

(11) 技术栈很重要。如果你使用 Python 或 C++ 语言，就会忍不住想做一些非常不同的事
情。因为某些工具确实擅长某些工作。

(12)如果你不确定自己想做什么东西，请使用 Java。这是一种糟糕的编程语言，但几乎无
所不能。

(13)对于初学者来说，最赚钱的编程语言是 SQL，千翻所有其他语言。你只了解 sQL 而不
会做其他事情，照样赚钱。人力资源专家的年薪？也许5万美元。懂 SQL 的人力资源专家？9
万美元。

(14) 测试很重要，但TDD(测试驱动的开发) 几乎变成了一个邪教。

(15) 政府单位很轻松，但并不像人们说的那样好。对于职业生涯早期到中期的工程师，12
万美元的年薪＋各种福利＋ 养老金听起来不错，但是你将被禁锢在深奥的专用工具里面，离
开政府单位以后，这些知识就没用了。我非常尊重政府工作人员，但说真的，这些地方的工
程师，年龄中位数在 50岁以上是有原因的。

最近又看了 jebrain 的程序员调查结果 2021 版(话说我这个是年初填了一下,感觉出结果都半年之后了,估计可能我做的比较早?) 比较有意思的:

• https://www.jetbrains.com/lp/devecosystem-2021/ ,感觉可能限于用 jetbrain 软件的人群,做 web 开发的人占很大比例.可以看看 里面的收入统计…………中国虽然跟美国差距大,但是还是在 14 位上,中位数 21000 美元
• 男女比例 女性还是少数群体,起码参与调查积极性不高…不逛社区也能反应些问题,总得来看感觉女性还是少数的. 中国是 5%;

最近又看了 jebrain 的程序员调查结果 2021 版(话说我这个是年初填了一下,感觉出结果都半年之后了,估计可能我做的比较早?)

比较有意思的:

• https://www.jetbrains.com/lp/devecosystem-2021/ ,感觉可能限于用 jetbrain 软件的人群,做 web 开发的人占很大比例.可以看看
  里面的收入统计…………中国虽然跟美国差距大,但是还是在 14 位上,中位数 21000 美元

• 男女比例
  女性还是少数群体,起码参与调查积极性不高…不逛社区也能反应些问题,总得来看感觉女性还是少数的.
  中国是 5%;

浏览器 跨域问题console 报错

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource athttps://example.com/
Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy.

如果你遇到这些报错，就是跨域问题。

kaboomJS 自己介绍说是 极速开发网页游戏的一个库。周末看了一个 yutuber 博主发的一个用这个库实现马力欧游戏的视频，感觉确实眼前一亮。用对工具，果然干活就是一个库的事情。。。。。

Coding Up a Mario Game in JavaScript with Kaboom.js

— Ania is back showing us how to create a basic platformer in the course of an hour in her typically breezy, easy to follow manner. Watch this if you want to reignite that coding spark.

最终结果就是 一个 html + 一个 game.js !!! 效果如下：

基本思路就是 加载各种图片 ，下面的路，马力欧，小怪兽，然后用这个框架驱动图片动，然后库提供了碰撞方法之类的。。。。。

Final code here: https://github.com/kubowania/mario

Imgur: https://imgur.com/a/F8Jkryq

https://skamille.medium.com/an-incomplete-list-of-skills-senior-engineers-need-beyond-coding-8ed4a521b29f

• 如何主持会议，不，在会议上说得最多的人与主持会议不是一回事。
• 如何在合理的时间内撰写设计文件，接受反馈，并推动其解决。
• 如何指导职业生涯初期的队友、职业生涯中期的工程师、需要技术建议的新经理
• 如何在不翻白眼或让他们觉得愚蠢的情况下，纵容一个想谈论他们并不真正理解的技术问题的高级经理人？
• 如何向一个不好意思公开承认自己不懂的技术概念的高层人士解释，闭门造车？
• 如何影响另一个团队使用你的解决方案，而不是写他们自己的解决方案
• 如何通过请求帮助的方式让另一个工程师为你做事，让他们觉得自己受到赞赏
• 如何领导一个项目，即使你并不管理项目中的任何人员
• 如何让其他工程师倾听你的想法，而不使他们感到受到威胁
• 如何倾听其他工程师的想法而不觉得受到威胁
• 如何放弃你的宝贝项目，也就是那个你把它建设得很好的项目，以便你可以做别的事情。
• 如何教另一个工程师关心你真正关心的事情（操作、正确性、测试、代码质量、性能、简单性等等）。
• 如何与利益相关者沟通项目状态
• 如何说服管理层他们需要投资于一个非微不足道的技术项目
• 如何构建软件，同时在这个过程中提供增量价值
• 如何制定一个项目提案，使之社会化，并获得执行的支持
• 如何重复自己，使人们开始倾听
• 如何选择你的战斗
• 高级工程师的技能之一，就是要帮忙其他人晋升。
• 如何获得关于真正发生的事情的信息（如何八卦，如何建立网络）。
• 如何自己找到有趣的工作，而不是等着别人把它带给你
• 如何告诉别人他们是错的而不使他们感到羞愧
• 如何优雅地接受负面反馈

60 WebStorm/IntelliJ IDE Tips, Tricks, and Features That Will Make Your Life Easier

ref https://medium.com/litslink/webstorm-intellij-ide-tips-tricks-and-features-that-will-make-your-life-easier-6d0c38ff3d4b
感觉学到了好些新的 intelJ 配置。。。。。。感觉挺好

In this article we will talk about capabilities, tip and features of JetBrains IDEs like Webstorm and Intellij that you get out of the box but 90% chance that you don’t use it.

For our examples, I will use a simple Typescript React project created by create-react-app script and simple TS files for tests like 2 + 2 = 4.

1. Presentation plugin

Before we will begin our journey I will install a Presentation plugin…

…that will show us notifications with the action name and shortcuts for iOS/Win/Linux:

练习可以用 http://plnkr.co/ 感觉还挺好
原文 :https://github.com/postcss/postcss/blob/main/docs/README-cn.md

PostCSS

PostCSS 是一个允许使用 JS 插件转换样式的工具。
这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，
编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

PostCSS 在工业界被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴，
JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

Twitter 账号: @postcss

支持 / 讨论: Gitter

乾坤一个项目 node_modules 包就 8 个 G……虽然知道是好几个子项目的事…..但是还是挺不爽的…….

一些相关名词

| – |– |
|SSI|server side includes|
|BFF|Backend For Frontend |

一些知识点

• ReactDOM.unmountComponentAtNode(container) - ref
  从 Dom 中卸载组件,会将其事件处理器(event handlers) 和 state 一并清楚.如果指定容器上没有对应已挂载的组件,这函数什么也不做,如果组件被移除将会返回 True

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

window.renderBrowser =(containerId, history)=>{
    ReactDOM.render(<App history={history} />,
    document.getElementById(containerId)) ;

    registerServiceWorker();

    }

window.unmountBrowse=containerId=>{
    ReactDOM.unmountComponentAtNode(document.getElementById(containerId ));

    }

qiankun-工具

• import-html-entry
  https://github.com/kuitos/import-html-entry

qiankun-实践

基于 qiankun 的微前端最佳实践 @nice
@by https://github.com/a1029563229/blogs
@code https://github.com/a1029563229/micro-front-template

参考

方案微前端(react+qiankun)

hook 规则官网的文档 ,以前没看,主要是用 umi 每次运行 eslint 都会改 hooks 的依赖,原来是官方的 eslint 插件 eslint-plugin-react-hooks 搞的鬼…
然后看了一下官网的文档 学习了一下,感觉有好些知识点
https://zh-hans.reactjs.org/docs/hooks-rules.html

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件来强制执行这些规则：

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在会有更深入的解释。)

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。你可以：

• ✅ 在 React 的函数组件中调用 Hook
• ✅ 在自定义 Hook 中调用其他 Hook (我们将会在, setName] = useState(‘Mary’);

// 2. Use an effect for persisting the form
useEffect(function persistForm() {
localStorage.setItem(‘formData’, name);
});

// 3. Use the surname state variable
const [surname, setSurname] = useState(‘Poppins’);

// 4. Use an effect for updating the title
useEffect(function updateTitle() {
document.title = name + ‘ ‘ + surname;
});

// …
}

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

那么 React 怎么知道哪个 state 对应哪个 `useState`？答案是 React 靠的是 Hook 调用的顺序。因为我们的示例中，Hook 的调用顺序在每次渲染中都是相同的，所以它能够正常工作：

```jsx
// ------------
// 首次渲染
// ------------
useState('Mary')           // 1. 使用 'Mary' 初始化变量名为 name 的 state
useEffect(persistForm)     // 2. 添加 effect 以保存 form 操作
useState('Poppins')        // 3. 使用 'Poppins' 初始化变量名为 surname 的 state
useEffect(updateTitle)     // 4. 添加 effect 以更新标题

// -------------
// 二次渲染
// -------------
useState('Mary')           // 1. 读取变量名为 name 的 state（参数被忽略）
useEffect(persistForm)     // 2. 替换保存 form 的 effect
useState('Poppins')        // 3. 读取变量名为 surname 的 state（参数被忽略）
useEffect(updateTitle)     // 4. 替换更新标题的 effect

// ...

只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。但如果我们将一个 Hook (例如 persistForm effect) 调用放到一个条件语句中会发生什么呢？

1
2
3
4
5
6

// 🔴 在条件语句中使用 Hook 违反第一条规则
if (name !== "") {
  useEffect(function persistForm() {
    localStorage.setItem("formData", name);
  });
}

在第一次渲染中 name !== '' 这个条件值为 true，所以我们会执行这个 Hook。但是下一次渲染时我们可能清空了表单，表达式值变为 false。此时的渲染会跳过该 Hook，Hook 的调用顺序发生了改变：

1
2
3
4

useState("Mary"); // 1. 读取变量名为 name 的 state（参数被忽略）
// useEffect(persistForm)  // 🔴 此 Hook 被忽略！
useState("Poppins"); // 🔴 2 （之前为 3）。读取变量名为 surname 的 state 失败
useEffect(updateTitle); // 🔴 3 （之前为 4）。替换更新标题的 effect 失败

React 不知道第二个 useState 的 Hook 应该返回什么。React 会以为在该组件中第二个 Hook 的调用像上次的渲染一样，对应的是 persistForm 的 effect，但并非如此。从这里开始，后面的 Hook 调用都被提前执行，导致 bug 的产生。

这就是为什么 Hook 需要在我们组件的最顶层调用。如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：

1
2
3
4
5
6

useEffect(function persistForm() {
  // 👍 将条件判断放置在 effect 中
  if (name !== "") {
    localStorage.setItem("formData", name);
  }
});

注意：如果使用了提供的 lint 插件，就无需担心此问题。 不过你现在知道了为什么 Hook 会这样工作，也知道了这个规则是为了避免什么问题。

下一步

最后，接下来会学习如何编写自定义 Hook！自定义 Hook 可以将 React 中提供的 Hook 组合到定制的 Hook 中，以复用不同组件之间常见的状态逻辑。下一页](https://zh-hans.reactjs.org/docs/hooks-custom.html) 中学习这个。)

遵循此规则，确保组件的状态逻辑在代码中清晰可见。

ESLint 插件

我们发布了一个名为 eslint-plugin-react-hooks 的 ESLint 插件来强制执行这两条规则。如果你想尝试一下，可以将此插件添加到你的项目中：

我们打算后续版本默认添加此插件到 Create React App 及其他类似的工具包中。

1

npm install eslint-plugin-react-hooks --save-dev

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

// 你的 ESLint 配置
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}

现在你可以跳转到下一章节学习如何编写你自己的 Hook。在本章节中，我们将继续解释这些规则背后的原因。

说明

正如我们之前学到的，我们可以在单个组件中使用多个 State Hook 或 Effect Hook

1
2
3

function Form() {
  // 1. Use the name state variable
  const [name[

今天干活到 11 点半…….不知道写啥了………这个周接触 websocket 多些,就把用的几个小脚本分享一下,当完成任务了哈哈哈…….

websocket 测试页面