当浏览器全面禁用三方 Cookie
苹果公司前不久对 Safari 浏览器进行一次重大更新，这次更新完全禁用了第三方 Cookie，这意味着，默认情况下，各大广告商或网站将无法对你的个人隐私进行追踪。而微软和 Mozilla 等也纷纷采取了措施禁用第三方 Cookie，但是由于这些浏览器市场份额较小，并没有给市场带来巨大的冲击。
从 2017 年截至 2019 年底， Google 面临的罚款总额已经超过 93 亿欧元，其中一大原因便是侵犯用户数据隐私。迫于巨大压力，Google Chrome 官方团队前不久也宣布，为了提升用户隐私和安全，未来两年将完全禁用第三方 Cookie。
在完全不能写入三方 Cookie 的情况下，将会对前端的数据读写方式，甚至是整个广告行业带来巨大影响。
Cookie 的意义
众所周知，HTTP 协议是无状态的协议，如果你在同一个客户端向服务器发送多次请求，服务器不会知道这些请求来自同一客户端。
这正是 HTTP 协议得以广泛应用的原因，试想一下，如果它是有状态协议，你必须要时刻与服务器建立链接，那么如果连接意外断开，整个会话就会丢失，重新连接之后一般需要从头开始；而如果是无状态协议，使得会话与连接本身独立起来，这样即使连接断开了，会话状态也不会受到严重伤害，保持会话也不需要保持连接本身。
如果 HTTP 协议只是用来访问静态文件，那不会有任何问题，但是如果你要为广大用户提供更好的服务，服务器就需要知道每个请求具体来自于哪个用户，比如你在逛淘宝的时候你只需要登录一次，当你发起一次购买请求，服务器就已经知道你登录过了，不会再让你进行登录。
所以 HTTP 协议需要占用浏览器的一小块存储，存储当前访问用户的一些
HandBrake乃MP4免费压缩webm转换工具不二之选
一、HandBrake下载
直接官网下载即可，完全免费：https://handbrake.fr/
安装过程略。
二、如何压缩一个MP4视频
- 选择要压缩的视频：
- 一定要勾选Web Optimized，否则视频会有3次请求。
- 此时不做任何事情，视频也会被压缩。如果你想进一步降低视频的体积，可以切换到Video选项卡，然后通过降低帧率以及调节图像质量达到目的。
- 音频这块128kbps足矣。
- 选择存储的路径，设置压缩后的视频名称：
- 点击Start Encode按钮，完成压缩。
三、如何压缩多个MP4视频
- 选择文件夹，或者直接拖进来多个视频文件：
- 点击title切换对应的视频：
- 其他操作同压缩一个MP4视频一样，略……
三、其它
我最喜欢HandBrake的一点就是默认其保留原始的视频尺寸，对于web开发，我们的视频尺寸是不规则的，以前一些视频工具都只能套特定的尺寸，真的很烦。
HandBrake还能去除视频的黑边（如果视频有黑边的话）：
Video选项卡中的每一项都能压缩视频，不过我个人对视频研究甚浅，下面的Optimise Video并不清楚到底是个啥，好像是设置x264码率控制的，例如，运动类型视频需要较高的码率，可以这里控制。找到一篇文章“x264码率控制总结3——码率控制参数详解”，专门讲码率的，想对视频领域有所深入的可以了解下，反正我是不了解的。
例如，可以在Extra Options中输入下面这样数据：
vbv-bufsize=5000:vbv-maxrate=5000
视频帧率这里，也可以选择原视频同帧，软件自身是推荐用这个，如果你对视频效果不是很有把握的话。
当然，Handbrake还有很多其他功能，例如视频格式转化等，就等着大家自己慢慢探索了。
就我个人而言，就使用的上面那些截图那些功能，用了个把月了，爽歪歪，没有坑，放心用。
…
前端开发必配置：html5shiv.js和respond.min.js的作用说明！
一、做页面开发时我们基本都会需要解决的问题：
1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
2、让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，故这两种问题还是需要解决的，…
或许你不知道的12条SQL技巧
H5页面唤起微信各种功能
年初的动态化分享热潮里，基本上都提到了 URL 跳转，天猫称为统跳协议，蘑菇街称为 URL 路由。其实很多大厂都默默地做了一套 URL 跳转机制，比如说 – 微信。
…css3实现图片划过一束光闪过效果(图片光影掠过效果)
css:
.guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.guangshu:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), … 我应该使用哪些媒体查询断点？
在弄清楚要使用哪些媒体查询断点之前，我们需要查看我们要设计的设备。
我已经研究了一些常见的设备分辨率，并且大多数可以分为几类。我列出了这些类别，以及它们可以满足的分辨率：
- 移动肖像（320像素至414像素）—适用于4“至6.9”屏幕的设备。
- 移动横向（568像素至812像素）—相同，但横向。
- 平板电脑肖像（768像素至834像素）—适用于设备7“至10”
- 平板电脑横向（1024像素至1112像素）—同上，肖像上也有12英寸平板电脑
- 笔记本电脑和台式机显示器（1200px +）-变化很大，但通常为1200px以上
下一步：那么我们如何理解这些设备？
JS获取网页高度和宽度
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight…
Chrome 80 中 Iframe 跨域 Cookie 的 Samesite 问题
新项目要嵌入之前的一个项目，而且该被嵌入项目之前提供给第三方使用，他们也是用的iframe。以前都是好的，但是现在发现要是iframe的地址和父级的地址不同源，项目登录时无法设置cookie。
一开始以为后端出问题了，后来换火狐、ie edge 都是可以的，并且其他人的Chrome也有可以用的。…
近期评论