如果你留意过网页的打印模式，也就是在网页窗口按下Ctrl+P开启打印对话框预览网页，你会发现有很多的页面区块在打印模式下是不显示图片和颜色的，比如这样：
上图中，可以看到不仅仅是顶部banner的背景图片没有显示，连按钮的颜色都不显示。这是因为这些元素都是背景着色，无论是背景图片还是背景颜色，打印机会默认忽略这些着色部位以省油墨。用img标签的图片则通常不受影响（也有例外，这个文末再说）。
我们可以这样设置打印，强制开启如图的选项，这样这些着色点就可以正常打印出来了。 查看详细
衡量一个网站SEO做得好不好的一个重要指标，是页面的打开速度，而影响一张网页打开速度的一个很重要的因素，是加载图片的大小。目前网络上流行的两个优化图片的概念，分别是渐进式加载和懒加载。一个好的网站，需要同时对图片都做到渐进式加载和懒加载这两种处理。
懒加载，意思是浏览器加载页面的时候先不加载图片，视窗滚动到能显示图片的位置的时候，图片再自动加载。这样可以避免打开页面的同时因为要加载图片，导致的页面打开时间变长的问题。目前主流浏览器已经都可以不用JS实现了，只要给图片加上loading=”lazy”的属性即可。WordPress基本已经替我们自动实现了，只要是通过content或者thumbnail相关的函数调用的图片，WP自动会给它们加上这个属性：
这几年我写代码的工具一直都是Sublime Text，这两天给自己的电脑换了一台27寸的4k屏显示器，本想着一屏可以多显示几行代码，还能同时多窗口并列，这样写起代码来因该会很舒服。然而并没有那么简单，现在27寸并不是什么大尺寸显示器，在3840分辨率下，操作系统界面都显得非常“袖珍”，用起来很费眼睛。于是我只能把系统字体调成了150%，解决了大部分软件的界面字体问题。
这里的大部分，就没包括Sublime Text。Sublime Text的代码部分，可以通过Ctrl + +/-灵活调节字体大小，然而左边的文件列表就不行了。于是搜了一下修改方式，这里做个记录。
按ctrl+shift+p打开插件列表，搜索Install Package，等待软件搜索仓库信息（在底部状态栏有提示）。等加载完毕后，再搜PackageResourceViewer，并选中间那个Open Resource。
查看详细
有差不多一年没有接H5的开发了，最近又接了一个，发现以前写过的微信分享部分不管用了，踩坑，又踩坑了！
首先是服务号的设置问题，我已经在这篇老的博客里更新：https://blog.brain1981.com/1784.html
此处重复一遍更新的内容，IP地址白名单从前可以不填，现在必须填写了，要不然死活调试不出分享，开发者工具会显示无权限获取access_token！
第二个坑是微信已经更改了分享机制，如果你是点击URL进入H5页面，那么这时候即使分享请求正确，分享出去的都只能是一个文本的URL，而不是卡片式的分享格式。相关讨论和通知见这个链接：https://developers.weixin.qq.com/community/develop/doc/0000ea53f1cf60dcfc1da027a55c00
一度我还以为是微信又出了什么隐藏bug，明明debug模式和开发者工具都显示分享请求成功，死活分享不出卡片… 这也是微信的老毛病了，你说它没通知开发者么，倒也不尽然，但这种政策更改的通知就是不给你用白话讲清楚，要你自己去体会效果！
最后一个坑，是暂时没有爆的，但相信很快会爆，之前的两个分享接口 wx.onMenuShareTimeline 和 wx.onMenuShareAppMessage 即将被废弃了。需要换成 wx.updateAppMessageShareData 和 wx.updateTimelineShareData， 调用方式和参数大致没变。注意是大致没变，如果只是照搬替换，很可能又要踩坑，为造福广大苦逼码农，本文直接附上可以直接拿来用的分享代码。 查看详细
如果要阻止搜索引擎索引网站的某个页面，只要将此页面路径添加到robots.txt中。本文要讨论的不是这个，而是要让搜索引擎在收录该页面的时候，不收录这个页面上特定部分的内容。这样做有什么意义呢？举例说明：
比如在JennyStudio网站上，我们对案例页面增加了一段文字说明，这段文字呈现在正文之前，搜索引擎收录该案例页面的时候这段文字会被正文先读取，导致搜索结果的摘要部分显示了这段文字，影响收录效果。而且我们每个案例页面都有这段文字，大量重复段落内容的出现也在另一方面不利于搜索效果，所以我打算不让搜索引擎收录此段文字。
查看详细
先展示研究成果：
今天想研究一下CSS的 3D实现，但又不敢深入三角函数和线性代数的知识（多年前就已还给高数老师了），所以就浅浅地从translateX/translateY/translateZ这3个变换做一个立方体开始。这三个变换函数很简单，关键是要建立固定的坐标系，这样页面的元素就能通过这个坐标系获得立体感。
我的HTML结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="scene"> <!--方块--> <div class="cube"> <div class="cube-face cube-face-front">1</div> <div class="cube-face cube-face-right">2</div> <div class="cube-face cube-face-top">4</div> <div class="cube-face cube-face-left">3</div> <div class="cube-face cube-face-back">5</div> <div class="cube-face cube-face-bottom">6</div> </div> <!--坐标线--> <div class="line line-x"></div> <div class="line line-y"></div> <div class="line line-z"></div> </div> |
我在2018年的时候总结过一篇微信小程序支付功能开发与踩坑经验总结，当时因为网上相关文档和资源的缺乏，文章获得了很多关注和转载，并且也有很多人指出了其中的不足。主要不足之处就在于那篇文章把所有的签名字串封装都放到了前端，也就是小程序里，通过JS实现，其中还涉及到了商户key这样的敏感字段，因此是不安全的。不过在3年前微信本身对这块也没有做很严格的限制，比如我把对“https://api.mch.weixin.qq.com/pay/unifiedorder”这个接口的请求放在小程序里，那时候照样是能运行的。
近期，把小程序的基础库改成近期版本后，我发现“https://api.mch.weixin.qq.com/pay/unifiedorder”这个接口的请求已经不能放在小程序里了，即使此域名已经加入到request安全域名下也无效，微信那边会自动把你加入的这个域名过滤掉。这就表示一系列的请求必须放到服务器上完成了。因此我重新整理了一下后端的代码，PHP版本的。并且因为我的微信小程序都是基于WordPress做后端的，索性把自定义的接口这块也缝合过来。
当前最新版调试通过：
打包代码如下： 查看详细
四年前因为开发视频H5的时候踩坑，我写过一篇博客《关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题》。时隔多年，因为微信更新多次，这个坑应该是早已平了（如果还有请留言告知）。由于在那篇博客文末给的腾讯官方解决方案链接也已经失效，在此还是记录一下目前最通用的解决方案吧。
<video id="myVideo" src="..." poster="..." preload="no" autoplay="autoplay" loop="loop" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true"> <source src="..." type="video/mp4" /> <img src="..." /> </video> |
video标签的关键属性和作用
上个月写过一篇WordPress通过Rest API自定义附件上传接口，那篇文章主要介绍了如何打通前后端，利用Rest API保存“抓取”已知URL的文件。不过在更多的情况下，我们还是需要通过自己的表单上传文件。正好这个月有个项目，有个表单需要拖放文件到指定区域里，提交表单的时候上传文件。如果我用Gravity Forms给的文件上传域，它只有原生的点击选取本地的文件组件，并没有拖放选取文件的组件，所以这里就需要造一个轮子了。
先说结果，最后实现出来是这样子的：
文件拖到区域上方，区域会变色；拖入后区域内显示文件名，判断文件格式和尺寸是否合规；点击清除，会重置区域。
更新于2020年5月2日：本文第一版有一些概念错误，现已修正
基于WordPress项目的开发中，经常会需要用到AJAX请求。相较于原生的前后端实现，WordPress其实提供了两种方法可以更便捷的实现AJAX。
这个方法是现在用的比较多的。原理是前端向“/wp-admin/admin-ajax.php”这个接口发送请求，这个接口会根据请求的action值来处理数据。而根据不同的action值，利用钩子“wp_ajax_nopriv_[action]”和“wp_ajax_[action]”去编写自己的程序处理和返回数据。
如果是要写数据，先在页面生成nonce：
1 | $xprofile_nonce = wp_create_nonce ('xprofile_nonce'); |
