favinavi - 在线笔记-page6

新版favinavi人性化网络收藏夹网站建设初期，还没有开始宣传，就发现访问量开始8小时内达到了大几千，有点喜出望外。可是再看看又发现不对，统计的关键页面的访问量少的可怜，那么访问量都是哪儿来的呢？

没办法，只能老老实实添加详细统计代码来企图发现问题。果然，详细分析后发现了2个重大问题：

1、异常流量主要来自垃圾蜘蛛爬网；
2、异常流量集中在登录页面“https://favinavi.com/login?o=xxx”。

这就奇了怪了，一个登录页面你个蜘蛛要重复爬几千次是几个意思？！

再仔细分析，发现其实每次垃圾蜘蛛访问的url其实不完全相同，参数o后面的内容非常花样繁多，不属于正常情况下应该出现的。

这里解释一下，参数o是为了记录用户登陆前所在页面，万一用户要干点什么的时候却登录超时了的话，一旦登录成功可以立即跳转到登录前的页面，这样做完全是为了用户能有更良好的体验。问题到底出在哪里呢？

最终分析发现，问题出在提取文件名的正则表达式上。

php代码：
$fn=preg_replace("/^(.*)\?.*$/","$1",$_SERVER['REQUEST_URI']);

其本意是想记录用户登录超时前所访问的页面，去掉问号后面不必要的参数，得到一个“纯净”的文件名，初看其实好像也没啥问题。但其实这个正则表达式是有个大问题的。因为登录前所访问页面的参数中是可能包含参数的，说得有点绕，就是uri中问号后面可能还有问号。虽然经过了urlencode，但问号本质上还是问号。那么问题就来了，上面的正则没有使用非贪婪匹配，就会匹配到最后一个问号，前面的$fn就会变成一个已经带了参数的乱七八糟的文件名，由于网站有多个地方需要处理这个纯净$fn，最后再加上原有的访问参数提交。不光是php，还有JavaScript参与，所以最后的结果是login后面的参数越变越多，越来越长，并且绕不出来。爬虫又不是人，会折腾几次发现不对就放弃，它不断地爬啊爬，每次都当成是爬到了一个新的链接，所以就继续爬喽...

这个bug解决起来其实很简单，把正则表达式括号里的内容改成非贪婪模式就对了：
$fn=preg_replace("/^(.*?)\?.*$/","$1",$_SERVER['REQUEST_URI']);

星号后面再跟一个问号，就成了非贪婪匹配，只留下第一个问号前面的内容，就是我想要的“纯净”的文件名了。

by: fanshome  visibility 938
2023-06-09 13:43 (UTC)

比较简单实用的一种做法是使用certbot，签发证书、安装、配置web服务器（apache/nginx等）、自动更新一条龙。详细介绍请访问cerbot官网：https://certbot.eff.org/

这里简单介绍主要步骤：（以Ubuntu linux server为例）

先安装snapd
sudo apt install snapd

确保安装的是最新版本内核
sudo snap install core; sudo snap refresh core;

使用snapd安装certbot
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

最后，运行cerbot并自动配置apache运行https
sudo certbot --apache

其中，certbot会要求输入域名、email等信息，基本上照做就行。

成功后cerbot会返回如下信息
Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/favinavi.com/fullchain.pem
Key is saved at: /etc/letsencrypt/live/favinavi.com/privkey.pem
This certificate expires on 2023-06-26.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

包含证书和密钥文件保存路径，证书过期日期等，并且告诉您可以让certbot在后台自动更新证书。

by: fanshome  visibility 888
2023-05-21 07:24 (UTC)

纯css+svg实现，鼠标移上去心脏会有节律地跳动，适合用来做点赞按钮参考，或者学习css动画技巧。

by: fanshome  visibility 870
2023-05-21 12:19 (UTC)

非常真实的抖动效果，鼠标移上去还有叮当声哦...

点“演示”按钮体验一下。

by: fanshome  visibility 1424
2023-05-25 08:52 (UTC)

Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。

现在流行纯css的loading效果，比如不断转圈式、不断跳动式，网上有很多。这里不多做介绍，搜索一下会有很多。

给大家介绍一款动态横条式彩虹loading效果，类似谷歌风格，又超越谷歌的单一颜色Loading Bar，既充分利用了容器顶部的“无用”空间，又不失醒目，用户体验比较好，干扰的感觉最小，同时又感觉酷炫、美观。点击本页红色的“演示”按钮看看吧。

css代码参考自：https://codepen.io/lister/pen/mdrrYJQ

这不是进度条，进度条一般是逐渐填满的形式，有另外的实现方式。

by: fanshome  visibility 1036
2023-05-20 08:35 (UTC)

使用css: linear-gradient来实现线性颜色渐变背景，效果见下图：
[img]

点击“演示”按钮可以查看效果。

by: fanshome  visibility 896
2023-05-20 13:50 (UTC)

在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。

为了提高页面的加载速度，讲究点的方法是：
假如某个页面有多个小图片（比如二十个小图标）需要显示，可以把这二十个小图片合并到一张大图，然后通过背景图片切片的方法（background-position:）来显示不同的小图片，从而极大地提高页面加载速度。

当今时代，适配大大小小各类屏幕成了某种必需，最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多，但是，尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。

有些时候，我们需要为同一类型、同样大小的链接配上不同的图片，此时，假如能够只使用一张图片来解决问题就更好了。例如，某些场合要用户选择不同的浏览器来进行下一步，假设用到以下这一张图片中的5种浏览器：

[img]

需求是：图片能自动适配不同屏幕宽度，使用背景图片方式来分割出5个链接，缩放窗口大小时，图片自动跟着缩放，同时宽高比不变，即保持图片不变形；与此同时，对应的5个链接也要随着背景图片的缩放而同比例缩放。

那么要怎么实现呢？请看以下CSS代码，任何用到宽度、高度的地方都使用百分比，保证缩放比例不变形。

by: fanshome  visibility 999
2023-06-03 06:09 (UTC)

有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜像。
与其化精力重新画图或寻找合适的图标都太麻烦，不如用css的transform来实现镜像。
正好favinavi的logo非常适合来说明镜像效果，请点击“演示”按钮查看效果。
favinavi.com的logo: [img]

by: fanshome  visibility 1508
2023-05-25 17:06 (UTC)

记录一些经常用到的时间处理函数以备用。

by: fanshome  visibility 1002
2023-06-02 14:05 (UTC)