以下文章归类于 ‘技术类’

准确来说是动画过程消失,有开头有结尾,但是看不到中间过程。这是我今天发现的一个问题。问题并不在与jquery而是在网页代码本身。其实在原理上我并不知道jquery是如何实现动画效果的,这也导致了这个问题的出现。下面我来描述一下这个问题,算做一次笔记防止以后再发。

在有些时候,我们希望网页中的几个元素成为一个整体进行jquery动画。比如

<div id="div1">
<div id="div2">...</div>
<div id="div3">...</div>
...
</div>

这里我们懒得把div2和div3单独做动画,也没必要。我们直接用jquery做div1的动画,这样被包裹的div2和div3会形成一个整体随着div1的动画来展现。这样做一般来说是没问题的,但有些动画需要div1的尺寸。什么意思呢?一般来说当div1包裹div2和div3的时候,div1的尺寸和div2+div3。但这并不绝对,比如当你设定div2和div3的css中float时,如果此时div1没有设定float你会发现div1的尺寸并不是div2+div3。OK,我相信会写网页代码的人应该都很熟悉这个特点。当div1里的所有元素全部都float的话,此时div1的尺寸是0。然后我们再对div1做jquery动画时,你就会发现有些动画对尺寸为0的元素会消失。这就是这个问题的由来。

总结一下就是用jquery动画有个原则,就是我们让jquery作用的元素一定要有尺寸。当然最好尺寸和所包含元素的尺寸之和一致,这样动画的表现最为准确。

左半红印发表于2020.08.3rd

5月7日更新,时间校准后依然还会有500报错,下方的方法是无效的。目前可知最简单的解决方法就是重启一下客户端。

这是我自己架设VPN服务器后遇到的问题,不好说是否已经解决,只是暂时OK了,需要在日后使用中继续观察。以下是报错信息。

500 Internal Privoxy Error
Privoxy encountered an error while processing your request:

Could not load template file no-server-data or one of its included components.

Please contact your proxy administrator.

If you are the proxy administrator, please put the required file(s)in the (confdir)/templates directory. The location of the (confdir) directory is specified in the main Privoxy config file. (It’s typically the Privoxy install directory).

这个问题并不是我一个人遇到的,实际上网上我看到有不少人都遇到了。但解决方法几乎都不靠谱。因为基本上碰到这个问题的人都没有搞清楚到底为什么会产生这个错误。一直到最后我找到了这篇日志

https://www.obodizhu.com/online/v2ray-fix-500-internal-privoxy-error.html

感觉上说的挺靠谱的,问题出自V2RAY对服务器和客户端时间匹配要求较高,所以一旦出现使用端和服务器的本地时间发生较大差异时会报这个错误。依照这个理论解决方法其实不难,也就是同步客户端和服务器的时间同步网络时间即可。本地的时间同步我就不写了,很简单。我接下来遇到的问题是我的服务器装的ubuntu系统,那么咋个同步网络时间呢。首先,安装ntp,注意不同linux的安装方式不一样,ubuntu的方式是

apt-get install ntp

在安装的过程中仔细看一下就会发现,ubuntu本身自带这个,所谓安装不过是给ntp升了个级。OK,因为我是这方面小白,所以还是解释一个ntp是个啥,我直接引用了。

网络时间协议,英文名称:Network Time Protocol(NTP)是用来使计算机时间同步化的一种协议

升级后ntp后开始同步时间,同步对象是ntp时间服务器

ntpdate pool.ntp.org

可惜报错

the NTP socket is in use, exiting

网上查了一下,大部分都说是因为ntp的默认socket号是123,而ntp本身正在占用这个socket号,所以无法同步。解决方法就是暂时停用ntp服务

service ntpd stop

但神奇的是我这里又报错了

Failed to stop ntpd.service: Unit ntpd.service not loaded.

其实到最后我才发现,我这里要停止的服务应该是ntp,可为什么网上都写着ntpd呢?那当我输入停止ntpd的命令时肯定是报错啊。不过当时我并没有太在意这点,而是找了其他方法来关闭ntp,就是kill PID。利用下面这个命令查看默认端口123的占用者是谁。

lsof -i:123

会得到这个结果

COMMAND   PID USER   FD   TYPE   DEVICE SIZE/OFF NODE NAME
ntpd    20150  ntp   16u  IPv4 48022499      0t0  UDP localhost.localdomain:ntp 
ntpd    20150  ntp   17u  IPv4 48022501      0t0  UDP 172.19.0.10:ntp 
ntpd    20150  ntp   18u  IPv6 48022503      0t0  UDP ip6-localhost:ntp 
ntpd    20150  ntp   19u  IPv6 48022507      0t0  UDP [fe80::5054:ff:fea5:7d38]:ntp

