前端 ARTS 打卡计划（六）。

• 前端ARTS打卡计划（一）
• 前端ARTS打卡计划（二）
• 前端ARTS打卡计划（三）
• 前端ARTS打卡计划（四）
• 前端ARTS打卡计划（五）
• 前端ARTS打卡计划（终章）

ARTS 打卡计划

第五十一周(2021.03.22-2021.03.28)

• Algorithm：

  • 5. 最长回文子串
  • 14. 最长公共前缀
  • 100. 相同的树
  • 146. LRU 缓存机制 | JS 项目中究竟应该使用 Object 还是 Map？| 项目复盘

    // Map里面的属性的顺序是根据添加时的顺序进行排序的，对象则不然（数字属性和非数字属性有差别），可以利用这一点完成LRU
    class LRUCache {
        constructor(capacity) {
            this.capacity = capacity
            this.map = new Map();
        }
    
        get(key) {
            let val = this.map.get(key);
            if (val === undefined) return -1;
    
            this.map.delete(key); // 因为被用过一次，原有位置删除
            this.map.set(key, val); // 放入最下面表示最新使用
            return val;
        }
    
        put(key, val) {
            if (this.map.has(key)) this.map.delete(key); // 如果有，删除
    
            this.map.set(key, val); // 放到最下面表示最新使用
    
            if (this.map.size > this.capacity) {
                // 这里有个知识点
                // map的entries方法，还有keys方法(可以看mdn))，会返回一个迭代器
                // 迭代器调用next也是顺序返回，所以返回第一个的值就是最老的，找到并删除即可
                this.map.delete(this.map.entries().next().value[0])
            }
        }
    }
    

• Review:

• Tip：

  • 10个HTML文件上传技巧
  • git如何取消merge

• Share：

  • 六个问题助你理解 React Fiber

第五十二周(2021.03.29-2021.04.04)

• Algorithm：

  • 剑指 Offer 55 - I. 二叉树的深度
  • 剑指 Offer 55 - II. 平衡二叉树
  • 剑指 Offer 56 - II. 数组中数字出现的次数 II
  • 剑指 Offer 57 - II. 和为s的连续正数序列
  • 剑指 Offer 58 - I. 翻转单词顺序
  • 102. 二叉树的层序遍历
  • 104. 二叉树的最大深度
  • 151. 翻转字符串里的单词

• Review:

• Tip：

  • nodejs高并发大流量的控制并发的三种方法
  • 如何构建一个高可用的node环境：故障恢复、多核利用、多进程共享端口
  • 基于Docker、NodeJs实现高可用的服务发现
    • NodeJs 自身通过 cluster 模块，进行多进程启动，防止单进程崩溃的不稳定性；
    • 通过 Docker 容器化启动，在启动时设置restart策略，一旦服务崩溃将立即重启；
    • 上述的使用场景都在单机上运行，在分布式情况下，可以将 NodeJs 容器多主机部署，采用 nginx + NodeJs 的架构进行水平扩展。
  • 分布式与集群的区别是什么？
  • React表单增强（表单验证、表单校验）：formik | Yup验证：validationschema
    • Build forms in React, without the tears
    • Formik is the world’s most popular open source form library for React and React Native.
  • monorepo 项目改造反思

• Share：

  • 构建效率大幅提升，webpack5 在企鹅辅导的升级实践
  • node-interview-questions
  • Nginx 极简教程 — 帮助新手快速入门
  • 传送门：React Portal
  • React.createPortal 及 Modal 的新实现方式

第五十三周(2021.04.05-2021.04.11)

• Algorithm：

  • 22. 括号生成
  • 28. 实现 strStr()
  • 35. 搜索插入位置
  • 41. 缺失的第一个正数
  • 42. 接雨水
  • 46. 全排列
  • 50. Pow(x, n)
  • 56. 合并区间
  • 57. 插入区间
  • 263. 丑数
  • 678. 有效的括号字符串
  • 1663. 具有给定数值的最小字符串
  • 面试题 02.01. 移除重复节点
  • 试题 02.02. 返回倒数第 k 个节点
  • 面试题 02.05. 链表求和
  • 面试题 02.06. 回文链表

• Review:

• Tip：

  • Ant-Design-Vue中Table使用固定列后行之间对不齐的问题解决

