CSS 类似 iOS 的毛玻璃动态模糊效果

CSS 类似 iOS 的毛玻璃动态模糊效果

提到网页毛玻璃效果,总结下来有以下2种:

  1. 模糊元素本身
  2. 模糊元素后面的内容

早在之前,1就已经可以通过 CSS3 filter 属性实现,而2一直没有一个好的解决方案。对1的运用,也可以达到2的效果,通过模糊图片的一部分,就可以实现类似 bilibili 导航栏的模糊背景效果 ↓

这样实现的前提是,我们的背景是一个静态的,单一的图片,那么如果我们需要模糊的背景比较复杂呢?仔细观察QQ右栏的标题栏,和下方的应用 Dock,都是 iOS 常见的毛玻璃叠加层效果 ↓

显然模糊元素本身并不能解决所有场景的问题。

小米 MIUI 10 锁屏画报原图批量提取

小米 MIUI 10 锁屏画报原图批量提取

  1. 需要 ROOT 权限
  2. 用 ES、MT、RE 等类型的文件管理器复制以下目录到内部存储
    /data/data/com.mfashiongallery.emag/files/img_cache/
  3. 将复制出来的文件批量重命名,添加 jpg 后缀
纯本地搭建 EFK 管理远程服务器日志

纯本地搭建 EFK 管理远程服务器日志

项目staging环境日志难以搜索,计划搭建EFK管理日志,但是EFK内存消耗太大,再新增云服务器不划算,打算搭建在本地(16G内存)。

什么是 EFK

EFK不是一个软件,而是一套解决方案,并且都是开源软件,其中 ELasticsearch 负责日志保存和搜索,FileBeat 负责收集日志,Kibana 负责界面。

  1. Elasticsearch
    Elasticsearch是个开源分布式搜索引擎,提供搜集、分析、存储数据三大功能。它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等。
  2. FileBeat
    Filebeat 隶属于 Beats,搜集日志数据并上载到 ElasticsearchLogstashRedis 等平台。
  3. Kibana
    Kibana 提供日志分析的友好 Web 界面,可以帮助汇总、分析和搜索重要数据日志。

环境现状

  1. 本地环境:Windows 10,Intel(R) Core(TM) i5-7500 CPU,内存 16G
  2. 远程环境:SUSE Linux Enterprise Server 11,可用内存不足 1G
  3. 本地可以启虚拟机,但没钱买额外的云服务器。

最初想法

目前有3种思路:

  1. 本地启动Elasticsearch、Kibana、Filebeat,服务器启动FTP,并映射到本地网络驱动器,Filebeat配置从网络驱动器读取log。
  2. 本地启动Elasticsearch、Kibana,用反向代理工具FRP暴露Elasticsearch的9200端口到公网(注意配置鉴权),远程启动Filebeat,输出到本地的Elasticsearch。
  3. 本地启动Elasticsearch、Kibana,Logstash,远程启动Filebeat、Redis,远程的Filebeat输出到Redis,本地的Logstash从Redis上读取,转发给Elasticsearch。
Vagrant 修改 box 保存位置 & 虚拟机位置到非系统盘

Vagrant 修改 box 保存位置 & 虚拟机位置到非系统盘

修改 box 保存位置

在环境变量中添加:

修改虚拟机保存位置

打开VirtualBox,选择File->Preferences,修改Default Machine Folder:

Node.js 实现 HTTP 访问日志

越来越咸,两个月没发文章了,刚刚换项目了,开始学一些新的知识。
近来调试 webhook 和 http callback 比较多,想要使用 Node.js 写一个接收所有 HTTP 请求,并把请求头和请求体写进log,返回 200 OK 的 service。

其实就是简单的 access.log 啦。
其实就是刚学习 Node.js 写的 demo 啦。
啊这是很简单你不要拆穿啦。

