群里跟人斗图的时候，有没有碰到这样的？

这时候没有图咋办？总不能真退群啊，但是又没图可以斗，于是乎~

唉，尴尬不尴尬，斗图拼的就是时效性，等你找到，黄花菜都凉了。于是乎，这篇博客就应运而生了

我会那么肤浅，直接把文字贴到图片上就算了？

你是喜欢下左边的图当表情还是右边的图？

是我就选右边，为啥？当然是因为高清的表情包是没有灵魂的，咳咳，当然是因为这个啦

日历控件基本上所有的前端都会用到，而且我相信8成的JSer都是直接把开源的组件拿来用，很多设计师似乎跟开发们也有默契，对日历控件只要能用就行，样式啥的不做太多要求，但是某些设计师就是有强迫症，一定要你按着TA的设计来，保不准产品也要舔一把火，往日历里塞些稀奇古怪的业务，咋办？初级开发可能就去网上找符合要求的控件，然后拼命说服他们；普通的开发就可能直接在已有的控件上修修补补，除了问题再回炉重造；高级的开发直接怼回去：什么J8需求，不接！顶级的程序员呢？当然是一言不合直接造轮子啊（笑。

先放最终效果，审美有限，将就着看吧~

先不管js或是jquery怎么写，咱先把日历的样子搭出来

今天玩一些新的东西，大家都没有看过这样的视频：

bad apple 字符版

或者 这样的图片：

网上有很多生成这种图片/视频的工具，但是每个程序员都有一颗造轮子的心，我们当然要玩出自己的花样啦。老规矩，还是先讲原理，建议先用自己的方式实现一遍。原理很简单首先准备一组排好序的不同 “着色密度 ” 的ascii字符（事实上你可以用任何字符），比如 #KDGLftji+;,:. ，接着将源图转为灰度图，然后遍历图中的像素，根据r/g/b通道的值来匹配字符串中相应 “着色密度 ” 的字符，值越小则颜色越深，字符的“密度”也应越大。如果需要保留颜色，只需将灰度图和原图的像素位置一一对应即可。在开始实现功能之前，我们需要先了解一下颜色矩阵（ColorMatrix）。在计算机中，每个像素的颜色可以用一个向量（有的文章也叫矢量或分量）矩阵表示：[R, G, B, A]。颜色变换矩阵通常是用一个5x5的矩阵来表示，和空间中一个n维向量的平移变换需要用一个n+1维的矩阵来表示一样，颜色矩阵也需要引入一个齐次坐标来进行“平移操作”。以下是一些常见的颜色变换矩阵：

<canvas>元素是众多广泛使用的网络2D图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而，随着网站和应用将canvas画布推至极限，性能开始成为问题。此文目标是给使用canvas画布元素的优化带来建议，去保证你的网站或者应用表现卓越。

当想要确认元素的宽高时有几种属性可以选择，但是我们很难确认使用哪个属性才是最适合的。本文将帮助你做出正确的选择。

元素占用了多少空间？

如果你需要知道元素总共占用了多少空间，包括可视内容、滚动条（如果有的话）、内边距和边框的宽度，你会使用 offsetWidth 和 offsetHeight 属性，大多数情况下，当元素没有什么形状上的变化时，他们与 getBoundingClientRect()的宽高一致。但是如果发生变化，offsetWidth和offsetHeight将返回元素的布局宽高，而getBoundingClientRect()将返回实际渲染的宽高。例如：如果元素的宽width:100px,变化transform:scale(0.5)，此时getBoundingClientRect()将返回宽50，而offsetWidth将返回宽100.

本文你将学到:

1. Rollup 是什么
2. CommonJS、AMD、CMD、UMD、ES6 分别的介绍
3. ES6 模块与 CommonJS 模块的区别
4. 模块演进的产物 —— Tree Shaking
5. Tree Shaking 应该注意什么

事件委托（代理）是什么，有什么好处我就不多赘述了，经过jQuery时代的朋友们一定知道 live、delegate、on这些方法，他们的核心都是利用js事件的冒泡机制。如今的前端越来越依赖Vue、React、Angular等高级框架，似乎不再需要这种远古的事件机制，但是这些重型框架不是所有的场景都使用，或者有时候即使用到了它们，也会有频繁在dom上手动绑定事件的情况，总不能为了这点小功能把更重的jQuery引入进来吧。
话不多说，HERE WE GO !
假设有一个父元素（id=parent）和一个子元素（id=child），中间可能隔了几代dom，我们想把 #child 的事件冒泡到 #parent 上，可以这么做：

继续填坑，本文会稍微提一些webgl的基础，不会做过多介绍，看官们请先准备要一定的基础知识。
webgl要实现前面的例子方式有很多，比如
给一个矩形平面添加多个顶点，然后在顶点着色器中，在xy平面上移动顶点位置；
或者移动顶点的z分量，再左乘视图矩阵；
或者只使用四个顶点来创建矩形，然后在片元着色器中对uv进行偏移等等。
我这次只讲第一种，下面几个方法玩个坑以后在填吧~

本讲我们在上一讲的基础上，给旗子添加高光，使其看起来更加有立体感。我会用两种方式来分别实现这个效果，然后比较一下优劣，还是先讲原理。

