favinavi - Online notes-page5

很久以前，还没有flex布局方法的时候，想要在同一行内的两个元素分两端左右对齐，应该使用float方法，左边的元素使用float:left; 右边的元素使用float:right;。

现在，flex布局大行其道，要想达到同样的目的，理论上使用flex的方法效果应该更好。

简单记录一下备用。

by: fanshome  visibility 461
2023-05-28 06:45 (UTC)

在卡片列表式页面展示文章内容时，除文章标题外，经常需要显示文章简介。简单粗暴的做法就是只显示文章的开始部分内容，这时就会要求简介部分固定高度，不能超出，同时尤其是中文，不能轻易使用字符串截断，最好是能够使用CSS来截断，同时添加省略号...，以便在不同屏幕上，卡片宽度自适应的同时，简介部分的内容也实现自适应。

注意：-webkit-line-clamp 不规范的CSS属性，使用时请注意有浏览器兼容性问题。

另外，如果是单行文本截断并加省略号的话，要加white-space: nowrap;

by: fanshome  visibility 387
2023-06-05 08:01 (UTC)

简体中文世界里的网络收藏夹类网站，我个人观点：pinbox是做得非常用心的一个，看得出来背后有一个专业团队在开发和运营，人数多少不知道，但肯定是比favinavi单枪匹马的强太多了。

印象最深刻的就是pinbox的UI界面，外观非常大气漂亮，要我自己打分的话，基本上中文收藏类网站可以排第一。它的特点是可以收藏几乎网上的任何内容，除了网页书签，还可以收藏文档、图片等，比favinavi.com功能多，这里表示敬佩一下。

favinavi虽然UI算不上一流，但是新版经过努力改进，比旧版的“favii.cn”人性化网络收藏夹进步太多了，现在应该也算能看，要求不是特别高的话，可以算过得去，还行吧。favinavi人性化网络收藏夹主要是侧重于网络书签的收藏以及相关功能，一方面可以减少开发工作量，另一方面可以在界面等诸多方面只考虑书签收藏这一个需求，把话说的漂亮点就是专注，哈哈。

就我自身而言，暂时对收藏文档、图片等需求不是特别突出，所以我还是用favinavi.com来收藏管理书签。假如您不仅有书签收藏的需求，同时也要收藏文章、图片等，那您可以考虑使用pinbox。favinavi的前身favii曾经提供过文档收藏功能，但是迫于监管压力，没有足够精力进行审核，所以后来就不再提供文档收藏功能了，未来应该也不会考虑文档、图片等的收藏功能。

把自身与同类型网站比较，可能有点犯忌讳，但是各自侧重点不同，简单描述对比一下并不过分吧。就此打住，pinbox的各位不要来打我啊！

by: favinavi  visibility 657
2023-06-09 13:42 (UTC)

记得最早是在2007年，那时工作需要，经常用浏览器上网查资料、访问工作网站等等。经常遇到一个问题，就是白天工作时看到一个网站的某篇文章很有用，在浏览器设为了书签，方便后续再访问。但是晚上回家后，再想访问时却记不住网址，只能再次使用搜索引擎搜索。但是经常性的，可能使用的关键词不同，或者搜索引擎不同，就再也找不到想要的网页，只能第二天上班后再说了。（当时的浏览器普遍还没有提供书签同步功能）

于是我就想，这肯定不是个别现象，一定有很多人遇到了和我同样的问题，不如我做一个网站，一方面自己可以用，另一方面也可以免费提供给大家使用。于是，favii.cn人性化网络收藏夹诞生了。可惜，注册域名的时候让朋友帮忙，本来想用favii.com，结果朋友一个疏忽，搜索了一下favii.com可用，忘了即时付费拿下，于是就被无良的域名商抢注了，只能退而求其次用了favii.cn。

域名弄好了，说干就干，花了大概半年的业余时间，终于把网站搭起来了，从服务器租用，各种服务器环境的搭建，数据库、前后端代码、美工，全部是一个人。当时国内基本没有同类网站，所以网站上线后算是有点小火，没有宣传的前提下，半年多就有了几万活跃用户。

可惜，当时由于工作比较忙，事情比较多，网站后续运营方面没有花什么心思，并且出于监管方面的频繁关注，把当初网站一个非常重要的板块“文档收藏”给砍掉了。所以，慢慢的，网站影响力不断下滑，用户增长也逐渐减缓，基本就是活跃用户在使用。

现如今，网络收藏夹网站非常多了，那么favii为什么还要改版呢？一方面，随着这些年智能手机的普及和发展，PC使用量下滑，老版favii只适配pc浏览器，已不符合时代发展的需要。二放面，favii还是拥有不少铁杆粉丝用户，这些用户的鼓励（包括指责）是促使我下决心继续做新版favinavi.com的动力来源。

要说favinavi网络收藏夹的最大特点，我自己觉得就是追求极致的“懒惰”。翻译一下，就是尽可能做到鼠标“一次”点击就能访问想去的网站（当然不包含打开浏览器的那一次）。所以，这就是为什么favinavi在用户登录页面要仔细介绍如何把favinavi设置成启动页（或首页）的原因，因为这样，“一次”点击的目标才能达成。这也是为什么favinavi不顾美观的要求，一定要把书签排列得比较紧密、字体也不够大的主要原因。一切的一切，都是为了能够实现打开浏览器，就见到几乎所有经常使用的书签，甚至连鼠标滚动的动作最好都能省掉，鼠标点击一下，直接就访问想去的网页。

