Articles in the category of 默认分类

默认分类,Windows

作为个人认为最好用的播放器之一的MPV播放器,其开源,体积小,支持的格式多样等等非常优秀的功能。但其中也有部分麻烦的地方,因为功能太过强大,导致不知道某些功能的快捷键是什么,这就非常需要一个可以查阅的表了。但是官方给的说明太过长了,我还是自己整理一下吧,也主要是自己常用到的快捷键。
效果按键
RIGHT前进 5 秒
LEFT后退 5 秒
LEFT后退 5 秒
UP前进 60 秒
DOWN后退 60 秒
Z和X改变字幕延迟时间
Alt + =/-增加/减小字幕大小
“[”0.9091 倍速播放
“]”1.1 倍速播放
“{”0.5 倍速播放
“}”2.0 倍速播放
Backspace还原到 1.0 倍速
Space 或 p播放/暂停
“.”下一帧
“,”上一帧
9 或 “/”音量 -2
0 或 “*”音量 +2
f切换是否全屏
v显示/隐藏字幕
T切换是否前端显示
s截屏,有字幕
S截屏,无字幕
o显示进度条与时间,2 秒后消失
I (大写 i)显示当前文件名
1对比度 -1
2对比度 +1
3亮度 -1
4亮度 +1
5Gamma 值 -1
6Gamma 值 +1
7饱和度 -1
8饱和度 +1
l (小写 L)设置/清除 A-B 循环点
j/J选择字幕
“#”切换声道
q退出

可以看看官方的文件,有点多
mpv keybindings

- Read More -
默认分类,PHP,CSS,JavaScript

日期:2018.12.06


任务计划:

  • 暂定使用www.caiyy.vip作为开发域名
  • 学习并使用ThinkPHP 5.0
  • 学习并使用lazysizes懒加载实现图片的懒加载功能,减少因图片过多而导致的加载时间
  • 学习并使用instantclick预加载来实现页面的预加载功能,减少页面加载时间
  • 学习并使用Vue.js构建前端页面 thinkphp做后端的话,好像没有什么必要用Vue.js啊.

- Read More -
默认分类,JavaScript

引用了jquery.min.js文件,但是每次加载页面时间都过长,F12看到错误提示“jquery.min.map 404”

解决办法如下://# sourceMappingURL=jquery.min.map代码 删除就不会提示了

以下是对于source map的解释


一、从源码转换讲起


JavaScript脚本正变得越来越复杂。大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境。

常见的源码转换,主要是以下三种情况:

  • (1)压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。
  • (2)多个文件合并,减少HTTP请求数。
  • (3)其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

这三种情况,都使得实际运行的代码不同于开发代码,除错(debug)变得困难重重。

通常,JavaScript的解释器会告诉你,第几行第几列代码出错。但是,这对于转换后的代码毫无用处。举例来说,jQuery 1.9压缩后只有3行,每行3万个字符,所有内部变量都改了名字。你看着报错信息,感到毫无头绪,根本不知道它所对应的原始位置。

这就是Source map想要解决的问题。

二、什么是Source map


简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。

有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。

原文:https://blog.csdn.net/daijiguo/article/details/47829129

- Read More -
默认分类,CSS,JavaScript

instantclick 中文文档


文档官网:http://instantclick.io/documentation
文档基于:instantclick 3.1.0版本
翻译感谢;有道云翻译/谷歌翻译
细节说明;部分基于自己理解有所改动,其中部分我没有接触过的位置,并没有进行翻译,以免误导
特殊声明;文章允许转载,但是必须保留原文超链接出处,放置文章底部或者顶部方便查看位置!

入门指南


1,开始