诶?名称是叫ntpd啊?!不管了,这个名称不对。kill对应的PID即可。然后重新nptdate校准时间。

kill -9 20150

最后为了验证这货到底叫啥,我试验了一下

service ntp stop

成功!所以不管别的系统里什么情况,至少在ubuntu里,ntp就叫ntp。

左半红印发表于2020.05.4th

在CSS3中,有个新属性是animation,当然了如果你了解的话,transition也是一样的道理。这两个CSS3中的新属性可以让元素在页面中完成你想要的一些动画效果。但是,background-image不支持这两个属性。说实话这很扯淡,background-image也是CSS3中新增的属性,自己不支持自己还行?!

https://www.w3.org/TR/css-backgrounds-3/#the-background-image

W3有明确的显示Animatable:no,但就是不说为啥。

Name:	background-image
Value:	<bg-image>#
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	as specified, but with URIs made absolute
Animatable:	no

这个问题网上有个很麻烦的方法,简单说就是用backgrond-position属性,把整个动画过程切成N帧,然后把这N帧拼接成一张图,再利用CSS3定位这张图中不同位置的帧来造成动画的效果。超级麻烦好吗,先不说这个方法还要利用插件或者第三方工具来拼图,录制动画成N帧就没法弄。算了,自己来。

这里我用自己的实际情况来说明,本站的文章标题就是这个效果的完成品,鼠标移进移出的特效。红色渐变效果是用background-image中的渐变(background-image: linear-gradien)效果实现的。我无非需要它淡入淡出而已,所以很自然的可以想到利用jquery或者jqueryui,后者更方便,一个toggle方法既可以满足。

而需要调整的其实是html和css。首先是HTML,文章标题是一个简单的a链接,a后面接一个div作为背景。CSS如下:

#title a {
    z-index: 10;
    position: relative;
}

.title_background{
    background-image: linear-gradient(to right, rgba(88, 199, 238, 0), rgba(255, 0, 0, 0.5), rgba(88, 199, 238, 0));
    height: 40px;
    z-index: 0;
    position: relative;
    top: -40px;
    display: none;
}

需要注意的是div的position要设置成relative,这个属性的意义在于依据父元素定位。所以通过设置top或者left为一个负值,就可以使这两个元素重叠。我们发现a链接的属性也有position:relative,这个目的在于使z-index生效。我们希望a链接能够显示在div的上层。请注意,z-index是在position设置除了static以外的属性下才能生效的,而position的默认属性就是static,所以必须给position一个其他的设定值,这里卡了我很久。

还有一点需要说明,我们能不能将背景div放在a链接前面呢?看起来没啥区别,只是调整位置的变成了a链接而已,但是在下面的jquery动画中会出现问题,toggle方法的本质其实是将动画层的display属性最终设置为none或者block,但是背景div的display属性会影响到a链接的position定位,所以这导致在执行jquery动画后a链接的位置发生偏移,这不是我想要的。

然后是js代码,这里不多讲了,懂得自然懂。

function title_hover() {
	let title_button = document.querySelectorAll(".title_content");
	for(let i =0; i < title_button.length; i++){
		$(title_button[i]).mouseenter(function () {
			let title_b = this.querySelector('.title_background');
			$(title_b).toggle("fade",500);
		})
		$(title_button[i]).mouseleave(function () {
			let title_b = this.querySelector('.title_background');
			$(title_b).toggle("fade",500);
		})
	}
}

其中的title_content是用于包裹a链接和背景div的div,主要用于判断鼠标进出的边界。

左半红印发表于2020.04.19th

说道部署php环境,现在win系统下最方便的方式应该是就是利用xampp部署apache了。但是,国内用户应该都知道,xampp官网的下载渠道非常不友好。所以才有了国内大量软件网站在提供xampp各种版本的下载。出于无奈吧,在上次升级win后,用了较早版本的xampp,部署了apache 2.3.17。

本来也没啥问题,但是在前天,服务器在某个时间点突然CPU被沾满,然后无法访问。重启后恢复正常,查找log后发现在问题发生时间点有如下报错。

[Mon Mar 30 11:04:03.905588 2020] [ssl:error] [pid 1708:tid 1676] [client 52.80.254.107:56510] AH02042: rejecting client initiated renegotiation
[Mon Mar 30 11:04:04.413411 2020] [ssl:error] [pid 1708:tid 1632] [client 52.80.254.107:56504] AH02042: rejecting client initiated renegotiation
[Mon Mar 30 13:21:27.467767 2020] [mpm_winnt:error] [pid 1708:tid 3428] AH00326: Server ran out of threads to serve requests. Consider raising the ThreadsPerChild setting

