组件设计剖析（前序）本文是该系列的开篇一，在开始前，我想聊聊这个系列将做什么、希望达成什么样的目标，以及未来如何不断挖坑。 市面上有非常多的独立组件、组件框架，身为开发者我们最常做的是被市场调教 API 使用习惯，我们会局限于一类常用的组件暴露出来的使用方式而难以去适应另一类组件，就像是一个个社交群，如果你一往而深地融入 A ，就难以去接受 B ，而你创造的文化（组件）也在不断的加深这个文化圈。身处“改变世界”伟大理想的一名壮士，我们需要一起去探索各种组件设计及架构的“同”与“不同”，探索那些历史遗留的不好，挖掘那些新兴的好、复古的好，辩证看那些组件设计中的“纠结点”，给更多基础建设开发者参考，让整个大社群往更好的方向走。因为在这个当下，很多“好”是不被习惯的，它需要时间给予变迁。 想借这个系列，跟大家一起去多看看各种组件的设计思路， 我们很难界定组件建设到底属于基础建设还是业务复用性封装，从大环境来看，越是基础的建设越是稳定，而越是接近使用层，那些更需要考虑人性化的东西越是百花齐放。我们在经验中也发现，公司的业务项目更多地选择自己创造组件，而后台项目则会更多使用市面上的框架，有的框架 ...

2019年，工作的第四年，回顾这一年在生活和想法上都有了太多的变化，有了更多想做的事情，希望在这不太平的2020，吐故纳新，能按照自己规划的80%完成就心满意足啦。整理回顾我的2019最重要的5件事。 理财踏入了一只脚今年总算是在理财方面，有了一颗安定的心，虽然明白自己有很多无知，经验方面更是缺少，但有了安抚自己心理的方式，明白之后适合自己的方向策略可以是怎么样的。今年在理财上尤为大的收获，其实就是在心理的舒适感吧 —— 不为回撤担心，不为追盈焦急，为自己划定我能收获的范围，并反思策略而非我自己。 2018 炒股之旅2018年开始随着部门氛围小小试着炒了股，折折腾腾半年多回了本，自觉炒股这事不适合我。  一是实在没时间去盯盘。 二是这心理战着实难受，涨了想等再涨那么几毛，跌了又想等它U型回来，太太难了。我们总说炒股亏7平2赚1，亏了就安慰自己学费，谁还没为炒股交过点学费呢。但看看部门的前辈们经历了牛市还亏在里面出不来的，我放弃了，我虽然也是自信我是那“赚1”的，但没时间盯盘对吧，算了吧（摊手）。 三是从我观察来看，公司里那几位赚着的“牛人”都在特定领域和策略的深入研究 ...

