Perry的笔记

2016-12-18发表前端开发4 分钟读完 (大约604个字)

Web前端中有时会需要将数据通过图表的形式展示，而选择一个JavaScript的可视化库是比较重要的。
选择需要多个因素进行权衡，项目的需求、开发周期、人员的技术、文档、问题的解决、功能，下面是针对
github上星数较多的数据可视化库针对各角度做一下对比，方便后续的选型有所帮助。

2016-12-16发表前端开发几秒读完 (大约96个字)

使用browserSync作为开发环境使用HTML5模式的配置方法

使用browserSync自动热加载开发单页应用，启用AngularJS下的HTML5模式，相对路径的URL刷新会
提示无法获取请求。

安装connect-history-api-fallback包

1	npm install connect-history-api-fallback --save-dev

配置

在gulpfile.js文件中配置以下内容

var historyApiFallback = require('connect-history-api-fallback')
var bs = require('browser-sync').create();

bs.init({
   server: {
       baseDir: "./app",
       middleware: [ historyApiFallback() ]
    }
})

【全文完】

2016-12-14发表前端开发1 分钟读完 (大约161个字)

去掉AngularJS的URL中的#

默认的AngularJS项目开发中的URL访问路径中会有”#”作为前缀出现，可以通过配置将”#”去掉。

这里主要记录针对静态站点的设置，使用Nginx作为Web服务器的情况。

修改代码

修改html页面，增加base标签

<html>
<head>
  <base href="/">
</head>

...

</html

修改js文件中的html5Mode

angular
    .module('app.routes')
    .config(['$locationProvider', function($locationProvider) {
      $locationProvider.html5Mode(true);
    }]);

修改nginx配置

修改nginx的配置文件，增加try_files配置

server {
        listen 80;
        server_name example.com;
        location / {
            root $htdocs;
            try_files $uri $uri/ /index.html =404;
        }
}

参考

2016-12-13发表前端开发1 分钟读完 (大约188个字)

loader.css的使用入门

Loaders.css是纯css的loading动画库。
Delightful and performance-focused pure css loading animations.

demo如下：

demo

安装

bower方式

1	bower install loaders.css

npm方式

1	npm i --save-dev loaders.css

使用

标准使用:

引入loaders.min.css
创建一个元素并添加动画的css类
插入适量的
到上一步创建的元素中

demo如下：

<!DOCTYPE html>
<html>
<head>
  <title>loaders css</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ConnorAtherton/loaders.css/master/loaders.min.css">

  <style type="text/css">
    .loader-demo {
      background-color: gray;
      color: blue;
      border-color: blue;
      height: 150px;
      padding-top: 50px;
      text-align: center;
      > div {
        display: inline-block;
      }
    }

    .ball-pulse > div {
      background-color: orange;
    }

  </style>
</head>
<body>
  <h3>loaders css</h3>

  <div class="loader-demo">
    <div class="ball-pulse">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</body>
</html>

另外，这个库也支持jQuery的使用，具体参考这里

定制

可改变动画图标的背景颜色

1
2
3

.ball-grid-pulse > div {
  background: orange;
}

浏览器兼容性

IE11
Firefox 36
Chrome 41
Safari 8

【全文完】

2016-12-13发表工具1 分钟读完 (大约159个字)

占位图片生成网站推荐

今天遇到一个很有趣的网站，关于生成任意尺寸的占位图片，并且支持添加文字。

官网地址：http://fpoimg.com/

demo:

demo

简单使用

简单使用可直接修改以下url中的尺寸并放入页面中即可。

1	http://fpoimg.com/300x250

定制图片

定制图片，支持修改图片尺寸、添加文字、修改背景和文字颜色。

通过以下页面进行定制，支持表单控件操作。

1	http://fpoimg.com/generator

其他示例

部分示例

【全文完】

2016-12-12发表工具1 分钟读完 (大约134个字)

mac-use-sublime-text-3-cli

开启Sublime Text 3 在Mac下通过命令启动。

Mac下的Sublime Text编辑器是默认不能通过命令行启动的，因此需要手动设置后才行。以下是配置过程：

查看$PATH

1	echo $PATH

确认/user/local/bin在$PATH中。

安装

1	ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime

使用

在命令行下使用

1 2	cd sublime ~/Documents

参考

2016-12-11发表工具2 分钟读完 (大约326个字)

hexo-theme-use-series-2

下一步，继续改进博客的配置，按照官方的指南前进。

开放其他链接

原先只有首页和归档，接下来添加分类、标签和关于页面的链接。

添加每篇文章的阅读次数

给每篇文章添加阅读次数，方便展示文章的阅读热度。
添加方法参考文章

添加内容分享

根据自己的意愿来选择，使用多说的分享。

多说分享的效果如下图：

多说分享的效果

安装站点内搜索

使用Algolia第三方服务来集成搜索功能。
搜索的结果暂时无法正确跳转（调查中）

Algolia

添加多说的热评文章

1 2	# 多说热评文章 true 或者 false duoshuo_hotartical: true

修改代码高亮的颜色

修改主题配置文件中的以下内容：
支持的颜色类别有

normal | night | night eighties | night blue | night bright

配置项：

1	highlight_theme: night blue

【全文完】

2016-12-07发表前端开发1 分钟读完 (大约177个字)

百度地图显示位置错误

近期使用百度地图开发一个应用，调用百度地图的JavaScript api接口，记录下遇到的错误。

常见问题

错误1：fc未定义

问题描述：

控制台一直报fc undefined?

解决方法：

map必须要dom加载完成后实例化。

错误2：地图显示位置错误

问题描述：

百度地图隐藏后，再次打开，地图一直显示错误？

解决方法：

问题在于地图在DOM加载完成之前加载了，导致无法正确显示。
通过启一个定时器，200毫秒延时进行加载即可。

【以上全部内容】

2016-12-06发表1 分钟读完 (大约143个字)

MAC下通过ssh使用PEM文件认证登录AWS的虚拟机

MAC下通过ssh使用PEM文件认证登录AWS的虚拟机。

直接连接

输入以下命令即可访问:

1	ssh -i key.pem xxx@server

常见错误：

问题在于服务器提示文件的权限过大，需要调整，再次连接即可。

1 2	sudo chmod 600 key.pem ssh -i key.pem xxx@server

保存key

另外一种方式，可通过ssh-add添加配置文件，方便后续访问。
添加完成后，直接访问即可。

1 2	ssh-add -k key.pem ssh xxx@server

2016-12-04发表前端开发3 分钟读完 (大约417个字)

AngularJS的$timeout和$interval服务使用

记录AngularJS中两个关于定时器相关service的使用，其中$timeoute为触发一次，$interval为循环
触发，这两个服务分别对应JS中的setTimeout和setInterval函数（同属于window对象）。

安装connect-history-api-fallback包

配置

修改代码

修改nginx配置

参考

安装

使用

定制

浏览器兼容性

简单使用

定制图片

其他示例

查看$PATH

安装

使用

开放其他链接

添加每篇文章的阅读次数

添加内容分享

安装站点内搜索

添加多说的热评文章

修改代码高亮的颜色

常见问题

错误1：fc未定义

错误2：地图显示位置错误

直接连接

保存key

链接

分类

最新文章

标签

归档