o_heart

这两天在学习koa-template（带有KoaJS的Nuxt.js的入门模板），看着蛮简单，对照着koa-template上面说的步骤做了. 果然，很顺利的出现了如下界面.隔了一天再打开，莫名奇妙的报错了，what? why? ...

今天刚好要做一个好多div格子错落组成的布局，不是田字格，不是九宫格，12个格子这样子，看起来有点复杂。关键的是笔者有点懒，要写那么多div和css真是不想下手啊。多看了两眼，这布局不跟网格挺像吗？css grid好像就是长这样子的？会不会很简单呢？反正也不熟，实在不行就当学习了。说干就干，说不定能偷点懒呢哈哈～

最近皮神火了，萌萌哒，很阔耐。那么用css能不能画个皮神呢？赶紧来试一下吧～

z-index是一个CSS属性，允许您将图层中的元素放在彼此的顶部。不幸的是，z-index是那些并不总是以直观方式表现的属性之一。 一开始似乎很简单，更高的z指数表示该元素将位于具有较低z-index数的元素之上。 但是有一些额外的规则会使事情变得更加复杂。 并且你不能总是通过将z-index设置为999999来解决问题！

编写一个chunk函数，将数组拆分成多个 size 长度的块，并组成一个新数组。 如果数组无法被分割成全部等长的块，那么最后剩余的元素将组成一个块。

当我们发布了新版本，因为缓存的缘故用户使用的小程序可能还是旧版的，于是我们就有了提醒用户更新版本的需要。小程序提供了UpdateManager对象，用来管理更新，基础库 1.9.90 开始支持，低版本需做兼容处理。

使用video标签实现简单的视频展示，关键点是封面的设置和视频在当前区域的播放，自定义封面图和播放按钮，覆盖在原生视频标签的上面。最终实现的效果如下图所示：踩坑小记：问题：视频封面在个别浏览器显示不全解决：不使用video标签默认的poster属性，自定义封面和播放按钮。问题：视频在微信浏览器点击全屏播放，不能在当前区域播放解决：通过设置x5-playsinline="true"实

不应该啊，哪来的病毒？可怕。。今天正浏览器一个下载mp3网站，看着看着突然打开了一个新网站，这不是苹果官网吗？而且电脑还发出了两声Apple特有的警报声，吓坏宝宝的节奏~ 我刚开始竟然点了确定，然后点了Scan Now按钮，后来这个网站自动分析了半天，貌似在清理病毒。后来又跳转页面了，下载啥东西好像，看着有点不太对劲儿。机智的宝宝打开apple官网对比了下，结果这盗版网站类开头跟苹果的域...

当涉及到调试您的前端Web应用程序时。 控制台控制台有一个API，提供了许多方法，使调试更容易。 开发人员使用console.log（）或console.dir（）来调查问题并不罕见; 但开发人员工具控制台还有更多功能可供使用，console.trace来追踪调用栈、console.profile分析性能、console.time计算时间、console.warn输出警告信息….. 这里对...

  大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。那么利用css如何实现多行省略号呢？利用-webkit-line-clamp属性（WebKit的CSS扩展属性-WebKit是私有属性）是可以实现的，但是只适用于webkit浏览器和移动端。另外可以利用伪类配合定位实现，这个兼容性好一些。利用-...

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Array.from方法可以将 Set 结构转为数组。 例如：const items = new Set([1, 2, 3, 4, 5]);const array = Array.from(items);利用这些特点可以得出两种数组去重的方法： 方法一：利用展开运算符和Set成员的唯一...

声明提升就好像把声明（变量声明和函数声明）从它们所在代码中出现的位置移到了最上面。直觉上我们会以为JavaScript代码是由上到下一行一行执行的，但实际上这并不完全正确，还要考虑声明提升的存在。1. 考虑下面关于变量声明提升的代码：a = 2;var a;console.log(a); // ?？按照由上到下一行一行执行的思路：var a 声明在 a = 2 之后，所以a...

立即执行函数(IIFE)，可以看做是一个自调用的匿名函数。例如：var a = 2;(function (){ var a = 3; console.log(a); // 3})();console.log(a); // 2通常我们使用的具名函数调用都是形如fn()，函数名加上一个括号执行的； 例如：function fn(){ co...

首先让我们思考一个这样的题目；假如有一个数组arr = var arr = [1, [2, 3, [4]]];，我们怎么能把arr变成[1, 2, 3, 4]呢？即让多维数组降维，转换为只有一层的数组；如果用过lodash的话，我们知道 flatten 和 flattenDeep 方法都可以实现.

MDN中bind是这样定义的： bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。由此我们可以看出bind 函数的两个特点： 1. 绑定this，返回一个新函数 2. 可以传入参数 (可以预传参，只需要传入剩下的参数)

在箭头函数出现之前，每个新定义的函数都有它自己的 this值（在构造函数的情况下是一个新对象，在严格模式的函数调用中为 undefined，如果该函数被称为“对象方法”则为基础对象等）。 ES6 引入了支持this词法解析的箭头函数（它在闭合的执行上下文内设置this的值）。

“一如前端深似海，不思量，自难忘“。作为前端菜鸟的我，这几天面试了几家公司，或好或差或矬，心情五味杂陈，想写点什么记录下，也算对这一周收尾了，嘿嘿。本来想起个对待面试的心态的标题，但又感觉想说的不仅仅是心态；脑海中浮现一个词“姿态“，好像意义更广泛写，那就它吧。百度百科里说：姿态是指容貌神态，样子，风格，气度等。语出三国魏阮籍《咏怀》之五五：“委曲周旋仪，姿态愁我肠。”。嗯，看来还是.....

nodejs中使用bcrypt加密bcrypt简介bcrypt算法相对来说是运算比较慢的算法，在密码学界有句常话：越慢的算法越安全。算法越算，黑客破解成本越高.通过salt和const这两个值来减缓加密过程，ta的加密时间（百ms级）远远超过md5（大概1ms左右）。对于计算机来说，Bcrypt 的计算速度很慢，但是对于用户来说，这个过程不算慢。bcrypt是单向的，而且经过salt和cost的处

上一篇文章中以相册为例，介绍了图片预加载的预先加载。这次将对图片预加载的延迟加载（或者说是按需加载）进行相关介绍。