What is JWT JSON Web Token(JWT) 是一种基于json格式的创建 token 的开放标准 RFC 7519，常用于进行客户端与服务端的权限验证或是信息交换。 在我们熟悉的客户端权限验证方案中，通常有两种 用户登陆验证后服务端将权限凭证( seesionId 放在 cookie 中，每一次请求都会对请求自带的 cookie 进行校验 用户登陆验证后将权限凭证 token 返回给客户端，客户端将 token 存储在本地，之后的每一次请求需要将 token 携带（通常约定在 header 中），服务端在返回期望结果前先对 token 进行校验 JWT 是 token 方案中一种，对格式进行约定的规范。 该方案明显的优点是可扩展性强、跨域支持。   接下来会从以下几个问题来聊聊 JWT 验证流程是怎样的？ JWT 的基本格式与 Node 实现 cookie 方案与 token 方案的特点   验证流程 客户端在用户通过个人信息登陆成功后从服务端获取到一个登陆凭证 JWT token ，通常 token 需要 ...

问题在 Dockerfile 的指令中，有一个WORKDIR 指令，我们知道它是用来设置工作目录的，但常年使用的 cd 一样好用。反正只是切换个路径，看起来也无伤大雅，对吧。 我们真的理解 WORKDIR 指令吗？ 123# Dockerfile with cdRUN mkdir myproject && cd /myprojectRUN something? 123# Dockerfile with WORKDIRWORKDIR myprojectRUN something? WORKDIR(1) 能创建不存在的路径WORKDIR 可以和 cd 起到同样的作用，并且更好的是在切换路径的同时如果目录不存在会自行创建。 设置 WORKDIR 后的操作都会基于这个路径，同时它也可以基于相对路径不断切换 。 1234WORKDIR /aWORKDIR bWORKDIR cRUN pwd 输出结果会是 /a/b/c (2) 可以使用环境变量WORKDIR 还可以搭配环境变量使用 123ENV DIRPATH /pathWORKDIR $DIRPATH/$D ...

听说糙着干活的只靠 px 和 % 闯天下，不知道在看文章的你是不是也是其中一员，哈哈哈哈 都 9102 年了，移动端 em 和 rem 霸占天下，总会有人问你两者的区别；vw 和 vh 也展露头角，拥护者与日俱增；css3 中还有新增的计算函数 calc() ，又或是 CSS 变量再配合 JS，真的是越来越强大了！ em 和 remem 和 rem 是配合 flexible 方案非常火的一种相对单位， 虽然该方案已经凉了，但依然是当前兼容性最好的可伸缩布局方案。 从 em 和 rem 的含义上来说， 1em 表示与当前元素字体的宽度，准确来说是一个大写字母M的宽度 1rem 则表示默认字体大小的宽度，同样实质上也是一个大写字母M的宽度 两者的差别只是 rem 总是以根节点 (html) 的字体大小作为参考，你看命名 rem 就是 root em，而 em 则以当前元素的字体大小作为参考。 而 flexible 方案的实质，就是 hack 实现根据不同设备 dpr ，动态改写 标签以及 标签的 data-dpr 属性 和 font-size 值。这样达到的效果就是不同设 ...

回顾记 《深入浅出》系列的开篇有这样一段教学原则，我认为是非常好的教学指导，适用于传授知识点的任何形式，不管是博文、演讲。 以下是我摘录的原文 我们认为该系列图书的读者都是学习者   下面是部分深入浅出(Head Flrst)教学原则 将知识图形。 图形比单调的文字好记得多，可以提高学习效率(记忆学习和转移学习的学习效率最多能提高89%)；图形还能让知识更容易理解，相比将文字放在页脚和下一页，将文字放在相关图形当中或图形周围，学习者成功解决相关问题的可能性将成倍增长。 采用对话式的个性化风格。 最近的研究表明，要是回避一本正经的语气，代之以对话段的风格，以第一人称平易近人地给学生上课，学生的课后测验成绩最多可提高40%。多讲几个事，少来一点高谈阔论，语气宜随和。别太郑重其事。想想看，一局笑语喧哗的晚宴和一场演讲，哪一样更让你惦记? 引导读者深入思考： 换句话说，除非读者主动调动自己的神经元，否则脑袋里不会发生什么大变化。只有激发读者的兴趣，引起读者的好奇，刺激读者的灵感，读者才能解决问题，得出结论，获得新知识。为此，讲授者要设计各种难题、练习，提出引人深思的提问，还 ...

刚把 github pages 自定义 404 页面搞定了，这样博客的 404 页面就都跳这个啦~ 也开源了这个 404 Page，好看的！快来用！不依赖任何框架！ Github地址 Demo   这个是白色皮肤 ↓ 这个是黑色皮肤 ↓   虽然你们看到上面效果很和谐，实际这个动画还是搞了一会的，经历了不少版本到了这个效果 看看这是我第一版，什么鬼 跟预期完全不一样 第二版 N版之后总算满意    特别说明：这个项目的样式是复刻的这个页面，作者原项目是 react 架构。

问题描述&解决远端重置 SSH 后，连接失败，提示错误内容如下 1234567891011@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!Someone could be eavesdropping on you right now (man-in-the-middle attack)!It is also possible that the RSA host key has just been changed.The fingerprint for the RSA key sent by the remote host is 36:68:a6:e6:43:34:6b:82:d7:f4: ...

今天反爬服务遇到一个问题，业务方的页面A中的iframe页面B引用了反爬JS但是B页面一直获取不到cookie信息而被反爬服务拦截，现象在IE容器内可以重现，一开始以为 form 表单提交在 IE 下造成的 (前不久遇到过 from 表单提交在 chrome49内核下遇到弹窗问题留下对 form 的阴影吧 …)，之后定位到是页面B无法写入B域名的cookie。根本原因正是由于 隐私首选项 (Privacy Preferences Project) 这个协议，以下简称 P3P。 P3P 限制什么当前页面在跨域的请求中无法设置cookie，包括 iframe、script、img 具体场景如： A.html 中引用 iframe（B.html），B.html设置B域的cookie无效 P3P 实现方(兼容) P3P为一项互联网标准，是为方便各网站以统一的网站隐私权政策格式为用户提供网站隐私权政策的表述，是一个允许网站声明其对收集自用户网页浏览器的信息的预期用途的协议。它由万维网联盟（W3C）开发，并在2002年4月16日被正式推荐，设计意图是给用户对自己在网络浏览时流露的个人信息更多控制。 ...

今天介绍一个新的属性 - Number.EPSILON 用来表示 JS 中计算时的误差范围。 这个属性是 ECMAScript 2015 (6th Edition, ECMA-262) 开始支持的，兼容性上 IE 至今未支持.. EPSILON属性的值接近于 2^-52，表示1与大于1的最小浮动数之前的差值。 可以这么理解，它表示JS下进行计算时的最小精度，如果误差小于这个值可以认为没有意义。 &nbsp; 利用 Numer.EPSILON 可以解决精度计算误差的问题，比如经典的 0.1 + 0.2 != 0.3 1234x = 0.2;y = 0.3;z = 0.1;equal = (Math.abs(x - y + z) < Number.EPSILON EPSILON（ε0）在数学中是序数，表示最小的数字 Q1. 精度运算问题中，为什么 0.1+0.2 != 0.3, 0.2 + 0.2 == 0.4 ? 这就涉及到计算机组成原理中关于数据存储的问题了，0.1+0.2 的计算步骤为 123456// 0.1 和 0.2 都转 ...