下载InstantClick,公布的最新稳定版本是3.1.0 2014/12/25版本(日志

下载压缩的版本2.7kb 或者 下载未压缩的版本21kb

其他下载选项

最新的开发板在github上面

Bower: bower install instantclick
初始化 InstantClick
包括InstantClick和初始化它的页面:

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>

InstantClick现在在你的网站上激活了。
阅读以下内容会更好的有助于你使用InstantClick

2,InstantClick是如何工作的


从传统的web开发InstantClick几乎没有差异,但重要的是要了解他们。

InstantClick避开浏览器的页面变化周期
可以这样的理解:InstantClick技术使你的网站一个单页面应用程序;
这意味着浏览器不会改变页面了。
注意事项:

你不能依靠DOMContentLoaded或内jQuery.ready()来触发代码(相反可以使用文章事件和脚本的重新加载中的方法)。
第三方脚本,想要兼容InstantClick可能需要一些调整(看文章下面:事件和脚本的重新加载)
在页面变化上浏览器不会显示加载痕迹(看下文的自定义进度条).
第二个最重要的理解是InstantClick只改变body和title,这样你的js脚本是只会加载一次(这带来能一个不错的明显的速度提升)。

这所有的一切意味着什么:

你的css样式和js脚本的head应该是一样的在页面InstantClick上。
如果在你的head取决于页面的内容(像把一些js脚本或者css运行在页面里),它需要一点调整。
InstantClick增强:如果访问者的浏览器不支持InstantClick站点,那么链接将像往常一样工作(补充翻译:就是没有预加载效果正常的浏览),只是没有速度上的提高了。

3,预加载


InstantClick有不同的预压的选择,使用一个或另一个取决于你的服务器将允许。

In any case, not recalculating scripts and styles on every page change will already make your pages up to twice as fast (measured with Turbolinks, another project using this technique).【没看懂部分,故不翻译,好像就是个介绍】

默认值:on mouseover (hover)
鼠标移到超链接上就进行预加载,如果页面内容不是特别多,用户点击链接进入文章会立即显示。
代码按照初始化中提到的代码即可。

没有额外的服务器上的负载:on mousedown
在用户鼠标点击的瞬间来预加载页面,让服务器开销几乎为零,同时还有个不错的速度提升。
使用,将“mousedown”作为参数传递给InstantClick.init。

InstantClick.init('mousedown');

在两者之间: on mouseover with a delay
如果用户将鼠标悬停你的超链接后,InstantClick将根据你设置的时间延迟预加载。
建议延迟是100 ms和50 ms。超过100 ms实际上可能比on mousedown慢,小于50 ms和on mouseover (hover)几乎无差异

让InstantClick预加载延迟后,通过延迟毫秒InstantClick.init作为参数

InstantClick.init(50);

移动端会怎样
预加载会在用户手触摸超链接的一瞬间开始
如果你的网站优化的移动(设备宽度视窗在Android上,使用FastClick iOS),“点击”当游客从链接,发布他的手指给大约100毫秒的延迟预加载
如果你的网站不是优化了手机,这取决于操作系统。
Android给300 ms,iOS给450 ms。
3g请求在同一网站通常大约需要200 ms。

该怎样去选择

如果你的站点可以处理额外的负载:on mouseover (hover)
如果你的站点服务器不能有太多额外负载,那么用on mousedown,您的网站仍然会快于99%的网站。

If you’d like to determine if your server can, start with mousedown which will put virtually zero additional stress on your server. Then use mouseover with a 100 ms delay. Then with a 50 ms delay (or go by smaller decrements, if you’re patient). Then with mouseover directly.

If server-side analytics are important you are limited to mousedown, as using anything else would skew the data.【又一段翻译不好的,不太重要】

4,黑名单


如果一些链接不需要InstantClick预加载。黑名单可以做到。
什么事黑名单
什么样的连接需要设置黑名单,并且不能用白名单:

链接指向一个动作,如注销和切换语言。
链接指向html内容,需要一段时间来加载。
链接指向页面部分有不同css/js脚本
在JavaScript链接触发一个动作。
一些内部链接已经列入黑名单,不能白名单:

含有target或者download属性的超链接上。
在不同的域名上或者协议上。
在相同的页面上链接指向一个#锚。
黑名单的链接这样设置
黑名单的链接,添加一个data-no-instant属性。

<a href="/blog/" data-no-instant>Blog</a>

如何设置一组黑名单
有的时候为了方便,我们需要给一整组设置黑名单,这样的话就不是挨个超链接加data-no-instant属性了。
只需要给父级元素添加data-no-instant属性即可
例如

<div data-no-instant>
无数个需要加黑名单的超链接
</div>

白名单的链接或一组链接
如果上述无数个需要加黑名单的超链接中有那么几个不需要添加黑名单的,可以额外为这几个链接添加白名单属性data-instant

在幕后发生了什么是InstantClick穿过所有的父元素,从当前链接< html >,如果发现data-no-instant属性它认为列入黑名单并停止遍历的联系父母。如果找到一个data-instant它认为白名单的超链接。

如果你想黑名单默认情况下所有的链接,然后白名单链接一个接一个的加,或白名单只有链接在一个容器,那么添加data-no-instant属性到,并且将data-instant属性添加到需要预加载的容器/链接。

白名单模式

The following is deprecated and will likely be removed in 4.0. It’s only useful to know if you’re dealing with a website that has it activated (the true argument is passed to InstantClick.init).
The Correct Way™: If you want to accomplish the same as the whitelist mode, just add data-no-instant to your , as described in “Whitelist a link or group of links”.

启用白名单模式通过true来InstantClick.init

InstantClick.init(true);
/* or */
InstantClick.init(50, true);
/* or */
InstantClick.init('mousedown', true);

5,事件和脚本的重新加载


InstantClick技术让你的网站成为一个单页面应用程序,所以没有DOMContentLoaded开始页面内的变化了。正因为如此,其他的js脚本可能需要调整与InstantClick正常工作。

InstantClick 4个事件提供钩子为页面的生命周期:

change:页面更改完毕,即click触发
fetch:页面开始预加载
receive:页面预加载完毕,即:hover或mousedown触发的预加载,但不一定会change,因为用户不一定click。
wait:用户点击一个链接,但是还没有加载的页面。只有立即触发页面时不显示。
如不在body中有个脚本不希望被重新加载,那么给他加上黑名单属性即可

<script data-no-instant>alert("I’m only run once.");</script>

如果你的脚本与预加载冲突,你需要一个一个的找出来,并解决他

为例,这是如何让Google Analytics(2013年底代码)工作:

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga('send', 'pageview') */
 
InstantClick.on('change', function() {
  ga('send', 'pageview', location.pathname + location.search);
});
 
InstantClick.init();
</script>

改变内容receive【这部分我不熟悉,故不翻译】

Sometimes it’s simpler to alter pages on the fly than to rearchitect your back end for InstantClick. receive allows you to do that.

It gets three arguments: url, body and title.

url is the address of the page received, it includes the hash. It’s read-only.

body is the body object and title is the title text. You can modify those two and return an object with them (or with just one of them to modify only one) if you want to alter pages before they’re displayed.

Here’s an example.

InstantClick.on('receive', function(url, body, title) {
  var dont_display = body.querySelector('#dont_display_me_when_loaded_with_instantclick')
  if (dont_display) {
    dont_display.setAttribute('hidden', '');
  }
  title += ' (loaded with InstantClick)';
  
  return {
    body: body,
    title: title
  };
});

Keep in mind the body object here is body and not document.body!

When you have more than one callback listening to receive, each subsequent callback will get the last altered content.

If you don’t want to alter the page on receive, either don’t return anything or return false.

进一步


1,跟踪资源的变化


现在跟踪资产的方式改变目前有点笨拙。它可能会在InstantClick 4.0上有所改变。
检查当样式表或脚本(外部或内联)被更新时,将其添加data-instant-track属性:

<link rel="stylesheet" href="style.css" data-instant-track>
<script src="script.js" data-instant-track></script>
<style data-instant-track>body { background: aliceblue; }</style>
<script data-instant-track>window.timingStart = performance.now();</script>

InstantClick将检查更改href或src属性是否存在,表明一个文件被更新,修改其属性:

<link rel="stylesheet" href="style.css?20140308" data-instant-track>
<script src="script.js?20140308" data-instant-track></script>

如果是内联js脚本或css风格,InstantClick将检查改变元素的内容

<style data-instant-track>body { background: midnightblue; font: 13px Helvetica; }</style>
<script data-instant-track>var timingStart = performance && performance.now();</script>

当检测到任何变化,InstantClick将重新加载页面,从而使浏览器重新评估所有脚本和样式。

2,自定义进度条


这个进度条进度条是假的,只是让用户意识到将要发生什么。

在未来可能会展示真正的进度条
在未来的改变中,The bar is displayed even if the page has been loaded instantly。在GitHub上讨论。
默认情况下,进度条的颜色是#29d,你可以用CSS改变:

#instantclick-bar {
  background: white;
}

