咖啡机（K.F.J）_社区达人页

2022年04月

• 04.27 13:52:09
  发表了文章 2022-04-27 13:52:09

  带团队后的日常思考（一）

  　　由于公司规模并不大，因此一有事情就会拉个会议，例如需要大会、技术评审、汇报周会、突发会议等。一周中大概有20%~30%的时间会花在大大小小的会议上。

  
• 04.27 13:49:52
  发表了文章 2022-04-27 13:49:52

  一个以小说的叙述方式书写的项目

  　最近在读一本名为《凤凰项目：一个IT运维的传奇故事》的书，读后颇有感触，从业这么多年，的确碰到过书中的很多场景，书中描绘的故事其实就是现实工作中的各类缩影。
• 04.27 13:48:34
  发表了文章 2022-04-27 13:48:34

  Node.js躬行记（5）——定时任务的调试

  　最近做一个活动，需要用到定时任务，于是使用了 node-schedule 库。

  
• 04.27 13:45:34
  发表了文章 2022-04-27 13:45:34

  跳槽后在新公司的一点感悟

  　　最近跳槽到一家创业多年的小公司，带一个前端小团队。 　　在这一个多月中，主要是熟悉业务，维护老代码，编写新业务等，期间也发现了当前团队出现的种种问题，打算在接下来的日子里好好改造。

  
• 04.27 13:43:50
  发表了文章 2022-04-27 13:43:50

  安全攻防技能30讲

  　　《安全攻防技能30讲》是极客时间上的一个关于Web安全的专栏，在学习之后特在此做记录和总结。

  
• 04.27 13:39:40
  发表了文章 2022-04-27 13:39:40

  设计模式之美（二）——设计模式

  《设计模式之美》是极客时间上的一个代码学习系列，在学习之后特在此做记录和总结。

  
• 04.27 13:21:24
  发表了文章 2022-04-27 13:21:24

  设计模式之美（一）——设计原则、规范与重构

  　　《设计模式之美》是极客时间上的一个代码学习系列，在学习之后特在此做记录和总结。

  
• 04.27 13:18:42
  发表了文章 2022-04-27 13:18:42

  数据结构和算法躬行记（8）——动态规划

  　动态规划（Dynamic Programming，DP）是指在给定的约束条件下求最优值的算法，在解决问题的过程，需要经历多个决策阶段，每个决策阶段都对应着一组状态。

  
• 04.27 13:12:35
  发表了文章 2022-04-27 13:12:35

  数据结构和算法躬行记（7）——分治算法

  　　分治算法（Divide-and-Conquer Algorithm），就是分而治之，把一个复杂问题分成两个或更多个相同或相似的子问题，直到最后子问题可以简单的直接求解，原问题的解即子问题的解的合并。

  
• 04.27 13:10:49
  发表了文章 2022-04-27 13:10:49

  数据结构和算法躬行记（6）——贪心算法

  贪心算法（Greedy Algorithm）会在每一步选择中都采取当前状态下最好或最优（即最有利）的选择，不能回退，从而希望结果是最好或最优的算法。它是动态规划的一种特例，需要满足更多的限制条件。
• 04.27 13:09:27
  发表了文章 2022-04-27 13:09:27

  数据结构和算法躬行记（5）——回溯算法

  　回溯算法（backtracking）是一个类似枚举的搜索尝试过程，在寻找问题解的过程中，当发现不满足求解条件时，就退回一步，尝试其它路径，该算法的时间复杂度都不会低于 O(N!)，复杂的例题包括正则表达式匹配、解数独等。
• 04.27 13:07:48
  发表了文章 2022-04-27 13:07:48

  数据结构和算法躬行记（4）——二分查找

  　　二分查找（Binary Search）是对一种针对有序数据集合的查找算法，依赖数组，适合静态数据。通过 n/2^k=1（k 是比较次数），可以求得 k=log2^n，因此时间复杂度为高效地 O(logn)。
• 04.27 13:04:19
  发表了文章 2022-04-27 13:04:19

  数据结构和算法躬行记（3）——二叉树

  树是一种非线性表数据结构，树的基本概念如下所列。

  
