活了二十多年，从来没有做过年终总结，但年岁渐长，总觉得有点时间的压力，应该记录点什么，就让2017年的总结作为第一次。
不到200行 JavaScript 代码如何实现富文本编辑器
发表于
更新于
用 JavaScript 画光：基础
发表于
更新于
Any application that can be written in JavaScript, will eventually be written in JavaScript.
– Atwood’s Law
本文来源于我在看了 Milo Yip 在知乎专栏里的这篇文章：《用 C 语言画光（一）：基础》之后的一个想法，能不能将原文中 C 语言版本程序改成 JavaScript 版本的。动手之后发现出乎意料的顺利，我只需要把 C 语言中变量的类型通通去掉就可以了😀，Amazing！
塔防游戏中的敌人如何沿路径前进 (JavaScript 实现)
发表于
更新于
如果开发一个塔防游戏，很自然的会遇上这么两个名字很像的问题：
- Path-finding: 如果知道起点和终点，如何在其间找到一条路径
- Path-following: 已知从起点到终点的路径，物体如何才能沿着它行进
本文将要讨论的是第二个问题 path following，给定一条路径，看物体如何沿着它从起点运行至终点。为了方便描述，接下来的内容中，用单词 Boid 来表示行进的物体或塔防中的敌人。
接下来会用一种简单的方法来解决这一问题，最终完成的代码库可见 GitHub: boid-path-following，repo 的多个分支对应了文中的不同步骤。
React Router v4 之代码分割：从放弃到入门
发表于
更新于
背景介绍
React Router v4 推出已有六个月了，网络上因版本升级带来的哀嚎仿佛就在半年前。我在使用这个版本的 React Router 时，也遇到了一些问题，比如这里所说的代码分割，所以写了这篇博客作为总结，希望能对他人有所帮助。
什么是代码分割（code splitting）
在用户浏览我们的网站时，一种方案是一次性地将所有的 JavaScript 代码都下载下来，可想而知，代码体积会很可观，同时这些代码中的一部分可能是用户此时并不需要的。另一种方案是按需加载，将 JavaScript 代码分成多个块（chunk），用户只需下载当前浏览所需的代码即可，用户进入到其它页面或需要渲染其它部分时，才加载更多的代码。这后一种方案中用到的就是所谓的代码分割（code splitting）了。
利用 socket.io 实现消息实时推送
发表于
更新于
项目背景介绍
最近在写的项目中存在着社交模块，需要实现这样的一个功能：当发生了用户被点赞、评论、关注等操作时，需要由服务器向用户实时地推送一条消息。最终完成的项目地址为：socket-message-push，这里将介绍一下实现的思路及部分代码。
项目的流程中存在着这样的几个对象：
- 用 Java 实现的后端服务器
- 用 Node.js 实现的消息推送服务器
- 用户进行操作的客户端
事件处理的流程如下：
- 用户进行点赞操作时，后端服务器会进行处理，并向 Node.js 消息推送服务器发送一条消息
- Node.js 消息推送服务器接收到后端发送的消息后，处理数据，并确定向哪个用户进行推送
- 用户的客户端接收到由 Node.js 服务器推送来的消息后，即可进行通知的显示。
上面的流程中，Java 后端服务器是如何实现的不在此篇文章的讨论范围内，本文将主要介绍如何使用 Node.js 来实现这个消息推送服务器。
如何用 html 和 css 画一拳超人
发表于
更新于
写这篇博客的起因是我看了Medium上的这篇文章：How I started drawing CSS Images，然后哇哦😦，同样是前端开发，这区别怎么这么大呢？这位作者和我完全点了不同的技能点啊！
看了几个她在codepen上的作品，比如这个皮卡丘，发现用到的技术也并不多，于是我也想试试。
不过有哪个动漫中的人物足够简单，能够用几个基本的几何图形就画出来呢？我想到了一个人，于是我决定画一个《一拳超人》中的卤蛋，不对，是秃头披风侠——琦玉老师。
课程笔记--Building a javascript development environment
发表于
更新于
这篇博客是我在学习 Pluralsight上的课程：Building a JavaScript Development Environment 时记下的笔记，仅作个人记录之用。
这门课程系统地介绍了前端开发中的许多工具和术语，从编辑器的选择到项目的部署都进行了介绍，我在学习了这个课程后感觉将之前零散学习的内容串了起来。
顺便一说，Pluralsight网站上面有许多不错的课程，不过价格太贵，需每月付29美元😥。但是，你可以用微软账号加入Visual Studio Dev Essentials 计划，这样就可以免费获得Pluralsight 3个月的订阅了😀。
1. Course Overview
编程的时候要做许多选择
- Editor
- Module format
- HTML generation
- Transpiling
- Bundler
- Linting
- Testing
- …
这门课程介绍了如何在这些选项中做出选择
从头创建一个基于 React, webpack, babel 的模板项目
发表于
更新于
如果是一个刚接触 React 的新手，当学完了 React 的各种基本概念和语法之后，准备开始实际的开发工作时，他又会碰到各种新颖的名词：npm, webpack, babel, flux, es2015…… 如果以前接触过这些工具还好，否则为了建立一个简单的项目，还需要学习这一整套的流程，而在这中间又会碰上各种坑，这个过程将会非常痛苦。一个解决方案是去 GitHub 上寻找各种模板项目，用 React + webpack + … 作为关键字搜索可以发现许多别人创建的空项目，你可以在其基础上稍作修改然后开始开发。我在学习的过程中就是这么做的，但之后对其中的一些配置项仍是一知半解。
我在这里从头开始创建一个模板项目，并将过程记录下来，一方面希望能给看到这篇文章的人以帮助，另一方面也是加深我自己的理解。
最后完成的项目见这个项目：react-webpack-babel-boilerplate，在建立这个项目过程中的步骤可见另一个项目：create-react-boilerplate-steps，过程被分到了多个文件夹中。
项目结构
在开始之前先看看项目的文件结构：
- src
- index.js
- App.js
- .babelrc
- index.html
- package.json
- server.js
- webpack.config.js
以上就是我们的项目需要的全部文件了。
接下来我会将这个项目的构建过程分解成几个步骤，你只要按照这些步骤依次进行即可。
用 React.js 写一个最简单的 To-do List 应用
发表于
更新于
前段时间忙着找工作去了，有段时间没有写博客了，上一篇还是三月份的，今天来更新一篇。
最近在学 React.js，也写了一些练习的项目，之前参考网上的一些代码写了一个很简单的 to-do list。对于初学者来说，写个基本的 to-do list 对于理解 React 中的一些概念及语法倒是挺有帮助的。
现在很多的 React 项目中已经开始使用 ES6 来写了，不过因为我在学习 React 的时候看的教程大多都是用 ES5 写的，我这里还是用的还是更熟悉的 ES5 写法，虽然有点落伍了，但若想改成 ES6 版本倒也挺方便的。