这是输出的 log 的样子,优化了可读性,时间、method、path、URL参数(Query)、请求头(Header)、请求体(Body)都详细记录了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
info: 2019-07-25 18:04:36
POST /v1.0/standard
Query:
search: keyword
Header:
cache-control: no-cache
postman-token: f4103067-4b07-447d-9fab-f09a75b6ddda
content-type: application/json
user-agent: PostmanRuntime/3.0.11-hotfix.2
accept: */*
host: localhost:4000
accept-encoding: gzip, deflate
content-length: 209
connection: keep-alive
Body:
appId: XXX
data:
userId: 123
requestId: 456
timestamp: 0
负载均衡:ELB, ALB, NLB, CLB

负载均衡:ELB, ALB, NLB, CLB

负载均衡的作用

对多台云服务器进行流量分发的服务。负载均衡可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。

  1. 提高可用性和访问速度
    在单个可用区或多个可用区内的多个目标之间自动分配流量。
  2. 运行状况检查
    检测无法正常运行的目标、停止向它们发送流量,然后将负载分散到剩余的正常运行的目标上。
  3. 安全性功能
    创建和管理与负载均衡器关联的安全组,以提供更多联网和安全选项。
  4. TLS 终止
    提供集成化证书管理和 SSL/TLS 解密,可以灵活地集中管理负载均衡器的 SSL 设置,并从应用程序上卸载 CPU 密集型工作。
XSS, CSRF, CRLF, SQL注入学习笔记

XSS, CSRF, CRLF, SQL注入学习笔记

XSS, CSRF, CRLF, SQL注入都是历史悠久的四种攻击方式,因为参数化查询已经成了普遍用法,我们已经离SQL注入很远了,但是,XSS,CSRF,CRLF却没有远离我们。

本文以初学者角度探讨四种Web攻击以及预防方式,是个人基于对多种Web漏洞的学习总结,不承诺内容规范。

AngularJS 给 directive scope 绑定的 function 传参

如果我们想要给directive的scope中绑定的方法传递参数,需要传递对象,而不是直接传值。

举个栗子,这里的clickOutside是从用的地方传入的一个方法,debug时我们会发现绑进来的clickOutside并不是我们传的clickOutSideAction

1
2
3
4
5
6
7
8
9
10
11
12
13
app.directive('clickOutSide', ['$document', function($document) {
return {
restrict: 'A',
scope: {
clickOutside: '&'
},
link: function (scope, el) {
$document.on('click', function (e) {
scope.clickOutside();
});
}
}
}]);
1
<div data-click-out-side click-Outside="$ctrl.clickOutSideAction()"></div>

如果需要在这里给clickOutSideAction传参数,应该这样改:

1
2
3
4
5
6
7
8
9
10
app.directive('clickOutSide', ['$document', function($document) {
return {
...
link: function (scope, el) {
...
scope.clickOutside({event: e});
...
}
}
}]);
1
<div data-click-out-side click-Outside="$ctrl.clickOutSideAction(event)"></div>

好处是在实际使用directive的地方,不需要考虑参数列表顺序,只需要保证参数名称正确。

Hamcrest 学习笔记

Hamcrest 学习笔记

TODO

给Hexo博客配置Azure CI持续集成实现自动部署

给Hexo博客配置Azure CI持续集成实现自动部署

封面来源: 10th Magnitude

这是篇瞎球折腾笔记。
CI是个好东西,前段时间看了一本关于DevOps的书,对持续集成有了一定了解。
Hexo博客本身拥有很简洁的编译、部署过程:

1
2
hexo g
hexo d

但是简单的基础是前戏太多:
配置SSH,拉项目,拉子模块,安装NodeJS,安装脚手架,安装依赖……
虽然命令多,但是比较单一,便首先想到了给Hexo写CI脚本。

使用的第一个平台是腾讯云开发者平台(dev.tencent.com),它提供基于Jenkinsfile的持续集成beta版本
优点:免费,全中文界面,配置简单易于上手,支持Jenkins,国内服务速度快
缺点:目前功能较少,不支持上传secret files,无法配置SSH,npm依赖下载缓慢

hexo d命令是需要调用git push的,不支持SSH就凉了,过程就不讲了,在经过一番折腾后,我选择放弃了这个平台。

第二选择是自己搭建Jenkins,一番折腾后,发现自己的VPS性能太差,而且Windows版一些配置难以用配置文件完成,要手动配置,考虑到未来迁移起来会困难,逐放弃……

优点:完全免费,网上资料丰富
缺点:配置复杂,需要自行搭建,性能依赖于VPS性能

最后成功地在巨硬(Microsoft)Azure DevOps上配置好了,跟大家分享步骤!

优点:免费(一个月1800分钟、1个并行job),runner质量高,配置方便
缺点:Web hook不稳定,2次遇到GitHub调不通而没有自动触发Trigger的情况,与其他CI配置不兼容,参考资料较少

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×