favinavi第二个特点，就是从一开始就提供了收藏夹分享功能，方便用户把收集的书签分享给同学、同事、朋友，所以特别适合教师、学生、程序员、工程师、公务员等需要经常上网查资料、收集资料、整理资料的群体使用。老版本没有提供“只分享一部分书签”的功能，新版本网站在这方面做出了改进。

第三个特点，就是我个人始终特别关注的：网页呈现速度。一方面购买使用大牌运营服务提供商的服务器，另一方面在网站代码上绞尽脑汁，充分考虑如何提高用户打开页面的速度，即使一个用户收藏了近两千个书签，加上近两千个需要同时显示的网站图标，都要做到尽量页面“秒开”。

好了，现在新版网站开发基本完成，后面就看大家的反响了。有任何问题请到本站留言板留言，谢谢大家！

by: favinavi  visibility 346
2023-06-09 13:41 (UTC)

MDUI前端框架不错，很漂亮、灵活，用起来能省不少时间。

但是有些时候，它也会引入一些意想不到的问题：比如我想做一个统计表格，统计一大堆数据，然后希望页面滚动的时候，表格头部能固定在页面顶端，方便查看数据。本来，这个功能实现起来很简单，css里写上：thead tr{position:sticky;top:60px;} 就能解决问题了。

然而，使用了MDUI的css框架后，预期的效果没有出现，表格头随着滚动一起和表格内容一样被消失了。上网搜索了一堆文章，检查了表格的父容器属性等等，都没有效果。最后没招，使用排除法，确认问题出在MDUI框架的”mdui-table-fluid“样式上，overflow-x:auto这句导致了position: sticky不生效。

本来，使用mdui-table-fluid样式是为了在手机上查看表格时，横向宽度不够，可以用手指左右拖动表格来查看完整内容，非常方便。谁知道会影响sticky属性能。

发现了问题，解决起来就容易了：
@media (min-width:1024px){.mdui-table-fluid{overflow-x:initial;}}

这样，在PC上再查看表格的时候，表格头可以固定住了，手机上不受影响，继续可以左右拖动，完美！

by: fanshome  visibility 391
2023-05-24 08:27 (UTC)

正则表达式写起来不难，但是要做到准确无误却是一个不小的挑战，经常因为一个小疏忽，导致貌似正常而实际上却有bug。

尤其是域名或url相关的，特别容易出错，出错的主要原因是没有考虑到实际情况下的url参数中可能也包含域名。

所以自己做一个小工具，用来测试和检测写的正则表达式是否准确有效。

by: fanshome  visibility 552
2023-05-29 14:54 (UTC)

统计页面访问量的方法有无数种，这里介绍我的“低级”方法：
1、当然是先用数据库建立一张访问统计表，每个需要统计的页面单独需要建一个字段，比如首页就用“index”。
2、区分是否是移动终端访问，这个其实是有难度的，不可能100%精确统计，我们就退而求其次，大概能统计到位就行，采用正则判断User Agent的方法：

$MOBILE=preg_match("/(android|mobi|phone)/i",$_SERVER['HTTP_USER_AGENT'])?true:false;

这个方法肯定不够精确，只能说大致够用，包含了"android"、"MOBI”、"mobile"、"phone"、"iphone”等关键字，基本OK吧。

3、定义需要统计的页面，用一个数组：
$botsArr=array(//常用搜索引擎爬虫识别
["baidu" ,"Baiduspider"],//百度爬虫
["google","Googlebot"],//谷歌爬虫
["bing" ,"bing"],//微软bing爬虫
["360" ,"360Spider"],//360搜索so.som爬虫
["sogou" ,"sogou"],//搜狗搜索爬虫
["yandex","yandex"],//yandex爬虫
["junkBot","(MJ12bot|AhrefsBot)"],//垃圾蜘蛛爬虫
["otherBot" ,"(bot|spider)"]//其它明确标志自己的爬虫
);
其中，每个数组下标0代表爬虫名字，下标1代表爬虫的USER_AGENT必须包含的关键字，基本做到了简单并且够用。

for($i=0;$i<count($botsArr);$i++){
if(preg_match("/".$botsArr[$i][1]."/i",$_SERVER['HTTP_USER_AGENT'])){
$isBot=true;//是个爬虫
//执行sql，数据库插入统计记录；
...
$i++;
break;
}
}


再定义一个数组，包含所有需要统计的页面文件名称：
$statItem=array("文件名1","文件名2",...);

if(in_array($filename,$statItem)){
//执行SQL语句
//数据库插入统计记录
}

by: fanshome  visibility 367
2023-05-23 15:54 (UTC)

基本方法：
1、-weblit-text-strok：字体描边，非标准方法，浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身，属于在字体内部描出边界，所以字体完全不走样。
2、text-shadow：字体阴影，符合标准规范，现代浏览器普遍支持。重点：可以用重复多次不同偏移量阴影来实现描边效果。但是假如用这种方法来做纯包围式描边（不模糊blur）的话，效果不完美，如果描边宽度比较大的话，斜边的尖角部分会出现“锯齿、缺角”等。

语法：{text-shadow: h-shadow v-shadow blur color;}
4个参数分别表示：水平偏移、垂直偏移、模糊（扩散）、描边的颜色。

我们可以根据实际需要选择，效果如下图：
[img]

by: fanshome  visibility 564
2023-05-29 14:57 (UTC)

新版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 390
2023-06-09 13:43 (UTC)