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
Your browser is out-of-date!

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

×