回顾记 《深入浅出》系列的开篇有这样一段教学原则，我认为是非常好的教学指导，适用于传授知识点的任何形式，不管是博文、演讲。 以下是我摘录的原文 我们认为该系列图书的读者都是学习者   下面是部分深入浅出(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 都转 ...

博客现在用的评论是 Valine, 是一款基于 Leancloud 的快速、简洁且高效的无后端评论系统。看配置什么都挺简单的，也有不少教程，本来没想写这个，但实际在访问量统计这个功能上遇到不少问题（仍然是需要一定开发工作的），找到的教程都挺乱，干脆自己重新梳理下了。 Before. 配置好 Valine先参照 Valine官网教程 把应用配置好，不要遗漏安全域名，至此你的评论功能应该已经好了。 如果你不需要评论功能，或者不需要 Valine 来实现评论功能，可以跳过引用 Valine，但仍然需要创建好 Leancloud 的应用。 Start.访问量统计|前因虽然 Valine 文档中说明从 v1.2.0 版本开始支持了文章阅读量统计 new Valine({ el:’#vcomments’, … visitor: true // 阅读量统计})&nbsp;如果开启了阅读量统计，Valine 会自动检测 leancloud 应用中是否存在Counter类，如果不存在会自动创建，无需手动创建~&nbsp;Vali ...

在使用 ZRender 过程中遇到的一些问题… 基础链接： ZRnder 文档 ZRender github textLineHeight 行高配置无效在家实测 4.0.7 已经修复了这个问题，在公司用的 4.0.4，看了下 commit 记录 官网是在 4.0.6 修复这个问题的，是由于代码中对传入配置优先级的取舍导致的 12不再维护{% codepen OqVgGb js,result 300 100% ldinglding dark %} 多行( \n ) + 超出省略( outerWidth ) 扶额 … 从测试代码看没有问题，可以实现多行时仅最后一行出省略符…的效果，那应该是我这块的宽度计算 outerWidth 有问题（我这边做的处理是根据传入的文本计算换行、自适应宽度、自适应高度、超出最大限制后出省略符） 12不再维护{% codepen LaVjMR js,result 300 100% ldinglding dark %} 事件到底如何使用上手的时候看文档是 zrender.Eventful.on ，就去查 Event ...

在不算多功能需求中，我们会遇到需要用JS来计算字宽高的情况，比如 canvas根据渲染文字计算换行、块的大小等 IE8及以下双行并且有省略符… 文字少的时候居中，文字超出的时候出省略符… 通常，我们采用建立伪节点来计算  123456789101112131415161718192021// 参数配置的形式function getTextSize (text, style = {}, container = document.body) {  let dom = document.createElement('div')  // dom.id = 'YOUR_SCOPE_measure'  for (let attr in style) {    dom.style[attr] = style[attr]  }  dom.style.opacity = 0  dom.style.display = 'inline-block'  dom.innerText = tex ...

定义问题既然要让计算机打乱数组，我们得先定义下“打乱”是什么？ 让一个数组内的元素随机排列 &nbsp; 那么，你怎么定义 随机 ？ 要知道在计算机软件层面只能通过各种算法产生伪随机数，真正的随机必须结合物理和硬件来实现，比如可以根据周围电磁场的噪音生成之类 &nbsp; 所以稍稍修改下目标： 让一个数组内的元素随机排列，并且每种排列结果尽可能少偏差 制定方案我们有那些随机打乱数组的算法呢？ 1. sort + random1arr.sort(function() {return .5 - Math.random()}); 运行结果 ↓(橙色正偏差，紫色负偏差，全部接近白灰最佳) 从结果看来这种算法并不好，究其原因，各浏览器 sort 的实现为了追求效率，并不会每两个元素都能进行比较和置换，那么可能性的分布就已经很不均了。 2. map + sort + random1234var random = array.map(Math.random);array.sort(function(a, b) { return rando ...

一、有哪些场景 由 XMLHttpRequest 或者 Fetch 发起跨域 HTTP 请求 Web FONT （CSS @font-face） WebGL 贴图 canvas API 中的 drawImage CSS 中的资源请求 二、简单的 CORS 实现在跨域 AJAX 请求中， 浏览器端无需做任何操作，会自动在 header 信息中添加一个 Orgin 字段；如果是 Fetch ，则需要添加字段 mode: 'cors' 。 1234567891011GET http://square.10jqka.com.cn/usercenter/strategy/getrecommendlist HTTP/1.1Host: square.10jqka.com.cnConnection: keep-alivePragma: no-cacheCache-Control: no-cacheAccept: */*Origin: http://www.10jqka.com.cnUser-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) ...