HTML栅格化示例

如果需要将一个DIV平均分割成几个小方格, 栅格化是比较好的解决方案, 本文演示一下

CSS代码:

<style>
.features .feat_list{
width: 60%;
margin: 20px auto;
outline: 1px solid blue;
}
.features .feat_list::before,
.features .feat_list::after{
content: ”;
display: table;
clear: both;
}
.features .feat_list .gird{
height: 300px;
background-color:#FFDCDC;
box-sizing: border-box; /* CSS属性 */
float: left;
margin: 0 1%; /* 如果这里margin是0, 则表格没有间隙, 下面width应该使用精准的数字, 例如33.33%, 66.66%等 */
outline: 1px solid red;
/* padding: 12px; */ /* 如果这里margin是0, 一般是需要设置padding */
}
.features .feat_list .gird-1{width: 31.33%;} /* 三栏表格宽度, 用33.33%减去margin的1%, 得到31.33% */
.features .feat_list .gird-2{width: 64.66%;} /* 三栏表格占2栏, 用33.33%减去margin的1%, 得到31.33% */
.features .feat_list .gird-5{width: 18%;} /* 三栏表格占2栏, 用33.33%减去margin的1%, 得到31.33% */
.features .feat_list .gird-4{width: 23%;}
</style>

继续阅读

Android上最好用的RSS阅读器gReader居然下架了

多年来一直使用The Old Reader(Web端) + gReader(APP端)的方式管理RSS资讯. 一直用的挺好, 最近才发现gReader居然下架了, 不勉有些失落. 一个APP的下架, 不仅影响了我的使用体验, 更是让人怀念以前使用gReader的岁月.

网络上的一些讨论:
Greader Pro has been removed from playstore
Popular RSS app gReader vanishes from the Play Store

这里依然能够下载到最新版的gReader, 不过已经是3年前更新的版本了, 估计大概率是作者不会再更新了吧. 除了怀念还是怀念.

Prometheus中rate和irate的区别

rate()

rate(v range-vector) calculates the per-second average rate of increase of the time series in the range vector.

rate()函数计算某个时间序列范围内的每秒平均增长率。

Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for.

自适应单调性中断(比如target重启导致的计数器重置).

Also, the calculation extrapolates to the ends of the time range, allowing for missed scrapes or imperfect alignment of scrape cycles with the range’s time period.

计算结果是推算到每个时间范围的最后而得出, 允许漏抓和抓取周期与时间范围的不完美结合.

The following example expression returns the per-second rate of HTTP requests as measured over the last 5 minutes, per time series in the range vector:

以下示例返回最后五分钟HTTP请求每秒增长率

rate(http_requests_total{job="api-server"}[5m])

rate should only be used with counters. It is best suited for alerting, and for graphing of slow-moving counters.

rate应该只和计数器一起使用。最适合告警和缓慢计数器的绘图。 继续阅读

使用Collectd+Prometheus+Grafana监控nginx状态

在安装Nginx时,如果指定了–with-http_stub_status_module, 就可以使用本文的方法进行监控. 不用担心, 不论是从rpm/apt安装的Nginx, 均自带了该Module.

一般的建议是, 在nginx的机器上同时安装Collectd和collectd_exporter, 然后将数据导出到Prometheus(一般位于第三方服务器), 再从Grafana读取Prometheus中的数据.

1, 配置nginx

安装Nginx的过程此处略过, 我们需要确定一下Nginx安装了http_stub_status_module.
[code]
$ sudo nginx -V | grep http_sub_status
nginx version: nginx/1.14.0
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-28) (GCC)
built with OpenSSL 1.0.2k-fips 26 Jan 2017
TLS SNI support enabled
configure arguments: –user=nginx –group=nginx –prefix=/usr/local/nginx –conf-path=…
[/code]

配置Nginx启用该module
[code]
location /nginx_status {
stub_status on;
access_log off;
allow 127.0.0.1;
deny all;
}
[/code]
然后便可以通过http://ip/nginx_status来获取相关状态信息.
[code]
$ curl http://127.0.0.1/nginx_status
Active connections: 29
server accepts handled requests
17750380 17750380 6225361
Reading: 0 Writing: 1 Waiting: 28
[/code] 继续阅读

配置ELK系统(ElasticSearch+Logstash+Kibana)收集nginx系统日志(三): Logstash的Grok过滤器插件原理

Grok是Logstash最重要的插件, 可以将非结构化日志数据解析为结构化和可查询的内容.

此工具非常适用于syslog日志, apache和其他Web服务器日志, mysql日志, 以及通常为人类而非计算机使用而编写的任何日志格式.

grok的语法
[code]
%{SYNTAX:SEMANTIC}
[/code]
SYNTAX是文本要匹配的”patterns”(翻译为”模式”, 但我觉得翻译成”类型”更恰当)
SEMANTIC是匹配到的文标识(字段), 默认是以字符串的方式保存

翻译成中文就是
[code]
%{模式:字段}
[/code]

假设有以下日志片断
[code]55.3.244.1 GET /index.html 15824 0.043[/code]

通过分析, 第一段可能是一个IP, 第二段可能是一个HTTP的请求方法, 第三段可能是请求的页面, 等等, 所以grok的过滤表达式可以写为
[code]
%{IP:client} %{WORD:method} %{URIPATHPARAM:request} %{NUMBER:bytes} %{NUMBER:duration}
[/code]
经过grok过滤器处理以后, 该日志片断将被解析成以下字段
[code]
client: 55.3.244.1
method: GET
request: /index.html
bytes: 15824
duration: 0.043
[/code] 继续阅读