你也可以让他消失:

#instantclick {
  display: none;
}

目标
Roadmap
Changelog

转载自:https://qqdie.com/archives/instantclick.html

- Read More -
默认分类

SublimeText3激活码一枚


自己记录一下而已

----- BEGIN LICENSE -----
sgbteam
Single User License
EA7E-1153259
8891CBB9 F1513E4F 1A3405C1 A865D53F
115F202E 7B91AB2D 0D2A40ED 352B269B
76E84F0B CD69BFC7 59F2DFEF E267328F
215652A3 E88F9D8F 4C38E3BA 5B2DAAE4
969624E7 DC9CD4D5 717FB40C 1B9738CF
20B3C4F1 E917B5B3 87C38D9C ACCE7DD8
5F7EF854 86B9743C FADC04AA FB0DA5C0
F913BE58 42FEA319 F954EFDD AE881E0B
------ END LICENSE ------

- Read More -
默认分类,JavaScript

地址


https://github.com/aFarkas/lazysizes

简直是最强懒加载插件了,我发现的优点如下:

  1. 不依赖JQury,仅6.62 KB的文件
  2. 不需要手写Js配置,引入下面代码即可。
<script src="lazysizes.min.js" async=""></script>
  1. 性能很高,并且支持响应式图片.
  2. 多样且便捷的加载样式:http://afarkas.github.io/lazysizes/#examples
  3. SEO友好,搜索引擎可以正常读取图片

