博客

如果您是宁皓网的付费会员，又觉得我们做的还不错，可以把宁皓网推荐给您的朋友，我会请您喝杯咖啡。

方式

登录以后，在我的帐户（/user）下面，打开 会员中心，在这里你会看到一个 会员链接 ，数字部分是您的 ID 号，打开下面链接会跳转到宁皓网首页：

http://ninghao.net/affiliate/6

也可以使用后缀形式的链接，像这样：

http://ninghao.net/?a=6

您也可以推荐特定的页面，像这样：

http://ninghao.net/course/affiliate/6

或：

http://ninghao.net/course/?a=6

把上面这些链接中的数字，替换成您自己的用户 ID 号，然后把链接分享给朋友，可以通过 QQ，微信，微博，自己的博客或网站等等去分享。如果他通过这个链接订阅了宁皓网，我就会表达一下谢意，请您喝杯咖啡：）

最近看了一个采访 Matt 的视频，他是 WordPress 的创始人，Automattic 公司的 CEO 。他在视频里讲了自己当初做 WordPress 的起因，还有创建 Automattic 公司的故事，描述了跟投资人的关系，还有自己作为天使投资人的一些想法。下面跟大伙分享下，我不太清楚采访的具体时间。

WordPress 诞生

Matt 出生在休斯顿，毕业于休斯顿大学。有段时间他在华盛顿，估计是去旅游还是什么，拍了挺多照片，想跟家里人还有朋友分享一下。所以开始写博客，当时已经有了很多博客软件，最流行的应该是一个叫 Movabletype 的博客软件，Matt 也试了挺多。后来他发现了一个叫 B2 的博客软件，觉得挺不错，这是他第一次使用开源软件，B2 也是后来的 WordPress 的前身。

Matt 开始为 B2 贡献自己的代码，当时他大概十八九岁，并没有受过专业的程序设计训练。他写的一个小插件出现在 B2 里面，这让 Matt 非常兴奋 ，因为当时也有不少人在用 B2 这个博客软件了。那时候他是一名自由职业者，会为本地的音乐家还有小公司提供创建网站的服务。

React 是 Facebook 在内部用的一套创建用户界面的 JavaScript 框架。他可以让我们用一种极具表达的方式去创建界面上的组件，你可以重复利用这些组件，可以把不同的组件组合在一起用。创建好组件以后，当组件里的状态（数据）发生变化以后，组件会自动更新这些变化，而且速度非常的快。

ECMAScript 是一套规范，JavaScript 是实施了 ECMAScript 规范的一种语言。ES5 是这个规范的版本，也是现代浏览器普遍支持的一个版本，ES6 是这个规范的下一个版本，不过这个版本现在有个新名字叫 ES2015 ，也就是以后会使用年份去命名 ECMAScript 规范。

Babel 是一款 JavaScript 编译工作，比如它可以让你用新的标准去写 JavaScript 代码，然后 Babel 会把这些代码编译成现在的浏览器能懂的 JavaScript 。还有以后 React 也会用到 Babel 去编译它的 JSX 。

安装 Babel 命令行

确定你已经安装好了 npm ，然后打开命令行界面，Windows 用 Powershell，Mac 用终端，然后执行：

npm install -g babel

完成以后就可以使用 babel 命令行，创建一个 JS 文件叫 script.js，里面放点用 ES2015 标准写的代码：

'use strict';
let a = 'Hello World!';

进入到文件所在目录，然后执行：

最近了解下基于 Token 的身份验证，跟大伙分享下。很多大型网站也都在用，比如 Facebook，Twitter，Google+，Github 等等，比起传统的身份验证方法，Token 扩展性更强，也更安全点，非常适合用在 Web 应用或者移动应用上。Token 的中文有人翻译成 “令牌”，我觉得挺好，意思就是，你拿着这个令牌，才能过一些关卡。

文章先介绍了一下传统身份验证与基于 JWT 身份验证的方法，再理解一下 JWT 的 Token 的组成部分（头部，数据，签名），最后我们会在一个 Node.js 项目上实施签发与验证 JWT 的功能。练习的视频版本可以参考《JWT：JSON Web Token》这个免费的课程，项目代码在 Github 上可以找到。

