博客

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 提供的浏览器同步功能了。你也可以为项目创建一个可以在互联网上直接访问的地址，也就是你可以让别人通过互联网直接访问你在本地创建的项目。

现在是您学习 Drupal 的最好的时候，《 创建宁皓网 》会是一个系列课程，内容就是从头开始，创建一个视频网站，带电子商务功能，其实就是现在你看到的这个网站，只不过我们要一起把它做的更好。

刚刚发布的是 《 创建宁皓网 #2：内容结构 》 ，过程主要是去创建宁皓网需要的内容类型，字段，分类，内容之间的关系，创建了一个课程目录视图，利用了内容之间的关系，可以动态的显示出相关的视频。理解创建与使用内容关系非常的重要，所以这个课程不能错过 ：）

在今年 3 月的苹果大会上，看到了新款 Macbook，全金属外壳，大键盘，轻（0.9kg），薄，安静，因为没有风扇，觉得挺好。正好小雪最近也要回归工作了，她之前的电脑被我占了，所以在苹果官网订了一台新的金色的 Macbook，5月13号 提交的订单，6月12号收到。

开始我以为苹果在跟我开玩笑，说 3 - 5 周才能收到货，结果还真是整整等了一个月。这回占了点苹果的便宜，你知道如果你在苹果官网，用教育优惠购买会便宜几百块，我寻思得认个证啥的，结果啥也没用，是中国邮政 EMS 送的货，签收的时候得要身份证，或者纸制打印的发货通知书。