写这篇博客的起因是我看了Medium上的这篇文章：How I started drawing CSS Images，然后哇哦😦，同样是前端开发，这区别怎么这么大呢？这位作者和我完全点了不同的技能点啊！

看了几个她在codepen上的作品，比如这个皮卡丘，发现用到的技术也并不多，于是我也想试试。

不过有哪个动漫中的人物足够简单，能够用几个基本的几何图形就画出来呢？我想到了一个人，于是我决定画一个《一拳超人》中的卤蛋，不对，是秃头披风侠——琦玉老师。

这篇博客是我在学习 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 的新手，当学完了 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。对于初学者来说，写个基本的 to-do list 对于理解 React 中的一些概念及语法倒是挺有帮助的。

现在很多的 React 项目中已经开始使用 ES6 来写了，不过因为我在学习 React 的时候看的教程大多都是用 ES5 写的，我这里还是用的还是更熟悉的 ES5 写法，虽然有点落伍了，但若想改成 ES6 版本倒也挺方便的。

GitHub 上的项目地址
在线 demo

前段时间电影《疯狂动物城》上映了，然后我的知乎首页就被它刷屏了。虽然我对这部电影没有任何意见，但作为一个还没去电影院看过的人来说，每看到相关问题一次都是无情的剧透，于是我毅然屏蔽了“疯狂动物园”这个话题。本以为问题解决了，但是接下来我又被迫看到这个问题：

问题上添加的五个话题无一命中，我又被剧透了一脸。算了，既然知乎的屏蔽规则靠不住，那就自己动手吧。这样我的Chrome浏览器扩展——ZhihuFilter就诞生了，点击这里查看Github上的项目。

扩展功能

其实扩展的功能很简单，当打开知乎首页后，扩展会依次检查你的屏蔽关键词列表是否出现在了某一个答案中，如果出现了，就会把这个答案隐藏，取而代之的是提示信息和一个展开答案的按钮。效果如下图所示：

你可以点击图中的按钮来查看答案，之后可以选择再次隐藏或展开。

这篇文章是我去年看到的一个很有趣的项目，还试着模仿它的代码写一个类似的项目出来，不过一直没有完成。这里把原作者的一篇相关博客翻译过来，说不定有更多的人对此感兴趣。

• 项目演示：原作者用JavaScript实现的demo
• 原文地址：creatures avoiding planks
• 原作者的twitter地址：hardmaru’s twitter
• 原作者的另一个实验：生成伪汉字的实验
• 译文地址：用神经网络实现能够自主避让障碍的生物
• 翻译：吴锴（noiron）

注意：原文中引用了一些墙外链接，请配合梯子食用

以下为译文内容：

具有神经网络大脑的agent为了生存而进化

这里是javascript的演示

最近我看到了一个模拟视频，展示了使用进化技术来训练agent，让它们能够避开移动的障碍物。这里使用的方法似乎是NEAT算法的变种。NEAT算法用于神经网络拓扑结构的进化，使其能够正确完成特定的任务。它是为了Unity 5游戏引擎而写的，想被整合进综合的游戏AI中，这引起了我的兴趣。

这个结果很酷而且动起来似乎很优雅，所以我想试着用javascript实现一个类似的demo，这样就可以在浏览器中运行了。在玩了一下基本的实现后，我发现对于障碍躲避问题，一个简单的神经网络就可以高效的完成了，甚至于一个完全连接的神经网络都算是杀鸡用牛刀了。最后我也意识到就算是一个简单的类感知器（perceptron）网络都能够很好地完成任务，而在之前提到的障碍躲避demo中，隐藏单元也并不能够增加多少好处。

简单的感知器图解（维基百科）

因为agent可以在探测到障碍物的瞬间自由地向任意方向移动，而且agent之间不会产生相互作用，因此这个任务变得太简单了，使用NEAT算法的杀伤力过大了。我们使用一个简单的类感知器网络（即单神经元网络），就能让agent有效地完成躲避障碍的任务了。

今天碰到了一个问题，如何让只有一行的文本进行左右对齐。对于英文文本，左右对齐的效果如下所示：

上述效果是使用text-align: justify来实现的。可以看到除了最后一行之外，段落的其余部分都是左右对齐的。如果我们将text-align: justify样式直接应用在单行的文本上时，将会像上面段落的最后一行，仅仅是向左对齐。可以看一下下面的例子：

代码：

1
2
3
4
5
6
7
8
9

<p id="justify-para">这是一行没有左右对齐的文本</p>

<style type="text/css">
#justify-para {
    background-color: #ccc;
    width: 400px;
    text-align: justify;
}
</style>

结果：

对于汉字文本，因为汉字的等宽特点，文本左右对齐的效果就是每个汉字间的间隔相等。为了实现这一效果，需要利用:after伪元素，在文本之后添加一个不可见的元素，如下所示。

1
2
3
4
5

#justify-para:after {
  content: "";
  display: inline-block;
  width: 100%;
}

最终效果：

这样就实现了单行文本的左右对齐效果。

参考资料

CSS – One Line Justify

::before会创建一个伪元素（pseudo-element）作为选定元素的第一个子元素。这个元素默认为行内元素。

语法

1
2
3
4
5
6
7
8

/* CSS3 语法 */
element::before { style properties }

/* CSS2 的过时语法（仅用于支持IE8） */
element:before  { style properties }

/* 在每个<p>元素前插入内容 */
p::before { content: "Hello world!"; }

注意CSS2和CSS3的写法有一个冒号的差别。

创建圆角框有几种方法，每种方法各有优缺点，对这些方法的选择主要取决于实际情况。

固定宽度的圆角框

固定宽度的圆角框是最容易创建的，我们只需要两个图像分别用作顶部和底部的背景。

1
2
3
4
5
6

<h1>Simple, Fixed Rounded Corner Box</h1>

<div class="box">
  <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet</p>
</div>

用作背景的两张图片：

顶部
底部

将这两张图片作为顶部和底部的背景：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.box {
  width: 418px;
  background: #effce7 url("bottom.gif") no-repeat left bottom;
  padding-bottom: 1px;
}

.box h2 {
  background: url("top.gif") no-repeat left top;
  margin-top: 0;
  padding: 20px 20px 0 20px;
}

.box p {
  padding: 0 20px;
}

固定宽度的圆角框

本文是我在学习了慕课网教程：瀑布流布局后的学习笔记，具体代码见GitHub。

瀑布流布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

我们可以用多种方法实现瀑布流布局，如纯 JavaScript 方法实现，jQuery 方法以及使用 CSS3 实现。

网页结构与布局

先来看一下需要实现的效果。

可以看出图片之间等宽但不等高，相互之间有间隔，当页面滚动到底部时，加载更多的图片。