- Read More -
默认分类,PHP

生成二维码


可以同时支持HTTP跟HTTPS协议
https://api.qrserver.com/v1/create-qr-code/?data=https://www.caiyy.cn/&size=100x100

参数

  • data : 二维码数据 必须
  • size : 二维码大小 (格式:100x100) 可空

解析二维码


可以同时支持HTTP跟HTTPS协议
https://api.qrserver.com/v1/read-qr-code/?fileurl=http://qc.caiyy.cn/1.jpg

参数

  • fileurl : 二维码网络地址

官方API文档 (英文)

http://goqr.me/api/doc/read-qr-code/

- Read More -
默认分类,Mac

有些用户下载了一些程序之后,却发现无法在MAC中安装,安装时会弹出下图所示警告框:“打不开 xxx,因为它来自身份不明的开发者”。那么该如何解决这个问题呢?

原因


在MAC下安装一些软件时提示"来自身份不明开发者",其实这是MAC新系统启用了新的安全机制。
默认只信任 Mac App Store 下载的软件和拥有开发者 ID 签名的应用程序。

这当然是为了用户不会稀里糊涂安装流氓软件中招,但没有开发者签名的 “老实软件” 也受影响了,安装就会弹出警告框:“打不开 xxx,因为它来自身份不明的开发者”。

解决方法


最简单的方式:按住Control后,再次点击软件图标,即可。
修改系统配置:系统偏好设置... -> 安全性与隐私->修改为任何来源。

无任何来源选项的解决办法


  1. 打开终端。
  2. 输入sudo spctl --master-disable后回车。
  3. 输入密码,这个密码是隐藏的,你看不到,确保自己输对了然后回车。
  4. 回到安全性与隐私,任何来源就出现了。


如果出现无法加载镜像等问题,请重新使用单线程下载dmg格式文件

- Read More -
This is just a placeholder img.