方法一：在原来的代码drawImage之后通过 fillRect 函数来增加一个白色蒙层，通过透明度的递增和递减来模拟。具体多少透明度？当然你可以用数学的方法来求导计算出某一点的斜率，根据其大小和正负得出其透明度大小，斜率越大，透明度越小。这里用一种更取巧也效率更高的方法，即保存某一点前一个点的y轴坐标，与该点的y坐标相减，即可得到斜率的相对大小，因为两点之间的x轴上距离都是1px，所以y轴变化越大，|斜率|则越大。

这里是本系列的第二讲，上一讲不知道大家自己试过了没，虽然整体效果差强人意但是并不算完美。本讲我们先用那个canvas2D把上一讲的效果实现一遍。

还是先讲原理，动手能力强的童鞋可以看了原理自己去鼓捣。
设有三角函数 y = Asin(ωx+φ) ，

1. 第一步，我们要先利用高中的三角函数知识来计算出旗帜飘动（类似简谐运动）的第一帧 (设初相φ=0) 的曲线，
   假设我们有一张图片，宽高分别为W、H，该图片包含n个周期，最大振幅为A，可得波长 λ = W / n ，ω = 2π / λ ，即可得出我们的三角函数：y = A · sin( 2π / λ · x ) ；
2. 第二步，在W次循环中（逐像素），使用drawImage函数 来画出宽度1，高度H 的图片。

hello，民娜桑~~我又来开新坑了(￣ε(#￣)☆╰╮o(￣皿￣///)，这次尽量保证把这个坑填完~

本系列我会分四篇来完成主题，分别是① DIV+CSS的实现，② canvas2D的简单实现，③ canvas2D的进阶实现，④ webgl+着色器的实现 以及 ⑤ 包装成jquery插件并发布为npm模块 。

通常如果一样东西需要编码，说明这样东西并不适合传输（???存疑）。原因多种多样，如Size过大，包含隐私数据，对于Url来说，之所以要进行编码，是因为Url中有些字符会引起歧义。

例如，Url参数字符串中使用key=value键值对这样的形式来传参，键值对之间以&符号分隔，如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&，那么势必会造成接收Url的服务器解析错误，因此必须将引起歧义的&和=符号进行转义，也就是对其进行编码。

这篇文章还是秉承我的写作习惯，虽然标题是谈iconfont，但是我仍然是想到啥说啥，夹杂一些自己的私货，看官们不要介意。废话不多说，咱们先从阿里巴巴矢量图形库放几个图标到项目中，然后下载项目里的图标，网站会帮你生成一些css、html、js文件以及字体文件，然后咱们看着这些代码慢慢进入本次主题：iconfont。

解压缩阿里图标库下载的文件：

好久以前写过使用微信js-sdk实现自定义分享的功能。这次来填坑，把获取用户信息的功能给实现了。由于上次关于微信的文章比较久远了，这次全都换成了更简洁的koa来实现，基本逻辑不变。

为了快速帮大家理解，这次的demo就直接修改公众号官网的示例代码来给大家演示。如果大家不想听我啰嗦，可以直接移步官方文档——https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115。

she says <h1> is large or she says <h1> is large
相信做过前端的小伙伴们都写过图片上传，最简单的方式是通过表单提交，一个<input type="file">加一个**<button type="submit">**，外面包一层form就搞定了。（button默认的type是submit，这里可以省略，之所以特别写出来，是因为以前碰到过form标签里面写了一个<button>标签，一点击就莫名奇妙地把表单提交了，希望大家引以为戒）

刚好工作中需要在网页中对接微信的一些接口，以前没玩过，为了比较透彻地了解微信的授权流程以及各个参数的意义，就自己试着搭建了一下前后端的demo并记录下了详细的步骤。

微信测试是一个相当麻烦的事，因为他需要一个外网可以访问的服务器，如果公司里面没有专门给微信搭建一个测试服务，那么对前端来说，没有外网权限的微信调试就是一场噩梦。

提问：

@ WestLangley：

我正在给某网站开发一个简单的3D全景浏览功能。考虑到移动端的性能，我使用了three.js的CSS3 renderer。它需要一个由六张图组成功立方体贴图。

我用iPhone上的“Google Photosphere”（或其他类似的app）创建了一个2:1的柱形全景图，然后用这个网站（需要Flash）把柱形全景图转换成了立方体全景图。

Nginx是一个非常好用的HTTP和反向代理服务器，但是如果你在开发过程中严重依赖nginx，频繁修改配置文件，是不是觉得每次双击nginx.exe，任务管理器中结束进程 的方式效率又低又土？今天我们就用更geek的方式来操作nginx——将其安装位为windows服务。

瀑布流一般的常见的需求有这三种，一是每列固定宽度，这种比较常见，比如花瓣网；另一种是每行固定高度，这种少见一些，典型的例子是百度图片，bing，谷歌图片，还有一种是宽高都不确定，这种需求就比较奇葩了，我们仅讨论第一种瀑布流。

实现这类瀑布流一般的做法是维护一个包含不同列高的数组，先排列第一行，初始化这个数组以后，然后后面的图片（或者是图片的容器）通过绝对定位来排列到最短的列上，并更新数组，随后下一个元素做相同的操作。当窗口尺寸变化怎么办呢？最偷懒的是初始化时就写死容器宽度，当页面太小就出现横向滚动条，这种没啥难度；或者每次修改尺寸就刷新一下页面，可能有些人会嗤之以鼻，还真有大厂这么干，微软的bing搜索的图库就是这么做的；