先说最后那个报错,这个很简单,就是线程满了,溢出了。apache对win系统的线程设置位于conf/extra/httpd-mpm.conf

以前的版本中,需要再httpd.conf中启用,现在默认应该是开启的。设置下面两个参数,每个子线程最大数写到1000,总共数写到10000

<IfModule mpm_winnt_module>
    ThreadsPerChild      150
    MaxRequestsPerChild    0
</IfModule>

上面那两个就比较烦人了,目前我能查到的原因竟然是apache 2.4.37的bug

https://bz.apache.org/bugzilla/show_bug.cgi?id=63052

https://blog.qualys.com/ssllabs/2019/01/23/mod_ssl-bug-and-ssl-labs-renegotiation-test?_ga=2.230200031.259520135.1585749703-39262125.1585657218

没办法了,只能升级了。不过说实话,xampp的升级策略真的够呛,说白了根本就是没有升级。xampp甚至无法安装在已经有文件的文件夹里,于是能做的就是尽量备份所有资料和配置文件。这里说的所谓的尽量备份,其实意思反而正相反。只备份配置文件,别的文件能不用的完全别用。包括apache、mysql在内只要一点文件不对,就启动不了。最后再说一下mysql的简单备份方法,用cmd。

mysqldump -h localhost -u root -p mydb >e:\mysql\mydb.sql
mysql -h localhost -u root -p mydb2 < e:\mysql\mydb2.sql

-p后面输密码不要加空格,导入时需要现在数据库里建立db才能往db里面导入。

弑神发表于2020.04.1st

对 Windows Server 2008 和 2008 R2 的支持已于 2020 年 1 月 14 日结束。这意味着定期安全更新也已终止。

终于收到通知,server2008算是正式退出历史舞台。当时选择实例配置时,图便宜选了server2008。没想到过了没多久,就得升级了。server2008不是不能继续用,而只是不再得到微软支持,这意味着未来得不到任何安全升级。现在这个网络环境,这个风险不好说不大。

好在腾讯云还算有点良心,2008升级到2012免费。但免不了折腾一番,大量配置要重新来过不说。本来我觉得自己已经有了足够的备份,竟然还是把SSL证书给忘了。翻了老久的邮件,重新下回来,翻来覆去弄了一下午,总算恢复网站。

说到网站,目前Blackhack的版本是2.4.2,在github上的发行版本是2.4.1。除了修复了几处BUG外,还新作了网页图标。不过这里还有个问题,当时在修复BUG的时候,因为失误导致丢失了微博API的Access token。按理说,继续使用微博的PHP SDK应该能找回来,但死活不行,不知道为什么。最后还是参照文档,post到指定地址后才弄回来。是这个SDK不能用了吗。

左半红印发表于2020.03.18th

这是一个wordpress在各类升级中经常会碰到的一个错误,尤其是当你的wordpress架设在国内的时候,wordpress.org对国内的访问并不友好。所以在升级时会有类似下面这样的报错。

cURL error 28: Connection timed out after X milliseconds
cURL error 28: Operation timed out after X milliseconds with Y out of Y bytes received

首先让我们知道cURL是PHP的一个库,wordpress借助它与其他站点进行传输。所以我们看到的报错信息是cURL error。

报错可能引起的原因有两种,一种是本身对方服务器就无法访问,或者是链接错误等等,也就是说是真的没法访问。这里我说的是第二种,因为国内链接速度过慢,导致在规定时间内无法完成下载。所以这时候我们需要修改配置文件。php.ini的修改就不说了,我并不知道是否对该错误有效。因为我的配置文件中本来就设置的足够长。然后让我们看看其他设置。

先是wp-includes/class-http.php

查找里面的timeout,新版的wordpress的配置文件大都遵循现将配置参数放在一个数组里面,数组名字通常是$defaults。里面的timeout默认设定是5,修改它到10。然后试试,请注意这也不一定是个有效的修改,可能依然还会报错。

接下来是wp-includes/class-wp-http-curl.php

这应该会是一个有效的修改,同样搜索timeout,默认依然是5。改的足够大吧,大道让你服务器缓慢的链接速度足够下载更新。

请注意,以上所有设定的修改都可能需要php环境的重启才会生效。

感谢Samuel Aguilera的http://www.samuelaguilera.com/post/curl-error-28-wordpress 本文的大部分内容出自该篇文章。

弑神发表于2020.02.15th