前言

熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js，Fabric 算是一个元老级的 canvas 库了，从第一个版本发布到现在，已经有 8 年时间了。我近一年时间也在项目中使用，作为用户简单说说感受：

1. 方便，只有想不到，没有做不到
2. 源码写的真好，代码规范，注释清晰
3. 社区真匮乏，国内资源尤其少
4. 看文档不如看源码

优缺点都很鲜明，但总的来说，如果你要做一个在线编辑类的项目，比如在线 PPT，在线制图等应用，fabric 绝对是个很好的选择。

那么这一系列文章要写什么？这里不会主要介绍如何使用 fabric，主要写的内容是把在阅读源码过程中，把涉及到原理相关的知识总结出来，比如相关图形学知识、canvas 相关、fabric 中的设计思想等的相关知识。所以，如果你现在还对 fabric 不是很了解，建议先去官网找几个 demo 试一下。

下面我们进入这次的正题，这篇文章主要介绍 fabric.canvas 涉及到的部分内容。

阅读全文 »

具体实现参见：demo

实现原理简介

上传： FormData + ajax

文件预览

canvas 读取生成 image

压缩图片上传：

原理

canvas.toDataURL实现压缩

阅读全文 »

划重点：

• 三个概念：(state, action) => state
  • store
  • action，例如：{type: 'COMPLETE_TODO',index: 1}
  • reducer，只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。
• 三个原则：单一数据源，State 是只读的，使用纯函数执行修改

阅读全文 »

Express中的 Session 是怎样工作的？

本文转载自：众成翻译 译者：郑 farmer 链接：http://www.zcfy.cc/article/3342 原文：http://nodewebapps.com/2017/06/18/how-do-nodejs-sessions-work/

每个 Web 应用都会维护 Session，作为开发人员，我们需要知道怎么合理的使用它们。

本文将会介绍以下几个方面：

• 什么是一个会话（Session）？

• Session 是怎样存储数据的？

• 如何选择存储 Session 数据的方式？

• 使用 Session 时需要避免哪些安全隐患？

想获取更多代码示例，可以参考 session npm module，这可能是最通用的 Session 库。

阅读全文 »

Node.js 8 中的重要新特性及优化

本文转载自：众成翻译 译者：郑 farmer 链接：http://www.zcfy.cc/article/3321 原文：https://blog.risingstack.com/important-features-fixes-node-js-version-8/

随着 Node.js 8.0 版本的发布（5月30日下午12点发布），我们得到了最新的 LTS 版本，具有一系列新功能和性能改进。

本文我们将介绍 Node.js 8.0 版本中重要的功能和修复。

与以前的 Node.js 版本相比，8.0.0相当强大。虽然这其中有些还正在进行，很多正在商榷。但基本上是稳定和可测试的

• James M Snell（@jasnell）2017年5月30日

新版本的代号是 Carbon。Node 8 将从2017年10月起成为现行的 LTS 版本，并将保持到2019年12月31日。这也意味着 Node.js 6.x 版本将在 2018 年 4 月进入维护模式，并在 2019 年 4 月废弃。

你可以在这里获取 8.0 release文档

阅读全文 »

2016 匆匆而过，你 2010 年的愿望实现了吗？每年的这个时候都想写一份惊世骇俗的年终总结，但每次都提笔忘事，想不起一年都做了什么，最近沉思数日，终于想起了今年的一些可以记录的事情。

2016 不平凡，多庸俗的话，2014 不平凡的一年，2015不平凡，2017 注定不平凡的一年。年终回想自己的一年，都会想到各种精彩，而其实一年最主要的还是在柴米油盐。所以看似不平凡，却又年年如此。

阅读全文 »

井字游戏大家应该都听说过，就是一个九宫格两人一次下棋，谁先排成一排谁赢。这个题目中给出一个数组，我们来判断游戏结果，双方分别代表1，2，1 赢返回1，2 赢返回 2，平局返回 0。

其实赢的情况只有横，纵，斜排成一排，我们第一反应可以是通过数组坐标来判断，而其实这个问题用正则来解决可以非常简单，代码如下：

function isSolved(board) {
   board = board.join("-").replace(/,/g,"");
   if(/222|2...2...2|2....2....2/.test(board)) return 2;
   if(/111|1...1...1|1....1....1/.test(board)) return 1;
   if(/0/.test(board)) return -1;
   return 0;
}

阅读全文 »

给定一个字符串，找到该字符串中第一个只出现一次的字母。

function firstNonRepeatingLetter(s) {
  for(var i in s) {
    if(s.match(new RegExp(s[i],"gi")).length === 1) {
      return s[i];
    }
  }
  return "";
}

阅读全文 »

效率呢？

斐波那契数列大家应该再熟悉不过了，平时面试也经常会被问到，然而不知道大家有没有考虑过它的效率呢？

阅读全文 »

Progressive Web Apps

今年如果你关注过 Chrome 开发团队的话，那一定或多或少的会听到过 Progressive Web Apps（PWA），实际上，今年 Chrome 团队可谓是 倾尽全力的推广 PWA，从上半年的 Google IO 大会关于 各类有关 PWA 的 9 个专题，直到今天刚刚结束的，基本是 PWA 推广大会的 CDS，可见随着 PWA 技术的成熟以及浏览器的支持度提高，不久必将会迎来一次爆发。如果你目前还不了解什么是 PWA ，请去 这里 自行补脑，这里我简单来说，PWA 就是能够提供类似像 Navive App 一样体验的 Web App。它主要有几个特点：

• 可以添加到桌面，文艺点说就是具有可安装性
• 离线能力
• 消息推送
• 安全
• 响应式

博主凑热闹，最近把博客添加了离线和添加到主屏幕功能，如果你的手机支持（安卓手机新版 Chrome，目前苹果还不支持），当然，或者是 PC 端的 Chrome，欢迎体验。

好了，废话不多说，这次大会在 youtube 上实时更新，我趁热挑选了自己感兴趣的几个主题，整理了主要内容，由于时间比较短，有些内容只是知道了概念（甚至有些只知道了个新名词），如果不对，欢迎大家留言指正，我后面也会陆续更新。

阅读全文 »