Loaders.css是纯css的loading动画库。
Delightful and performance-focused pure css loading animations.
demo如下：
安装
bower方式
1 | bower install loaders.css |
npm方式
1 | npm i --save-dev loaders.css |
使用
标准使用:
- 引入loaders.min.css
- 创建一个元素并添加动画的css类
- 插入适量的到上一步创建的元素中
demo如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<!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
【全文完】
今天遇到一个很有趣的网站，关于生成任意尺寸的占位图片，并且支持添加文字。
官网地址：http://fpoimg.com/
demo:
简单使用
简单使用可直接修改以下url中的尺寸并放入页面中即可。
1 | http://fpoimg.com/300x250 |
定制图片
定制图片，支持修改图片尺寸、添加文字、修改背景和文字颜色。
通过以下页面进行定制，支持表单控件操作。
1 | http://fpoimg.com/generator |
其他示例
【全文完】
下一步，继续改进博客的配置，按照官方的指南前进。
开放其他链接
原先只有首页和归档，接下来添加分类、标签和关于页面的链接。
添加每篇文章的阅读次数
给每篇文章添加阅读次数，方便展示文章的阅读热度。
添加方法参考文章
添加内容分享
根据自己的意愿来选择，使用多说的分享。
多说分享的效果如下图：
安装站点内搜索
使用Algolia第三方服务来集成搜索功能。
搜索的结果暂时无法正确跳转（调查中）
添加多说的热评文章
1 | # 多说热评文章 true 或者 false |
修改代码高亮的颜色
修改主题配置文件中的以下内容：
支持的颜色类别有
normal | night | night eighties | night blue | night bright
配置项：
1 | highlight_theme: night blue |
【全文完】
AngularJS的$timeout和$interval服务使用
记录AngularJS中两个关于定时器相关service的使用，其中$timeoute为触发一次，$interval为循环
触发，这两个服务分别对应JS中的setTimeout和setInterval函数（同属于window对象）。
原文题目：Modern Angular 1.x essential interview questions
出处：https://toddmotto.com/modern-angular-interview-questions?utm_source=javascriptweekly&utm_medium=email
翻译时长：2 hours 30 mins
审阅时长：10 min
翻译正文内容：
Angular 1.x 在 1.5 引入 .component()后改变了很多，并随之给面试带来了一片新的天地。在许多
之前职位中，我面试了关于Angular、通用JavaScript或者两种兼有的开发者。这是我关于当前Angular
1.x的面试题清单，主要关注组件架构和最佳实践。有些简单，有些困难，由你选择。
有些问题的用意在于让面试者基于他们的经验或者观点来回答。比如，“你什么时候使用X而不是Y”是一个比
“为什么X比Y要好”好的问题。这让你可以挖掘得更深，并可以在面试过程中有更好的对话，也让你能快速判断
哪个开发者更适合你。
答案并没包含，也不会包含。有部分问题是主题性，有部分鼓励你自学。如果你不知道答案，那么你可以去探索并学习。背诵将不会让你通过面试。