• 04.27 12:59:05
  发表了文章 2022-04-27 12:59:05

  数据结构和算法躬行记（2）——栈、队列、散列表和位运算

  　栈（stack）是一种操作受限的线性表数据结构，基于后进先出（LIFO）策略的集合类型，例如函数中的临时变量符合后进先出的特性，因此用栈保存最合适。
• 04.27 12:56:36
  发表了文章 2022-04-27 12:56:36

  数据结构和算法躬行记（1）——链表

  　　链表（Linked List）是不同于数组的另一种数据结构，它的存储单元（即结点或元素）除了包含任意类型的数据之外，还需要包含指向另一个结点的引用，后文会用术语链接表示对结点的引用。

  
• 04.27 12:28:15
  发表了文章 2022-04-27 12:28:15

  浏览器工作原理和实践（三）——页面 (下）

  　　《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列，在学习之后特在此做记录和总结。

  
• 04.27 12:24:30
  发表了文章 2022-04-27 12:24:30

  浏览器工作原理和实践（三）——页面 (上)

  　　《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列，在学习之后特在此做记录和总结。

  
• 04.27 12:18:00
  发表了文章 2022-04-27 12:18:00

  浏览器工作原理和实践（二）——JavaScript

  　　《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列，在学习之后特在此做记录和总结。

  
• 04.27 12:09:33
  发表了文章 2022-04-27 12:09:33

  浏览器工作原理和实践（一）——浏览器

  　　《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列，在学习之后特在此做记录和总结。

  
• 04.27 11:55:10
  发表了文章 2022-04-27 11:55:10

  Web优化躬行记（4）——用户体验和工具

  　　用户体验（UE/UX）是指一个人使用一个特定产品、系统或服务时的行为、情绪与态度，还包含用户对于系统的功能、易用和效率的感受，因此用户体验在本质上可以视为一个人对于系统的主观感受与主观想法。

  
• 04.27 11:50:56
  发表了文章 2022-04-27 11:50:56

  Web优化躬行记（3）——图像和网络

  　浏览器根据屏幕大小、设备像素比、横竖屏自动加载合适的图像。 　　响应式的功能可以通过srcset和sizes两个新属性实现。 　　前者可指定选择的图像以及其大小，后者会定义一组媒体条件并声明填充的宽度。 　　在下面的示例中（在线查看效果），浏览器会先查看设备宽度，然后检查sizes列表中哪个媒体条件第一个为真，再查看该媒体查询的填充宽度，最后从加载的srcset列表中引用宽度最接近的图像。
• 04.27 11:48:25
  发表了文章 2022-04-27 11:48:25

  Web优化躬行记（2）——JavaScript

  　　当变量暴露在全局作用域中时，由于全局作用域比较复杂，因此查找会比较慢。 　　并且还有可能污染window对象，覆盖之前所赋的值，发生意想不到的错误。
• 04.27 11:42:33
  发表了文章 2022-04-27 11:42:33

  Web优化躬行记（1）——CSS

  　　Web优化的对象包括页面性能、用户体验、开发效率、代码优化、网络延迟等，本系列会列举出众多常用的优化技巧，每个技巧都可深入分析，在此只做抛砖引玉。
• 04.27 11:30:04
  发表了文章 2022-04-27 11:30:04

  数据结构与算法之美（三）——算法

  《数据结构与算法之美》是极客时间上的一个算法学习系列，在学习之后特在此做记录和总结。

  
• 04.27 11:25:25
  发表了文章 2022-04-27 11:25:25

  数据结构与算法之美（二）——数据结构

  　《数据结构与算法之美》是极客时间上的一个算法学习系列，在学习之后特在此做记录和总结。

  
• 04.27 11:18:49
  发表了文章 2022-04-27 11:18:49

  数据结构与算法之美（一）——入门

  　掌握数据结构和算法，不管对于阅读框架源码，还是理解其背后的设计思想，都是非常有用的。一旦掌握数据结构和算法，之前可能需要费很大劲儿来优化的代码，需要花很多心思来设计的架构，用了数据结构和算法之后，很容易就可以解决了。

  
• 04.27 11:16:45
  发表了文章 2022-04-27 11:16:45

  面试前的准备，笔试练手感

  　现在出去面试，很多时候都会让你先做一份笔试题，而题目一般是中等偏下的水平，不会很难。 　　在面试前需要练练手感，以免在解题时没有思路。 　　练手感可以自己准备一些笔试题目，可根据自己的情况选择合适的题目，而解法可以写一种或多种。 　　还搜集了一些笔试算法总结，例如《一句话算法》、《LeetCode》相关的内容。

  
• 04.27 11:12:17
  发表了文章 2022-04-27 11:12:17

  年中佛系求职记录

  　　我从事的是前端岗位，四月中旬时投过一波，很多都是找朋友或老同事内推，但都没响应，连面试机会都没有，只得作罢。
• 04.27 11:03:41
  发表了文章 2022-04-27 11:03:41

  Node.js躬行记（4）——自建前端监控系统

  　　这套前端监控系统用到的技术栈是：React+MongoDB+Node.js+Koa2。将性能和错误量化，解决业务和开发都不知道，只有用户知道的问题，提升业务稳定性。

  
• 04.27 10:56:49
  发表了文章 2022-04-27 10:56:49

  Node.js躬行记（3）——命令行工具

  　　创建一个空目录，然后通过npm init命令初始化package.json文件，并按提示输入相关信息或直接回车使用默认信息，生成的内容如下所示。
• 04.27 10:52:41
  发表了文章 2022-04-27 10:52:41

  Node.js躬行记（2）——文件系统和网络

  　　fs模块可与文件系统进行交互，封装了常规的POSIX函数。POSIX（Portable Operating System Interface，可移植操作系统接口）是UNIX系统的一个设计标准。fs模块提供了多个操作目录和文件的方法，大多会有同步和异步两种版本，同步的方法名称会以Sync为后缀。
• 04.27 10:49:21
  发表了文章 2022-04-27 10:49:21

  Node.js躬行记（1）——Buffer、流和EventEmitter

  　　Buffer是一种Node的内置类型，不需要通过require()函数额外引入。它能读取和写入二进制数据，常用于解析网络数据流、文件等。
• 04.27 10:47:01
  发表了文章 2022-04-27 10:47:01

  前端利器躬行记（7）——自制脚手架

  　　在学习了Webpack基础后，查看别人写好的脚手架总是会一头雾水，后面就上网查各种资料，一边参考一边修改，整出了一套简易的脚手架（已上传至GiuHub和npm上），借鉴了Create React App（CRA）的目录结构（如下所示），并做成了命令行工具（已上传至GiuHub和npm上）。

  
• 04.27 10:36:29
  发表了文章 2022-04-27 10:36:29

  编译基础理论

  　　最近在读一本编译相关的书《两周自制脚本语言》，书中用Java来设计一种名为Stone的脚本语言。

  
• 04.27 10:31:33
  发表了文章 2022-04-27 10:31:33

  CSS躬行记（10）——CSS方法论

  　　方法论是一个哲学术语，会对一系列具体的方法进行分析研究、系统总结并最终提出较为一般性的原则。CSS方法论是一种面向CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定，并且在组织CSS时可提供相应的指南，从而提升代码的性能、可读性以及可维护性。本章会讲解三种CSS方法论：OOCSS、BEM和SMACSS。
• 04.27 10:29:08
  发表了文章 2022-04-27 10:29:08

  CSS躬行记（9）——网格布局

  　　网格布局（Grid Layout）也叫栅格布局，与表格布局类似，也依赖行和列。但与之不同的是，网格布局能直接控制HTML文档中元素的顺序、位置和大小等，而不用再借助辅助元素。

  
• 04.26 22:11:18
  发表了文章 2022-04-26 22:11:18

  CSS躬行记（8）——裁剪和遮罩

  裁剪（clipping）能让元素显示指定形状的区域，在布局时可起点缀的作用，丰富了视觉呈现。注意，裁剪本质上只是让元素的部分区域透明，由此可知，裁剪完后元素所占的空间仍旧会保留。裁剪最早是在CSS 2.1时代由clip属性引入，但该属性只能应用于绝对定位的元素，并且只能裁剪成矩形。CSS3提供了强大的clip-path属性，突破了clip属性的众多限制，接下来将围绕clip-path属性展开讲解。

  
• 04.26 22:11:08
  发表了文章 2022-04-26 22:11:08

  CSS躬行记（7）——合成

  　　在图形编辑软件中，可以按特定地方式处理不同图层的合成，最新的CSS规范也引入了该功能，并提供了mix-blend-mode和background-blend-mode两个属性。混合模式（blending mode）是一种数学算法，可计算元素重叠部分的颜色值，目前已定义了十多种不同的混合模式。

  
• 04.26 22:10:59
  发表了文章 2022-04-26 22:10:59

  CSS躬行记（6）——滤镜

  　滤镜（filter）可改造元素的视觉呈现，CSS内置的滤镜有10种，通过SVG文件还能自定义滤镜。

  
• 04.26 22:10:49
  发表了文章 2022-04-26 22:10:49

  CSS躬行记（5）——渐变

  　　渐变是由两种或多种颜色之间的渐进过渡组成，它是一种特殊的图像类型，分为线性渐变和径向渐变，这两类渐变还会细分为单次和重复两种。渐变图像与传统图像相比，它的优势包括占用更少的字节，避免额外的服务器请求，调试成本更低等。在平时，发挥自己的想象，利用渐变可以创造出许多奇妙的视觉特效。

  
• 04.26 22:10:39
  发表了文章 2022-04-26 22:10:39

  CSS躬行记（4）——浮动形状

  　　CSS规范新增了一个模块：CSS Shapes，shape-outside属性属于该模块，它能影响浮动元素周边内容流的形状（即浮动形状），可接收三类值：形状盒子、函数和图像。

  
• 04.26 22:09:15
  发表了文章 2022-04-26 22:09:15

  CSS躬行记（3）——CSS属性拾遗

  CSS躬行记（3）——CSS属性拾遗

  
• 04.26 21:54:33
  发表了文章 2022-04-26 21:54:33

  CSS躬行记（2）——伪类和伪元素

  CSS躬行记（2）——伪类和伪元素

  
• 04.26 21:48:45
  发表了文章 2022-04-26 21:48:45

  CSS躬行记（1）——CSS基础拾遗

  CSS躬行记（1）——CSS基础拾遗

  
• 04.26 21:42:37
  发表了文章 2022-04-26 21:42:37

  微前端

  内容引用自《前端架构：从入门到微前端》第9章。 微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。 微前端的实现意味着对前端应用的拆分。拆分的目的并不只是为了在架构上好看，还可以提升开发效率。比如10万行的代码拆解成10个项目，每个项目1万行，要独立维护每个项目就会容易得多。
• 04.26 21:37:02
  发表了文章 2022-04-26 21:37:02

  CSS重构：样式表性能调优

  　　这两天窝在家里又看了本CSS相关的书：《CSS重构：样式表性能调优》。重构是指在不改变代码行为的前提下，重写代码，使其更加简洁、易于复用。

  
• 04.26 21:36:42
  发表了文章 2022-04-26 21:36:42

  让流量倍增的网站优化方法

  本书详细讲解了网站分析工具获取的各种数据。另外，也讲解了如何根据这些数据分析网站状况，以及如何根据分析结果拟定改进策略。

  
• 04.26 21:36:31
  发表了文章 2022-04-26 21:36:31

  首次录制教程视频

  　　前几天有个朋友邀请我录个教程视频，一开始不想搞，后面想想在家也没事干，尝试下也不错。录了一段TypeScript的简单介绍，虽然只有18分钟，但整整搞了两天才完成。

  
• 04.26 21:36:19
  发表了文章 2022-04-26 21:36:19

  三天搭建博客，包括文章迁移

  　　这两天心血来潮，突然想搭建一个博客，域名和主机早就买好了。以前就想搞，不过自己太懒了，就一直拖着，这次总算是实现了自己多年未完成的目标。

  
• 04.26 21:35:48
  发表了文章 2022-04-26 21:35:48

  网站优化的艺术与科学之实战

  本文承接上一篇《网站优化的艺术与科学之工具和基础知识》，将实战分析网站的部分页面。