• Share：

  • 把 webpack 热更新原理聊清楚
  • 面对 ESM 的开发模式，webpack 还有还手之力吗？
  • 面试题：谈谈Vue和React的区别？
  • 精读《DOM diff 原理详解》
  • 【万字总结】 一文吃透 Webpack 核心原理
  • JS Set、Map对象的用法及实现
  • 深入 CommonJs 与 ES6 Module
  • 《模块化系列》彻底理清 AMD,CommonJS,CMD,UMD,ES6
  • 前端工程化的理解

第五十四周(2021.04.12-2021.04.18)

• Algorithm：

  • 15. 三数之和
  • 101. 对称二叉树
  • 103. 二叉树的锯齿形层序遍历
  • 226. 翻转二叉树
  • 374. 猜数字大小

• Review:

• Tip：

  • 使用 Fetch

      fetch('http://example.com/movies.json')
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
    

  • nginx 代理配置：在地址前添加路径

      # 混合云-离职交接(测试)
      location /system/ {
          # 相当于在/system/前面加上了 http://192.168.0.1/rest/v1/account
          proxy_pass http://192.168.0.1/rest/v1/account/system/;
      }
    

  • 低代码：
    • 百度低代码amis：amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率：文档 | GitHub。
    • 前端页面可视化搭建工具业界的轮子
    • 前端服务化——页面搭建工具的死与生
    • 基于现代的前端框架，为什么没有成熟的支持控件拖拽布局，并可以自动生成前端代码的设计器出现？
  • 如何将 Vue 组件转成 React 组件？ | GitHub vue-to-react | 可视化页面
  • Git仓库完整迁移：
    • git clone https://git.xxxxadmin.com/front/oldProject.git
    • cd oldProject
    • git remote rm origin
    • git remote add origin https://git.yyyadmin.com/front/newProject.git
    • git push --set-upstream origin master
    • 删除当前项目，从新地址重新拉取
  • Git把Tag推送到远程仓库
    • 默认情况下，git push并不会把tag标签传送到远端服务器上，只有通过显式命令才能分享标签到远端仓库；
    • push单个tag，命令格式为：git push origin [tagname]；
    • push所有tag，命令格式为：git push [origin] --tags。
    • 2.6 Git 基础 - 打标签
  • Pure.CSS：A set of small, responsive CSS modules that you can use in every web project.

• Share：

  • 前端缓存最佳实践
  • 理解Git Submodules
  • 2020年前端技术浪潮与应用 | 掘金 | 微信链接

第五十五周(2021.04.19-2021.04.25)

• Algorithm：

  • 1381. 设计一个支持增量操作的栈
  • 1636. 按照频率将数组升序排序
  • 1732. 找到最高海拔

• Review:

• Tip：

  • Emotion库与 CSS-in-JS 方案 | GitHub：Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
  • CSS in JS的好与坏
  • Docker 入门教程 - 阮一峰 | Docker 微服务教程 | YAML 语言教程 | Docker 官方文档

  • 开发提效——我点了页面上的元素，VSCode 乖乖打开了对应的组件？原理揭秘 | GitHub仓库及使用 | 在线预览体验 | IDE / Editor config：react-dev-inspector。

      # 错误信息：To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server. Learn more: https://goo.gl/MMTaZt
      # 相关使用配置参考以上GitHub仓库及使用链接，项目根目录需要新建.env.local文件，或者参考上文IDE / Editor config链接
      # .env.local
      REACT_EDITOR=code
    

  • 北海Kraken：高性能 Web 渲染引擎，基于 Flutter 构建；
  • Eva.js：互动游戏引擎

• Share：

  • 活动 Web 页面人机识别验证的探索与实践

第五十六周(2021.04.26-2021.05.02)

• Algorithm：

• Review:

• Tip：

  • javascript – option.style.display =“none”在Safari中不起作用：
    • 解决：使用disabled替代，如$('option').prop('disabled', true);或者opt.disabled = true;；
    • How can I hide select options with JavaScript? (Cross browser)；
    • Safari限制了表单元素上的CSS样式功能,认为交互元素的视觉语言应该与操作系统保持一致。

• Share：

  • 微信小程序开发实践总结 | 博文地址
  • 一文带你了解如何排查内存泄漏导致的页面卡顿现象

第五十七周(2021.05.03-2021.05.09)

• Algorithm：

• Review:

• Tip：

  • Chakra UI：Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
  • ReactJS 疑難排解：使用 react-devtools | 6 Different ways to Check React Version | Terminal：

    // 线上环境查看React版本
    __REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version
    // OR
    __REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values().next()["value"]["version"]
    // OR
    __REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))
    