Semantic UI 的 API ，也就是应用接口， 提供了一种简单的使用 Ajax 对服务端发送请求的方法。你可以去定义一些动作，这些动作对应服务端的地址，然后去把这些动作绑定给页面上的元素，比如一个按钮，一个文本框，或者一个表单，当特定的事件发生以后，API 会根据动作里指定的地址，向服务端发出请求，服务端收到请求，会作出响应，为我们的前端应用返回请求的数据，这样你就可以去使用这些请求回来的数据，比如把它们显示在页面上。

下面我们学一下怎么去使用这个 Semantic UI 里的 API 。先要做些准备。

服务端

我们可以使用各种服务端，比如 WordPress ，Drupal ，Laravel ，这些都可以作为服务端向前端应用提供数据，可以处理各种前端应用的请求。另外，有些专门的服务端服务，比如 Firebase ，这个公司被  Google 买了。

在服务端上就是定义了一些特定的地址，通过用不同的方法去请求这些地址，服务端可以去处理请求，并且根据请求的方法与地址作为不同的反应，比如可能返回一些文章内容给前端应用，或者把前端应用提供的数据存储在数据库里等等。

对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包，订阅宁皓网就可以学习全部课程了。

Semantic UI 是一套开源的 CSS 与 JavaScript 框架，提供了一些设计好的界面组件，你可以在项目里直接使用这些组件。它还提供了一套很方便的定制主题的方法，你可以用自己的想法去改变界面组件的样式。在这个教程里我们学习一下安装 Semantic UI 。

准备工具

你需要使用命令行去安装，Windows 用 Powershell ，Mac 使用终端。然后确定你已经安装好了 npm 与 gulp 。

安装 Semantic UI

先为项目创建一个目录，然后进入到这个目录的下面，比如我在自己的桌面上去为项目创建一个目录：

Material Design 是 Google 在 2014 年 6 月的开发大会上发布的一套设计指南。这套设计指南是为 Android 准备的，它是一套视觉语言，统一用户在不同的设备之间的体验。具体信息可以参考 Google 的网站。

动画，包括动作，交互与过度，是这套设计规则的重要的组成部分 。在 Material Design 里面，动画不仅是为了好看，它可以让空间的关系，功能，还有系统的意图变得有意义。

动画在现代应用里非常的重要，不过要注意不能过渡使用它。你需要用更微秒的方式去使用它，而且必须让它有意义，这样才能增强用户的体验，不然就会有相反的作用。

很多设计师都开始使用这套设计规则，下面我收集了一些关于 Material Design 的动画的示例。

《 创建宁皓网 #3 》 介绍了给网站添加电子商务功能，可以卖掉网站的会员资格（用户角色）。用户可以在线提交订单，网站支持多种支付方法，可以使用支付宝或者 Paypal 支付，货币可以选择人民币或美金，在选择用 Paypal 支付的时候，会自动把商品的价格换算成美金。支付成功以后，会给用户分配一个指定的用户角色，这个用户角色有权限可以在线查看我们网站上的视频文件，并且这个角色会在一定的时间内过期。

忍不住推荐一下 Browsersync。对项目所做的修改，在页面上的操作都会实时的在所有的浏览器上同步。您在设计与开发的时候，可能会在多个浏览器上打开项目，查看变化，用了 Browsersync，不需要单独手工去刷新页面，在页面上的滚动，点击，在文本框里输入的内容，这些都可以在所有的浏览器上同步。

Browsersync 提供了 Web 界面，可以很方便的去配置，它还可以跟 Gulp 或 Grunt 结合在一起使用，你可以为项目创建可以自动执行的任务。它会为你的项目生成一个服务器，在浏览器上可以直接预览你的项目。它还可以作为代理服务器，比如可以代理你的运行 PHP 的服务器，这样你就可以在自己的 PHP 项目上使用 Browsersync 提供的浏览器同步功能了。你也可以为项目创建一个可以在互联网上直接访问的地址，也就是你可以让别人通过互联网直接访问你在本地创建的项目。