• Share：

  • 如何打造一款标准的 JS SDK ？
  • 如何封装不被嫌弃的组件SDK

第五十八周(2021.05.10-2021.05.16)

• Algorithm：

• Review:

• Tip：

• Share：

第五十九周(2021.05.17-2021.05.23)

• Algorithm：

• Review:

• Tip：

  • 网站如何检测到是否开启开发者工具? | 前端开发中如何在JS文件中检测用户浏览器是否打开了调试面板（F12打开开发者工具）？ | JS检测浏览器开发者工具是否打开的方法详解 | devtools-detector

    var im = new Image();
    Object.defineProperty(im, 'id', {
        get: function() {
          // 在这里放入你的代码
          console.log('Console is opened');
          window.location.href = "http://www.baidu.com"
        }
    });
    console.log(im); //谷歌最新版失效
  
    let num = 0; //谷歌最新版有效
    var devtools = new Date();
    devtools.toString = function () {
      num++;
      if (num > 1) {
        // 在这里放入你的代码
        console.log('Console is opened');
        window.location.href = "http://www.baidu.com"
      }
    }
    console.log('', devtools);
  

  • Git回滚代码到某个commit
    • 回退命令：

      $ git reset --hard HEAD^ #回退到上个版本
      $ git reset --hard HEAD~3 #回退到前3次提交之前，以此类推，回退到n次提交之前
      $ git reset --hard commit_id #退到/进到 指定commit的sha码
      

    • 强推到远程：

      $ git push origin HEAD --force
      

  • git 为不同的项目设置不同的用户名和邮箱

    #先整体
    git config --global user.name"your name"
    git config --global user.email"youEmail@xxx.com"
    # 后局部
    git config user.name "Your Name"
    git config user.email "youEmail@yyy.com"
    

• Share：

第六十周(2021.05.24-2021.05.30)

• Algorithm：

• Review:

• Tip：

  • Fish shell 入门教程
  • 在最新的 Google I/O 主题演讲中 stackblitz 向大家介绍了他们与 Next.js 和 Google 团队合作开发的在线 IDE WebContainers ，真的是非常惊艳。
    • ​推荐一个神器！可以在浏览器运行 Node.js
    • 在线 IDE WebContainers：The fastest, most secure dev environment on the planet.

• Share：

ARTS - 终章

终止缘由

  前端领域飞速发展，世界风云波谲云诡。学习资料堆积如山难以选择；计划总是跟不上变化。那么，作为前端浪潮中的弄潮儿，我们该如何选择，才能适应时代的变化呢？我想，我们也许可以做如下思考：

• 哪些事情做起来一定有益于个人的发展，如此，可避免总是在变化中无序选择；
• 只要一直做正确的事情，一直有经验的沉淀与思考，多年后的某一天，你会惊异地发现自己已经获得了超出预期的成长；
• 定点捕捞比广撒网更能获取你想要的知识。

  同时，我认为，ARTS打卡计划：

• 是职业生涯特定阶段的产物，比如它重算法、力求提升个人技术影响力；
• 以前的ARTS打卡，主要坚持的可能也只是ATS，R很少，实际上在某种程度上也难以发挥它的最大价值；
• 需要用这些时间系统性的干一些更重要的事儿，不仅仅是现阶段更重要的事儿；
• 知识积累过于宽泛，难有特定领域的深入探索和沉淀、产出；
• 我希望能一直做正确的事情，一直有经验的沉淀与思考，获得更多有深度的沉淀。

新的开始

• 周期：两周 ～ 两个月为一个周期
• 主题：知识与经验，探索和发现；
• 形式：
  • Knowledge and Experience【阅读、识见、思考，不仅仅局限于专业知识，也包括生活、人生等】
    • 最近两周学会的技术、小技巧和收获（可以含以前的算法）
    • 技术文章阅读学习
    • 格局、价值观、成长、人生类
    • 财经、理财类
    • 生活、运动健康等
    • 不定期的实践增补
  • Exploration and Discovery【探索与发现】
    • 特定领域的技术和知识沉淀【定点捕捞】
    • 技术文章输出，建议两周一篇
    • 领悟与收获
    • 不定期的实践增补

  两年为期，遇见更好的自己！ —— 2021.05.24 By Cheney。